/* ==========================================================================
   dbim-theme.css  -  DBIM v3 type scale (4.3.1, 4.3.2) and line height (4.5 iii)

   Desktop : H1 36 / H2 24 / H3 20 / P 16 (14 allowed) / small 12
   Mobile  : H1 24 / H2 20 / H3 16 / P 14 / small 12
   Line height: 1.2 - 1.5 x font size

   LOAD ORDER: this file must be linked AFTER layout.css and accessibility.css
   (they are linked in templates/partials/header.html). Section 17 "Compact
   footer" in layout.css sets the footer to 18px / 15px with line-heights of
   1.6 - 1.65, which is what the audit flagged. The rules below replace those.
   ========================================================================== */

/* ---------- 1. Type scale variables (desktop) ---------- */
:root {
    --dbim-h1: 2.25rem;   /* 36px */
    --dbim-h2: 1.5rem;    /* 24px */
    --dbim-h3: 1.25rem;   /* 20px */
    --dbim-p: 1rem;       /* 16px */
    --dbim-small: .75rem; /* 12px */
    --dbim-lh: 1.5;       /* allowed range 1.2 - 1.5 */

    /* keep the older variables used in layout.css / accessibility.css in sync */
    --fs-h1: var(--dbim-h1);
    --fs-h2: var(--dbim-h2);
    --fs-h3: var(--dbim-h3);
    --fs-p: var(--dbim-p);
}

/* ---------- 2. Type scale variables (mobile) ---------- */
@media (max-width: 767.98px) {
    :root {
        --dbim-h1: 1.5rem;    /* 24px */
        --dbim-h2: 1.25rem;   /* 20px */
        --dbim-h3: 1rem;      /* 16px */
        --dbim-p: .875rem;    /* 14px */
        --dbim-small: .75rem; /* 12px */
    }
}

/* ---------- 3. Base elements ----------
   :where() keeps these at the lowest specificity, so intentional utility
   classes (.lead, .small, .display-*) can still override them. */
body :where(h1) { font-size: var(--dbim-h1); line-height: 1.2; }
body :where(h2) { font-size: var(--dbim-h2); line-height: 1.3; }
body :where(h3) { font-size: var(--dbim-h3); line-height: 1.3; }
body :where(p, li, td, th, label, dd, dt) {
    font-size: var(--dbim-p);
    line-height: var(--dbim-lh);
}
small, .small { font-size: var(--dbim-small) !important; line-height: var(--dbim-lh); }

/* ---------- 4. Page content (#main) ---------- */
#main h1 { font-size: var(--dbim-h1); }
#main h2 { font-size: var(--dbim-h2); }
#main h3 { font-size: var(--dbim-h3); }
#main p, #main li { font-size: var(--dbim-p); line-height: var(--dbim-lh); }

/* ---------- 5. Footer (overrides layout.css section 17 "Compact footer") ----------
   `body .footer-bs ...` is more specific than the `.footer-bs ...` selectors
   in layout.css, so these win without needing !important. */
body .footer-bs h2,
body .footer-bs .b-footer-title {
    font-size: var(--dbim-h2);          /* was 1.15rem (18px) */
    line-height: 1.3;
}
body .footer-bs p,
body .footer-bs li,
body .footer-bs .b-footer-list li,
body .footer-bs .b-footer-mid p,
body .footer-bs .b-footer-lineage p,
body .footer-bs .b-footer-updated {
    font-size: var(--dbim-p);           /* was .92rem / .95rem / .9rem (about 15px) */
    line-height: var(--dbim-lh);        /* was 1.35 - 1.65 */
}

/* ---------- 6. Header and accessibility bar ----------
   Section labels are "small" text in DBIM (12px); they were .7rem (11px). */
body p.b-acc-heading { font-size: var(--dbim-small); line-height: var(--dbim-lh); }
body .b-header-subtitle { line-height: 1.3; }
body .b-header-subtitle-muted { font-size: var(--dbim-small); line-height: 1.3; }

/* Bootstrap utility classes keep working because section 3 uses :where() */