/**
 * CFRO Accessibility Stylesheet
 *
 * High-contrast mode and font-size overrides for WCAG 2.2 compliance.
 *
 * @package CFRO
 * @since   1.0.0
 */

/* ── High Contrast Mode ──────────────────────── */
/* Token remap — collapses the full brand palette to a
 * two-tone (black/white) base with a small set of vivid
 * accents for affordances. Every component that uses
 * design-token references picks up these overrides
 * automatically; no per-component CSS required.
 *
 * Contrast targets:
 *   body text         #000 on #fff = 21:1   (AAA)
 *   inverted text     #fff on #000 = 21:1   (AAA)
 *   link              #0000ee on #fff ≈ 8.6:1 (AAA)
 *   destructive/CTA   #cc0000 on #fff ≈ 5.9:1 (AA)
 *   success           #006600 on #fff = 7.0:1 (AAA)
 *   focus ring        #ff4444 on #fff = 4.5:1 (AA — large only; reinforced w/ 3px width) */
body.cfro-high-contrast {
    /* Brand greens → black */
    --cfro-forest-dark:    #000000;
    --cfro-forest:         #000000;
    --cfro-forest-light:   #000000;
    --cfro-sage:           #000000;
    --cfro-sage-light:     #ffffff;
    --cfro-sage-pale:      #ffffff;

    /* Cream / paper surfaces → white */
    --cfro-cream:          #ffffff;
    --cfro-cream-dark:     #ffffff;

    /* Charcoals (text) → black */
    --cfro-charcoal:       #000000;
    --cfro-charcoal-light: #000000;

    /* Brand accents — main shades collapse to black,
     * pale/light variants used as badge bgs become white. */
    --cfro-amber:          #000000;
    --cfro-amber-dark:     #000000;
    --cfro-amber-light:    #ffffff;
    --cfro-coral:          #000000;
    --cfro-coral-light:    #ffffff;
    --cfro-teal:           #000000;
    --cfro-teal-dark:      #000000;
    --cfro-teal-badge:     #000000;
    --cfro-teal-light:     #ffffff;
    --cfro-violet:         #000000;
    --cfro-violet-dark:    #000000;
    --cfro-violet-light:   #ffffff;
    --cfro-rose:           #000000;
    --cfro-rose-dark:      #000000;
    --cfro-rose-light:     #ffffff;
    --cfro-sky:            #000000;
    --cfro-sky-dark:       #000000;
    --cfro-sky-light:      #ffffff;

    /* Neutrals */
    --cfro-white:          #ffffff;

    /* Semantic aliases */
    --cfro-primary-dark:   #000000;
    --cfro-primary:        #000000;
    --cfro-primary-light:  #000000;
    --cfro-accent:         #cc0000;     /* vivid CTA red */
    --cfro-accent-dark:    #cc0000;
    --cfro-accent-light:   #ffffff;
    --cfro-light-gray:     #ffffff;
    --cfro-border-gray:    #000000;     /* solid borders, not faint */
    --cfro-mid-gray:       #000000;
    --cfro-dark-gray:      #000000;
    --cfro-almost-black:   #000000;
    --cfro-success:        #006600;     /* keep green semantic identity */
    --cfro-link:           #0000ee;     /* universal link blue */

    /* Shadows — neutralise; HC relies on solid borders */
    --cfro-shadow:         none;
    --cfro-shadow-md:      none;
    --cfro-shadow-lg:      none;
}

