/**
 * Accessibility Styles - Ernesto Theme
 * WCAG 2.1 Level AA Compliant
 *
 * @package Ernesto
 * @since 1.0.0
 */

/* ============================================
   1. SKIP LINKS
   ============================================ */

.skip-link {
	position: absolute;
	top: -9999px;
	left: -9999px;
	z-index: 999999;
	display: block;
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-primary);
	color: var(--text-on-brand);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-lg);
}

.skip-link:focus {
	top: var(--space-md);
	left: var(--space-md);
	outline: 3px solid var(--text-on-brand);
	outline-offset: 2px;
}

/* ============================================
   2. SCREEN READER TEXT
   ============================================ */

.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.sr-only:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ============================================
   3. FOCUS INDICATORS
   ============================================ */

/* Enhanced focus for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--border-radius-sm);
}

/* Special focus for interactive elements */
.menu-toggle:focus-visible,
.accessibility-toolbar button:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

/* Focus within (for containers) */
.site-navigation:focus-within,
.widget:focus-within {
	outline: 2px dashed var(--color-primary);
	outline-offset: 4px;
}

/* Remove default focus for mouse users */
body:not(.using-keyboard) *:focus {
	outline: none;
}

/* Show prominent focus for keyboard users */
body.using-keyboard *:focus {
	outline: 3px solid var(--color-primary) !important;
	outline-offset: 3px !important;
}

/* ============================================
   4. REDUCED MOTION
   ============================================ */

/* Respect system preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Disable smooth scrolling */
	html {
		scroll-behavior: auto;
	}

	/* Disable parallax effects */
	[data-parallax] {
		transform: none !important;
	}
}

/* User-enabled reduced motion */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

.reduced-motion .slider,
.reduced-motion .carousel {
	scroll-behavior: auto;
}

/* ============================================
   5. HIGH CONTRAST MODE
   ============================================ */

/*
 * NOTE: High contrast is opt-in via the accessibility toolbar only
 * (body.high-contrast). We intentionally do NOT auto-apply it from the OS
 * "Increase contrast" preference (@media (prefers-contrast: high)) — that
 * forced the entire site into the high-contrast palette/layout for any
 * visitor whose system had the setting on, which is not the desired default.
 * Windows forced-colors mode is still respected where relevant.
 */

/* ---------------------------------------------------------------
   User-enabled High Contrast (body.high-contrast, toggled by JS)
   Design spec:
     Background:  #f3e4ca
     Text:        #000066
     Links:       #7c2a00, bold, underlined
     Buttons:     #0000ff bg, white bold text
     Font:        Noto Sans (all elements)
     Headings:    WCAG best-practice size hierarchy
   --------------------------------------------------------------- */

/* 1. Override CSS design tokens so var() cascade works everywhere */
body.high-contrast {
	--font-primary:  'Atkinson Hyperlegible', 'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--font-heading:  'Atkinson Hyperlegible', 'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--font-special:  'Atkinson Hyperlegible', 'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--font-nav:      'Atkinson Hyperlegible', 'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--text-main:     #000066;
	--text-heading:  #000066;
	--text-muted:    #000066;
	--bg-body:       #fffcf4;
	--bg-surface:    #fef8e3;
	--bg-alt:        #f5f5f5;
	--bg-hover:      #f5f5f5;
	--link-color:    #7c2a00;
	--link-hover:    #5a1e00;
	--color-primary: #0000ff;
	--border-color:  #000066;
}

/* 2. Root background (fills any gap outside <body>) */
html:has(body.high-contrast) {
	background-color: #fffcf4;
}

/* 3. Body base */
body.high-contrast {
	background-color: #fffcf4 !important;
	color:            #000066 !important;
	font-family:      'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
}

/* 4. All text elements — Noto Sans + navy text */
body.high-contrast p,
body.high-contrast li,
body.high-contrast td,
body.high-contrast th,
body.high-contrast span,
body.high-contrast div,
body.high-contrast label,
body.high-contrast caption,
body.high-contrast figcaption,
body.high-contrast blockquote,
body.high-contrast cite,
body.high-contrast abbr,
body.high-contrast address {
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	color: #000066 !important;
}

