/* ==========================================================================
   ACCESSIBILITY OPTIONS PANEL
   Self-built widget — independent of css/styles.css.
   Uses tokens from styles.css :root (--color-navy, --color-gold, etc.).
   ========================================================================== */

/* ---------- Floating action button ---------- */
.wg-a11y-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-gold);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 1100;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 0;
}
.wg-a11y-fab:hover,
.wg-a11y-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}
.wg-a11y-fab:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}
.wg-a11y-fab svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-gold);
}
.wg-a11y-fab[aria-expanded="true"] {
  background: var(--color-gold-deep);
}

/* ---------- Backdrop ---------- */
.wg-a11y-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 39, 68, 0.45);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.wg-a11y-backdrop[data-open="1"] {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Panel ---------- */
.wg-a11y-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: var(--color-pale-gray);
  z-index: 1101;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
  font-family: var(--font-ui);
  color: var(--color-charcoal);
}
.wg-a11y-panel[data-open="1"] {
  transform: translateX(0);
}

/* Panel header */
.wg-a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--color-navy);
  color: var(--color-white);
  flex-shrink: 0;
}
.wg-a11y-panel__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--color-white);
  margin: 0;
}
.wg-a11y-panel__close {
  background: transparent;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  padding: 0.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.wg-a11y-panel__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.wg-a11y-panel__close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.wg-a11y-panel__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Panel body (scrollable) */
.wg-a11y-panel__body {
  overflow-y: auto;
  padding: 1.25rem;
  flex: 1;
}

/* Section header — matches the editorial overline style */
.wg-a11y-section {
  margin: 0 0 1.5rem 0;
}
.wg-a11y-section__title {
  font-family: var(--font-caps), 'Concourse Caps', 'Concourse', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin: 0 0 0.75rem 0;
}

/* Tile grid (2-column) */
.wg-a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

/* Toggle tile */
.wg-a11y-tile {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: 8px;
  padding: 0.85rem 0.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-charcoal);
  transition: all 0.2s ease;
  min-height: 78px;
  position: relative;
}
.wg-a11y-tile:hover {
  border-color: var(--color-gold);
}
.wg-a11y-tile:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.wg-a11y-tile[aria-pressed="true"],
.wg-a11y-tile[data-level]:not([data-level="0"]) {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
  border-left: 3px solid var(--color-gold);
}
.wg-a11y-tile svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-navy);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wg-a11y-tile[aria-pressed="true"] svg,
.wg-a11y-tile[data-level]:not([data-level="0"]) svg {
  stroke: var(--color-gold);
}
.wg-a11y-tile__label {
  display: block;
  line-height: 1.25;
}

