/* ==========================================================================
   The Roanoke Conference — accessibility settings
   --------------------------------------------------------------------------
   Two things live here:
     1. What each setting does to the page. Settings are data-a11y-*
        attributes on <html>, set by the inline script in head.html (before
        first paint) and by /assets/js/a11y.js. Color changes for Increase
        Contrast live in theme.css, section 5, with every other color.
     2. The floating control and its panel.
   Contains NO literal colors; everything is a role token from theme.css.
   ========================================================================== */

/* ---------- 1. Settings ---------- */

/* Text Size: the whole site is set in rem, so scaling the root scales all. */
html[data-a11y-text="112"] { font-size: 112.5%; }
html[data-a11y-text="125"] { font-size: 125%; }
html[data-a11y-text="140"] { font-size: 140%; }
html[data-a11y-text="160"] { font-size: 160%; }
html[data-a11y-text="180"] { font-size: 180%; }
html[data-a11y-text="200"] { font-size: 200%; }

/* Bold Text */
html[data-a11y-bold="on"] body { font-weight: 600; }
html[data-a11y-bold="on"] :is(strong, b, th, .btn, .nav a, .brand__name, .panel__v) { font-weight: 700; }
html[data-a11y-bold="on"] :is(h1, h2, h3, .hero h1 em) { font-weight: 800; }

/* Readable Spacing — in the spirit of WCAG 1.4.12: roomier lines, letters,
   words and paragraphs, with tight display tracking relaxed. */
html[data-a11y-spacing="on"] body { line-height: 1.8; letter-spacing: .05em; word-spacing: .1em; }
html[data-a11y-spacing="on"] :is(h1, h2, h3, h4) { letter-spacing: .01em; line-height: 1.25; }
html[data-a11y-spacing="on"] :is(p, li, dd) { margin-bottom: 1.6em; }
html[data-a11y-spacing="on"] :is(.eyebrow, .countdown__label, .stat__label, .brand__sub) { letter-spacing: .2em; }
html[data-a11y-spacing="on"] .btn { letter-spacing: .04em; }

/* Reduce Transparency — see-through chrome and glows become solid or go. */
html[data-a11y-transparency="on"] .site-header,
html[data-a11y-transparency="on"] .site-header.is-stuck {
  background: var(--color-surface-chrome);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-a11y-transparency="on"] .hero__dateline { background: var(--color-surface-feature); }
html[data-a11y-transparency="on"] :is(.hero, .page-hero, .cta-band, .panel, .lodging-feature)::before { display: none; }
html[data-a11y-transparency="on"] .a11y__panel::backdrop { background: transparent; }

/* Button Shapes — every link is underlined, every control has a visible edge. */
html[data-a11y-shapes="on"] a:not(.btn):not(.skip-link) {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
html[data-a11y-shapes="on"] .btn { outline: 2px solid currentColor; outline-offset: -4px; }
html[data-a11y-shapes="on"] a.card--link { text-decoration: none; }
html[data-a11y-shapes="on"] a.card--link :is(h3, .card__title) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-a11y-shapes="on"] .btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
html[data-a11y-shapes="on"] .a11y__step,
html[data-a11y-shapes="on"] .a11y__close { border-color: currentColor; }

/* Reduce Motion — every animation and transition collapses to an instant;
   the hero scene's roaming animals are hidden and its bird grounded. The
   spinner keeps turning (slowly), because a frozen spinner reads as stuck. */
html[data-a11y-motion="on"] *,
html[data-a11y-motion="on"] *::before,
html[data-a11y-motion="on"] *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html[data-a11y-motion="on"] .spinner { animation-duration: 1.8s !important; animation-iteration-count: infinite !important; }
html[data-a11y-motion="on"] :is(.hero__bird, .hero__critters, .hero__eyes) { display: none; }
html[data-a11y-motion="on"] .reveal { opacity: 1; transform: none; }
html[data-a11y-motion="on"] :is(.card--link, .tier):hover { transform: none; }

/* ---------- 2. The control ---------- */

.a11y__fab {
  position: fixed; z-index: 150;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 3.25rem; height: 3.25rem; min-width: 44px; min-height: 44px;
  padding: 0; border: 2px solid var(--a11y-fab-border); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--a11y-fab-text); background: var(--a11y-fab-bg);
  box-shadow: var(--shadow-md);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.a11y__fab:hover { background: var(--a11y-fab-bg-hover); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.a11y__fab:active { transform: translateY(0); }
.a11y__fab:focus-visible { outline: 3px solid var(--a11y-fab-ring); outline-offset: 3px; }
.a11y__fab .a11y__icon { width: 62%; height: 62%; }
/* A small dot shows that settings are in effect. */
.a11y__fab.is-active::after {
  content: ""; position: absolute; top: -.1rem; right: -.1rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--a11y-dot); border: 2px solid var(--a11y-fab-text);
}
@media print { .a11y { display: none !important; } }

