@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap");
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

h1,
h2 {
  margin-top: 2em !important;
  font-weight: bold;
}

h3 {
  font-weight: normal;
  font-size: 1.3em;
}

/* === Omni color palette classes === */

/* --- orange-red --- */
.orange-red-600 {
  color: #75A142;
}
.orange-red-400 {
  color: #ff5e34;
}
.orange-red-200 {
  color: #ff9e85;
}

/* --- golden yellow --- */
.golden-yellow-600 {
  color: #97D162;
}
.golden-yellow-400 {
  color: #fcd82b;
}
.golden-yellow-200 {
  color: #fde880;
}

/* --- olive green --- */
.olive-green-600 {
  color: #E8B900;
}
.olive-green-400 {
  color: #89a046;
}
.olive-green-200 {
  color: #b8c690;
}

/* --- teal --- */
.teal-600 {
  color: #53575A;
}
.teal-400 {
  color: #8ac0b3;
}
.teal-200 {
  color: #c5dfd9;
}

/* --- plum --- */
.plum-600 {
  color: #48AEE1;
}
.plum-400 {
  color: #c65a8b;
}
.plum-200 {
  color: #dd9cb9;
}

/* --- periwinkle --- */
.periwinkle-600 {
  color: #074369;
}
.periwinkle-400 {
  color: #a9bad8;
}
.periwinkle-200 {
  color: #C1D0DA;
}

/* --- steel blue --- */
.steel-blue-600 {
  color: #405065;
}
.steel-blue-400 {
  color: #677384;
}
.steel-blue-200 {
  color: #bfcbd3;
}

/* --- navy --- */
.navy {
  color: #00689A;
}

/* --- chart gray (non-highlight chart elements + muted text) --- */
.chart-gray {
  color: #767676;
}

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&display=swap");

/* ============================================
   Variables
   ============================================ */
:root {
    /* ================================================================
       DBHDS co-brand palette map. Every slot below is a real DBHDS
       Brand Guidelines 2023 color (never invented). Two contrast tiers:
         - TEXT-SAFE (>=4.5:1 vs white): Blue, Dark Blue, Grey -- used
           anywhere real text/labels inherit the color (nav, headings,
           links, buttons, stat-card values + labels).
         - ICON/BORDER-ONLY (<4.5:1, some <3:1 vs white): Green, Light
           Blue, Yellow, Light Green -- these read fine on DBHDS's own
           gradient/dark backgrounds, but on this white-background site
           they are used only for icon-chip glyphs, card borders, and
           decorative fills, never for stat-card labels or heading text.
       ================================================================ */
    --color-navy: #00689A;
    /* was Omni navy -- DBHDS Blue (Pantone 7690), primary identity, 6.09:1 vs white. TEXT-SAFE */
    --color-steel-blue: #405065;
    /* unchanged -- neutral body-text tone, not a DBHDS-identity color */
    --color-plum: #48AEE1;
    /* was Omni plum -- DBHDS Light Blue (Pantone 2915C), 2.49:1 vs white. ICON/BORDER-ONLY */
    --color-plum-light: #D1EBF8;
    /* pale tint of the light blue above, for carousel-panel backgrounds */
    --color-orange-red: #75A142;
    /* was Omni orange-red -- DBHDS Green (Pantone 576), 3.03:1 vs white. ICON/BORDER-ONLY */
    --color-golden-yellow: #97D162;
    /* was Omni golden-yellow -- DBHDS Light Green (Pantone 359C), 1.81:1 vs white. ICON/BORDER-ONLY */
    --color-olive-green: #E8B900;
    /* was Omni olive-green -- DBHDS Yellow (Pantone 7405C), 1.85:1 vs white. ICON/BORDER-ONLY */
    --color-teal: #53575A;
    /* was Omni teal -- DBHDS Grey (Pantone 425), 7.29:1 vs white. TEXT-SAFE */
    --color-teal-light: #D4D5D6;
    /* pale tint of the grey above, for carousel-panel backgrounds */
    --color-periwinkle: #074369;
    /* was Omni periwinkle -- DBHDS Dark Blue (Pantone 2955C), 10.42:1 vs white. TEXT-SAFE */
    --color-periwinkle-light: #C1D0DA;
    /* pale tint of the dark blue above */
    --color-orange-red-light: #E3EBD7;
    /* pale tint of the green above, for carousel-panel backgrounds */
    --color-chart-gray: #767676;
    /* non-highlight chart elements + muted text */
    --color-ivory: #f9f7f4;
    /* light section backgrounds */
    --color-dbhds-green: #75A142;
    /* same green as --color-orange-red above; kept as its own named handle for inline use */
    --color-dbhds-grey: #53575A;
    /* same grey as --color-teal above; kept as its own named handle for inline use */
}

/* DBHDS green utility classes: large-text and non-text uses only (see note above) */
.dbhds-green-text {
    color: var(--color-dbhds-green);
}
.dbhds-green-bg {
    background-color: var(--color-dbhds-green);
}
.dbhds-grey-text {
    color: var(--color-dbhds-grey);
}

/* ============================================
   Shared UI Building Blocks
   ============================================ */
.card {
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #bfcbd3;
    background: white;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin: 2rem 0 2.75rem 0;
}

.icon-chip {
    --chip-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--chip-size);
    height: var(--chip-size);
    border-radius: 12px;
    background: #f9f7f4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    font-size: 1.15rem;
}

.icon-chip-sm {
    --chip-size: 24px;
    border-radius: 10px;
    font-size: 0.82rem;
}

.icon-chip-lg {
    --chip-size: 70px;
    border-radius: 50%;
    font-size: 2rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    min-height: 22px;
    border-radius: 999px;
    background: #C1D0DA;
    color: #405065;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    white-space: nowrap;
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    background: #C1D0DA;
    color: #405065;
}

.tag-outline {
    background: transparent;
    border: 1.5px solid #bfcbd3;
    color: #677384;
}

.card-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card-value {
    font-size: 2.6rem;
    font-weight: 800;
    color: #00689A;
    line-height: 1.05;
    margin: 0 0 0.35rem 0;
}

.card-desc {
    font-size: 0.9rem;
    color: #405065;
    line-height: 1.45;
    margin: 0;
}

/* ============================================
   Two-Column Grid Layout
   ============================================ */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0 3rem 0;
    align-items: stretch;
}

