/* ============================================================
   DriveTruck.org — Base Theme Stylesheet
   ------------------------------------------------------------
   Layered on top of Bootstrap 5.3 via CSS custom-property
   overrides. No Sass compile step required.

   Sections:
     1. Design tokens (palette, type scale, spacing, radii)
     2. Bootstrap variable overrides
     3. Global element resets and typography
     4. Layout utilities (.dt-bg-*, .dt-text-*, .dt-border-*)
     5. Header / nav / state switcher
     6. Hero
     7. Stat bar
     8. State grid + state card
     9. CDL class card
    10. Endorsement badge
    11. Citation chip
    12. Practice-test components
    13. Study-guide article
    14. FAQ accordion
    15. Footer
    16. Animations + motion-reduce
    17. Print stylesheet
   ============================================================ */


/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
    /* Locked palette ------------------------------------------------ */
    --dt-navy:         #0A2647;   /* primary, headings, links */
    --dt-navy-deep:    #061A33;   /* hover/active darker variant */
    --dt-patriot-red:  #B22234;   /* CTAs, alerts */
    --dt-patriot-red-deep: #8A1A28; /* WCAG-safe variant on parchment */
    --dt-highway-gold: #FFB000;   /* highway-line yellow */
    --dt-highway-gold-soft: #FFC94A;
    --dt-route-green:  #1E5631;   /* success, correct answer */
    --dt-route-green-soft: #2E7D43;
    --dt-steel:        #2D3748;   /* body text */
    --dt-steel-soft:   #4A5568;   /* secondary text */
    --dt-parchment:    #FAF8F3;   /* page background */
    --dt-asphalt:      #1A1A1A;   /* footer / dark surfaces */
    --dt-cloud:        #F1F4F8;   /* card backgrounds */
    --dt-cloud-edge:   #DDE3EC;   /* card borders */

    /* Typography --------------------------------------------------- */
    --dt-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dt-font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
    --dt-font-cond:    "Oswald", "Arial Narrow", Impact, sans-serif;
    --dt-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Modular type scale (rem; base 1rem = 16px) ------------------- */
    --dt-fs-xs:    0.75rem;   /* 12px */
    --dt-fs-sm:    0.875rem;  /* 14px */
    --dt-fs-base:  1rem;      /* 16px */
    --dt-fs-md:    1.125rem;  /* 18px */
    --dt-fs-lg:    1.375rem;  /* 22px */
    --dt-fs-xl:    1.75rem;   /* 28px */
    --dt-fs-2xl:   2.25rem;   /* 36px */
    --dt-fs-3xl:   3rem;      /* 48px */

    /* Spacing (4px grid) ------------------------------------------- */
    --dt-sp-1:  0.25rem;
    --dt-sp-2:  0.5rem;
    --dt-sp-3:  0.75rem;
    --dt-sp-4:  1rem;
    --dt-sp-5:  1.5rem;
    --dt-sp-6:  2rem;
    --dt-sp-7:  3rem;
    --dt-sp-8:  4rem;

    /* Radii -------------------------------------------------------- */
    --dt-radius-sm: 4px;
    --dt-radius:    8px;
    --dt-radius-lg: 14px;
    --dt-radius-pill: 999px;

    /* Shadows (subtle, never neon) -------------------------------- */
    --dt-shadow-1: 0 1px 2px rgba(10, 38, 71, 0.06), 0 1px 3px rgba(10, 38, 71, 0.08);
    --dt-shadow-2: 0 4px 8px rgba(10, 38, 71, 0.08), 0 2px 4px rgba(10, 38, 71, 0.06);
    --dt-shadow-3: 0 10px 24px rgba(10, 38, 71, 0.12);

    /* Layout ------------------------------------------------------- */
    --dt-max-w: 1200px;
    --dt-focus-ring: 0 0 0 3px rgba(255, 176, 0, 0.55);

    /* Motion ------------------------------------------------------- */
    --dt-ease:   cubic-bezier(0.2, 0.7, 0.2, 1);
    --dt-dur-1:  150ms;
    --dt-dur-2:  280ms;
}


/* ============================================================
   2. Bootstrap variable overrides (CSS-only)
   ============================================================ */
