/*
Theme Name: KNDI
Theme URI: https://www.kndi.institute/
Author: Kenya Nutritionists and Dieticians Institute
Description: Hand-written theme for the Kenya Nutritionists and Dieticians Institute.
             No frameworks, no external requests of any kind - every byte, fonts
             included, is served from this site. Replaces a 2019 theme and roughly
             twenty plugins, two of them commercial navigation plugins, after the
             September 2026 incident. Design tokens carry their WCAG contrast ratios as
             comments; the brand amber (#dd9933) is never used for text on a light
             ground because it measures 2.4:1.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary - Kenya Nutritionists and Dieticians Institute
Text Domain: kndi
*/

/* Generated from docs/theme-design/mock.html by scripts/build_theme_assets.py.
   Edit the mock and re-run, or edit here and keep the mock in step - but do not
   diverge silently. Mock-only rules (captions, the theme preview button, swatches)
   are stripped automatically. */


/* FONTS:START - self-hosted Roboto, matching the OSP portal's typeface.
   Apache License 2.0. Variable weight 300-700 in a single file per subset.
   font-display:swap so text paints immediately in the fallback and reflows once. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* FONTS:END */

/* TOKENS:START */
:root {
  color-scheme: light dark;

  /* Colour — light is the default for visitors with no preference.
     Ratios are WCAG 2.x contrast, measured against the ground named. */
  --c-amber: #dd9933;        /* Brand anchor: rules, fills, active states, icons. 2.4:1 on white —
                                NEVER text on a light ground, at any size (fails even the 3:1 large-text rule). */
  --c-amber-hover: #c4801c;  /* Hover fill for amber buttons */
  --c-on-amber: #1c1a17;     /* Text on --c-amber: 7.2:1 · on --c-amber-hover: 5.3:1 */
  --c-amber-text: #8a5700;   /* Amber-coloured TEXT & links: 6.1:1 on --c-bg · 5.5:1 on --c-surface · 5.4:1 on --c-amber-tint */
  --c-amber-tint: #fbefdc;   /* Quiet highlight ground. --c-ink on it: 15.3:1 */
  --c-ink: #1c1a17;          /* Body text: 17.4:1 on --c-bg · 15.8:1 on --c-surface */
  --c-ink-muted: #5c574f;    /* Secondary text: 7.2:1 on --c-bg · 6.5:1 on --c-surface */
  --c-bg: #ffffff;
  --c-surface: #f6f4ef;
  --c-line: #d9d4ca;         /* Decorative dividers only — never the sole boundary of a control */
  --c-line-strong: #8a847a;  /* Control borders: 3.7:1 on --c-bg · 3.4:1 on --c-surface (≥3:1 non-text) */
  --c-error: #a8261b;        /* Error text & borders: 7.1:1 on --c-bg · 6.1:1 on --c-error-tint */
  --c-error-tint: #fbeae8;
  --c-focus: #8a5700;        /* Focus ring: 6.1:1 on --c-bg */
  --c-footer-bg: #1c1a17;
  --c-footer-ink: #ece8e1;   /* 14.2:1 on --c-footer-bg */
  --c-footer-muted: #b0a99e; /* 7.4:1 on --c-footer-bg */
  --c-footer-accent: #dd9933;/* Amber IS legal as text here: 7.2:1 on --c-footer-bg */
  --c-overlay: rgb(28 26 23 / .62);
  --c-mint-tint: #e8ece0;    /* Front-page card fill. --c-ink on it: 14.5:1 · --c-amber-text: 5.1:1 */
  --c-peach-tint: #f2dfce;   /* Front-page card fill. --c-ink on it: 13.4:1 · --c-amber-text: 4.7:1 */

  /* Type — system stacks only, no network fonts */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; /* system stack, no font file - tokens.css */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .8125rem;   /* 13px — meta only */
  --fs-sm: .875rem;    /* 14px */
  --fs-base: 1rem;     /* 16px; body steps to 17px at ≥64em */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.625rem);
  --lh-body: 1.6;
  --lh-tight: 1.2;
  --measure: 68ch;

  /* Space — 4px base */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;  --sp-7: 3rem;   --sp-8: 4rem;
  --gutter: 1rem;            /* 16px minimum; 24px ≥40em; 32px ≥64em */
  --container: 74rem;
  --tap: 2.75rem;            /* 44px minimum target */

  /* Shape */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px; /* Front-page cards only (docs/screengrab.JPG) - every other component stays 2-4px. */
  --r-pill: 999px;
  --bw: 1px;
  --bw-strong: 2px;
  --bw-rule: 4px;            /* the amber "ribbon" rule */

  /* Elevation — used only for things that float */
  --sh-raised: 0 1px 2px rgb(28 26 23 / .08);
  --sh-overlay: 0 12px 32px rgb(28 26 23 / .18);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --c-amber: #dd9933;       /* Amber on --c-bg: 7.6:1 — legal as text in dark mode */
    --c-amber-hover: #e8ab52;
    --c-on-amber: #1c1a17;    /* 7.2:1 on amber */
    --c-amber-text: #dd9933;  /* 7.6:1 on --c-bg · 7.0:1 on --c-surface · 6.3:1 on --c-amber-tint */
    --c-amber-tint: #2e2415;  /* --c-ink on it: 12.5:1 */
    --c-ink: #ece8e1;         /* 15.1:1 on --c-bg · 13.8:1 on --c-surface */
    --c-ink-muted: #b0a99e;   /* 7.9:1 on --c-bg · 7.2:1 on --c-surface */
    --c-bg: #151412;
    --c-surface: #1f1d1a;
    --c-line: #3a3631;
    --c-line-strong: #7a746a; /* 4.0:1 on --c-bg · 3.6:1 on --c-surface */
    --c-error: #ff8a7a;       /* 8.0:1 on --c-bg */
    --c-error-tint: #3a1d19;
    --c-focus: #dd9933;       /* 7.6:1 on --c-bg */
    --c-footer-bg: #0e0d0c;
    --c-footer-ink: #ece8e1;  /* 16:1 */
    --c-footer-muted: #b0a99e;/* 8.4:1 */
    --c-overlay: rgb(0 0 0 / .72);
    --c-mint-tint: #1e2418;   /* Front-page card fill. --c-ink on it: 13.0:1 · --c-amber: 6.6:1 */
    --c-peach-tint: #2e2015;  /* Front-page card fill. --c-ink on it: 12.9:1 · --c-amber: 6.5:1 */
    --sh-raised: 0 1px 2px rgb(0 0 0 / .4);
    --sh-overlay: 0 12px 32px rgb(0 0 0 / .6);
  }
}
/* Optional hook for a future manual switch (used by this mock's preview button). Same values as above. */
:root[data-theme="dark"] {
  --c-amber: #dd9933; --c-amber-hover: #e8ab52; --c-on-amber: #1c1a17; --c-amber-text: #dd9933;
  --c-amber-tint: #2e2415; --c-ink: #ece8e1; --c-ink-muted: #b0a99e; --c-bg: #151412; --c-surface: #1f1d1a;
  --c-line: #3a3631; --c-line-strong: #7a746a; --c-error: #ff8a7a; --c-error-tint: #3a1d19; --c-focus: #dd9933;
  --c-footer-bg: #0e0d0c; --c-footer-ink: #ece8e1; --c-footer-muted: #b0a99e; --c-overlay: rgb(0 0 0 / .72);
  --c-mint-tint: #1e2418; --c-peach-tint: #2e2015;
  --sh-raised: 0 1px 2px rgb(0 0 0 / .4); --sh-overlay: 0 12px 32px rgb(0 0 0 / .6);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (min-width: 40em) { :root { --gutter: 1.5rem; } }
@media (min-width: 64em) { :root { --gutter: 2rem; } }
/* TOKENS:END */

/* ================================================================
   1. ELEMENT LEVEL — safe for builder-generated markup
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: var(--fs-base)/var(--lh-body) var(--font-sans);
  overflow-wrap: break-word;
}
@media (min-width: 64em) { body { font-size: 1.0625rem; } }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-family: var(--font-sans); }
h5, h6 { font-size: var(--fs-base); font-family: var(--font-sans); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.5em; }
li + li { margin-top: var(--sp-1); }
li::marker { color: var(--c-ink-muted); }
dl { margin: 0 0 var(--sp-4); }
dt { font-weight: 700; }
dd { margin: 0 0 var(--sp-3); }
strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
mark { background: var(--c-amber-tint); color: var(--c-ink); padding: 0 .15em; box-shadow: inset 0 -2px 0 var(--c-amber); }
hr { border: 0; height: var(--bw); background: var(--c-line); margin: var(--sp-6) 0; }
img, video, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
svg { overflow: hidden; }
figure { margin: 0 0 var(--sp-5); }
figcaption { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-top: var(--sp-2); }
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; background: var(--c-surface); padding: .1em .3em; border-radius: var(--r-sm); }
pre { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--c-surface); border: var(--bw) solid var(--c-line); padding: var(--sp-4); overflow-x: auto; margin: 0 0 var(--sp-4); }
pre code { background: none; padding: 0; }
blockquote { margin: 0 0 var(--sp-5); padding: var(--sp-1) 0 var(--sp-1) var(--sp-5); border-left: var(--bw-rule) solid var(--c-amber); font-family: var(--font-serif); font-size: var(--fs-md); }
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; font: normal var(--fs-sm)/1.4 var(--font-sans); color: var(--c-ink-muted); margin-top: var(--sp-2); }

a { color: var(--c-amber-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--c-ink); text-decoration-thickness: 2px; }
a:visited { color: var(--c-amber-text); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--c-amber); color: var(--c-on-amber); }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; padding: 0 0 var(--sp-2); }
th, td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--c-line); }
thead th { background: var(--c-surface); border-bottom: var(--bw-strong) solid var(--c-ink); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
tbody th { font-weight: 600; }

button, input, select, textarea { font: inherit; color: inherit; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  display: block; width: 100%; min-height: var(--tap);
  padding: .5rem .75rem;
  background: var(--c-bg); color: var(--c-ink);
  border: var(--bw-strong) solid var(--c-line-strong); border-radius: var(--r-sm);
}
textarea { min-height: 8rem; resize: vertical; }
select { appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--c-ink); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--c-amber-text); margin: .15rem 0 0; flex: none; }
::placeholder { color: var(--c-ink-muted); opacity: 1; }
[hidden] { display: none !important; }

/* Builder content container — the only class the page builder output needs to live inside */
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content :is(p, ul, ol, dl, blockquote) { max-width: var(--measure); }
.entry-content h2 { margin-top: var(--sp-7); }
.entry-content h3 { margin-top: var(--sp-6); }
.entry-content :is(h4, h5, h6) { margin-top: var(--sp-5); }
.entry-content table { margin: 0 0 var(--sp-5); }
.entry-content img { display: block; }
.entry-content .alignleft { float: left; margin: 0 var(--sp-5) var(--sp-4) 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); max-width: 50%; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .wp-caption { max-width: 100%; }
@media (max-width: 39.99em) {
  .entry-content :is(.alignleft, .alignright) { float: none; margin: 0 0 var(--sp-4); max-width: 100%; }
  /* Fallback for bare builder tables that aren't wrapped in .table-wrap: scroll in place */
  .entry-content table:not(.table-wrap table) { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ================================================================
   2. LAYOUT
   ================================================================ */
.container { width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.site-main { display: block;
padding-bottom: var(--sp-8);
}
.section { padding-block: var(--sp-7);
}
.section--tight { padding-block: var(--sp-6);
}
.section-title { position: relative;
padding-top: var(--sp-4);
margin-bottom: var(--sp-5);
font-size: var(--fs-xl);
}
.section-title::before { content: "";
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: var(--bw-rule);
background: var(--c-amber);
}
.section-head { display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2) var(--sp-5);
margin-bottom: var(--sp-5);
}
.section-head .section-title { margin-bottom: 0;
}
.layout-sidebar { display: grid;
gap: var(--sp-7);
padding-top: var(--sp-6);
}
@media (min-width: 64em) { .layout-sidebar { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: var(--sp-8); }
}
.layout-split { display: grid;
gap: var(--sp-7);
}
@media (min-width: 64em) { .layout-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}
.visually-hidden { position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.icon { width: 1.25em;
height: 1.25em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -.25em;
}

/* Skip link */
.skip-link { position: absolute;
left: var(--sp-4);
top: var(--sp-2);
z-index: 100;
transform: translateY(-200%);
background: var(--c-amber);
color: var(--c-on-amber);
font-weight: 700;
padding: var(--sp-3) var(--sp-4);
text-decoration: none;
border-radius: var(--r-sm);
}
.skip-link:focus, .skip-link:focus-visible { transform: none;
color: var(--c-on-amber);
outline: 3px solid var(--c-ink);
outline-offset: 2px;
}
/* Printed only (section 15) - the site name and page URL a printout has no other way to carry. */
.print-only { display: none; }

/* ================================================================
   3. BUTTONS
   ================================================================ */
.btn { display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: var(--tap);
padding: .625rem 1.25rem;
border: var(--bw-strong) solid transparent;
border-radius: var(--r-sm);
font: 700 var(--fs-base)/1.2 var(--font-sans);
text-decoration: none;
cursor: pointer;
text-align: center;
}
.btn--primary, .btn--primary:visited { background: var(--c-amber);
border-color: var(--c-amber);
color: var(--c-on-amber);
}
.btn--primary:hover { background: var(--c-amber-hover);
border-color: var(--c-amber-hover);
color: var(--c-on-amber);
}
.btn--secondary, .btn--secondary:visited { background: transparent;
border-color: var(--c-ink);
color: var(--c-ink);
}
.btn--secondary:hover { background: var(--c-surface);
color: var(--c-ink);
}
.btn--text { background: none;
border-color: transparent;
color: var(--c-amber-text);
padding-inline: var(--sp-2);
text-decoration: underline;
text-underline-offset: .2em;
}
.btn--text:hover { color: var(--c-ink);
}
html:not(.js) .print-page-btn { display: none; } /* window.print() needs JS; no button, no dead control. */
.btn--icon { padding: 0;
width: var(--tap);
}
.btn[disabled] { opacity: .55;
cursor: not-allowed;
}

/* ================================================================
   4. HEADER + NAVIGATION  (mobile first; desktop at ≥64em)
   ================================================================ */
.site-utility { background: var(--c-footer-bg);
color: var(--c-footer-ink);
font-size: var(--fs-xs);
--c-focus: var(--c-footer-accent);
}
.site-utility__inner { display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-1) var(--sp-5);
padding-block: var(--sp-2);
}
.site-utility p { margin: 0;
}
.site-utility__links { display: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--sp-5);
}
.site-utility a { color: var(--c-footer-ink);
}
.site-utility a:hover { color: var(--c-footer-accent);
}
@media (min-width: 64em) { .site-utility__links { display: flex; }
.site-utility__links li + li { margin: 0; }
}

.site-header { background: var(--c-bg);
border-top: var(--bw-rule) solid var(--c-amber);
border-bottom: var(--bw) solid var(--c-line);
position: relative;
z-index: 30;
}
.site-header__bar { display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding-block: var(--sp-3);
}
.site-logo { display: inline-flex;
flex: none;
text-decoration: none;
color: var(--c-ink);
}
.site-logo__img { display: block;
height: 3rem;
width: auto;
}
.site-header__actions { display: flex;
gap: var(--sp-2);
}
.header-btn { display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-height: var(--tap);
padding: 0 var(--sp-3);
background: var(--c-bg);
color: var(--c-ink);
border: var(--bw-strong) solid var(--c-line-strong);
border-radius: var(--r-sm);
font-weight: 700;
font-size: var(--fs-sm);
cursor: pointer;
}
.header-btn:hover { border-color: var(--c-ink);
}
.header-btn[aria-expanded="true"] { background: var(--c-ink);
color: var(--c-bg);
border-color: var(--c-ink);
}
.nav-toggle__bars { position: relative;
width: 1.125rem;
height: 2px;
background: currentColor;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
}
.nav-toggle__bars::before { top: -6px;
} .nav-toggle__bars::after { top: 6px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0;
transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0;
transform: rotate(-45deg);
}

/* Quick links: the three things most visitors want, never hidden behind the toggle on phones */
.quick-links { border-top: var(--bw) solid var(--c-line);
background: var(--c-surface);
}
.quick-links ul { display: flex;
flex-wrap: wrap;
gap: 0 var(--sp-5);
list-style: none;
margin: 0;
padding: 0;
}
.quick-links li + li { margin: 0;
}
.quick-links a { display: inline-flex;
align-items: center;
min-height: var(--tap);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--c-ink);
}
.quick-links a:hover { color: var(--c-amber-text);
}

.search-form { display: flex;
gap: 0;
width: 100%;
}
.search-form input[type="search"] { border-right: 0;
border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.search-form .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0;
flex: none;
}
.search-form--header { display: none;
}

.site-nav-panel { border-top: var(--bw) solid var(--c-line);
background: var(--c-bg);
}
.js .site-nav-panel:not(.is-open) { display: none;
}
.site-nav-panel__search { padding-block: var(--sp-4);
}

.nav-primary__list { list-style: none;
margin: 0;
padding: 0 0 var(--sp-4);
}
.nav-primary__list li + li { margin: 0;
}
.nav-primary__item { display: grid;
grid-template-columns: minmax(0, 1fr) var(--tap);
border-bottom: var(--bw) solid var(--c-line);
}
.nav-primary__item:first-child { border-top: var(--bw) solid var(--c-line);
}
.nav-primary__link, .nav-primary__link:visited { display: flex;
align-items: center;
min-height: 3rem;
padding: var(--sp-2) 0;
color: var(--c-ink);
font-weight: 700;
text-decoration: none;
}
.nav-primary__link:hover { text-decoration: underline;
color: var(--c-ink);
}
.nav-primary__link[aria-current="page"], .nav-primary__item.is-current-ancestor > .nav-primary__link { box-shadow: inset var(--bw-rule) 0 0 var(--c-amber);
padding-left: var(--sp-3);
}
.nav-primary__toggle { display: grid;
place-items: center;
width: var(--tap);
min-height: 3rem;
padding: 0;
background: none;
border: 0;
border-left: var(--bw) solid var(--c-line);
color: var(--c-ink);
cursor: pointer;
}
.nav-primary__toggle:hover { background: var(--c-surface);
}
.nav-primary__toggle .icon { transition: transform .15s;
}
.nav-primary__toggle[aria-expanded="true"] .icon { transform: rotate(180deg);
}
.nav-primary__submenu { grid-column: 1 / -1;
list-style: none;
margin: 0;
padding: 0 0 var(--sp-2) var(--sp-4);
border-top: var(--bw) solid var(--c-line);
}
.js .nav-primary__toggle[aria-expanded="false"] + .nav-primary__submenu { display: none;
}
.nav-primary__submenu a, .nav-primary__submenu a:visited { display: flex;
align-items: center;
min-height: var(--tap);
color: var(--c-ink);
text-decoration: none;
}
.nav-primary__submenu a:hover { text-decoration: underline;
}
.nav-primary__submenu a[aria-current="page"] { font-weight: 700;
box-shadow: inset var(--bw-rule) 0 0 var(--c-amber);
padding-left: var(--sp-3);
}

@media (min-width: 64em) {
  .site-logo__img { height: 3.5rem; }
.site-header__actions, .quick-links, .site-nav-panel__search { display: none; }
.js .site-nav-panel:not(.is-open), .site-nav-panel { display: block; } /* overridden to flex below (design 2a) */
.nav-primary__list { display: flex; flex-wrap: wrap; padding: 0; margin-left: calc(var(--sp-3) * -1); }
.nav-primary__item, .nav-primary__item:first-child { position: relative; display: flex; align-items: stretch; border: 0; }
.nav-primary__link, .nav-primary__link:visited { min-height: 3.25rem; padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw-rule) solid transparent; }
.has-submenu > .nav-primary__link { padding-right: var(--sp-1); }
.nav-primary__link[aria-current="page"], .nav-primary__item.is-current-ancestor > .nav-primary__link { box-shadow: none; padding-left: var(--sp-3); border-bottom-color: var(--c-amber); }
.nav-primary__toggle { width: 1.75rem; min-height: 3.25rem; border: 0; border-bottom: var(--bw-rule) solid transparent; margin-right: var(--sp-2); }
.is-current-ancestor > .nav-primary__toggle { border-bottom-color: var(--c-amber); }
.nav-primary__toggle .icon { width: 1rem; height: 1rem; }
.nav-primary__submenu { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 17rem; display: none;
    padding: var(--sp-2) 0; background: var(--c-bg); border: var(--bw) solid var(--c-line-strong); border-top: var(--bw-rule) solid var(--c-amber); box-shadow: var(--sh-overlay); }
.js .nav-primary__toggle[aria-expanded="false"] + .nav-primary__submenu { display: none; }
.has-submenu:hover > .nav-primary__submenu,
  .js .nav-primary__toggle[aria-expanded="true"] + .nav-primary__submenu,
  html:not(.js) .has-submenu:focus-within > .nav-primary__submenu { display: block; }
.nav-primary__submenu a, .nav-primary__submenu a:visited { padding: var(--sp-2) var(--sp-4); }
.nav-primary__submenu a:hover { background: var(--c-surface); }
.nav-primary__submenu a[aria-current="page"] { box-shadow: inset var(--bw-rule) 0 0 var(--c-amber); padding-left: var(--sp-4); }
}