@media (max-width: 900px) {
    .two-column-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ============================================
   Section Headers
   ============================================ */
.section-header {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header.color-olive-green {
    color: var(--color-olive-green);
}

.section-header.color-plum {
    color: var(--color-plum);
}

.section-header.color-periwinkle {
    color: var(--color-periwinkle);
}

.section-header.color-teal {
    color: var(--color-teal);
}

.section-header.color-orange-red {
    color: var(--color-orange-red);
}

/* ============================================
   Multi-Column Card Section
   ============================================ */
.multi-column-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    grid-template-rows: auto;
}

.multi-column-section .section-header {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .multi-column-section {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Activity/Feature Cards
   ============================================ */
.feature-card {
    background: #f9f7f4;
    position: relative;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #bfcbd3;
}

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00689A;
    margin: 1rem 0 0.75rem 0;
}

/* A direct rule on <a> (Bootstrap's own default link color) always wins
   over an inherited color from an ancestor like h3, regardless of that
   ancestor rule's specificity -- so the h3 color above never actually
   reached the VASIS/SEOW links nested inside it; they were rendering in
   Bootstrap's default blue (#0d6efd) instead. That color's contrast
   against this card's background only clears WCAG AA because this
   heading's rendered size happens to land just past the "large text"
   18.66px/bold threshold (needs 3:1, not 4.5:1) -- a hair's-breadth
   margin that isn't safe to depend on (confirmed: a half-pixel font-size
   difference between two otherwise-identical renders was enough to flip
   it from failing to passing). Make the link explicitly inherit the
   heading's own navy, which is safely above 4.5:1 regardless of size. */
.feature-card h3 a {
    color: inherit;
}

.feature-card p {
    font-size: 0.9rem;
    color: #677384;
    line-height: 1.6;
    margin: 0;
}

.feature-card .icon-chip {
    margin-bottom: 0.75rem;
}

.feature-card .tag {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

/* Icon Color Variations */
.icon-chip.color-golden-yellow {
    color: var(--color-golden-yellow);
}

.icon-chip.color-teal {
    color: var(--color-teal);
}


.icon-chip.color-orange-red {
    color: var(--color-orange-red);
}

.icon-chip.color-plum {
    color: var(--color-plum);
}

.icon-chip.color-periwinkle {
    color: var(--color-periwinkle);
}

.icon-chip.color-olive-green {
    color: var(--color-olive-green);
}

/* ============================================
   Single Column Section
   ============================================ */
.single-column-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
    justify-content: flex-start;
}

/* ============================================
   Highlighted Alert Card
   ============================================ */
.highlight-card {
    background: linear-gradient(135deg, rgba(72, 174, 225, 0.08) 0%, rgba(72, 174, 225, 0.05) 100%);
    padding: 1.75rem;
    border-radius: 12px;
    border: 2px solid rgba(72, 174, 225, 0.2);
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    height: 100%;
    margin-top: 1rem;
}

.highlight-card.color-plum {
    background: linear-gradient(135deg, rgba(72, 174, 225, 0.08) 0%, rgba(72, 174, 225, 0.05) 100%);
    border-color: rgba(72, 174, 225, 0.2);
}

.highlight-card.color-orange-red {
    background: linear-gradient(135deg, rgba(117, 161, 66, 0.08) 0%, rgba(117, 161, 66, 0.05) 100%);
    border-color: rgba(117, 161, 66, 0.2);
}

.highlight-card.color-periwinkle {
    background: linear-gradient(135deg, rgba(7, 67, 105, 0.08) 0%, rgba(7, 67, 105, 0.05) 100%);
    border-color: rgba(7, 67, 105, 0.2);
}

@media (max-width: 900px) {
    .highlight-card {
        margin-top: 0;
        padding: 1.5rem;
    }
}

.highlight-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.highlight-card.color-plum h3 {
    color: var(--color-plum);
}

.highlight-card.color-orange-red h3 {
    color: var(--color-orange-red);
}

.highlight-card.color-periwinkle h3 {
    color: var(--color-periwinkle);
}

.highlight-card p {
    font-size: 1rem;
    color: #405065;
    margin: 0 0 1.25rem 0;
}

.highlight-note {
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #677384;
    border: 1px solid rgba(72, 174, 225, 0.15);
    width: 100%;
}

/* Pattern strip: a decorative pattern-banner crop as a card's top cap,
   bleeding through the card's own padding to sit flush against its rounded corners. */
.pattern-card-strip {
    display: block;
    margin: -1.75rem -1.75rem 0 -1.75rem;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    line-height: 0;
}

.pattern-card-strip img {
    width: 100%;
    display: block;
}

@media (max-width: 900px) {
    .pattern-card-strip {
        margin: -1.5rem -1.5rem 0 -1.5rem;
    }
}

/* ============================================
   Info Banner Section
   ============================================ */
.info-banner {
    background: linear-gradient(135deg, rgba(117, 161, 66, 0.08) 0%, rgba(117, 161, 66, 0.04) 100%);
    padding: 2.5rem;
    border-radius: 12px;
    margin: 2rem 0 3rem 0;
    border-left: 5px solid var(--color-orange-red);
}

.info-banner.color-orange-red {
    border-left-color: var(--color-orange-red);
}

.info-banner.color-plum {
    background: linear-gradient(135deg, rgba(72, 174, 225, 0.08) 0%, rgba(72, 174, 225, 0.04) 100%);
    border-left-color: var(--color-plum);
}

.info-banner.color-periwinkle {
    background: linear-gradient(135deg, rgba(7, 67, 105, 0.08) 0%, rgba(7, 67, 105, 0.04) 100%);
    border-left-color: var(--color-periwinkle);
}

.info-banner>p:first-of-type {
    color: #00689A;
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.info-banner h2 {
    color: #00689A;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.info-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-column li {
    color: #405065;
    font-size: 1rem;
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.info-column li::before {
    content: "●";
    color: var(--color-orange-red);
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0.4rem;
}

/* ============================================
   Stat Highlight Section
   ============================================ */
.stat-highlight-section {
    background: #f9f7f4;
    padding: 2.5rem;
    border-radius: 12px;
    margin: 2rem 0 3rem 0;
}

.stat-highlight-grid {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-highlight-box {
    flex: 1;
    min-width: 200px;
    padding: 1.5rem;
    border-radius: 10px;
}

.stat-highlight-box.bg-white {
    background: white;
    border: 2px solid #bfcbd3;
}

.stat-highlight-box.bg-accent {
    background: rgba(72, 174, 225, 0.10);
    border: 2px solid #bfcbd3;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-highlight-box.bg-white .stat-number {
    color: #00689A;
}

.stat-highlight-box.bg-accent .stat-number {
    color: #48AEE1;
}

.stat-highlight-box>p {
    font-size: 0.85rem;
    color: #405065;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
}

.stat-highlight-section>p:last-of-type {
    font-size: 1rem;
    color: #405065;
    margin: 0;
}

.stat-highlight-section>p:last-of-type strong {
    color: #00689A;
    font-size: 1.1rem;
}

/* ============================================
   Basic Styling
   ============================================ */
body {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.7;
    color: rgb(0, 104, 154);
    /* DBHDS co-brand: was Omni navy rgb(8, 28, 57); missed by the hex-literal
       find/replace since this rule used rgb() syntax, not #081c39 */
    font-size: 17px;
    font-weight: 400;
}

/* Site-wide link color was never actually set -- every plain in-text link
   (meeting notes, Virginia Data Finder, etc.) has been silently rendering
   in Bootstrap's own default blue (#0d6efd) this whole time, not our
   brand's designated link color, because a bare `a{}` rule from Bootstrap
   always wins over inheriting color from an ancestor, regardless of that
   ancestor's specificity. Confirmed live on every page. This restores the
   brand's actual "Links: Periwinkle-600, underlined" rule -- our periwinkle
   variable is DBHDS Dark Blue here, 10.42:1 against white, safely clear of
   AA regardless of font size. */
a {
    color: var(--color-periwinkle);
}

a:hover,
a:focus {
    color: var(--color-navy);
}

/* .title {
    color: var(--color-periwinkle);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
} */

.subtitle {
    color: var(--color-periwinkle);
    /* DBHDS co-brand: was --color-plum (Omni plum); the page subtitle is a primary
       identity element (every page title), not an internal card-variety accent */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

/*
h2 {
    color: #00689A;
    font-size: 2.25rem;
    font-weight: 800;
    padding-bottom: 0.5rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    border-bottom: none;
}

h3 {
    color: var(--color-plum);
    margin-top: 1.5rem;
} */

/* ============================================
   Section Label
   ============================================ */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-dbhds-grey);
    /* DBHDS co-brand: was --color-teal (Omni teal); section labels are a recurring
       identity element (top of nearly every page/section), not card-variety color */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ============================================
   Stat Cards Grid
   ============================================ */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    max-width: 46rem;
    margin: 2rem auto 2.75rem auto;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.stat-card {
    border-radius: 12px;
    padding: 1.35rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #bfcbd3;
    background: white;
    border-top: 4px solid;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
    height: 100%;
    text-align: left;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Stat Card Color Variations */
.stat-card.color-golden-yellow {
    border-top-color: var(--color-golden-yellow);
}

.stat-card.color-plum {
    border-top-color: var(--color-plum);
}

.stat-card.color-orange-red {
    border-top-color: var(--color-orange-red);
}

.stat-card.color-teal {
    border-top-color: var(--color-teal);
}

.stat-card.color-olive-green {
    border-top-color: var(--color-olive-green);
}

.stat-card.color-periwinkle {
    border-top-color: var(--color-periwinkle);
}

.stat-card.color-golden-yellow .icon-chip-sm {
    color: var(--color-golden-yellow);
    background: rgba(151, 209, 98, 0.14);
}

.stat-card.color-plum .icon-chip-sm {
    color: var(--color-plum);
    background: rgba(72, 174, 225, 0.12);
}

.stat-card.color-orange-red .icon-chip-sm {
    color: var(--color-orange-red);
    background: rgba(117, 161, 66, 0.12);
}

.stat-card.color-teal .icon-chip-sm {
    color: var(--color-teal);
    background: rgba(83, 87, 90, 0.14);
}

.stat-card.color-olive-green .icon-chip-sm {
    color: var(--color-olive-green);
    background: rgba(232, 185, 0, 0.14);
}

.stat-card.color-periwinkle .icon-chip-sm {
    color: var(--color-periwinkle);
    background: rgba(7, 67, 105, 0.14);
}

/* golden-yellow/plum/orange-red/olive-green are DBHDS's lighter colors
   (Light Green/Light Blue/Green/Yellow) -- all fail 4.5:1 as small text on
   white, so card-value/card-label stay navy (text-safe) for those four;
   the bright hue still shows via the border-top and icon-chip glyph. */
.stat-card.color-golden-yellow .card-value,
.stat-card.color-plum .card-value,
.stat-card.color-orange-red .card-value,
.stat-card.color-olive-green .card-value {
    color: var(--color-navy);
}

.stat-card.color-teal .card-value {
    color: var(--color-teal);
}

.stat-card.color-periwinkle .card-value {
    color: var(--color-periwinkle);
}

.stat-card.color-navy .card-value {
    color: var(--color-navy);
}

.stat-card.color-golden-yellow .card-label,
.stat-card.color-plum .card-label,
.stat-card.color-orange-red .card-label,
.stat-card.color-olive-green .card-label {
    color: var(--color-navy);
}

.stat-card.color-teal .card-label {
    color: var(--color-teal);
}

.stat-card.color-periwinkle .card-label {
    color: var(--color-periwinkle);
}

.stat-card.color-navy .card-label {
    color: var(--color-navy);
}

.stat-card.color-navy {
    border-top-color: var(--color-navy);
}

.stat-card.color-navy .icon-chip-sm {
    color: var(--color-navy);
    background: rgba(0, 104, 154, 0.12);
}

.stat-card .card-label {
    font-size: 0.62rem;
    letter-spacing: 0.8px;
}

.stat-card .card-value {
    font-size: 1.4rem;
    margin: 0;
    line-height: 1;
    text-align: left;
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.stat-card-header .stat-card-icon,
.stat-card-header .stat-card-value {
    align-self: center;
}

.stat-card-subtext {
    font-size: 0.82rem;
    color: #677384;
    font-weight: 600;
    margin: 0 0 0.1rem 0;
}

/* ============================================
   Split Layout (Chart + Sidebar)
   ============================================ */
.split-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.25rem;
    align-items: start;
    margin: 2rem 0;
}

.chart-container {
    background: #f9f7f4;
    border: 1px solid #bfcbd3;
    border-radius: 22px;
    padding: 1.75rem;
    box-shadow: 0 16px 32px rgba(0, 16, 51, 0.08);
}

.chart-container figure {
    margin: 0;
    background: #fff;
    border: 1px solid #bfcbd3;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.chart-container img,
.chart-container picture,
.chart-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.chart-caption {
    text-align: center;
    font-size: 0.78rem;
    color: #767676;
    letter-spacing: 0.2px;
    margin-top: 0.5rem;
}

.sidebar-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 1024px) {
    .split-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Accent Box
   ============================================ */
.accent-box {
    background: linear-gradient(135deg, rgba(232, 185, 0, 0.08) 0%, rgba(232, 185, 0, 0.04) 100%);
    border-radius: 18px;
    padding: 1.3rem 1.5rem;
    border: 1px solid rgba(232, 185, 0, 0.22);
    box-shadow: 0 12px 24px rgba(0, 16, 51, 0.08);
    color: #E8B900;
}

.accent-box.color-olive-green {
    background: linear-gradient(135deg, rgba(232, 185, 0, 0.08) 0%, rgba(232, 185, 0, 0.04) 100%);
    border-color: rgba(232, 185, 0, 0.22);
    color: #E8B900;
}

.accent-box.color-plum {
    background: linear-gradient(135deg, rgba(72, 174, 225, 0.08) 0%, rgba(72, 174, 225, 0.04) 100%);
    border-color: rgba(72, 174, 225, 0.22);
    color: #48AEE1;
}

.accent-box.color-periwinkle {
    background: linear-gradient(135deg, rgba(7, 67, 105, 0.08) 0%, rgba(7, 67, 105, 0.04) 100%);
    border-color: rgba(7, 67, 105, 0.22);
    color: #00689A;
}

.accent-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.accent-subtext {
    font-size: 0.95rem;
    margin: 0.1rem 0;
}

.accent-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.05;
}

.accent-box.color-olive-green .accent-value {
    color: #E8B900;
}

.accent-box.color-plum .accent-value {
    color: #48AEE1;
}

.accent-box.color-periwinkle .accent-value {
    color: #074369;
}

/* ============================================
   Info Card with Icon
   ============================================ */
.info-card-icon {
    background: #f9f7f4;
    border: 1px solid #bfcbd3;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 24px rgba(0, 16, 51, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-card-header {
    font-size: 1.05rem;
    font-weight: 800;
    color: #00689A;
    margin: 0;
}

.info-card-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.info-card-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(117, 161, 66, 0.08);
    color: #75A142;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(117, 161, 66, 0.14);
    font-size: 1.05rem;
}

.info-card-icon-box.color-orange-red {
    background: rgba(117, 161, 66, 0.08);
    color: #75A142;
    box-shadow: 0 2px 8px rgba(117, 161, 66, 0.14);
}

.info-card-icon-box.color-plum {
    background: rgba(72, 174, 225, 0.08);
    color: var(--color-plum);
    box-shadow: 0 2px 8px rgba(72, 174, 225, 0.14);
}

.info-card-icon-box.color-periwinkle {
    background: rgba(7, 67, 105, 0.08);
    color: var(--color-periwinkle);
    box-shadow: 0 2px 8px rgba(7, 67, 105, 0.14);
}

.info-card-icon-box.color-teal {
    background: rgba(83, 87, 90, 0.08);
    color: var(--color-teal);
    box-shadow: 0 2px 8px rgba(83, 87, 90, 0.14);
}

.info-card-icon-box.color-olive-green {
    background: rgba(232, 185, 0, 0.08);
    color: var(--color-olive-green);
    box-shadow: 0 2px 8px rgba(232, 185, 0, 0.14);
}

.info-card-icon-box.color-golden-yellow {
    background: rgba(151, 209, 98, 0.08);
    color: var(--color-golden-yellow);
    box-shadow: 0 2px 8px rgba(151, 209, 98, 0.14);
}

.info-card-text {
    margin: 0;
    color: #405065;
    line-height: 1.5;
    font-size: 0.98rem;
}

.text-emphasis {
    font-weight: 800;
}

.text-emphasis.color-orange-red {
    color: #75A142;
}

.text-emphasis.color-plum {
    color: var(--color-plum);
}

.text-emphasis.color-periwinkle {
    color: var(--color-periwinkle);
}

/* ============================================
   Content Section
   ============================================ */
.content-section {
    background: transparent;
    padding: 0.75rem 0 2rem 0;
    margin: 1.25rem 0;
    border-radius: 0;
}

.content-section h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.content-section>p:first-of-type {
    margin-top: 0.25rem;
    margin-bottom: 1.25rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.content-left,
.content-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 968px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Alert Box
   ============================================ */
.alert-box {
    background: linear-gradient(135deg, rgba(117, 161, 66, 0.08) 0%, rgba(72, 174, 225, 0.08) 100%);
    border-left: 5px solid var(--color-plum);
    padding: 1rem 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    max-width: 350px;
}

.alert-box.color-plum {
    background: linear-gradient(135deg, rgba(117, 161, 66, 0.08) 0%, rgba(72, 174, 225, 0.08) 100%);
    border-left-color: var(--color-plum);
}

.alert-box.color-orange-red {
    background: linear-gradient(135deg, rgba(117, 161, 66, 0.12) 0%, rgba(117, 161, 66, 0.08) 100%);
    border-left-color: var(--color-orange-red);
}

.alert-box>p:first-of-type strong {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.1rem;
}

.alert-box.color-plum>p:first-of-type strong {
    color: var(--color-plum);
}

.alert-box.color-orange-red>p:first-of-type strong {
    color: var(--color-orange-red);
}

.alert-stat {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1;
    display: block;
    margin-bottom: 0.15rem;
}

.alert-box.color-plum .alert-stat {
    color: var(--color-plum);
}

.alert-box.color-orange-red .alert-stat {
    color: var(--color-orange-red);
}

.alert-box p {
    color: #405065;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0.5rem 0;
}

.alert-box>p:last-of-type strong {
    font-weight: 700;
    display: block;
    margin-top: 1rem;
}

.alert-box.color-plum>p:last-of-type strong {
    color: var(--color-plum);
}

.alert-box.color-orange-red>p:last-of-type strong {
    color: var(--color-orange-red);
}

/* ============================================
   Data Box
   ============================================ */
.data-box {
    background: white;
    border: 2px solid #bfcbd3;
    padding: 1.75rem;
    border-radius: 10px;
}

.data-box>p:first-of-type strong {
    font-size: 1rem;
    font-weight: 700;
    color: #00689A;
    display: block;
    margin-bottom: 1rem;
}

.data-stat {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    display: block;
    margin-bottom: 0.25rem;
}

.data-stat.color-orange-red {
    color: var(--color-orange-red);
}

.data-stat.color-plum {
    color: var(--color-plum);
}

.data-stat.color-periwinkle {
    color: var(--color-periwinkle);
}

.data-box p {
    font-size: 0.9rem;
    color: #677384;
    margin: 0.5rem 0;
}

.data-box em {
    font-size: 0.8rem;
    color: #767676;
    font-style: italic;
}

/* ============================================
   Chart Caption Variations
   ============================================ */
.chart-caption-right {
    text-align: right;
    font-size: 0.7rem;
    color: #767676;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-top: 0.5rem;
}

/* ============================================
   Callout Customization
   ============================================ */
.callout {
    border-radius: 10px;
    margin: 1.5rem 0;
    padding: 1.25rem;
}

.callout-note {
    border-left: 5px solid var(--color-teal);
}

.callout-tip {
    border-left: 5px solid var(--color-olive-green);
    background-color: rgba(232, 185, 0, 0.05);
}

.callout-warning {
    border-left: 5px solid var(--color-orange-red);
    background-color: rgba(117, 161, 66, 0.05);
}

.callout-important {
    border-left: 5px solid var(--color-plum);
    background-color: rgba(72, 174, 225, 0.05);
}

.callout-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Quarto's default callout-title color measured at 4.04:1 against the
   pale tinted callout backgrounds above -- just under 4.5:1. Force navy. */
.callout-title-container {
    color: #081c39 !important;
}

/* ============================================
   Toggle (details/summary)
   ============================================ */
details.toggle {
    border: 1px solid #bfcbd3;
    border-radius: 10px;
    padding: 0.9rem 1.25rem;
    margin: 1rem 0 1.5rem 0;
    background: var(--color-ivory);
}

details.toggle summary {
    font-weight: 700;
    color: var(--color-periwinkle);
    cursor: pointer;
    list-style: none;
}

details.toggle summary::-webkit-details-marker {
    display: none;
}

details.toggle summary::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 0.6rem;
    transition: transform 0.15s;
}

details.toggle[open] summary::before {
    transform: rotate(90deg);
}

details.toggle ul {
    margin: 0.85rem 0 0.1rem 0;
    padding-left: 1.25rem;
    color: var(--color-steel-blue);
}

details.toggle li {
    margin-bottom: 0.35rem;
}

/* Callout as Stat Card */
.callout.stat-card {
    border-left: none;
    border-top: 4px solid;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-right: 1px solid #bfcbd3;
    border-bottom: 1px solid #bfcbd3;
    background: white;
}

.callout.stat-card .callout-title-container {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    padding: 0;
}

.callout.stat-card .callout-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f9f7f4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    font-size: 1.05rem;
}

.callout.stat-card .callout-body {
    padding: 0;
}

.callout.stat-card .callout-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.callout.stat-card.color-golden-yellow {
    border-top-color: var(--color-golden-yellow);
}

.callout.stat-card.color-plum {
    border-top-color: var(--color-plum);
}

.callout.stat-card.color-orange-red {
    border-top-color: var(--color-orange-red);
}

.callout.stat-card.color-teal {
    border-top-color: var(--color-teal);
}

.callout.stat-card.color-olive-green {
    border-top-color: var(--color-olive-green);
}

.callout.stat-card.color-periwinkle {
    border-top-color: var(--color-periwinkle);
}

.callout.stat-card.color-golden-yellow .callout-icon-container {
    color: var(--color-golden-yellow);
    background: rgba(151, 209, 98, 0.14);
}

.callout.stat-card.color-plum .callout-icon-container {
    color: var(--color-plum);
    background: rgba(72, 174, 225, 0.12);
}

.callout.stat-card.color-orange-red .callout-icon-container {
    color: var(--color-orange-red);
    background: rgba(117, 161, 66, 0.12);
}

.callout.stat-card.color-teal .callout-icon-container {
    color: var(--color-teal);
    background: rgba(83, 87, 90, 0.14);
}

.callout.stat-card.color-olive-green .callout-icon-container {
    color: var(--color-olive-green);
    background: rgba(232, 185, 0, 0.14);
}

.callout.stat-card.color-periwinkle .callout-icon-container {
    color: var(--color-periwinkle);
    background: rgba(7, 67, 105, 0.14);
}

.callout.stat-card.color-golden-yellow .callout-title {
    color: var(--color-golden-yellow);
}

.callout.stat-card.color-plum .callout-title {
    color: var(--color-plum);
}

.callout.stat-card.color-orange-red .callout-title {
    color: var(--color-orange-red);
}

.callout.stat-card.color-teal .callout-title {
    color: var(--color-teal);
}

.callout.stat-card.color-olive-green .callout-title {
    color: var(--color-olive-green);
}

.callout.stat-card.color-periwinkle .callout-title {
    color: var(--color-periwinkle);
}

/* ============================================
   Grid Layout
   ============================================ */
.grid {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.g-col-6 {
    grid-column: span 6;
}

/* ============================================
   Tables
   ============================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

th {
    background-color: var(--color-teal);
    color: white;
    padding: 0.75rem;
    text-align: left;
    font-weight: 700;
}

td {
    padding: 0.75rem;
    border-bottom: 1px solid #bfcbd3;
}

tr:hover {
    background-color: rgba(83, 87, 90, 0.05);
}

/* ============================================
   Emphasis & Styling
   ============================================ */
strong {
    font-weight: 700;
}

hr {
    border: none;
    border-top: 2px solid #bfcbd3;
    margin: 3rem 0;
}

/* ============================================
   Footnotes & References
   ============================================ */
sup {
    font-size: 0.7em;
}

sup a {
    color: var(--color-teal);
    text-decoration: none;
}

sup a:hover {
    text-decoration: underline;
}

/* ============================================
   Utility Classes
   ============================================ */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.gap-sm {
    gap: 0.5rem;
}

.gap-md {
    gap: 1rem;
}

.gap-lg {
    gap: 1.5rem;
}

.gap-xl {
    gap: 2rem;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */
@media (max-width: 968px) {
    .stat-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .stat-cards-grid {
        grid-template-columns: 1fr;
    }

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

    .g-col-6 {
        grid-column: span 1;
    }

    .alert-stat,
    .data-stat {
        font-size: 3rem;
    }

    .stat-number {
        font-size: 2.8rem;
    }

    .card-value {
        font-size: 2rem;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {

    .stat-card,
    .card,
    .feature-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .stat-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}
/* ============================================
   Tab Colors
   ============================================ */
.tab-olive-green {
    color: var(--color-olive-green);
    font-weight: 700;
}

.tab-periwinkle {
    color: var(--color-periwinkle);
    font-weight: 700;
}

.tab-steel-blue {
    color: #677384;
    font-weight: 700;
}

.tab-teal {
    color: var(--color-teal);
    font-weight: 700;
}

.tab-plum {
    color: var(--color-plum);
    font-weight: 700;
}

.tab-orange-red {
    color: var(--color-orange-red);
    font-weight: 700;
}

/* ============================================
   CSS Carousel
   ============================================ */
.carousel .omni-carousel-panel {
    background: var(--color-periwinkle-light);
    border: 1px solid var(--color-periwinkle-light);
    border-top: 5px solid var(--color-periwinkle);
    border-radius: 12px;
    color: var(--color-navy);
    min-height: 220px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.carousel .omni-carousel-panel h3 {
    color: var(--color-periwinkle);
    font-weight: 800;
}

.carousel .omni-carousel-panel p {
    color: var(--color-steel-blue);
}

.carousel .omni-carousel-panel.color-teal {
    background: var(--color-teal-light);
    border-color: var(--color-teal-light);
    border-top-color: var(--color-teal);
}

.carousel .omni-carousel-panel.color-teal h3 {
    color: var(--color-teal);
}

.carousel .omni-carousel-panel.color-plum {
    background: var(--color-plum-light);
    border-color: var(--color-plum-light);
    border-top-color: var(--color-plum);
}

.carousel .omni-carousel-panel.color-plum h3 {
    color: var(--color-plum);
}

.carousel .omni-carousel-panel.color-orange-red {
    background: var(--color-orange-red-light);
    border-color: var(--color-orange-red-light);
    border-top-color: var(--color-orange-red);
}

/* DBHDS Green fails 4.5:1 as text, so the heading stays navy even though
   the panel itself carries the green accent via its border/background. */
.carousel .omni-carousel-panel.color-orange-red h3 {
    color: var(--color-navy);
}

.carousel .carousel-indicators [data-bs-target] {
    background-color: var(--color-periwinkle);
}

.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
    background-color: var(--color-periwinkle);
    border-radius: 999px;
    background-size: 60% 60%;
}

/* Bootstrap vertically centers the prev/next controls across the FULL
   slide height by default. That's fine on a tall slide (an icon-chip above
   the heading pushes the paragraph well clear of center), but on a shorter
   slide with just a heading + one paragraph, the gap between them is only
   ~8px -- not enough room for the control, so it lands squarely on the
   paragraph text (confirmed by measuring both carousels' actual layout).
   Aligning the controls with each panel's own heading avoids that AND
   reads intentionally (arrows level with the title, not floating in a
   corner). The two carousels need different offsets because "Our Approach"
   has an icon-chip above its heading, pushing it lower than "This Year at
   a Glance"'s -- both values below are measured to center the 34px control
   icon on that carousel's own <h3> vertical center. */
#yearGlanceCarousel .carousel-control-prev,
#yearGlanceCarousel .carousel-control-next {
    align-items: flex-start;
    padding-top: 4.85rem;
}

#ourApproachCarousel .carousel-control-prev,
#ourApproachCarousel .carousel-control-next {
    align-items: flex-start;
    padding-top: 10.3rem;
}

.css-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #bfcbd3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 2rem 0 2.75rem 0;
}

.css-carousel-track {
    display: flex;
    width: 400%;
    animation: none;
}

.css-carousel-slide {
    width: 25%;
    flex-shrink: 0;
    background: white;
}

.css-carousel-img {
    width: 100%;
    height: 280px;
    background: #f9f7f4;
    border-bottom: 1px solid #bfcbd3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #767676;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.css-carousel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.css-carousel-info {
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.css-carousel-meta {
    flex: 1;
}

.css-carousel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00689A;
    margin: 0.75rem 0 0.4rem 0;
    line-height: 1.3;
}

.css-carousel-desc {
    font-size: 0.9rem;
    color: #677384;
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.css-carousel-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #074369;
    text-decoration: none;
    border-bottom: 1.5px solid #074369;
    padding-bottom: 1px;
}

.css-carousel-link:hover {
    opacity: 0.75;
}

/* Radio button controls */
.css-carousel-controls {
    display: none;
}

.css-carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 1rem 1.75rem;
    border-top: 1px solid #bfcbd3;
    background: white;
}

.css-carousel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bfcbd3;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

/* Slide switching via :target */
.css-carousel-slide {
    display: none;
}

.css-carousel-slide:first-child {
    display: block;
}

.css-carousel-slide:target {
    display: block;
}

/* When a slide is targeted, hide the first child default */
.css-carousel:has(.css-carousel-slide:target) .css-carousel-slide:first-child:not(:target) {
    display: none;
}

.css-carousel-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #bfcbd3;
    background: white;
    color: #405065;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    font-weight: 700;
    line-height: 1;
}

.css-carousel-nav-btn:hover {
    background: #f9f7f4;
    text-decoration: none;
}

.css-carousel-counter {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #767676;
    text-transform: uppercase;
    min-width: 40px;
    text-align: center;
}
/* ============================================
   Colored Tabset
   ============================================ */
.omni-tabs .nav-tabs .nav-link {
  border-radius: 12px 12px 0 0 !important;
  padding: 12px 20px !important;
  font-weight: 800 !important;
  border: 1px solid #bfcbd3 !important;
  border-bottom: none !important;
  margin-right: 10px !important;
  color: #ffffff !important;
}
.omni-tabs .nav-tabs .nav-link span {
  color: #ffffff !important;
}

.panel-tabset.omni-tabs .tab-content {
  background: white;
  border: 1px solid var(--color-periwinkle-light);
  border-top: 4px solid var(--color-periwinkle);
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.panel-tabset.omni-tabs .tab-pane > :last-child {
  margin-bottom: 0;
}
 
.omni-tabs .nav-tabs .nav-link:has(.olive-green-600) {
  background-color: #E8B900 !important;
}
 
.omni-tabs .nav-tabs .nav-link:has(.periwinkle-600) {
  background-color: #074369 !important;
}
 
.omni-tabs .nav-tabs .nav-link:has(.teal-600) {
  background-color: #53575A !important;
}

.omni-tabs .nav-tabs .nav-link:has(.plum-600) {
  background-color: #48AEE1 !important;
}

.omni-tabs .nav-tabs .nav-link:has(.orange-red-600) {
  background-color: #75A142 !important;
}

.omni-tabs .nav-tabs .nav-link:has(.steel-blue-400) {
  background-color: #677384 !important;
}

/* olive-green (DBHDS Yellow), plum (DBHDS Light Blue), and orange-red
   (DBHDS Green) are light/mid backgrounds where even navy (#00689A, the
   DBHDS "Blue") isn't dark enough -- measured 2.01:1 to 3.29:1 against
   these backgrounds, still failing 4.5:1. True near-black Omni Navy
   (#081c39) is dark enough against all three (5.6:1-9.2:1, verified via
   the accessibility-scan skill). steel-blue-400 stays on the default
   white-text rule below -- it's dark enough for white text (4.81:1) but
   not light enough for #081c39 text. Higher specificity than the blanket
   white-text rules below, so this wins regardless of source order. */
.omni-tabs .nav-tabs .nav-link:has(.olive-green-600),
.omni-tabs .nav-tabs .nav-link:has(.plum-600),
.omni-tabs .nav-tabs .nav-link:has(.orange-red-600) {
  color: #081c39 !important;
}

.omni-tabs .nav-tabs .nav-link:has(.olive-green-600) span,
.omni-tabs .nav-tabs .nav-link:has(.plum-600) span,
.omni-tabs .nav-tabs .nav-link:has(.orange-red-600) span {
  color: #081c39 !important;
}

.omni-tabs .nav-tabs .nav-link:hover {
  filter: brightness(0.95);
}
 
.omni-tabs .nav-tabs .nav-link.active,
.omni-tabs .nav-tabs .nav-link.active:hover,
.omni-tabs .nav-tabs .nav-link.active:focus {
  filter: brightness(0.88);
}

/* ============================================
   Scrollytelling / Parallax
   ============================================ */
.omni-scrolly {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2rem;
    margin: 2rem 0 3rem 0;
}

.omni-scrolly-panel {
    position: sticky;
    top: 15vh;
    background: #00689A;
    border-radius: 16px;
    padding: 1.75rem;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 16, 51, 0.18);
}

.omni-scrolly-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #a9bad8;
    margin: 0 0 1.1rem 0;
}

.omni-scrolly-stage {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    color: #a9bad8;
    font-weight: 600;
    transition: color 0.3s;
}

.omni-scrolly-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #a9bad8;
    font-weight: 700;
    transition: background 0.3s, color 0.3s;
}

.omni-scrolly-stage.is-active {
    color: #ffffff;
}

.omni-scrolly-stage.is-active .omni-scrolly-num {
    background: #074369;
    color: #ffffff;
}

.omni-scrolly-steps {
    display: flex;
    flex-direction: column;
}

.omni-scrolly-step {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.omni-scrolly-step h3 {
    color: #00689A;
    margin-top: 0;
}

.omni-scrolly-step p {
    color: #405065;
}

@media (max-width: 768px) {
    .omni-scrolly {
        grid-template-columns: 1fr;
    }

    .omni-scrolly-panel {
        position: static;
        top: auto;
        margin-bottom: 1.5rem;
    }

    .omni-scrolly-step {
        min-height: auto;
        margin-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .omni-scrolly-stage,
    .omni-scrolly-num {
        transition: none;
    }
}

/* ============================================
   Hero Banner
   A dark, full-width opener for a single landing/pitch page: eyebrow,
   headline, tags, CTAs on the left; a floating stat panel on the right.
   Structure only — apply an existing palette utility class (e.g.
   .orange-red-400) to color the eyebrow/tags/accent span; don't hardcode
   a color here.
   ============================================ */
.hero-banner {
    background: linear-gradient(135deg, #00689A 0%, #2E7E7A 45%, #53935A 70%, #75A142 100%);
    color: #ffffff;
    padding: 3rem;
    margin: 0 0 2.5rem 0;
    border-radius: 12px;
    /* Deliberately NOT a 100vw full-bleed breakout: this page layout has a
       persistent right-hand TOC sidebar, which shifts where the content
       column's true horizontal center falls -- the standard
       width:100vw / margin:calc(-50vw + 50%) trick measures against the
       viewport center instead and clips content on the left as a result
       (confirmed visually). A contained banner spanning the normal content
       column avoids that entirely. */
    position: relative;
    overflow: hidden;
}

/* Large decorative chevron watermark, echoing the arrow motif in the DBHDS
   logo itself. Purely decorative (no content), so it's a plain pseudo-element
   rather than an <img> -- nothing here needs alt text. */
.hero-banner::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -6%;
    width: 50%;
    height: 150%;
    background: rgba(255, 255, 255, 0.07);
    clip-path: polygon(25% 0%, 55% 0%, 85% 50%, 55% 100%, 25% 100%, 55% 50%);
    pointer-events: none;
}

.hero-logo-lockup {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    position: relative;
}

.hero-logo-dbhds {
    height: 28px;
    width: auto;
}

.hero-logo-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.4);
}

.hero-logo-omni-mark {
    height: 26px;
    width: auto;
}

.hero-logo-omni-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
}