:root,
[data-bs-theme="light"] {
    --bs-primary:        var(--dt-navy);
    --bs-primary-rgb:    10, 38, 71;
    --bs-secondary:      var(--dt-steel);
    --bs-secondary-rgb:  45, 55, 72;
    --bs-success:        var(--dt-route-green);
    --bs-success-rgb:    30, 86, 49;
    --bs-danger:         var(--dt-patriot-red);
    --bs-danger-rgb:     178, 34, 52;
    --bs-warning:        var(--dt-highway-gold);
    --bs-warning-rgb:    255, 176, 0;
    --bs-info:           #0E6BA8;
    --bs-info-rgb:       14, 107, 168;
    --bs-light:          var(--dt-parchment);
    --bs-dark:           var(--dt-asphalt);
    --bs-body-bg:        var(--dt-parchment);
    --bs-body-color:     var(--dt-steel);
    --bs-body-font-family: var(--dt-font-body);
    --bs-body-font-size: var(--dt-fs-base);
    --bs-link-color:     var(--dt-navy);
    --bs-link-hover-color: var(--dt-patriot-red-deep);
    --bs-border-color:   var(--dt-cloud-edge);
    --bs-heading-color:  var(--dt-navy);
    --bs-border-radius:  var(--dt-radius);
    --bs-border-radius-sm: var(--dt-radius-sm);
    --bs-border-radius-lg: var(--dt-radius-lg);
}


/* ============================================================
   3. Global element resets and typography
   ============================================================ */
html { scroll-behavior: smooth; }

body {
    font-family: var(--dt-font-body);
    font-size: var(--dt-fs-base);
    line-height: 1.55;
    color: var(--dt-steel);
    background-color: var(--dt-parchment);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dt-font-display);
    color: var(--dt-navy);
    line-height: 1.2;
    letter-spacing: -0.005em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: var(--dt-sp-3);
}
h1 { font-size: clamp(1.75rem, 4vw + 1rem, var(--dt-fs-3xl)); }
h2 { font-size: clamp(1.5rem, 2.4vw + 1rem, var(--dt-fs-2xl)); }
h3 { font-size: var(--dt-fs-xl); }
h4 { font-size: var(--dt-fs-lg); }
h5 { font-size: var(--dt-fs-md); }
h6 { font-size: var(--dt-fs-base); text-transform: uppercase; letter-spacing: 0.06em; }

.dt-h-cond {
    font-family: var(--dt-font-cond);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

p { margin: 0 0 var(--dt-sp-4); }
small, .small { font-size: var(--dt-fs-sm); }

a {
    color: var(--dt-navy);
    text-decoration: underline;
    text-decoration-color: rgba(10, 38, 71, 0.35);
    text-underline-offset: 2px;
    transition: color var(--dt-dur-1) var(--dt-ease),
                text-decoration-color var(--dt-dur-1) var(--dt-ease);
}
a:hover, a:focus {
    color: var(--dt-patriot-red-deep);
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--dt-highway-gold);
    outline-offset: 2px;
    border-radius: var(--dt-radius-sm);
}

hr { border-color: var(--dt-cloud-edge); opacity: 1; }

::selection { background: var(--dt-highway-gold); color: var(--dt-navy); }


/* ============================================================
   4. Layout utilities
   ============================================================ */
.dt-container { max-width: var(--dt-max-w); margin-left: auto; margin-right: auto; padding-left: var(--dt-sp-4); padding-right: var(--dt-sp-4); }

.dt-bg-parchment { background-color: var(--dt-parchment) !important; }
.dt-bg-cloud     { background-color: var(--dt-cloud) !important; }
.dt-bg-navy      { background-color: var(--dt-navy) !important; color: var(--dt-parchment); }
.dt-bg-asphalt   { background-color: var(--dt-asphalt) !important; color: var(--dt-parchment); }
.dt-bg-gold      { background-color: var(--dt-highway-gold) !important; color: var(--dt-navy); }

.dt-text-navy    { color: var(--dt-navy) !important; }
.dt-text-red     { color: var(--dt-patriot-red-deep) !important; }
.dt-text-green   { color: var(--dt-route-green) !important; }
.dt-text-steel   { color: var(--dt-steel) !important; }
.dt-text-soft    { color: var(--dt-steel-soft) !important; }
.dt-text-cloud   { color: var(--dt-cloud) !important; }

.dt-border-gold  { border: 2px solid var(--dt-highway-gold) !important; }
.dt-border-navy  { border: 1px solid var(--dt-navy) !important; }
.dt-border-soft  { border: 1px solid var(--dt-cloud-edge) !important; }

.dt-rule-gold {
    height: 4px;
    width: 56px;
    background: var(--dt-highway-gold);
    border-radius: 2px;
    margin: 0 0 var(--dt-sp-4);
}

.dt-section { padding: var(--dt-sp-7) 0; }
@media (min-width: 768px) {
    .dt-section { padding: var(--dt-sp-8) 0; }
}


