/*
 * SONGREPS branded wp-login.php
 *
 * Re-skins the WordPress login, lost-password, and reset pages
 * with the SONGREPS design system. The page is rendered by core
 * wp-login.php; we only restyle (no markup overrides), so every
 * WP-native auth feature (nonces, rate limiting, password reset
 * tokens) keeps working.
 *
 * Architectural model (canonical mockup at
 * docs/design/entry-page-mockups.html):
 *
 *   Desktop (≥768px): #login is a two-column grid. The H1
 *   (brand badge) plays the role of .entry-brand-column —
 *   sticky to viewport top at 100vh, badge flex-centered
 *   inside, so the badge stays at viewport vertical center
 *   even as the right column scrolls. All other #login
 *   children (login_message output, form, #nav, #backtoblog)
 *   auto-flow into column 2.
 *
 *   The wp-login.php DOM is fixed — every form / nav /
 *   message element is a direct child of #login alongside the
 *   H1 — so we can't add a wrapper div around column 2's
 *   children to make it a flex-column-center the way
 *   /sign-up/ does. Column 2 children stack at the top of
 *   the column. Acceptable: the badge is the dominant visual
 *   focal point and IT centers; column 2 starts comfortably
 *   below the top padding.
 *
 *   /login/ (and the lostpassword / reset siblings) get a
 *   translucent form card around #loginform et al. — the form
 *   on its own would float on the gradient with no anchor.
 *   This is the key visual difference from /sign-up/, which
 *   doesn't use a card (the wizard step structure provides
 *   its own containment).
 *
 *   Mobile (<768px): single column. H1 collapses to a 120px
 *   round badge above the form. No sticky behavior.
 *
 * Token sourcing:
 *   --wp--preset--color--*  comes from theme.json, injected on
 *                           login_enqueue_scripts. If those vars
 *                           are absent (theme broken / older WP),
 *                           the var(..., #fallback) form keeps
 *                           the page rendering with design-system
 *                           defaults.
 *
 * Design references:
 *   docs/design/entry-page-mockups.html (canonical mockup)
 *   docs/design/design-system.md
 *
 * Voice references:
 *   docs/brand/voice-and-style.md
 *   docs/brand/content-style-guide.md "Functional UI copy"
 */

/* -----------------------------------------------------------------------
 * Local fallback tokens. theme.json variables override these
 * when present (cascade: wp_get_global_stylesheet's :root block
 * is injected AFTER this stylesheet, so its values win — see
 * class-login.php).
 * --------------------------------------------------------------------- */
:root {
	--songreps-cream: #fffaf0;
	--songreps-card-bg: rgba( 255, 251, 242, 0.7 );
	--songreps-card-border: rgba( 43, 55, 68, 0.08 );
	--songreps-input-bg: rgba( 255, 255, 255, 0.85 );
	--songreps-border-input: rgba( 43, 55, 68, 0.16 );
	--songreps-shadow-soft: 0 1px 3px rgba( 42, 55, 68, 0.08 );
	--songreps-shadow-badge: 0 6px 20px rgba( 43, 55, 68, 0.16 );
	--songreps-shadow-badge-lg: 0 12px 48px rgba( 43, 55, 68, 0.18 );
	--songreps-error-bg: rgba( 168, 90, 74, 0.08 );
	--songreps-error-border: rgba( 168, 90, 74, 0.4 );
	--songreps-error-text: #6b3a2e;
	--songreps-success-bg: rgba( 122, 140, 111, 0.08 );
	--songreps-success-border: rgba( 122, 140, 111, 0.4 );
	--songreps-success-text: #4d5e44;
}

/* -----------------------------------------------------------------------
 * Body chrome — manila→white gradient (matches
 * body.songreps-entry-point-page in intake-form.css so /login/,
 * /forgot-password/, /reset-password/ read as siblings of
 * /sign-up/). Gradient lives on body so it bleeds edge-to-edge.
 * --------------------------------------------------------------------- */
