/*
 * Ferndale Intranet: the login page (wp-login.php), both designs.
 *
 * Loads after core, Login Customizer, Hide WP Default Login and Wordfence
 * (login_enqueue_scripts priority 20) and wins on specificity:
 * - Login Customizer: body.login div#login h1 a (1,1,3), #login form#loginform (2,0,1),
 *   #login form#loginform .input (2,1,1).
 * - Hide WP Default Login: body.login #login (1,1,1); its display:none !important
 *   on the collapsed fields is never fought (the fields are styled for the
 *   expanded state only).
 * The IDs #loginform, #user_login, #user_pass, #login_error and #wp-submit are
 * unchanged. Every surface and control sets its own colours (dark OS safe).
 *
 * States covered (04 §4.2, third-party §15): sign in (Google only and the
 * expanded admin form), errors, domain blocked, 2FA (Wordfence), Nextend's
 * redirect overlay, language switcher, lost password and "check your email",
 * reset password (strength meter), administrator email confirmation, logged
 * out, interim (session expired) login, registration disabled, 320px.
 */

:root {
	color-scheme: light dark;
}

/* ------------------------------------------------------------------
 * Page: a dark top half (B with a subtle curve), the card centred on it.
 * ------------------------------------------------------------------ */
body.login.fi-login {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	min-height: 100vh;
	margin: 0;
	padding: 0 1rem 2.5rem;
	background: var(--fi-login-bg);
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 1rem;
	line-height: 1.55;
}

body.login.fi-login::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -2;
	height: min(46vh, 22rem);
	border-radius: 0 0 50% 50% / 0 0 var(--fi-login-curve) var(--fi-login-curve);
	background: var(--fi-login-band);
}

@media (max-width: 40rem) {
	body.login.fi-login::before {
		height: 12rem;
		border-bottom-left-radius: 50% calc(var(--fi-login-curve) / 2);
		border-bottom-right-radius: 50% calc(var(--fi-login-curve) / 2);
	}
}

/* A faint fern watermark on the band, cropped at the right-hand edge
 * (the box stays inside the window, so there is no sideways scroll). */
body.login.fi-login::after {
	content: "";
	position: absolute;
	top: clamp(1rem, 6vh, 3rem);
	right: 0;
	z-index: -1;
	width: min(24rem, 64vw);
	aspect-ratio: 320 / 234;
	background: url("../images/mark.png") no-repeat left center / auto 100%;
	filter: brightness(0) invert(1);
	opacity: var(--fi-login-watermark);
	pointer-events: none;
}

/* The theme's main landmark around the card (inc/login.php). */
body.login.fi-login .fi-login-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

body.fi-login :focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
	box-shadow: none;
}

body.fi-login a {
	color: var(--fi-link);
}

/* The card. */
body.login.fi-login #login {
	position: relative;
	box-sizing: border-box;
	width: min(27rem, 100%);
	max-width: 100%;
	margin: clamp(2rem, 9vh, 5.5rem) auto 0;
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	border-top: 4px solid var(--fi-card-accent);
	border-radius: var(--fi-radius-lg);
	background: var(--fi-card-bg);
	color: var(--fi-text);
	box-shadow: var(--fi-shadow-lg);
}

body.login.fi-login.login-action-confirm_admin_email #login {
	width: min(40rem, 100%);
}

/* ------------------------------------------------------------------
 * Logo and wordmark (the link text from login_headertext is visible).
 * B: colour logo with "Staff intranet" under it. A: fern mark and "Intranet".
 * ------------------------------------------------------------------ */
body.login.fi-login div#login h1 {
	margin: 0 0 1.25rem;
	padding: 0;
	text-align: center;
}

body.login.fi-login div#login h1 a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0 auto;
	padding: 4.1rem 0 0;
	overflow: visible;
	border-radius: var(--fi-radius-sm);
	background: url("../images/logo.png") no-repeat center top / auto 3.2rem;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-decoration: none;
	text-indent: 0;
	text-transform: uppercase;
	white-space: normal;
}

body.login.fi-login div#login h1 a::before {
	content: "";
	width: 2.25rem;
	height: 3px;
	border-radius: 3px;
	background: var(--fi-accent-line);
}

body.login.fi-login.fi-design-classic div#login h1 a {
	flex-direction: row;
	justify-content: center;
	gap: 0.75rem;
	padding: 0;
	background: none;
	color: var(--fi-primary);
	font-family: var(--fi-font-brand);
	font-size: clamp(2rem, 1.6rem + 1.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	text-transform: none;
}

