/**
 * 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
   ============================================ */

/* System high contrast mode */
@media (prefers-contrast: high) {
	:root {
		--color-primary: #0000ff;
		--text-main: #000066;
		--bg-body: #FFF9E5;
		--border-color: #000066;
	}
	* { border-width: 2px !important; }
	a { text-decoration: underline !important; color: #7c2a00 !important; }
}

/* ---------------------------------------------------------------
   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:  'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--font-heading:  'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--font-special:  'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--font-nav:      'Noto Sans', Arial, 'Liberation Sans', sans-serif;
	--text-main:     #000066;
	--text-heading:  #000066;
	--text-muted:    #000066;
	--bg-body:       #FFF9E5;
	--bg-surface:    #FFF9E5;
	--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: #FFF9E5;
}

/* 3. Body base */
body.high-contrast {
	background-color: #FFF9E5 !important;
	color:            #000066 !important;
	font-family:      '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: '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: '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: 'Noto Sans', Arial, sans-serif !important;
	font-size:   2rem    !important;  /* 32px */
	font-weight: 700     !important;
	line-height: 1.25    !important;
	color:       #000066 !important;
}
body.high-contrast h3, body.high-contrast .h3 {
	font-family: '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: '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: '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: '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:     '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 */
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 {
	background-color: #0000ff !important;
	color:            #ffffff !important;
	font-family:      'Noto Sans', Arial, sans-serif !important;
	font-weight:      700 !important;
	border:           2px solid #0000ff !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 {
	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 textarea,
body.high-contrast select {
	background-color: #ffffff !important;
	color:            #000066 !important;
	border:           2px solid #000066 !important;
	font-family:      '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: #FFF9E5 !important;
	border:           2px solid #000066 !important;
}
body.high-contrast .accessibility-option {
	color:       #000066 !important;
	font-family: 'Noto Sans', Arial, sans-serif !important;
}
body.high-contrast .accessibility-option.active {
	background-color: #0000ff !important;
	color:            #ffffff !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;
}

/* Improve text selection contrast */
::selection {
	background-color: var(--color-primary);
	color: var(--text-on-brand);
	text-shadow: none;
}

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

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

/* Required field indicator */
.required,
[required]::after,
[aria-required="true"]::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;
}

.error-message,
[role="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 */
.accessibility-toolbar-toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: transparent;
	color: var(--text-main, currentColor);
	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;
}

/* Hover: blue circle + white icon in light mode; white circle + blue icon in dark mode */
.accessibility-toolbar-toggle:hover {
	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 — white background with navy border, always readable */
.accessibility-toolbar-panel {
	position: absolute;
	top: calc(100% + var(--space-xs, 0.25rem));
	right: 0;
	bottom: auto;
	background-color: #ffffff;
	border: 2px solid #000066;   /* navy border */
	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;
}

/* Options — navy text on cream, bold */
.accessibility-option {
	display: block;
	width: 100%;
	padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
	background-color: transparent;
	color: #000066;
	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: yellow highlight with black text */
.accessibility-option:hover {
	background-color: #ffff00;
	color: #000000;
}

.accessibility-option:focus-visible {
	outline: 2px solid #0000ff;
	outline-offset: 2px;
}

/* Active (toggled on) */
.accessibility-option.active {
	background-color: #0000ff;
	color: #ffffff;
	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: 'Noto Sans', Arial, sans-serif !important;
	font-weight: 700 !important;
}
body.high-contrast .accessibility-option:hover {
	background-color: #ffff00 !important;
	color: #000000 !important;
}
body.high-contrast .accessibility-option.active {
	background-color: #0000ff !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-weight: 700 !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: #ffff00 !important;
	color: #000000 !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;
}

/* ============================================
   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) */
	button,
	a,
	input[type="button"],
	input[type="submit"],
	.button {
		min-height: 44px;
		min-width: 44px;
		padding: var(--space-sm) var(--space-md);
	}

	/* 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. 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;
	}
}