.a11y__panel {
  position: fixed; inset: auto auto calc(max(1rem, env(safe-area-inset-bottom)) + 4rem) max(1rem, env(safe-area-inset-left));
  margin: 0; padding: 0;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(80vh, calc(100dvh - 6rem));
  display: none; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-lg);
  font-size: .95rem; line-height: 1.5;
  text-align: left;
}
.a11y__panel[open] { display: flex; }
.a11y__panel::backdrop { background: var(--a11y-backdrop); }
/* Fallback for browsers without <dialog>: dim the page ourselves. */
.a11y.is-fallback-open::before {
  content: ""; position: fixed; inset: 0; z-index: 151; background: var(--a11y-backdrop);
}
.a11y.is-fallback-open .a11y__panel { z-index: 152; }
@media (max-width: 480px) {
  .a11y__panel {
    inset: auto 0 0 0; width: 100%; max-width: none;
    max-height: min(88vh, calc(100dvh - 3rem));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
  }
}

.a11y__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1rem 0 1.25rem;
}
.a11y__title {
  font-family: var(--font-serif); font-size: 1.35rem; margin: 0;
  color: var(--color-heading);
}
.a11y__title:focus { outline: none; }
.a11y__title:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.a11y__close {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent; border-radius: 50%;
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.a11y__close:hover { background: var(--color-hover-wash); color: var(--color-text); }
.a11y__close svg { width: 20px; height: 20px; }
.a11y__intro { margin: .35rem 1.25rem .85rem; color: var(--color-text-muted); font-size: .9rem; }

.a11y__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem; flex: 1 1 auto; }
.a11y__group { padding: .5rem 0 .75rem; border-top: 1px solid var(--color-border-soft); }
.a11y__group-title {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--color-accent-text); margin: .5rem 0 .25rem;
}
.a11y__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--color-border-soft);
}
.a11y__group-title + .a11y__row { border-top: 0; }
.a11y__row--stack { flex-direction: column; align-items: stretch; gap: .6rem; }
.a11y__label { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.a11y__name { font-weight: 650; color: var(--color-heading); }
.a11y__hint { font-size: .82rem; color: var(--color-text-muted); }
.a11y__system { font-style: italic; }

/* Switch: 44px tall hit area, with Apple-style on/off glyphs in the track. */
.a11y__switch {
  flex: none; min-width: 44px; min-height: 44px; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px;
}
.a11y__track {
  position: relative; display: block; width: 3.2rem; height: 1.9rem; border-radius: 100px;
  background: var(--a11y-switch-off); border: 2px solid var(--a11y-switch-off);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.a11y__knob {
  position: absolute; top: 50%; left: .1rem; transform: translateY(-50%);
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--a11y-knob); box-shadow: var(--shadow-sm);
  transition: left .2s var(--ease);
}
.a11y__glyph {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: .7rem; font-weight: 700; line-height: 1; color: var(--a11y-glyph);
  font-family: var(--font-sans); opacity: 0; transition: opacity .2s var(--ease);
}
.a11y__glyph--on  { left: .55rem; }
.a11y__glyph--off { right: .5rem; }
.a11y__switch[aria-checked="true"] .a11y__track { background: var(--a11y-switch-on); border-color: var(--a11y-switch-on); }
.a11y__switch[aria-checked="true"] .a11y__knob { left: calc(100% - 1.55rem); }
.a11y__switch[aria-checked="true"] .a11y__glyph--on  { opacity: 1; }
.a11y__switch[aria-checked="false"] .a11y__glyph--off { opacity: 1; }
.a11y__switch:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.a11y__switch:hover .a11y__track { filter: brightness(.94); }

/* Text-size stepper */
.a11y__stepper { display: flex; align-items: center; gap: .6rem; }
.a11y__step {
  flex: none; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--color-border-hover); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-heading);
  font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.a11y__step sup { font-size: .6em; font-family: var(--font-sans); margin-left: .05em; }
.a11y__step:hover:not(:disabled) { background: var(--color-hover-wash); }
.a11y__step:disabled { opacity: .45; cursor: not-allowed; }
.a11y__range { flex: 1 1 auto; min-width: 0; accent-color: var(--a11y-switch-on); height: 44px; margin: 0; cursor: pointer; }
.a11y__range:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.a11y__value { flex: none; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--color-heading); }

.a11y__foot {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.25rem 1.1rem; border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface-alt);
}
.a11y__note { margin: 0; font-size: .78rem; color: var(--color-text-muted); flex: 1 1 14rem; }

/* Windows High Contrast / forced colors: keep every state visible with borders. */
@media (forced-colors: active) {
  .a11y__fab { border: 2px solid ButtonText; forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
  .a11y__track { border: 2px solid ButtonText; background: ButtonFace; }
  .a11y__knob { background: ButtonText; box-shadow: none; }
  .a11y__switch[aria-checked="true"] .a11y__track { background: Highlight; border-color: Highlight; }
  .a11y__switch[aria-checked="true"] .a11y__knob { background: HighlightText; }
  .a11y__glyph { color: ButtonText; }
  .a11y__switch[aria-checked="true"] .a11y__glyph { color: HighlightText; }
  .a11y__step, .a11y__close { border: 1.5px solid ButtonText; }
}