/* 5. Heading hierarchy — WCAG best-practice sizes */
body.high-contrast h1, body.high-contrast .h1 {
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-size:   2.5rem  !important;  /* 40px */
	font-weight: 800     !important;
	line-height: 1.2     !important;
	color:       #000066 !important;
}
body.high-contrast h2, body.high-contrast .h2 {
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-size:   1.5rem  !important;  /* 24px — keeps heading hierarchy readable without dominating */
	font-weight: 700     !important;
	line-height: 1.25    !important;
	color:       #000066 !important;
}
body.high-contrast h3, body.high-contrast .h3 {
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-size:   1.75rem !important;  /* 28px */
	font-weight: 700     !important;
	line-height: 1.3     !important;
	color:       #000066 !important;
}
body.high-contrast h4, body.high-contrast .h4 {
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-size:   1.5rem  !important;  /* 24px */
	font-weight: 700     !important;
	color:       #000066 !important;
}
body.high-contrast h5, body.high-contrast .h5 {
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-size:   1.25rem !important;  /* 20px */
	font-weight: 700     !important;
	color:       #000066 !important;
}
body.high-contrast h6, body.high-contrast .h6 {
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-size:   1.1rem  !important;  /* ~17.6px */
	font-weight: 600     !important;
	color:       #000066 !important;
}

/* 5b. Cover block headings & paragraphs — keep Gutenberg-set colours.
   The base rules above force #000066 on all headings via !important. These
   higher-specificity rules (2 classes + 1 element) override that for headings
   inside wp-block-cover, where a dark overlay already provides contrast. */
body.high-contrast .wp-block-cover h1,
body.high-contrast .wp-block-cover h2,
body.high-contrast .wp-block-cover h3,
body.high-contrast .wp-block-cover h4,
body.high-contrast .wp-block-cover h5,
body.high-contrast .wp-block-cover h6,
body.high-contrast .wp-block-cover p {
	color:       #ffffff !important; /* White readable over the dark overlay */
	font-family: unset   !important; /* Restore whatever font Gutenberg set */
	font-size:   unset   !important;
	font-weight: unset   !important;
	line-height: unset   !important;
}