.hero-date {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 1rem;
    position: relative;
}

/* The hero banner's own heading replaces the page's visible title, but the
   real page <h1> (from the qmd's title: field) must stay in the accessibility
   tree — screen readers and the browser tab both still need it. Visually
   hide it (not display:none) only on pages that use a hero banner. */
/* Quarto's main.content carries a default top margin/padding (breathing room
   under the fixed navbar) that shows through as a white gap above a
   full-bleed hero — cancel it, scoped to hero-banner pages only. The real
   padding-top rule is Quarto's own "#quarto-content > *" (an ID selector),
   so the override has to match that specificity via the same ID, not just
   target main.content on its own — a plain class-based override loses to it
   silently (margin-top applies, padding-top doesn't, since only that one
   property collides). */
body:has(.hero-banner) main.content {
    margin-top: 0;
}

body:has(.hero-banner) #quarto-content > main.content {
    padding-top: 0;
}

body:has(.hero-banner) #title-block-header {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero-banner h1,
.hero-banner h2 {
    color: #ffffff;
    margin-top: 0 !important;
    font-size: 2.75rem;
    line-height: 1.15;
    position: relative;
}

.hero-banner p {
    color: rgba(255, 255, 255, 0.85);
    position: relative;
}

.hero-banner-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .hero-banner {
        padding: 2rem 1.5rem;
    }

    .hero-banner h1,
    .hero-banner h2 {
        font-size: 2rem;
    }

    .hero-banner-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 1.25rem 0;
}