body.login,
body.login.wp-core-ui {
	background: linear-gradient(
		180deg,
		var( --wp--preset--color--background, #f4ede0 ) 0%,
		#f7f2e8 35%,
		#ffffff 100%
	);
	color: var( --wp--preset--color--foreground, #2a3744 );
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.55;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

/* -----------------------------------------------------------------------
 * #login is wrapped by the entry-page chrome (see class-login.php
 * open_entry_chrome() / entry-page.css). #login itself just
 * provides a flow-content container inside .entry-content-inner.
 * --------------------------------------------------------------------- */
#login {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------
 * H1 wordmark — hidden visually because the entry-page chrome
 * renders its own brand badge in .entry-brand-column. Keeping
 * the H1 in DOM (just visually hidden) preserves the page-level
 * landmark for screen readers — the "SONGREPS" inside the H1
 * still announces correctly.
 * --------------------------------------------------------------------- */
#login h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

#login h1 a {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-image: none !important; /* nuke WP's W logo */
	background-color: transparent;
	box-shadow: none;
	text-decoration: none;
	text-indent: 0; /* WP defaults to -9999 to hide text */
	overflow: visible;
	border-radius: 50%;
}

#login h1 a:hover .songreps-login-logo-img,
#login h1 a:focus-visible .songreps-login-logo-img {
	box-shadow: 0 0 0 4px rgba( 181, 134, 85, 0.18 );
}

#login h1 a:focus-visible {
	outline: none;
}

/* The PNG ships at 512×512; explicit width/height locks layout
 * and the browser scales via CSS. */
.songreps-login-logo-img {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	flex-shrink: 0;
	transition: box-shadow 0.15s ease;
	box-shadow: var( --songreps-shadow-badge );
}

#login h1 a .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------
 * Eyebrow + headline injected via login_message filter (see
 * Songreps_Login::inject_tagline). Action-aware copy (Log in /
 * Forgot password / New password) lives in PHP. Typography
 * mirrors .entry-eyebrow / .entry-headline from the mockup.
 * --------------------------------------------------------------------- */
.songreps-login-eyebrow {
	font-family: var( --wp--preset--font-family--display, 'Manrope', system-ui, sans-serif );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent, #b58655 );
	text-align: center;
	margin: 0 0 20px;
}

.songreps-login-headline {
	font-family: var( --wp--preset--font-family--display, 'Manrope', system-ui, sans-serif );
	font-size: 30px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--foreground, #2a3744 );
	text-align: center;
	margin: 0 0 32px;
}

.songreps-login-headline em {
	font-style: italic;
	font-weight: 400;
	color: var( --wp--preset--color--primary, #5b6f7d );
}

@media ( min-width: 768px ) {
	.songreps-login-headline {
		font-size: clamp( 32px, 3.6vw, 44px );
	}
}

/* -----------------------------------------------------------------------
 * Form card — translucent container with hairline border and
 * backdrop blur. Per the mockup: visual containment for the
 * short auth forms (2 fields + submit) without competing with
 * the page gradient. Single hairline border, no drop shadow —
 * the gradient carries the depth.
 *
 * login_message renders OUTSIDE the form, so any WP messages
 * (e.g. "Check your email") land above the card on the gradient.
 * --------------------------------------------------------------------- */
#loginform,
#lostpasswordform,
#resetpassform,
#registerform {
	background: var( --songreps-card-bg );
	border: 1px solid var( --songreps-card-border );
	border-radius: 16px;
	padding: 24px 20px;
	margin: 0;
	box-shadow: none;
	overflow: visible;
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
}

@media ( min-width: 768px ) {
	#loginform,
	#lostpasswordform,
	#resetpassform,
	#registerform {
		padding: 36px 32px;
	}
}

/* -----------------------------------------------------------------------
 * Form labels.
 * --------------------------------------------------------------------- */
#loginform label,
#lostpasswordform label,
#resetpassform label,
#registerform label {
	display: block;
	margin-bottom: 6px;
	color: var( --wp--preset--color--foreground, #2a3744 );
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* WP wraps each <label>/<input> pair in <p>. */
#loginform p,
#lostpasswordform p,
#resetpassform p,
#registerform p {
	margin: 0 0 18px;
}

/* -----------------------------------------------------------------------
 * Text inputs. Per the mockup: 12px 14px padding, 10px radius,
 * translucent white fill, bronze focus ring with soft halo.
 * iOS zoom prevention: keep font-size ≥ 16px on the input.
 * --------------------------------------------------------------------- */
