/* ============================================================
   ADAConsultant.com — Theme
   Overrides --cs-* custom properties from base.css.
   Palette borrowed from ADAConsultant_website_plan.html:
     #378ADD primary blue (Track A — businesses)
     #1D9E75 teal        (Track B — consultants)
     #BA7517 amber accent
   ============================================================ */

/* ─── Accessibility primitives ─────────────────────────────── */
.skip-link {
    position: absolute; top: -48px; left: 12px; z-index: 10000;
    background: #1c4478; color: #fff;
    padding: 10px 16px; border-radius: 0 0 6px 6px;
    text-decoration: none; font-weight: 600;
    transition: top .12s ease;
}
.skip-link:focus, .skip-link:focus-visible {
    top: 0; color: #fff;
    outline: 3px solid #BA7517; outline-offset: 2px;
}
:focus-visible { outline: 3px solid #BA7517; outline-offset: 2px; border-radius: 3px; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 3px solid #BA7517; outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(186,117,23,0.2);
}
.sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

:root {
    /* Primary — accessibility blue */
    --cs-primary-950: #0b1e33;
    --cs-primary-900: #11294a;
    --cs-primary-800: #16365f;
    --cs-primary-700: #1c4478;   /* deep brand */
    --cs-primary-600: #225598;
    --cs-primary-500: #378ADD;   /* hero/primary from plan */
    --cs-primary-400: #5ea3e6;
    --cs-primary-300: #8abced;
    --cs-primary-200: #b4d4f2;
    --cs-primary-100: #dbe9f8;
    --cs-primary-50:  #eef5fc;

    --cs-primary:        var(--cs-primary-500);
    --cs-primary-hover:  var(--cs-primary-700);
    --cs-primary-active: var(--cs-primary-800);
    --cs-text-heading:   var(--cs-primary-900);
    --cs-bg-section:     var(--cs-primary-50);
    --cs-link:           var(--cs-primary-600);
    --cs-link-hover:     var(--cs-primary-800);

    /* Accent — consultant track teal */
    --cs-accent:         #1D9E75;
    --cs-accent-hover:   #157054;
    --cs-accent-bg:      #E1F5EE;

    /* Tertiary — amber highlights (stat cards, badges) */
    --cs-gold:           #BA7517;
    --cs-gold-soft:      #FAEEDA;

    /* Warning / coral (used on urgent-action UI like lawsuit badges) */
    --cs-red:            #D85A30;
    --cs-red-soft:       #FAECE7;
}

/* ─── Dual-CTA homepage block ─────────────────────────────── */
.dual-cta .cta-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dual-cta .col-md-6:first-child .cta-card {
    border-left: 4px solid var(--cs-primary-500);
}
.dual-cta .col-md-6:last-child .cta-card {
    border-left: 4px solid var(--cs-accent);
}
.dual-cta .cta-track-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--cs-primary-100);
    color: var(--cs-primary-800);
    width: fit-content;
}
.dual-cta .col-md-6:last-child .cta-track-label {
    background: var(--cs-accent-bg);
    color: #085041;
}
.dual-cta .cta-heading { font-size: 1.5rem; font-weight: 600; margin: 0; }
.dual-cta .cta-body    { color: #555; margin: 0; flex-grow: 1; }
.dual-cta .btn         { align-self: flex-start; }

/* ─── Bootstrap overrides so .btn-primary / .btn-secondary use the palette ─
   WCAG AA note: buttons need 4.5:1 contrast for their label text against the
   background. The palette's primary-500 (#378ADD) only yields ~3.5:1 on white,
   so we use primary-700 (#1c4478, ~10.6:1) as the default button background. */
.btn-primary {
    background-color: var(--cs-primary-700);
    border-color: var(--cs-primary-700);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--cs-primary-800) !important;
    border-color: var(--cs-primary-800) !important;
    color: #fff;
}
.btn-secondary {
    background-color: var(--cs-accent-hover);
    border-color: var(--cs-accent-hover);
    color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #0E5B44 !important;
    border-color: #0E5B44 !important;
    color: #fff;
}

/* ─── Contrast overrides for components inherited from base.css ─────
   .brand-tld defaults to primary-500 (light blue) in base.css, failing AA
   on white. Force it to primary-700. Top-bar text defaulted to 85% opacity
   of a pale shade — force full opacity + cream for a reliable ~12:1 ratio. */
.brand-tld { color: var(--cs-primary-700) !important; }
.top-bar { background: #0b1e33 !important; color: #F3ECDB !important; }
.top-bar-text, .top-bar-text i, .top-bar a, .top-bar-link { opacity: 1 !important; color: #F3ECDB !important; }
.top-bar-link:hover { color: #fff !important; text-decoration: underline !important; }

/* ─── Misc small-label contrast: .text-muted defaults are fine on white
   but not on cream sections. Ensure any text-muted on cream stays ≥4.5:1. */
.section-cream .text-muted, .bg-cream .text-muted { color: #4a5260 !important; }

/* ─── govinfo.gov statutory markup ─────────────────────────── */
/* Classes emitted by govinfo.gov's USC HTML — styled to blend with site type system. */
.ada-statute {
    font-size: 15px;
    line-height: 1.65;
    color: #222;
}
.ada-statute .subchapter-head,
.ada-statute .chapter-head {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--cs-primary-800);
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.4rem;
    margin: 2rem 0 1rem;
}
.ada-statute .section-head {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cs-primary-700);
    margin: 2rem 0 0.75rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--cs-primary-100);
}
.ada-statute .paragraph-head,
.ada-statute .subparagraph-head,
.ada-statute .clause-head,
.ada-statute .subclause-head {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2a2a2a;
    margin: 0.85rem 0 0.25rem;
}
.ada-statute .statutory-body,
.ada-statute .statutory-body-1em,
.ada-statute .statutory-body-2em,
.ada-statute .statutory-body-3em,
.ada-statute .statutory-body-4em {
    margin: 0 0 0.5rem;
}
.ada-statute .statutory-body-1em { padding-left: 1.25em; }
.ada-statute .statutory-body-2em { padding-left: 2.5em;  }
.ada-statute .statutory-body-3em { padding-left: 3.75em; }
.ada-statute .statutory-body-4em { padding-left: 5em;    }
.ada-statute .source-credit,
.ada-statute .editorial-note {
    font-size: 0.85rem;
    color: #666;
    background: #fafaf7;
    border-left: 3px solid #ccc;
    padding: 0.5rem 0.75rem;
    margin: 1rem 0;
}
.ada-statute .note-head {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: #666;
    margin-top: 1.25rem;
}
.ada-statute h3.section-head::before { content: ""; }  /* reset in case of body styling */
.ada-statute a { word-break: break-word; }

/* Timeline event (used on /about-ada) */
.timeline-event {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #eee;
}
.timeline-event .timeline-year {
    font-weight: 600;
    color: var(--cs-primary-700);
    font-variant-numeric: tabular-nums;
}
.timeline-event .timeline-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
}
.timeline-event .timeline-desc {
    margin: 0;
    color: #555;
    font-size: 0.94rem;
}