.hero-tags .sep {
    opacity: 0.5;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 0.85rem;
    margin-top: 1.5rem;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-primary {
    background: var(--color-navy);
    /* DBHDS co-brand: was --color-orange-red (Omni orange); the primary CTA button
       is a prominent identity element, recolored to DBHDS Blue (6.09:1 vs white text) */
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--color-periwinkle);
    /* DBHDS Dark Blue on hover -- distinct from the base state, still 10.42:1 vs white */
}

.btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* ============================================
   Page Nav Links -- "continue exploring" shortcuts at the bottom of each
   page's content, so a reader doesn't have to scroll back to the top navbar
   to reach the other pages.
   ============================================ */
.page-nav-links {
    margin: 3rem 0 1rem 0;
    padding-top: 2rem;
    border-top: 1px solid #bfcbd3;
    text-align: center;
}

.page-nav-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-dbhds-grey);
    margin-bottom: 1rem;
}

.page-nav-links .btn {
    margin: 0 0.4rem;
}

.btn-ghost:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Hero stat panel: an existing .stat-card as the top zone (unchanged
   markup/behavior), flattened into a second, ivory "mini stats" zone below
   it so the two read as one floating card rather than two stacked ones. */
.hero-stat-panel {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.hero-stat-panel .stat-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    height: auto;
}

