/**
 * Waterwheel-skinned wp-login.php.
 *
 * Editorial login screen — applies the §15.2 account-hero / §15.3 identity-
 * card treatment to wp-login.php (login, lost-password, reset). Dark obsidian
 * backdrop with optional photo + scrim, glass form card, italic DM Serif
 * Display wordmark, pill primary button, square-corner card, hairline borders.
 *
 * Self-contained: wp-login.php is outside the theme so theme.json presets
 * aren't available — values are inlined but kept in lockstep with
 * THEME_STANDARDS.md §1, §2, §4, §11, §15. The hero photo URL is set as a
 * `--wwh-login-bg` custom property by login-branding.php at runtime so
 * volunteers / committee can swap the image via filter without editing CSS.
 *
 * Phase 2 PR-H. Designed in MEMBERSHIP_PLAN.md, restyled to THEME_STANDARDS.md.
 */

/* =================================================================
   Page backdrop — full-bleed obsidian with optional photo + scrim
   matching §15.2 .acct-hero (opacity .45 + 0.55 → 0.85 gradient).
   ================================================================= */
body.login {
	background: #18140F;
	color: #fff;
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	min-height: 100vh;
	margin: 0;
	position: relative;
}

body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: var(--wwh-login-bg, none);
	background-size: cover;
	background-position: center;
	opacity: 0.45;
	pointer-events: none;
}

body.login::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(10, 8, 6, 0.55) 0%, rgba(10, 8, 6, 0.4) 40%, rgba(10, 8, 6, 0.85) 100%);
	pointer-events: none;
}

body.login #login,
body.login .language-switcher,
body.login .privacy-policy-page-link {
	position: relative;
	z-index: 1;
}

/* =================================================================
   Login column
   ================================================================= */
#login {
	width: 380px;
	padding-top: 8vh;
}

/* =================================================================
   Wordmark — wheel mark + eyebrow + italic DM Serif Display name,
   stacked above the glass form card. Replaces the default WP logo.
   ================================================================= */
body.login h1 a {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g fill='none' stroke='white' stroke-linecap='round'><circle cx='30' cy='30' r='27' stroke-width='5'/><circle cx='30' cy='30' r='6' stroke-width='2.5'/><line x1='30' y1='3' x2='30' y2='24' stroke-width='2'/><line x1='30' y1='36' x2='30' y2='57' stroke-width='2'/><line x1='3' y1='30' x2='24' y2='30' stroke-width='2'/><line x1='36' y1='30' x2='57' y2='30' stroke-width='2'/><line x1='10.9' y1='10.9' x2='25.8' y2='25.8' stroke-width='1.75'/><line x1='34.2' y1='34.2' x2='49.1' y2='49.1' stroke-width='1.75'/><line x1='49.1' y1='10.9' x2='34.2' y2='25.8' stroke-width='1.75'/><line x1='25.8' y1='34.2' x2='10.9' y2='49.1' stroke-width='1.75'/></g></svg>");
	background-size: 44px 44px;
	background-position: top center;
	background-repeat: no-repeat;
	width: 100%;
	height: auto;
	margin: 0 0 1.5rem;
	padding: 56px 0 0;
	font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-indent: 0;
	color: #fff;
	overflow: visible;
	text-decoration: none;
	display: block;
	text-align: center;
}

/* Eyebrow between the wheel mark and the wordmark */
body.login h1 a::before {
	content: "Member portal · sign in";
	display: block;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 0.5rem;
}

/* On lost-password / reset / register screens, swap the eyebrow copy. */
body.login-action-lostpassword h1 a::before { content: "Member portal · password reset"; }
body.login-action-rp h1 a::before,
body.login-action-resetpass h1 a::before    { content: "Member portal · choose a new password"; }
body.login-action-register h1 a::before     { content: "Member portal · register"; }

/* =================================================================
   Glass form card — mirrors §15.3 .id-card on the dark hero.
   Square corners, hairline border, soft white-translucent fill,
   backdrop blur for depth on busy photography.
   ================================================================= */
.login form {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: none;
	border-radius: 0;
	box-shadow: none;
	padding: 1.75rem 1.75rem 1.5rem;
	margin: 0;
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Reorder the form children so the wp_login_form-injected "Not a member yet?"
   paragraph drops to the bottom of the card instead of sitting between the
   password field and the submit row. WP's HTML order is fixed; flex order
   is the cleanest fix. */
.login form > p,
.login form > div { order: 2; }
.login form > p:first-child { order: 1; }                /* Username */
.login form > .user-pass-wrap { order: 1; }              /* Password */
.login form > .forgetmenot { order: 3; }                 /* Remember me */
.login form > .submit { order: 4; }                      /* Log In button */
.login form > .wwh-login__join { order: 5; }             /* Join link last */

.login label {
	color: rgba(255, 255, 255, 0.85);
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* =================================================================
   Inputs — pill radius (§4 / §11 dark variant), transparent fill,
   hairline-on-dark border, white text.
   ================================================================= */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-size: 1rem;
	padding: 0.625rem 0.875rem;
	border-radius: 9999px;
	box-shadow: none;
}

.login form .input::placeholder,
.login input[type="text"]::placeholder,
.login input[type="password"]::placeholder,
.login input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: #fff;
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: none;
}

