/**
 * FCWalk login screen — the website's style and feel (teal/navy, white
 * rounded card). Applies to every wp-login.php form: login, lost
 * password, reset, and register.
 */

:root {
	--fcwalk-primary: #0d9488;
	--fcwalk-primary-dark: #0f766e;
	--fcwalk-navy: #1a2744;
	--fcwalk-ink: #12393c;
	--fcwalk-muted: #64807f;
	--fcwalk-border: #cfdedf;
	--fcwalk-radius: 12px;
}

body.login {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	/* Deep navy to dark teal — every stop keeps white text at or above
	   11:1 (WCAG AAA) and lets the logo's teal accents stand out. */
	background: linear-gradient(160deg, #0e1626 0%, #0d242a 50%, #0b423d 100%);
}

/* Vertically center the card (skip the interim re-auth iframe). */
body.login:not(.interim-login) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
}

#login {
	width: 360px;
	max-width: calc(100% - 32px);
	padding: 24px 0;
}

/* ── Logo ───────────────────────────────────────────────────────────── */

/* The site logo (dark-background lockup: mark + FCwalk + Be Amazing!).
   The link text stays hidden by core CSS — the image carries the brand. */
.login h1 a {
	background-image: url(../images/fcwalk-logo-dark-bg.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 200px;
	height: 178px;
	margin: 0 auto;
}

.login h1 a:focus {
	box-shadow: none;
	outline: 2px solid rgba(255, 255, 255, 0.4);
	outline-offset: 4px;
	border-radius: 8px;
}

/* ── Card ───────────────────────────────────────────────────────────── */

.login form {
	background: #fff;
	border: 0;
	border-radius: var(--fcwalk-radius);
	box-shadow: 0 12px 40px rgba(13, 47, 50, 0.35);
	padding: 32px;
	margin-top: 24px;
}

.login label {
	color: var(--fcwalk-ink);
	font-weight: 600;
	font-size: 13px;
}

.login form .input,
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
	border-radius: 9px;
	border-color: var(--fcwalk-border);
	padding: 8px 12px;
	font-size: 15px;
	margin: 6px 0 16px;
	box-shadow: none;
	color: var(--fcwalk-ink);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus {
	border-color: var(--fcwalk-primary);
	box-shadow: 0 0 0 1px var(--fcwalk-primary);
	outline: none;
}

/* Show/hide password toggle. */
.login .button.wp-hide-pw {
	color: var(--fcwalk-muted);
}

.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
	color: var(--fcwalk-primary-dark);
	box-shadow: none;
}

/* Remember-me checkbox. */
.login input[type="checkbox"] {
	border-color: var(--fcwalk-border);
	border-radius: 4px;
}

.login input[type="checkbox"]:focus {
	border-color: var(--fcwalk-primary);
	box-shadow: 0 0 0 1px var(--fcwalk-primary);
}

.login input[type="checkbox"]:checked::before {
	content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%230d9488'/%3E%3C/svg%3E");
}

.login .forgetmenot label {
	font-weight: 400;
	font-size: 13px;
	color: var(--fcwalk-muted);
}

/* Primary button — full-width. Darker teal than the brand base so the
   white label passes WCAG AA (5.5:1 vs 3.75:1 on #0d9488). */
.login .button-primary {
	width: 100%;
	background: var(--fcwalk-primary-dark);
	border-color: var(--fcwalk-primary-dark);
	border-radius: 9px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 6px 16px;
	margin-top: 8px;
	text-shadow: none;
	box-shadow: none;
	transition: background 0.15s ease;
	float: none;
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: #0c5f58;
	border-color: #0c5f58;
	color: #fff;
	box-shadow: none;
}

.login .submit {
	display: block;
}

/* ── Notices ────────────────────────────────────────────────────────── */

.login .notice,
.login .message,
.login .success,
.login #login_error {
	border-radius: 9px;
	box-shadow: 0 4px 16px rgba(13, 47, 50, 0.25);
}

.login .message,
.login .success {
	border-left-color: var(--fcwalk-primary);
}

/* ── Links below the card ───────────────────────────────────────────── */

.login #nav,
.login #backtoblog {
	text-align: center;
	font-size: 13px;
}

.login #nav a,
.login #backtoblog a {
	color: rgba(255, 255, 255, 0.92);
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
	color: #fff;
	text-decoration: underline;
}

.login .privacy-policy-page-link a {
	color: rgba(255, 255, 255, 0.85);
}

/* ── Language switcher (WP 5.9+) ────────────────────────────────────── */

.login .language-switcher label {
	color: rgba(255, 255, 255, 0.85);
}

.login .language-switcher label .dashicons {
	color: rgba(255, 255, 255, 0.85);
}

.login .language-switcher select {
	border-radius: 9px;
	border-color: var(--fcwalk-border);
}

/* ── Small screens ──────────────────────────────────────────────────── */

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