/* ============================================================================
   Accessibility preferences panel — reader display controls.
   Applies classes to <html>; every rule below is scoped to one of those.
   ========================================================================== */

/* --- Launch button: a labelled tab on the right-hand edge ----------------- */
/* --cb-h is the cookie banner's height while it is showing (set by
   analytics.js), so the tab always sits just above the banner. */
#a11y-btn {
    position: fixed; right: 0; bottom: calc(var(--cb-h, 0px) + 1.5rem); z-index: 90;
    min-height: 2.75rem;                               /* 44px touch target */
    padding: 0.55rem 1.1rem 0.55rem 1.2rem;
    border-radius: 0.75rem 0 0 0.75rem;
    background: var(--navy, #003764); color: #fff;
    border: 2px solid rgba(255,255,255,0.85); border-right: 0;
    box-shadow: 0 10px 24px rgba(0,55,100,0.35);
    display: flex; align-items: center;
    font-family: Lato, system-ui, sans-serif; font-size: 0.95rem; font-weight: 700;
    line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap;
    cursor: pointer; transition: padding 0.2s, background 0.2s;
}
/* Hover slides the tab out a little. This darker teal keeps white text above
   4.5:1; the brand teal (#00A0AF) is only 3.2:1 against white. */
#a11y-btn:hover { background: #007A86; padding-right: 1.45rem; }
#a11y-btn:focus-visible { outline: 3px solid #F97316; outline-offset: -6px; }