.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
.login input[type="url"],
.login input[type="number"] {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 12px 14px;
	margin: 0;
	background: var( --songreps-input-bg );
	border: 1px solid var( --songreps-border-input );
	border-radius: 10px;
	box-shadow: none;
	color: var( --wp--preset--color--foreground, #2a3744 );
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
	line-height: 1.4;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus,
.login input[type="url"]:focus,
.login input[type="number"]:focus {
	border-color: var( --wp--preset--color--accent, #b58655 );
	box-shadow: 0 0 0 3px rgba( 181, 134, 85, 0.15 );
	outline: none;
}

.login input[type="text"]::placeholder,
.login input[type="email"]::placeholder,
.login input[type="password"]::placeholder {
	color: var( --wp--preset--color--muted, #8c8478 );
	opacity: 1;
}

/* WP renders a "Show password" toggle as <button class="button button-secondary wp-hide-pw">
 * absolutely positioned over the password input. Match its hit
 * area to our input height. */
.login .button.wp-hide-pw {
	height: 44px;
	min-width: 40px;
	background: transparent;
	border: none;
	box-shadow: none;
	color: var( --wp--preset--color--muted, #8c8478 );
}

.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
	background: transparent;
	color: var( --wp--preset--color--foreground, #2a3744 );
	box-shadow: none;
	outline: none;
}

.login .button.wp-hide-pw:focus-visible {
	box-shadow: 0 0 0 2px var( --wp--preset--color--accent, #b58655 );
	border-radius: 6px;
}

.login .user-pass-wrap .wp-pwd {
	position: relative;
}

/* -----------------------------------------------------------------------
 * Remember-me row. WP's default login.css floats .forgetmenot
 * left so it sits in the same row as the submit button (legacy
 * "right-side submit" layout). We want Remember Me on its OWN
 * row above a full-width submit button.
 * --------------------------------------------------------------------- */
.login form .forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
	width: 100%;
	margin: 8px 0 20px;
	padding: 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	color: var( --wp--preset--color--muted, #8c8478 );
	font-weight: 400;
}

.login form .forgetmenot label {
	margin: 0;
	font-weight: 400;
	color: var( --wp--preset--color--muted, #8c8478 );
	cursor: pointer;
}

.login input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var( --wp--preset--color--accent, #b58655 );
	cursor: pointer;
}

.login input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent, #b58655 );
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Submit button (primary). Per the mockup: dark foreground
 * (#2a3744), pill radius, full-width within card.
 * --------------------------------------------------------------------- */
.login .button-primary,
.login .submit input[type="submit"],
.login input[type="submit"].button-primary,
.login .button.button-large {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 14px 24px;
	margin: 0;
	background: var( --wp--preset--color--foreground, #2a3744 );
	border: none;
	border-radius: 999px;
	box-shadow: none;
	color: #fff;
	font-family: var( --wp--preset--font-family--display, 'Manrope', system-ui, sans-serif );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.login .button-primary:hover,
.login .submit input[type="submit"]:hover,
.login input[type="submit"].button-primary:hover {
	background: #1f2a35;
	color: #fff;
	box-shadow: none;
}

.login .button-primary:active,
.login .submit input[type="submit"]:active {
	transform: translateY( 1px );
}

.login .button-primary:focus,
.login .submit input[type="submit"]:focus,
.login input[type="submit"].button-primary:focus {
	background: #1f2a35;
	box-shadow: none;
	outline: none;
}

.login .button-primary:focus-visible,
.login .submit input[type="submit"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent, #b58655 );
	outline-offset: 2px;
}

/* WP wraps the submit button in <p class="submit"> with stale
 * defaults assuming the floated forgetmenot pattern. Reset. */
.login #loginform p.submit,
.login #lostpasswordform p.submit,
.login #resetpassform p.submit,
.login #registerform p.submit,
.login form p.submit {
	display: flow-root;
	clear: both;
	margin: 0;
	padding: 0;
}

/* -----------------------------------------------------------------------
 * Below-the-form nav (Lost your password?, Back to site).
 * WP renders these as #nav and #backtoblog — both default
 * absolutely-positioned beneath the form. Restyle as quiet text
 * links centered under the card, matching the mockup's
 * .entry-meta row.
 * --------------------------------------------------------------------- */
.login #nav,
.login #backtoblog {
	margin: 0;
	padding: 0 8px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	text-align: center;
}

.login #nav {
	margin-top: 24px;
}

.login #backtoblog {
	margin-top: 4px;
}

.login #nav a,
.login #backtoblog a {
	display: inline-block;
	color: var( --wp--preset--color--primary, #5b6f7d );
	text-decoration: none;
	font-weight: 500;
	padding: 6px 12px;
	transition: color 0.15s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
	color: var( --wp--preset--color--accent, #b58655 );
	text-decoration: underline;
	text-underline-offset: 3px;
	box-shadow: none;
}

.login #nav a:focus-visible,
.login #backtoblog a:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent, #b58655 );
	outline-offset: 2px;
	border-radius: 4px;
}

/* -----------------------------------------------------------------------
 * Brand footer (rendered by login_footer action). Sits OUTSIDE
 * #login on the page background.
 * --------------------------------------------------------------------- */
.songreps-login-brand-footer {
	max-width: 480px;
	margin: 32px auto 16px;
	padding: 0 24px;
	color: var( --wp--preset--color--muted, #8c8478 );
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-align: center;
	opacity: 0.8;
}

/* -----------------------------------------------------------------------
 * Error / message containers. WP renders errors as #login_error
 * and messages as .message — both appear above the form.
 * --------------------------------------------------------------------- */
.login #login_error,
.login .notice.notice-error,
.login .notice-error {
	background: var( --songreps-error-bg );
	border: 0.5px solid var( --songreps-error-border );
	border-left: 3px solid var( --wp--preset--color--error, #a85a4a );
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 16px;
	box-shadow: none;
	color: var( --songreps-error-text );
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.login #login_error a,
.login .notice-error a {
	color: var( --songreps-error-text );
	text-decoration: underline;
	font-weight: 500;
}

.login .message,
.login .notice.notice-success,
.login .success {
	background: var( --songreps-success-bg );
	border: 0.5px solid var( --songreps-success-border );
	border-left: 3px solid var( --wp--preset--color--success, #7a8c6f );
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 16px;
	box-shadow: none;
	color: var( --songreps-success-text );
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.login .message a,
.login .notice-success a {
	color: var( --songreps-success-text );
	text-decoration: underline;
	font-weight: 500;
}

/* -----------------------------------------------------------------------
 * Hide WP elements that don't belong in our skin.
 * --------------------------------------------------------------------- */
.login .privacy-policy-page-link {
	display: none;
}

.login .language-switcher {
	display: none;
}

/* -----------------------------------------------------------------------
 * Lost password / reset password layout tweaks. The reset form
 * adds a password-strength meter — keep it but tone down.
 * --------------------------------------------------------------------- */
.login .pw-weak {
	margin: -8px 0 16px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	color: var( --wp--preset--color--muted, #8c8478 );
}

.login #pass-strength-result {
	margin: 8px 0 16px;
	padding: 8px 12px;
	border-radius: 6px;
	border: 0.5px solid var( --songreps-card-border );
	background: var( --songreps-input-bg );
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	color: var( --wp--preset--color--muted, #8c8478 );
	text-align: center;
}

.login #pass-strength-result.short,
.login #pass-strength-result.bad {
	background: var( --songreps-error-bg );
	border-color: var( --songreps-error-border );
	color: var( --songreps-error-text );
}

.login #pass-strength-result.good,
.login #pass-strength-result.strong {
	background: var( --songreps-success-bg );
	border-color: var( --songreps-success-border );
	color: var( --songreps-success-text );
}

/* -----------------------------------------------------------------------
 * DESKTOP TWO-COLUMN ENTRY-PAGE GRID (≥768px).
 *
 * Mirrors .entry-page-grid in intake-form.css: two-column grid,
 * brand badge sticky in column 1, content stack in column 2.
 *
 * The wp-login.php DOM is fixed — we can't add wrappers — so:
 *   - #login becomes the grid container
 *   - #login h1 spans every row in column 1, position: sticky;
 *     top: 0; height: 100vh; flex-centered → behaves as the
 *     mockup's .entry-brand-column
 *   - Every other #login child auto-flows into column 2 in DOM
 *     order (login_message output, form, #nav, #backtoblog),
 *     each capped at 480px to match the mockup's
 *     .entry-content-inner
 *
 * Column 2 vertical centering when content is short isn't
 * possible without a wrapper around the column 2 children, so
 * column 2 starts at the top of the grid and the ~80px top
 * padding gives a comfortable gap. The badge is the dominant
 * visual focal point and IT centers via sticky.
 *
 * The brand footer (.songreps-login-brand-footer) renders
 * OUTSIDE #login via the login_footer hook — stays as a 480px
 * centered block below the grid.
 * --------------------------------------------------------------------- */
/* Desktop two-column chrome rules removed 2026-05-10 — entry-page.css
 * now owns the chrome layout (the wp-login.php #login container is
 * wrapped by class-login.php's open_entry_chrome / close_entry_chrome
 * hooks, putting #login inside .entry-content-inner). The legacy
 * #login grid rules here fought the outer chrome and pushed the form
 * 413px to the right. login.css below this point styles the FORM
 * INTERNALS only (inputs, buttons, error messages, links). */

/* -----------------------------------------------------------------------
 * Reduced-motion.
 * --------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.login input,
	.login .button-primary,
	.login input[type="submit"],
	.songreps-login-logo-img {
		transition: none;
	}
}