/*!
 * Ananyoo Accessible Login - Login Screen Styles
 * Version: 1.0.0
 * Author: Shivaji Mitra (Ananyoo) — https://ananyoo.com
 *
 * WCAG 2.2 AA compliant. Mobile-first. Variables injected dynamically by PHP.
 */

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */

body.login.ananyoo-awl {
	background-color: var(--ananyoo-bg-page, #f4f5f7);
	color: var(--ananyoo-text-primary, #1a1f36);
	font-family: var(--ananyoo-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: var(--ananyoo-font-size, 16px);
	line-height: 1.5;
	margin: 0;
	padding: 24px 16px;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

body.login.ananyoo-awl * {
	box-sizing: border-box;
}

/* Force font-family onto every text-bearing element inside our scope.
   Without this, WordPress's core login CSS sets font-family directly on
   inputs, buttons, labels, h1, p — and those direct declarations override
   the body-level font-family, so the user's font choice never applies to
   form elements. We push the variable onto every relevant element so the
   "Font family" setting actually works.

   When the variable resolves to the literal value `inherit` (i.e. the
   user picked "Theme default"), each element inherits from its parent,
   ultimately falling back to the browser / user-agent default. */
body.login.ananyoo-awl h1,
body.login.ananyoo-awl h2,
body.login.ananyoo-awl h3,
body.login.ananyoo-awl label,
body.login.ananyoo-awl p,
body.login.ananyoo-awl a,
body.login.ananyoo-awl button,
body.login.ananyoo-awl input,
body.login.ananyoo-awl select,
body.login.ananyoo-awl textarea {
	font-family: var(--ananyoo-font-family, inherit);
}

/* ==========================================================================
   2. SKIP LINK — WCAG 2.4.1 Bypass Blocks
   ========================================================================== */

.ananyoo-awl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--ananyoo-button-bg, #1d4ed8);
	color: var(--ananyoo-button-text, #ffffff);
	padding: 12px 20px;
	text-decoration: underline;
	font-weight: 600;
	border-radius: var(--ananyoo-radius, 8px);
	min-height: var(--ananyoo-target-size, 44px);
	display: inline-flex;
	align-items: center;
}

.ananyoo-awl-skip-link:focus {
	left: 16px;
	top: 16px;
	outline: 3px solid var(--ananyoo-focus-ring, #facc15);
	outline-offset: 2px;
}

/* Skip-link target landmark — a real <main> for landmark navigation and a
   focusable skip target. Kept inline and zero-footprint so it never shifts
   the login layout; it exists purely as a semantic anchor. */
body.login.ananyoo-awl .ananyoo-awl-main-landmark {
	display: block;
	margin: 0;
	padding: 0;
}
body.login.ananyoo-awl .ananyoo-awl-main-landmark:focus {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15);
	outline-offset: 2px;
}

/* Screen-reader-only utility (WP default fallback) */
body.login.ananyoo-awl .screen-reader-text,
body.login.ananyoo-awl .ananyoo-awl-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   3. LOGO
   ========================================================================== */

body.login.ananyoo-awl #login {
	width: 100%;
	max-width: var(--ananyoo-form-width, 420px);
	padding: 32px 0;
}

body.login.ananyoo-awl h1 {
	margin: 0 0 24px;
	text-align: center;
}

body.login.ananyoo-awl h1 a {
	display: inline-block;
	margin: 0 auto;
	color: var(--ananyoo-text-primary, #1a1f36);
	text-decoration: none;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.2;
	min-height: 80px;
	min-width: 100px;
	padding: 8px;
	border-radius: var(--ananyoo-radius, 8px);
	transition: outline-offset 0.15s ease;
}

body.login.ananyoo-awl h1 a:focus-visible {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15);
	outline-offset: 4px;
	box-shadow: 0 0 0 6px var(--ananyoo-bg-page, #f4f5f7);
}

/* ==========================================================================
   4. FORM CARD
   ========================================================================== */

body.login.ananyoo-awl form#loginform,
body.login.ananyoo-awl form#registerform,
body.login.ananyoo-awl form#lostpasswordform,
body.login.ananyoo-awl form#resetpassform {
	background: var(--ananyoo-bg-form, #ffffff);
	color: var(--ananyoo-text-primary, #1a1f36);
	border: 1px solid var(--ananyoo-field-border, #6b7280);
	border-radius: calc(var(--ananyoo-radius, 8px) * 1.25);
	padding: 32px;
	margin-top: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
	overflow: hidden; /* Ensure nothing escapes rounded corners. */
}

body.login.ananyoo-awl form .forgetmenot {
	font-weight: 400;
	float: none;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	column-gap: 10px;
}

/* ==========================================================================
   5. LABELS & FIELDS — WCAG 1.3.1, 1.4.4, 2.5.8 Target Size
   ========================================================================== */

body.login.ananyoo-awl form label {
	display: block;
	color: var(--ananyoo-text-primary, #1a1f36);
	font-size: 1em;
	font-weight: 600;
	margin-bottom: 6px;
	line-height: 1.4;
}

body.login.ananyoo-awl input[type="text"],
body.login.ananyoo-awl input[type="email"],
body.login.ananyoo-awl input[type="password"],
body.login.ananyoo-awl input[type="url"],
body.login.ananyoo-awl input.input {
	width: 100%;
	min-height: var(--ananyoo-target-size, 44px);
	padding: 10px 14px;
	background: var(--ananyoo-field-bg, #ffffff);
	color: var(--ananyoo-field-text, #1a1f36);
	border: 2px solid var(--ananyoo-field-border, #6b7280);
	border-radius: var(--ananyoo-radius, 8px);
	font-size: 1em;
	line-height: 1.4;
	font-family: inherit;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	margin-bottom: 12px;
}

body.login.ananyoo-awl input[type="text"]:hover,
body.login.ananyoo-awl input[type="email"]:hover,
body.login.ananyoo-awl input[type="password"]:hover {
	border-color: var(--ananyoo-field-focus, #1d4ed8);
}

/* WCAG 2.4.13 Focus Appearance (AAA-leaning) + 2.4.11 not obscured.
   3px solid + offset = highly visible focus ring on any background. */
body.login.ananyoo-awl input:focus,
body.login.ananyoo-awl input:focus-visible,
body.login.ananyoo-awl select:focus,
body.login.ananyoo-awl textarea:focus {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15);
	outline-offset: 2px;
	border-color: var(--ananyoo-field-focus, #1d4ed8);
	box-shadow: 0 0 0 1px var(--ananyoo-field-focus, #1d4ed8);
}

/* Placeholder — keep it readable, but don't rely on it for labels (1.3.1 / 3.3.2). */
body.login.ananyoo-awl ::placeholder {
	color: var(--ananyoo-text-secondary, #475569);
	opacity: 1;
}

/* ==========================================================================
   6. PASSWORD SHOW/HIDE TOGGLE

   The toggle sits BELOW the password field on its own row (not overlaid
   inside the input). This is inherently reflow-proof: it never crowds the
   field, never collides with long generated passwords, and scales cleanly
   at any text size or zoom (WCAG 1.4.4 Resize Text, 1.4.10 Reflow).
   ========================================================================== */

/* Suppress WordPress's native show/hide eye button (.wp-hide-pw). We provide
   our own toggle instead, which is more WCAG-compliant in text mode:
   a visible text label satisfies SC 2.5.3 Label in Name (voice-control users
   can say "Show password") and SC 2.4.6, and avoids relying on icon meaning.
   Without this, both toggles render and overlap (the reset-screen collision). */
body.login.ananyoo-awl .wp-pwd .wp-hide-pw {
	display: none !important;
}

/* On the reset-password screen WordPress wraps the field in .wp-pwd, which
   also holds the strength meter. Lay it out as a vertical stack. */
body.login.ananyoo-awl .wp-pwd {
	display: block;
	position: relative;
}

/* Space the whole password group (field + our Show password toggle) from
   whatever follows it — the Remember Me row, or a third-party CAPTCHA widget
   injected by another plugin — so the elements never sit flush against it. */
body.login.ananyoo-awl .user-pass-wrap {
	margin-bottom: 16px;
}

/* ==========================================================================
   CAPTCHA COMPATIBILITY (cosmetic, optional)
   This plugin never bundles, requires, or contacts any CAPTCHA service. But
   when a site owner adds one (Cloudflare Turnstile, Google reCAPTCHA,
   hCaptcha, ...), that plugin injects its widget into the standard login form.
   The rules below ONLY centre that widget so it sits neatly in the middle of
   the form. Nothing here loads, renders, or validates a CAPTCHA — pure layout.
   The !important on the margins intentionally overrides the small negative
   margin some CAPTCHA plugins inject inline on their widget container.
   ========================================================================== */
body.login.ananyoo-awl form .cf-turnstile,
body.login.ananyoo-awl form .cf-turnstile-wrapper,
body.login.ananyoo-awl form .g-recaptcha,
body.login.ananyoo-awl form .h-captcha {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Centre any short label/notice a CAPTCHA plugin prints above its widget. */
body.login.ananyoo-awl form .cfturnstile-widget-label {
	text-align: center;
}

/* Our wrapper is now a simple block — the input stays full width with its
   normal padding (no reserved space needed since the toggle is below). */
.ananyoo-awl-password-wrapper {
	display: block;
	position: static;
}

.ananyoo-awl-password-wrapper input[type="text"],
.ananyoo-awl-password-wrapper input[type="password"] {
	display: block;
	width: 100%;
}

/* The toggle: full-width block on its own row, directly below the field. */
.ananyoo-awl-toggle-password {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 8px 0 0;
	padding: 8px 12px;
	background: var(--ananyoo-bg-form, #ffffff);
	color: var(--ananyoo-link, #1d4ed8);
	border: 2px solid var(--ananyoo-field-border, #6b7280);
	border-radius: var(--ananyoo-radius, 8px);
	min-height: var(--ananyoo-target-size, 44px);
	font-size: 0.9375em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	box-sizing: border-box;
}

.ananyoo-awl-toggle-password:hover {
	background: var(--ananyoo-bg-page, #f4f5f7);
	border-color: var(--ananyoo-field-focus, #1d4ed8);
}

.ananyoo-awl-toggle-password:focus-visible {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15);
	outline-offset: 2px;
	border-color: var(--ananyoo-field-focus, #1d4ed8);
}

/* Icon variant — no underline, just the centered eye glyph. Still full-width
   below the field so it stays consistent and reflow-proof; the eye is simply
   centered in the row. */
.ananyoo-awl-toggle-password--icon {
	text-decoration: none;
	color: var(--ananyoo-text-secondary, #475569);
}
.ananyoo-awl-toggle-password--icon:hover {
	color: var(--ananyoo-link, #1d4ed8);
}
.ananyoo-awl-toggle-password--icon svg {
	display: block;
	pointer-events: none;
}

/* ==========================================================================
   7. CHECKBOX (Remember Me) — 2.5.8 Target Size 24px+ guaranteed
   ========================================================================== */

body.login.ananyoo-awl .forgetmenot label,
body.login.ananyoo-awl input[type="checkbox"] + label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	cursor: pointer;
	min-height: var(--ananyoo-target-size, 44px);
	padding: 8px 4px;
}

body.login.ananyoo-awl input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	margin: 0;
	border: 2px solid var(--ananyoo-field-border, #6b7280);
	border-radius: 4px;
	background: var(--ananyoo-field-bg, #ffffff);
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
}

body.login.ananyoo-awl input[type="checkbox"]:checked {
	background: var(--ananyoo-button-bg, #1d4ed8) !important;
	border-color: var(--ananyoo-button-bg, #1d4ed8) !important;
}

body.login.ananyoo-awl input[type="checkbox"]:checked::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 12px;
	border: solid var(--ananyoo-button-text, #ffffff);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* WordPress core (.wp-core-ui) renders its own Dashicon checkmark via ::before
   on a checked checkbox. We draw our own custom tick in ::after (above), so we
   suppress core's ::before to prevent a double tick mark on the checkbox. */
body.login.ananyoo-awl input[type="checkbox"]::before {
	content: none !important;
	display: none !important;
}

body.login.ananyoo-awl input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15);
	outline-offset: 2px;
}

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

body.login.ananyoo-awl .button-primary,
body.login.ananyoo-awl .wp-core-ui .button-primary,
body.login.ananyoo-awl input[type="submit"].button-primary,
body.login.ananyoo-awl button[type="submit"] {
	width: 100% !important;
	min-height: var(--ananyoo-target-size, 44px);
	padding: 12px 20px;
	background: var(--ananyoo-button-bg, #1d4ed8) !important;
	color: var(--ananyoo-button-text, #ffffff) !important;
	border: 2px solid var(--ananyoo-button-bg, #1d4ed8) !important;
	border-radius: var(--ananyoo-radius, 8px) !important;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
	float: none !important;
	transition: background-color 0.15s ease, transform 0.05s ease;
	margin-top: 4px;
}

body.login.ananyoo-awl .button-primary:hover,
body.login.ananyoo-awl button[type="submit"]:hover {
	background: var(--ananyoo-button-hover, #1e3a8a) !important;
	border-color: var(--ananyoo-button-hover, #1e3a8a) !important;
	color: var(--ananyoo-button-text, #ffffff) !important;
}

body.login.ananyoo-awl .button-primary:focus,
body.login.ananyoo-awl .button-primary:focus-visible,
body.login.ananyoo-awl button[type="submit"]:focus-visible {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15) !important;
	outline-offset: 3px !important;
	background: var(--ananyoo-button-hover, #1e3a8a) !important;
}

body.login.ananyoo-awl .button-primary:active {
	transform: translateY(1px);
}

body.login.ananyoo-awl .button-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Reset-password screen: stack "Generate Password" and "Save Password" as
   two full-width buttons, one above the other, with equal width so the pair
   looks balanced (instead of a small orphaned button above a big one).
   Reflow-proof — they're block-level and scale with text size / zoom. */
body.login.ananyoo-awl .submit.reset-pass-submit {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* "Generate Password" is a secondary action — outlined style so it reads as
   lower priority than the solid "Save Password" primary, while matching width. */
body.login.ananyoo-awl .wp-generate-pw {
	width: 100% !important;
	min-height: var(--ananyoo-target-size, 44px);
	padding: 12px 20px;
	margin: 0 !important;
	background: var(--ananyoo-bg-form, #ffffff) !important;
	color: var(--ananyoo-button-bg, #1d4ed8) !important;
	border: 2px solid var(--ananyoo-button-bg, #1d4ed8) !important;
	border-radius: var(--ananyoo-radius, 8px) !important;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
	float: none !important;
}
body.login.ananyoo-awl .wp-generate-pw:hover {
	background: var(--ananyoo-bg-page, #f4f5f7) !important;
	border-color: var(--ananyoo-button-hover, #1e3a8a) !important;
	color: var(--ananyoo-button-hover, #1e3a8a) !important;
}
body.login.ananyoo-awl .wp-generate-pw:focus-visible {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15) !important;
	outline-offset: 3px !important;
}

/* ==========================================================================
   9. NAV LINKS (Lost password, Register, Back to site)
   ========================================================================== */

body.login.ananyoo-awl #nav,
body.login.ananyoo-awl #backtoblog {
	text-align: center;
	margin: 16px 0 0;
	padding: 8px;
}

body.login.ananyoo-awl #nav a,
body.login.ananyoo-awl #backtoblog a,
body.login.ananyoo-awl p a {
	color: var(--ananyoo-link, #1d4ed8);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
	padding: 8px 4px;
	display: inline-block;
	min-height: var(--ananyoo-target-size, 44px);
	line-height: 1.4;
}

body.login.ananyoo-awl #nav a:hover,
body.login.ananyoo-awl #backtoblog a:hover,
body.login.ananyoo-awl p a:hover {
	color: var(--ananyoo-link-hover, #1e3a8a);
	text-decoration-thickness: 2px;
}

body.login.ananyoo-awl #nav a:focus-visible,
body.login.ananyoo-awl #backtoblog a:focus-visible,
body.login.ananyoo-awl p a:focus-visible {
	outline: 3px solid var(--ananyoo-focus-ring, #facc15);
	outline-offset: 2px;
	border-radius: 4px;
}


/* ==========================================================================
   10. MESSAGES — ERRORS, NOTICES, SUCCESS — WCAG 1.4.1, 3.3.1, 4.1.3
   ========================================================================== */

body.login.ananyoo-awl #login_error,
body.login.ananyoo-awl .login .message,
body.login.ananyoo-awl .login_error,
body.login.ananyoo-awl .notice {
	padding: 14px 16px;
	border-radius: var(--ananyoo-radius, 8px);
	margin: 0 0 16px;
	background: var(--ananyoo-bg-form, #ffffff);
	color: var(--ananyoo-text-primary, #1a1f36);
	box-shadow: none;
	font-size: 1em;
	line-height: 1.5;
	border-left: 6px solid var(--ananyoo-error, #b91c1c);
}

body.login.ananyoo-awl #login_error::before {
	content: "⚠ ";
	font-weight: 700;
	color: var(--ananyoo-error, #b91c1c);
}

body.login.ananyoo-awl .message,
body.login.ananyoo-awl .login .message {
	border-left-color: var(--ananyoo-success, #15803d);
}

/* ARIA live region — visually hidden but read by AT */
.ananyoo-awl-live-region {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Visible caps-lock warning */
.ananyoo-awl-capslock-warning {
	display: block;
	margin-top: -8px;
	margin-bottom: 12px;
	padding: 8px 12px;
	background: var(--ananyoo-bg-page, #f4f5f7);
	border: 2px solid var(--ananyoo-error, #b91c1c);
	border-radius: var(--ananyoo-radius, 8px);
	color: var(--ananyoo-text-primary, #1a1f36);
	font-size: 0.875em;
	font-weight: 600;
}

.ananyoo-awl-capslock-warning::before {
	content: "⇪ ";
	color: var(--ananyoo-error, #b91c1c);
	font-weight: 700;
}

/* ==========================================================================
   11. PASSWORD STRENGTH METER (used on reset/registration)
   ========================================================================== */

body.login.ananyoo-awl #pass-strength-result {
	display: block;
	margin-top: 10px;
	background: var(--ananyoo-bg-page, #f4f5f7);
	border: 2px solid var(--ananyoo-field-border, #6b7280);
	color: var(--ananyoo-text-primary, #1a1f36);
	border-radius: var(--ananyoo-radius, 8px);
	font-weight: 600;
	padding: 8px 12px;
}

/* "Confirm use of weak password" row — give it breathing room below. */
body.login.ananyoo-awl .pw-weak {
	display: block;
	margin-top: 10px;
}

body.login.ananyoo-awl #pass-strength-result.short,
body.login.ananyoo-awl #pass-strength-result.bad {
	border-color: var(--ananyoo-error, #b91c1c);
}
body.login.ananyoo-awl #pass-strength-result.good,
body.login.ananyoo-awl #pass-strength-result.strong {
	border-color: var(--ananyoo-success, #15803d);
}

/* ==========================================================================
   12. TAGLINE & FOOTER
   ========================================================================== */

.ananyoo-awl-tagline {
	text-align: center;
	color: var(--ananyoo-text-secondary, #475569);
	font-size: 0.9375em;
	margin: 16px auto 0;
	max-width: var(--ananyoo-form-width, 420px);
}

.ananyoo-awl-footer-text {
	text-align: center;
	color: var(--ananyoo-text-secondary, #475569);
	font-size: 0.875em;
	margin: 24px auto 0;
	max-width: var(--ananyoo-form-width, 420px);
	padding: 0 8px;
	line-height: 1.5;
}

.ananyoo-awl-footer-text a {
	color: var(--ananyoo-link, #1d4ed8);
	text-decoration: underline;
}

/* ==========================================================================
   13. LAYOUT VARIANTS
   ========================================================================== */

/* Minimal — drop the card chrome */
body.login.ananyoo-awl-layout-minimal form#loginform,
body.login.ananyoo-awl-layout-minimal form#registerform,
body.login.ananyoo-awl-layout-minimal form#lostpasswordform,
body.login.ananyoo-awl-layout-minimal form#resetpassform {
	box-shadow: none;
	border: none;
	background: transparent;
	padding: 16px 0;
}

/* Split layouts (only on viewports wide enough to support them) */
@media (min-width: 900px) {
	body.login.ananyoo-awl-layout-split-left,
	body.login.ananyoo-awl-layout-split-right {
		justify-content: flex-start;
		padding: 0;
		min-height: 100vh;
	}
	body.login.ananyoo-awl-layout-split-left #login,
	body.login.ananyoo-awl-layout-split-right #login {
		max-width: 480px;
		width: 100%;
		padding: 48px 40px;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: var(--ananyoo-bg-form, #ffffff);
	}
	body.login.ananyoo-awl-layout-split-right #login {
		margin-left: auto;
	}
}

/* ==========================================================================
   14. BACKGROUND PATTERNS
   ========================================================================== */

body.login.ananyoo-awl-pattern-dots {
	background-image:
		var(--ananyoo-pattern-overlay, none),
		radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
	background-size: auto, 20px 20px;
}

body.login.ananyoo-awl-pattern-grid {
	background-image:
		linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
	background-size: 32px 32px, 32px 32px;
}

body.login.ananyoo-awl-pattern-waves {
	background-image: radial-gradient(ellipse at top, rgba(0,0,0,0.04), transparent 60%);
}

/* ==========================================================================
   15. HIGH CONTRAST MODE (USER OVERRIDE)
   ========================================================================== */

body.login.ananyoo-awl.ananyoo-awl-high-contrast {
	background: #ffffff !important;
	color: #000000 !important;
}

body.login.ananyoo-awl.ananyoo-awl-high-contrast form {
	background: #ffffff !important;
	border: 3px solid #000000 !important;
	color: #000000 !important;
}

body.login.ananyoo-awl.ananyoo-awl-high-contrast input {
	border: 2px solid #000000 !important;
	color: #000000 !important;
	background: #ffffff !important;
}

body.login.ananyoo-awl.ananyoo-awl-high-contrast .button-primary {
	background: #000000 !important;
	color: #ffffff !important;
	border: 2px solid #000000 !important;
}

/* ==========================================================================
   16. PREFERS-REDUCED-MOTION — WCAG 2.3.3
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.login.ananyoo-awl *,
	body.login.ananyoo-awl *::before,
	body.login.ananyoo-awl *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   17. FORCED-COLORS / WINDOWS HIGH CONTRAST MODE
   ========================================================================== */

@media (forced-colors: active) {
	body.login.ananyoo-awl .button-primary,
	body.login.ananyoo-awl button[type="submit"] {
		border: 2px solid ButtonText !important;
		forced-color-adjust: none;
	}
	body.login.ananyoo-awl input:focus,
	body.login.ananyoo-awl button:focus,
	body.login.ananyoo-awl a:focus {
		outline: 3px solid Highlight !important;
		outline-offset: 2px;
	}
}

/* ==========================================================================
   18. RESPONSIVE — MOBILE FIRST OVERRIDES
   ========================================================================== */

@media (max-width: 480px) {
	body.login.ananyoo-awl {
		padding: 16px 12px;
	}
	body.login.ananyoo-awl form#loginform,
	body.login.ananyoo-awl form#registerform,
	body.login.ananyoo-awl form#lostpasswordform,
	body.login.ananyoo-awl form#resetpassform {
		padding: 24px 20px;
	}
	body.login.ananyoo-awl h1 {
		margin-bottom: 16px;
	}
}

/* Text zoom up to 200% (WCAG 1.4.4) — ensure no horizontal scroll */
@media (max-width: 320px) {
	body.login.ananyoo-awl {
		padding: 12px 8px;
		font-size: 1em;
	}
	body.login.ananyoo-awl form#loginform,
	body.login.ananyoo-awl form#registerform,
	body.login.ananyoo-awl form#lostpasswordform,
	body.login.ananyoo-awl form#resetpassform {
		padding: 20px 16px;
	}
}