/* ---- design 2a refinements: light utility strip (contact + social + dark toggle),
   a single amber rule under the header (no top rule), and a desktop search drawer
   instead of an always-visible inline box. These override the plain-mock rules above;
   merged from css/2a.css (homepage-2a.dc.html / prompt 03) - kept together here rather
   than interleaved so the diff against the base rules stays legible. ---- */
.site-utility { background: var(--c-surface); color: var(--c-ink-muted); border-bottom: var(--bw) solid var(--c-line); --c-focus: inherit; }
.site-utility__inner { flex-wrap: nowrap; }
.site-utility__note { display: none; margin: 0; }
@media (min-width: 40em) { .site-utility__note { display: block; } }
.site-utility a, .site-utility a:visited { color: var(--c-ink); }
.site-utility a:hover { color: var(--c-amber-text); }
.site-utility__tools { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); margin-left: auto; }
.social-links { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.social-links li + li { margin: 0; }
.site-utility a.social-link, .site-utility a.social-link:visited {
  display: grid; place-items: center; width: var(--tap); height: var(--tap);
  background: var(--c-ink); color: var(--c-bg); border-radius: var(--r-sm);
  font: 700 .75rem/1 var(--font-sans); text-decoration: none; }
.site-utility a.social-link:hover { background: var(--c-amber); color: var(--c-on-amber); }
.theme-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-3);
  background: transparent; color: var(--c-ink); border: var(--bw) solid var(--c-line-strong); border-radius: var(--r-sm);
  font: 600 var(--fs-xs)/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.theme-toggle:hover { border-color: var(--c-ink); }