/* Password-show eye button — dark ink on the button, not the bright blue. */
.login .wp-pwd button.button {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.65);
}

.login .wp-pwd button.button:hover,
.login .wp-pwd button.button:focus {
	color: #fff;
	background: transparent;
	border: none;
	box-shadow: none;
}

.login .wp-pwd button.button .dashicons {
	color: inherit;
}

/* =================================================================
   "Remember me" checkbox row
   ================================================================= */
.login .forgetmenot {
	color: rgba(255, 255, 255, 0.85);
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.login input[type="checkbox"] {
	accent-color: #fff;
}

/* =================================================================
   Primary button (§7 / §11 footer pattern — white pill on dark)
   ================================================================= */
body.login.wp-core-ui .button-primary,
body.login.wp-core-ui .button-primary:link,
body.login.wp-core-ui .button-primary:visited,
body.login.wp-core-ui .button-primary:focus,
body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:active,
body.login.wp-core-ui .button-primary:focus-visible,
body.login.wp-core-ui input[type="submit"].button-primary {
	background: #fff;
	border: 1px solid #fff;
	color: #18140F;
	text-shadow: none;
	box-shadow: none;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 0 1.5rem !important;
	height: 42px !important;
	min-height: 42px !important;
	line-height: 40px !important;
	box-sizing: border-box;
	border-radius: 9999px;
	transform: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:focus {
	background: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.85);
	color: #18140F;
}

body.login.wp-core-ui .button-primary:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* =================================================================
   "Lost your password?" / "Back to site" links below the form.
   These sit OUTSIDE the glass card on the raw photo+scrim, so they
   need their own subtle glass surface for legibility regardless of
   what's in the photograph behind. Compact pill shape echoes §13's
   pillbox vocabulary.
   ================================================================= */
/* Pull the nav links into the same glass panel as the form so they sit
   under the "Not a member yet?" join link as one continuous card. Plain
   white text on the shared translucent fill. */
#nav,
#backtoblog {
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	border-right: 1px solid rgba(255, 255, 255, 0.18);
	border-top: none;
	border-bottom: none;
	border-radius: 0;
	display: block;
	width: auto;
	margin: 0 !important;
	padding: 0.625rem 1.75rem !important;
	line-height: 1.5;
}

#backtoblog {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	padding-bottom: 1rem !important;
}

body.login #nav,
body.login #backtoblog,
body.login #nav a,
body.login #nav a:link,
body.login #nav a:visited,
body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a,
body.login #backtoblog a:link,
body.login #backtoblog a:visited,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus {
	color: #fff !important;
}

body.login #nav a,
body.login #backtoblog a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	padding-bottom: 1px;
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus {
	border-bottom-color: #fff;
}

/* =================================================================
   "Not a member yet? Join the Waterwheel →" — injected by login_form
   ================================================================= */
.wwh-login__join {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	text-align: center;
	color: rgba(255, 255, 255, 0.65);
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-size: 0.95rem;
	font-style: italic;
}

.wwh-login__join a {
	display: inline-block;
	margin-left: 0.25rem;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-style: normal;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff;
	padding-bottom: 2px;
}

.wwh-login__join a:hover,
.wwh-login__join a:focus {
	color: rgba(255, 255, 255, 0.85);
	border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* =================================================================
   Messages (success / error / info) — translucent on dark
   ================================================================= */
.login .message,
.login #login_error,
.login .notice {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-left: 3px solid #fff;
	border-radius: 0;
	color: #fff;
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	box-shadow: none;
	padding: 0.75rem 1rem;
}

.login #login_error {
	border-left-color: #f1a8a0;
}

.login .message a,
.login #login_error a,
.login .notice a {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

/* =================================================================
   Language switcher / privacy footer — small, muted on dark
   ================================================================= */
.language-switcher,
.privacy-policy-page-link {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.language-switcher select {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	padding: 0.4rem 0.6rem;
	border-radius: 9999px;
}

.language-switcher .button {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	border-radius: 9999px;
	box-shadow: none;
	text-shadow: none;
}

.privacy-policy-page-link a {
	color: rgba(255, 255, 255, 0.75);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
	padding-bottom: 1px;
}

.privacy-policy-page-link a:hover {
	color: #fff;
	border-bottom-color: #fff;
}

body.login a:hover,
body.login a:focus {
	box-shadow: none;
}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 480px) {
	#login {
		width: auto;
		padding: 6vh 1.25rem 0;
	}
	body.login h1 a { font-size: 1.6rem; }
}