/* ==========================================================================
   Superable Learning LMS — Master CSS Design System
   Brand Palette & Utilities derived from jacobwood.me style.css
   WCAG 2.2 AA Accessible | Atkinson Hyperlegible | Tailwind-style Utilities
   ========================================================================== */

/* === Self-Hosted Font ===
   Atkinson Hyperlegible Next, vendored locally instead of loaded from Google Fonts --
   removes an external request from every page load (this app markets accessibility
   and, for enterprise customers, privacy/compliance -- a third-party font call that
   logs visitor IPs to Google sits oddly next to that) and collapses what used to be
   up to three separate fetches of the same font (style.css's own @import, the tenant
   branding engine, and several pages' own duplicate <link> tags) into one. It's a
   variable font: one file per style/subset covers the whole 200-800 weight range,
   rather than a separate file per weight. Font files live in assets/fonts/. */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/AtkinsonHyperlegibleNext-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/AtkinsonHyperlegibleNext-Variable-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('assets/fonts/AtkinsonHyperlegibleNext-Italic-Variable-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === CSS Custom Properties (Default Brand Tokens) === */
:root {
    /* Primary Brand Colors (from jacobwood.me) */
    --color-primary: #3B7A57;         /* Forest Green */
    --color-primary-hover: #33684b;   /* Darker green for WCAG AA contrast (6.52:1 on white) */
    --color-secondary: #5F8F6B;       /* Sage Green */
    --color-accent: #946300;          /* Golden Bronze / Amber Accent */
    --color-bg-light: #F9F9F7;        /* Warm Off-White Background */
    --color-text-dark: #1F1F1F;       /* Primary Dark Neutral Text */
    --color-neutral-mid: #595959;     /* Secondary Muted Text */
    --color-ocean-light: #e6f4f1;     /* Light Teal Accent Container */

    /* Semantic Status Colors */
    --color-success-bg: #f0fdf4;
    --color-success-border: #16a34a;
    --color-success-text: #166534;

    --color-warning-bg: #fefce8;
    --color-warning-border: #ca8a04;
    --color-warning-text: #854d0e;

    --color-critical-bg: #fef2f2;
    --color-critical-border: #dc2626;
    --color-critical-text: #991b1b;
    --color-error: var(--color-critical-border);

    /* Generic neutral border for subtle card/box surfaces (sl-components.js's flip-card,
       quiz option rows, matching/order rows, etc.). Was already referenced as a fallback
       in two places below (var(--color-border, #e2e8f0)) without ever being defined --
       defining it here makes those live instead of permanently falling back. */
    --color-border: #cbd5e1;

    /* "Front of card" flip-card badge accent (teal). The "back of card" badge and every
       other subtle box below intentionally reuse --color-bg-light/--color-text-dark/
       --color-border instead of getting their own tokens -- this is the one color pairing
       distinct enough (semantic front/back state, not just a neutral surface) to warrant
       its own token pair. */
    --color-badge-accent-bg: #e6fffa;
    --color-badge-accent-border: #b2f5ea;
    --color-badge-accent-text: #234e52;

    /* Sticky header height, used for scroll-padding-top so anchored/focused content
       doesn't land underneath it. */
    --header-height: 5rem;
}

/* === Accessibility Enhancements === */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--color-bg-light);
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    font-weight: bold;
    border: 2px solid var(--color-primary);
    border-radius: 0.25rem;
    text-decoration: none;
    transition: top 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.skip-link:focus {
    top: 1rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Global Focus Indicators
   The actual :focus-visible outline rule lives once, further down, in the "Focus Ring
   Visibility (WCAG 2.4.7 / 2.4.13)" locked accessibility-guard block -- it already
   covers every selector this block used to duplicate. This one keeps only the rule
   that block doesn't have: suppressing the default outline on a plain (non-visible)
   button focus so :focus-visible's own outline is the only one that ever shows. */
button:focus {
    outline: none;
}

/* High Contrast Focus for Dark Backgrounds */
.bg-primary .link-social:focus-visible,
.bg-primary .cta-button:focus-visible {
    outline: 3px solid white !important;
    outline-offset: 3px !important;
}

/* === Base Typography & Reset === */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* 100% (not a hardcoded px value) inherits the browser's default font-size setting
       -- low-vision users who've raised that setting get it honored here instead of
       pinned back to 16px regardless of their preference. rem-based sizing elsewhere
       in this stylesheet scales accordingly. */
    font-size: 100%;
    scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-family-base, 'Atkinson Hyperlegible Next'), system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    font-weight: 400;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base, 'Atkinson Hyperlegible Next'), sans-serif;
    color: var(--color-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
}