.theme-toggle[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.theme-toggle .icon { width: 1rem; height: 1rem; }
html:not(.js) .theme-toggle { display: none; }
@media (min-width: 64em) {
  .site-utility a.social-link { width: 1.75rem; height: 1.75rem; }
  .theme-toggle { min-height: 1.75rem; }
}

.site-header { border-top: 0; }
.site-nav-panel { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.header-search-toggle { display: none; }
.header-search { display: none; }

@media (min-width: 64em) {
  .site-header__inner { display: flex; align-items: stretch; gap: var(--sp-5); }
  .site-header__bar { flex: none; }
  .site-nav-panel { flex: 1; display: flex; justify-content: flex-end; align-items: stretch; margin: 0; padding: 0; border: 0; background: none; }
  .js .site-nav-panel:not(.is-open), .site-nav-panel { display: flex; }
  .nav-primary, .nav-primary__list { display: flex; align-items: stretch; }
  .nav-primary__list { flex-wrap: wrap; justify-content: flex-end; margin: 0; }
  .nav-primary__link, .nav-primary__link:visited { min-height: 0; padding-inline: var(--sp-2); }
  .nav-primary__toggle { min-height: 0; }
  /* active item: an ink tab sitting on the header's single amber rule */
  .nav-primary__link[aria-current="page"], .nav-primary__item.is-current-ancestor > .nav-primary__link,
  .is-current-ancestor > .nav-primary__toggle { border-bottom-color: var(--c-ink); }

  .header-search-toggle { display: grid; place-items: center; align-self: center; flex: none; width: var(--tap); height: var(--tap);
    background: var(--c-bg); color: var(--c-ink); border: var(--bw-strong) solid var(--c-line-strong); border-radius: var(--r-sm); cursor: pointer; }
  .header-search-toggle:hover { border-color: var(--c-ink); }
  .header-search-toggle[aria-expanded="true"] { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
  html:not(.js) .header-search-toggle { display: none; }

  .header-search { display: block; background: var(--c-surface); border-top: var(--bw) solid var(--c-line); padding-block: var(--sp-4); }
  .js .header-search:not(.is-open) { display: none; }
  .header-search .search-form--header { display: flex; max-width: 40rem; margin-left: auto; }
  /* the inline desktop search box (base rule, two blocks up) is superseded by the
     toggle + drawer above; the drawer's own scoped rule wins by source order. */
}
@media (min-width: 80em) {
  .nav-primary__link, .nav-primary__link:visited { padding-inline: var(--sp-3); }
}

/* Breadcrumbs */
.breadcrumbs ol { display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
font-size: var(--fs-sm);
}
.breadcrumbs li { display: inline-flex;
align-items: center;
margin: 0;
}
.breadcrumbs li + li::before { content: "";
width: .4rem;
height: .4rem;
margin: 0 .7rem;
border-top: 2px solid var(--c-ink-muted);
border-right: 2px solid var(--c-ink-muted);
transform: rotate(45deg);
}
.breadcrumbs a { color: var(--c-ink);
padding-block: var(--sp-2);
}
.breadcrumbs a:hover { color: var(--c-amber-text);
}
.breadcrumbs [aria-current="page"] { color: var(--c-ink-muted);
}

/* Page header */
.page-header { background: var(--c-surface);
border-bottom: var(--bw) solid var(--c-line);
}
.page-header__inner { padding-block: var(--sp-4) var(--sp-6);
}
.page-header__title { margin: var(--sp-4) 0 var(--sp-3);
}
.page-header__lede { font-size: var(--fs-md);
color: var(--c-ink);
max-width: 60ch;
margin: 0;
}
.page-header__meta { color: var(--c-ink-muted);
font-size: var(--fs-sm);
margin: 0;
}
.page-header__media { display: block;
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
border-bottom: var(--bw-rule) solid var(--c-amber);
}
@media (min-width: 64em) { .page-header__media { aspect-ratio: 32 / 7; }
}

/* Mock image placeholder (replace with <img>) */
.placeholder { display: grid;
place-items: center;
color: var(--c-ink-muted);
font: 500 var(--fs-xs)/1.3 var(--font-mono);
text-align: center;
padding: var(--sp-2);
background: repeating-linear-gradient(135deg, var(--c-surface) 0 8px, var(--c-bg) 8px 16px);
border: var(--bw) dashed var(--c-line-strong);
}
.site-logo__img.placeholder { width: 11rem;
}
@media (min-width: 64em) { .site-logo__img.placeholder { width: 14rem; }
}

/* ================================================================
   5. FRONT PAGE
   ================================================================ */
.home-intro { background: var(--c-surface);
border-bottom: var(--bw) solid var(--c-line);
}
.home-intro__inner { display: grid;
gap: var(--sp-5);
padding-block: var(--sp-5) var(--sp-6);
}
.home-intro__title { font-size: var(--fs-2xl);
margin-bottom: var(--sp-3);
max-width: 20ch;
}
.home-intro__lede { font-size: var(--fs-md);
max-width: 56ch;
margin: 0;
}
@media (min-width: 64em) { .home-intro__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; padding-block: var(--sp-7); }
}

.verify-box { background: var(--c-bg);
border: var(--bw) solid var(--c-line-strong);
border-top: var(--bw-rule) solid var(--c-amber);
padding: var(--sp-5);
}
.verify-box__title { font-size: var(--fs-lg);
margin-bottom: var(--sp-2);
}
.verify-box p { color: var(--c-ink-muted);
font-size: var(--fs-sm);
}
.verify-box label { display: block;
font-weight: 700;
margin-bottom: var(--sp-1);
}
.verify-box .search-form { margin-top: var(--sp-1);
}

/* Services grid */
.services-grid { display: grid;
gap: var(--sp-4);
grid-template-columns: minmax(0, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
.services-grid > li { margin: 0;
}
@media (min-width: 40em) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}
.card-service { position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: var(--sp-5);
background: var(--c-bg);
border: var(--bw) solid var(--c-line);
border-top: var(--bw-rule) solid var(--c-amber);
}
.card-service:hover { border-color: var(--c-line-strong);
border-top-color: var(--c-amber);
background: var(--c-surface);
}
.card-service:focus-within { outline: 3px solid var(--c-focus);
outline-offset: 2px;
}
.card-service__title { font-size: var(--fs-lg);
margin-bottom: var(--sp-2);
}
.card-service__text { color: var(--c-ink-muted);
margin-bottom: var(--sp-4);
}
.card-service__link, .card-service__link:visited { margin-top: auto;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-weight: 700;
color: var(--c-amber-text);
}
.card-service__link::after { content: "";
position: absolute;
inset: 0;
}
.card-service__link:focus-visible { outline: none;
}
.card-service:hover .card-service__link { color: var(--c-ink);
text-decoration-thickness: 2px;
}

/* Compact notice list (front page) */
.notice-list { list-style: none;
margin: 0 0 var(--sp-4);
padding: 0;
border-top: var(--bw) solid var(--c-line-strong);
}
.notice-list li { margin: 0;
padding: var(--sp-4) 0;
border-bottom: var(--bw) solid var(--c-line);
}
.notice-list time, .notice-list .meta { display: block;
font-size: var(--fs-sm);
color: var(--c-ink-muted);
margin-bottom: var(--sp-1);
font-variant-numeric: tabular-nums;
}
.notice-list a { font-weight: 700;
color: var(--c-ink);
}
.notice-list a:hover { color: var(--c-amber-text);
}
.more-link, .more-link:visited { display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-weight: 700;
min-height: var(--tap);
}

/* ---- design 2a: photo banner (replaces .home-intro on the front page; that rule
   stays above for any page that wants the plain "no hero" treatment) and the
   "KNDI at work" photo strip. Merged from css/2a.css (homepage-2a.dc.html). ---- */
.home-banner { background: var(--c-surface); border-bottom: var(--bw) solid var(--c-line); }
.home-banner__media { height: 13rem; background: var(--c-surface); }
.home-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-banner__inner { padding-block: var(--sp-5) var(--sp-6); }
.home-banner__panel { max-width: 40rem; }
.home-banner--photo .home-banner__panel { background: var(--c-bg); border-top: var(--bw-rule) solid var(--c-amber); padding: var(--sp-5); margin-top: calc(var(--sp-7) * -1); position: relative; }
.home-banner__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.home-banner__lede { font-size: var(--fs-md); color: var(--c-ink-muted); max-width: 52ch; margin: 0 0 var(--sp-5); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (min-width: 48em) {
  .home-banner--photo { position: relative; border-bottom: 0; }
  .home-banner--photo .home-banner__media { height: clamp(18rem, 32vw, 22.5rem); }
  .home-banner--photo .home-banner__inner { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-block: var(--sp-6); pointer-events: none; }
  .home-banner--photo .home-banner__panel { max-width: 35rem; margin: 0; padding: var(--sp-6) var(--sp-6) var(--sp-5); pointer-events: auto; box-shadow: var(--sh-raised); }
  .home-banner--photo .home-banner__title { font-size: var(--fs-xl); }
}
@media (min-width: 64em) {
  .home-banner--photo .home-banner__title { font-size: clamp(1.875rem, 1.2rem + 1vw, 2.25rem); }
}

.section--flush-top { padding-top: 0; }
.photo-strip { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.photo-strip > li { margin: 0; }
@media (min-width: 40em) { .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .photo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photo-strip figure { margin: 0; }
.photo-strip__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-surface); }
.photo-strip figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.45; color: var(--c-ink-muted); }
.photo-strip figcaption strong { color: var(--c-ink); }
/* .home-banner* and .photo-strip above are unused as of the 2026-09-30 redesign,
   which replaced page_front-page.php's front-page branch (docs/screengrab.JPG).
   Left in place - nothing else in the theme references them, and deleting working
   CSS on a guess is exactly how the 2026-09-29 regression happened (see AUDIT.md). */

/* ---- 2026-09-30 front-page redesign (docs/screengrab.JPG - a screenshot, no other
   source). Every class below is used only by page-templates/page_front-page.php's
   front-page branch; nothing here touches an interior page or another template's
   component. Colours sampled from the image; where a colour already existed as a
   token (amber, ink, surface) it was reused rather than re-picked by eye. ---- */

.eyebrow { display: block; margin: 0 0 var(--sp-2); font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-amber-text); }
.eyebrow--on-dark { color: var(--c-footer-accent); }

.btn--ghost-light, .btn--ghost-light:visited { background: transparent; border-color: rgb(255 255 255 / .7); color: #fff; }
.btn--ghost-light:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
.btn--pill-outline, .btn--pill-outline:visited { background: transparent; border-color: var(--c-line-strong); color: var(--c-ink); border-radius: var(--r-pill); padding-inline: var(--sp-5); }
.btn--pill-outline:hover { border-color: var(--c-ink); }

/* Hero: full-bleed photo, dark-to-clear gradient so white text reads on the left,
   the eyebrow "next deadline" chip floats over the top. */
.hero-photo { position: relative; min-height: 22rem; display: flex; align-items: center; background: var(--c-ink); overflow: hidden; }
.hero-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(28 26 23 / .92) 0%, rgb(28 26 23 / .78) 38%, rgb(28 26 23 / .15) 75%); }
.hero-photo__inner { position: relative; z-index: 1; padding-block: var(--sp-7); max-width: 40rem; }
.deadline-chip { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-1) var(--sp-3); border: var(--bw) solid rgb(255 255 255 / .4); border-radius: var(--r-pill); font: 700 var(--fs-xs)/1.3 var(--font-sans); color: #fff; }
.deadline-chip .icon { width: .9rem; height: .9rem; color: var(--c-amber); }
.hero-photo__title { margin: 0 0 var(--sp-3); font-size: var(--fs-2xl); color: #fff; }
.hero-photo__lede { margin: 0 0 var(--sp-5); font-size: var(--fs-md); color: rgb(255 255 255 / .82); max-width: 42ch; }
@media (min-width: 64em) { .hero-photo { min-height: 26rem; } }

/* The two "latest notices" rows share this head: title left, "all" link right. */
.notice-strip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-4); }
.notice-strip__head h2, .notice-strip__head .section-title { margin-bottom: 0; }
.notice-strip { padding: var(--sp-5); background: var(--c-bg); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-raised); }
.notice-strip__list { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40em) { .notice-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notice-strip__list li { margin: 0; padding-top: var(--sp-4); border-top: var(--bw) solid var(--c-line); }
.notice-strip__meta { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--c-amber-text); text-transform: uppercase; letter-spacing: .04em; }
.notice-strip__title, a.notice-strip__title:visited { display: block; font-weight: 700; color: var(--c-ink); }
.notice-strip__title:hover { color: var(--c-amber-text); }

