/* ==========================================================================
   NCG ACCESSIBILITY TOOLBAR
   Site-wide color scheme / font style / font size controls, plus a
   fixed top bar for the text-to-speech page reader with live captioning.

   Built against the NCG child theme's real design tokens (style.css):
   --ncg-color-primary/-secondary/-accent/-heading/-body/-muted/-bg-paper/
   -bg-surface/-border. Individual page templates also alias a few of these
   as --p/--c/--w, so the theme overrides below set both.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOP BAR (toolbar + reader controls + caption line)
   -------------------------------------------------------------------------- */
#ncg-a11y-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background: #23312C;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

#ncg-a11y-bar button {
    font-family: inherit;
    font-size: 13px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
#ncg-a11y-bar button:hover,
#ncg-a11y-bar button:focus-visible {
    background: rgba(255,255,255,0.2);
    outline: 2px solid #C89B7B;
    outline-offset: 1px;
}
#ncg-a11y-bar button[aria-pressed="true"] {
    background: #C89B7B;
    border-color: #C89B7B;
    color: #23312C;
    font-weight: 700;
}

#ncg-a11y-toggle { flex-shrink: 0; }

/* The expandable settings panel */
#ncg-a11y-panel {
    display: none;
    position: fixed;
    top: 48px;
    left: 16px;
    right: 16px;
    max-width: 480px;
    background: #fff;
    color: #111;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    padding: 16px;
    z-index: 999998;
}
#ncg-a11y-panel.is-open { display: block; }
#ncg-a11y-panel h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
    color: #23312C;
}
#ncg-a11y-panel .ncg-a11y-group {
    margin-bottom: 16px;
}
#ncg-a11y-panel .ncg-a11y-group:last-child { margin-bottom: 0; }
#ncg-a11y-panel .ncg-a11y-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#ncg-a11y-panel .ncg-a11y-options button {
    background: #F9F8F4;
    color: #23312C;
    border: 1px solid #ccc;
}
#ncg-a11y-panel .ncg-a11y-options button[aria-pressed="true"] {
    background: #23312C;
    color: #fff;
    border-color: #23312C;
}
#ncg-a11y-panel .ncg-a11y-reset {
    margin-top: 8px;
    background: none;
    border: none;
    color: #767676;
    text-decoration: underline;
    padding: 4px 0;
    font-size: 12px;
}

/* Reader controls + caption line, shown inside the same bar while reading */
#ncg-a11y-reader { display: none; align-items: center; gap: 12px; flex: 1; min-width: 0; }
#ncg-a11y-reader.is-active { display: flex; }
#ncg-a11y-reader .ncg-a11y-caption {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 700px) {
    #ncg-a11y-reader .ncg-a11y-caption {
        white-space: normal;
        font-size: 13px;
    }
}

/* Push the page down so the fixed bar never overlaps the header/content.
   The bar is injected unconditionally on every front-end page, so this is
   unconditional too — no attribute/class gating needed. */
html { scroll-padding-top: 48px; }
body { padding-top: 48px !important; }

/* --------------------------------------------------------------------------
   2. FONT SIZE (single mechanism: zoom — supported in all current browsers
      including Firefox 126+; avoids compounding with root font-size scaling)
   -------------------------------------------------------------------------- */
html[data-ncg-font-size="sm"]  body { zoom: 0.9; }
html[data-ncg-font-size="lg"]  body { zoom: 1.15; }
html[data-ncg-font-size="xl"]  body { zoom: 1.3; }
html[data-ncg-font-size="xxl"] body { zoom: 1.5; }

/* --------------------------------------------------------------------------
   3. FONT STYLE
   -------------------------------------------------------------------------- */
html[data-ncg-font-style="sans"] h1,
html[data-ncg-font-style="sans"] h2,
html[data-ncg-font-style="sans"] h3,
html[data-ncg-font-style="sans"] h4,
html[data-ncg-font-style="sans"] h5,
html[data-ncg-font-style="sans"] h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html[data-ncg-font-style="dyslexic"] body,
html[data-ncg-font-style="dyslexic"] p,
html[data-ncg-font-style="dyslexic"] li,
html[data-ncg-font-style="dyslexic"] span,
html[data-ncg-font-style="dyslexic"] a,
html[data-ncg-font-style="dyslexic"] h1,
html[data-ncg-font-style="dyslexic"] h2,
html[data-ncg-font-style="dyslexic"] h3,
html[data-ncg-font-style="dyslexic"] h4,
html[data-ncg-font-style="dyslexic"] h5,
html[data-ncg-font-style="dyslexic"] h6 {
    font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, Arial, sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 1.8 !important;
}

/* --------------------------------------------------------------------------
   4. COLOR SCHEME — DARK MODE
   Overrides the theme's real tokens plus the --p/--c/--w aliases some
   templates define locally, so both cascading paths pick it up.
   -------------------------------------------------------------------------- */
html[data-ncg-theme="dark"] {
    --ncg-color-primary:    #8FBFA8;
    --ncg-color-secondary:  #A8B8B0;
    --ncg-color-accent:     #E3B98C;
    --ncg-color-heading:    #FAFAFA;
    --ncg-color-body:       #E4E4E4;
    --ncg-color-muted:      #B7B7B7;
    --ncg-color-bg-paper:   #1A1F1D;
    --ncg-color-bg-surface: #23282A;
    --ncg-color-border:     #5A5A5A;
    --p: #8FBFA8;
    --c: #E3B98C;
    --w: #1A1F1D;
    color-scheme: dark;
}
html[data-ncg-theme="dark"] body { background-color: var(--ncg-color-bg-paper); color: var(--ncg-color-body); }