/* ============================================================
   5. Header / primary nav / state switcher
   ============================================================ */
/* Top utility strip (above the navbar) */
.dt-utility-strip {
    background-color: var(--dt-navy);
    color: var(--dt-cloud);
    font-size: var(--dt-fs-xs);
    text-align: center;
    padding: 6px var(--dt-sp-3);
    letter-spacing: 0.01em;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dt-utility-strip a {
    color: var(--dt-highway-gold);
    text-decoration: none;
}
.dt-utility-strip a:hover {
    text-decoration: underline;
}

.dt-navbar {
    background-color: var(--dt-parchment);
    border-bottom: 1px solid var(--dt-cloud-edge);
    box-shadow: var(--dt-shadow-1);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.dt-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-sp-2);
    text-decoration: none;
    color: var(--dt-navy);
    font-family: var(--dt-font-cond);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 1.25rem;
}
.dt-navbar__brand img,
.dt-navbar__brand svg { height: 40px; width: auto; display: block; }
.dt-navbar__brand:hover { text-decoration: none; color: var(--dt-navy); }

.dt-navbar__links { display: flex; align-items: center; gap: var(--dt-sp-4); }
.dt-navbar__links a {
    color: var(--dt-navy);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--dt-fs-sm);
    padding: var(--dt-sp-2) var(--dt-sp-3);
    border-radius: var(--dt-radius-sm);
}
.dt-navbar__links a:hover,
.dt-navbar__links a[aria-current="page"] {
    background: var(--dt-cloud);
    color: var(--dt-patriot-red-deep);
}

/* State switcher widget */
.dt-state-switcher {
    position: relative;
    display: inline-block;
}
.dt-state-switcher > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--dt-sp-2);
    padding: var(--dt-sp-2) var(--dt-sp-4);
    background: var(--dt-navy);
    color: var(--dt-parchment);
    border-radius: var(--dt-radius-pill);
    font-weight: 600;
    font-size: var(--dt-fs-sm);
    min-height: 44px;
    border: 2px solid transparent;
}
.dt-state-switcher > summary::-webkit-details-marker { display: none; }
.dt-state-switcher > summary:hover { background: var(--dt-navy-deep); }
.dt-state-switcher[open] > summary { border-color: var(--dt-highway-gold); }
.dt-state-switcher__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(480px, calc(100vw - 24px));
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius-lg);
    box-shadow: var(--dt-shadow-3);
    padding: var(--dt-sp-4);
    z-index: 1040;
}
.dt-state-switcher__filter {
    width: 100%;
    padding: var(--dt-sp-3) var(--dt-sp-4);
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius);
    font-size: var(--dt-fs-base);
    margin-bottom: var(--dt-sp-4);
}
.dt-state-switcher__filter:focus { border-color: var(--dt-navy); outline: 2px solid var(--dt-highway-gold); outline-offset: 1px; }
.dt-state-switcher__region {
    margin-bottom: var(--dt-sp-4);
}
.dt-state-switcher__region h6 {
    font-family: var(--dt-font-cond);
    color: var(--dt-steel-soft);
    font-size: var(--dt-fs-xs);
    margin-bottom: var(--dt-sp-2);
    letter-spacing: 0.1em;
}
.dt-state-switcher__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--dt-sp-1);
    list-style: none;
    padding: 0;
    margin: 0;
}
.dt-state-switcher__list a {
    display: block;
    padding: var(--dt-sp-2) var(--dt-sp-3);
    border-radius: var(--dt-radius-sm);
    text-decoration: none;
    color: var(--dt-navy);
    font-size: var(--dt-fs-sm);
    min-height: 36px;
}
.dt-state-switcher__list a:hover { background: var(--dt-cloud); color: var(--dt-patriot-red-deep); }