/* "What do you need to do?" - 6 cards, colour cycling through 5 fills (tokens only). */
.route-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40em) { .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .route-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } }
.route-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-bg); border: var(--bw) solid var(--c-line); }
.route-card__icon { display: block; align-self: flex-end; width: 2rem; height: 2rem; margin-bottom: var(--sp-3); border-radius: 50%; background: currentColor; opacity: .12; } /* purely decorative, matching the mock's corner mark - the real action is the button */
.route-card__title { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); color: inherit; } /* h3 has its own color:var(--c-ink) globally (section 1) - without this override it wins over the card's own dark/amber treatment, making the title invisible on .route-card--ink */
.route-card__text { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); flex: 1; }
.route-card__btn, a.route-card__btn:visited { align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.25rem; padding-inline: var(--sp-4); border-radius: var(--r-pill); background: var(--c-amber); color: var(--c-on-amber); font: 700 var(--fs-xs)/1 var(--font-sans); text-decoration: none; }
.route-card__btn:hover { background: var(--c-amber-hover); }
.route-card__btn--dark, a.route-card__btn--dark:visited { background: var(--c-ink); color: var(--c-footer-ink); }
.route-card__btn--dark:hover { background: #000; }
.route-card--ink { background: var(--c-ink); color: var(--c-footer-ink); border-color: var(--c-ink); }
.route-card--ink .route-card__text { color: var(--c-footer-muted); }
.route-card--cream { background: var(--c-surface); }
.route-card--amber { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-on-amber); }
.route-card--amber .route-card__text { color: #3a2c0f; }
.route-card--mint { background: var(--c-mint-tint); border-color: transparent; }
.route-card--peach { background: var(--c-peach-tint); border-color: transparent; }
.route-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* "KNDI at work": centred heading, 3 bordered photo cards. */
.work-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); list-style: none; margin: var(--sp-6) 0 0; padding: 0; text-align: left; }
@media (min-width: 40em) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-card { margin: 0; border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: var(--c-bg); }
.work-card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-surface); }
.work-card__caption { padding: var(--sp-4); font-size: var(--fs-sm); line-height: 1.45; color: var(--c-ink-muted); }
.work-card__caption strong { display: block; margin-bottom: var(--sp-1); color: var(--c-ink); }

