/* Youth Oasis — accessibility layer.

   Three jobs:
     1. Baseline conformance the exported pages were missing — visible focus,
        a skip link, and a usable 404.
     2. The user-controlled preferences a11y.js toggles, expressed as classes on
        <html> so all the styling stays here.
     3. RTL support for the Arabic and Hebrew locales.

   Base styling stays inline on the elements (see site-responsive.css). This
   file only carries what cannot be expressed there. */

/* ---------------------------------------------------------------- focus --- */
/* The exported pages set style-focus on some controls and nothing on the rest,
   so keyboard users lost the caret entirely on links, details and form fields.
   This is the design system's canonical treatment: 2px --focus-ring, 2px
   offset. :focus-visible keeps it off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Reversed surfaces need the ring in the opposite ink to stay visible. */
[style*="background:var(--primary-500)"] :focus-visible,
[style*="background:var(--primary-700)"] :focus-visible,
footer :focus-visible {
  outline-color: var(--brand-white);
}

/* ------------------------------------------------------------ skip link --- */
.yo-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  background: var(--primary-500);
  color: var(--brand-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.yo-skip:focus {
  inset-inline-start: 0;
}

/* --------------------------------------------------------- text scaling --- */
/* The type scale is defined in rem, so moving the root size moves every token
   with it. Values written as raw px in the export (icon glyphs, two oversized
   display numbers) do not scale — noted rather than hidden. */
html.yo-font-sm { font-size: 87.5%; }
html.yo-font-lg { font-size: 118.75%; }

/* ------------------------------------------------------- high contrast --- */
/* Deliberately restrained: it retargets the text and border tokens rather than
   inventing a second palette, so the brand still reads as the brand. */
html.yo-contrast {
  --text-body: #000000;
  --text-muted: #2b2b2b;
  --gray-500: #2b2b2b;
  --gray-700: #1a1a1a;
  --border-default: #000000;
  --border-subtle: #000000;
  --border-strong: #000000;
  --surface-alt: #ffffff;
  --wheat-soft: #ffffff;
  --text-link: var(--plum-700);
}
html.yo-contrast a { text-decoration: underline; }
/* Decorative hero photography sits behind text at low opacity; raising the
   contrast means getting it out of the way. */
html.yo-contrast section > img[alt=""] { opacity: 0.06 !important; }

/* ------------------------------------------------------- reduced motion --- */
html.yo-reduce-motion *,
html.yo-reduce-motion *::before,
html.yo-reduce-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- RTL ------- */
/* The pages were converted to logical properties (margin-inline-start,
   border-inline-start, text-align:start) so the layout mirrors on its own.
   What remains is content that encodes direction in a glyph. */
[dir="rtl"] .yo-arrow {
  display: inline-block;
  transform: scaleX(-1);
}
/* Latin-script fragments inside RTL copy — phone numbers, emails, URLs. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
}

/* -------------------------------------------------- accessibility panel --- */
.yo-a11y-toggle {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 20px;
  z-index: 130;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--primary-500);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yo-a11y-toggle:hover { background: var(--surface-alt); border-color: var(--primary-500); }

.yo-a11y-panel {
  position: fixed;
  inset-block-end: 78px;
  inset-inline-start: 20px;
  z-index: 131;
  width: 280px;
  max-width: calc(100vw - 40px);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  font-family: var(--font-body);
  color: var(--text-body);
}
.yo-a11y-panel[hidden] { display: none; }
.yo-a11y-panel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--primary-500);
  margin: 0 0 14px;
}
.yo-a11y-field {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-500);
  margin-bottom: 6px;
}
.yo-a11y-select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.yo-a11y-group { border: 0; padding: 0; margin: 0 0 16px; }
.yo-a11y-group legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-500);
  padding: 0;
  margin-bottom: 6px;
}
.yo-a11y-row { display: flex; gap: 6px; }
.yo-a11y-row button {
  flex: 1;
  min-height: 44px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--primary-500);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.yo-a11y-row button[aria-pressed="true"] {
  background: var(--brand-plum);
  border-color: var(--brand-plum);
  color: var(--text-on-brand);
  font-weight: 700;
}
.yo-a11y-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font: inherit;
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.yo-a11y-knob {
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--gray-400);
  position: relative;
}
.yo-a11y-knob::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  background: var(--brand-white);
}
/* Never signal state with colour alone: the knob moves as well as recolours. */
.yo-a11y-switch[aria-pressed="true"] .yo-a11y-knob { background: var(--brand-plum); }
.yo-a11y-switch[aria-pressed="true"] .yo-a11y-knob::after { inset-inline-start: 19px; }
.yo-a11y-close {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  font: inherit;
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-on-brand);
  background: var(--primary-500);
  border: 1px solid var(--primary-500);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.yo-a11y-close:hover { background: var(--primary-700); }

/* The mobile action bar owns the bottom of the viewport below 900px. */
@media (max-width: 900px) {
  .yo-a11y-toggle { inset-block-end: 88px; }
  .yo-a11y-panel { inset-block-end: 146px; }
}

@media print {
  .yo-a11y-toggle, .yo-a11y-panel, .yo-skip { display: none !important; }
}