.hero-stat-panel .stat-card:hover {
    transform: none;
}

/* Pandoc wraps fenced-div content in a <p> whenever there's a blank line
   around it in the source markdown (vs. no wrapper for "tight" markdown) —
   which one you get can change with no visible edit, e.g. a visual editor
   reformatting the same content. .hero-banner p sets a broad white color
   for genuine prose in the copy column; without this, that same rule would
   also catch these inner <p>s if Pandoc ever wraps them, silently overriding
   the color these elements are supposed to inherit from their own
   .card-value/.card-label/.hero-stat-mini-num/etc. parent (confirmed: this
   is exactly what happened). Higher specificity than .hero-banner p on
   purpose, so this wins regardless of source order.
   ============================================ */
.hero-banner .hero-eyebrow p,
.hero-banner .hero-tags p,
.hero-banner .hero-cta-row p,
.hero-banner .hero-stat-panel p,
.hero-banner .hero-stat-mini-zone p {
    color: inherit;
    margin: 0;
}

.hero-stat-mini-zone {
    background: var(--color-ivory);
    padding: 1.35rem;
}

.hero-stat-mini-zone-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-steel-blue);
    margin-bottom: 0.75rem;
}

.hero-stat-mini-row {
    display: flex;
    gap: 2rem;
}