body.login.fi-login.fi-design-classic div#login h1 a::before {
	width: 4.8rem;
	height: 2.8rem;
	border-radius: 0;
	background: url("../images/mark.png") no-repeat center / contain;
}

/* ------------------------------------------------------------------
 * Messages: intro, notices, errors and the TEST COPY note.
 * ------------------------------------------------------------------ */
body.fi-login .fi-login-intro {
	margin: 0 0 1.25rem;
	color: var(--fi-muted);
	font-size: 0.9375rem;
	text-align: center;
}

body.fi-login #login :is(.message, .notice, .success),
body.fi-login #login #login_error {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--fi-border);
	border-left: 4px solid var(--fi-info);
	border-radius: var(--fi-radius-control);
	background: var(--fi-info-tint);
	color: var(--fi-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	box-shadow: none;
}

body.fi-login #login .notice-error,
body.fi-login #login #login_error {
	border-left-color: var(--fi-danger);
	background: var(--fi-danger-tint);
}

body.fi-login #login :is(.success, .notice-success) {
	border-left-color: var(--fi-success);
	background: var(--fi-success-tint);
}

body.fi-login #login :is(.message, .notice, .success, #login_error) p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

body.fi-login #login :is(.message, .notice, .success, #login_error) p + p {
	margin-top: 0.5rem;
}

/* The domain whitelist's inline red (#cc0000) message. */
body.fi-login #login .message[style*="cc0000"] {
	border-left-color: var(--fi-danger) !important;
	background: var(--fi-danger-tint);
	color: var(--fi-danger) !important;
	font-weight: 600;
}

body.fi-login #login :is(.message, #login_error) a {
	color: var(--fi-link);
}

/* ------------------------------------------------------------------
 * Forms (sign in, lost password, reset password, confirm email).
 * ------------------------------------------------------------------ */
body.fi-login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform, .admin-email-confirm-form) {
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-weight: 400;
}

body.fi-login #login form p {
	margin: 0;
}

body.fi-login #login label {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--fi-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

body.fi-login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) :is(.input, input[type="text"], input[type="password"], input[type="email"]) {
	width: 100%;
	min-height: 2.75rem;
	max-height: none;
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--fi-control-border);
	border-radius: var(--fi-radius-control);
	background: var(--fi-control-bg);
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
}

body.fi-login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) :is(.input, input[type="text"], input[type="password"], input[type="email"]):focus {
	border-color: var(--fi-primary);
	outline: 3px solid var(--fi-focus);
	outline-offset: 1px;
	box-shadow: none;
}

body.fi-login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) :is(.input, input[type="password"]).password-input {
	padding-inline-end: 3rem;
}

body.fi-login #login .wp-pwd {
	position: relative;
}

body.fi-login #login .button.wp-hide-pw {
	top: 0;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: var(--fi-radius-control);
	background: transparent;
	color: var(--fi-muted);
	box-shadow: none;
}

body.fi-login #login .button.wp-hide-pw:hover {
	color: var(--fi-primary);
}

body.fi-login #login .button.wp-hide-pw .dashicons {
	top: 0.15rem;
}

/* Primary buttons (Log in, Get new password, Save password, Confirm, 2FA). */
body.fi-login #login .button-primary,
body.fi-login #login .button.button-primary {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 2.75rem;
	margin: 0.25rem 0 0;
	padding: 0.7rem 1.3rem;
	border: 0;
	border-radius: var(--fi-radius-control);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-family: var(--fi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: none;
	box-shadow: none;
}

body.fi-login #login .button-primary:hover,
body.fi-login #login .button-primary:focus {
	background: var(--fi-primary-hover);
	color: var(--fi-on-primary);
	box-shadow: none;
}

/* Secondary buttons (Generate password, Change language). */
body.fi-login .button:not(.button-primary, .wp-hide-pw) {
	min-height: 2.5rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--fi-primary);
	border-radius: var(--fi-radius-control);
	background: var(--fi-card-bg);
	color: var(--fi-primary);
	font-family: var(--fi-font);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: none;
	box-shadow: none;
}

body.fi-login .button:not(.button-primary, .wp-hide-pw):hover {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

body.fi-login #login .forgetmenot {
	margin-bottom: 0.75rem;
}

body.fi-login #login .forgetmenot label {
	font-weight: 600;
}