/* Sub-nav pill bar */
.dt-subnav {
    background: var(--dt-cloud);
    border-bottom: 1px solid var(--dt-cloud-edge);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dt-subnav__inner {
    display: flex;
    gap: var(--dt-sp-2);
    padding: var(--dt-sp-3) var(--dt-sp-4);
    white-space: nowrap;
}
.dt-subnav__pill {
    display: inline-flex;
    align-items: center;
    padding: var(--dt-sp-2) var(--dt-sp-4);
    border-radius: var(--dt-radius-pill);
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    color: var(--dt-navy);
    text-decoration: none;
    font-size: var(--dt-fs-sm);
    font-weight: 600;
    min-height: 36px;
}
.dt-subnav__pill:hover { border-color: var(--dt-navy); color: var(--dt-navy); }
.dt-subnav__pill[aria-current="page"] {
    background: var(--dt-navy);
    color: var(--dt-parchment);
    border-color: var(--dt-navy);
    box-shadow: inset 0 -3px 0 var(--dt-highway-gold);
}


/* ============================================================
   6. Hero
   ============================================================ */
.dt-hero {
    position: relative;
    background:
        linear-gradient(135deg, rgba(10,38,71,0.04), rgba(255,176,0,0.05) 60%, rgba(178,34,52,0.04)),
        var(--dt-parchment);
    border-bottom: 1px solid var(--dt-cloud-edge);
    padding: var(--dt-sp-7) 0 var(--dt-sp-8);
    overflow: hidden;
}
.dt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-sp-2);
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    color: var(--dt-navy);
    font-family: var(--dt-font-cond);
    font-size: var(--dt-fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: var(--dt-sp-1) var(--dt-sp-3);
    border-radius: var(--dt-radius-pill);
    margin-bottom: var(--dt-sp-4);
}
.dt-hero__eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--dt-route-green);
}
.dt-hero h1 {
    font-family: var(--dt-font-display);
    color: var(--dt-navy);
    margin-bottom: var(--dt-sp-4);
}
.dt-hero p.lead {
    font-size: var(--dt-fs-md);
    color: var(--dt-steel);
    margin-bottom: var(--dt-sp-5);
    max-width: 56ch;
}
.dt-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-sp-3);
    align-items: center;
    margin-bottom: var(--dt-sp-5);
}
.dt-hero__image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Primary CTA */
.dt-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dt-sp-2);
    background: var(--dt-patriot-red);
    color: #fff;
    border: 2px solid var(--dt-patriot-red);
    padding: var(--dt-sp-3) var(--dt-sp-5);
    border-radius: var(--dt-radius);
    font-weight: 700;
    font-size: var(--dt-fs-md);
    min-height: 48px;
    min-width: 44px;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dt-dur-1) var(--dt-ease), background var(--dt-dur-1) var(--dt-ease);
}
.dt-btn-primary:hover,
.dt-btn-primary:focus {
    background: var(--dt-patriot-red-deep);
    border-color: var(--dt-patriot-red-deep);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.dt-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dt-sp-2);
    background: transparent;
    color: var(--dt-navy);
    border: 2px solid var(--dt-navy);
    padding: var(--dt-sp-3) var(--dt-sp-5);
    border-radius: var(--dt-radius);
    font-weight: 700;
    min-height: 48px;
    text-decoration: none;
}
.dt-btn-secondary:hover { background: var(--dt-navy); color: #fff; text-decoration: none; }

.dt-btn-ghost {
    background: transparent;
    border: 1px solid var(--dt-cloud-edge);
    color: var(--dt-navy);
    padding: var(--dt-sp-2) var(--dt-sp-4);
    border-radius: var(--dt-radius);
    font-weight: 600;
    text-decoration: none;
}
.dt-btn-ghost:hover { border-color: var(--dt-navy); background: #fff; }


/* ============================================================
   7. Stat bar
   ============================================================ */
.dt-stat-bar {
    background: var(--dt-navy);
    color: var(--dt-parchment);
    padding: var(--dt-sp-6) 0;
}
.dt-stat-bar__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dt-sp-5);
    text-align: center;
}
@media (min-width: 768px) {
    .dt-stat-bar__grid { grid-template-columns: repeat(4, 1fr); }
}
.dt-stat-bar__item .icon {
    display: inline-flex;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255, 176, 0, 0.15);
    color: var(--dt-highway-gold);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--dt-sp-2);
    font-size: 1.5rem;
}
.dt-stat-bar__big {
    font-family: var(--dt-font-cond);
    font-size: var(--dt-fs-xl);
    line-height: 1.1;
    color: #fff;
    display: block;
    margin-bottom: var(--dt-sp-1);
}
.dt-stat-bar__small {
    font-size: var(--dt-fs-sm);
    color: rgba(250, 248, 243, 0.78);
}
.dt-stat-bar__proof {
    text-align: center;
    font-style: italic;
    font-size: var(--dt-fs-sm);
    color: rgba(250, 248, 243, 0.78);
    margin-top: var(--dt-sp-5);
    margin-bottom: 0;
}
.dt-stat-bar__proof a { color: var(--dt-highway-gold); }


/* ============================================================
   8. State grid + state card
   ============================================================ */
