/* mhacbo-site.css — site-wide chrome for www.mhacbo.org, linked from base.html <head> (2026-10-30).
   Was: the "Site Navbar Restyle" snippet + the style half of the "Certemy sign-in-first" snippet, both in the
   Footer static placeholder (so it arrived at the bottom of every page). Sources of truth stay in
   mhacbo-website/django-snippets/; rebuild with server-static/build-site-css.js. Served by nginx with no cache
   headers: every change ships with a new ?v= in base.html. */

/* ===== Brand lockup (Van, 2026-10-30): Design's mark B + lockup H ===== */
.navbar .navbar-brand { display: inline-flex; align-items: center; gap: 14px; margin-right: 24px; padding: 6px 0; }
.navbar .navbar-brand img { width: 65px; height: 44px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.mf-brand { display: flex; flex-direction: column; gap: 5px; padding-left: 14px; border-left: 1px solid #c9a227; }
.mf-brand__name { font-family: "Source Serif 4", Georgia, serif; font-size: 25px; line-height: 1; letter-spacing: .04em; color: #fff; }
.mf-brand__sub { font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; font-size: 9.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #e9d79a; }
/* the descriptor needs ~100px the ten menu links don't have between 992 and 1439px */
@media (min-width: 992px) and (max-width: 1439.98px) { .mf-brand { border-left: 0; padding-left: 0; } .mf-brand__sub { display: none; } }
@media (max-width: 420px) { .mf-brand__sub { display: none; } }

/* ===== MHACBO navbar restyle — Bootstrap 4 navbar, same language as the Education/Jobs masthead ===== */
.navbar.bg-dark {
  background: #123f38 !important;
  border-bottom: 3px solid #d4a72c;
  padding-top: .55rem;
  padding-bottom: .55rem;
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.navbar-dark .navbar-nav .nav-link {
  color: #d3e6df;
  font-size: 18px;              /* phones and tablets (stacked menu); desktop bands below */
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  padding: .55rem .62rem;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; }
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link { color: #fff; border-bottom-color: #f1d27a; }
.navbar-dark .navbar-nav .dropdown-toggle::after { border-top-color: #f1d27a; margin-left: .4em; vertical-align: .15em; }

/* dropdown panels */
.navbar .dropdown-menu {
  background: #0e5c4f;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  padding: .4rem 0;
  margin-top: .55rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.navbar .dropdown-menu .dropdown-item {
  color: #e8e6df;
  font-size: 14.5px;
  font-weight: 500;
  padding: .55rem 1.1rem .55rem 1rem;
  border-left: 3px solid transparent;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus { background: rgba(255, 255, 255, .07); color: #fff; border-left-color: #f1d27a; }
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active { background: rgba(255, 255, 255, .12); color: #fff; }
.navbar .dropdown-divider { border-top-color: rgba(255, 255, 255, .18); }

/* phone / tablet: hamburger and stacked menu */
.navbar-dark .navbar-toggler { border-color: rgba(241, 210, 122, .6); }
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23f1d27a' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* width: release the 1140px Bootstrap column so the bar's contents use the page (logo left, links right).
   Alternatives: keep a wider fixed column instead — replace the first rule with
   .navbar.bg-dark > .container { max-width: 1400px; }
   or keep the links beside the logo rather than at the right edge — replace the .navbar-nav rule with
   .navbar.bg-dark .navbar-nav { margin-left: 2.5vw; margin-right: auto; } */
.navbar.bg-dark > .container {
  max-width: none;
  width: 100%;
  padding-left: clamp(16px, 2.5vw, 40px);
  padding-right: clamp(16px, 2.5vw, 40px);
}
.navbar.bg-dark .navbar-nav { margin-left: auto; }

/* desktop size steps: 18px wherever ten items fit on one line, smaller only in the narrow laptop bands
   (measured on the live page: the bar needs ~1101px of room at 18px/.7rem, ~944px at 15.5px/.6rem,
   ~905px at 14px/.5rem, ~742px at 12.5px/.35rem; the logo and gutters take 219–267px) */
@media (min-width: 992px) and (max-width: 1139.98px) {
  .navbar.bg-dark > .container { padding-left: 16px; padding-right: 16px; }
  .navbar-dark .navbar-nav .nav-link { padding: .55rem .35rem; font-size: 12.5px; }
}
@media (min-width: 1140px) and (max-width: 1279.98px) {
  .navbar.bg-dark > .container { padding-left: 16px; padding-right: 16px; }
  .navbar-dark .navbar-nav .nav-link { padding: .55rem .5rem; font-size: 14px; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .navbar-dark .navbar-nav .nav-link { padding: .55rem .6rem; font-size: 15.5px; }
}
@media (min-width: 1440px) and (max-width: 1599.98px) {
  .navbar-dark .navbar-nav .nav-link { padding: .55rem .7rem; font-size: 18px; }
}
@media (min-width: 1600px) {
  .navbar-dark .navbar-nav .nav-link { padding: .55rem .9rem; font-size: 18px; }
}

@media (max-width: 991.98px) {
  .navbar-dark .navbar-nav .nav-link { padding: .75rem .25rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .navbar-dark .navbar-nav .active > .nav-link { border-bottom-color: #f1d27a; }
  .navbar .dropdown-menu { background: transparent; border: 0; box-shadow: none; margin: 0 0 .25rem; padding: 0 0 0 .75rem; }
  .navbar .dropdown-menu .dropdown-item { padding: .5rem .5rem; }
}
/* Certemy as a login button (staff request, 2026-10-28): same look as the masthead's "Certemy login" button,
   moved to the far right of the bar whatever its place in the CMS page tree. Keyed on the link address, so the
   menu title can change freely. */
.navbar-dark .navbar-nav > .nav-item:has(> a.nav-link[href*="/certemy"]) { order: 99; display: flex; align-items: center; margin-left: .6rem; }
.navbar-dark .navbar-nav > .nav-item > a.nav-link[href*="/certemy"] {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .45rem .85rem; margin: .25rem 0;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 3px;
  color: #fff; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.navbar-dark .navbar-nav > .nav-item > a.nav-link[href*="/certemy"]::after { content: "\2192"; font-family: "DM Mono", ui-monospace, Consolas, monospace; font-size: .85em; color: #f1d27a; }
.navbar-dark .navbar-nav > .nav-item > a.nav-link[href*="/certemy"]:hover,
.navbar-dark .navbar-nav > .nav-item > a.nav-link[href*="/certemy"]:focus-visible { background: #fff; color: #0e5c4f; border-color: #fff; }
.navbar-dark .navbar-nav > .nav-item > a.nav-link[href*="/certemy"]:hover::after,
.navbar-dark .navbar-nav > .nav-item > a.nav-link[href*="/certemy"]:focus-visible::after { color: #0e5c4f; }
.navbar-dark .navbar-nav > .active > a.nav-link[href*="/certemy"] { border-color: #f1d27a; }
/* the other links carry a transparent 3px underline that lifts their text; lift the button by the same amount */
@media (min-width: 992px) {
  .navbar-dark .navbar-nav > .nav-item > a.nav-link[href*="/certemy"] { position: relative; top: -3px; }
}
@media (max-width: 991.98px) {
  .navbar-dark .navbar-nav > .nav-item:has(> a.nav-link[href*="/certemy"]) { margin: .6rem 0 .3rem; }
}
/* ===== Site footer (2026-10-28): same family as the navbar — dark green, gold rule on top, name left, links and
   copyright right. The template's footer is Bootstrap "bg-dark" grey with the Footer static placeholder's text
   inside div.container.footer; the old text plugin set text-align:right inline, hence the !important. ===== */
footer.footer.bg-dark { background: #123f38 !important; border-top: 3px solid #d4a72c; padding: 40px 0 44px !important; font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
footer.footer > .container { max-width: none; padding-left: clamp(16px, 2.5vw, 40px); padding-right: clamp(16px, 2.5vw, 40px); }
footer.footer > .container > .row { margin: 0; }
footer.footer .container.footer {
  max-width: none; padding: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 40px; row-gap: 10px;
}
footer.footer .container.footer p { margin: 0; text-align: left !important; color: #c9ddd5; font-size: 15px; line-height: 1.5; }
footer.footer .container.footer p:first-child { grid-column: 1; }
footer.footer .container.footer p:first-child strong { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 21px; color: #f2efe6; }
footer.footer .container.footer p:not(:first-child):not(:last-child) { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: flex-end; }
footer.footer .container.footer p:last-child { grid-column: 1 / -1; font-size: 13.5px; color: #9fbcb2; }
footer.footer .container.footer p:last-child em { font-style: normal; }
footer.footer .container.footer a { color: #e8e6df; font-weight: 500; text-decoration: none; }
footer.footer .container.footer a:hover { color: #f1d27a; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) {
  footer.footer .container.footer { grid-template-columns: 1fr; }
  footer.footer .container.footer p:not(:first-child):not(:last-child) { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ===== Certemy apply modal (from certemy-signin-first.html) ===== */
/* Certemy modal footer: line the two answer buttons up whatever paragraphs the editor wraps them in */
#certemyModal .modal-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}
#certemyModal .modal-footer p{display:contents;margin:0}
#certemyModal .modal-footer .btn{margin:0 !important}
/* Certemy draws a small card inside our full-width frame; scale the whole frame up (the frame is cross-origin, so
   this is the only size control we have) */
:root{--mf-cx-z:1.25}
@media (min-width:1600px){:root{--mf-cx-z:1.4}}
@media (max-width:767.98px){:root{--mf-cx-z:1}}
#certemyFrame{zoom:var(--mf-cx-z)}
/* Help rails beside the frame (content from the CMS page /certemy-help/; see the script). The row is painted like
   Certemy's own page: its green band (77px with its dark bottom edge, inside Certemy, times the frame's zoom) runs
   across the whole row and the rest is Certemy's grey. Each rail = the site's numbered band heading (01 / 02, the
   Jobs/Registry look) over a white card. Wide screens: left rail | frame | right rail, starting just under the band.
   Narrower: the frame first, the rails below it. */
.mf-cx-has-help{--mf-cx-green:#0f5b4f;--mf-cx-grey:#fafafa;--mf-cx-band:calc(77px * var(--mf-cx-z));
  display:grid !important;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;align-items:start;
  background:linear-gradient(var(--mf-cx-green) 0 calc(var(--mf-cx-band) - 3px),#0b4a40 0 var(--mf-cx-band),var(--mf-cx-grey) 0)}
.mf-cx-has-help > #certemyFrame, .mf-cx-has-help > iframe{order:-1;width:100%;min-width:0}
.mf-cx-rail{margin:24px clamp(16px,2vw,32px);font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15.5px;line-height:1.55;color:#121a16}
.mf-cx-rail__head{display:grid;grid-template-columns:auto 1px 1fr;column-gap:18px;align-items:center;min-height:76px;
  padding:14px 20px;background:#0e5c4f;border-radius:4px;margin:0 0 12px;box-sizing:border-box}
.mf-cx-rail__head::before{font-family:"DM Mono",ui-monospace,Consolas,monospace;font-size:30px;line-height:1;letter-spacing:-.02em;color:#f1d27a}
.mf-cx-rail--left .mf-cx-rail__head::before{content:"01"}
.mf-cx-rail--right .mf-cx-rail__head::before{content:"02"}
.mf-cx-rail__head::after{content:"";grid-column:2;grid-row:1;width:1px;height:44px;background:rgba(255,255,255,.18)}
.mf-cx-rail__head > *{grid-column:3;grid-row:1}
.mf-cx-rail__head h2,.mf-cx-rail__head h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:22px;line-height:1.2;
  color:#e8e6df;margin:0;text-transform:none}
.mf-cx-rail__body{background:#fff;border:1px solid #e3e3e3;border-radius:4px;padding:20px 22px 18px}
.mf-cx-rail__body h2,.mf-cx-rail__body h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:20px;line-height:1.25;
  color:var(--mf-cx-green);margin:0 0 12px;text-transform:none}
.mf-cx-rail h4{font-size:16px;font-weight:600;margin:18px 0 8px}
.mf-cx-rail p{margin:0 0 12px}
.mf-cx-rail ul,.mf-cx-rail ol{margin:0 0 12px;padding-left:1.2em}
.mf-cx-rail li{margin:0 0 6px}
.mf-cx-rail a{color:var(--mf-cx-green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mf-cx-rail a::after{content:" \2197";font-weight:400;font-size:.85em}
.mf-cx-rail a:empty{display:none}
.mf-cx-rail img,.mf-cx-rail iframe,.mf-cx-rail video{max-width:100%;height:auto;border-radius:4px}
.mf-cx-rail__body > :first-child{margin-top:0}
.mf-cx-rail__body > :last-child{margin-bottom:0}
/* Q&A: every rail heading that ends in "?" becomes a click-to-open question (see the script) */
.mf-cx-q{border-top:1px solid #e3e3e3}
.mf-cx-q:last-of-type{border-bottom:1px solid #e3e3e3;margin-bottom:14px}
.mf-cx-q > summary{list-style:none;cursor:pointer;display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  padding:10px 0;font-weight:600;font-size:15px;line-height:1.4;color:#121a16}
.mf-cx-q > summary::-webkit-details-marker{display:none}
.mf-cx-q > summary::after{content:"+";flex:0 0 auto;font-weight:400;font-size:20px;line-height:1;color:var(--mf-cx-green)}
.mf-cx-q[open] > summary::after{content:"\2212"}
.mf-cx-q > summary:hover{color:var(--mf-cx-green)}
.mf-cx-q > summary:focus-visible{outline:2px solid var(--mf-cx-green);outline-offset:2px}
.mf-cx-q__a{padding:0 0 12px;font-size:15px}
.mf-cx-q__a > :last-child{margin-bottom:0}
@media (min-width:768px) and (max-width:1399.98px){
  .mf-cx-has-help{grid-template-columns:1fr 1fr}
  .mf-cx-has-help > #certemyFrame, .mf-cx-has-help > iframe{grid-column:1 / -1}
}
@media (min-width:1400px){
  .mf-cx-has-help{grid-template-columns:clamp(300px,21vw,420px) minmax(0,1fr) clamp(300px,21vw,420px)}
  .mf-cx-has-help > #certemyFrame, .mf-cx-has-help > iframe{order:0}
  .mf-cx-rail{margin:calc(var(--mf-cx-band) + 18px * var(--mf-cx-z)) 18px 24px}
}

/* ===== Dark mode (generated from server-static/dark/site-dark-rules.css; same colours as the Caspio theme) =====
   A. <html data-mf-theme="dark"> turns it on. B. The device setting turns it on where <html> has .mf-dark-pilot.
   Screen only, so printing stays light. */
@media screen {
  :root[data-mf-theme="dark"] .mf-home-hero,
  :root[data-mf-theme="dark"] .mf-home-callout,
  :root[data-mf-theme="dark"] .mf-home-how {
    --h-ink: #e4eae6; --h-dim: #a9b8b0; --h-brand: #2a8c77; --h-brand-dark: #3a9c86; --h-header: #12332d; --h-gold-ink: #e2c26a; --h-cream: #2a2614; --h-cream-line: #4a4020; --h-line: #2b3a35; --h-mint: #16201d;
  }
  :root[data-mf-theme="dark"] .card:has(> .shape-background-header) {
    --a-ink: #e4eae6; --a-dim: #a9b8b0; --a-brand: #2a8c77; --a-brand-dark: #3a9c86; --a-header: #12332d; --a-gold-ink: #e2c26a; --a-cream: #2a2614; --a-cream-line: #4a4020; --a-line: #2b3a35; --a-mint: #16201d;
  }
  :root[data-mf-theme="dark"] .mf-contact,
  :root[data-mf-theme="dark"] .mf-complaint {
    --c-ink: #e4eae6; --c-dim: #a9b8b0; --c-brand: #2a8c77; --c-brand-dark: #3a9c86; --c-header: #12332d; --c-gold-ink: #e2c26a; --c-cream: #2a2614; --c-cream-line: #4a4020; --c-line: #2b3a35; --c-mint: #16201d;
  }
  :root[data-mf-theme="dark"] .mf-employer,
  :root[data-mf-theme="dark"] .mf-endo {
    --e-ink: #e4eae6; --e-dim: #a9b8b0; --e-brand: #2a8c77; --e-brand-dark: #3a9c86; --e-header: #12332d; --e-gold-ink: #e2c26a; --e-cream: #2a2614; --e-cream-line: #4a4020; --e-line: #2b3a35; --e-mint: #16201d;
  }
  :root[data-mf-theme="dark"] .mf-faq {
    --f-ink: #e4eae6; --f-dim: #a9b8b0; --f-brand: #2a8c77; --f-brand-dark: #3a9c86; --f-header: #12332d; --f-gold-ink: #e2c26a; --f-cream: #2a2614; --f-cream-line: #4a4020; --f-line: #2b3a35; --f-mint: #16201d;
  }
  :root[data-mf-theme="dark"] .mf-reports {
    --r-ink: #e4eae6; --r-dim: #a9b8b0; --r-brand: #2a8c77; --r-brand-dark: #3a9c86; --r-header: #12332d; --r-gold-ink: #e2c26a; --r-cream: #2a2614; --r-cream-line: #4a4020; --r-line: #2b3a35; --r-mint: #16201d;
  }
  /* www.mhacbo.org dark mode: hand-written rules (2026-10-30 night). Same colours and switch as the Caspio side
     (mhacbo-forms tools/flex-dark/dark-rules.css). Written against :root[data-mf-theme="dark"]; build-site-css.js
     adds the per-snippet token blocks (TOKEN_SCOPES in build-site-css.js) and emits the device-following copy.
     Snippets carry their CSS in the page body; every rule here outranks theirs by specificity, not order. */

  /* ---------- the frame ---------- */
  :root[data-mf-theme="dark"] { color-scheme: dark; }
  :root[data-mf-theme="dark"] body { background: #0f1614 !important; color: #e4eae6; }
  :root[data-mf-theme="dark"] .navbar.bg-dark,
  :root[data-mf-theme="dark"] footer.footer.bg-dark { background: #0b1f1b !important; }
  :root[data-mf-theme="dark"] h1, :root[data-mf-theme="dark"] h2, :root[data-mf-theme="dark"] h3,
  :root[data-mf-theme="dark"] h4, :root[data-mf-theme="dark"] h5, :root[data-mf-theme="dark"] h6 { color: inherit; }
  :root[data-mf-theme="dark"] .content a:not([class]),
  :root[data-mf-theme="dark"] main a:not([class]) { color: #6cc7ae; }
  :root[data-mf-theme="dark"] hr { border-color: #2b3a35; }
  :root[data-mf-theme="dark"] .card, :root[data-mf-theme="dark"] .list-group-item { background: #16201d; border-color: #2b3a35; color: inherit; }
  :root[data-mf-theme="dark"] .table { color: inherit; }
  :root[data-mf-theme="dark"] .text-muted { color: #a9b8b0 !important; }
  :root[data-mf-theme="dark"] .modal-content { background: #16201d; color: #e4eae6; }

  /* ---------- mastheads (Education, Jobs, Registry, Certifications, Contact, Forms): bar and hero a shade deeper ---------- */
  :root[data-mf-theme="dark"] .mf-masthead { --mf-brand: #174a40; --mf-header: #12332d; }
  :root[data-mf-theme="dark"] .mf-nav__login:hover { background: #e4eae6; border-color: #e4eae6; color: #0e5c4f; }

  /* ---------- home page ---------- */
  :root[data-mf-theme="dark"] .mf-home-card,
  :root[data-mf-theme="dark"] .mf-home-updates .mf-home-promo { background: #16201d; border-color: #2b3a35; }
  :root[data-mf-theme="dark"] .mf-home-how__intro p:last-child a + a { background: transparent; color: #6cc7ae; border-color: #2a6b5c; }
  :root[data-mf-theme="dark"] .mf-home-hero__main p:last-child a:first-child { background: #e4eae6; color: #0e5c4f; border-color: #e4eae6; }
  :root[data-mf-theme="dark"] .mf-home-hero__main p:last-child a:first-child::after { color: #0e5c4f; }
  :root[data-mf-theme="dark"] .mf-home-hero__main p:last-child a:first-child:hover { background: #ffffff; }

  /* ---------- content snippets: white cards become surfaces ---------- */
  :root[data-mf-theme="dark"] .card:has(> .shape-background-header) .card,
  :root[data-mf-theme="dark"] .mf-complaint__card, :root[data-mf-theme="dark"] .mf-complaint__faq details,
  :root[data-mf-theme="dark"] .mf-contact__card,
  :root[data-mf-theme="dark"] .mf-employer__card,
  :root[data-mf-theme="dark"] .mf-endo__path,
  :root[data-mf-theme="dark"] .mf-faq__list details,
  :root[data-mf-theme="dark"] .mf-reports__card,
  :root[data-mf-theme="dark"] .mf-reports__sections a:hover { background: #16201d; }
  :root[data-mf-theme="dark"] .mf-complaint__docs a, :root[data-mf-theme="dark"] .mf-contact__links a { background: #16201d; }
  :root[data-mf-theme="dark"] .mf-employer .mf-employer__btn:hover,
  :root[data-mf-theme="dark"] .mf-employer .mf-employer__close:hover { background: #e4eae6; border-color: #e4eae6; }

  /* ---------- certification pages (mf-cert-pages.css writes its colours as literals) ---------- */
  :root[data-mf-theme="dark"] .text-block,
  :root[data-mf-theme="dark"] .content .text-block { background: #16201d; border-color: #2b3a35; color: #e4eae6; box-shadow: none; }
  :root[data-mf-theme="dark"] .content p, :root[data-mf-theme="dark"] .content li,
  :root[data-mf-theme="dark"] .form-headercardgreen,
  :root[data-mf-theme="dark"] .text-block h1, :root[data-mf-theme="dark"] .text-block h2, :root[data-mf-theme="dark"] .text-block h3,
  :root[data-mf-theme="dark"] .text-block h4, :root[data-mf-theme="dark"] .text-block h5 { color: #e4eae6; }
  :root[data-mf-theme="dark"] .text-block em { color: #a9b8b0; }
  :root[data-mf-theme="dark"] .form-headercardgreen span { color: #e2c26a; }
  :root[data-mf-theme="dark"] .text-block a[href]:where(:not([class*="btn"]):not([class*="button"])),
  :root[data-mf-theme="dark"] .content a[href]:where(:not([class*="btn"]):not([class*="button"])) { color: #6cc7ae; }
  :root[data-mf-theme="dark"] .text-block a[href]:where(:not([class*="btn"]):not([class*="button"])):hover { color: #8fd8c3; }
  :root[data-mf-theme="dark"] .form-headercardgreen span::before,
  :root[data-mf-theme="dark"] .form-headercardgreen span::after { background: #16201d; }
  :root[data-mf-theme="dark"] .list-container { color: #e4eae6; }
  :root[data-mf-theme="dark"] .list-container,
  :root[data-mf-theme="dark"] .qmha-path-card-footer,
  :root[data-mf-theme="dark"] .mf-rail-card,
  :root[data-mf-theme="dark"] .text-block table th { background: #1b2723; border-color: #2b3a35; color: #e4eae6; }
  :root[data-mf-theme="dark"] .text-block table tbody tr:nth-child(even) td { background: #182320; }
  :root[data-mf-theme="dark"] .text-block table th, :root[data-mf-theme="dark"] .text-block table td { border-color: #2b3a35 !important; }
  :root[data-mf-theme="dark"] .requirement-icons .icon-wrap,
  :root[data-mf-theme="dark"] .video-card,
  :root[data-mf-theme="dark"] .qmha-path-card { background: #16201d; border-color: #2b3a35; }
  :root[data-mf-theme="dark"] .requirement-icons .icon-wrap i { color: #6cc7ae; }
  :root[data-mf-theme="dark"] .text-block .btn-secondary, :root[data-mf-theme="dark"] .text-block .btn-outline-primary,
  :root[data-mf-theme="dark"] .text-block .btn-light,
  :root[data-mf-theme="dark"] #certemyModal .modal-footer .btn-secondary { background: transparent; border-color: #2a6b5c; color: #6cc7ae; }
  :root[data-mf-theme="dark"] .text-block .btn-secondary:hover, :root[data-mf-theme="dark"] .text-block .btn-outline-primary:hover,
  :root[data-mf-theme="dark"] .text-block .btn-light:hover,
  :root[data-mf-theme="dark"] #certemyModal .modal-footer .btn-secondary:hover { background: #1b2723; color: #8fd8c3; }
  :root[data-mf-theme="dark"] .mf-rail-card--docs .btn, :root[data-mf-theme="dark"] .mf-rail-card--links .btn { background: transparent !important; border-color: #2a6b5c !important; color: #6cc7ae !important; }
  :root[data-mf-theme="dark"] .mf-rail-card--docs .btn:hover, :root[data-mf-theme="dark"] .mf-rail-card--links .btn:hover { background: #16201d !important; color: #8fd8c3 !important; }
  :root[data-mf-theme="dark"] #certemyModal .modal-content { background: #16201d; border-color: #2b3a35; color: #e4eae6; }
  :root[data-mf-theme="dark"] #certemyModal .modal-footer { background: #1b2723; border-top-color: #2b3a35; }
  :root[data-mf-theme="dark"] #certemyModal .modal-body strong { color: #6cc7ae; }
  :root[data-mf-theme="dark"] #certemyModal .modal-body h4 { border-bottom-color: #2b3a35; }
  :root[data-mf-theme="dark"] .single-video-wrap iframe { border-color: #2b3a35; }
  /* headings typed into page content and the heading classes (their light rules can tie on specificity and sit later) */
  :root[data-mf-theme="dark"] .content :is(h1, h2, h3, h4, h5, h6),
  :root[data-mf-theme="dark"] .highlight-bar-header { color: #e4eae6 !important; }
  :root[data-mf-theme="dark"] .content h1 { border-bottom-color: #2b3a35; }
  /* About / Board & Staff: the intro row is a white card; the old logo image there has a dark-green wordmark, so its
     column keeps a light plate until the page uses the new on-dark logo */
  :root[data-mf-theme="dark"] .card:has(> .shape-background-header) > .card-body > .row:first-child { background: #16201d; border-color: #2b3a35; }
  :root[data-mf-theme="dark"] .card:has(> .shape-background-header) > .card-body > .row:first-child > [class*="col"]:first-child { background: #e9efec; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-hero,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-callout,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-how {
    --h-ink: #e4eae6; --h-dim: #a9b8b0; --h-brand: #2a8c77; --h-brand-dark: #3a9c86; --h-header: #12332d; --h-gold-ink: #e2c26a; --h-cream: #2a2614; --h-cream-line: #4a4020; --h-line: #2b3a35; --h-mint: #16201d;
  }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .card:has(> .shape-background-header) {
    --a-ink: #e4eae6; --a-dim: #a9b8b0; --a-brand: #2a8c77; --a-brand-dark: #3a9c86; --a-header: #12332d; --a-gold-ink: #e2c26a; --a-cream: #2a2614; --a-cream-line: #4a4020; --a-line: #2b3a35; --a-mint: #16201d;
  }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-contact,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-complaint {
    --c-ink: #e4eae6; --c-dim: #a9b8b0; --c-brand: #2a8c77; --c-brand-dark: #3a9c86; --c-header: #12332d; --c-gold-ink: #e2c26a; --c-cream: #2a2614; --c-cream-line: #4a4020; --c-line: #2b3a35; --c-mint: #16201d;
  }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-employer,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-endo {
    --e-ink: #e4eae6; --e-dim: #a9b8b0; --e-brand: #2a8c77; --e-brand-dark: #3a9c86; --e-header: #12332d; --e-gold-ink: #e2c26a; --e-cream: #2a2614; --e-cream-line: #4a4020; --e-line: #2b3a35; --e-mint: #16201d;
  }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-faq {
    --f-ink: #e4eae6; --f-dim: #a9b8b0; --f-brand: #2a8c77; --f-brand-dark: #3a9c86; --f-header: #12332d; --f-gold-ink: #e2c26a; --f-cream: #2a2614; --f-cream-line: #4a4020; --f-line: #2b3a35; --f-mint: #16201d;
  }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-reports {
    --r-ink: #e4eae6; --r-dim: #a9b8b0; --r-brand: #2a8c77; --r-brand-dark: #3a9c86; --r-header: #12332d; --r-gold-ink: #e2c26a; --r-cream: #2a2614; --r-cream-line: #4a4020; --r-line: #2b3a35; --r-mint: #16201d;
  }
  /* www.mhacbo.org dark mode: hand-written rules (2026-10-30 night). Same colours and switch as the Caspio side
     (mhacbo-forms tools/flex-dark/dark-rules.css). Written against :root:not([data-mf-theme="light"]).mf-dark-pilot; build-site-css.js
     adds the per-snippet token blocks (TOKEN_SCOPES in build-site-css.js) and emits the device-following copy.
     Snippets carry their CSS in the page body; every rule here outranks theirs by specificity, not order. */

  /* ---------- the frame ---------- */
  :root:not([data-mf-theme="light"]).mf-dark-pilot { color-scheme: dark; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot body { background: #0f1614 !important; color: #e4eae6; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .navbar.bg-dark,
  :root:not([data-mf-theme="light"]).mf-dark-pilot footer.footer.bg-dark { background: #0b1f1b !important; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot h1, :root:not([data-mf-theme="light"]).mf-dark-pilot h2, :root:not([data-mf-theme="light"]).mf-dark-pilot h3,
  :root:not([data-mf-theme="light"]).mf-dark-pilot h4, :root:not([data-mf-theme="light"]).mf-dark-pilot h5, :root:not([data-mf-theme="light"]).mf-dark-pilot h6 { color: inherit; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .content a:not([class]),
  :root:not([data-mf-theme="light"]).mf-dark-pilot main a:not([class]) { color: #6cc7ae; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot hr { border-color: #2b3a35; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .card, :root:not([data-mf-theme="light"]).mf-dark-pilot .list-group-item { background: #16201d; border-color: #2b3a35; color: inherit; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .table { color: inherit; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-muted { color: #a9b8b0 !important; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .modal-content { background: #16201d; color: #e4eae6; }

  /* ---------- mastheads (Education, Jobs, Registry, Certifications, Contact, Forms): bar and hero a shade deeper ---------- */
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-masthead { --mf-brand: #174a40; --mf-header: #12332d; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-nav__login:hover { background: #e4eae6; border-color: #e4eae6; color: #0e5c4f; }

  /* ---------- home page ---------- */
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-card,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-updates .mf-home-promo { background: #16201d; border-color: #2b3a35; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-how__intro p:last-child a + a { background: transparent; color: #6cc7ae; border-color: #2a6b5c; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-hero__main p:last-child a:first-child { background: #e4eae6; color: #0e5c4f; border-color: #e4eae6; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-hero__main p:last-child a:first-child::after { color: #0e5c4f; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-home-hero__main p:last-child a:first-child:hover { background: #ffffff; }

  /* ---------- content snippets: white cards become surfaces ---------- */
  :root:not([data-mf-theme="light"]).mf-dark-pilot .card:has(> .shape-background-header) .card,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-complaint__card, :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-complaint__faq details,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-contact__card,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-employer__card,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-endo__path,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-faq__list details,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-reports__card,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-reports__sections a:hover { background: #16201d; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-complaint__docs a, :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-contact__links a { background: #16201d; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-employer .mf-employer__btn:hover,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-employer .mf-employer__close:hover { background: #e4eae6; border-color: #e4eae6; }

  /* ---------- certification pages (mf-cert-pages.css writes its colours as literals) ---------- */
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .content .text-block { background: #16201d; border-color: #2b3a35; color: #e4eae6; box-shadow: none; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .content p, :root:not([data-mf-theme="light"]).mf-dark-pilot .content li,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .form-headercardgreen,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block h1, :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block h2, :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block h3,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block h4, :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block h5 { color: #e4eae6; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block em { color: #a9b8b0; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .form-headercardgreen span { color: #e2c26a; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block a[href]:where(:not([class*="btn"]):not([class*="button"])),
  :root:not([data-mf-theme="light"]).mf-dark-pilot .content a[href]:where(:not([class*="btn"]):not([class*="button"])) { color: #6cc7ae; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block a[href]:where(:not([class*="btn"]):not([class*="button"])):hover { color: #8fd8c3; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .form-headercardgreen span::before,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .form-headercardgreen span::after { background: #16201d; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .list-container { color: #e4eae6; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .list-container,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .qmha-path-card-footer,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-rail-card,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block table th { background: #1b2723; border-color: #2b3a35; color: #e4eae6; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block table tbody tr:nth-child(even) td { background: #182320; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block table th, :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block table td { border-color: #2b3a35 !important; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .requirement-icons .icon-wrap,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .video-card,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .qmha-path-card { background: #16201d; border-color: #2b3a35; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .requirement-icons .icon-wrap i { color: #6cc7ae; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block .btn-secondary, :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block .btn-outline-primary,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block .btn-light,
  :root:not([data-mf-theme="light"]).mf-dark-pilot #certemyModal .modal-footer .btn-secondary { background: transparent; border-color: #2a6b5c; color: #6cc7ae; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block .btn-secondary:hover, :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block .btn-outline-primary:hover,
  :root:not([data-mf-theme="light"]).mf-dark-pilot .text-block .btn-light:hover,
  :root:not([data-mf-theme="light"]).mf-dark-pilot #certemyModal .modal-footer .btn-secondary:hover { background: #1b2723; color: #8fd8c3; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-rail-card--docs .btn, :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-rail-card--links .btn { background: transparent !important; border-color: #2a6b5c !important; color: #6cc7ae !important; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-rail-card--docs .btn:hover, :root:not([data-mf-theme="light"]).mf-dark-pilot .mf-rail-card--links .btn:hover { background: #16201d !important; color: #8fd8c3 !important; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot #certemyModal .modal-content { background: #16201d; border-color: #2b3a35; color: #e4eae6; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot #certemyModal .modal-footer { background: #1b2723; border-top-color: #2b3a35; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot #certemyModal .modal-body strong { color: #6cc7ae; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot #certemyModal .modal-body h4 { border-bottom-color: #2b3a35; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .single-video-wrap iframe { border-color: #2b3a35; }
  /* headings typed into page content and the heading classes (their light rules can tie on specificity and sit later) */
  :root:not([data-mf-theme="light"]).mf-dark-pilot .content :is(h1, h2, h3, h4, h5, h6),
  :root:not([data-mf-theme="light"]).mf-dark-pilot .highlight-bar-header { color: #e4eae6 !important; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .content h1 { border-bottom-color: #2b3a35; }
  /* About / Board & Staff: the intro row is a white card; the old logo image there has a dark-green wordmark, so its
     column keeps a light plate until the page uses the new on-dark logo */
  :root:not([data-mf-theme="light"]).mf-dark-pilot .card:has(> .shape-background-header) > .card-body > .row:first-child { background: #16201d; border-color: #2b3a35; }
  :root:not([data-mf-theme="light"]).mf-dark-pilot .card:has(> .shape-background-header) > .card-body > .row:first-child > [class*="col"]:first-child { background: #e9efec; }
}