.hero-stat-mini-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1;
}

.hero-stat-mini-label {
    font-size: 0.8rem;
    color: var(--color-steel-blue);
    margin-top: 0.25rem;
}

/* ============================================
   Pattern Callout
   A full pattern texture as a section backdrop, with a floating white/ivory
   card centered on top carrying one key point. Unlike the pattern-banner
   crops (a single non-repeating strip) or the pattern-card-strip (a small
   cap), this one repeats the pattern as a continuous background — Omni's
   pattern assets tile seamlessly, so no crop math is needed here; any of
   the pattern-banner SVGs (or a source pattern directly) works as the
   repeating tile. Set the background-image inline per use, same as
   pattern-card-strip.
   ============================================ */
.pattern-callout {
    background-repeat: repeat;
    background-size: 300px auto;
    padding: 4rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Real margin, not reliance on the previous element's own spacing: a
       card grid with an uneven last row (e.g. 3 cards in a 2-column grid)
       can render a few px taller than CSS Grid's own auto-row measurement
       accounted for (a known percentage-height-in-auto-track quirk), which
       silently eats a zero-margin boundary here. Generous enough to absorb
       that regardless of what precedes this component. */
    margin-top: 2.5rem;
}

.pattern-callout-card {
    background: var(--color-ivory);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 2.5rem 3rem;
    max-width: 700px;
    text-align: center;
}