/* Typography Scale */
h1 { font-size: 40px; }
h2 { font-size: 34px; }
h3 { font-size: 28px; font-weight: 600; line-height: 1.25; }
h4 { font-size: 22px; font-weight: 600; line-height: 1.25; }
h5 { font-size: 18px; font-weight: 600; line-height: 1.3; }
h6 { font-size: 16px; line-height: 1.3; }

@media (max-width: 900px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
}

.display-name {
    font-family: var(--font-family-base, 'Atkinson Hyperlegible Next'), sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-align: left;
    color: var(--color-primary);
}

blockquote {
    font-style: italic;
    color: var(--color-neutral-mid);
    border-left: 4px solid var(--color-secondary);
    padding-left: 1rem;
    margin-left: 0;
}

a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-accent);
}

/* === Layout / Containers === */
.container {
    width: 100%;
    max-width: 70ch;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-wide {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* === Buttons & Interactive Components === */
.cta-button {
    background-color: var(--color-primary);
    color: white !important;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-block;
    font-family: inherit;
}

.cta-button:hover {
    background-color: var(--color-primary-hover);
    color: white !important;
    text-decoration: none;
}

.cta-button-light {
    background-color: white;
    color: var(--color-primary) !important;
    border: 2px solid white;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 2rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.cta-button-light:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary) !important;
    border-color: var(--color-bg-light);
}

/* Links */
.link-default, .link-cta {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    transition: color 0.2s;
}

.link-cta:hover {
    color: var(--color-accent);
}

.link-social {
    color: white;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s;
}

.link-social:hover {
    color: var(--color-bg-light);
}

/* === Cards === */
.content-card,
.testimonial-block,
.service-card,
.work-card,
.qualifications-card,
.feature-card {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.brand-logo {
    max-height: 44px;
    max-width: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

/* === Contact & Form Controls === */
.contact-form input,
.contact-form textarea,
.form-group input,
.form-group textarea,
.form-group select {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 2px solid var(--color-neutral-mid);
    border-radius: 0.5rem;
    padding: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-family: inherit;
    font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* === Dropdown Menu Styles === */
.nav-item-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-radius: 0.5rem;
    z-index: 10;
    padding: 0.5rem 0;
    border: 1px solid #e5e5e5;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    text-align: left;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background-color: var(--color-bg-light);
    color: var(--color-accent);
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu {
    display: block;
}

/* === Bulleted Lists & Dividers === */
.standard-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.standard-list li {
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.standard-list li::marker {
    color: var(--color-accent);
    font-size: 1.15em;
}

.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(95, 143, 107, 0), rgba(95, 143, 107, 0.4) 20%, rgba(95, 143, 107, 0.4) 80%, rgba(95, 143, 107, 0));
    margin: 4rem auto;
    max-width: 48rem;
}

/* === Modals === */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2rem 1rem;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--color-bg-light);
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 100%;
    position: relative;
    animation: fadeIn 0.3s ease-out;
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-neutral-mid);
    cursor: pointer;
}

