/* ==========================================================================
   CodeFlavors — Auth pages (login, register, reset / create password)

   Self-contained: design tokens are declared here so the pages look right on
   any network theme. Layout = a centered card (~440px) per the design system.
   ========================================================================== */

:root {
	--cf-green-cta: #268050;
	--cf-green-cta-hover: #1f7a4a;
	--cf-green-soft: #e6f4ea;
	--cf-green-on-soft: #10401f;
	--cf-blue-cta: #1f6fb2;
	--cf-blue-cta-hover: #1a5f99;
	--cf-link: #006ba1;
	--cf-link-hover: #00557f;

	--cf-surface: #ffffff;
	--cf-text: #1f2733;
	--cf-text-heading: #0b1220;
	--cf-text-muted: #5b6675;
	--cf-border: #d9e1ee;
	--cf-field: #e8f0fe;
	--cf-field-border: #c2d2ea;
	--cf-field-border-strong: #9fb3d1;

	--cf-danger: #dc2626;
	--cf-danger-soft: #fdecec;

	--cf-radius-md: 8px;
	--cf-radius-lg: 10px;
	--cf-radius-xl: 16px;
	--cf-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--cf-shadow-focus: 0 0 0 3px rgba(52, 135, 206, 0.35);

	--cf-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Hide the theme's duplicate page title on these pages (the card has its own
   heading). The body class is added by Page_Abstract::hide_theme_title(). */
.cfdm-hide-page-title .wp-block-post-title,
.cfdm-hide-page-title .wp-block-post-title.wp-block-post-title,
.cfdm-hide-page-title .entry-title,
.cfdm-hide-page-title .page-title {
	display: none !important;
}

/* --- layout -------------------------------------------------------------- */

.cf-auth {
	display: flex;
	justify-content: center;
	padding: 24px 16px 40px;
	font-family: var(--cf-font-ui);
	color: var(--cf-text);
}

.cf-auth *,
.cf-auth *::before,
.cf-auth *::after {
	box-sizing: border-box;
}

.cf-auth__card {
	width: 100%;
	max-width: 440px;
	padding: 32px;
	background: var(--cf-surface);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-xl);
	box-shadow: var(--cf-shadow-md);
}

/* Registration has more fields — give it a touch more room. */
.cf-auth__card--wide {
	max-width: 520px;
}

.cf-auth__card h1 {
	margin: 0 0 8px;
	text-align: center;
	font-family: var(--cf-font-ui);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--cf-text-heading);
}

/* Intro line ("Don't have an account?" / "Already have an account?"). */
.cf-auth__card > p {
	margin: 0 0 20px;
	text-align: center;
	font-size: 14px;
	color: var(--cf-text-muted);
}

.cf-auth__card > p a {
	color: var(--cf-link);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cf-auth__card > p a:hover {
	color: var(--cf-link-hover);
}

/* --- visually hidden labels --------------------------------------------- */

.cf-auth .screen-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cf-auth .req {
	color: var(--cf-danger);
}

/* --- fields -------------------------------------------------------------- */

.cf-auth form br {
	display: none;
}

.cf-auth .field-wrap {
	margin-bottom: 14px;
}

.cf-auth input[type="text"],
.cf-auth input[type="email"],
.cf-auth input[type="password"],
.cf-auth select,
.cf-auth textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	font-size: 16px;
	font-family: var(--cf-font-ui);
	line-height: normal;
	color: var(--cf-text);
	background: var(--cf-field);
	border: 1px solid var(--cf-field-border);
	border-radius: var(--cf-radius-lg);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cf-auth textarea {
	min-height: 96px;
	line-height: 1.5;
	resize: vertical;
}

.cf-auth input::placeholder,
.cf-auth textarea::placeholder {
	color: var(--cf-text-muted);
}

.cf-auth input:hover,
.cf-auth select:hover,
.cf-auth textarea:hover {
	border-color: var(--cf-field-border-strong);
}

.cf-auth input:focus,
.cf-auth select:focus,
.cf-auth textarea:focus {
	outline: none;
	border-color: var(--cf-blue-cta);
	box-shadow: var(--cf-shadow-focus);
}

/* --- submit buttons ------------------------------------------------------ */

.cf-auth .button,
.cf-auth button.button {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 8px 0 0;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 600;
	font-family: var(--cf-font-ui);
	text-align: center;
	color: #fff;
	background: var(--cf-green-cta);
	border: 0;
	border-radius: var(--cf-radius-md);
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
}

.cf-auth .button:hover,
.cf-auth button.button:hover {
	background: var(--cf-green-cta-hover);
	color: #fff;
}

.cf-auth .button:active,
.cf-auth button.button:active {
	transform: translateY(1px);
}

.cf-auth .button:focus-visible,
.cf-auth button.button:focus-visible {
	outline: none;
	box-shadow: var(--cf-shadow-focus);
}

.cf-auth p.submit {
	margin: 8px 0 0;
}

/* --- in-form rows (remember me, etc.) ----------------------------------- */

.cf-auth form p {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--cf-text);
}

.cf-auth #rememberme {
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: middle;
	accent-color: var(--cf-blue-cta);
}

/* --- helper links (forgot password, back to login) ---------------------- */

.cf-auth .forgot_pass,
.cf-auth__card > a {
	display: block;
	margin-top: 16px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--cf-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cf-auth .forgot_pass:hover,
.cf-auth__card > a:hover {
	color: var(--cf-link-hover);
}

.cf-auth hr {
	margin: 24px 0;
	border: 0;
	border-top: 1px solid var(--cf-border);
}

/* --- alerts -------------------------------------------------------------- */

.cf-auth .alert {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: var(--cf-radius-md);
	font-size: 14px;
}

.cf-auth .alert p {
	margin: 0 0 6px;
}

.cf-auth .alert p:last-child {
	margin-bottom: 0;
}

.cf-auth .alert-danger {
	color: #9b1c1c;
	background: var(--cf-danger-soft);
	border: 1px solid #f3c0c0;
}

.cf-auth .alert-info {
	color: var(--cf-green-on-soft);
	background: var(--cf-green-soft);
	border: 1px solid #bfe3c9;
}

@media (max-width: 480px) {
	.cf-auth__card {
		padding: 24px 20px;
	}

	.cf-auth__card h1 {
		font-size: 24px;
	}
}