/*
Theme Name: Sedation Certification
Theme URI: https://sedationcertification.com
Author: Sedation Certification
Author URI: https://sedationcertification.com
Description: Custom theme for Sedation Certification — CSRN™ online training for healthcare professionals.
Version: 2.0.4-dev
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
Text Domain: sedation-certification
*/

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0B2545;
  --navy-mid: #1B3A6B;
  /* Header only. Shade, 2026-08-23 round 2: "make the header a little bit lighter,
     look weird, too much contrast." 60% of the way from --navy to --navy-mid, which
     takes the bar off pure-black-navy without going anywhere near the white header
     that was tried and rejected earlier the same day. Measured on this value:
     white 12.8:1, the 75%-alpha nav links 7.9:1 — both clear of AA.
     Round 3 — Shade's 2026-08-29 audit pass: "the header is very dark." Moved the
     rest of the way to --navy-mid (the hero gradient's own light end, so the bar
     stays in the family) plus a hairline bottom edge on .site-nav so the bar
     separates from the hero instead of merging into it. White on #1B3A6B: 10.9:1,
     still clear of AA. */
  --navy-header: #1B3A6B;
  --teal: #0E7C6B;
  --teal-light: #12A68F; /* decorative only from 2026-08-05 — 3.05:1 with white text, fails AA; never use as a text/button background */
  --teal-hover: #0A6155; /* dedicated button hover, 6.9:1 with white (a11y decision 2026-08-05) */
  --teal-pale: #E6F7F4;
  --gold: #C9882A;
  --gold-pale: #FDF4E3;
  --gray-50: #F8F9FB;
  --gray-100: #EEF0F4;
  --gray-200: #D9DCE5;
  --gray-400: #646B79; /* darkened 2026-08-02: #8B909E was 3.19:1 on white — below WCAG AA 4.5:1 for the 12-14px muted text it is used for (9 usages, all text) */
  --gray-700: #3D4455;
  --gray-900: #1A1D26;
  --white: #FFFFFF;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.06);
}

/* ⚠ `scroll-behavior: smooth` without `scroll-padding-top` puts EVERY anchor target
   under the 88px sticky header — measured 2026-08-23: #curriculum landed at y=0 with
   88px of it covered. That is what Shade saw as "header and the course tracker merge
   into each other after you click on one of the course content" on both LearnDash
   course pages, and it was doing the same to every nav jump (#pathways, #curriculum,
   #credential, #resources, #faq) and to /facility/#buy-seats. One property, ~10 pages. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (max-width: 768px) { html { scroll-padding-top: 84px; } }

/* Metric-matched fallback so text set in Inter does not reflow when the webfont swaps
   in (2026-09-01 SEO audit: text is the LCP element on 46 of 69 pages and there was no
   fallback face at all). Standard Inter → Helvetica Neue / Arial adjustments. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

body {
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-900);
  background: var(--white);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── NAV ─── */
/* ⚠⚠ THE HEADER IS SCOPED TO `nav.site-nav`, NOT BARE `nav` — DO NOT UNSCOPE IT.
 * These rules used to be on the bare element selector, and every other <nav> on the site
 * inherited a sticky, 88px-tall, navy bar with a drop shadow. That has now bitten three
 * separate times:
 *   · WooCommerce's breadcrumb (<nav class="woocommerce-breadcrumb">) — the navy slab on
 *     all ten product pages, /shop/ and /cart/;
 *   · WooCommerce's My Account menu (<nav class="woocommerce-MyAccount-navigation">);
 *   · Uncanny's DataTables pagination on /group-management/, which renders <nav> per table
 *     and put a sticky navy block in the middle of the roster — one of them a direct child
 *     of <body>.
 * The two explicit resets further down this file are kept as belt and braces, but the class
 * is what actually stops the next plugin's <nav> from turning into a second site header.
 * ─── HEADER ───
 * Tried white with a navy rule on 2026-08-23; Shade preferred the dark bar and it went
 * back the same day. The two MOBILE fixes found while it was white are kept below — they
 * were real faults the matching navy background had been hiding, not side-effects of the
 * colour. Height is 88px to give the enlarged seal room to breathe. */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-header);
  /* 2026-08-29 audit round 3: hairline edge so the bar reads as its own element
     against the navy hero rather than merging into one dark slab. */
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  /* The old `0 2px 12px rgba(0,0,0,0.25)` was doing most of the damage on white pages: a
     dark bar plus a dark smear under it read as a slab dropped on the page. A hairline
     edge defines the bar; the shadow now only lifts it. */
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 6px rgba(11,37,69,0.10);
}

.nav-logo { display: flex; align-items: center; }
/* The seal is the brand mark and was getting lost at 58px. Sized here rather than only on
   the fallback <img>, because when a custom logo IS set WordPress prints its own markup and
   the inline style in header.php never applies. `nav` grew to 88px to keep air around it. */
.nav-logo img, .nav-logo .custom-logo { height: 70px; width: auto; object-fit: contain; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin-left: 2.5rem;
  margin-right: auto;
}

.nav-links a {
  /* 2026-08-29 re-check round: "the header words could be slightly larger" —
     16px/75% → 17px/85%. The alpha bump also restores the contrast headroom the
     75% figure was measured at on the old darker bar. */
  color: rgba(255,255,255,0.85);
  font-size: 17px;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-links a:hover { color: var(--white); }

.nav-cta {
  background: var(--teal);
  color: var(--white) !important;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600 !important;
  font-size: 15px; /* 2026-08-29: keep pace with the larger nav links */
  transition: background 0.15s !important;
}

.nav-cta:hover { background: var(--teal-hover) !important; }

/* ─── ACCOUNT / LOG-IN BUTTON IN THE NAV (2026-08-23) ───
 * Deliberately a ghost button, not a second filled one: "Enroll Now" is the page's primary
 * action and must stay the only solid block of teal in the bar. `.nav-links` carries
 * margin-right:auto, so this element lands hard right on desktop without any extra layout. */
/* "Create account" sits beside the log-in button as a quiet text link, not a third button —
 * the bar already has one filled CTA (Enroll Now) and one outlined control, and a third block
 * would flatten the hierarchy. Hidden under 769px purely for room: measured, the labelled
 * pair does not fit beside the logo and the hamburger on a 320-360px phone. Phone users still
 * reach Register one tap deeper, via the account page the log-in button opens. */
.nav-register {
  flex-shrink: 0;
  margin-left: 22px;
  color: rgba(255,255,255,0.82);
  font-size: 15px; /* 2026-08-29: keep pace with the larger nav links */
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav-register:hover, .nav-register:focus-visible { color: var(--white); text-decoration: underline; }
@media (max-width: 768px) { .nav-register { display: none; } }

.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-left: 14px;
  padding: 7px 15px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.92);
  font-size: 15px; /* 2026-08-29: keep pace with the larger nav links */
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nav-account:hover,
.nav-account:focus-visible {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.75);
  color: var(--white);
}
.nav-account svg { display: block; flex-shrink: 0; }

/* ─── HERO ─── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 120px 2rem 110px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(14,124,107,0.15);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(14,124,107,0.10);
  pointer-events: none;
}

/* --- HERO PHOTOGRAPH (2026-08-23, Shade: seal out of the hero, photo in; seal stays in the header) ---
 * The photo is a layer inside .hero, under a navy scrim. The scrim is a radial gradient so the
 * centre (where the headline sits) stays dark enough for white text while the edges keep the
 * picture readable. .hero already has position:relative + overflow:hidden. */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; } /* 2026-09-06: WebP <picture> wrapper, same box as the bare <img> */
.hero-media .hero-photo {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 50%;
  display: block;
}
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  /* Lightened 2026-08-23 (Shade: "209 light") to show more of the photograph. NOT eyeballed:
     the crop and this exact gradient were replicated in Python over the real 6000x4000 file and
     sampled inside the measured text boxes — headline 7.9:1, sub-paragraph 6.1:1, badge 5.4:1,
     all past WCAG AA. The previous, heavier scrim measured 10.9:1; the headroom is what paid for
     the extra photograph. Re-measure if the picture changes — a brighter one eats the margin. */
  background: radial-gradient(ellipse 92% 78% at 50% 45%,
              rgba(11,37,69,0.86) 0%, rgba(11,37,69,0.78) 45%,
              rgba(11,37,69,0.55) 80%, rgba(11,37,69,0.42) 100%);
}
.hero::before, .hero::after { z-index: 1; }
.hero > *:not(.hero-media) { position: relative; z-index: 2; }
@media (max-width: 768px) { .hero-media .hero-photo { object-position: center 45%; } }

.hero-badge {
  display: inline-block;
  background: rgba(14,124,107,0.25);
  border: 1px solid rgba(14,166,143,0.4);
  color: #5DDFC8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hero h1 {
  font-family: 'Merriweather', serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.hero p {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,0.8);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
/* The brand line, demoted from the H1 on 2026-09-05 so the H1 can carry the head term.
   Serif like the headline, sized between it and the sub-paragraph; 0.92 alpha keeps it
   above the 6.1:1 the sub-paragraph measured on the scrim. */
.hero p.hero-kicker {
  font-family: 'Merriweather', serif;
  font-size: clamp(18px, 2.6vw, 26px);
  color: rgba(255,255,255,0.92);
  max-width: 700px;
  margin: 0 auto 16px;
  line-height: 1.35;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  border: none;
  display: inline-block;
}

.btn-primary:hover { background: var(--teal-hover); transform: translateY(-1px); color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--white);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1.5px solid rgba(255,255,255,0.4);
  display: inline-block;
}

