/* Civic231 custom theme — layered over Bootstrap 5. */

:root {
    --navy: #10243f;
    --blue: #2563eb;
    --ink:  #0b1220;
    --c231-font-scale: 1; /* driven by the accessibility text-size control */
}

/* Accessibility: user-selectable base font size (persisted in localStorage). */
html.fs-sm { --c231-font-scale: 0.9; }
html.fs-md { --c231-font-scale: 1; }
html.fs-lg { --c231-font-scale: 1.15; }
html.fs-xl { --c231-font-scale: 1.3; }
body { font-size: calc(1rem * var(--c231-font-scale)); }

.bg-navy    { background-color: var(--navy) !important; }
.bg-staging { background-color: #b45309 !important; } /* amber so staging is unmistakable */

/* Auth pages: full color lockup incl. tagline, for light backgrounds only. */
.auth-logo {
    width: 220px;
    max-width: 70%;
    height: auto;
}

/* Navbar wordmark (white knockout lockup — only legible on .bg-navy/.bg-staging). */
.navbar-logo {
    height: 34px;
    width: auto;
    margin-right: 8px;
}

.skip-link {
    position: absolute;
    left: 8px; top: 8px;
    z-index: 1080;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Health-check indicators */
.check-ok  { color: #16a34a; }
.check-bad { color: #dc2626; }
.check-row code { font-size: .85em; word-break: break-all; }

/* Clickable KPI cards (executive dashboard) */
.kpi-card{transition:transform .08s ease, box-shadow .08s ease;}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 .5rem 1rem rgba(16,36,63,.15)!important;}

/* Phase 12 — visible keyboard focus (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}
main:focus { outline: none; }

/* ── Marketing home (apex) ───────────────────────────────────────────── */
.fullbleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.mkt-hero {
    background: radial-gradient(1200px 400px at 70% -10%, #1c3a5e 0%, #10243f 60%);
    color: #fff; margin-top: -1.5rem;
}
.mkt-hero .eyebrow, .eyebrow {
    letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; font-weight: 600; color: #9fc0e8;
}
.accent { color: #ffbf47; }
.mkt-pain { border-left: 4px solid #dc3545; background: #fff; }
.mkt-pain h3 { font-size: 1.05rem; }
.mkt-band { background: #0d1f36; color: #fff; }
.mkt-band .num { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: #ffbf47; line-height: 1; }
.mkt-step-num {
    width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--navy); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.mkt-list { list-style: none; padding-left: 0; }
.mkt-list li { position: relative; padding-left: 1.1rem; }
.mkt-list li::before {
    content: ""; position: absolute; left: 0; top: .5em;
    width: 7px; height: 7px; background: #ffbf47; border-radius: 1px;
}
.mkt-report-card { border: 1px solid #e4e9f0; border-top: 4px solid var(--navy); }

/* Feature checklist, green-check list used in the "Everything in the box" grid. */
.mkt-feat { list-style: none; padding-left: 0; margin-bottom: 0; }
.mkt-feat li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; line-height: 1.35; }
.mkt-feat li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: #198754; font-weight: 700;
}
.mkt-feat-card { border: 1px solid #e4e9f0; border-top: 3px solid #198754; }

body { overflow-x: hidden; } /* guard against full-bleed marketing sections */