/* Checkboxes ("Remember me", Wordfence's "remember this device"): the
 * same theme-drawn box as base.css, over core's forms.css (WordPress-blue
 * tick), so a dark OS never repaints it. */
body.fi-login #login input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: 1.125rem;
	min-width: 1.125rem;
	height: 1.125rem;
	margin: 0 0.4rem 0 0;
	padding: 0;
	border: 1px solid var(--fi-control-border);
	border-radius: 4px;
	background-color: var(--fi-control-bg);
	box-shadow: none;
	color: var(--fi-on-primary);
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;
}

body.fi-login #login input[type="checkbox"]:checked {
	border-color: var(--fi-primary);
	background-color: var(--fi-primary);
}

body.fi-login #login input[type="checkbox"]:checked::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	margin: 0;
	background: currentColor;
	-webkit-mask: var(--fi-icon-check) center / contain no-repeat;
	mask: var(--fi-icon-check) center / contain no-repeat;
}

body.fi-login #login input[type="checkbox"]:focus-visible {
	border-color: var(--fi-primary);
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
	box-shadow: none;
}

@media (forced-colors: active) {
	body.fi-login #login input[type="checkbox"] {
		-webkit-appearance: auto;
		appearance: auto;
	}
}

/* Reset password: strength meter in the theme colours. */
body.fi-login #pass-strength-result {
	margin: -0.5rem 0 1rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius-sm);
	background: var(--fi-surface);
	color: var(--fi-text);
	font-weight: 600;
}

body.fi-login #pass-strength-result:is(.short, .bad) {
	border-color: var(--fi-danger);
	background: var(--fi-danger-tint);
}

body.fi-login #pass-strength-result.good {
	border-color: var(--fi-warning-line);
	background: var(--fi-warning-tint);
}

body.fi-login #pass-strength-result.strong {
	border-color: var(--fi-success);
	background: var(--fi-success-tint);
}

body.fi-login #login .reset-pass-submit {
	display: grid;
	gap: 0.6rem;
}

body.fi-login #login .reset-pass-submit .button {
	width: 100%;
}

body.fi-login #login .description,
body.fi-login #login .indicator-hint {
	color: var(--fi-muted);
	font-size: 0.875rem;
}

/* Administrator email confirmation. */
body.fi-login #login .admin-email__heading {
	margin: 0 0 0.75rem;
	padding: 0 0 0.6rem;
	border-bottom: 1px solid var(--fi-border);
	color: var(--fi-heading);
	font-size: 1.25rem;
	font-weight: 750;
	text-align: start;
}

body.fi-login #login .admin-email__details {
	color: var(--fi-text);
}

body.fi-login #login .admin-email__actions {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

body.fi-login #login .admin-email__actions-primary .button-primary {
	width: auto;
}

/* ------------------------------------------------------------------
 * Google button (Nextend). Google's own colours and "G" stay as they are
 * (Google branding rules); only size, shape and focus change.
 * ------------------------------------------------------------------ */
body.fi-login #nsl-custom-login-form-main .nsl-container {
	padding: 0;
}

body.fi-login:not(.hide-admin-fields) #nsl-custom-login-form-main::before {
	content: "or";
	display: block;
	margin: 1.25rem 0 1rem;
	background: linear-gradient(to right, var(--fi-border) 0 calc(50% - 1.5rem), transparent calc(50% - 1.5rem) calc(50% + 1.5rem), var(--fi-border) calc(50% + 1.5rem)) center / 100% 1px no-repeat;
	color: var(--fi-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

body.fi-login #nsl-custom-login-form-main .nsl-container-buttons {
	width: 100%;
	padding: 0;
}

body.fi-login #nsl-custom-login-form-main .nsl-container-buttons a {
	display: block;
	flex: 1 1 auto;
	max-width: 100%;
	margin: 0;
	border-radius: var(--fi-radius-control);
}

body.fi-login #nsl-custom-login-form-main .nsl-container-buttons a:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 3px;
}

body.fi-login #nsl-custom-login-form-main .nsl-button {
	align-items: center; /* The label sat about 6px high in the taller button. */
	justify-content: center;
	min-height: 3rem;
	margin: 0;
	border-radius: var(--fi-radius-control);
}

body.fi-login #nsl-custom-login-form-main .nsl-container-buttons a:hover .nsl-button {
	background-color: var(--fi-surface) !important; /* The plugin sets the background inline. */
}