.dt-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--dt-sp-3);
}
.dt-state-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--dt-sp-3) var(--dt-sp-4);
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius);
    text-decoration: none;
    color: var(--dt-navy);
    min-height: 76px;
    transition: transform var(--dt-dur-1) var(--dt-ease),
                border-color var(--dt-dur-1) var(--dt-ease),
                box-shadow var(--dt-dur-1) var(--dt-ease);
}
.dt-state-card__name {
    font-weight: 700;
    font-size: var(--dt-fs-base);
    line-height: 1.2;
}
.dt-state-card__abbr {
    font-family: var(--dt-font-cond);
    font-size: var(--dt-fs-xs);
    color: var(--dt-steel-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: var(--dt-sp-1);
}
.dt-state-card:hover {
    transform: translateY(-2px);
    border-color: var(--dt-navy);
    box-shadow: var(--dt-shadow-2);
    text-decoration: none;
    color: var(--dt-navy);
}
.dt-state-card:focus-visible { box-shadow: var(--dt-focus-ring); border-color: var(--dt-navy); }


/* ============================================================
   9. CDL class card (A, B, C)
   ============================================================ */
.dt-cdl-class-card {
    display: flex;
    flex-direction: column;
    gap: var(--dt-sp-3);
    padding: var(--dt-sp-5);
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-top: 6px solid var(--dt-navy);
    border-radius: var(--dt-radius-lg);
    text-decoration: none;
    color: var(--dt-steel);
    height: 100%;
    transition: transform var(--dt-dur-1) var(--dt-ease),
                box-shadow var(--dt-dur-1) var(--dt-ease);
}
.dt-cdl-class-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dt-shadow-3);
    text-decoration: none;
}
.dt-cdl-class-card--a { border-top-color: var(--dt-patriot-red); }
.dt-cdl-class-card--b { border-top-color: var(--dt-navy); }
.dt-cdl-class-card--c { border-top-color: var(--dt-route-green); }

.dt-cdl-class-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    background: var(--dt-navy);
    color: #fff;
    font-family: var(--dt-font-cond);
    font-size: 1.75rem;
    font-weight: 700;
    border-radius: var(--dt-radius);
}
.dt-cdl-class-card--a .dt-cdl-class-card__badge { background: var(--dt-patriot-red); }
.dt-cdl-class-card--c .dt-cdl-class-card__badge { background: var(--dt-route-green); }

.dt-cdl-class-card h3 { margin-bottom: var(--dt-sp-1); }
.dt-cdl-class-card__weight {
    font-family: var(--dt-font-cond);
    font-size: var(--dt-fs-sm);
    color: var(--dt-steel-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dt-cdl-class-card ul {
    margin: 0; padding-left: var(--dt-sp-4);
    color: var(--dt-steel);
}
.dt-cdl-class-card li { margin-bottom: var(--dt-sp-1); }
.dt-cdl-class-card__cta {
    margin-top: auto;
    font-weight: 700;
    color: var(--dt-patriot-red-deep);
    text-decoration: underline;
}


/* ============================================================
   10. Endorsement badge
   ============================================================ */
.dt-endorsement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    background: var(--dt-highway-gold);
    color: var(--dt-navy);
    font-family: var(--dt-font-cond);
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    border: 3px solid var(--dt-navy);
    box-shadow: var(--dt-shadow-1);
}
.dt-endorsement-badge--h { background: var(--dt-patriot-red); color: #fff; border-color: var(--dt-navy); }
.dt-endorsement-badge--n { background: var(--dt-route-green); color: #fff; border-color: var(--dt-navy); }
.dt-endorsement-badge--p { background: var(--dt-highway-gold); color: var(--dt-navy); }
.dt-endorsement-badge--s { background: var(--dt-navy); color: var(--dt-highway-gold); border-color: var(--dt-highway-gold); }
.dt-endorsement-badge--t { background: #fff; color: var(--dt-navy); border-color: var(--dt-navy); }
.dt-endorsement-badge--x { background: var(--dt-navy-deep); color: var(--dt-highway-gold); border-color: var(--dt-highway-gold); }

.dt-endorsement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--dt-sp-4);
}
.dt-endorsement-card {
    display: flex;
    align-items: flex-start;
    gap: var(--dt-sp-3);
    padding: var(--dt-sp-4);
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius);
    text-decoration: none;
    color: var(--dt-steel);
}
.dt-endorsement-card:hover {
    border-color: var(--dt-navy);
    box-shadow: var(--dt-shadow-2);
    text-decoration: none;
}
.dt-endorsement-card__title {
    font-weight: 700;
    color: var(--dt-navy);
    font-size: var(--dt-fs-md);
    margin-bottom: var(--dt-sp-1);
}
.dt-endorsement-card__desc {
    font-size: var(--dt-fs-sm);
    color: var(--dt-steel-soft);
    margin: 0;
}


/* ============================================================
   11. Citation chip
   ============================================================ */
.dt-citation-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--dt-navy);
    color: var(--dt-navy);
    font-size: var(--dt-fs-xs);
    font-weight: 600;
    padding: 3px 10px 3px 8px;
    border-radius: var(--dt-radius-pill);
    text-decoration: none;
    line-height: 1.4;
    vertical-align: baseline;
    white-space: nowrap;
    transition: background var(--dt-dur-1) var(--dt-ease), color var(--dt-dur-1) var(--dt-ease);
}
.dt-citation-chip::before {
    /* link icon — pure CSS so we do not depend on Bootstrap Icons at runtime */
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z'/><path d='M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z'/><path d='M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z'/></svg>") no-repeat center / contain;
    flex-shrink: 0;
}
.dt-citation-chip:hover,
.dt-citation-chip:focus {
    background: var(--dt-navy);
    color: #fff;
    text-decoration: none;
}
.dt-citation-chip__source {
    font-family: var(--dt-font-mono);
    font-weight: 600;
    letter-spacing: 0.01em;
}