.btn-outline:hover { background: rgba(255,255,255,0.08); color: var(--white); }

/* ─── STATS BAR ─── */
.stats-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
}

.stats-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-item {
  padding: 24px 20px;
  text-align: center;
  border-right: 1px solid var(--gray-100);
}

.stat-item:last-child { border-right: none; }

.stat-number {
  font-family: 'Merriweather', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 500;
}

/* ─── APPROVED STRIP ─── */
.approved-strip {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 20px 2rem;
  text-align: center;
}

.approved-text {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 500;
}

.approved-text strong { color: var(--gray-700); }
/* 2026-09-13: outbound authority links (CA BRN, Joint Commission) keep the strip's colour and
   are underlined so they read as links without changing the palette. */
.approved-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.approved-text a:hover { color: var(--teal); }

/* ─── SECTIONS ─── */
.section { padding: 80px 2rem; }
.section-alt { background: var(--gray-50); }

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}

.section-title {
  font-family: 'Merriweather', serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--gray-700);
  max-width: 560px;
  line-height: 1.7;
}

.section-header { margin-bottom: 52px; }
.section-header.center { text-align: center; }
.section-header.center .section-subtitle { margin: 0 auto; }

/* ─── PATHWAY CARDS ─── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  padding: 36px 32px;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.card.featured { border-color: var(--teal); border-width: 2px; }

.card-badge {
  position: absolute;
  top: -12px; left: 24px;
  background: var(--teal);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}

.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
}

.card-icon.teal { background: var(--teal-pale); }
.card-icon.gold { background: var(--gold-pale); }
.card-icon.navy { background: #E8EDF4; }

/* 2026-08-23: photos instead of emoji tiles on the pathway cards (Shade, review item 1) */
.card-photo { display: block; width: calc(100% + 64px); max-width: none; height: 240px; object-fit: cover; margin: -36px -32px 22px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
/* featured card keeps the same padding (36px 32px) — its 2px border sits outside the photo, no override needed */
.credential-photo { width: 180px; height: 220px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; box-shadow: var(--shadow-sm); }
/* Stacked on mobile the slot becomes a wide letterbox; the source is a tall portrait, so a
 * centred cover-crop would land on her scrubs. Bias the crop upward to keep the face in. */
@media (max-width: 768px) { .credential-photo { width: 100%; height: 200px; object-position: center 18%; } }

.card h3 { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }

.card p { font-size: 14px; color: var(--gray-700); line-height: 1.65; flex: 1; margin-bottom: 24px; }

.card ul { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 8px; }

.card ul li {
  font-size: 14px;
  color: var(--gray-700);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.card ul li::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

.card-price { font-size: 28px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.card-price span { font-size: 14px; font-weight: 500; color: var(--gray-400); }

.btn-outline-teal {
  background: transparent;
  color: var(--teal);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1.5px solid var(--teal);
  display: inline-block;
  text-align: center;
  width: 100%;
}

.btn-outline-teal:hover { background: var(--teal-pale); color: var(--teal); }

/* Secondary "straight to the product page" link under a pathway card's primary CTA (2026-09-06).
   Uses --teal, the same on-white teal already carried by .btn-outline-teal — measured 5.10:1
   against white, so it passes AA for normal text and adds no new contrast failure. */
.card-detail-link {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}
.card-detail-link:hover { text-decoration: underline; }

/* ─── CURRICULUM ─── */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.module-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color 0.15s;
}

.module-card:hover { border-color: var(--teal); }

.module-num {
  width: 36px; height: 36px;
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.module-num.teal-bg { background: var(--teal); }

.module-text h3 { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.35; }
.module-text p { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

/* ─── SPECIALTIES STRIP ─── */
.specialties-strip {
  background: var(--navy);
  padding: 56px 2rem;
  color: var(--white);
}

.specialties-inner { max-width: 1100px; margin: 0 auto; }

.specialties-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  text-align: center;
}

.specialties-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.specialty-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 20px;
}

/* ─── FEATURES ─── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.feature { display: flex; gap: 18px; align-items: flex-start; }

.feature-icon {
  width: 44px; height: 44px;
  background: var(--teal-pale);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 2026-08-23 (Shade): the six emoji in this row became teal line icons, matching the
 * Additional Resources set. The pale tile stays; only its contents changed. */
.feature-icon { color: var(--teal); }
.feature-icon svg { display: block; width: 22px; height: 22px; }

.feature h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--gray-700); line-height: 1.65; }

/* ─── CREDENTIAL ─── */
.credential-box {
  background: var(--gold-pale);
  border: 1px solid #E8C87A;
  border-radius: var(--radius-md);
  padding: 36px 40px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.credential-icon { font-size: 48px; flex-shrink: 0; }

.credential-box h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.credential-box p { font-size: 14px; color: var(--gray-700); line-height: 1.7; }

.credential-detail {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.credential-detail-item { font-size: 13px; font-weight: 600; color: var(--navy); }
.credential-detail-item span { display: block; font-weight: 400; color: var(--gray-400); font-size: 12px; margin-top: 2px; }
.credential-detail-item a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credential-detail-item a:hover { color: var(--teal); }

/* ─── FAQ ─── */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  gap: 16px;
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}

.faq-question:hover { background: var(--gray-50); }

.faq-chevron {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  transition: transform 0.2s, background 0.15s;
}

.faq-item.open .faq-chevron { transform: rotate(180deg); background: var(--teal-pale); color: var(--teal); }

.faq-answer {
  display: none;
  padding: 16px 24px 20px;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.7;
  border-top: 1px solid var(--gray-100);
}

.faq-item.open .faq-answer { display: block; }

/* ─── RESOURCES ─── */
/* Six cards. auto-fill gave 4-then-2 at desktop width, which read as a mistake;
   Shade asked for an even block, so the column count is fixed rather than fluid. */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .resources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .resources-grid { grid-template-columns: 1fr; } }

.resource-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.resource-card:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }

.resource-icon { font-size: 24px; margin-bottom: 12px; color: var(--teal); }
.resource-icon svg { display: block; width: 26px; height: 26px; }
.resource-card h3 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.resource-card p { font-size: 13px; color: var(--gray-400); line-height: 1.5; }

/* ─── CONTACT FORM ─── */
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.contact-info-icon {
  width: 40px; height: 40px;
  background: var(--teal-pale);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  /* The SVGs use stroke="currentColor"; without this they inherit near-black body text
     and read as grey smudges on the pale teal tile. Teal matches the Resources and
     "Why Sedation Certification" icon sets, so the three sets look like one family. */
  color: var(--teal);
}
.contact-info-icon svg { display: block; }

.contact-info-label { font-size: 13px; color: var(--gray-400); font-weight: 500; margin-bottom: 2px; }
.contact-info-value { font-size: 15px; font-weight: 600; color: var(--navy); }
.contact-info-sub { font-size: 13px; color: var(--gray-400); }

.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

/* 2026-08-23 — REMOVED a two-column grid on the bare class `.form-row`.
 * WooCommerce emits `class="woocommerce-form-row form-row"` on every row of the login,
 * register, checkout and address forms, so this theme rule was silently laying those rows
 * out as a 2-up grid: the label landed in one cell and the input in the other, which is why
 * account and checkout labels sat away from their fields. The only markup that ever wanted
 * this grid was the old hard-coded contact form, replaced by Fluent Forms on 2026-08-23, so
 * the rule now has no owner in the theme. Fluent Forms' own two-column row is handled by
 * `.frm-fluent-form .ff-t-container`. */

.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  color: var(--gray-900);
  outline: none;
  transition: border-color 0.15s;
  background: white;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--teal-light);
}

.form-textarea { resize: vertical; }

.form-select { appearance: none; cursor: pointer; }

.form-submit {
  width: 100%;
  background: var(--teal);
  color: white;
  padding: 13px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}

.form-submit:hover { background: var(--teal-hover); }

.form-success {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--teal-pale);
  border-radius: 8px;
  font-size: 14px;
  color: var(--teal);
  font-weight: 500;
  text-align: center;
}

/* ─── FLUENT FORMS — THEME SKIN (2026-08-23) ───
 * The home-page contact form and the facility-quote form are Fluent Forms. This maps the
 * plugin's markup onto the theme's own form design (.form-label / .form-input / .form-submit),
 * so the two forms look native instead of like a plugin default. Scoped to .frm-fluent-form so
 * nothing else is touched; the plugin's own stylesheets still load underneath. */
.frm-fluent-form .ff-el-group { margin-bottom: 16px; }

/* NOTE ON SPECIFICITY: fluentform-public-default.css loads after the theme stylesheet, so
 * matching the plugin's own selector strength is not enough — these rules deliberately carry one
 * more level (.ff-el-group + element type) so the theme wins without !important. */