/* Nextend's redirect overlay ("Hold on"). */
body.fi-login #nsl-redirect-overlay {
	background: var(--fi-overlay);
}

body.fi-login #nsl-redirect-overlay-container {
	border-radius: var(--fi-radius-lg);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-lg);
	font-family: var(--fi-font);
}

body.fi-login #nsl-redirect-overlay-title,
body.fi-login #nsl-redirect-overlay-text {
	color: var(--fi-heading);
	font-family: var(--fi-font);
}

body.fi-login #nsl-redirect-overlay-spinner {
	border-color: var(--fi-tint);
	border-top-color: var(--fi-primary);
}

@media (prefers-reduced-motion: reduce) {
	body.fi-login #nsl-redirect-overlay-spinner {
		animation-duration: 6s;
	}
}

/* ------------------------------------------------------------------
 * Wordfence two-factor panel (covers the form after an admin password).
 * ------------------------------------------------------------------ */
body.fi-login #wfls-prompt-overlay {
	padding: 0;
	background: var(--fi-card-bg);
}

body.login.fi-login.hide-admin-fields #wfls-prompt-overlay {
	display: none;
}

body.fi-login #login #wfls-token {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2em;
	text-align: center;
}

body.fi-login .wfls-2fa-code-help {
	display: inline-grid;
	place-items: center;
	min-width: 1.75rem;
	min-height: 1.75rem;
	color: var(--fi-muted);
	vertical-align: middle;
}

body.fi-login .Zebra_Tooltip .Zebra_Tooltip_Message {
	border-radius: var(--fi-radius-sm);
	background: var(--fi-heading);
	color: var(--fi-card-bg);
	font: 0.8125rem/1.4 var(--fi-font);
}

body.fi-login #wfls-login-modal button {
	min-height: 2.75rem;
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: var(--fi-radius-control);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * Under the card: "Admin login" toggle and the language switcher.
 * ------------------------------------------------------------------ */
body.login.fi-login .hwdl-admin-login-toggle-link {
	margin: 1rem 0 0;
	text-align: center;
}

body.login.fi-login .hwdl-admin-login-toggle-link a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.1rem;
	border-radius: var(--fi-radius-pill);
	background: var(--fi-card-bg); /* Readable on the band and on the page. */
	box-shadow: var(--fi-shadow-sm);
	color: var(--fi-link);
	font-size: 0.9375rem;
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.login.fi-login .hwdl-admin-login-toggle-link a:hover {
	color: var(--fi-link-hover);
	text-decoration-thickness: 2px;
}

body.login.fi-login .hwdl-admin-login-toggle-link a:focus {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

body.login.fi-login .language-switcher {
	margin: 1rem 0 0;
	padding: 0;
	color: var(--fi-muted);
	font-size: 0.875rem;
}

body.login.fi-login #language-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.login.fi-login #language-switcher .dashicons {
	color: var(--fi-muted);
}

body.login.fi-login #language-switcher select {
	min-height: 2.5rem;
	padding: 0.35rem 2rem 0.35rem 0.75rem;
	border: 1px solid var(--fi-control-border);
	border-radius: var(--fi-radius-control);
	background-color: var(--fi-control-bg);
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------
 * Interim login (session expired, in a small iframe) and phones.
 * ------------------------------------------------------------------ */
body.login.fi-login.interim-login {
	padding: 0 0.75rem 1rem;
}

body.login.fi-login.interim-login::before {
	height: 7rem;
}

body.login.fi-login.interim-login::after {
	display: none;
}

body.login.fi-login.interim-login #login {
	margin-top: 1rem;
	padding: 1.25rem;
	box-shadow: var(--fi-shadow);
}

body.login.fi-login.interim-login:not(.fi-design-classic) div#login h1 a {
	padding-top: 3rem;
	background-size: auto 2.4rem;
}

@media (max-width: 30rem) {
	body.login.fi-login #login {
		margin-top: 1.5rem;
		padding: 1.35rem 1.15rem;
	}

	body.login.fi-login:not(.fi-design-classic) div#login h1 a {
		padding-top: 3.4rem;
		background-size: auto 2.7rem;
	}

	body.login.fi-login.fi-design-classic div#login h1 a {
		font-size: 2rem;
	}
}

@media (forced-colors: active) {
	body.login.fi-login #login {
		border: 1px solid CanvasText;
	}

	body.login.fi-login div#login h1 a {
		forced-color-adjust: none;
		background-color: #ffffff;
	}
}