/* "Protecting the public" mandate band: photo + numbered list on a tinted panel. */
.mandate-band { display: grid; gap: var(--sp-5); }
@media (min-width: 64em) { .mandate-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); align-items: stretch; } }
.mandate-band__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); min-height: 16rem; }
.mandate-band__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mandate-band__media--empty { border: var(--bw) dashed var(--c-line-strong); }
.mandate-band__panel { padding: var(--sp-6); background: var(--c-amber-tint); border-radius: var(--r-lg); }
.mandate-band__panel p { color: var(--c-ink-muted); }
.mandate-list { counter-reset: mandate; list-style: none; margin: var(--sp-4) 0 var(--sp-5); padding: 0; }
.mandate-list li { counter-increment: mandate; display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-weight: 700; }
.mandate-list li::before {
  content: counter(mandate); flex: none; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--c-amber); color: var(--c-on-amber);
  font-size: var(--fs-xs);
}

/* Latest notices (plain .notice-list) beside the dark promo card. */
.promo-split { display: grid; gap: var(--sp-5); }
@media (min-width: 64em) { .promo-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-7); } }
.promo-card { padding: var(--sp-6); background: var(--c-ink); color: var(--c-footer-ink); border-radius: var(--r-lg); }
.promo-card__title { margin: 0 0 var(--sp-3); color: var(--c-footer-ink); }
.promo-card__text { margin: 0 0 var(--sp-5); color: var(--c-footer-muted); }