.frm-fluent-form .ff-el-group .ff-el-input--label label,
.frm-fluent-form .ff-el-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.4;
}
.frm-fluent-form .ff-el-group .ff-el-input--label.ff-el-is-required label:after { color: #c0392b; }

.frm-fluent-form .ff-el-group input.ff-el-form-control,
.frm-fluent-form .ff-el-group select.ff-el-form-control,
.frm-fluent-form .ff-el-group textarea.ff-el-form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  color: var(--gray-900);
  background: var(--white);
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s;
}
.frm-fluent-form .ff-el-group input.ff-el-form-control:focus,
.frm-fluent-form .ff-el-group select.ff-el-form-control:focus,
.frm-fluent-form .ff-el-group textarea.ff-el-form-control:focus {
  border-color: var(--teal-light);
  box-shadow: none;
}
.frm-fluent-form .ff-el-group input.ff-el-form-control::placeholder,
.frm-fluent-form .ff-el-group textarea.ff-el-form-control::placeholder { color: #8a90a0; }
.frm-fluent-form .ff-el-group textarea.ff-el-form-control { resize: vertical; min-height: 110px; }
.frm-fluent-form .ff-el-group select.ff-el-form-control { cursor: pointer; }

/* two-column container (first/last name) matches .form-row, and stacks on small screens */
.frm-fluent-form .ff-t-container { display: flex; gap: 16px; }
.frm-fluent-form .ff-t-container > .ff-t-cell { flex: 1 1 0; min-width: 0; }
@media (max-width: 560px) {
  .frm-fluent-form .ff-t-container { display: block; }
  .frm-fluent-form .ff-t-container > .ff-t-cell + .ff-t-cell { margin-top: 16px; }
}

.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff-btn-submit.ff_btn_style {
  width: 100%;
  background: var(--teal);
  color: var(--white);
  padding: 13px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.frm-fluent-form .ff-btn-submit:hover { background: var(--teal-hover); }
.frm-fluent-form .ff_submit_btn_wrapper { margin-top: 4px; }

/* validation + success messages in the theme's voice */
.frm-fluent-form .error-text, .frm-fluent-form .text-danger { font-size: 13px; color: #c0392b; }
.ff-message-success {
  padding: 14px 16px;
  background: var(--teal-pale);
  border: 1px solid rgba(14,124,107,0.25);
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--teal);
}
.ff-message-success strong { color: var(--navy); }

/* the home page keeps the raised white card around the form */
.hv-ff-card .frm-fluent-form { margin: 0; }

/* ─── CTA STRIP ─── */
.contact-strip {
  background: var(--teal);
  padding: 60px 2rem;
  text-align: center;
  color: var(--white);
}

.contact-strip h2 {
  font-family: 'Merriweather', serif;
  font-size: clamp(22px, 3vw, 34px);
  margin-bottom: 12px;
}

/* 2026-09-13: 0.85 rendered #DBEBE9 on --teal = 4.15:1 (Lighthouse a11y flag); 0.92 = #ECF5F3, 4.60:1. */
.contact-strip p { font-size: 16px; color: rgba(255,255,255,0.92); margin-bottom: 32px; }

.btn-white {
  background: var(--white);
  color: var(--teal);
  padding: 14px 36px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  display: inline-block;
  transition: opacity 0.15s;
}

.btn-white:hover { opacity: 0.9; color: var(--teal); }

/* ─── FOOTER ─── */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  padding: 48px 2rem 32px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col h2,
.footer-col .footer-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 16px;
  letter-spacing: 0.4px;
  line-height: inherit;
}

.footer-col p { font-size: 13px; line-height: 1.7; }

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.6); transition: color 0.15s; }
.footer-col ul li a:hover { color: var(--white); }

.footer-contact-item { font-size: 13px; margin-bottom: 8px; }
.footer-contact-label { display: inline-block; min-width: 64px; font-weight: 700; color: var(--white); letter-spacing: 0.3px; }
.footer-contact-label::after { content: '—'; margin: 0 8px 0 6px; color: rgba(255,255,255,0.45); font-weight: 400; }
.footer-contact-item a { color: rgba(255,255,255,0.6); white-space: nowrap; }
.footer-contact-item a:hover { color: var(--white); }

.footer-divider {
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 1100px;
  margin: 0 auto 24px;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-disclaimer {
  max-width: 1100px;
  margin: 20px auto 0;
  font-size: 11px;
  line-height: 1.6;
  /* 2026-09-13: 0.35 rendered #607186 on --navy = 3.08:1 (Lighthouse a11y flag); 0.55 = #919DAB, 5.58:1. */
  color: rgba(255,255,255,0.55);
}

/* ─── REVIEWS (2026-09-13, site review A1) — shows only when /reviews/ is published.
   v2 same day, Shade: "I don't like the big blue boxes and the names — I can barely see the names and the big box
   isn't necessary." No band, no cards: plain quotes on the page ground with a thin teal rule, names in bold navy. ─── */
.reviews-band { background: var(--white); color: var(--navy); padding: 72px 2rem; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.reviews-band .section-tag--light { color: var(--teal); }
.reviews-band .section-title--light { color: var(--navy); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 8px; }
.review { margin: 0; padding: 4px 0 4px 20px; background: none; border: 0; border-left: 3px solid var(--teal); border-radius: 0; }
.review p { font-family: 'Merriweather', serif; font-size: 17px; line-height: 1.65; color: var(--navy); margin: 0 0 12px; }
.review cite.review-by { display: block; font-style: normal; font-size: 15px; font-weight: 700; color: var(--navy); }
.reviews-more { text-align: center; margin: 32px 0 0; }
.reviews-more a { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.reviews-more a:hover { color: var(--teal-hover); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Reviews page (/reviews/) — same treatment: no box, thin rule, the name readable */
.entry-content .hv-review { margin: 0 0 30px; padding: 2px 0 2px 22px; border-left: 3px solid var(--teal); background: none; border-radius: 0; }
.entry-content .hv-review p { margin: 0 0 8px; font-family: 'Merriweather', serif; font-size: 17px; line-height: 1.7; color: var(--navy); }
.entry-content .hv-review cite.review-by { display: block; font-style: normal; font-size: 15px; font-weight: 700; color: var(--navy); }
/* 2026-09-13 (Shade): the dash sits AFTER the name, in the text ("Anna F. — RN"), not as a ::before. */
/* ⚠ The attribution is a <cite>, never a <footer>: `footer {}` above styles the SITE footer by bare element selector
   and turned every quote's attribution into a navy block (found 2026-09-13, Shade: "big blue boxes"). */

/* About page portrait (2026-09-13, Shade's photos of Ron) — floats right beside "The Captain" on wide screens,
   full-width above the text on phones. */
.entry-content .hv-portrait { float: right; clear: right; width: 300px; max-width: 42%; margin: 6px 0 18px 32px; }   /* clear: right — two portraits on /about/ stack instead of overlapping (2026-09-13) */
.entry-content .hv-portrait img { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.entry-content .hv-portrait figcaption { font-size: 13px; color: var(--gray-400); margin-top: 8px; line-height: 1.45; }
@media (max-width: 640px) { .entry-content .hv-portrait { float: none; width: 100%; max-width: 360px; margin: 0 auto 24px; } }

/* About page wide photo (2026-09-13, Shade: "see the handshake and the other individual clearly") — not floated,
   sits between sections at up to 720px so the whole photograph reads. */
.entry-content .hv-photo-wide { clear: both; margin: 28px auto 34px; max-width: 720px; text-align: center; }
.entry-content .hv-photo-wide img { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.entry-content .hv-photo-wide figcaption { font-size: 13px; color: var(--gray-400); margin-top: 8px; line-height: 1.45; }

/* Sample certificate figure (2026-09-13, site review A3) — /enroll/ and the product page, once approved */
.hv-sample-cert { margin: 28px auto; max-width: 760px; text-align: center; }
.hv-sample-cert img { width: 100%; height: auto; border: 1px solid var(--gray-100); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.hv-sample-cert figcaption { font-size: 13px; color: var(--gray-400); margin-top: 10px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  nav.site-nav { padding: 0 1rem; }
  .nav-links { display: none; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--gray-100); }
  .section { padding: 56px 1.25rem; }
  .credential-box { flex-direction: column; gap: 16px; padding: 28px 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .contact-form-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .hero { padding: 60px 1.25rem 56px; }
}


.nav-links > li > a { white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════════════
   v2.0.0 EXTENSIONS (build/theme-v2) — dropdown nav · WooCommerce · state pages
   ════════════════════════════════════════════════════════════════════════ */

/* ─── DROPDOWN / SUBMENU NAV ─── */
.nav-links li { position: relative; }
.nav-links .menu-item-has-children > a::after {
  content: "▾"; font-size: 10px; margin-left: 6px; opacity: 0.6;
}
.nav-links .sub-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links li.submenu-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-links .sub-menu li { width: 100%; }
.nav-links .sub-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--gray-700) !important;
  font-size: 13.5px;
  white-space: nowrap;
}
.nav-links .sub-menu a:hover { background: var(--teal-pale); color: var(--navy) !important; }
/* second level (rare) opens to the side */
.nav-links .sub-menu .sub-menu { top: 0; left: 100%; }

/* ─── MOBILE NAV (hamburger + slide-down panel) ─── */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;
  color: var(--white); font-size: 22px; line-height: 1;
}
@media (max-width: 768px) {
  .nav-toggle { display: block; order: 3; }
  /* the button stays visible when the menu is collapsed — that is the point of it */
  /* keep the word — measured, it fits from 320px up, and "Log in" beats a lone glyph for
     this audience. min-height gives a 42px tap target next to the 44px hamburger. */
  .nav-account { order: 2; margin-left: auto; margin-right: 6px; padding: 8px 13px;
                 font-size: 13.5px; min-height: 42px; }
  .nav-account svg { width: 15px; height: 15px; }
  /* Flipped with the header on 2026-08-23. This panel was navy with white links; the
     moment the bar went white the links became dark-on-navy here and the submenu became
     white-on-white. Both are invisible, and neither shows on desktop — the whole block
     only renders under 769px with the menu open. */
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    /* ⚠ The desktop rule sets margin-left:2.5rem / margin-right:auto. On an absolutely
       positioned panel that margin still applies, so the drop-down sat 40px in from the
       left edge and never reached it. Navy-on-navy hid it for months; it only showed up
       during the brief white-header experiment. KEEP THIS even though the bar is dark again. */
    margin: 0;
    background: var(--navy);
    flex-direction: column;
    padding: 10px 16px 18px;
    gap: 2px;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .nav-links { display: flex; }
  .nav-links a { display: block; padding: 12px 8px; }
  .nav-links .sub-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    background: rgba(255,255,255,0.06);
    border: none; box-shadow: none;
    padding: 0 0 0 16px;
  }
  .nav-links li.submenu-open > .sub-menu { display: block; }
  .nav-links .sub-menu a { color: rgba(255,255,255,0.75) !important; }
  .nav-links .sub-menu a:hover { background: rgba(255,255,255,0.08); color: var(--white) !important; }
}

/* ─── WOOCOMMERCE — styled to the design system ─── */

/* ══ THE BREADCRUMB IS A <nav> ═════════════════════════════════════════════════
 * WooCommerce prints its breadcrumb as `<nav class="woocommerce-breadcrumb">`, so it
 * inherited every one of this theme's sticky-header `nav {}` declarations: navy
 * background, 88px tall, display:flex, position:sticky, a drop shadow. That is the
 * navy slab under the header on all ten product pages, /shop/ and /cart/ — the single
 * biggest part of Shade's "formatting issue, fix it" ×10. Same trap that
 * `nav.woocommerce-MyAccount-navigation` hit further down this file; reset the same way.
 * ⚠ If a third <nav> ever appears from a plugin, it will inherit these too. */
nav.woocommerce-breadcrumb {
  position: static; top: auto; z-index: auto;
  display: block; height: auto; padding: 0;
  background: none; box-shadow: none; border-bottom: none;
  margin: 0 0 22px;
  font-size: 13px; color: var(--gray-400);
}
nav.woocommerce-breadcrumb a { color: var(--gray-700); font-weight: 500; }
nav.woocommerce-breadcrumb a:hover { color: var(--teal); text-decoration: underline; }

/* ══ SINGLE PRODUCT ════════════════════════════════════════════════════════════
 * Woo ships the gallery, the summary and the tabs as three stacked blocks and leaves
 * the layout to the theme. This theme had none — so the image ran full width, the
 * summary sat under it, and the add-to-cart row was two floated boxes. Grid here
 * rather than Woo's float classes so the two columns are real columns. */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  grid-template-areas: "gallery summary" "tabs tabs" "related related";
  gap: 0 48px;
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery { grid-area: gallery; width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product div.summary { grid-area: summary; width: 100% !important; float: none !important; margin: 0; }
.woocommerce div.product .woocommerce-tabs { grid-area: tabs; }
.woocommerce div.product section.related { grid-area: related; }

.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%; height: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.woocommerce div.product .product_title {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: clamp(24px, 2.6vw, 33px); line-height: 1.25;
  margin: 0 0 14px;
}
.woocommerce div.product p.price {
  font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 30px; font-weight: 700;
  color: var(--navy); margin: 0 0 18px; line-height: 1.1;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 16px; line-height: 1.75; color: var(--gray-700);
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--gray-200);
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* The add-to-cart row. Woo floats the quantity and the button; on a virtual course
   product the pair rendered as two small boxes with nothing tying them together. */
.woocommerce div.product form.cart { display: block; margin: 0; }
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none; }
.woocommerce div.product form.cart .quantity {
  float: none !important; display: inline-flex; align-items: center;
  margin: 0 12px 0 0; vertical-align: middle;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 84px; height: 46px; text-align: center;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy);
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
  float: none !important; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 30px; font-size: 16px; vertical-align: middle;
}
/* Uncanny's "name this group" field on the seat products — a bare label and input. */
.woocommerce div.product form.cart .group-name-field { margin: 0 0 16px; max-width: 420px; }
.woocommerce div.product form.cart .group-name-field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.woocommerce div.product form.cart .group-name-field input {
  width: 100% !important; height: 44px; padding: 10px 13px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 15px;
}
.woocommerce div.product form.cart .group-name-field input:focus,
.woocommerce div.product form.cart .quantity input.qty:focus {
  border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(14,124,107,0.1);
}

/* "Category: Uncategorized" under the buy button. The breadcrumb already says where
   this product lives, so the line is duplication at best. */
.woocommerce div.product .product_meta { display: none; }

/* ── tabs ── */
.woocommerce div.product .woocommerce-tabs { margin-top: 52px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: 4px; list-style: none;
  margin: 0; padding: 0 0 0 2px;
  border-bottom: 1px solid var(--gray-200);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0; padding: 0; background: none; border: none;
  border-radius: 0; box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 16px;
  font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--gray-400); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--navy); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--navy); border-bottom-color: var(--teal); }
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 26px 2px 0; margin: 0;
  font-size: 16px; line-height: 1.8; color: var(--gray-700);
}
.woocommerce div.product .woocommerce-tabs .panel > h2 { display: none; } /* repeats the tab label */