/* ============================================================
   12. Practice-test components
   ============================================================ */
.dt-test-shell {
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius-lg);
    box-shadow: var(--dt-shadow-1);
    padding: var(--dt-sp-5);
}
.dt-test-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-sp-4);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dt-sp-4);
    padding-bottom: var(--dt-sp-3);
    border-bottom: 1px solid var(--dt-cloud-edge);
}
.dt-test-meta__progress {
    flex: 1 1 200px;
    height: 10px;
    background: var(--dt-cloud);
    border-radius: var(--dt-radius-pill);
    overflow: hidden;
}
.dt-test-meta__progress > span {
    display: block;
    height: 100%;
    background: var(--dt-route-green);
    transition: width 280ms var(--dt-ease);
}
.dt-test-meta__counter {
    font-family: var(--dt-font-cond);
    font-size: var(--dt-fs-md);
    color: var(--dt-navy);
}
.dt-test-meta__timer {
    font-family: var(--dt-font-mono);
    font-size: var(--dt-fs-md);
    color: var(--dt-steel);
    background: var(--dt-cloud);
    padding: 4px 10px;
    border-radius: var(--dt-radius-sm);
}

.dt-test-question {
    font-family: var(--dt-font-display);
    font-size: var(--dt-fs-lg);
    color: var(--dt-navy);
    line-height: 1.35;
    margin: var(--dt-sp-4) 0 var(--dt-sp-5);
}

.dt-test-options {
    display: flex;
    flex-direction: column;
    gap: var(--dt-sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
}
.dt-test-option {
    display: flex;
    align-items: flex-start;
    gap: var(--dt-sp-3);
    padding: var(--dt-sp-4);
    background: #fff;
    border: 2px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius);
    cursor: pointer;
    color: var(--dt-steel);
    transition: border-color var(--dt-dur-1) var(--dt-ease), background var(--dt-dur-1) var(--dt-ease);
    min-height: 56px;
}
.dt-test-option:hover { border-color: var(--dt-navy); }
.dt-test-option__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--dt-cloud);
    color: var(--dt-navy);
    font-family: var(--dt-font-cond);
    font-weight: 700;
    font-size: var(--dt-fs-sm);
    flex-shrink: 0;
}
.dt-test-option__text { flex: 1; }
.dt-test-option--selected {
    border-color: var(--dt-navy);
    background: var(--dt-cloud);
}
.dt-test-option--correct {
    border-color: var(--dt-route-green);
    background: rgba(30, 86, 49, 0.07);
}
.dt-test-option--correct .dt-test-option__letter {
    background: var(--dt-route-green); color: #fff;
}
.dt-test-option--incorrect {
    border-color: var(--dt-patriot-red);
    background: rgba(178, 34, 52, 0.07);
}
.dt-test-option--incorrect .dt-test-option__letter {
    background: var(--dt-patriot-red); color: #fff;
}