/* === Accordions === */
.accordion-item {
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background-color: #f3f4f6;
    border: none;
    border-bottom: 1px solid #ccc;
    text-align: left;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.accordion-panel {
    padding: 1.5rem;
    background: white;
}

.accordion-panel[hidden] {
    display: none;
}

/* === Accessible Data Tables === */
.accessible-table-container {
    overflow-x: auto;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.accessible-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

.accessible-table th,
.accessible-table td {
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    text-align: left;
}

.accessible-table th {
    background-color: #f3f4f6;
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.accessible-table tr:nth-child(even) {
    background-color: #fafafa;
}

/* ==========================================================================
   Tailwind-style Utility Classes (Exact Match to jacobwood.me)
   ========================================================================== */

/* Spacing & Sizing Utilities */
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }

.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* Flexbox & Grid Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.grow, .flex-grow { flex-grow: 1; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }

.items-center { align-items: center; }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: 1fr 1fr; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:flex-row { flex-direction: row; }
    .md\:text-left { text-align: left; }
    .md\:justify-start { justify-content: flex-start; }
    .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .md\:text-xl { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Typography & Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }

.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.italic { font-style: italic; }

.text-neutral-mid { color: var(--color-neutral-mid); }
.text-white { color: white !important; }

/* --color-primary/--color-accent themselves stay light-mode-only at the token level (see the
   dark-mode token block below for why -- both are dual-purpose as backgrounds elsewhere).
   These two classes are the non-heading equivalent of the h1-h6 dark-mode patch a few hundred
   lines down: emphasis text (not an h1-h6, so the heading patch doesn't reach it) that was
   hardcoded to one of those two colors via inline style. Inline styles beat the heading
   patch's selector too, so the real fix pairs each with removing the inline color and adding
   the class instead -- see index.php/pricing.php/why-superable-learning.php call sites. Both
   dark-mode variants are independently verified >=3:1 (large text) / >=4.5:1 (normal text)
   against every dark surface these classes are actually used on -- #1E293B (.card/.pricing-card
   in dark mode) and the var(--color-primary)-to-#2d5a41 gradient banner (checked at its
   lighter, worse-contrast end). Found via a live contrast report 2026-09-03. */
.text-primary-strong { color: var(--color-primary); }
.text-accent-strong { color: var(--color-accent); }

.hidden { display: none !important; }
.inline-block { display: inline-block; }
.list-none { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.list-disc { list-style-type: disc; }

/* Color Utilities */
.bg-primary { background-color: var(--color-primary); }
.bg-bg-light { background-color: var(--color-bg-light); }
.bg-accent { background-color: var(--color-accent) !important; }

.h3-style {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Universal Site Footer Component */
/* The footer is a fixed dark chrome strip regardless of site theme (like the header is a fixed
   green one) -- literal #1F1F1F, not var(--color-text-dark). That token gets redefined to a
   light gray (#9a9a9a) in dark mode on the assumption it's text/border-only everywhere it's
   used (see the dark-mode token block below) -- using it here as a *background* broke that
   assumption: in dark mode the footer background went light gray while its light-colored link
   text (chosen for a dark footer) stayed put, dropping every footer link to ~2.3:1. Found via
   a live contrast report 2026-09-03. */
.site-footer {
    background-color: #1F1F1F;
    color: #F1F5F9;
    padding: 2.5rem 1rem;
    margin-top: 4rem;
    text-align: center;
    border-top: 3px solid var(--color-primary, #3B7A57);
}

.footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.footer-link {
    color: #E2E8F0;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.footer-copy {
    margin: 0;
    color: #94A3B8;
    font-size: 0.9rem;
}

/* Dark Mode Surface Tokens */
[data-theme="dark"] body {
    background-color: #0F172A;
    color: #F8FAFC;
}

/* Dark-mode variants of platform-default tokens that are safe to redefine globally --
   verified by grepping every var(--color-X) usage in this file first. --color-neutral-mid
   and --color-text-dark are text/border-only everywhere they appear (no background usage),
   and --color-bg-light is background-only except one dead rule (.link-social, unused by any
   template) -- so redefining these three at the token level can't regress a usage that
   pairs them the opposite way. --color-primary/--color-accent/--color-primary-hover are NOT
   here on purpose: both are genuinely dual-purpose (background-color in ~10 places,
   including .bg-primary / the page header, as well as text color elsewhere) -- lightening
   them for dark-mode *text* readability was tried and confirmed live to regress the header
   (white title text on .bg-primary dropped from a comfortable ratio to 3.16:1). Headings are
   fixed below with a selector-scoped override instead, which doesn't touch the shared token.

   Found 2026-08-24 from a live report: h1/h2 (var(--color-primary)) and the module progress
   indicator (var(--color-neutral-mid)) reading 2.86:1 and 2.09:1 against player.php's dark
   #1E293B content-area background -- both real WCAG 1.4.3 failures, not a scanner bug (the
   scanner correctly caught these; see the same investigation for the Forced Colors Mode fix
   this sits alongside). Values below independently verified to hit >=4.5:1 (with margin, to
   survive rounding) against *both* dark surfaces in play here (#0F172A body, #1E293B
   cards/.content-area) -- config.php's own tenant-specific dark-mode derivation only checks
   against #0F172A, which is a gap worth revisiting there too. */
[data-theme="dark"] {
    --color-neutral-mid: #939393;
    --color-text-dark: #9a9a9a;
    /* .nav-btn (assets/engine/course-player-engine.css) explicitly pairs --color-text-dark
       with --color-bg-light as its own surface -- without a dark variant here too, that
       pairing broke: dark-safe (light-ish) text landed back on the still-light #F9F9F7
       background, near-invisible. Matches the #1E293B every other "light card surface on
       dark theme" component in this file already uses (.content-area, .sidebar-nav,
       .resume-prompt-card, .card, etc.). */
    --color-bg-light: #1E293B;

    /* Same subtle-surface family as --color-bg-light above, added alongside it 2026-09-14
       after the same "light card, no dark override" bug turned up again in
       sl-components.js's flip-card/quiz/matching/word-bank markup -- these had been
       hardcoding light hex values as inline styles with no --color-X reference at all,
       so no dark-mode rule anywhere could have reached them regardless. Values here are
       the dark-safe counterparts to the :root defaults; see this file's dark-mode
       verification note above the [data-theme="dark"] block's brand-token comment for the
       contrast-checking approach these follow. */
    --color-border: #475569;
    --color-badge-accent-bg: #0f3a3a;
    --color-badge-accent-border: #3f9c9d;
    --color-badge-accent-text: #81e6d9;
    --color-success-bg: #0f2e1a;
    --color-success-border: #22c55e;
    --color-success-text: #4ade80;
    --color-warning-bg: #3a2e05;
    --color-warning-border: #eab308;
    --color-warning-text: #fbbf24;
    --color-critical-bg: #3a0d0d;
    --color-critical-border: #ef4444;
    --color-critical-text: #f87171;
}

/* Headings read var(--color-primary) directly (line ~166) -- scoped here instead of at the
   token level for the reason in the comment above. :where() zeroes out the h1-h6 part's own
   specificity, so this rule's total specificity is just [data-theme="dark"] (0,1,0) -- lower
   than any class-qualified selector. Found live 2026-08-24: a course's own heading override
   (e.g. alt-text-architects' .context-panel h2 { color: var(--ocean-deep) }, deliberately
   paired with that panel's own pale-blue background) ties this rule at equal specificity
   (0,1,1) without :where(), and this rule was winning that tie -- stomping a color the course
   author correctly chose for its own light-only surface and dropping it to 2.59:1. With the
   lower specificity here, any course-authored heading rule wins on its own merits as normal,
   and this only fills in for headings nothing else has already styled (which is the actual
   bug this exists to fix -- see the h1/h2 case in the comment above). */
[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6) {
    color: #6c9b81;
}

/* Non-heading equivalent of the rule above -- .text-primary-strong/.text-accent-strong (see
   their definition and the .skip-link/.btn-on-light rules below for the full explanation).
   #6c9b81 matches the heading color exactly since it's already verified against the same
   #1E293B surface these classes are used on. #F2C468 is a separately-verified lighter gold --
   verified against the gradient banner's lighter end (the harder case) at 3.14:1 (large text)
   and against #1E293B at 8.98:1 (normal text), so one color covers both call sites. */
[data-theme="dark"] .text-primary-strong,
[data-theme="dark"] .skip-link {
    color: #6c9b81;
}

[data-theme="dark"] .text-accent-strong {
    color: #F2C468;
}

/* .btn-outline-light defaults to white text (see its definition further down) for use on the
   colored/dark surfaces it's usually placed on (header, hero, gradient banners). The handful of
   instances this class covers sit on plain light .card/.pricing-card surfaces instead, so they
   need the inverse -- same problem already solved once for the pricing contact-trigger button
   below (.pricing-contact-trigger .contact-modal-trigger.btn-outline-light) but not generalized,
   so a sibling link right next to that button (pricing.php's "Explore Local Demo") and three
   more on index.php's Developer Guides cards were left with an inline color override that loses
   to this class's own !important white and silently does nothing. !important here is required
   to win that fight. Dark mode needs its own pass because .card/.pricing-card themselves switch
   to the same #1E293B dark surface, at which point var(--color-primary) is the light-mode-only
   green again (see the token comment above) and fails the same way headings did. */
[data-theme="dark"] .btn-on-light,
[data-theme="dark"] .pricing-contact-trigger .contact-modal-trigger.btn-outline-light {
    color: #6c9b81 !important;
    border-color: #6c9b81;
}

[data-theme="dark"] .card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] table {
    background-color: #1E293B;
    color: #F8FAFC;
    border-color: #334155;
}

[data-theme="dark"] table th {
    background-color: #334155;
    color: #F8FAFC;
}

[data-theme="dark"] .text-neutral-mid {
    color: #94A3B8;
}

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .contact-dialog {
    background-color: #1E293B;
    color: #F8FAFC;
    border-color: #334155;
}

[data-theme="dark"] .contact-dialog-close {
    color: #F8FAFC;
}

/* .tenant-chip and .workspace-finder-card keep their own border declarations here
   (no border, and a deliberate var(--color-primary) border respectively) -- only
   the surface color needs to flip. */
[data-theme="dark"] .tenant-chip,
[data-theme="dark"] .workspace-finder-card {
    background-color: #1E293B;
    color: #F8FAFC;
}

/* .tenant-chip's own hover/focus state already switches to a var(--color-primary)
   background, which the branding contrast engine lightens for dark mode -- no
   separate dark override needed there.

   .cta-button-light is intentionally left out here: its text color is set with
   !important against var(--color-primary), which the branding engine already
   adapts for dark mode, and it isn't referenced by any current template -- there's
   no live usage to verify an assumed "light button on a colored surface" context
   against. */

/* Quiz question card (assets/components/sl-components.js). These used to be inline
   styles, which always beat an external stylesheet regardless of specificity --
   moved to classes here specifically so they can respond to dark mode. */
.jw-quiz-question-card {
    background: #ffffff;
}

.jw-quiz-legend {
    color: #0f172a;
}

.jw-quiz-prompt {
    color: #1e293b;
}

[data-theme="dark"] .jw-quiz-question-card {
    background: #1E293B;
}

[data-theme="dark"] .jw-quiz-legend,
[data-theme="dark"] .jw-quiz-prompt {
    color: #F8FAFC;
}

/* SL/JW component touch targets (assets/components/sl-components.js). None of these
   had any dedicated CSS before -- they were rendering at whatever size the browser's
   default <button>/<input>/<select> UA styling happened to produce around a single
   glyph or short value, which lands under the 24px WCAG AA minimum. Found via a live
   sl-a11y-scanner.js pass over every registered component (2026-08-24); see that
   audit for the full results, including two scanner exceptions (disabled controls,
   tabindex="-1" programmatic-focus targets) that are correctly *not* fixed here. */
.lc-option-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0;
}

.jw-move-up,
.jw-move-down,
.jw-tooltip-trigger {
    min-width: 44px;
    min-height: 44px;
}

/* Positioned with a bare left/top (no centering transform) at the authored x/y
   coordinate, so growing the box also needs to re-center it on that coordinate --
   otherwise a bigger target visibly drifts away from the point it's meant to mark. */
.jw-hotspot-marker {
    min-width: 44px;
    min-height: 44px;
    transform: translate(-50%, -50%);
}

.jw-form-group input {
    min-height: 44px;
}

.jw-match-select {
    min-height: 44px;
}

/* Dark Mode: OS-preference fallback.
   The [data-theme="dark"] rules above only ever apply on pages that run the
   toggle's JS (currently just index.php) to set the attribute. Every other page
   -- including player.php, where learners spend all their time -- has no toggle at
   all, so without this fallback the dark rules above can never activate there.
   `:not([data-theme="light"])` respects an explicit light choice (index.php's
   toggle sets data-theme="light", not just removing the attribute) over the OS
   preference; anywhere else, an absent attribute + a dark OS preference means these
   rules should apply. Mirrors the block above exactly -- keep the two in sync. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) body {
        background-color: #0F172A;
        color: #F8FAFC;
    }

    /* Mirrors the [data-theme="dark"] brand-token block above -- see its comment for why
       --color-primary/--color-accent are deliberately NOT redefined here at the token
       level (dual-purpose as backgrounds too; use the heading override below instead). */
    html:not([data-theme="light"]) {
        --color-neutral-mid: #939393;
        --color-text-dark: #9a9a9a;
        --color-bg-light: #1E293B;
        /* Mirrors the [data-theme="dark"] block's 2026-09-14 addition above -- keep in sync. */
        --color-border: #475569;
        --color-badge-accent-bg: #0f3a3a;
        --color-badge-accent-border: #3f9c9d;
        --color-badge-accent-text: #81e6d9;
        --color-success-bg: #0f2e1a;
        --color-success-border: #22c55e;
        --color-success-text: #4ade80;
        --color-warning-bg: #3a2e05;
        --color-warning-border: #eab308;
        --color-warning-text: #fbbf24;
        --color-critical-bg: #3a0d0d;
        --color-critical-border: #ef4444;
        --color-critical-text: #f87171;
    }

    /* :where() around both html and the heading list -- see the [data-theme="dark"] block's
       comment above for why: keeps this rule's specificity low enough that any course- or
       tenant-authored heading color rule still wins on its own merits. */
    :where(html):not([data-theme="light"]) :where(h1, h2, h3, h4, h5, h6) {
        color: #6c9b81;
    }

    /* Mirrors the [data-theme="dark"] block's .text-primary-strong/.text-accent-strong/
       .skip-link/.btn-on-light rules above -- see those for the full explanation and the
       contrast verification these colors are based on. */
    html:not([data-theme="light"]) .text-primary-strong,
    html:not([data-theme="light"]) .skip-link {
        color: #6c9b81;
    }

    html:not([data-theme="light"]) .text-accent-strong {
        color: #F2C468;
    }

    html:not([data-theme="light"]) .btn-on-light,
    html:not([data-theme="light"]) .pricing-contact-trigger .contact-modal-trigger.btn-outline-light {
        color: #6c9b81 !important;
        border-color: #6c9b81;
    }

    html:not([data-theme="light"]) .card,
    html:not([data-theme="light"]) .content-card,
    html:not([data-theme="light"]) .feature-card,
    html:not([data-theme="light"]) .form-control,
    html:not([data-theme="light"]) .form-select,
    html:not([data-theme="light"]) .form-textarea,
    html:not([data-theme="light"]) table {
        background-color: #1E293B;
        color: #F8FAFC;
        border-color: #334155;
    }

    html:not([data-theme="light"]) table th {
        background-color: #334155;
        color: #F8FAFC;
    }

    html:not([data-theme="light"]) .text-neutral-mid {
        color: #94A3B8;
    }

    html:not([data-theme="light"]) .dropdown-menu,
    html:not([data-theme="light"]) .pricing-card,
    html:not([data-theme="light"]) .contact-dialog {
        background-color: #1E293B;
        color: #F8FAFC;
        border-color: #334155;
    }

    html:not([data-theme="light"]) .contact-dialog-close {
        color: #F8FAFC;
    }

    html:not([data-theme="light"]) .tenant-chip,
    html:not([data-theme="light"]) .workspace-finder-card {
        background-color: #1E293B;
        color: #F8FAFC;
    }

    html:not([data-theme="light"]) .jw-quiz-question-card {
        background: #1E293B;
    }

    html:not([data-theme="light"]) .jw-quiz-legend,
    html:not([data-theme="light"]) .jw-quiz-prompt {
        color: #F8FAFC;
    }
}

/* ==========================================================================
   SUPERABLE LEARNING PLATFORM ACCESSIBILITY GUARDS (LOCKED SYSTEM LAYER)
   These rules guarantee WCAG 2.2 AA compliance across all tenant custom styling.
   ========================================================================== */

/* 1. Focus Ring Visibility (WCAG 2.4.7 / 2.4.13) */
:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-accent) !important;
    outline-offset: 2px !important;
}