/* ── related products ── */
.woocommerce div.product section.related { margin-top: 56px; }
.woocommerce div.product section.related > h2 {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: 22px; margin: 0 0 20px;
}

@media (max-width: 860px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    grid-template-areas: "gallery" "summary" "tabs" "related";
    gap: 28px 0;
  }
  .woocommerce div.product .woocommerce-product-gallery { max-width: 420px; }
}

/* ══ PRODUCT GRIDS ═════════════════════════════════════════════════════════════
 * `ul.products` was display:block, so Woo's own float rules did the layout: every card
 * 22.05% wide whatever the count. Two products on /shop/ therefore sat in the left third
 * of the page with a hole beside them, and the related-products row collapsed to 38px
 * columns. A real grid sizes to the number of cards instead. */
.woocommerce ul.products,
.entry-content ul.products {
  display: grid !important;
  /* Capped at 340px rather than 1fr. With only two visible products a plain 1fr grid
     gave two 550px cards that dwarfed the page; the cap keeps a card a card whether the
     row holds two of them or six. auto-fit (not auto-fill) collapses the empty tracks,
     so the row packs left instead of leaving Woo's old hole on the right. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 340px));
  justify-content: start;
  gap: 24px;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product,
.entry-content ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
  display: flex; flex-direction: column;
}
.woocommerce ul.products li.product img { border-radius: var(--radius-sm); margin-bottom: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { line-height: 1.35; margin: 0 0 8px; }
/* Push the button to the bottom so cards with different title lengths still line up. */
.woocommerce ul.products li.product .price { margin: 0 0 14px; }
.woocommerce ul.products li.product a.button { margin-top: auto; align-self: flex-start; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: block; }
/* Woo's own "N results" + sorting row. */
.woocommerce .woocommerce-result-count { color: var(--gray-400); font-size: 14px; margin: 0; }
.woocommerce .woocommerce-ordering select {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 8px 12px; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 14px; color: var(--gray-700);
  background: var(--white);
}
.woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count { margin-top: 0; }

.woocommerce-page main.sedation-woo-wrap,
main.sedation-woo-wrap {
  max-width: 1140px; margin: 48px auto 80px; padding: 0 2rem;
}
.sedation-woo-wrap h1.page-title {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: clamp(26px, 4vw, 38px); margin-bottom: 28px;
}
/* buttons */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #place_order {
  background: var(--teal); color: var(--white);
  border: none; border-radius: var(--radius-sm);
  font-weight: 700; font-family: 'Inter', 'Inter Fallback', sans-serif;
  padding: 12px 22px;
  transition: background 0.2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #place_order:hover { background: var(--teal-hover); color: var(--white); }
.woocommerce a.button.checkout, .woocommerce #place_order { background: var(--navy); }
.woocommerce a.button.checkout:hover, .woocommerce #place_order:hover { background: var(--navy-mid); }
/* product grid cards */
/* The theme cards each product; Woo's stylesheet (dequeued on marketing pages)
   normally strips the list markers — do it ourselves or bullets show beside
   every product card (found in the 2026-08-02 mobile pass). */
.woocommerce ul.products,
.entry-content ul.products { list-style: none; padding-left: 0; margin-left: 0; }

.woocommerce ul.products li.product {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy);
}
/* Loop cards only. The single-product price is set in the SINGLE PRODUCT block above,
   at 30px/navy — this rule used to catch it too and, sitting further down the file,
   quietly won at 18px teal. */
.woocommerce ul.products li.product .price {
  color: var(--teal); font-weight: 700; font-size: 18px;
}
/* notices */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--teal);
  background: var(--teal-pale);
  color: var(--gray-900);
  border-radius: var(--radius-sm);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--teal); }
.woocommerce-error { border-top-color: #C0392B; border-radius: var(--radius-sm); }
/* forms (checkout/account) */
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.woocommerce form .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { width: 100%; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,124,107,0.1);
}
/* account navigation */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--gray-700); font-weight: 600; font-size: 14px;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { background: var(--teal-pale); color: var(--navy); }
/* tables (cart, orders) */
.woocommerce table.shop_table {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  border-collapse: separate; border-spacing: 0;
}
.woocommerce table.shop_table th { background: var(--gray-50); color: var(--navy); }