.dt-test-feedback {
    margin-top: var(--dt-sp-4);
    padding: var(--dt-sp-4);
    border-radius: var(--dt-radius);
    border-left: 6px solid var(--dt-cloud-edge);
    background: var(--dt-cloud);
}
.dt-test-feedback h4 {
    font-family: var(--dt-font-cond);
    font-size: var(--dt-fs-base);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dt-navy);
    margin-bottom: var(--dt-sp-2);
}
.dt-test-feedback-correct {
    border-left-color: var(--dt-route-green);
    background: rgba(30, 86, 49, 0.06);
}
.dt-test-feedback-correct h4 { color: var(--dt-route-green); }
.dt-test-feedback-incorrect {
    border-left-color: var(--dt-patriot-red);
    background: rgba(178, 34, 52, 0.06);
}
.dt-test-feedback-incorrect h4 { color: var(--dt-patriot-red-deep); }
.dt-test-feedback p:last-child { margin-bottom: 0; }


/* ============================================================
   13. Study-guide article
   ============================================================ */
.dt-study-guide-article {
    max-width: 72ch;
    margin: 0 auto;
    color: var(--dt-steel);
    font-size: var(--dt-fs-md);
    line-height: 1.65;
}
.dt-study-guide-article h2 {
    margin-top: var(--dt-sp-7);
    padding-top: var(--dt-sp-4);
    border-top: 1px solid var(--dt-cloud-edge);
}
.dt-study-guide-article h3 { margin-top: var(--dt-sp-5); }
.dt-study-guide-article ul,
.dt-study-guide-article ol { margin-bottom: var(--dt-sp-5); padding-left: var(--dt-sp-5); }
.dt-study-guide-article li { margin-bottom: var(--dt-sp-2); }
.dt-study-guide-article blockquote {
    margin: var(--dt-sp-5) 0;
    padding: var(--dt-sp-4) var(--dt-sp-5);
    background: var(--dt-cloud);
    border-left: 6px solid var(--dt-highway-gold);
    border-radius: var(--dt-radius);
    font-style: italic;
    color: var(--dt-steel);
}
.dt-study-guide-article .dt-stat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--dt-radius-sm);
    background: var(--dt-cloud);
    font-family: var(--dt-font-mono);
    font-weight: 600;
    color: var(--dt-navy);
}
.dt-study-guide-article table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--dt-sp-5) 0;
    font-size: var(--dt-fs-base);
}
.dt-study-guide-article th,
.dt-study-guide-article td {
    text-align: left;
    padding: var(--dt-sp-3) var(--dt-sp-3);
    border-bottom: 1px solid var(--dt-cloud-edge);
}
.dt-study-guide-article th {
    background: var(--dt-cloud);
    color: var(--dt-navy);
    font-family: var(--dt-font-cond);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--dt-fs-sm);
}

/* Step-list for "how to get CDL" */
.dt-step-list { list-style: none; padding: 0; margin: 0; counter-reset: dt-step; }
.dt-step-list > li {
    counter-increment: dt-step;
    position: relative;
    padding: var(--dt-sp-5) var(--dt-sp-5) var(--dt-sp-5) calc(var(--dt-sp-7) + var(--dt-sp-3));
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-left: 6px solid var(--dt-highway-gold);
    border-radius: var(--dt-radius);
    margin-bottom: var(--dt-sp-4);
}
.dt-step-list > li::before {
    content: counter(dt-step);
    position: absolute;
    left: var(--dt-sp-4);
    top: var(--dt-sp-5);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--dt-navy);
    color: #fff;
    font-family: var(--dt-font-cond);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dt-step-list h3 { margin: 0 0 var(--dt-sp-2); font-size: var(--dt-fs-lg); }
.dt-step-list p:last-child { margin-bottom: 0; }


/* ============================================================
   14. FAQ accordion
   ============================================================ */
.dt-faq-accordion details {
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius);
    margin-bottom: var(--dt-sp-3);
    overflow: hidden;
}
.dt-faq-accordion summary {
    list-style: none;
    cursor: pointer;
    padding: var(--dt-sp-4) var(--dt-sp-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dt-sp-4);
    font-family: var(--dt-font-display);
    font-weight: 700;
    color: var(--dt-navy);
    font-size: var(--dt-fs-md);
}
.dt-faq-accordion summary::-webkit-details-marker { display: none; }
.dt-faq-accordion summary::after {
    content: "+";
    font-family: var(--dt-font-cond);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--dt-patriot-red-deep);
    transition: transform var(--dt-dur-1) var(--dt-ease);
}
.dt-faq-accordion details[open] summary::after { content: "−"; }
.dt-faq-accordion .dt-faq-accordion__body {
    padding: 0 var(--dt-sp-5) var(--dt-sp-4);
    color: var(--dt-steel);
}


/* ============================================================
   14b. Trust badges (replaces homepage testimonials)
   ============================================================ */