/* Also keep the cover block button link in its customizer colour, not high-contrast blue */
body.high-contrast .wp-block-cover .wp-block-button__link {
	background-color: var(--color-primary) !important;
	border-color:     var(--color-primary) !important;
	color:            var(--text-on-brand, #ffffff) !important;
}

/* 6. Links — brown, bold, underlined */
body.high-contrast a,
body.high-contrast a:visited {
	font-family:     'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	color:           #7c2a00 !important;
	font-weight:     700 !important;
	text-decoration: underline !important;
}
body.high-contrast a:hover,
body.high-contrast a:focus {
	color: #5a1e00 !important;
}

/* 7. Buttons — blue bg, white bold text
   .wc-block-components-button.contained covers WooCommerce Blocks' own
   "buttons", which aren't necessarily <button> or .button — Cart's
   "Proceed to Checkout" is an <a>, so without this it fell through to the
   plain-link rule above (brown, underlined) instead of looking like a
   button. Scoped to the .contained (filled) variant specifically —
   .wc-block-components-button alone is ALSO WC's base class for small
   transparent icon-only controls (e.g. a notice dismiss button); matching
   it unqualified would force those into full blue-box buttons too. */
body.high-contrast button:not(.accessibility-toolbar-toggle):not(.accessibility-option),
body.high-contrast .button,
body.high-contrast input[type="submit"],
body.high-contrast input[type="button"],
body.high-contrast input[type="reset"],
body.high-contrast a.button,
body.high-contrast .wp-block-button__link,
body.high-contrast .wc-block-components-button.contained {
	background-color: #0000ff !important;
	color:            #ffffff !important;
	font-family:      'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-weight:      700 !important;
	border:           2px solid #0000ff !important;
	text-decoration:  none !important;
}
/* WC wraps the visible label in nested <div>s (e.g.
   .wc-block-components-button__text, sometimes another div inside that for
   a specific button variant — checkout's "Place Order" nests two deep,
   cart's "Proceed to Checkout" only one). Section 4's "div{color:navy}"
   rule directly matches EVERY one of those divs regardless of depth — a
   direct match always beats an inherited value, so the button's own white
   text color above never reaches any of them without this. Wildcard
   descendant selector instead of naming each wrapper class: any future WC
   version nesting the label differently is covered automatically. */
body.high-contrast .wc-block-components-button.contained * {
	color: #ffffff !important;
}
body.high-contrast button:not(.accessibility-toolbar-toggle):not(.accessibility-option):hover,
body.high-contrast .button:hover,
body.high-contrast input[type="submit"]:hover,
body.high-contrast input[type="button"]:hover,
body.high-contrast .wc-block-components-button.contained:hover {
	background-color: #0000cc !important;
	border-color:     #0000cc !important;
	color:            #ffffff !important;
}

/* 8. Form inputs — white bg with navy border */
body.high-contrast input[type="text"],
body.high-contrast input[type="email"],
body.high-contrast input[type="password"],
body.high-contrast input[type="search"],
body.high-contrast input[type="url"],
body.high-contrast input[type="tel"],
body.high-contrast input[type="number"],
body.high-contrast input[type="date"],
body.high-contrast textarea,
body.high-contrast select {
	background-color: #ffffff !important;
	color:            #000066 !important;
	border:           2px solid #000066 !important;
	font-family:      'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
}

/* 9. Accessibility toolbar itself — keep legible */
body.high-contrast .accessibility-toolbar-toggle {
	background-color: #0000ff !important;
	color:            #ffffff !important;
}
body.high-contrast .accessibility-toolbar-panel {
	background-color: #fffcf4 !important;
	border:           2px solid #000066 !important;
}
body.high-contrast .accessibility-option {
	color:       #000066 !important;
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
}
body.high-contrast .accessibility-option.active {
	background-color: #0000ff !important;
	color:            #ffffff !important;
}

/* 10. Footer — reset the inverted-colors trick
   style.css's .site-footer deliberately swaps --text-main/--bg-surface
   (dark text-color as the footer's background, light surface-color as its
   text) to paint a dark band in light mode / light band in dark mode. High
   contrast redefines those same variables for ordinary text/surface use
   (not "this doubles as a background"), so the swap produced a navy
   background with near-invisible pale text. Reset to the same page
   background + navy text used everywhere else in high contrast. */
body.high-contrast .site-footer {
	background-color: #fffcf4 !important;
	color:            #000066 !important;
}

/* SVG logo — convert to blue (#0000ff) in high contrast mode.
   brightness(0) forces all pixels to black, then the filter chain
   recolors to pure blue regardless of the original logo color. */
body.high-contrast .custom-logo,
body.high-contrast .custom-logo-light,
body.high-contrast .custom-logo-dark {
	filter: brightness(0) invert(8%) sepia(97%) saturate(7500%) hue-rotate(246deg) brightness(116%) contrast(141%) !important;
}

/* ============================================
   6. ARIA LIVE REGIONS
   ============================================ */

.aria-live-region {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status messages */
.status-message {
	padding: var(--space-md);
	border-radius: var(--border-radius-md);
	margin-bottom: var(--space-md);
	border-left: 4px solid currentColor;
}

.status-message.success {
	background-color: var(--color-success-bg);
	color: var(--color-success-text);
	border-left-color: var(--color-success);
}

.status-message.error {
	background-color: var(--color-error-bg);
	color: var(--color-error-text);
	border-left-color: var(--color-error);
}

.status-message.info {
	background-color: var(--color-info-bg);
	color: var(--color-info-text);
	border-left-color: var(--color-info);
}

/* ============================================
   7. KEYBOARD NAVIGATION HELPERS
   ============================================ */

/* Focus trap for modals */
.modal.is-active {
	position: fixed;
	z-index: 9999;
}

.modal.is-active:focus-within {
	outline: 3px solid var(--color-primary);
	outline-offset: -3px;
}

/* Tab navigation indicator */
body.using-keyboard .tabbable:focus {
	box-shadow: 0 0 0 3px var(--color-primary);
}

/* Visually indicate current focus */
body.using-keyboard [aria-current="page"]::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 100%;
	background-color: var(--color-primary);
}

/* ============================================
   8. TEXT READABILITY
   ============================================ */

/* Ensure sufficient line height for readability */
p,
li,
td,
dd {
	line-height: var(--line-height-relaxed);
}

/* Prevent orphans and widows */
p {
	orphans: 3;
	widows: 3;
}

/* Text selection — uses the Customizer's button pair: secondary bg + button text.
   These two are calibrated together in the Customizer so contrast is guaranteed. */
::selection {
	background-color: var(--color-secondary);
	color: var(--text-on-brand);
	text-shadow: none;
}

::-moz-selection {
	background-color: var(--color-secondary);
	color: var(--text-on-brand);
	text-shadow: none;
}

/* HC mode: --color-primary resolves to #0000ff via body.high-contrast token override,
   but --text-on-brand has no HC override so a dark Customizer value could slip through. */
body.high-contrast ::selection      { background-color: #0000ff !important; color: #ffffff !important; text-shadow: none !important; }
body.high-contrast ::-moz-selection { background-color: #0000ff !important; color: #ffffff !important; text-shadow: none !important; }

/* ============================================
   9. FORM ACCESSIBILITY
   ============================================ */

/* Required field indicator — excludes checkboxes/radios: they're replaced
   elements with no text flow to append " *" to, so the asterisk renders
   glued onto the control itself instead of after a label. */
.required,
[required]:not([type="checkbox"]):not([type="radio"])::after,
[aria-required="true"]:not([type="checkbox"]):not([type="radio"])::after {
	color: var(--color-error);
	content: " *";
	font-weight: var(--font-weight-bold);
}

/* Error state */
.error,
[aria-invalid="true"] {
	border-color: var(--color-error) !important;
	outline-color: var(--color-error) !important;
}

/* [role="alert"] alone also matches elements that use the role purely as an
   ARIA live region for screen readers, not to flag an error:
   WooCommerce's .woocommerce-variation on variable products gets the
   selected variation's own price/description written into it via JS —
   genuine, wanted content, not an error — and .reset_variations_alert is a
   screen-reader-only announcement, styled or not. :not(:empty) alone isn't
   enough (that still painted the variation price red, confirmed live after
   selecting a variation), so both are excluded by class outright. */
[role="alert"]:not(:empty):not(.woocommerce-variation):not(.reset_variations_alert) {
	color: var(--color-error-text);
	background-color: var(--color-error-bg);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--border-radius-md);
	border-left: 3px solid var(--color-error);
	margin-top: var(--space-xs);
	font-weight: var(--font-weight-semibold);
}

/* Disabled state */
:disabled,
[aria-disabled="true"] {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* Help text */
.help-text,
.description,
[aria-describedby] + .description {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-top: var(--space-xs);
}

/* ============================================
   10. ACCESSIBILITY TOOLBAR
   ============================================ */

.ernesto-accessibility-toolbar {
	position: relative;
	display: flex;
	align-items: center;
}

/* Toggle button — transparent by default, coloured circle on hover/active */
.accessibility-toolbar-toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-primary, #0066FF);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transition: background-color var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
	padding: 0;
}

/* assets/images/accessibility.svg is inlined via ernesto_get_theme_icon()
   and has no width/height attribute (only viewBox) and hardcodes black
   fill internally — size and recolor here instead of touching the file. */
.accessibility-toolbar-toggle svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Hover + active (panel open): blue circle + white icon */
.accessibility-toolbar-toggle:hover,
.accessibility-toolbar-toggle[aria-expanded="true"] {
	background: light-dark(#0000ff, #ffffff) !important;
	color: light-dark(#ffffff, #0000ff) !important;
	border: none !important;
	opacity: 1;
}

.accessibility-toolbar-toggle:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

/* Panel — uses the theme's own surface/border colours (colors.css light-dark()
   pairs, Customizer-editable) so it matches whichever mode is active instead
   of a fixed white/navy panel. body.high-contrast below overrides this back
   to fixed, tested-for-contrast colours — that mode's whole point is to NOT
   depend on the site's own (possibly low-contrast) colour choices. */
.accessibility-toolbar-panel {
	position: absolute;
	top: 100%;
	right: 0;
	bottom: auto;
	background-color: var(--bg-surface);
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius-md, 0.375rem);
	box-shadow: var(--shadow-xl, 0 8px 24px rgba(0,0,0,0.2));
	padding: var(--space-sm, 0.5rem);
	min-width: 200px;
	z-index: 9999;
}

.accessibility-toolbar-panel[hidden] {
	display: none;
}

/* Show panel when any child has focus (keyboard tabbing) — only after JS has
   initialised. JS adds .ernesto-a11y-ready once AccessibilityToolbar.init()
   completes, so the panel never opens in a state where the option buttons
   have no handlers.
   Mouse hover is deliberately NOT handled here — accessibility.js drives
   hover open/close through the same `hidden` attribute as click, so there is
   a single source of truth and the mouseleave grace-period delay actually
   applies. A parallel :hover rule here would bypass that delay entirely. */
.ernesto-accessibility-toolbar.ernesto-a11y-ready:focus-within .accessibility-toolbar-panel {
	display: block;
}

/* Options */
.accessibility-option {
	display: block;
	width: 100%;
	padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
	background-color: transparent;
	color: var(--text-main);
	border: none;
	text-align: left;
	cursor: pointer;
	border-radius: var(--border-radius-sm, 0.25rem);
	transition: background-color var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 600;
}

/* Hover: theme's own hover-state background */
.accessibility-option:hover {
	background-color: var(--bg-hover);
	color: var(--text-main);
}

.accessibility-option:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Active (toggled on): theme's primary colour, same as every other "on" state */
.accessibility-option.active {
	background-color: var(--color-primary);
	color: var(--text-on-brand);
	font-weight: 700;
}

/* High contrast mode — accessibility toolbar */
body.high-contrast .accessibility-toolbar-toggle {
	background-color: #0000ff !important;
	color: #ffffff !important;
}
body.high-contrast .accessibility-toolbar-toggle:hover {
	background-color: #0000cc !important;
}
body.high-contrast .accessibility-toolbar-panel {
	background-color: #ffffff !important;
	border: 2px solid #000066 !important;
	color: #000066 !important;
}
body.high-contrast .accessibility-option {
	color: #000066 !important;
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif !important;
	font-weight: 700 !important;
}
body.high-contrast .accessibility-option:hover {
	background-color: #fdf7e1 !important;
	color: #000000 !important;
}
body.high-contrast .accessibility-option.active {
	background-color: #16a34a !important;
	color: #ffffff !important;
}

/* High contrast mode — standard nav links match accessibility option style */

body.high-contrast .main-navigation a,
body.high-contrast .main-navigation a:visited {
	color: #000066 !important;
	text-decoration: none !important;  /* override the global a rule */
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	border-radius: var(--border-radius-sm, 0.25rem);
	padding: 0.35rem 0.6rem !important;
}

body.high-contrast .main-navigation a:hover,
body.high-contrast .main-navigation a:focus {
	background-color: #fdf7e1 !important;
	color: #000000 !important;
}

/* Parent items that have a dropdown: stay blue + white even in HC */
body.high-contrast .main-navigation .menu-item-has-children:hover > a,
body.high-contrast .main-navigation .menu-item-has-children:focus-within > a {
	background-color: #0000ff !important;
	color:            #ffffff !important;
}

body.high-contrast .main-navigation .current-menu-item > a,
body.high-contrast .main-navigation .current_page_item > a,
body.high-contrast .main-navigation .current-menu-ancestor > a {
	background-color: #0000ff !important;
	color: #ffffff !important;
}

/* HC sub-menus: bright blue background + white text (mirrors parent) */
body.high-contrast .main-navigation .sub-menu {
	background: #0000ff !important;
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
}

body.high-contrast .main-navigation .sub-menu a,
body.high-contrast .main-navigation .sub-menu a:visited {
	color:           #ffffff !important;
	font-size:       1.1rem  !important;
	background:      transparent !important;
	text-decoration: none !important;
}

/* Submenu item hover: navy + white + top/bottom border lines */
body.high-contrast .main-navigation .sub-menu a:hover,
body.high-contrast .main-navigation .sub-menu a:focus {
	background: #000066 !important;
	color:      #ffffff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
	            inset 0 -1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* ============================================
   11. RESPONSIVE TEXT SIZING
   ============================================ */

/* Allow user text zoom */
html {
	font-size: 100%; /* Allow browser zoom — JS overrides via inline style */
}

/*
 * Font size is now controlled via JS setting html.style.fontSize directly.
 * Each click on A+ / A- changes the root font-size by ±10% (range: 70%–150%).
 * Because the theme uses rem units throughout, all text scales automatically.
 *
 * The old body.font-size-increase / body.font-size-decrease classes are kept
 * below as a CSS-only fallback for non-JS environments.
 */
body.font-size-increase { font-size: 112.5%; }
body.font-size-decrease { font-size: 87.5%;  }

/* ============================================
   12. PRINT ACCESSIBILITY
   ============================================ */

@media print {
	/* Show URLs for links */
	a[href^="http"]:after {
		content: " (" attr(href) ")";
		font-size: 0.9em;
		font-weight: normal;
	}

	/* Show skip links in print */
	.skip-link {
		position: static;
		display: block;
	}

	/* Ensure sufficient contrast */
	* {
		color: #000000 !important;
		background: #FFFFFF !important;
	}

	/* Show focus indicators */
	*:focus {
		outline: 2px solid #000000 !important;
	}
}

/* ============================================
   13. MOBILE ACCESSIBILITY
   ============================================ */

@media (max-width: 768px) {
	/* Larger tap targets (minimum 44x44px). Color-swatch buttons (e.g.
	   ass-configurator's .assc-skin-tone/.assc-swatch) are excluded like
	   .slider-dot — a grid of many small, closely-packed swatches needs to
	   stay small to be usable at all; WCAG 2.5.5 itself carves out this
	   exact case ("target is one of a group of targets ... spacing is
	   sufficient").
	   Round icon-only buttons (pflanzenschuetzer's .hp-slider__prev/__next,
	   ass-world-gallery's .awg-lightbox__close/__arrow) are excluded for a
	   different reason: this rule's asymmetric padding (--space-sm vertical,
	   --space-md horizontal) turns a circle into an oval unless the button
	   also has an explicit equal width/height to clamp against. Each of
	   those components sets its own >=44px square size instead. */
	button:not(.slider-dot):not(.accessibility-toolbar-toggle):not(.assc-skin-tone):not(.assc-swatch):not(.hp-slider__prev):not(.hp-slider__next):not(.awg-lightbox__close):not(.awg-lightbox__arrow),
	input[type="button"],
	input[type="submit"],
	.button,
	a.button,
	a.btn,
	.menu-toggle,
	.back-to-top {
		min-height: 44px;
		min-width: 44px;
		padding: var(--space-sm) var(--space-md);
	}

	/* Increased tap area for interactive links */
	a[class*="btn"],
	a.button,
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* More spacing between interactive elements */
	.menu-item {
		margin-bottom: var(--space-sm);
	}

	/* Larger text for mobile */
	body {
		font-size: 16px; /* Never smaller than 16px to prevent zoom */
	}

	/* Skip links more prominent on mobile */
	.skip-link:focus {
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		border-radius: 0;
	}

	/* Accessibility toolbar is in the header; no fixed positioning needed on mobile */
}

/* ============================================
   14. LANDMARKS
   ============================================ */

/* Visually indicate landmarks (development only) */
body.show-landmarks header[role="banner"]::before,
body.show-landmarks nav[role="navigation"]::before,
body.show-landmarks main[role="main"]::before,
body.show-landmarks aside[role="complementary"]::before,
body.show-landmarks footer[role="contentinfo"]::before,
body.show-landmarks form[role="search"]::before {
	content: attr(role);
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-primary);
	color: var(--text-on-brand);
	padding: 2px 6px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	z-index: 9999;
	border-radius: var(--border-radius-sm);
}

/* ============================================
   15. IMAGE ALT TEXT LABELS
   ============================================ */

/* Injected by accessibility.js once per img; hidden by default. */
.ernesto-alt-label {
	display: none;
}

/* Shown as a small caption block in high-contrast mode */
body.high-contrast .ernesto-alt-label {
	display: block;
	font-size: 0.78rem;
	font-style: italic;
	font-family: 'Atkinson Hyperlegible', 'Noto Sans', Arial, sans-serif;
	color: #000066;
	line-height: 1.4;
	padding: 3px 0 3px 8px;
	margin: 3px 0 0.6em;
	border-left: 3px solid #000066;
}

/* ============================================
   16. ANIMATION TOGGLE
   ============================================ */

/* Provide a way to disable specific animations */
.no-animation,
.no-animation * {
	animation: none !important;
	transition: none !important;
}

/* Safe animations (always allowed) */
@keyframes fade-in-safe {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fade-in-safe {
	animation: fade-in-safe 0.3s ease-in;
}

/* Reduced motion respects this */
@media (prefers-reduced-motion: reduce) {
	.fade-in-safe {
		animation: none;
		opacity: 1;
	}
}