/* ==========================================================================
   Legal / accessibility layer — footer legal links, the site-wide
   accessibility button, the newsletter consent checkbox, and the two
   static legal pages (/accessibility/, /privacy-policy/). Every value here
   is an existing design token (--color-lime, --color-black, --dur-fast,
   --font-display, etc.) or copies an existing component's own recipe
   (the circular button matches .story-play-badge exactly) — no new visual
   system.
   ========================================================================== */

/* ---- Footer legal links — sits inside .footer-bottom, same row as the
   copyright/tagline, same (now clearly readable) color already used
   there. ---- */
.footer-legal{
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.footer-legal a{ color: rgba(255,255,255,0.85); transition: color var(--dur-fast); }
.footer-legal a:hover, .footer-legal a:focus-visible{ color: var(--color-lime); }

/* ---- Footer credit — now an ordinary member of the SAME .footer-bottom
   row as the copyright/tagline/legal links (see index.html etc.), not a
   separate line — inherits .footer-bottom's own color/size, so it reads
   exactly as prominently as everything else in that row. ---- */
.footer-credit a{ color: rgba(255,255,255,0.92); transition: color var(--dur-fast); }
.footer-credit a:hover, .footer-credit a:focus-visible{ color: var(--color-lime); }

/* ---- Site-wide accessibility button — fixed bottom-left (left/right are
   physical, not logical, so this stays put regardless of RTL), well clear
   of the mobile-nav overlay (z-index 99) and header (100) — sits under
   both so it's never in the way when either is open. Same circular-lime-
   badge recipe as .story-play-badge / .story-check. ---- */
.a11y-fab{
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-lime);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(17,17,17,0.22);
  transition: transform var(--dur-fast), opacity var(--dur-fast);
  /* It's a <button> (opens the panel in place — never a navigation), so
     reset the browser's own button chrome back to the plain circular
     badge look. */
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.a11y-fab:hover, .a11y-fab:focus-visible{ transform: scale(1.06); }
.a11y-fab svg{ width: 26px; height: 26px; }
/* Faded aside (never display:none, so it never disappears from keyboard
   tab order unexpectedly) while the footer — which carries the same link
   — is itself in view; see js/main.js initA11yFab(). */
.a11y-fab.is-hidden{ opacity: 0; pointer-events: none; }

@media (max-width: 600px){
  .a11y-fab{ width: 46px; height: 46px; left: 14px; bottom: 14px; }
  .a11y-fab svg{ width: 22px; height: 22px; }
}

/* ---- Accessibility control panel — built/injected by
   js/accessibility-panel.js, one instance per page. A compact floating
   card near the button, in the site's own language (cream, black type,
   yellow accent) — never a third-party widget's default styling. ---- */
.a11y-panel{
  position: fixed;
  left: 20px;
  bottom: 84px;
  z-index: 95; /* above the fab (90), still under header/mobile-nav (99/100) */
  width: min(320px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
  background: var(--color-bg);
  color: var(--color-black);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(17,17,17,0.22);
  padding: 1.3rem 1.3rem 1.5rem;
}
.a11y-panel[hidden]{ display: none; }

.a11y-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.a11y-panel-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: var(--tracking-display);
}
.a11y-panel-close{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--color-line-strong);
  background: var(--color-white);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.a11y-panel-close:hover, .a11y-panel-close:focus-visible{ background: var(--color-lime); transform: scale(1.06); }
.a11y-panel-close svg{ width: 16px; height: 16px; }

.a11y-reset-btn{
  display: block;
  width: 100%;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 1.3rem;
  transition: background var(--dur-fast);
}
.a11y-reset-btn:hover, .a11y-reset-btn:focus-visible{ background: #333; }

.a11y-section{ margin-bottom: 1.2rem; }
.a11y-section:last-child{ margin-bottom: 0; }
.a11y-section-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.a11y-fontsize-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--color-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 10px;
  padding: 0.4rem;
}
.a11y-step-btn{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1.5px solid var(--color-line-strong);
  background: var(--color-bg);
  color: var(--color-black);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.a11y-step-btn:hover, .a11y-step-btn:focus-visible{ background: var(--color-lime); }
.a11y-step-btn:disabled{ opacity: 0.35; cursor: not-allowed; }
.a11y-fontsize-value{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  min-width: 3.6ch;
  text-align: center;
}

.a11y-toggle-list{ display: flex; flex-direction: column; gap: 0.6rem; }
.a11y-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.8rem;
  background: var(--color-white);
  border: 1.5px solid var(--color-line-strong);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-black);
  cursor: pointer;
  text-align: start;
}
.a11y-toggle-switch{
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-line-strong);
  position: relative;
  transition: background var(--dur-fast);
}
.a11y-toggle-switch::after{
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  transition: transform var(--dur-fast);
}
.a11y-toggle[aria-pressed="true"]{ border-color: var(--color-black); }
.a11y-toggle[aria-pressed="true"] .a11y-toggle-switch{ background: var(--color-lime); }
.a11y-toggle[aria-pressed="true"] .a11y-toggle-switch::after{ transform: translateX(-16px); }