/* --- Panel --------------------------------------------------------------- */
#a11y-panel {
    position: fixed; bottom: calc(var(--cb-h, 0px) + 5.5rem); right: 1.5rem; z-index: 91;
    width: 21rem; max-width: calc(100vw - 2rem);
    max-height: min(78vh, 40rem, calc(100vh - var(--cb-h, 0px) - 7rem));
    max-height: min(78dvh, 40rem, calc(100dvh - var(--cb-h, 0px) - 7rem));
    overflow-y: auto;
    background: #fff; border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.32);
    border: 1px solid #e5e7eb;
    font-family: Lato, system-ui, sans-serif;
    color: #1f2937;
}
#a11y-panel[hidden] { display: none; }
.a11y-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.9rem 1rem; background: var(--navy, #003764); color: #fff;
    border-radius: 1rem 1rem 0 0; position: sticky; top: 0; z-index: 2;
}
.a11y-head h2 { font-size: 1rem; color: #fff; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.a11y-head h2 svg { width: 1.15rem; height: 1.15rem; }
.a11y-head-tools { display: flex; gap: 0.25rem; }
.a11y-head button {
    width: 2rem; height: 2rem; border-radius: 0.4rem; color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: transparent; transition: background 0.2s;
}
.a11y-head button:hover { background: rgba(255,255,255,0.18); }
.a11y-head button svg { width: 1.05rem; height: 1.05rem; }

.a11y-group { padding: 0.85rem 1rem 0; }
.a11y-group h3 {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: #6b7280; margin: 0 0 0.55rem;
}
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.a11y-opt {
    display: flex; align-items: center; gap: 0.5rem; text-align: left;
    padding: 0.65rem 0.6rem; border-radius: 0.6rem;
    border: 1px solid #e5e7eb; background: #fff;
    font-size: 0.78rem; font-weight: 700; color: #374151;
    cursor: pointer; transition: all 0.18s; line-height: 1.25;
}
.a11y-opt svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: #6b7280; }
.a11y-opt:hover { border-color: var(--teal, #00A0AF); color: var(--teal, #00A0AF); }
.a11y-opt:hover svg { color: var(--teal, #00A0AF); }
.a11y-opt[aria-pressed="true"] {
    background: var(--teal, #00A0AF); border-color: var(--teal, #00A0AF); color: #fff;
}
.a11y-opt[aria-pressed="true"] svg { color: #fff; }
.a11y-opt:focus-visible { outline: 3px solid #F97316; outline-offset: 2px; }
.a11y-level { margin-left: auto; font-size: 0.68rem; opacity: 0.85; }

.a11y-foot { padding: 0.85rem 1rem 1rem; margin-top: 0.4rem; }
.a11y-foot a {
    display: block; text-align: center; font-size: 0.8rem; font-weight: 700;
    color: var(--teal, #00A0AF); text-decoration: underline;
}

/* --- Structure list (headings on the page) --------------------------------- */
#a11y-structure { padding: 0 1rem 0.5rem; }
#a11y-structure ol { list-style: none; margin: 0; padding: 0; }
#a11y-structure li { margin-bottom: 0.15rem; }
#a11y-structure a {
    display: block; padding: 0.4rem 0.55rem; border-radius: 0.4rem;
    font-size: 0.8rem; color: #374151; text-decoration: none; border: 1px solid transparent;
}
#a11y-structure a:hover { background: #f3f4f6; color: var(--teal, #00A0AF); }
#a11y-structure .lvl-3 { padding-left: 1.4rem; font-size: 0.75rem; color: #6b7280; }

/* ==========================================================================
   The preferences themselves
   ========================================================================== */

/* Text size — the site is built in rem, so scaling the root scales everything */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 150%; }

/* Line height */
html.a11y-lh-1 body p, html.a11y-lh-1 body li, html.a11y-lh-1 body dd,
html.a11y-lh-1 body td, html.a11y-lh-1 body blockquote, html.a11y-lh-1 body .card-text,
html.a11y-lh-1 body .article-body, html.a11y-lh-1 body .section-lead {
    line-height: 1.9 !important;
}
html.a11y-lh-2 body p, html.a11y-lh-2 body li, html.a11y-lh-2 body dd,
html.a11y-lh-2 body td, html.a11y-lh-2 body blockquote, html.a11y-lh-2 body .card-text,
html.a11y-lh-2 body .article-body, html.a11y-lh-2 body .section-lead {
    line-height: 2.3 !important; letter-spacing: 0.02em;
}

/* Left-align text (helps when centred text is hard to track) */
html.a11y-align-left body :is(p, li, h1, h2, h3, h4, .section-head, .page-hero, .hero-content, .section-foot, .empty-state, figcaption) {
    text-align: left !important;
}

/* Readable font — a plain, wide-spaced system stack (no extra download) */
html.a11y-readable-font body, html.a11y-readable-font body :not(svg):not(path) {
    font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif !important;
    letter-spacing: 0.015em;
}

/* High contrast — strip every background, then repaint black/white/yellow.
   The panel itself is re-styled afterwards (ID selectors win). */
html.a11y-contrast body,
html.a11y-contrast body * {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.a11y-contrast body { background-color: #000 !important; }
html.a11y-contrast body * { color: #fff !important; border-color: #ffe600 !important; }
html.a11y-contrast body a, html.a11y-contrast body a * {
    color: #ffe600 !important; text-decoration: underline !important;
}
html.a11y-contrast body :is(button, .btn, input[type="submit"]),
html.a11y-contrast body :is(button, .btn) * {
    color: #ffe600 !important; border: 2px solid #ffe600 !important;
}
html.a11y-contrast body :is(input, select, textarea) {
    color: #fff !important; border: 2px solid #ffe600 !important;
}
html.a11y-contrast .gradient-text { color: #ffe600 !important; }
/* Keep the panel itself readable in contrast mode */
html.a11y-contrast #a11y-panel, html.a11y-contrast #a11y-panel * {
    background-color: #000 !important; color: #fff !important; border-color: #ffe600 !important;
}
html.a11y-contrast #a11y-panel .a11y-opt[aria-pressed="true"],
html.a11y-contrast #a11y-panel .a11y-opt[aria-pressed="true"] * {
    background-color: #ffe600 !important; color: #000 !important;
}
html.a11y-contrast #a11y-btn, html.a11y-contrast #a11y-btn * {
    background-color: #000 !important; color: #ffe600 !important; border-color: #ffe600 !important;
}

/* Grayscale. The filter goes on <html>, never <body>: a filter on any other
   element becomes the containing block for position:fixed descendants, which
   sent the toolbar, nav and back-to-top button to the bottom of the page. The
   root element is exempt from that rule (CSS Filter Effects spec). */
html.a11y-grayscale { filter: grayscale(1); }

/* Hide images (keeps layout stable) */
html.a11y-hide-images body img { opacity: 0 !important; }
html.a11y-hide-images body :is(.hero, .img-card, .memory-img, .split-media) {
    background-image: none !important; background-color: #d1d5db !important;
}

/* Pause animations (CSS side; SVG animation is paused in JS) */
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
    animation: none !important;
    transition: none !important;
}
html.a11y-no-motion { scroll-behavior: auto !important; }
html.a11y-no-motion .reveal, html.a11y-no-motion .reveal-left,
html.a11y-no-motion .reveal-right, html.a11y-no-motion .reveal-scale {
    opacity: 1 !important; transform: none !important;
}

/* Highlight links */
html.a11y-highlight-links body a:not(.btn):not(.a11y-opt) {
    text-decoration: underline !important; text-underline-offset: 2px;
    outline: 2px dashed currentColor; outline-offset: 2px;
    font-weight: 700 !important;
}

/* Strong focus outline */
html.a11y-focus body :is(a, button, input, select, textarea, [tabindex]):focus {
    outline: 4px solid #F97316 !important; outline-offset: 3px !important;
    box-shadow: 0 0 0 8px rgba(249,115,22,0.28) !important;
}

/* Reading mask */
#a11y-mask { position: fixed; inset: 0; z-index: 88; pointer-events: none; display: none; }
#a11y-mask.on { display: block; }
#a11y-mask div { position: absolute; left: 0; width: 100%; background: rgba(0,0,0,0.65); }

@media (max-width: 480px) {
    #a11y-panel { right: 0.75rem; left: 0.75rem; width: auto; bottom: calc(var(--cb-h, 0px) + 4.75rem); }
    #a11y-btn { bottom: calc(var(--cb-h, 0px) + 1rem); }
}

@media print { #a11y-btn, #a11y-panel, #a11y-mask { display: none !important; } }