/* 2. Screen Reader Utility Locking (WCAG 4.1.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-width: 0 !important;
}

/* 3. Touch Target Minimum Size (WCAG 2.5.5 / 2.5.8) */
button,
.cta-button,
.btn,
.video-button,
.tab-btn,
.accordion-trigger {
    min-height: 44px;
}

/* 4. Interactive Element Affordances */
button, input[type="submit"], input[type="button"], a.btn, a.cta-button {
    cursor: pointer;
}

button:disabled, input:disabled, select:disabled {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* ==========================================================================
   PLATFORM HOMEPAGE, WORKSPACE FINDER & PRICING COMPONENTS
   ========================================================================== */

/* Badges & Chips */
.badge-wcag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.badge-wcag-dot {
    width: 8px;
    height: 8px;
    background-color: #10B981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #10B981;
}

.tenant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: #FFFFFF;
    color: var(--color-primary);
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    border: 1px solid #CBD5E1;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tenant-chip:hover, .tenant-chip:focus {
    background-color: var(--color-primary);
    color: #FFFFFF !important;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Workspace Finder Tool */
.workspace-finder-card {
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 25px -5px rgba(59, 122, 87, 0.15);
    margin: 2.5rem 0;
}

.workspace-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .workspace-input-group {
        flex-direction: row;
    }
    .workspace-input-group input {
        flex: 1;
    }
}