/* ─── STATE-PAGE TEMPLATE (page-templates/state-requirements.php) ─── */
.state-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--white);
  padding: 72px 2rem 56px;
  text-align: center;
}
.state-hero .state-badge {
  display: inline-block;
  background: rgba(18,166,143,0.18);
  border: 1px solid rgba(18,166,143,0.5);
  color: var(--teal-light);
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px; margin-bottom: 18px;
}
.state-hero h1 {
  font-family: 'Merriweather', serif;
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.2; max-width: 820px; margin: 0 auto;
}
.state-content {
  max-width: 820px; margin: 0 auto; padding: 48px 2rem 40px;
  font-size: 16px; line-height: 1.8; color: var(--gray-700);
}
.state-content h2 {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: clamp(22px, 3vw, 30px); margin: 40px 0 14px; line-height: 1.3;
}
.state-content h3 { color: var(--navy); font-size: 17px; margin: 26px 0 8px; }
.state-content p { margin: 0 0 16px; }
.state-content ul, .state-content ol { margin: 0 0 18px 22px; }
.state-content li { margin-bottom: 8px; }
.state-content table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px;
}
.state-content td {
  padding: 10px 14px; border-bottom: 1px solid var(--gray-200); vertical-align: top;
}
.state-content tr td:first-child { color: var(--navy); background: var(--gray-50); width: 34%; }
/* Links inside these tables were indistinguishable from plain text. The global rule is
   `a { color: inherit; text-decoration: none }`, and the hub's first column already carries
   navy text on a grey ground, so all 50 state links read as labels rather than links.
   Reported 2026-09-02. Teal is the site accent and clears AA on white and on --gray-50. */
.state-content table a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.state-content table a:hover,
.state-content table a:focus-visible {
  color: var(--teal-hover);
  text-decoration-thickness: 2px;
}

.state-content blockquote {
  border-left: 3px solid var(--teal);
  background: var(--teal-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 22px 0;
  font-style: italic; color: var(--navy);
}
.state-content blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--gray-400); }
.state-cta {
  background: var(--navy); color: var(--white);
  text-align: center; padding: 56px 2rem; margin-top: 48px;
}
.state-cta h2 { font-family: 'Merriweather', serif; font-size: clamp(22px, 3vw, 32px); margin-bottom: 10px; }
.state-cta p { color: rgba(255,255,255,0.7); margin-bottom: 26px; }
.state-cta .btn-primary {
  display: inline-block; background: var(--teal); color: var(--white);
  font-weight: 700; padding: 14px 30px; border-radius: var(--radius-sm);
}
.state-cta .btn-primary:hover { background: var(--teal-hover); }

/* The .state-cta band reused INSIDE .entry-content (medication pages, 2026-09-05):
   .entry-content h2 (navy, 42px top margin) is declared later than .state-cta h2 and ties
   on specificity, so without these the heading would be navy on navy. */
.entry-content .state-cta { border-radius: var(--radius-sm); }
.entry-content .state-cta h2 { color: var(--white); margin-top: 0; }
.entry-content .state-cta p { color: rgba(255,255,255,0.7); margin: 0 0 26px; }
.entry-content .state-cta .state-cta-individual { margin: 26px 0 0; }
.entry-content .state-cta a.btn-secondary { color: var(--white); }
.entry-content .state-cta a:hover { text-decoration: none; }

/* ─── GENERIC CONTENT PAGES (index.php fallback — added 2026-07-26 visual-audit pass) ─── */
.page-main { max-width: 900px; margin: 64px auto 80px; padding: 0 2rem; }
.page-main h1.entry-title {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: clamp(28px, 4vw, 40px); line-height: 1.25; margin-bottom: 18px;
}
.entry-content { font-size: 16px; line-height: 1.8; color: var(--gray-700); }
.entry-content h2 {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: clamp(21px, 3vw, 28px); margin: 42px 0 14px; line-height: 1.3;
}
.entry-content h3 { color: var(--navy); font-size: 18px; margin: 30px 0 10px; }
/* ── Terms-of-sale + CE statements ──────────────────────────────────────────
   `.hv-terms` states how long access lasts (added 2026-08-14, when access
   became a 365-day term and therefore a material term of sale that has to be
   disclosed before purchase). `.ce-statement` carries the CA BRN provider line.
   Neither had any rule — `.ce-statement` was added 2026-08-14 with the recert CE
   disclosure and rendered as a bare paragraph until now. Both are deliberately
   quiet: informative, not a sales banner. */
.entry-content .hv-terms,
.entry-content .ce-statement,
.woocommerce div.product .hv-terms,
.woocommerce div.product .ce-statement {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-700);
}
.entry-content .hv-terms strong,
.woocommerce div.product .hv-terms strong { color: var(--navy); }

/* ── Lesson callouts ────────────────────────────────────────────────────────
   The course lessons have used <div class="callout"> with an icon + body since
   the Wk 4-5 content build, but no rule ever existed for it — 12 lessons across
   both courses were rendering the icon and text as bare stacked divs. Added
   2026-08-14 while filling the recert lesson bodies.
   Colours come from the existing palette; --teal is the AA-safe text/border
   token (--teal-light is decorative-only per the 2026-08-05 a11y decision). */
.entry-content .callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--teal-pale);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  margin: 18px 0;
}
.entry-content .callout-icon { flex: 0 0 auto; font-size: 20px; line-height: 1.3; }
.entry-content .callout-body { flex: 1 1 auto; font-size: 15px; line-height: 1.7; color: var(--gray-700); }
.entry-content .callout-body strong { color: var(--navy); }
.entry-content .callout-body > :first-child { margin-top: 0; }
.entry-content .callout-body > :last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .entry-content .callout { padding: 12px 13px; gap: 10px; }
  .entry-content .callout-icon { font-size: 18px; }
}

.entry-content h4 { color: var(--navy); font-size: 16px; margin: 24px 0 8px; }
.entry-content p { margin: 0 0 16px; }
.entry-content ul, .entry-content ol { margin: 0 0 18px 24px; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--teal); font-weight: 600; }
.entry-content a:hover { text-decoration: underline; }
/* content tables — medication monographs, resources hub, FAQ */
.entry-content table {
  width: 100%; border-collapse: collapse; margin: 20px 0 26px;
  font-size: 14.5px; background: var(--white);
}
.entry-content table th {
  background: var(--gray-50); color: var(--navy); text-align: left;
  padding: 10px 14px; border: 1px solid var(--gray-200); font-size: 13.5px;
}
.entry-content table td { padding: 10px 14px; border: 1px solid var(--gray-200); vertical-align: top; }
.entry-content table tr:nth-child(even) td { background: var(--gray-50); }
@media (max-width: 640px) { .entry-content table { display: block; overflow-x: auto; } }
/* Medication hub comparison tables (2026-09-01): one row per agent, figures from the monographs. */
.entry-content table.hv-compare th[scope="row"] { white-space: nowrap; }
.entry-content table.hv-compare td, .entry-content table.hv-compare th { font-size: 13.5px; line-height: 1.5; }
.entry-content .hv-compare-note { color: var(--gray-400); }
.entry-content blockquote {
  border-left: 3px solid var(--teal); background: var(--teal-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; margin: 22px 0; color: var(--navy);
}
/* Reusable CTA button.
   ⚠ Was scoped to `.entry-content` and therefore did nothing outside it. The seat-tier
   block renders on /shop/ through a woocommerce_after_shop_loop hook, which is NOT inside
   .entry-content, so its "Price my seats" control rendered as a raw browser button next to
   styled ones. Base rule is unscoped now; the .entry-content overrides below stay, because
   `.entry-content a { color: var(--teal) }` still out-specifies a bare class on links. */
.btn-cta {
  display: inline-block; background: var(--teal); color: var(--white);
  font-weight: 700; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 15px; line-height: 1.4;
  padding: 13px 26px; border: none; border-radius: var(--radius-sm); cursor: pointer;
  text-decoration: none; margin: 4px 10px 4px 0;
}
.btn-cta:hover { background: var(--teal-hover); color: var(--white); }
.btn-cta.btn-navy { background: var(--navy); }
.btn-cta.btn-navy:hover { background: var(--navy-mid); }
.entry-content .btn-cta { color: var(--white) !important; text-decoration: none !important; }
.entry-content .btn-cta:hover { background: var(--teal-hover); }
.entry-content .btn-cta.btn-navy:hover { background: var(--navy-mid); }

/* MY ACCOUNT layout — Woo floats collide with the title without this.
   NOTE: Woo's account menu is a <nav>, so it inherits the global sticky
   header-bar `nav {}` styles — every one of those is reset here. */
.woocommerce-account .entry-content > .woocommerce { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
/* ⚠ WOO'S CLEARFIX BECOMES TWO FLEX ITEMS. `.woocommerce::before/::after` are the
   stock `content:" "; display:table` clearfix. Harmless in a block container — but this
   container is FLEX, and a generated box in a flex container is a flex ITEM. Two
   zero-height items, each buying a full gap: 64px of dead space, 32 above the content and
   32 below. Measured 2026-08-23 — the previous-site signpost started 32px below its own
   container's top edge and nothing in the cascade explained it. Same family as the
   `:empty` notices-wrapper rule at the foot of this file; that one removed one gap, this
   removes the other two. Shade's note was "make the gaps ... smaller" on /my-account/. */
.woocommerce-account .entry-content > .woocommerce::before,
.woocommerce-account .entry-content > .woocommerce::after { content: none; display: none; }
/* The logged-out account page is a signpost and two forms. `.entry-content h2` gives
   "Login" and "Register" 42px of air above them, which is right for a long content page
   and far too much when the heading is the top of a form card. */
.woocommerce-account #customer_login h2 { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
nav.woocommerce-MyAccount-navigation {
  position: static !important; top: auto; z-index: auto;
  display: block; height: auto; box-shadow: none;
  flex: 0 0 220px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: 10px;
}
.woocommerce-MyAccount-content { flex: 1; min-width: 280px; }
@media (max-width: 700px) { .woocommerce-MyAccount-navigation { flex-basis: 100%; } }

/* single-product blocks on enroll/recert pages — stop the lone card rendering
   at grid width (Woo sizes li.product for a 4-column row) */
.entry-content ul.products li.product:only-child {
  width: 100% !important; max-width: 420px; float: none !important;
}

/* shop facility one-box banner (visual-audit pass) */
.shop-facility-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--teal-pale); border: 1px solid #CDEEE4;
  border-radius: var(--radius-md); padding: 20px 24px; margin: 0 0 28px;
}
.shop-facility-banner .sfb-text { flex: 1; min-width: 260px; font-size: 15px; color: var(--gray-700); }
.shop-facility-banner .sfb-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.shop-facility-banner .sfb-quote { font-size: 13.5px; font-weight: 600; color: var(--teal); }
.shop-facility-banner .sfb-quote:hover { text-decoration: underline; }