/* ================================================================
   6. SIDEBAR
   ================================================================ */
.sidebar { display: grid;
gap: var(--sp-6);
align-content: start;
}
.widget__title { font: 700 var(--fs-sm)/1.3 var(--font-sans);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-ink-muted);
margin-bottom: var(--sp-3);
}
.nav-section ul { list-style: none;
margin: 0;
padding: 0;
border-top: var(--bw) solid var(--c-line-strong);
}
.nav-section li { margin: 0;
border-bottom: var(--bw) solid var(--c-line);
}
.nav-section a, .nav-section a:visited { display: flex;
align-items: center;
min-height: var(--tap);
padding: var(--sp-2) var(--sp-3);
color: var(--c-ink);
text-decoration: none;
}
.nav-section a:hover { background: var(--c-surface);
text-decoration: underline;
}
.nav-section a[aria-current="page"] { font-weight: 700;
background: var(--c-amber-tint);
box-shadow: inset var(--bw-rule) 0 0 var(--c-amber);
}
.widget--contact { background: var(--c-surface);
padding: var(--sp-5);
}
.widget--contact p { margin-bottom: var(--sp-2);
}

/* ================================================================
   7. ACCORDION — the most used component
   ================================================================ */
.accordion { margin: 0 0 var(--sp-5);
}
.accordion__toolbar { display: flex;
justify-content: flex-end;
margin-bottom: var(--sp-2);
}
.accordion__list { border-top: var(--bw-strong) solid var(--c-ink);
}
.accordion__item { border-bottom: var(--bw) solid var(--c-line-strong);
}
.accordion__heading { margin: 0;
font: inherit;
}
.accordion__trigger { display: flex;
align-items: flex-start;
gap: var(--sp-4);
width: 100%;
min-height: 3.5rem;
padding: var(--sp-4) var(--sp-3);
background: none;
border: 0;
border-radius: 0;
color: var(--c-ink);
font: 700 var(--fs-md)/1.4 var(--font-sans);
text-align: left;
cursor: pointer;
}
.accordion__trigger:hover { background: var(--c-surface);
}
.accordion__trigger:hover .accordion__label { text-decoration: underline;
text-underline-offset: .2em;
}
.accordion__trigger:focus-visible { outline-offset: -3px;
border-radius: 0;
background: var(--c-surface);
}
.accordion__icon { position: relative;
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-top: .05rem;
border: var(--bw-strong) solid var(--c-ink);
border-radius: var(--r-sm);
background: var(--c-bg);
}
.accordion__icon::before, .accordion__icon::after { content: "";
position: absolute;
top: 50%;
left: 50%;
width: .75rem;
height: 2px;
margin: -1px 0 0 -.375rem;
background: var(--c-ink);
}
.accordion__icon::after { transform: rotate(90deg);
transition: transform .15s;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--c-amber);
border-color: var(--c-amber);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::before,
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { background: var(--c-on-amber);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg);
}
.accordion__state { margin-left: auto;
flex: none;
font: 600 var(--fs-xs)/1.9 var(--font-sans);
color: var(--c-ink-muted);
text-transform: uppercase;
letter-spacing: .06em;
}
.accordion__panel { padding: 0 var(--sp-3) var(--sp-5) calc(var(--sp-3) + 1.5rem + var(--sp-4));
}
.accordion__panel > :last-child { margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) { .accordion__icon::after, .nav-primary__toggle .icon { transition: none; }
}

/* ---- Imported legacy content (kndi-wp-local/tools/import-content.php) ----
   Not part of the design system proper - mock.html never had to represent SiteOrigin
   page-builder content, because the plugin that built it is gone. These three classes
   are what the import script converts old widgets into, on 38 pages carried over from
   the old site: an accordion widget becomes native <details class="kndi-accordion">
   (no ARIA needed - browsers expose open/closed state natively), a notice pop-up
   widget becomes .kndi-notice-box shown in place, and the old gallery plugin's output
   becomes a plain .kndi-gallery grid. Tokens only, no new colours or fonts - if this
   is ever regenerated by re-running the import, keep these two things in step.
   REMOVED then RESTORED 2026-09-30: dropped while deleting css/editorial.css (prompt
   02's rebuild), which is where this had ended up living alongside unrelated styling
   that genuinely didn't belong. These three classes did belong; only the eyebrow/
   hero/hairline-grid rules around them were the actual JND-layer deviation. */
.kndi-accordion { margin: 0 0 var(--sp-5); border-top: var(--bw) solid var(--c-line); }
.kndi-accordion__item { border-bottom: var(--bw) solid var(--c-line); }
.kndi-accordion__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--tap); padding: var(--sp-3) 0;
  font: 500 var(--fs-md)/1.3 var(--font-serif); color: var(--c-ink);
  cursor: pointer; list-style: none;
}
.kndi-accordion__item > summary::-webkit-details-marker { display: none; }
.kndi-accordion__item > summary::after {
  content: "Show"; flex: none;
  font: 700 .6875rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-amber-text);
}
.kndi-accordion__item[open] > summary::after { content: "Hide"; }
.kndi-accordion__item > summary:hover { color: var(--c-amber-text); }
.kndi-accordion__item > summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.kndi-accordion__panel { padding: 0 0 var(--sp-4); }
.kndi-accordion__panel > :last-child { margin-bottom: 0; }

.kndi-notice-box { margin: 0 0 var(--sp-5); padding: var(--sp-5); border: var(--bw) solid var(--c-line); border-top: var(--bw-rule) solid var(--c-amber); background: var(--c-bg); }
.kndi-notice-box > :last-child { margin-bottom: 0; }
.kndi-notice-box img { display: block; max-width: 12rem; height: auto; margin: 0 0 var(--sp-4); }

.kndi-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-6); }
@media (min-width: 48em) { .kndi-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kndi-gallery a { display: block; }
.kndi-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kndi-gallery a:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ================================================================
   8. MODAL
   ================================================================ */
.modal { width: min(38rem, calc(100vw - 2 * var(--gutter)));
max-height: calc(100dvh - 2rem);
padding: 0;
overflow: auto;
background: var(--c-bg);
color: var(--c-ink);
border: 0;
border-top: var(--bw-rule) solid var(--c-amber);
border-radius: var(--r-md);
box-shadow: var(--sh-overlay);
}
.modal::backdrop { background: var(--c-overlay);
}
.modal__header { display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-5) 0;
}
.modal__eyebrow { display: block;
font: 700 var(--fs-xs)/1.3 var(--font-sans);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-amber-text);
margin-bottom: var(--sp-2);
}
.modal__title { font-size: var(--fs-lg);
margin: 0;
}
.modal__close { flex: none;
display: grid;
place-items: center;
width: var(--tap);
height: var(--tap);
margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
background: none;
border: var(--bw-strong) solid transparent;
border-radius: var(--r-sm);
color: var(--c-ink);
cursor: pointer;
}
.modal__close:hover { border-color: var(--c-line-strong);
}
.modal__body { padding: var(--sp-4) var(--sp-5);
}
.modal__footer { display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5) var(--sp-5);
border-top: var(--bw) solid var(--c-line);
}

/* ================================================================
   9. TESTIMONIALS
   ================================================================ */
