/*
 * Native wp-login.php branding (v0.11.18).
 * Enqueued only on wp-login.php via inc/login-branding.php.
 * Covers: login, lost-password, reset-password (set new password),
 * reset confirmation, register.
 *
 * Palette mirrors assets/css/variables.css (hard-coded here — wp-login.php
 * does not load the theme's :root custom properties):
 *   navy var(--navy)  gold var(--gold)  gold-hover var(--gold-hover)  gold-dark var(--gold-dark)
 *   offwhite var(--offwhite)  charcoal var(--charcoal)  coral var(--coral)  white var(--white)
 * Navy page background gives visual continuity with the v0.11.17
 * password-reset email's navy header band — the user lands here
 * straight from that email.
 */

body.login {
	background: var(--navy);
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--charcoal);
}

/* Subtle depth so the flat navy isn't dead. */
body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at 20% 15%, rgba(255, 155, 3, 0.10) 0, transparent 45%),
		radial-gradient(circle at 85% 90%, rgba(255, 255, 255, 0.05) 0, transparent 40%);
	pointer-events: none;
}

#login {
	width: 360px;
	padding: 6% 0 4%;
}

/* Logo — replace the WordPress mark with the Chiggle white logo. */
#login h1 {
	margin-bottom: 8px;
}
#login h1 a {
	background-image: url('../img/logo-gold.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 132px;
	height: 132px;
	margin: 0 auto;
	text-indent: -9999px;
	overflow: hidden;
}

/* Brand intro line (from the login_message filter). */
.chiggle-login-intro {
	text-align: center;
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
	line-height: 1.55;
	max-width: 340px;
	margin: 0 auto 20px;
	font-family: 'DM Sans', system-ui, sans-serif;
}

/* The form card. */
.login form {
	background: var(--white);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28);
	padding: 32px 28px;
	margin-top: 16px;
}

.login label {
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--charcoal);
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	font-size: 15px;
	color: var(--charcoal);
	background: var(--offwhite);
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	padding: 12px 14px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(18, 43, 105, 0.12);
	outline: 0;
}

/* Primary submit — matches the v0.11.17 email CTA (gold bg, white text)
   for cross-surface consistency. */
.wp-core-ui .button-primary {
	background: var(--gold);
	border: 0;
	border-radius: 8px;
	color: var(--white);
	font-family: 'Poppins', 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	padding: 11px 22px;
	text-shadow: none;
	box-shadow: none;
	transition: background .15s ease;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--gold-hover);
	color: var(--white);
	box-shadow: 0 0 0 3px rgba(255, 155, 3, 0.30);
}

/* Secondary buttons (e.g. "Generate Password" on the reset screen,
   show/hide-password eye). Outline style.
   :not(.button-primary) is load-bearing — WP's submit carries BOTH
   `button` and `button-primary` classes; without the exclusion this
   equal-specificity rule (defined after .button-primary) would override
   the gold CTA and render it as this outline style. */
.wp-core-ui .button:not(.button-primary),
.wp-core-ui .button-secondary {
	background: var(--white);
	border: 1px solid var(--navy);
	border-radius: 8px;
	color: var(--navy);
	font-family: 'Poppins', 'DM Sans', sans-serif;
	font-weight: 500;
	box-shadow: none;
}
.wp-core-ui .button:not(.button-primary):hover,
.wp-core-ui .button-secondary:hover {
	background: var(--navy);
	color: var(--white);
}
/* Show/hide-password toggle sits inside the field — keep it quiet. */
.login .button.wp-hide-pw {
	border: 0;
	background: transparent;
	color: var(--gold-dark);
}
.login .button.wp-hide-pw:hover {
	background: transparent;
	color: var(--navy);
}

/* Password-strength meter on the reset screen. */
#pass-strength-result {
	border-radius: 6px;
	font-family: 'DM Sans', system-ui, sans-serif;
	border: 1px solid var(--gray-200);
}
#pass-strength-result.strong { background: var(--green-pale); border-color: var(--green-pale); }
#pass-strength-result.good   { background: var(--gold-pale); border-color: #ffd88a; }
#pass-strength-result.bad,
#pass-strength-result.short  { background: var(--error-pale); border-color: #FFCDD2; }

/* Links below the card (Lost password / Register / Back to site). */
.login #nav,
.login #backtoblog {
	text-align: center;
	padding: 0;
	margin: 18px auto 0;
}
.login #nav a,
.login #backtoblog a {
	color: rgba(255, 255, 255, 0.7);
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 13px;
	text-decoration: none;
	transition: color .15s ease;
}
.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--gold);
}

/* Notices. */
.login .message,
.login .success {
	background: var(--white);
	border-left: 4px solid var(--navy);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	color: var(--charcoal);
	font-family: 'DM Sans', system-ui, sans-serif;
}
.login .success {
	border-left-color: var(--gold);
}
.login #login_error {
	background: var(--white);
	border-left: 4px solid var(--coral);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	color: var(--charcoal);
	font-family: 'DM Sans', system-ui, sans-serif;
}

/* Privacy-policy link block (if present). */
.login .privacy-policy-page-link a {
	color: rgba(255, 255, 255, 0.6);
	font-family: 'DM Sans', system-ui, sans-serif;
}
.login .privacy-policy-page-link a:hover {
	color: var(--gold);
}

/* "Remember Me" + interim-login tidy-ups. */
.login .forgetmenot label {
	font-size: 13px;
	color: var(--gray-400);
}