/* ══════════════════════════════════════════════════════════════════════════════
   Accessibility: the sr-only utility, the adjustments panel, and the five
   adjustments themselves.

   The adjustments are written as `:root.<class>` overrides of the design tokens
   rather than as component rules. That is the whole trick: because every
   component already draws its colour, size and motion from tokens, redefining a
   token cascades to the entire site — including anything the client later builds
   in Elementor, which never sees this file but does inherit the variables.
   ══════════════════════════════════════════════════════════════════════════════ */

/* The theme had no screen-reader-only utility; the panel's toggle needs one so
   its icon button carries a real accessible name. Clip-path rather than
   `display:none`, which would hide it from assistive tech too. */
.u-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}

/* ── The panel ─────────────────────────────────────────────────────────────── */

.a11y{position:fixed;inset-block-end:var(--ss-space-4);inset-inline-start:var(--ss-space-4);z-index:90}

.a11y__toggle{
  display:grid;place-items:center;
  /* 48px: above the 44px minimum in tokens.md, and this control is used by
     exactly the people least able to hit a small target. */
  width:48px;height:48px;
  border:var(--ss-border-hairline) solid var(--ss-border-strong);
  border-radius:var(--ss-radius-pill);
  background:var(--ss-bg-surface);color:var(--ss-text-primary);
  cursor:pointer
}
.a11y__toggle:hover{background:var(--ss-bg-surface-hover)}
.a11y__icon{width:26px;height:26px}

.a11y__panel{
  position:absolute;inset-block-end:calc(100% + var(--ss-space-2));inset-inline-start:0;
  inline-size:min(20rem,calc(100vw - var(--ss-space-8)));
  padding:var(--ss-space-4);
  background:var(--ss-bg-surface);color:var(--ss-text-primary);
  border:var(--ss-border-hairline) solid var(--ss-border-strong);
  border-radius:var(--ss-radius-card)
}
/* `hidden` is the state carried in the DOM, so honour it over the display the
   panel would otherwise inherit. Without this the attribute is decorative. */
.a11y__panel[hidden]{display:none}

.a11y__title{font-size:var(--ss-font-body-size);margin:0 0 var(--ss-space-3)}
.a11y__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ss-space-2)}

.a11y__opt{
  inline-size:100%;text-align:start;cursor:pointer;
  padding:var(--ss-space-2) var(--ss-space-3);
  min-height:44px;
  background:transparent;color:inherit;
  border:var(--ss-border-hairline) solid var(--ss-border-subtle);
  border-radius:var(--ss-radius-control);
  display:flex;flex-direction:column;gap:2px
}
.a11y__opt:hover{background:var(--ss-bg-surface-hover)}
/* State is carried by aria-pressed, so style from it — the attribute and the
   appearance cannot then disagree, which is the usual way a toggle lies to a
   screen reader. Not colour alone: the border weight changes too (WCAG 1.4.1). */
.a11y__opt[aria-pressed="true"]{
  border-color:var(--ss-border-accent);border-width:var(--ss-border-thick);
  background:var(--ss-bg-surface-hover)
}
.a11y__opt[aria-pressed="true"] .a11y__opt-label::after{content:" ✓"}
.a11y__opt-label{font-weight:600}
.a11y__opt-help{font-size:var(--ss-font-body-sm-size);color:var(--ss-text-secondary)}

.a11y__reset,.a11y__statement{
  display:block;inline-size:100%;margin-top:var(--ss-space-3);
  padding:var(--ss-space-2);min-height:44px;
  text-align:center;border-radius:var(--ss-radius-control);
  background:transparent;color:var(--ss-text-primary);cursor:pointer;
  border:var(--ss-border-hairline) solid var(--ss-border-subtle)
}
.a11y__statement{border:0;color:var(--ss-text-accent);text-decoration:underline}

/* Print is a different medium — a floating control is noise on paper. */
@media print{.a11y{display:none}}

/* ══ The adjustments ══════════════════════════════════════════════════════════ */

/* 1. Larger text. Applied at the root font size so every rem-based token scales
      together and the layout keeps its proportions, rather than bumping a few
      font-size rules and breaking the vertical rhythm. */
:root.a11y-text-lg{font-size:125%}

/* 2. High contrast. Redefines the semantic tokens only, so components need no
      special cases. The pairing is bone-100 on ink at well above 7:1, and gold
      is dropped for a light foreground because the brand gold is 1.6:1 on white
      and must never carry text (DESIGN.md). */
:root.a11y-contrast{
  --ss-bg-canvas:#000;--ss-bg-surface:#000;--ss-bg-sunken:#000;--ss-bg-surface-hover:#1a1a1a;
  --ss-text-primary:#fff;--ss-text-secondary:#fff;--ss-text-accent:#ffd97a;
  --ss-border-subtle:#fff;--ss-border-strong:#fff;--ss-border-hairline:2px
}
:root.a11y-contrast img,:root.a11y-contrast picture{filter:grayscale(1) contrast(1.15)}
/* Decorative photography behind text becomes noise at high contrast; the scrim
   goes fully opaque so the copy sits on a flat field. */
:root.a11y-contrast .hero__scrim,:root.a11y-contrast .ctaband__media{background:#000;opacity:1}

/* 3. Underline every link. WCAG 1.4.1 — links inside prose must not be
      distinguished by colour alone, and this makes that unconditional. */
:root.a11y-links a{text-decoration:underline!important;text-underline-offset:.15em}

/* 4. Stop motion. Mirrors what the reduced-motion media query already does, for
      visitors whose OS preference is not set but who need it anyway. */
:root.a11y-no-motion *,
:root.a11y-no-motion *::before,
:root.a11y-no-motion *::after{
  animation-duration:1ms!important;animation-iteration-count:1!important;
  transition-duration:1ms!important;scroll-behavior:auto!important
}
/* The scroll-reveal leaves content at opacity:0 until its observer fires. With
   motion off, that reveal must not be what decides whether text is visible. */
:root.a11y-no-motion [data-anim]{opacity:1!important;transform:none!important;filter:none!important}

/* 5. Readable font. Drops the display face for the body face across headings —
      useful for dyslexia and low vision, and a no-op on the faces that are
      already the body stack. */
:root.a11y-readable h1,:root.a11y-readable h2,:root.a11y-readable h3,
:root.a11y-readable .h-1,:root.a11y-readable .h-2,:root.a11y-readable .h-hero{
  font-family:var(--ss-font-body-family);letter-spacing:normal
}