.dt-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dt-sp-4);
}
@media (min-width: 768px) { .dt-trust-grid { grid-template-columns: repeat(4, 1fr); } }
.dt-trust-badge {
    display: flex;
    flex-direction: column;
    gap: var(--dt-sp-2);
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius);
    padding: var(--dt-sp-4);
    text-align: center;
}
.dt-trust-badge .icon {
    width: 40px; height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--dt-highway-gold);
    color: var(--dt-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.dt-trust-badge .label {
    font-family: var(--dt-font-cond);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dt-navy);
    font-size: var(--dt-fs-sm);
}
.dt-trust-badge .desc { font-size: var(--dt-fs-sm); color: var(--dt-steel-soft); margin: 0; }


/* ============================================================
   14c. Testimonial card (kept available for class/endorsement
        pages later — not used on homepage per project decision)
   ============================================================ */
.dt-testimonial-card {
    background: #fff;
    border: 1px solid var(--dt-cloud-edge);
    border-radius: var(--dt-radius);
    padding: var(--dt-sp-5);
    box-shadow: var(--dt-shadow-1);
}
.dt-testimonial-card__quote {
    font-family: var(--dt-font-display);
    font-size: var(--dt-fs-md);
    color: var(--dt-navy);
    margin: 0 0 var(--dt-sp-3);
    line-height: 1.5;
}
.dt-testimonial-card__author {
    font-weight: 700;
    color: var(--dt-steel);
}
.dt-testimonial-card__meta {
    font-size: var(--dt-fs-sm);
    color: var(--dt-steel-soft);
}


/* ============================================================
   15. Footer
   ============================================================ */
.dt-footer {
    background: var(--dt-asphalt);
    color: rgba(241, 244, 248, 0.85);
    padding: var(--dt-sp-7) 0 var(--dt-sp-5);
    margin-top: auto;
    font-size: var(--dt-fs-sm);
}
.dt-footer h6 {
    color: #fff;
    font-family: var(--dt-font-cond);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--dt-fs-xs);
    margin-bottom: var(--dt-sp-3);
}
.dt-footer a {
    color: rgba(241, 244, 248, 0.85);
    text-decoration: none;
}
.dt-footer a:hover { color: var(--dt-highway-gold); }
.dt-footer ul { list-style: none; padding: 0; margin: 0; }
.dt-footer li { margin-bottom: var(--dt-sp-2); }
.dt-footer__states {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px var(--dt-sp-3);
}
@media (min-width: 768px) { .dt-footer__states { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .dt-footer__states { grid-template-columns: repeat(5, 1fr); } }
.dt-footer__bottom {
    margin-top: var(--dt-sp-6);
    padding-top: var(--dt-sp-4);
    border-top: 1px solid rgba(241, 244, 248, 0.15);
    font-size: var(--dt-fs-xs);
    color: rgba(241, 244, 248, 0.7);
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-sp-3);
    align-items: center;
    justify-content: space-between;
}
.dt-footer__disclaimer { max-width: 70ch; line-height: 1.5; }


/* ============================================================
   16. Animations + motion-reduce
   ============================================================ */
@keyframes dtFadeIn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.dt-fadein { animation: dtFadeIn 0.6s var(--dt-ease) both; }
.dt-fadein-2 { animation: dtFadeIn 0.6s var(--dt-ease) 0.12s both; }
.dt-fadein-3 { animation: dtFadeIn 0.6s var(--dt-ease) 0.24s both; }

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


/* ============================================================
   17. Print stylesheet — study guides + cheat sheets
   ============================================================ */
@media print {
    :root { --dt-parchment: #fff; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .dt-navbar, .dt-subnav, .dt-footer, .dt-stat-bar, .dt-hero__cta,
    .dt-state-switcher, .dt-btn-primary, .dt-btn-secondary,
    .dt-state-grid, .dt-faq-accordion summary::after { display: none !important; }
    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    .dt-citation-chip {
        border: 1px solid #000; color: #000; background: #fff;
    }
    .dt-citation-chip::before { background-color: #000; }
    .dt-study-guide-article, .dt-step-list > li,
    .dt-test-feedback, .dt-trust-badge { page-break-inside: avoid; }
    h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
    .dt-step-list > li::before { background: #000; color: #fff; }
    .dt-faq-accordion details { border: 1px solid #000; }
    .dt-faq-accordion details[open] .dt-faq-accordion__body,
    .dt-faq-accordion .dt-faq-accordion__body { display: block !important; padding: 8pt; }
    .dt-faq-accordion summary { font-weight: 700; padding: 6pt 0; }
}