.testimonials { display: grid;
gap: var(--sp-5);
}
@media (min-width: 48em) { .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.testimonial { margin: 0;
padding: var(--sp-5);
background: var(--c-surface);
border-top: var(--bw) solid var(--c-line-strong);
}
.testimonial blockquote { border: 0;
padding: 0;
margin: 0 0 var(--sp-4);
font-size: var(--fs-md);
line-height: 1.5;
}
.testimonial blockquote::before { content: "\201C";
display: block;
height: 2.25rem;
font: 700 3.5rem/1 var(--font-serif);
color: var(--c-amber);
} /* decorative glyph, aria-invisible */
.testimonial figcaption { margin: 0;
font-size: var(--fs-sm);
color: var(--c-ink-muted);
}
.testimonial__name { display: block;
font-weight: 700;
color: var(--c-ink);
font-size: var(--fs-base);
}

/* ================================================================
   10. DOWNLOADS LIST
   ================================================================ */
.downloads { list-style: none;
margin: 0 0 var(--sp-5);
padding: 0;
border-top: var(--bw-strong) solid var(--c-ink);
}
.downloads__item { display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sp-2) var(--sp-4);
align-items: start;
margin: 0;
padding: var(--sp-4) 0;
border-bottom: var(--bw) solid var(--c-line);
}
.downloads__icon { width: 1.75rem;
height: 1.75rem;
color: var(--c-ink-muted);
margin-top: .1rem;
}
.downloads__name { font-weight: 700;
display: block;
}
a.downloads__name { color: var(--c-ink);
}
a.downloads__name:hover { color: var(--c-amber-text);
}
.downloads__meta { display: block;
font-size: var(--fs-sm);
color: var(--c-ink-muted);
margin-top: var(--sp-1);
}
.downloads__status { grid-column: 2;
}
@media (min-width: 40em) {
  .downloads__item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.downloads__status { grid-column: 3; justify-self: end; }
}
.status { display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: .3rem .75rem;
font-size: var(--fs-sm);
font-weight: 700;
line-height: 1.3;
border-radius: var(--r-sm);
white-space: nowrap;
}
.status .icon { width: 1rem;
height: 1rem;
}
.status--open { background: var(--c-amber-tint);
color: var(--c-ink);
border: var(--bw-strong) solid var(--c-amber);
}
.status--restricted { background: transparent;
color: var(--c-ink);
border: var(--bw-strong) dashed var(--c-line-strong);
white-space: normal;
}
.downloads__item--restricted .downloads__name { color: var(--c-ink);
}

/* ================================================================
   11. DATA TABLE
   ================================================================ */
.table-wrap { position: relative;
overflow-x: auto;
margin: 0 0 var(--sp-5);
border: var(--bw) solid var(--c-line);
background:
    linear-gradient(to right, var(--c-bg) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--c-bg) 30%, transparent) right / 2.5rem 100% no-repeat local,
    linear-gradient(to right, rgb(0 0 0 / .14), transparent) left / .75rem 100% no-repeat scroll,
    linear-gradient(to left, rgb(0 0 0 / .14), transparent) right / .75rem 100% no-repeat scroll;
background-color: var(--c-bg);
}
.table-wrap:focus-visible { outline-offset: 2px;
}
.table-hint { display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
color: var(--c-ink-muted);
margin: 0 0 var(--sp-2);
}
@media (min-width: 48em) { .table-hint { display: none; }
}
.data-table { min-width: 40rem;
margin: 0;
}
.data-table caption { padding: var(--sp-3) var(--sp-4);
border-bottom: var(--bw) solid var(--c-line);
background: var(--c-bg);
}
.data-table tbody tr:nth-child(even) { background: var(--c-surface);
}
.data-table tbody tr:hover { background: var(--c-amber-tint);
}
.data-table th:first-child, .data-table td:first-child { position: sticky;
left: 0;
background: inherit;
}
.data-table thead th:first-child { background: var(--c-surface);
z-index: 1;
}
.data-table tbody th { background: var(--c-bg);
box-shadow: inset -1px 0 0 var(--c-line);
}
.data-table tbody tr:nth-child(even) th { background: var(--c-surface);
}
.data-table .num { text-align: right;
}
.data-table td { white-space: nowrap;
}

/* ================================================================
   12. FORM
   ================================================================ */
.form { display: grid;
gap: var(--sp-5);
max-width: 40rem;
}
.form-row { display: grid;
gap: var(--sp-5);
}
@media (min-width: 40em) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form-field { display: grid;
gap: var(--sp-1);
align-content: start;
}
.form-field label, .form-legend { font-weight: 700;
}
.form-optional { font-weight: 400;
color: var(--c-ink-muted);
}
.form-hint { font-size: var(--fs-sm);
color: var(--c-ink-muted);
margin: 0;
}
.form-error { display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-weight: 700;
color: var(--c-error);
margin: 0;
font-size: var(--fs-sm);
}
.form-field--error input, .form-field--error select, .form-field--error textarea { border-color: var(--c-error) !important;
border-width: 3px !important;
}
.form-field--error { padding-left: var(--sp-4);
border-left: var(--bw-rule) solid var(--c-error);
}
.form-check { display: flex;
gap: var(--sp-3);
align-items: flex-start;
}
.form-check label { font-weight: 400;
}
.error-summary { padding: var(--sp-5);
border: 3px solid var(--c-error);
background: var(--c-error-tint);
}
.error-summary__title { font: 700 var(--fs-md)/1.3 var(--font-sans);
color: var(--c-ink);
margin: 0 0 var(--sp-2);
}
.error-summary ul { margin: 0;
padding-left: 1.25em;
}
.error-summary a { color: var(--c-error);
font-weight: 700;
}
fieldset { border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
legend { padding: 0;
}

/* ================================================================
   13. ARCHIVE, SINGLE, SEARCH, 404
   ================================================================ */
.post-list { list-style: none;
margin: 0 0 var(--sp-6);
padding: 0;
border-top: var(--bw-strong) solid var(--c-ink);
}
.post-list__item { display: grid;
gap: var(--sp-1) var(--sp-5);
margin: 0;
padding: var(--sp-5) 0;
border-bottom: var(--bw) solid var(--c-line);
}
@media (min-width: 40em) { .post-list__item { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
.post-date { font-size: var(--fs-sm);
color: var(--c-ink-muted);
font-variant-numeric: tabular-nums;
}
@media (min-width: 40em) {
  .post-date { display: grid; align-content: start; line-height: 1.2; }
.post-date__day { font: 700 var(--fs-xl)/1 var(--font-serif); color: var(--c-ink); }
}
.post-list__title { font-size: var(--fs-lg);
margin: 0 0 var(--sp-2);
}
.post-list__title a { color: var(--c-ink);
text-decoration-color: var(--c-line-strong);
}
.post-list__title a:hover { color: var(--c-amber-text);
text-decoration-color: currentColor;
}
.post-list__excerpt { margin: 0;
color: var(--c-ink-muted);
max-width: var(--measure);
}
.tag { display: inline-block;
font: 700 var(--fs-xs)/1.4 var(--font-sans);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-ink);
border-bottom: 2px solid var(--c-amber);
margin-bottom: var(--sp-2);
}
.tag--tender { border-bottom-style: dotted;
}

.pagination ul { display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
list-style: none;
margin: 0;
padding: 0;
}
.pagination li { margin: 0;
}
.pagination a, .pagination span { display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-1);
min-width: var(--tap);
min-height: var(--tap);
padding: 0 var(--sp-3);
border: var(--bw-strong) solid var(--c-line-strong);
border-radius: var(--r-sm);
color: var(--c-ink);
text-decoration: none;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--c-ink);
background: var(--c-surface);
}
.pagination [aria-current="page"] { background: var(--c-ink);
border-color: var(--c-ink);
color: var(--c-bg);
}
.pagination .pagination__gap { border-color: transparent;
}
@media (max-width: 39.99em) { .pagination .pagination__far { display: none; }
}