/* Deliberately steel-blue, not a .color-X 600 accent: several 600 colors
   (periwinkle measured at 4.23:1) sit right at the AA edge on pure white and
   drop just under it on this card's ivory background — this size/weight
   combination needs a color with real margin, not the closest brand match. */
.pattern-callout-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-steel-blue);
    margin-bottom: 1rem;
}

.pattern-callout-card h2,
.pattern-callout-card h3 {
    margin-top: 0 !important;
}

.pattern-callout-card p {
    color: var(--color-steel-blue);
}

@media (max-width: 900px) {
    .pattern-callout {
        padding: 2.5rem 1.25rem;
    }

    .pattern-callout-card {
        padding: 2rem;
    }
}

/* ============================================
   Section Banner
   A scaled-up CSS recreation of the diagonal blue-to-green gradient graphic
   used under section titles throughout DBHDS's own annual report and Brand
   Guidelines PDF (source images word/media/image32.png etc. -- a fixed
   1632px raster). Rebuilt as a gradient so it stays crisp at any width,
   and applied automatically under every real content h2 so every major
   section gets one without hand-editing each heading.
   ============================================ */
h2::after,
.quarto-title h1.title::after {
    content: "";
    display: block;
    height: 7px;
    margin: 0.6rem 0 1.85rem 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #00689A 0%, #2E7E7A 45%, #53935A 70%, #75A142 100%);
}