/* Skip link — WCAG 2.4.1 Bypass Blocks. Off-screen until keyboard focus.
   Targets #content, present on every <main> in this theme. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 22px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  box-shadow: var(--shadow-md);
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* ── Fourth-attempt panels (hv-retake-access.php) ───────────────────────────
   Added 2026-08-15 with the paid fourth attempt. Written at the same time as
   the markup on purpose: `.callout`, `.hv-terms` and `.ce-statement` each
   shipped as markup with no rule and rendered as bare stacked divs until
   somebody noticed. Grep the theme for a class before assuming it renders.
   NOT scoped to .entry-content — these render on the WooCommerce My Account
   dashboard, which is outside it. */
.hv-retake {
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
}
.hv-retake h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--navy);
}
.hv-retake p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--gray-700); }
.hv-retake p:last-child { margin-bottom: 0; }
.hv-retake .btn-primary { display: inline-block; margin-top: 4px; }

/* Needs action: the learner is stuck and must buy to continue. Gold, because it
   is the one panel asking for money — it should not read as routine teal UI. */
.hv-retake--offer {
  background: var(--gold-pale);
  border-left: 4px solid var(--gold);
}

/* Already paid: reassurance, not a sales pitch. */
.hv-retake--unlocked {
  background: var(--teal-pale);
  border-left: 4px solid var(--teal);
}

@media (max-width: 480px) {
  .hv-retake { padding: 15px 16px; }
  .hv-retake h3 { font-size: 16px; }
  .hv-retake .btn-primary { display: block; text-align: center; }
}

/* Last free attempt, shown BEFORE the learner starts. Same gold family as the
   offer on purpose — both panels are about the same fact, that attempts are
   finite and the next one costs — but this one carries no button, so it reads
   as a heads-up rather than a demand. */
.hv-retake--warning {
  background: var(--gold-pale);
  border-left: 4px solid var(--gold);
}
.hv-retake--warning strong { color: var(--navy); }

/* ── Primary buttons placed inside page or lesson content ───────────────────
   `.entry-content a { color: var(--teal) }` is specificity 0,1,1 and beats
   `.btn-primary { color: var(--white) }` at 0,1,0. A primary button sitting in
   content therefore rendered TEAL TEXT ON A TEAL BACKGROUND — 1:1 contrast,
   completely invisible.
   ⚠ It was invisible only AT REST: `.btn-primary:hover` is 0,2,0, so it wins and
   the label reappears on hover. That is why it survived — the bug hides from
   anyone who mouses over it to check.
   Found 2026-08-15 on the fourth-attempt offer, where the buy button — the most
   important element of the feature — rendered as a blank green block. Fixed at
   the general rule rather than on the panel, so the next button placed in
   content does not repeat it. Only .btn-primary is affected; .btn-outline-teal
   and .btn-white are teal-on-light either way. */
.entry-content a.btn-primary { color: var(--white); }

/* ── WooCommerce block buttons (cart, checkout) ─────────────────────────────
   Same trap as above, one layer further out. The block cart and block checkout
   render their buttons as core's `.wp-element-button`, which WordPress styles in
   global-styles-inline-css as:

     :root :where(.wp-element-button, .wp-block-button__link)
       { background-color: #32373c; color: #fff; }

   Two things followed, and this theme contested neither. The dark grey #32373c
   stuck, because nothing here declared a background for it. And the white label
   did NOT: everything inside `:where()` contributes ZERO specificity, so that
   rule totals 0,1,0 and `.entry-content a { color: var(--teal) }` at 0,1,1 beat
   it. "Proceed to Checkout" therefore rendered teal on charcoal — measured
   2.35:1, under the 4.5:1 WCAG AA needs, on the last screen before payment.

   Found 2026-08-15 while checking where the fourth-attempt buy button leads.
   Scoped to `.contained`, which is the variant Woo uses for primary actions, so
   its text and outlined variants keep their own look. Buttons carrying an
   explicit colour still win — those ship inline styles or `has-*-background`
   classes, both of which outrank this. */
.wp-element-button,
.wc-block-components-button.contained,
.entry-content a.wp-element-button,
.entry-content a.wc-block-components-button.contained {
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.wp-element-button:hover,
.wc-block-components-button.contained:hover,
.entry-content a.wp-element-button:hover,
.entry-content a.wc-block-components-button.contained:hover {
  background: var(--teal-hover);
  color: var(--white);
}
/* Woo nests the label in its own element; keep it on whatever the button says. */
.wc-block-components-button .wc-block-components-button__text { color: inherit; }

/* ─── WooCommerce: empty notices wrapper eats a flex gap (2026-08-23) ──────────
 * WooCommerce always prints <div class="woocommerce-notices-wrapper"></div>, even with
 * nothing to say. Its own height is 0, which looks harmless — but the `.woocommerce`
 * container is `display:flex` with `gap:32px`, so that empty div is still a flex ITEM and
 * costs a full 32px gap on every page that has no notice: my-account, cart, checkout.
 * Found while tracking down 126px of dead space under the previous-site signpost.
 * `:empty` matches only when there are no child nodes at all, so a real notice still shows. */
.woocommerce .woocommerce-notices-wrapper:empty { display: none; }

/* ─── BUYING BLOCKS — /enroll/ and /facility/ (2026-08-23, audit round 2) ──────
 * Both pages were a heading, a paragraph and a bare WooCommerce product card —
 * "Format better, look jumbled" on each. These are the replacements. Markup comes
 * from the [sedation_enroll_options] and [sedation_tier_grid] shortcodes in
 * functions.php; the prices in them are read off the products, never typed. */

/* ── /enroll/: the two ways to buy ── */
.buy-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 22px;
  margin: 26px 0 18px;
}
.buy-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-sm);
}
.buy-card h3 {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: 20px; margin: 0 0 6px; line-height: 1.25;
}
.buy-price {
  font-size: 30px; font-weight: 700; color: var(--navy);
  line-height: 1.1; margin: 0 0 16px;
}
.buy-price span {
  display: block; font-size: 13px; font-weight: 600; color: var(--gray-400);
  letter-spacing: 0.02em; margin-top: 4px;
}
.buy-list { list-style: none; margin: 0 0 20px; padding: 0; }
.buy-list li {
  position: relative; padding-left: 24px; margin-bottom: 9px;
  font-size: 14.5px; line-height: 1.55; color: var(--gray-700);
}
/* A drawn check rather than an emoji or a glyph font: it inherits --teal and needs no
   extra request. Sized off the line box so it stays put when the text wraps. */
.buy-list li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.buy-card .btn-cta { margin-top: auto; align-self: flex-start; }
.buy-card .buy-detail { margin-top: 10px; align-self: flex-start; font-size: 13.5px; font-weight: 600; color: var(--teal); }
.buy-card .buy-detail:hover { text-decoration: underline; }
.entry-content .buy-card .buy-detail { color: var(--teal); text-decoration: none; }
.entry-content .buy-card .buy-detail:hover { text-decoration: underline; }
.buy-qty { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.buy-qty label {
  display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.buy-qty input {
  width: 78px; height: 46px; padding: 10px; text-align: center;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy);
}
.buy-qty input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(14,124,107,0.1); }
.buy-qty .btn-cta { margin: 0; }
.buy-footnote {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); padding: 12px 15px;
  font-size: 14px; color: var(--gray-700); margin: 0 0 8px;
}
.buy-footnote a { color: var(--teal); font-weight: 600; white-space: nowrap; }
.buy-footnote a:hover { text-decoration: underline; }

