/* ==========================================================================
   Accessibility Toggle Widget
   Kimberly G. Jackson -- WCAG Compliance Helpers
   ========================================================================== */

/* ── OpenDyslexic: declared but only downloaded when actually used ──────── */
/* Browsers only fetch @font-face files when a matching selector applies,
   so these declarations cost nothing until .a11y-dyslexia-font is active.
   Replaces the old @import which loaded the stylesheet on every page. */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://fonts.cdnfonts.com/s/10934/OpenDyslexic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://fonts.cdnfonts.com/s/10934/OpenDyslexic-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   1. Toggle Button (FAB)
   ========================================================================== */

.a11y-toggle-btn {
  position: fixed;
  bottom: var(--space-md, 1.5rem);
  right: var(--space-md, 1.5rem);
  z-index: 10000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-primary, #A67B5B);
  color: var(--color-white, #FFFFFF);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(44, 44, 44, 0.25);
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.a11y-toggle-btn:hover {
  background-color: var(--color-primary-dark, #8B6343);
  box-shadow: 0 4px 16px rgba(44, 44, 44, 0.3);
  transform: scale(1.05);
}

.a11y-toggle-btn:focus-visible {
  outline: 3px solid var(--color-primary-light, #C49A7A);
  outline-offset: 3px;
}

/* When the panel is open, darken the button for visual feedback */
.a11y-toggle-btn[aria-expanded="true"] {
  background-color: var(--color-primary-dark, #8B6343);
}


/* ==========================================================================
   2. Settings Panel
   ========================================================================== */

.a11y-panel {
  position: fixed;
  bottom: calc(var(--space-md, 1.5rem) + 48px + var(--space-xs, 0.75rem));
  right: var(--space-md, 1.5rem);
  z-index: 9999;
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: var(--color-white, #FFFFFF);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(44, 44, 44, 0.15), 0 2px 8px rgba(44, 44, 44, 0.08);
  border: 1px solid var(--color-border-light, #EAE4DC);
  padding: 0;
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition: transform 300ms ease, opacity 300ms ease, visibility 0s linear 300ms;
  pointer-events: none;
}

.a11y-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 300ms ease, opacity 300ms ease, visibility 0s linear 0s;
}

/* Panel header */
.a11y-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 0.5rem);
  padding: var(--space-sm, 1rem) var(--space-md, 1.5rem);
  border-bottom: 1px solid var(--color-border-light, #EAE4DC);
}

.a11y-panel__title {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--color-text, #2C2C2C);
  margin: 0;
}

.a11y-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Panel body / list of options */
.a11y-panel__body {
  padding: var(--space-xs, 0.75rem) var(--space-md, 1.5rem) var(--space-sm, 1rem);
}

/* Reset button at the bottom */
.a11y-panel__reset {
  display: block;
  width: calc(100% - var(--space-md, 1.5rem) * 2);
  margin: var(--space-2xs, 0.5rem) auto var(--space-sm, 1rem);
  padding: var(--space-2xs, 0.5rem) var(--space-sm, 1rem);
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #5A5A5A);
  background: var(--color-cream, #FAF7F2);
  border: 1px solid var(--color-border, #D4CBC0);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.a11y-panel__reset:hover {
  background: var(--color-warm-gray, #E8E0D6);
  color: var(--color-text, #2C2C2C);
}


/* ==========================================================================
   3. Toggle Switch Styling
   ========================================================================== */

.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs, 0.75rem) 0;
  border-bottom: 1px solid var(--color-border-light, #EAE4DC);
}

.a11y-option:last-child {
  border-bottom: none;
}

.a11y-option__label {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text, #2C2C2C);
  cursor: pointer;
  user-select: none;
  flex: 1;
  padding-right: var(--space-xs, 0.75rem);
}

/* The toggle track */
.a11y-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.a11y-switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

/* Track */
.a11y-switch__track {
  position: absolute;
  inset: 0;
  background-color: var(--color-warm-gray, #E8E0D6);
  border-radius: 12px;
  transition: background-color 200ms ease;
  cursor: pointer;
}

/* Thumb / knob */
.a11y-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--color-white, #FFFFFF);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(44, 44, 44, 0.2);
  transition: transform 200ms ease;
}

/* Checked state */
.a11y-switch input:checked + .a11y-switch__track {
  background-color: var(--color-primary, #A67B5B);
}

.a11y-switch input:checked + .a11y-switch__track::after {
  transform: translateX(20px);
}

/* Focus ring on the track when the input is focused */
.a11y-switch input:focus-visible + .a11y-switch__track {
  outline: 3px solid var(--color-focus-ring, #A67B5B66);
  outline-offset: 2px;
}


/* ==========================================================================
   4. Accessibility Modes -- HTML Class Overrides
   All selectors use html.a11y-* for proper specificity over :root vars.
   ========================================================================== */

/* ── 4a. High Contrast (WCAG AAA variable overrides, no filter) ────────── */
html.a11y-high-contrast {
  --color-text:             #111111;
  --color-text-secondary:   #333333;
  --color-cream:            #FFFFFF;
  --color-warm-gray:        #F0F0F0;
  --color-white:            #FFFFFF;
  --color-border:           #888888;
  --color-border-light:     #AAAAAA;
  --color-primary:          #6B4226;
  --color-primary-dark:     #4A2E1A;
  --color-primary-light:    #8B5E3C;
  --color-overlay:          #000000CC;
  --color-soft-taupe:       #555555;
  --color-muted-olive:      #4A4A32;
  --color-focus-ring:       #6B422699;
}

/* Ensure text over images is readable */
html.a11y-high-contrast .hero__overlay,
html.a11y-high-contrast .section--dark::before {
  background-color: rgba(0, 0, 0, 0.7);
}


/* ── 4b. Large Text ────────────────────────────────────────────────────── */
html.a11y-large-text {
  font-size: 125%;
}

html.a11y-large-text body {
  line-height: 1.8;
}


/* ── 4c. Underline Links ───────────────────────────────────────────────── */
html.a11y-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}

html.a11y-underline-links a:hover {
  text-decoration-thickness: 2px !important;
}

/* Exclude the toggle button and nav logo from the underline override */
html.a11y-underline-links .a11y-toggle-btn,
html.a11y-underline-links .nav__logo a {
  text-decoration: none !important;
}


/* ── 4d. Reduce Motion ─────────────────────────────────────────────────── */
html.a11y-reduce-motion,
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Make all reveal / scroll-animated elements visible immediately */
html.a11y-reduce-motion .reveal,
html.a11y-reduce-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}


/* ── 4e. Dyslexia-Friendly Font ────────────────────────────────────────── */
/* The @font-face declarations at the top define OpenDyslexic but browsers
   only download the font files when a matching CSS rule references the
   family name. So the font is loaded on demand, not on every page. */
html.a11y-dyslexia-font {
  --font-body: 'OpenDyslexic', sans-serif;
}

html.a11y-dyslexia-font body,
html.a11y-dyslexia-font p,
html.a11y-dyslexia-font li,
html.a11y-dyslexia-font span,
html.a11y-dyslexia-font td,
html.a11y-dyslexia-font th,
html.a11y-dyslexia-font label,
html.a11y-dyslexia-font input,
html.a11y-dyslexia-font textarea,
html.a11y-dyslexia-font select,
html.a11y-dyslexia-font .lead,
html.a11y-dyslexia-font .text-small,
html.a11y-dyslexia-font .text-caption {
  font-family: 'OpenDyslexic', 'Poppins', sans-serif !important;
}

html.a11y-dyslexia-font body {
  word-spacing: 0.1em;
  letter-spacing: 0.03em;
}



/* ==========================================================================
   5. Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
  .a11y-panel {
    right: var(--space-xs, 0.75rem);
    left: var(--space-xs, 0.75rem);
    width: auto;
    bottom: calc(var(--space-xs, 0.75rem) + 48px + var(--space-xs, 0.75rem));
  }

  .a11y-toggle-btn {
    bottom: var(--space-xs, 0.75rem);
    right: var(--space-xs, 0.75rem);
  }
}

/* Respect OS-level reduced-motion preference by default */
@media (prefers-reduced-motion: reduce) {
  .a11y-panel {
    transition: none;
  }

  .a11y-toggle-btn {
    transition: none;
  }

  .a11y-switch__track,
  .a11y-switch__track::after {
    transition: none;
  }
}