/* Pricing Grid & Cards */
.pricing-card {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -4px rgba(0,0,0,0.08);
}

.pricing-card.featured {
    border: 2px solid var(--color-primary);
    box-shadow: 0 12px 28px -4px rgba(59, 122, 87, 0.2);
}

.pricing-card-badge {
    position: absolute;
    top: -14px;
    right: 1.5rem;
    background-color: var(--color-accent);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text-dark);
    margin: 1rem 0 0.25rem 0;
    line-height: 1;
}

.pricing-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-neutral-mid);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem 0;
    flex-grow: 1;
}

.pricing-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-features li::before {
    content: "✓";
    color: var(--color-primary);
    font-weight: bold;
}

/* Feature Showcase Grid */
.feature-icon-box {
    width: 48px;
    height: 48px;
    background-color: var(--color-ocean-light);
    color: var(--color-primary);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Accordion FAQ */
.faq-item {
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    background: white;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-trigger {
    width: 100%;
    text-align: left;
    background: white;
    border: none;
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-trigger:hover {
    background-color: var(--color-bg-light);
}

.faq-content {
    padding: 0 1.5rem 1.25rem 1.5rem;
    color: var(--color-text-dark);
    line-height: 1.6;
}

/* ==========================================================================
   SUPERABLE LEARNING PLATFORM PREMIUM ADDITIONS
   ========================================================================== */

/* 1. Header Navigation System */
.site-header {
    background-color: var(--color-primary);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-title {
    color: white !important;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.badge-platform {
    background-color: #fef3c7;
    color: #78350f !important;
    border: 1px solid #d97706;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    letter-spacing: 0.05em;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.nav-link {
    color: #f8fafc !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.nav-link:hover, .nav-link:focus {
    color: white !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.nav-link.active {
    color: white !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-header :focus-visible,
.hero-banner :focus-visible {
    outline: 3px solid white !important;
    outline-offset: 2px !important;
}

@media (max-width: 992px) {
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-links {
        width: 100%;
        justify-content: flex-start;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
}

/* 2. Hero Banner Component */
.hero-banner {
    background: linear-gradient(135deg, var(--color-primary), #1a3c27);
    color: white;
    padding: 5rem 0 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid var(--color-accent);
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

.hero-subtitle {
    font-size: 1.35rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

.hero-actions {
    margin-top: 2rem;
}

/* 3. Card Component Styling */
.card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* Contact form dialog (site-wide "Contact Us" modal) */
.contact-dialog {
    background-color: #FFFFFF;
    color: var(--color-text-dark);
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    max-width: 32rem;
    width: 90vw;
}

.contact-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
}

.contact-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.contact-dialog-header h2 {
    margin: 0;
}

.contact-dialog-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--color-text-dark);
    min-width: 44px;
    min-height: 44px;
}

.contact-dialog-actions {
    margin-top: 1rem;
}

/* Off-screen (not display:none) so a form-scraping bot that skips CSS still fills it,
   while aria-hidden + tabindex="-1" keep it out of the accessible tree and tab order
   for real users. */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* Matches the other .btn-outline-light instances on pricing.php's white card
   background, which all need this same override to stay legible. Scoped to the
   outline variant only -- the Pro tier's trigger uses .btn-primary instead, which
   is already a solid fill and needs no color override. */
.pricing-contact-trigger .contact-modal-trigger.btn-outline-light {
    color: var(--color-primary) !important;
    border-color: var(--color-primary);
}

.contact-status-banner {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.contact-status-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-text);
}

.contact-status-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-color: var(--color-warning-text);
}

.contact-status-critical {
    background: var(--color-critical-bg);
    color: var(--color-critical-text);
    border-color: var(--color-critical-text);
}

/* 4. Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 2rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    font-family: inherit;
    line-height: 1.2;
    min-height: 44px;
    cursor: pointer;
    box-sizing: border-box;
    /* Default appearance for any .btn used without a color modifier
       (.btn-primary, .btn-outline-light, etc). Without this, a bare .btn
       inherits `a { color: var(--color-primary) }`, which is invisible on a
       primary-colored header. Modifier classes below set their own
       background-color/color and override this. */
    background-color: var(--color-primary);
    color: white !important;
}

.btn:hover {
    text-decoration: none;
}

.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    min-height: 36px;
}

.btn-lg {
    padding: 0.8rem 2.2rem;
    font-size: 1.125rem;
    min-height: 48px;
}

.btn-full {
    width: 100%;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white !important;
    border-color: var(--color-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: white !important;
}

.btn-secondary {
    background-color: #386641;
    color: white !important;
    border-color: #386641;
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: #2d5234;
    border-color: #2d5234;
    color: white !important;
}

.btn-teal {
    background-color: #0f766e;
    color: white !important;
    border-color: #0f766e;
}

.btn-teal:hover, .btn-teal:focus {
    background-color: #115e59;
    border-color: #115e59;
    color: white !important;
}

.btn-outline-light {
    background-color: transparent;
    color: white !important;
    border-color: white;
}

.btn-outline-light:hover, .btn-outline-light:focus {
    background-color: white;
    color: var(--color-primary) !important;
    border-color: white;
}

/* General-purpose version of the .pricing-contact-trigger override above, for any
   .btn-outline-light placed on a plain light .card/.pricing-card surface instead of the
   colored/dark ones the class defaults to. See the [data-theme="dark"] .btn-on-light rule
   for the dark-mode half of this (needed because those card surfaces go dark too). */
.btn-outline-light.btn-on-light {
    color: var(--color-primary) !important;
    border-color: var(--color-primary);
}

.btn-outline-light.btn-on-light:hover,
.btn-outline-light.btn-on-light:focus {
    background-color: var(--color-primary);
    color: white !important;
    border-color: var(--color-primary);
}

.btn-accent {
    background-color: #fbbf24;
    color: #1f1f1f !important;
    border-color: #fbbf24;
}

.btn-accent:hover, .btn-accent:focus {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #1f1f1f !important;
}

/* ==========================================================================
   Accessibility Scanner (Premium) — heatmap overlay, findings panel, NVDA sim
   ========================================================================== */

.sl-a11y-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* .btn-sm elsewhere in this file is 36px min-height; the scanner toolbar's own buttons
   (and the packager trigger that opens it) need to clear the 44px touch-target minimum
   without changing that shared class's behavior everywhere else it's used. */
.sl-a11y-toolbar .btn,
#a11y-scan-trigger {
    min-height: 44px;
}

/* Wraps each flagged element in place (see highlightFindings() in sl-a11y-scanner.js) — an
   in-flow wrapper, not an absolutely-positioned overlay, so it doubles as both the visual
   cue and the role="region" landmark a screen reader can discover. outline (not border) so
   it never reserves layout space or shifts surrounding content. */
.sl-a11y-highlight {
    outline: 3px solid;
    outline-offset: 2px;
    border-radius: 4px;
}

.sl-a11y-highlight-violation {
    outline-color: var(--color-critical-border);
    background: rgba(220, 38, 38, 0.15);
}

.sl-a11y-highlight-warning {
    outline-color: var(--color-warning-border);
    background: rgba(202, 138, 4, 0.15);
}

.sl-a11y-scan-panel {
    background: var(--color-bg-light, #f8f9fa);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin: 1rem 0;
}

.sl-a11y-summary {
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.sl-a11y-findings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sl-a11y-finding {
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--color-warning-border);
    background: white;
}

.sl-a11y-finding-violation {
    border-left-color: var(--color-critical-border);
}

.sl-a11y-finding-jump {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 0.35rem;
    font-weight: 700;
    text-align: left;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.sl-a11y-finding-criterion {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-neutral-mid);
    margin: 0 0 0.35rem;
}

.sl-a11y-finding-why,
.sl-a11y-finding-fix,
.sl-a11y-finding-module-pointer {
    font-size: 0.875rem;
    margin: 0 0 0.35rem;
}

.sl-a11y-finding-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.sl-a11y-finding-component-notice {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-neutral-mid);
    margin: 0.5rem 0 0.35rem;
}

.sl-a11y-finding-component-notice code {
    font-style: normal;
}

/* Sits inside each highlightFindings() wrapper (assets/components/sl-a11y-scanner.js),
   right alongside the flagged element — an explicit, always-visible way back to the
   results list, added after NVDA testing showed landmark-cycling alone wasn't a
   discoverable-enough answer to "how do I get back". Small and clearly secondary to the
   flagged content itself, but a real button, not screen-reader-only — sighted admins
   reviewing several issues in a row benefit from the same shortcut. */
.sl-a11y-back-to-list {
    display: block;
    margin-top: 0.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    background: white;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.25rem;
    cursor: pointer;
    min-height: 44px;
}

.sl-a11y-transcript-list {
    list-style: decimal;
    margin: 0;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.sl-a11y-transcript-list li {
    padding: 0.25rem 0;
}

.sl-a11y-sr-bubble {
    position: absolute;
    z-index: 9100;
    max-width: 320px;
    background: #0f172a;
    color: #34d399;
    font-family: monospace;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sl-a11y-sr-disclaimer {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9200;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 2px solid var(--color-warning-border);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    max-width: 90vw;
    text-align: center;
}