/* ── /facility/ and /shop/: the seat tiers ── */
.tier-grid {
  display: grid;
  /* A ladder is only a ladder if you can read it left to right and watch the price fall,
     so the cards are sized to fit on ONE row in both places it appears: /facility/ inside
     the 900px `.page-main` measure (5 bands → 5 up) and /shop/ inside the 1140px woo wrap
     (6 bands → 6 up). 150px is the largest minimum that does both. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 24px 0 22px;
}
.tier-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 20px 15px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.tier-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #BFD3CE; }
.tier-card--best { border-color: var(--teal); }
.tier-tag {
  position: absolute; top: -10px; right: 14px;
  background: var(--gold-pale); border: 1px solid #EBD3A6; color: #8A5D12;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.tier-card--best .tier-tag { background: var(--teal-pale); border-color: #B7E2D8; color: var(--teal); }
.tier-range {
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 8px;
}
.tier-price {
  font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.1; margin-bottom: 16px;
}
.tier-price em {
  display: block; font-style: normal;
  font-size: 12.5px; font-weight: 600; color: var(--gray-400); margin-top: 4px;
}
.tier-go { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--teal); }
.tier-card:hover .tier-go { text-decoration: underline; }

.tier-exact {
  display: block;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: 18px 20px; margin: 0 0 22px;
}
.tier-exact[hidden] { display: none; }
.tier-exact > label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.tier-exact-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tier-exact input {
  width: 128px; height: 44px; padding: 10px 13px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy);
  background: var(--white);
}
.tier-exact input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(14,124,107,0.1); }
.tier-exact .btn-cta { margin: 0; }
.tier-exact-msg { display: block; margin-top: 10px; font-size: 13.5px; color: #8A3D2E; }
.tier-exact-msg:empty { display: none; }

@media (max-width: 480px) {
  .buy-card { padding: 20px 18px; }
  .buy-qty { width: 100%; }
  .buy-qty .btn-cta { flex: 1; text-align: center; }
  .tier-exact input { flex: 1; width: auto; min-width: 110px; }
}

/* ─── SHOP: the packages section under the product grid (2026-08-23) ─── */
.shop-packages { margin: 52px 0 0; padding-top: 40px; border-top: 1px solid var(--gray-200); }
.shop-packages h2 {
  font-family: 'Merriweather', serif; color: var(--navy);
  font-size: clamp(21px, 3vw, 27px); margin: 0 0 10px; line-height: 1.3;
}
.shop-packages > p { font-size: 15.5px; line-height: 1.7; color: var(--gray-700); margin: 0 0 4px; max-width: 720px; }

/* ─── PAGE FURNITURE for the rebuilt marketing pages (2026-08-23) ─────────────
 * /enroll/, /recertification/ and /facility/ were each an <h2>, a paragraph and a bare
 * WooCommerce card — "Format better, look jumbled" on all three. These are the pieces the
 * rebuilt pages are made of. */

/* Opening paragraph: one size up from body copy, so the page has a first line rather than
   starting mid-thought under the title. */
.entry-content .page-lede {
  font-size: 18px; line-height: 1.7; color: var(--gray-700);
  max-width: 760px; margin: 0 0 26px;
}

/* Ticked list. `.entry-content ul` (0,1,1) beats a bare class (0,1,0) and would put the
   theme's 24px indent back under the drawn ticks — hence the scoped copy. */
.entry-content ul.check-list,
ul.check-list { list-style: none; margin: 0 0 22px; padding-left: 0; }
.check-list li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 15.5px; line-height: 1.6; color: var(--gray-700);
}
.check-list li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.check-list li strong { color: var(--navy); }
/* Two columns once there is room; one column is a long thin ribbon on desktop. */
.entry-content ul.check-list.two-col,
ul.check-list.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px;
}

/* A quiet band for "what this includes" style blocks. */
.entry-content .page-panel {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-md); padding: 24px 26px; margin: 0 0 26px;
}
.entry-content .page-panel > :first-child { margin-top: 0; }
.entry-content .page-panel > :last-child { margin-bottom: 0; }
.entry-content .page-panel h2 { margin-top: 0; font-size: 20px; }

/* ─── POLICY PAGES + NOTICE CALLOUT (2026-08-23) ─────────────────────────────
 * Shade: "Get rid of the rating at the bottom and make the font and sizing uniform"
 * on all three policy pages. The rating was dead markup baked into the content and is
 * gone; the sizing came from inline `font-size:11px; font-family:lucida sans unicode`
 * on every span of a 2010 Word paste, which is also gone. Nothing here fights the
 * cascade any more — these are just the two small pieces the rebuilt pages need. */
.entry-content .policy-updated {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--gray-200);
  font-size: 14px; color: var(--gray-400);
}

/* A warning-coloured variant of the lesson callout, for the reference-material
   disclaimer at the head of /resources/. Gold rather than teal because it is asking the
   reader to stop, which routine teal UI does not. */
.entry-content .callout.callout--notice {
  background: var(--gold-pale);
  border-left-color: var(--gold);
}
.entry-content .callout--notice .callout-icon { color: #8A5D12; }
.entry-content .callout--notice .callout-body { font-size: 14.5px; }

/* ─── /facility-quote/ — two-column, compact (2026-08-23) ─────────────────────
 * Shade: "Make it tighter and more compact. easily readable without scrolling."
 * Eleven visible fields in one column ran to roughly 1,240px of form. Every .ff-el-group
 * in this form is a direct child of a single <fieldset>, so a grid on that fieldset pairs
 * them without editing the form in Fluent Forms — which matters, because the form feeds
 * FluentCRM Automation F and its field names are wired into it.
 * ⚠ The honeypot group is zero-height but is still a GRID ITEM, and would take a whole
 * cell — the same trap the empty Woo notices wrapper and the Woo clearfix hit elsewhere in
 * this file. display:none takes it out of the layout; it is not a real input either way. */
.hv-quote-form .frm-fluent-form > fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  border: 0; padding: 0; margin: 0;
}
.hv-quote-form .frm-fluent-form .ff-el-group { margin-bottom: 0; }
.hv-quote-form .frm-fluent-form .ff-hpsf-container { display: none; }
/* The long-answer box and the button are full-width rows. */
.hv-quote-form .frm-fluent-form .ff-el-group:has(textarea),
.hv-quote-form .frm-fluent-form .ff_submit_btn_wrapper { grid-column: 1 / -1; }
.hv-quote-form .frm-fluent-form textarea.ff-el-form-control { min-height: 84px; }
/* Tighter vertical rhythm inside each field — this is where most of the height went. */
.hv-quote-form .frm-fluent-form .ff-el-group .ff-el-input--label label,
.hv-quote-form .frm-fluent-form .ff-el-group > label { margin-bottom: 4px; font-size: 12.5px; }
.hv-quote-form .frm-fluent-form .ff-el-group input.ff-el-form-control,
.hv-quote-form .frm-fluent-form .ff-el-group select.ff-el-form-control,
.hv-quote-form .frm-fluent-form .ff-el-group textarea.ff-el-form-control { padding: 9px 12px; }
/* A full-bleed submit button reads as a mobile pattern on a desktop two-column form. */
.hv-quote-form .frm-fluent-form .ff-btn-submit,
.hv-quote-form .frm-fluent-form .ff-btn-submit.ff_btn_style { width: auto; min-width: 220px; padding: 12px 30px; }
.hv-quote-form .frm-fluent-form .ff_submit_btn_wrapper { margin-top: 6px; }

/* :has() is well supported now, but a browser without it would leave the textarea in one
   column. Belt and braces: the last two groups are always the notes field and the button. */
.hv-quote-form .frm-fluent-form > fieldset > .ff-el-group:nth-last-child(2),
.hv-quote-form .frm-fluent-form > fieldset > .ff-el-group:last-child { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .hv-quote-form .frm-fluent-form > fieldset { grid-template-columns: 1fr; }
  .hv-quote-form .frm-fluent-form .ff-btn-submit { width: 100%; }
}
/* Last 8px: on a 900px-tall laptop the submit button finished just under the fold.
   Keyed off the wrapper class this page owns rather than a page id, which would break the
   day somebody recreates the page. */
.page-main:has(.hv-quote-form) { margin-top: 40px; }

/* Promoted CE tile in the stats bar (2026-08-23, Shade: "emphasize the CE credits a bit
   more"). Teal rather than navy so it separates from the three neighbours, with the
   approving board named under it — the number alone does not tell a nurse whose CE it is. */
.stat-item--primary { background: var(--teal-pale); }
.stat-item--primary .stat-number { color: var(--teal); }
.stat-item--primary .stat-label { color: var(--navy); font-weight: 700; }
.stat-note { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--teal); margin-top: 3px; }

/* ─── LEARNDASH — brand skin (2026-08-23, Shade's audit round 2) ───────────────
 * His note on both course pages: "Header and the course tracker merge into each other
 * after you click on one of the course content. also format it better."
 *
 * The MERGE is fixed at the top of this file — `scroll-behavior: smooth` had no
 * `scroll-padding-top`, so every anchor LearnDash jumps to landed 88px under the sticky
 * header. That was the whole of "merge into each other", and it was doing the same to
 * every in-page nav link on the site.
 *
 * "Format it better" is this block. LearnDash 5.1.9 ships its own compiled stylesheet
 * (src/assets/dist/css/styles.css) and paints everything in its default palette —
 * #235af3 blue and #ffd200 yellow, which belong to no part of this brand. Note that
 * `learndash_settings_theme_ld30` is NOT the knob for it: setting color_primary there
 * has no effect on 5.x (tried and verified 2026-08-23, the option would not even hold
 * a value). Overriding the classes it actually emits is both what works and what
 * survives a plugin update.
 * ⚠ Their stylesheet loads after the theme's, so these carry !important. Every colour
 * is a palette token — no new colours are introduced here. */
.learndash-wrapper .ld-primary-background,
.learndash-wrapper .ld-tooltip__text,
.learndash-wrapper .ld-expand-button.ld-primary-background,
.learndash-wrapper .btn-join,
.learndash-wrapper .button-primary { background-color: var(--teal) !important; }
.learndash-wrapper .ld-primary-color,
.learndash-wrapper .ld-tab.ld-active,
.learndash-wrapper .ld-icon.ld-icon-content,
.learndash-wrapper .ld-expand-button.ld-button-alternate,
.learndash-wrapper .ld-expand-button.ld-button-alternate .ld-text,
.learndash-wrapper .ld-primary-color-hover:hover { color: var(--teal) !important; }
.learndash-wrapper .ld-tab.ld-active { border-bottom-color: var(--teal) !important; }
.learndash-wrapper .ld-tooltip::after { border-top-color: var(--teal) !important; }
.learndash-wrapper .btn-join:hover,
.learndash-wrapper .button-primary:hover { background-color: var(--teal-hover) !important; }
/* `.ld-button` is the step navigation — Previous Lesson / Next Topic / Back / Mark Complete.
   It carries no `.ld-primary-background`, so the rules above missed it and it stayed
   LearnDash blue while everything around it was teal. Found 2026-08-23 on a step whose
   navigation was the only thing on screen. */