/* Known component classes (child theme + shortcode output) that hardcode
   hex colors rather than using the variables above. */
html[data-ncg-theme="dark"] .ncg-team-card,
html[data-ncg-theme="dark"] .ncg-social-card,
html[data-ncg-theme="dark"] .ncg-directory-root,
html[data-ncg-theme="dark"] .ncg-form-card-modern,
html[data-ncg-theme="dark"] .postbox,
html[data-ncg-theme="dark"] .card {
    background-color: #23282A !important;
    color: #E4E4E4 !important;
    border-color: #5A5A5A !important;
}
html[data-ncg-theme="dark"] .ncg-team-name,
html[data-ncg-theme="dark"] .ncg-svc-title,
html[data-ncg-theme="dark"] .ncg-acc-title,
html[data-ncg-theme="dark"] h1, html[data-ncg-theme="dark"] h2, html[data-ncg-theme="dark"] h3 {
    color: #FAFAFA !important;
}
html[data-ncg-theme="dark"] .ncg-form-group input,
html[data-ncg-theme="dark"] .ncg-form-group textarea,
html[data-ncg-theme="dark"] .ncg-input-group input {
    background-color: #12312A !important;
    color: #F0F0F0 !important;
    border-color: #5A5A5A !important;
}
html[data-ncg-theme="dark"] .ncg-dir-header,
html[data-ncg-theme="dark"] .ncg-dir-files li a {
    background-color: #23282A !important;
    color: #E4E4E4 !important;
}

/* --------------------------------------------------------------------------
   5. COLOR SCHEME — HIGH CONTRAST
   Deliberately blunt (black/white/yellow, !important, near-universal
   selector) since this mode exists specifically to guarantee readability
   over the long tail of plugin-embedded inline styles a targeted override
   can't individually reach — the same trade-off OS-level forced-colors
   modes make.
   -------------------------------------------------------------------------- */
html[data-ncg-theme="high-contrast"] {
    --ncg-color-primary:    #FFFF00;
    --ncg-color-secondary:  #FFFFFF;
    --ncg-color-accent:     #00FFFF;
    --ncg-color-heading:    #FFFFFF;
    --ncg-color-body:       #FFFFFF;
    --ncg-color-muted:      #FFFFFF;
    --ncg-color-bg-paper:   #000000;
    --ncg-color-bg-surface: #000000;
    --ncg-color-border:     #FFFFFF;
    --p: #FFFF00;
    --c: #00FFFF;
    --w: #000000;
    color-scheme: dark;
}
html[data-ncg-theme="high-contrast"] body,
html[data-ncg-theme="high-contrast"] div,
html[data-ncg-theme="high-contrast"] section,
html[data-ncg-theme="high-contrast"] article,
html[data-ncg-theme="high-contrast"] header,
html[data-ncg-theme="high-contrast"] footer,
html[data-ncg-theme="high-contrast"] nav,
html[data-ncg-theme="high-contrast"] aside,
html[data-ncg-theme="high-contrast"] p,
html[data-ncg-theme="high-contrast"] li,
html[data-ncg-theme="high-contrast"] span,
html[data-ncg-theme="high-contrast"] td,
html[data-ncg-theme="high-contrast"] th,
html[data-ncg-theme="high-contrast"] input,
html[data-ncg-theme="high-contrast"] textarea,
html[data-ncg-theme="high-contrast"] select {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}
html[data-ncg-theme="high-contrast"] h1,
html[data-ncg-theme="high-contrast"] h2,
html[data-ncg-theme="high-contrast"] h3,
html[data-ncg-theme="high-contrast"] h4,
html[data-ncg-theme="high-contrast"] h5,
html[data-ncg-theme="high-contrast"] h6 {
    color: #FFFF00 !important;
}
html[data-ncg-theme="high-contrast"] a { color: #00FFFF !important; text-decoration: underline !important; }
html[data-ncg-theme="high-contrast"] a:hover,
html[data-ncg-theme="high-contrast"] a:focus { color: #FFFF00 !important; }
html[data-ncg-theme="high-contrast"] button,
html[data-ncg-theme="high-contrast"] .button,
html[data-ncg-theme="high-contrast"] input[type="submit"] {
    background-color: #FFFF00 !important;
    color: #000000 !important;
    border: 2px solid #FFFFFF !important;
}
/* Don't fight the accessibility bar's own deliberate styling */
html[data-ncg-theme="high-contrast"] #ncg-a11y-bar,
html[data-ncg-theme="high-contrast"] #ncg-a11y-bar * {
    background-color: initial !important;
    color: initial !important;
    border-color: initial !important;
}
html[data-ncg-theme="high-contrast"] #ncg-a11y-bar { background: #23312C !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   6. CAPTION HIGHLIGHT (optional gentle highlight on the source paragraph
      currently being read — never forces scrolling to it)
   -------------------------------------------------------------------------- */
.ncg-a11y-reading {
    background-color: rgba(200, 155, 123, 0.25);
    outline: 2px solid #C89B7B;
    outline-offset: 2px;
    transition: background-color 0.2s ease;
}