/* ============================================
   Hide the redundant intro-section heading on the VASIS/SEOW pages (it
   repeats the page's own title) while keeping it in the sidebar TOC and
   for screen readers. This must be scoped to the exact heading element by
   id (h2#vasis / h2#seow), NOT via a shared class like Bootstrap's
   .visually-hidden on the heading's own {.class} attribute -- Quarto's
   section-divs wraps a heading and everything under it in a
   <section class="levelN ..."> and copies the heading's classes onto that
   wrapper too, so a shared class there hides the whole section's content,
   not just the heading (confirmed: it hid the VASIS/SEOW intro paragraphs
   entirely). Same root cause as the earlier "SEOW Subcommittee Focus"
   font-size leak -- always scope by tag/id when a class is meant for one
   heading only.
   ============================================ */
h2[data-anchor-id="vasis"],
h2[data-anchor-id="seow"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Line Chart (monthly trend, two series)
   Recreates the native Word/Excel line charts from the source annual
   report as static, accessible inline SVG -- no charting library needed
   for two 12-point series. Each chart ships with a companion
   .visually-hidden <table> carrying the exact monthly values, since a
   chart this data-dense needs a real text alternative, not just an
   aria-label summary.
   ============================================ */
.chart-finding {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-periwinkle);
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 0.75rem auto;
    line-height: 1.4;
}

.chart-finding strong {
    font-weight: 800;
}

/* ============================================
   Stat Callout Box -- an icon-chip + a single data-heavy sentence pulled
   out of body text into its own tinted, rounded box, matching the source
   report's treatment of its "topline numbers" sentence.
   ============================================ */
.stat-callout-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(7, 67, 105, 0.06);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 46rem;
}

.stat-callout-box .icon-chip {
    background: #ffffff;
    flex-shrink: 0;
}

.stat-callout-box p {
    margin: 0;
    color: var(--color-periwinkle);
}

.line-chart-card {
    background: #ffffff;
    border: 1px solid #e2e6ea;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    margin: 0 auto 2rem auto;
    max-width: 46rem;
}

.line-chart-card svg {
    width: 100%;
    height: auto;
    display: block;
}

.line-chart-axis-label {
    font-size: 11px;
    fill: var(--color-dbhds-grey);
    font-family: inherit;
}

.line-chart-series-label {
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
}

/* ============================================
   Quote Card (compact pull-quote variant)
   ============================================ */
.highlight-card.quote-compact {
    background: linear-gradient(135deg, rgba(7, 67, 105, 0.16) 0%, rgba(117, 161, 66, 0.10) 100%);
    border-color: rgba(7, 67, 105, 0.28);
    padding: 1.35rem 1.75rem;
}

/* Plain paragraph, not a heading -- a decorative pull-quote has no place in
   the document's heading structure or the sidebar TOC, which is exactly
   what using an h3 here caused: the full quote sentence showed up as a
   navigable sub-item nested under "Background". */
.highlight-card.quote-compact p {
    font-size: 1.05rem;
    font-style: italic;
    margin: 0;
}

/* ============================================
   Feature Card hover lift (matches .stat-card's existing hover)
   ============================================ */
.feature-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* ============================================
   Colored Toggle (details/summary accordion with a colored accent)
   Light background tint + left accent bar. These are non-text washes, so
   all six accent colors are usable here even the ICON/BORDER-ONLY ones
   documented in :root above -- summary text itself stays periwinkle
   (text-safe), only the accent/background varies.
   ============================================ */
details.toggle.color-periwinkle {
    border-left: 4px solid var(--color-periwinkle);
    background: rgba(7, 67, 105, 0.07);
}

details.toggle.color-teal {
    border-left: 4px solid var(--color-teal);
    background: rgba(83, 87, 90, 0.07);
}

details.toggle.color-navy {
    border-left: 4px solid var(--color-navy);
    background: rgba(0, 104, 154, 0.07);
}

details.toggle.color-orange-red {
    border-left: 4px solid var(--color-orange-red);
    background: rgba(117, 161, 66, 0.07);
}

details.toggle.color-plum {
    border-left: 4px solid var(--color-plum);
    background: rgba(72, 174, 225, 0.07);
}

details.toggle.color-golden-yellow {
    border-left: 4px solid var(--color-golden-yellow);
    background: rgba(151, 209, 98, 0.08);
}

details.toggle.color-olive-green {
    border-left: 4px solid var(--color-olive-green);
    background: rgba(232, 185, 0, 0.08);
}

/* Stack of individually-colored dropdowns (e.g. one per dashboard) --
   tighter spacing than the default .toggle margin since these repeat. */
.toggle-stack details.toggle {
    margin: 0 0 0.65rem 0;
}

/* ============================================
   Section Title (large) -- for a sub-heading that needs to read as a
   bigger visual moment than its heading level would normally give it.
   Quarto/Pandoc wraps a heading + everything under it in a
   <section class="levelN ..."> and copies the heading's own classes onto
   that wrapper too -- so this must be scoped to the heading tag itself
   (h1-h4.section-title-lg), never the bare class, or the oversized font
   cascades to every descendant (accordions, tabs, list text) under it.
   ============================================ */
h1.section-title-lg,
h2.section-title-lg,
h3.section-title-lg,
h4.section-title-lg {
    font-size: 1.7rem !important;
    color: var(--color-navy) !important;
    font-weight: 800 !important;
}

/* ============================================
   Comparison Bars -- a simple accessible bar chart for a prior-year vs.
   current-year comparison, built from numbers already stated as real text
   elsewhere on the page (no chart library / R execution required).
   ============================================ */
.compare-bars {
    margin: 1.75rem 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.compare-bar-group-label {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-navy);
    margin-bottom: 0.6rem;
}

.compare-bar-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.55rem;
}

.compare-bar-row:last-child {
    margin-bottom: 0;
}

.compare-bar-tag {
    flex: 0 0 110px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-steel-blue);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.compare-bar-track {
    flex: 1;
    background: #eef1f0;
    border-radius: 999px;
    height: 26px;
    overflow: hidden;
    position: relative;
}

.compare-bar-fill {
    height: 100%;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.6rem;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.compare-bar-fill.prior {
    background: var(--color-teal);
}

.compare-bar-fill.current {
    background: var(--color-navy);
}

@media (max-width: 640px) {
    .compare-bar-tag {
        flex-basis: 82px;
        font-size: 0.7rem;
    }
}