.a11y-links{ display: flex; flex-direction: column; gap: 0.5rem; }
.a11y-links a{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.a11y-links a:hover{ color: var(--color-lime); }
.a11y-kb-hint{
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 600px){
  .a11y-panel{
    left: 14px;
    bottom: 68px;
    width: min(300px, calc(100vw - 28px));
    max-height: min(70vh, calc(100vh - 100px));
  }
}

/* ==========================================================================
   Accessibility preference effects — applied as real classes on <html> by
   js/accessibility-panel.js (and, before first paint, by the small inline
   snippet in each page's <head>) and reused across every page. Every
   effect reuses the site's own tokens or a plain, well-understood CSS
   technique — never a per-component hack. ========================== */

/* Text size: scales the root, so every rem-based size site-wide scales
   with it — same technique as any zoom-style control. */
html.a11y-fs-90{ font-size: 90%; }
html.a11y-fs-110{ font-size: 110%; }
html.a11y-fs-120{ font-size: 120%; }
html.a11y-fs-130{ font-size: 130%; }

/* High contrast: reuses the site's own text-color tokens (already used
   everywhere body copy is styled) rather than a blanket override, so nothing
   outside normal text/borders changes. */
html.a11y-contrast{
  --color-dark: #000000;
  --color-muted: #000000;
  --color-line: rgba(17,17,17,0.4);
  --color-line-strong: rgba(17,17,17,0.65);
}
html.a11y-contrast :focus-visible{ outline: 3px solid #000 !important; outline-offset: 2px; }

/* Grayscale: one filter on the root — affects the whole page, including
   photos, without touching any component's own markup or CSS. */
html.a11y-grayscale{ filter: grayscale(1); }

/* Underline every link site-wide, regardless of its own hover-only
   underline treatment. */
html.a11y-underline-links a{ text-decoration: underline !important; text-underline-offset: 2px; }

/* Bolder body copy site-wide. */
html.a11y-bold-text, html.a11y-bold-text p, html.a11y-bold-text li, html.a11y-bold-text span{ font-weight: 700; }

/* ---- Newsletter consent checkbox — sits between the form row and the
   status message, same muted/small-text language as .newsletter-copy. ---- */
.newsletter-consent{
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.8rem;
  flex: 1 0 100%; /* always its own full-width row under the email/button row,
    regardless of how .newsletter-form's own flex-wrap happens to land */
}
.newsletter-consent input[type="checkbox"]{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--color-lime);
  cursor: pointer;
}
.newsletter-consent label{
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.newsletter-consent label a{
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.newsletter-consent label a:hover{ color: var(--color-lime); }
.newsletter-form.has-error .newsletter-consent label{ color: var(--color-white); }

/* ---- Legal pages (/accessibility/, /privacy-policy/) — plain readable
   article content on the site's existing container/section-pad rhythm,
   reusing the same heading/body type scale as the rest of the site. ---- */
.legal-page{
  background: var(--color-bg);
  /* Same fixed-header offset pattern as .my-area-header / auth pages —
     section-pad's own top padding isn't reliably taller than --header-h
     at every width, so this is explicit rather than assumed. */
  padding: calc(var(--header-h) + 2.4rem) 0 clamp(4rem, 8vw, 6rem);
}
.legal-page .container{ max-width: 780px; }
.legal-page-title{
  font-family: var(--font-display);
  font-weight: var(--weight-display-heavy);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: var(--tracking-display);
  margin-bottom: 0.6rem;
}
.legal-page-updated{
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.legal-section{ margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.legal-section:last-child{ margin-bottom: 0; }
.legal-section-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}
.legal-section p{
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-dark);
  margin: 0 0 0.9rem;
}
.legal-section p:last-child{ margin-bottom: 0; }
.legal-section ul{
  margin: 0 0 0.9rem;
  padding-inline-start: 1.3rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-dark);
}
.legal-section li{ margin-bottom: 0.4rem; }
.legal-section li:last-child{ margin-bottom: 0; }
.legal-section a{ color: var(--color-black); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover{ color: var(--color-lime); }
.legal-contact{
  border: 1.5px solid var(--color-line-strong);
  padding: 1.3rem 1.5rem;
  background: var(--color-white);
}