body.cfro-high-contrast a { text-decoration: underline; }
body.cfro-high-contrast a:focus-visible {
    outline: 3px solid #ff4444;
    outline-offset: 2px;
}
/* Main Navigation — high contrast */
body.cfro-high-contrast .cfro-navbar {
    background: #000000;
}
body.cfro-high-contrast .cfro-nav__list > li > a {
    color: #ffffff;
}
body.cfro-high-contrast .cfro-nav__list > li > a:hover,
body.cfro-high-contrast .cfro-nav__list > li > a:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
body.cfro-high-contrast .cfro-nav__list > li.current-menu-item > a,
body.cfro-high-contrast .cfro-nav__list > li.current-menu-ancestor > a {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Hero — high contrast */
body.cfro-high-contrast .cfro-hero {
    background: #000000;
}
body.cfro-high-contrast .cfro-hero .wp-block-cover__background {
    background: #000000 !important;
}
body.cfro-high-contrast .cfro-hero::after {
    background: #000000;
}
body.cfro-high-contrast .cfro-hero,
body.cfro-high-contrast .cfro-hero * {
    color: #ffffff;
}
body.cfro-high-contrast .cfro-hero__callsign {
    color: #ffffff;
}
body.cfro-high-contrast .cfro-hero__desc {
    color: rgba(255, 255, 255, 0.9);
}

/* Page Hero — high contrast */
body.cfro-high-contrast .cfro-page-hero {
    background: #000000;
}
body.cfro-high-contrast .cfro-page-hero .wp-block-cover__background {
    background: #000000 !important;
}
body.cfro-high-contrast .cfro-page-hero::after {
    background: #000000;
}
body.cfro-high-contrast .cfro-page-hero,
body.cfro-high-contrast .cfro-page-hero * {
    color: #ffffff;
}
body.cfro-high-contrast .cfro-page-hero__subtitle {
    color: rgba(255, 255, 255, 0.9);
}

/* Body background — high contrast (cream → white) */
body.cfro-high-contrast {
    background: #ffffff;
}

body.cfro-high-contrast .cfro-on-air-card {
    border: 2px solid #000;
}
body.cfro-high-contrast .cfro-show-card {
    border: 2px solid #000;
}
body.cfro-high-contrast .cfro-schedule-slot:hover {
    background: #e0e0e0;
}

/* Sticky Player — high contrast.
 * Coral play button on a forest-dark bar both collapse to
 * black after token remap, so the button needs to invert
 * polarity to remain visible against the now-black bar. */
body.cfro-high-contrast .cfro-sticky-player {
    background: #000000;
    border-top: 2px solid #ffffff;
}
body.cfro-high-contrast .cfro-sticky-player__play {
    background: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
}
body.cfro-high-contrast .cfro-sticky-player__play svg,
body.cfro-high-contrast .cfro-sticky-player__play .cfro-sticky-player__icon {
    fill: #000000;
}
body.cfro-high-contrast .cfro-sticky-player__play:hover,
body.cfro-high-contrast .cfro-sticky-player__play:focus-visible {
    background: #ff4444;
    color: #ffffff;
    border-color: #ffffff;
}
body.cfro-high-contrast .cfro-sticky-player__play:hover svg,
body.cfro-high-contrast .cfro-sticky-player__play:focus-visible svg {
    fill: #ffffff;
}
body.cfro-high-contrast .cfro-sticky-player__mute,
body.cfro-high-contrast .cfro-sticky-player__volume {
    color: #ffffff;
}

/* Home hero — Listen Live button.
 * The default style sets border-color: transparent on a solid-fill
 * button. In HC, fill collapses to black on a black hero, so without
 * a border the button looks like floating text. Match the ghost
 * button's white outline so both CTAs read as discrete buttons. */
body.cfro-high-contrast .cfro-btn--listen,
body.cfro-high-contrast .cfro-btn--listen .wp-block-button__link {
    border: 2px solid #ffffff !important;
}

/* Taxonomy pills — high contrast.
 * Pill components (.cfro-news-badge on news, .cfro-genre-tag and
 * .cfro-genre-filter on shows/schedule, .cfro-tag in card patterns)
 * use light-tint background + dark-text token pairings. Once tokens
 * collapse, they become black-on-white with no boundary, looking
 * like plain text. A solid 1px border restores their pill identity. */
body.cfro-high-contrast .cfro-news-badge,
body.cfro-high-contrast .cfro-genre-tag,
body.cfro-high-contrast .cfro-genre-filter,
body.cfro-high-contrast .cfro-tag {
    border: 1px solid #000000;
}
body.cfro-high-contrast .cfro-genre-filter.is-active {
    border-color: #000000;
}

/* Footer — high contrast */
body.cfro-high-contrast .cfro-footer {
    background: #000000;
    color: #ffffff;
}
body.cfro-high-contrast .cfro-footer h3 {
    color: #ffffff;
}
body.cfro-high-contrast .cfro-footer p,
body.cfro-high-contrast .cfro-footer a,
body.cfro-high-contrast .cfro-footer__tagline,
body.cfro-high-contrast .cfro-footer__email a,
body.cfro-high-contrast .cfro-footer__phone,
body.cfro-high-contrast .cfro-footer__menu li a {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.cfro-high-contrast .cfro-footer__social a {
    color: #ffffff;
    border-color: #ffffff;
}
body.cfro-high-contrast .cfro-footer__bottom,
body.cfro-high-contrast .cfro-footer__bottom p,
body.cfro-high-contrast .cfro-footer__treaty {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.cfro-high-contrast .cfro-footer__bottom {
    border-top-color: #ffffff;
}

/* ── Font Sizing — stepped scaling ───────────────
 * Class lives on <html> so every rem-based value in the
 * theme scales proportionally. Steps:
 *   default → 100% (no class)
 *   step 1  → 115%
 *   step 2  → 130%
 *   step 3  → 150%
 * Driven by initA11yToggles() in cfro-main.js. */
html.cfro-font-scale-1 { font-size: 115%; }
html.cfro-font-scale-2 { font-size: 130%; }
html.cfro-font-scale-3 { font-size: 150%; }

/* ── Focus Styles (enhanced) ─────────────────── */
*:focus-visible {
    outline: 3px solid var(--cfro-accent);
    outline-offset: 2px;
}

/* Ensure buttons have visible focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--cfro-accent);
    outline-offset: 2px;
}

/* ── Reduced Motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── High Contrast (OS-level) ────────────────── */
@media (forced-colors: active) {
    .cfro-btn-listen,
    .cfro-btn-primary,
    .cfro-play-btn,
    .cfro-sticky-player__play {
        border: 2px solid ButtonText;
    }
    .cfro-on-air-card {
        border: 2px solid CanvasText;
    }
}