.learndash-wrapper .ld-button,
.learndash-wrapper a.ld-button,
.learndash-wrapper input.ld-button,
.learndash-wrapper .ld-content-action .ld-button {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
  color: var(--white) !important;
}
.learndash-wrapper .ld-button:hover { background-color: var(--teal-hover) !important; border-color: var(--teal-hover) !important; }
/* The outlined variant must not become a solid teal block. */
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-reverse {
  background-color: transparent !important; color: var(--teal) !important;
}
/* The alert LearnDash shows when a step is reached out of order. */
.learndash-wrapper .ld-alert { border-radius: var(--radius-md); }
.learndash-wrapper .ld-alert-warning { background: var(--gold-pale) !important; border-color: #EBD3A6 !important; }
.learndash-wrapper .ld-alert-warning .ld-alert-icon { background: var(--gold) !important; }

/* Status pills. LearnDash's "waiting" yellow (#ffd200) is a hazard colour — on a course
   page it reads as a warning when it only means "you have not bought this yet". */
.learndash-wrapper .ld-status.ld-status-waiting,
.learndash-wrapper .ld-tertiary-background {
  background-color: var(--gold-pale) !important;
  color: #7A5210 !important;
  border: 1px solid #EBD3A6;
}
.learndash-wrapper .ld-status.ld-status-progress {
  background-color: var(--teal-pale) !important; color: var(--teal) !important;
}
.learndash-wrapper .ld-status.ld-status-complete,
.learndash-wrapper .ld-status-icon.ld-status-complete { background-color: var(--teal) !important; color: var(--white) !important; }

/* The "Current Status / Price / Get Started" band under the title. */
.learndash-wrapper .ld-course-status {
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 6px 0;
}
.learndash-wrapper .ld-course-status .ld-course-status-label {
  font-family: 'Inter', 'Inter Fallback', sans-serif !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-400) !important;
}
.learndash-wrapper .ld-course-status .ld-course-status-price {
  font-family: 'Inter', 'Inter Fallback', sans-serif !important;
  font-size: 26px !important; font-weight: 700 !important; color: var(--navy) !important;
}

/* Section headers in the content list, and the list itself. */
.learndash-wrapper .ld-item-list .ld-item-list-item { border-radius: var(--radius-sm); }
.learndash-wrapper .ld-table-list-header {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important;
}
.learndash-wrapper .ld-item-list-item-preview .ld-item-title {
  font-family: 'Inter', 'Inter Fallback', sans-serif !important; color: var(--navy) !important;
}
.learndash-wrapper .ld-course-navigation-heading,
.learndash-wrapper .ld-lesson-section-heading {
  font-family: 'Merriweather', serif !important; color: var(--navy) !important;
}
/* A lone buy card should not stretch to the full measure — it is a card, not a banner. */
.buy-options--single { grid-template-columns: minmax(276px, 380px); }

/* ─── PROVIDER STRIP (2026-08-23) ─────────────────────────────────────────────
 * Shade: lead with the provider rather than with any claim about another website, and
 * "emphasize the 10 CE credit hours somewhere". This does both, on every page except the
 * front page, which already carries the approved strip under its stats bar.
 * Quiet by design — it is a credential line, not a promotion. The CE hours and the provider
 * number are the two things a nurse actually checks, so they are the two things in bold. */
.provider-strip {
  background: var(--teal-pale);
  border-bottom: 1px solid #CDEEE4;
}
.provider-strip p {
  max-width: 1140px;
  margin: 0 auto;
  padding: 9px 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-700);
  text-align: center;
}
.provider-strip strong { color: var(--navy); font-weight: 700; }
.provider-strip .ps-ce strong { color: var(--teal); }
/* ⚠ The separator is drawn, not written. Every item after the first carries its own
   leading dot, so hiding an item hides its separator too — which is the whole reason the
   markup has no <span>&middot;</span> elements in it. */
.provider-strip .ps-item + .ps-item::before {
  content: "\00b7";
  color: #A9C9C1;
  margin: 0 10px;
}
/* On a phone the full line wraps to four rows and pushes the page title off the screen.
   The two that carry the credential stay; the rest go, separators and all. */
@media (max-width: 760px) {
  /* ⚠ Stacked, not wrapped. Left as a wrapping flex row, the two surviving items break onto
     separate lines and the drawn separator lands at the START of the second line as a stray
     dot in the left margin — seen on a 375px phone 2026-08-23. Stacking removes the need for
     a separator at all. */
  .provider-strip p { flex-direction: column; font-size: 12.5px; padding: 8px 1rem; gap: 1px; }
  .provider-strip .ps-wide { display: none; }
  .provider-strip .ps-item + .ps-item::before { content: none; }
}

/* CE hours badge on the product page (2026-08-23). Sits under the price, because that is
   where the comparison happens. Teal rather than navy so it separates from the price above
   it without competing with the Add to cart button below. */
.woocommerce div.product .ce-badge {
  display: flex; align-items: center; gap: 12px;
  background: var(--teal-pale); border: 1px solid #CDEEE4;
  border-radius: var(--radius-sm); padding: 11px 14px; margin: 0 0 18px;
  text-align: left;
}
.ce-badge-n {
  flex: 0 0 auto;
  font-size: 28px; font-weight: 700; line-height: 1; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.ce-badge-t { display: block; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--gray-700); }
.ce-badge-t strong { display: block; font-size: 14px; color: var(--navy); margin-bottom: 1px; }

/* ─── S-1 SEO PACK (2026-08-27): crumbs, sibling links, state-link blocks ─── */
.hv-crumbs {
  font-size: 14px; color: var(--gray-500, #5a6172);
  margin: 0 0 20px;
}
.hv-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hv-crumbs a:hover { color: var(--teal); }
.hv-crumbs span { color: var(--navy); }
.hv-siblings {
  margin: 34px 0 0; padding-top: 16px;
  border-top: 1px solid var(--gray-200, #e3e6ec);
  font-size: 15px; line-height: 1.9;
}
.hv-siblings strong { color: var(--navy); }
.hv-state-links { font-size: 15px; line-height: 2; }
.hv-state-links .hv-state-links-all { font-weight: 700; }
.state-neighbors {
  max-width: 860px; margin: 0 auto; padding: 8px 2rem 40px;
}
.state-neighbors h2 { color: var(--navy); font-size: 20px; margin-bottom: 8px; }
.state-neighbors p { font-size: 15px; line-height: 2; }

/* ─── S-2 SALES PACK (2026-08-27): cart link, state individual CTAs, group nudge ─── */
.nav-cart {
  display: inline-flex; align-items: center; gap: 4px;
  /* 2026-08-29 audit: was var(--navy) — navy-on-navy, invisible on the header bar
     ("the cart button is barely visible"). Match .nav-account's treatment. */
  color: rgba(255,255,255,0.88); padding: 8px 11px; position: relative;
}
.nav-cart:hover, .nav-cart:focus-visible { color: var(--white); }
.nav-cart-count {
  min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--teal); color: var(--white);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  padding: 0 4px; position: relative; top: -7px; margin-left: -4px;
}
.state-cta-individual {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.state-cta-individual .btn-secondary {
  display: inline-block; border: 1px solid rgba(255,255,255,0.45);
  color: var(--white); font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: var(--radius-sm);
}
.state-cta-individual .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.buy-nudge {
  margin: 14px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--gray-500, #5a6172);
}
.buy-nudge a { text-decoration: underline; }

/* ─── AUDIT PASS FIXES (Shade, 2026-08-29): cart/checkout empty states ───
 * The Woo cart/checkout blocks ship a 140×140 icon block on the empty-cart
 * heading ("the frowning face is too large") and leave loop add-to-cart buttons
 * on the block default — charcoal pill, teal text — which reads off-palette
 * next to the site's solid-teal CTAs ("the purchase buttons are a weird color").
 * Both fixed here rather than in the page content so cart AND checkout (and any
 * future block) inherit the same treatment. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  /* 2026-08-29 re-check: shrinking the box alone CROPPED the 140px graphic
     ("the image itself is distorted") — scale it to the box instead, whether
     Woo draws it as a background or a mask. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.wp-block-button__link.add_to_cart_button,
.wc-block-components-product-button__button {
  background: var(--teal);
  color: var(--white);
  border: none;
}
.wp-block-button__link.add_to_cart_button:hover,
.wp-block-button__link.add_to_cart_button:focus-visible,
.wc-block-components-product-button__button:hover,
.wc-block-components-product-button__button:focus-visible {
  background: var(--teal-hover);
  color: var(--white);
}

/* ─── Coupon section (Shade, 2026-08-31): "stand out slightly more … line up the
 * box to be even with everything else." Two block defaults fought the totals
 * column: the "Add coupons" toggle wears plain body grey, so the one interactive
 * money feature in the column had the least visual voice of anything in it — and
 * the applied-code chips sit in a <ul> that keeps a 24px default indent, leaving
 * the chip box hanging off-grid under the Discount row. Teal + bold puts the
 * toggle in the same voice as the theme's other actions; the chip list loses the
 * stray indent. Cart and checkout share these block classes, so both inherit. */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: var(--teal);
  font-weight: 700;
  font-size: 17px;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button:hover,
.wc-block-components-totals-coupon .wc-block-components-panel__button:focus-visible {
  color: var(--teal-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 0,2,0 on purpose: the block's own stylesheet loads after the theme's, so a
 * bare .…__coupon-list ties at 0,1,0 and loses — measured live 2026-08-31. */
.wc-block-components-totals-item .wc-block-components-totals-discount__coupon-list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}