/* Stepper indicator (3 dashes under label) for level features */
.wg-a11y-tile__steps {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.wg-a11y-tile__steps span {
  width: 14px;
  height: 2px;
  background: var(--color-light-gray);
  border-radius: 1px;
}
.wg-a11y-tile[data-level="1"] .wg-a11y-tile__steps span:nth-child(1),
.wg-a11y-tile[data-level="2"] .wg-a11y-tile__steps span:nth-child(-n+2),
.wg-a11y-tile[data-level="3"] .wg-a11y-tile__steps span {
  background: var(--color-gold);
}

/* Color filter chips */
.wg-a11y-filters {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: 8px;
  padding: 0.85rem;
}
.wg-a11y-filters__title {
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-navy);
  margin: 0 0 0.75rem 0;
}
.wg-a11y-filters__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.wg-a11y-chip {
  background: var(--color-pale-gray);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-charcoal);
  transition: all 0.2s ease;
}
.wg-a11y-chip:hover {
  border-color: var(--color-gold);
}
.wg-a11y-chip:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.wg-a11y-chip[aria-pressed="true"] {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
.wg-a11y-chip__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.wg-a11y-chip__swatch--grayscale { background: linear-gradient(90deg, #fff 50%, #888 50%); }
.wg-a11y-chip__swatch--rg { background: linear-gradient(90deg, #d33 50%, #2a2 50%); }
.wg-a11y-chip__swatch--by { background: linear-gradient(90deg, #1a3aa6 50%, #f5d142 50%); }
.wg-a11y-chip__swatch--gr { background: linear-gradient(90deg, #2a2 50%, #d33 50%); }

/* Panel footer */
.wg-a11y-panel__footer {
  border-top: 1px solid var(--color-light-gray);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-white);
  flex-shrink: 0;
}
.wg-a11y-reset {
  background: var(--color-navy);
  color: var(--color-white);
  border: 0;
  border-radius: 100px;
  padding: 0.7rem 1rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}
.wg-a11y-reset:hover { background: var(--color-gold-deep); }
.wg-a11y-reset:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}
.wg-a11y-reset svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wg-a11y-statement-link {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-mid-gray);
  text-decoration: none;
  text-align: center;
  transition: color 0.2s ease;
}
.wg-a11y-statement-link:hover { color: var(--color-gold-deep); }

/* Page Structure sub-view */
.wg-a11y-outline {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: 8px;
  padding: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.wg-a11y-outline ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.wg-a11y-outline li { margin: 0.3rem 0; }
.wg-a11y-outline ul ul { padding-left: 1.1rem; border-left: 2px solid var(--color-gold-pale); margin-left: 0.25rem; }
.wg-a11y-outline a {
  color: var(--color-charcoal);
  text-decoration: none;
  display: block;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
}
.wg-a11y-outline a:hover { background: var(--color-pale); color: var(--color-gold-deep); }
.wg-a11y-outline__empty { color: var(--color-mid-gray); font-style: italic; padding: 0.5rem; }

/* ==========================================================================
   FEATURE IMPLEMENTATIONS
   Each feature is keyed by a data-a11y-* attribute on <html>.
   ========================================================================== */

/* Bigger Text — 3 levels — set on :root font-size, body uses rem */
html[data-a11y-text="1"] { font-size: 110%; }
html[data-a11y-text="2"] { font-size: 122%; }
html[data-a11y-text="3"] { font-size: 135%; }

/* Line Height — 3 levels */
html[data-a11y-line="1"] body, html[data-a11y-line="1"] p, html[data-a11y-line="1"] li { line-height: 1.85 !important; }
html[data-a11y-line="2"] body, html[data-a11y-line="2"] p, html[data-a11y-line="2"] li { line-height: 2.1 !important; }
html[data-a11y-line="3"] body, html[data-a11y-line="3"] p, html[data-a11y-line="3"] li { line-height: 2.5 !important; }

/* Hide Images — preserves layout, keeps logos visible */
html[data-a11y-images="1"] img:not([class*="logo"]):not(.wg-a11y-icon),
html[data-a11y-images="1"] picture:not(.wg-a11y-icon),
html[data-a11y-images="1"] video {
  visibility: hidden !important;
}
/* Background-image hero — replace with solid navy */
html[data-a11y-images="1"] .hero { background-image: none !important; }

/* Readable Fonts — system stack */
html[data-a11y-readable="1"] body,
html[data-a11y-readable="1"] body *:not(.wg-a11y-fab):not(.wg-a11y-fab *):not(.wg-a11y-panel):not(.wg-a11y-panel *):not(.wg-a11y-backdrop) {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif !important;
}

/* Dyslexic Font — uses OpenDyslexic if files present at fonts/opendyslexic-*.woff2,
   otherwise falls back to a wide-spaced Verdana/Tahoma stack with extra letter+word spacing.
   Drop OpenDyslexic woff2 files into fonts/ to upgrade the rendering automatically. */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/opendyslexic-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/opendyslexic-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html[data-a11y-dyslexic="1"] body,
html[data-a11y-dyslexic="1"] body *:not(.wg-a11y-fab):not(.wg-a11y-fab *):not(.wg-a11y-panel):not(.wg-a11y-panel *):not(.wg-a11y-backdrop) {
  font-family: 'OpenDyslexic', 'Lexend Deca', 'Verdana', 'Tahoma', 'Geneva', sans-serif !important;
  letter-spacing: 0.04em;
  word-spacing: 0.18em;
}

/* Stop Animations */
html[data-a11y-stopanim="1"] *,
html[data-a11y-stopanim="1"] *::before,
html[data-a11y-stopanim="1"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Invert Colors — un-invert images/videos so photos still look right */
html[data-a11y-invert="1"] {
  filter: invert(1) hue-rotate(180deg);
}
html[data-a11y-invert="1"] img,
html[data-a11y-invert="1"] picture,
html[data-a11y-invert="1"] video {
  filter: invert(1) hue-rotate(180deg);
}
/* Don't double-invert the panel chrome */
html[data-a11y-invert="1"] .wg-a11y-fab,
html[data-a11y-invert="1"] .wg-a11y-panel,
html[data-a11y-invert="1"] .wg-a11y-backdrop {
  filter: invert(1) hue-rotate(180deg);
}

/* Brightness — 3 levels */
html[data-a11y-brightness="1"] { filter: brightness(1.2); }
html[data-a11y-brightness="2"] { filter: brightness(1.4); }
html[data-a11y-brightness="3"] { filter: brightness(1.6); }

/* Contrast — 3 levels */
html[data-a11y-contrast="1"] { filter: contrast(1.2); }
html[data-a11y-contrast="2"] { filter: contrast(1.45); }
html[data-a11y-contrast="3"] { filter: contrast(1.7); }

/* Saturation — 3 levels */
html[data-a11y-saturation="1"] { filter: saturate(1.4); }
html[data-a11y-saturation="2"] { filter: saturate(1.8); }
html[data-a11y-saturation="3"] { filter: saturate(2.4); }

/* Brightness/Contrast/Saturation can stack — class chains override singles below.
   Combined declarations for stacked filters (only most common pairs covered;
   JS resolves the final filter string for arbitrary combos). */
html[data-a11y-color-filter="grayscale"] { filter: grayscale(1); }
html[data-a11y-color-filter="protanopia"] { filter: url(#wg-a11y-protanopia); }
html[data-a11y-color-filter="deuteranopia"] { filter: url(#wg-a11y-deuteranopia); }
html[data-a11y-color-filter="tritanopia"] { filter: url(#wg-a11y-tritanopia); }

/* Highlight Links — high-visibility yellow with navy outline */
html[data-a11y-links="1"] a:not(.wg-a11y-fab):not(.wg-a11y-statement-link):not(.wg-a11y-tile *):not(.wg-a11y-chip *) {
  background: #fff59d !important;
  color: var(--color-navy) !important;
  outline: 2px solid var(--color-navy) !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION — open panel instantly
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wg-a11y-fab,
  .wg-a11y-backdrop,
  .wg-a11y-panel,
  .wg-a11y-tile,
  .wg-a11y-chip,
  .wg-a11y-reset {
    transition: none !important;
  }
}

/* ==========================================================================
   MOBILE — panel goes near-fullwidth at narrow viewports
   ========================================================================== */
@media (max-width: 480px) {
  .wg-a11y-panel { width: 100vw; }
  .wg-a11y-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }
  .wg-a11y-fab svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   PRINT — hide widget chrome
   ========================================================================== */
@media print {
  .wg-a11y-fab,
  .wg-a11y-backdrop,
  .wg-a11y-panel { display: none !important; }
}