.post-meta { display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-4);
font-size: var(--fs-sm);
color: var(--c-ink-muted);
margin: 0;
}
.post-nav { display: grid;
gap: var(--sp-4);
margin-top: var(--sp-7);
padding-top: var(--sp-5);
border-top: var(--bw) solid var(--c-line-strong);
}
@media (min-width: 40em) { .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-nav__next { text-align: right; }
}
.post-nav a { display: block;
color: var(--c-ink);
text-decoration: none;
padding: var(--sp-2) 0;
}
.post-nav a:hover .post-nav__title { text-decoration: underline;
}
.post-nav__label { display: block;
font-size: var(--fs-sm);
color: var(--c-ink-muted);
}
.post-nav__title { font-weight: 700;
}

.search-summary { margin: 0 0 var(--sp-5);
color: var(--c-ink-muted);
}
.search-summary strong { color: var(--c-ink);
}
.search-results { list-style: none;
margin: 0 0 var(--sp-6);
padding: 0;
border-top: var(--bw-strong) solid var(--c-ink);
}
.search-result { margin: 0;
padding: var(--sp-5) 0;
border-bottom: var(--bw) solid var(--c-line);
}
.search-result__title { font-size: var(--fs-lg);
margin: 0 0 var(--sp-1);
}
.search-result__title a { color: var(--c-ink);
}
.search-result__title a:hover { color: var(--c-amber-text);
}
.search-result__path { font-size: var(--fs-sm);
color: var(--c-ink-muted);
margin: 0 0 var(--sp-2);
}
.search-result__excerpt { margin: 0;
max-width: var(--measure);
}

.error-404 { padding-block: var(--sp-7);
max-width: 44rem;
}
.error-404__code { display: inline-block;
font: 700 var(--fs-sm)/1.3 var(--font-mono);
color: var(--c-amber-text);
border-top: var(--bw-rule) solid var(--c-amber);
padding-top: var(--sp-3);
margin-bottom: var(--sp-3);
}
.error-404 .search-form { max-width: 30rem;
margin-bottom: var(--sp-6);
}
.link-list { list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0 var(--sp-5);
}
@media (min-width: 40em) { .link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.link-list li { margin: 0;
border-bottom: var(--bw) solid var(--c-line);
}
.link-list a { display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
min-height: var(--tap);
padding: var(--sp-2) 0;
font-weight: 700;
color: var(--c-ink);
text-decoration: none;
}
.link-list a:hover { color: var(--c-amber-text);
text-decoration: underline;
}

/* ================================================================
   14. FOOTER
   ================================================================ */
.site-footer { background: var(--c-footer-bg);
color: var(--c-footer-ink);
border-top: var(--bw-rule) solid var(--c-amber);
font-size: var(--fs-sm);
--c-focus: var(--c-footer-accent);
}
.site-footer__grid { display: grid;
gap: var(--sp-6);
padding-block: var(--sp-7);
}
@media (min-width: 40em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); }
}
.site-footer h2 { font: 700 var(--fs-xs)/1.3 var(--font-sans);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--c-footer-accent);
margin-bottom: var(--sp-4);
}
.site-footer p, .site-footer address { color: var(--c-footer-muted);
font-style: normal;
margin-bottom: var(--sp-3);
}
.site-footer a, .site-footer a:visited { color: var(--c-footer-ink);
}
.site-footer a:hover { color: var(--c-footer-accent);
}
.site-footer__name { font: 700 var(--fs-lg)/1.2 var(--font-serif);
color: var(--c-footer-ink);
margin-bottom: var(--sp-2);
}
.site-footer dl { display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sp-2) var(--sp-4);
margin: var(--sp-4) 0 0;
}
.site-footer dt { color: var(--c-footer-muted);
font-weight: 400;
}
.site-footer dd { margin: 0;
}
.nav-footer ul { list-style: none;
margin: 0;
padding: 0;
}
.nav-footer li { margin: 0;
}
.nav-footer a { display: inline-flex;
align-items: center;
min-height: 2.25rem;
}
.site-footer__bottom { border-top: 1px solid rgb(255 255 255 / .16);
}
.site-footer__bottom .container { display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--sp-2) var(--sp-5);
padding-block: var(--sp-4);
color: var(--c-footer-muted);
}
/* Fixed 2026-09-29: build_theme_assets.py had merged the mock-only caption, preview-button
   and swatch rules into this selector (monospace text in dashed boxes on every page). */
.site-footer__bottom p { margin: 0;
font-size: var(--fs-xs);
}

/* ---- design 2a: amber "follow" band above the four columns. Merged from css/2a.css. ---- */
.site-footer .follow-band { background: var(--c-amber); color: var(--c-on-amber); --c-focus: #1c1a17; }
.follow-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); padding-block: var(--sp-5); }
.site-footer .follow-band p { margin: 0; color: var(--c-on-amber); font-weight: 700; font-size: var(--fs-md); }
.follow-band ul { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.follow-band li { margin: 0; }
.btn--dark, .site-footer a.btn--dark, .site-footer a.btn--dark:visited { background: #1c1a17; border-color: #1c1a17; color: #fff; text-decoration: none; }
.btn--dark:hover, .site-footer a.btn--dark:hover { background: #000; border-color: #000; color: #fff; text-decoration: underline; }

/* ================================================================
   15. PRINT — downloads & policy pages
   ================================================================ */
@media print {
  :root { --c-bg: #fff; --c-surface: #fff; --c-ink: #000; --c-ink-muted: #333; --c-line: #999; --c-line-strong: #666; --c-amber-text: #000; --c-amber-tint: #fff; }
body { font: 11pt/1.45 var(--font-serif); background: #fff; color: #000; }
.site-header { border: 0; border-bottom: 2pt solid #000; }
.page-header { background: none; border: 0; }
.page-header__media, .placeholder:not(.site-logo__img) { display: none; }
.layout-sidebar { display: block; }
a { color: #000; }
.entry-content a[href^="http"]::after, .downloads a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
.accordion__panel[hidden] { display: block !important; }
.kndi-accordion__item:not([open]) > *:not(summary) { display: block !important; }
.kndi-accordion__item > summary::after { display: none; }
.kndi-accordion__item, .kndi-notice-box { break-inside: avoid; }
.accordion__trigger { padding: 8pt 0 4pt; }
.accordion__icon { display: none; }
.accordion__panel { padding: 0 0 8pt; }
.accordion__item, .downloads__item, tr, .testimonial { break-inside: avoid; }
h2, h3 { break-after: avoid; }
.status { border: 1pt solid #000 !important; background: none !important; }
.status--restricted { border-style: dashed !important; }
.table-wrap { overflow: visible; border: 0; background: none; }
.data-table { min-width: 0; }
.data-table th, .data-table td { position: static; white-space: normal; }
.site-footer { background: none; color: #000; border-top: 1pt solid #000; }
.site-footer p, .site-footer address, .site-footer dt, .site-footer a { color: #000; }
/* design 2a additions: hide the toggle/social/search UI and any photography. */
.social-links, .theme-toggle, .header-search, .header-search-toggle, .follow-band, .home-banner__media, .photo-strip { display: none !important; }
.home-banner--photo .home-banner__inner { position: static; }
.home-banner--photo .home-banner__panel { border: 0; padding: 0; box-shadow: none; }

/* prompt 11: the rest of the chrome nobody wants on paper - navigation, search, the
   skip link, and every button (the accordion's own "Open all", the banner's Verify/
   Renew, the contact form's Send, this page's own Print button). Informational
   .status badges (Open/Restricted, kept above) are not .btn, so they still print. */
.skip-link, .site-utility, .nav-primary, .nav-toggle, .quick-links, .search-form, .btn-row, .btn { display: none !important; }

/* One line of context a printed page has no other way to carry: the site name and
   the exact URL it came from. header.php/footer.php print this element only for
   @media print; it is display:none on screen. */
.print-only { display: block !important; margin: 0 0 12pt; padding-bottom: 6pt; border-bottom: 1pt solid #000; font-size: 9pt; }
}