/* ============================================================
   COAST2COAST — COURSE PAGE STYLESHEET
   Upload to /wp-content/uploads/c2c-assets/Course-Pages/

   SHARED BY TWO PAGES:
     /first-aid-courses/         sections 01-16
     /basic-life-support-bls/    sections 01-16 + section 17

   Both load this one file and first-aid-courses.js, so the two pages
   cannot drift apart: a brand change lands on both at once. The cost
   is that ANY edit here needs the cache buster bumped in BOTH pages'
   PASTE BLOCK 1, and both pages re-checked.

   Page-specific values (hero photo, carousel ratio) are custom
   properties with the /first-aid-courses/ value as the default, so a
   second page overrides one token instead of restating a rule. Keep
   it that way rather than hard-coding a second url() anywhere.

   Everything is scoped under .c2c-fac so nothing leaks into
   JupiterX or Elementor — the same namespacing strategy as your
   existing .c2c-final wrapper in c2c-shared.css.

   Colour tokens below are copied from that file so this page is
   brand-identical. Change them there and here together.

   CONTENTS
     01  Tokens & reset
     02  Layout primitives
     03  Typography
     04  Buttons
     05  Hero
     06  Trust badges
     07  Course detail
     08  Awards
     09  Split sections (Formats / Why us)
     10  Accordion (delivery methods)
     11  Recert band
     12  Photo carousel
     13  Reviews heading
     13.1  Reviews + video, two-up
     14  FAQ
     15  Final CTA & mobile bar
     16  Motion & print
     17  /basic-life-support-bls/ additions
     18  /emr-training/ additions
     19  /first-responder-training/ additions
     20  /recertification-courses/ additions
     21  Location finder widget (outside .c2c-fac)
   ============================================================ */


/* ── 01 · TOKENS & RESET ─────────────────────────────────── */
.c2c-fac {
  /* Brand — mirrors .c2c-final in c2c-shared.css */
  --navy: #0f234f;
  --navy-2: #183a84;
  --navy-3: #274a98;
  --red: #b53031;
  /* --red-2 and --green are unused here on purpose: they mirror
     .c2c-final so production c2c-* rules dropped into this
     wrapper still resolve their vars. Do not prune. */
  --red-2: #b53031;
  --red-hover: #9a2829;
  --red-soft: #f9ecec;
  --text: #22324b;
  --muted: #66758b;
  --bg: #f4f7fc;
  --soft: #f8fbff;
  --line: #dce5f0;
  --white: #fff;
  --green: #22a861;
  --gold: #f0b72f;
  --gold-dark: #8a6410;
  --gold-soft: #fef6e4;

  /* Two-layer: a tight contact shadow supplies the edge, a wider
     ambient layer supplies the depth. The production single-layer
     tokens (34px/54px blur at 8%/14%) have no defined edge and read
     as a grey smudge against white. */
  --shadow: 0 1px 3px rgba(15, 35, 79, .06), 0 6px 16px -4px rgba(15, 35, 79, .13);
  --shadow-lg: 0 2px 6px rgba(15, 35, 79, .07), 0 14px 32px -8px rgba(15, 35, 79, .18);
  --shadow-red: 0 1px 3px rgba(181, 48, 49, .20), 0 6px 16px -5px rgba(181, 48, 49, .34);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --ff-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1180px;
  --gut: 16px;

  font-family: var(--ff-body);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 600px) { .c2c-fac { --gut: 24px; } }

/* Contained reset - only touches our own subtree.
   NOTE: these are element-qualified, so they sit at (0,1,1) and
   beat any bare-class rule. That is deliberate - it is what keeps
   JupiterX/Elementor typography out. The consequence is that our
   own rules setting margin/padding on p/h1-h4/ul/ol/dl/dd/figure/
   blockquote must be scoped `.c2c-fac .fac-*` (or use !important)
   or they will be silently zeroed. */
.c2c-fac *,
.c2c-fac *::before,
.c2c-fac *::after { box-sizing: border-box; }

.c2c-fac p,
.c2c-fac h1, .c2c-fac h2, .c2c-fac h3, .c2c-fac h4,
.c2c-fac ul, .c2c-fac ol, .c2c-fac dl, .c2c-fac dd, .c2c-fac figure,
.c2c-fac blockquote { margin: 0; padding: 0; }

.c2c-fac ul, .c2c-fac ol { list-style: none; }

.c2c-fac img,
.c2c-fac svg { display: block; max-width: 100%; }

.c2c-fac img { height: auto; }

/* NOTE: these two are element-qualified, so they sit at specificity
   (0,1,1) and beat any bare-class rule like `.fac-btn--primary`.
   Every component rule that sets `color` on an <a> or <button> is
   therefore scoped `.c2c-fac .fac-*` to win. Do not unscope them. */
.c2c-fac a { color: inherit; text-decoration: none; }

.c2c-fac button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Inline SVG icon default: stroked, not filled */
.c2c-fac svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c2c-fac :focus-visible {
  outline: 3px solid var(--navy-3);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 02 · LAYOUT PRIMITIVES ──────────────────────────────── */
.fac-container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.fac-section { padding-block: 56px; background: var(--white); }
@media (min-width: 860px) { .fac-section { padding-block: 88px; } }

.fac-section--tint { background: var(--bg); }

.fac-section--dark {
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
}
.fac-section--dark .fac-h2 { color: var(--white); }


/* ── 03 · TYPOGRAPHY ─────────────────────────────────────── */
.c2c-fac h1, .c2c-fac h2, .c2c-fac h3, .c2c-fac h4 {
  font-family: var(--ff-display);
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.13;
  font-weight: 800;
}

.fac-h2 { font-size: clamp(1.65rem, 4.2vw, 2.4rem); }
.fac-h2--sm { font-size: clamp(1.5rem, 3.4vw, 2rem); }

.fac-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }

.fac-eyebrow {
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px !important;
}
.fac-eyebrow--light { color: var(--gold); }

.fac-lead {
  margin-top: 16px !important;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--muted);
}
.fac-lead--left { max-width: 60ch; }
.fac-section--dark .fac-lead { color: rgba(255, 255, 255, .74); }

.fac-lead strong,
.fac-hero__sub strong { color: var(--navy); font-weight: 600; }
.fac-section--dark .fac-lead strong { color: var(--white); }

.c2c-fac .fac-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px !important;
}

.c2c-fac .fac-link {
  display: inline-block;
  margin-top: 26px;
  font-weight: 700;
  color: var(--red);
}
.c2c-fac .fac-link:hover { color: var(--red-hover); }

.fac-stars { color: var(--gold); letter-spacing: 2px; }


/* ── 04 · BUTTONS ────────────────────────────────────────── */
.fac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r);
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.fac-btn svg { width: 17px; height: 17px; flex: none; }
.fac-btn:active { transform: translateY(1px); }

.fac-btn--lg { padding: 16px 30px; font-size: 1rem; }

/* A CTA sitting straight after body copy has no separation of its own
   (the old .fac-split__actions wrapper supplied it and is gone), so
   give the pairing real breathing room. */
.fac-lead + .fac-btn,
.fac-course__intro + .fac-btn { margin-top: 32px; }

.c2c-fac .fac-btn--primary {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-red);
}
.c2c-fac .fac-btn--primary:hover { background: var(--red-hover); }

.c2c-fac .fac-btn--outline {
  border: 2px solid var(--line);
  color: var(--navy);
  background: var(--white);
}
.c2c-fac .fac-btn--outline:hover { border-color: var(--navy-3); }

/* Outline in brand red — used on the featured course card */
.c2c-fac .fac-btn--solidline {
  border: 2px solid var(--red);
  color: var(--red);
  background: transparent;
}
.c2c-fac .fac-btn--solidline:hover { background: var(--red); color: var(--white); }

.c2c-fac .fac-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--white);
}
.c2c-fac .fac-btn--ghost:hover { background: rgba(255, 255, 255, .1); }

.c2c-fac .fac-btn--light { background: var(--white); color: var(--navy); }
.c2c-fac .fac-btn--light:hover { background: rgba(255, 255, 255, .88); }


/* ── 05 · HERO ───────────────────────────────────────────── */
/* Photo as a background cover under a navy gradient - the same treatment
   as .c2c-hero in c2c-shared.css, so this matches /toronto/ exactly.
   Values copied verbatim from that rule. The 110deg angle keeps the copy
   side near-solid navy while the photo shows through on the right, which
   is why there is no <img> element here.
   Image is the EWWW-generated WebP of AED-Training-banner.jpg: 78KB vs
   773KB for the .jpg, and this is the preloaded LCP element. The JPEG
   original is the same URL minus the trailing .webp if ever needed.

   The photo is a custom property, not a hard-coded url(), because this
   stylesheet now serves more than one page. --hero-img is the default
   (/first-aid-courses/); a page modifier overrides it in one line
   instead of restating the whole background shorthand twice. Whatever
   a page sets here MUST match its <link rel=preload> or the browser
   downloads both images. See the page modifiers in section 17. */
.fac-hero {
  --hero-img: url('https://www.c2cfirstaidaquatics.com/wp-content/uploads/2024/01/AED-Training-banner.jpg.webp');
  position: relative;
  overflow: hidden;
  padding: 64px 0 52px;
  color: rgba(255, 255, 255, .82);
  background:
    linear-gradient(110deg,
      rgba(15, 35, 79, .97) 0%,
      rgba(15, 35, 79, .94) 42%,
      rgba(15, 35, 79, .72) 65%,
      rgba(15, 35, 79, .24) 100%),
    var(--hero-img) center right / cover no-repeat;
}

/* Below the 2-column breakpoint the copy spans the full width, and a
   horizontal gradient would leave it sitting on the pale right-hand end.
   Swap to a vertical wash so the text keeps its contrast. The location
   pages sidestep this by hiding a paragraph on mobile; we keep all the
   copy, so the gradient has to do the work. */
@media (max-width: 959px) {
  .fac-hero {
    padding: 42px 0 36px;
    background:
      linear-gradient(180deg,
        rgba(15, 35, 79, .96) 0%,
        rgba(15, 35, 79, .93) 55%,
        rgba(15, 35, 79, .88) 100%),
      var(--hero-img) center center / cover no-repeat;
  }
}

.fac-hero > .fac-container { position: relative; z-index: 2; }

.fac-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 26px;
}
.fac-crumbs a:hover { color: var(--white); text-decoration: underline; }

.fac-hero__grid { display: grid; gap: 20px; align-items: center; }
@media (min-width: 960px) {
  /* second (empty) column is what lets the background photo read */
  .fac-hero__grid { grid-template-columns: minmax(0, 760px) 1fr; }
}

.c2c-fac .fac-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 20px !important;
}
.fac-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

/* Scoped as `.c2c-fac .fac-hero__title`, NOT `.fac-hero__title`.
   The base rule `.c2c-fac h1` is (0,1,1) and would out-specify a
   lone class selector — that made the H1 render navy-on-navy. */
.c2c-fac .fac-hero__title {
  color: var(--white);
  font-size: clamp(2.05rem, 6.2vw, 3.45rem);
  line-height: 1.04;
  font-weight: 900;
}

.fac-hero__sub {
  margin-top: 20px !important;
  max-width: 40em;
  font-size: 1.02rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, .8);
}
.fac-hero__sub strong { color: var(--white); }

.fac-hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
@media (min-width: 520px) { .fac-hero__actions { flex-direction: row; } }

.fac-rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 11px;
  margin-top: 30px;
}
.fac-rating img { width: 22px; height: 22px; }
.fac-rating .fac-stars { font-size: 1.1rem; }
.fac-rating strong { color: var(--white); font-size: 1.1rem; font-weight: 800; }
.fac-rating__meta { font-size: .86rem; color: rgba(255, 255, 255, .68); }
.fac-rating:hover .fac-rating__meta { color: var(--white); }


/* ── 06 · TRUST BADGES ───────────────────────────────────────
   Same shape as the trust strip on the location pages (see
   Reference for Design/Hamilton.html and .c2c-trust-carousel in
   Ontario Pages/combined-styles.css): a static row of badges once
   they all fit, a 1-up swipeable carousel below that. The 2x2 grid
   this replaced showed the same four badges either way, so mobile
   got four half-size logos instead of one readable one.

   Driven by the shared [data-carousel] engine in
   first-aid-courses.js - the same one behind the photo rail - and
   the markup reuses section 12's .fac-shots__arrow/__dots chrome
   rather than restating it, so the two rails cannot drift apart.

   The desktop row is that carousel with its transform switched
   off, not a second layout. !important is required: the engine
   writes translateX inline, and on a resize up from mobile the
   stale offset would otherwise survive until the 150ms debounce
   fires.
   ──────────────────────────────────────────────────────────── */
.fac-badges { padding-block: 34px; background: var(--bg); }
@media (min-width: 860px) { .fac-badges { padding-block: 48px; } }

.fac-badges__rail { position: relative; }

/* The padding is shadow clearance - overflow:hidden would slice the
   card's shadow off flush with the viewport edge. Cancelling it with
   an equal negative margin keeps the CONTENT box exactly one
   container wide, which is the width the engine steps the track by. */
.fac-badges__viewport {
  overflow: hidden;
  padding: 8px;
  margin: -8px;
}

.fac-badges__track {
  display: flex;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* No gap while the track slides: the engine shifts by whole
   multiples of the viewport width, so a gap would walk the slides
   out of register by one gap per step. It only comes back at the
   width where the transform is switched off. */
.fac-badges__slide { flex: 0 0 100%; min-width: 0; }

@media (min-width: 760px) {
  .fac-badges__viewport { overflow: visible; }
  .fac-badges__track {
    gap: 20px;
    transform: none !important;
    transition: none;
  }
  .fac-badges__slide { flex: 1 1 0; }

  /* One dot and two dead arrows is noise once every badge is on
     screen. Scoped with .c2c-fac to outrank section 12's display
     rules, which come later in the file. */
  .c2c-fac .fac-badges__arrow,
  .c2c-fac .fac-badges__dots { display: none; }
}

.fac-badge-card {
  display: grid;
  place-items: center;
  padding: 22px;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
@media (min-width: 760px) { .fac-badge-card { padding: 30px; min-height: 200px; } }

/* Badges are mixed aspect ratios — contain, never crop */
.fac-badge-card img {
  width: auto;
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
}
@media (min-width: 760px) { .fac-badge-card img { max-height: 116px; } }


/* ── 07 · COURSE DETAIL ──────────────────────────────────── */
/* stretch, not start: both cards take the height of the taller one and
   their bottom CTAs line up, rather than padding the shorter one by hand */
.fac-courses { display: grid; gap: 28px; align-items: stretch; }
@media (min-width: 1000px) { .fac-courses { grid-template-columns: 1fr 1fr; gap: 34px; } }

.fac-course {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.fac-course--feature {
  border: 2px solid var(--red);
  box-shadow: var(--shadow-lg);
}

.fac-course__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 18px;
  padding: 26px 26px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}
@media (min-width: 600px) { .fac-course__head { padding: 30px 34px 32px; } }

/* Side-by-side cards must show identical header bands. BOTH reserve
   the same top strip for the "Most booked" flag - even the card that
   has none - so the bands match and both titles land on the same
   baseline. min-height is the floor if a title wraps short. */
@media (min-width: 1000px) {
  .fac-course__head { min-height: 178px; padding-top: 80px; }
}

/* Top-left, directly above the title. Its own line while the cards
   are stacked; moves into the reserved strip at 2-up so it can never
   make one band taller than the other. */
/* Gold distinction chip, not a red pill. A red pill sat directly above
   the red "Register Now" button and read as a second CTA; gold reads as
   an award marker instead, and reuses the token the awards labels use.
   Scoped .c2c-fac so it beats the (0,1,1) `.c2c-fac p` reset, which
   would otherwise zero the padding and flatten it. */
.c2c-fac .fac-course__ribbon {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7cd57 0%, var(--gold) 100%);
  color: var(--navy);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
/* Decorative star - a pseudo-element so it stays out of the a11y tree
   and the markup needs no change. */
.c2c-fac .fac-course__ribbon::before {
  content: '\2605';
  font-size: .82rem;
  line-height: 1;
  letter-spacing: 0;
}
@media (min-width: 1000px) {
  .c2c-fac .fac-course__ribbon { position: absolute; top: 28px; left: 34px; }
}

.c2c-fac .fac-course__title {
  /* 100% basis pushes the title onto its own line under the ribbon
     while the cards are stacked; at 2-up the ribbon leaves the flow
     and the title shares its row again. */
  flex: 1 1 100%;
  min-width: 0;
  color: var(--white);
  font-size: clamp(1.12rem, 2.5vw, 1.35rem);
  line-height: 1.2;
}
@media (min-width: 1000px) {
  .c2c-fac .fac-course__title { flex: 1 1 auto; }
}
.fac-course__reg { flex: none; }

.fac-course__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 22px 30px;
}
@media (min-width: 600px) { .fac-course__body { padding: 32px 30px 34px; } }
/* Extra inset once the cards sit 2-up and get narrow: the spec rows run
   the full content width, so without this the labels and values sit hard
   against the card border. */
@media (min-width: 1000px) { .fac-course__body { padding: 32px 40px 36px; } }

.fac-course__intro {
  font-size: .93rem;
  line-height: 1.68;
  color: var(--muted);
}
.fac-course__intro + .fac-course__intro { margin-top: 12px !important; }
.fac-course__intro a { color: var(--red); font-weight: 600; text-decoration: underline; }

/* ---- spec list: label / value pairs ---- */
.c2c-fac .fac-spec { margin-top: 22px; border-top: 1px solid var(--line); }

.fac-spec__row {
  display: grid;
  gap: 6px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
/* 150px was too much of a narrow card - it squeezed the value column and
   forced awkward wraps like "Level" / "A". */
@media (min-width: 560px) {
  .fac-spec__row { grid-template-columns: 132px 1fr; gap: 18px; align-items: start; }
}
@media (min-width: 1200px) {
  .fac-spec__row { grid-template-columns: 144px 1fr; gap: 20px; }
}

.fac-spec dt {
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
}
.fac-spec dd { font-size: .91rem; line-height: 1.6; color: var(--text); }
.fac-spec dd > p + p,
.fac-spec dd > p + .fac-level { margin-top: 8px !important; }
.fac-spec dd strong { color: var(--navy); font-weight: 700; }

.fac-spec__note {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}
.fac-spec__note a { color: var(--red); font-weight: 600; text-decoration: underline; }
.fac-disc + .fac-spec__note { margin-top: 12px !important; }

/* ---- Level A / Level C boxes (live page's .grey-bg) ---- */
.fac-level {
  padding: 14px 16px;
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg);
  font-size: .86rem;
  line-height: 1.55;
}
.fac-level + .fac-level { margin-top: 8px; }
.fac-level__name {
  font-family: var(--ff-display);
  font-size: .82rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 3px !important;
}
.fac-level ul { margin-top: 5px !important; }
.fac-level li { position: relative; padding-left: 13px; }
.fac-level li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--muted);
}
.fac-level__warn {
  margin-top: 7px !important;
  font-size: .79rem;
  color: var(--gold-dark);
}

/* ---- native <details> disclosure for the long topic lists ---- */
.fac-disc { border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); }

.fac-disc > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 700;
  color: var(--navy);
  list-style: none;
  border-radius: var(--r);
}
.fac-disc > summary::-webkit-details-marker { display: none; }
.fac-disc > summary::marker { content: ''; }
.fac-disc > summary:hover { color: var(--red); }

/* Custom chevron, rotates when open */
.fac-disc > summary::after {
  content: '';
  width: 8px; height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s;
}
.fac-disc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fac-disc[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }

.c2c-fac /* Whole-spec disclosure: with every field expanded the two cards ran far
   too long, so the spec list sits behind one toggle after the intro copy.
   The topic-list <details> stays nested inside it.

   STANDALONE, not a .fac-disc modifier. It used to carry both classes and
   rely on this rule to cancel .fac-disc's border/background - which meant
   that if only the older stylesheet was cached, the spec rows rendered
   inside .fac-disc's bordered box, and that box has no padding, so the
   labels sat flush against its edge. A modifier whose job is to undo the
   base fails badly on its own. */
.fac-disc--main { margin: 20px 0 22px; }

.fac-disc--main > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--soft);
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
}
.fac-disc--main > summary::-webkit-details-marker { display: none; }
.fac-disc--main > summary::marker { content: ''; }
.fac-disc--main > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s;
}
.fac-disc--main[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fac-disc--main > summary:hover { color: var(--red); border-color: var(--red); }
.fac-disc--main[open] > summary { margin-bottom: 14px; }

/* the summary supplies the top edge, so drop the dl's own */
.fac-disc--main .fac-spec { margin-top: 0; border-top: 0; }

.fac-content { padding: 12px 14px; display: grid; gap: 5px; }
.fac-content li {
  position: relative;
  padding: 3px 0 3px 16px;
  font-size: .86rem;
  line-height: 1.5;
}
.fac-content li::before {
  content: '';
  position: absolute; left: 0; top: .82em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted);
}
.fac-content li em { color: var(--muted); font-size: .95em; font-style: normal; }
.fac-content li a { color: var(--red); font-weight: 600; text-decoration: underline; }

/* Standard-only topics, marked bg-active on the live page */
.fac-content li.is-extra {
  padding-left: 16px;
  border-radius: var(--r-sm);
  background: var(--red-soft);
  padding-right: 8px;
  font-weight: 600;
  color: var(--navy);
}
.fac-content li.is-extra::before { background: var(--red); left: 6px; }

.c2c-fac .fac-content__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 13px;
  font-size: .78rem;
  color: var(--muted);
}
.fac-content__key {
  width: 14px; height: 14px; flex: none;
  border-radius: 4px;
  background: var(--red-soft);
  border: 1px solid var(--red);
}

/* auto margin absorbs the slack, pinning the CTA to the card floor so
   both cards' buttons align. .fac-disc--main's bottom margin guarantees a
   minimum gap above it. */
.fac-course__foot { width: 100%; margin-top: auto; }


/* ── 08 · AWARDS ─────────────────────────────────────────────
   Ported verbatim from the production stylesheets so this behaves
   exactly like the awards rail on the location pages:
     .c2c-awards-brevo / .c2c-ab-*  -> c2c-assets/Ontario Pages/combined-styles.css
     b.entity, .c2c-container       -> c2c-assets/c2c-shared.css
   Only change: every selector is prefixed .c2c-fac, so these win
   over this file's own resets and cannot leak out of the wrapper.

   DO NOT change the badge count, item width or track gap without
   recomputing --ab-end. It is the exact scroll distance:
     12 items x 270px + 11 gaps x 52px = 3812px track
     67.5762% of 3812 = 2576px = 3812 - 1236 (shell width)
   Get it wrong and the rail over- or under-shoots.
   ──────────────────────────────────────────────────────────── */
.c2c-fac .c2c-container { max-width: 1220px; margin: 0 auto; padding: 0 24px; }

.c2c-fac b.entity { color: var(--navy); font-weight: 800; }

.c2c-fac .c2c-awards-brevo { padding: 72px 0 80px; background: #fff; overflow: hidden; }
.c2c-fac .c2c-awards-brevo .c2c-container { text-align: center; }

.c2c-fac .c2c-awards-brevo-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #c0392b;
  margin: 0 0 12px;
}

.c2c-fac .c2c-awards-brevo-heading {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  color: #111;
  margin: 0 auto 18px;
  line-height: 1.25;
  max-width: 900px;
}

.c2c-fac .c2c-ab-shell {
  background: transparent;
  border-radius: 20px;
  border: 1px solid #e0e5f0;
  padding: 40px 0;
  margin: 0 auto;
  max-width: 1236px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.c2c-fac .c2c-ab-track {
  --ab-end: -67.5762%;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 52px;
  width: max-content;
  animation: c2c-ab-scroll 32s linear infinite alternate;
  padding: 0;
}
.c2c-fac .c2c-ab-track:hover { animation-play-state: paused; }

.c2c-fac .c2c-ab-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 270px;
  text-align: center;
}
.c2c-fac .c2c-ab-item img {
  width: 270px;
  height: 270px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .13));
  transition: transform .25s ease;
}
.c2c-fac .c2c-ab-item:hover img { transform: scale(1.06); }

.c2c-fac .c2c-ab-label {
  font-size: 12.5px;
  line-height: 1.4;
  color: #333;
  margin: 0;
  max-width: 200px;
}
.c2c-fac .c2c-ab-label strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #c0392b;
  margin-bottom: 2px;
}

@keyframes c2c-ab-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--ab-end, -67.5762%)); }
}

@media (max-width: 768px) {
  .c2c-fac .c2c-ab-shell { max-width: 558px; }
  .c2c-fac .c2c-ab-track { --ab-end: -75.7813%; gap: 24px; animation-duration: 26s; }
  .c2c-fac .c2c-ab-item { width: 170px; }
  .c2c-fac .c2c-ab-item img { width: 170px; height: 170px; }
}
@media (max-width: 480px) {
  .c2c-fac .c2c-ab-shell { max-width: 276px; }
  .c2c-fac .c2c-ab-track { --ab-end: -84.1014%; gap: 16px; animation-duration: 20s; }
  .c2c-fac .c2c-ab-item { width: 130px; }
  .c2c-fac .c2c-ab-item img { width: 130px; height: 130px; }
}


/* ── 09 · SPLIT SECTIONS ─────────────────────────────────── */
.fac-split { display: grid; gap: 40px; }
@media (min-width: 940px) {
  .fac-split { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .fac-split--narrow { grid-template-columns: .85fr 1.15fr; align-items: start; }
}


/* Why-us feature cards */
.c2c-fac .fac-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
@media (min-width: 560px) { .fac-metrics { grid-template-columns: repeat(4, 1fr); } }
.fac-metrics strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--red);
}
.fac-metrics span { display: block; margin-top: 6px; font-size: .8rem; font-weight: 500; color: var(--muted); }

.fac-features { display: grid; gap: 14px; }
@media (min-width: 620px) { .fac-features { grid-template-columns: 1fr 1fr; } }
.fac-feature {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.fac-feature h3 { font-size: 1rem; }
.fac-feature p { margin-top: 8px !important; font-size: .88rem; line-height: 1.6; color: var(--muted); }


/* ── 10 · ACCORDION ──────────────────────────────────────── */
.fac-acc {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.fac-acc__item + .fac-acc__item { border-top: 1px solid rgba(255, 255, 255, .13); }

.fac-acc__btn {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 20px;
  text-align: left;
  transition: background-color .18s;
}
.fac-acc__btn:hover { background: rgba(255, 255, 255, .05); }

.fac-acc__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--red);
  color: var(--white);
}
.fac-acc__icon--muted { background: rgba(255, 255, 255, .16); }
.fac-acc__icon svg { width: 20px; height: 20px; }

.fac-acc__titles { flex: 1; min-width: 0; }
.fac-acc__title {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.02rem; font-weight: 800; line-height: 1.2; color: var(--white);
}
.fac-acc__sub { display: block; margin-top: 3px; font-size: .8rem; color: rgba(255, 255, 255, .6); }

.fac-acc__chev {
  width: 19px; height: 19px; flex: none;
  color: rgba(255, 255, 255, .6);
  transition: transform .3s;
}
.fac-acc__item[data-open="true"] .fac-acc__chev { transform: rotate(180deg); }

/* grid-template-rows 0fr→1fr animates to auto height without JS
   measuring. Supported in all current evergreen browsers; older
   ones simply snap open, which is an acceptable degradation. */
.fac-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s ease;
}
.fac-acc__panel > div { overflow: hidden; }
.fac-acc__item[data-open="true"] .fac-acc__panel { grid-template-rows: 1fr; }

.fac-acc__body { padding: 0 20px 22px 77px; font-size: .91rem; line-height: 1.66; }
@media (max-width: 520px) { .fac-acc__body { padding-left: 20px; } }
.fac-acc__body p + p,
.fac-acc__body p + ul { margin-top: 12px !important; }
.fac-acc__body ul { display: grid; gap: 7px; }
.fac-acc__body li { position: relative; padding-left: 16px; }
.fac-acc__body li::before {
  content: '';
  position: absolute; left: 0; top: .66em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
}

.c2c-fac .fac-note {
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(240, 183, 47, .34);
  border-radius: var(--r);
  background: rgba(240, 183, 47, .13);
  font-size: .87rem;
  color: var(--white);
}
.fac-note strong { font-weight: 800; }


/* ── 11 · RECERT BAND ────────────────────────────────────── */
.fac-band {
  display: grid;
  gap: 26px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow);
}
@media (min-width: 600px) { .fac-band { padding: 38px; } }
@media (min-width: 940px) {
  .fac-band { grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
}
.fac-band__warn { margin-top: 14px !important; font-size: .85rem; color: var(--muted); }
.fac-band__actions { display: grid; gap: 12px; }
@media (min-width: 940px) { .fac-band__actions { width: 260px; } }


/* ── 12 · PHOTO CAROUSEL ─────────────────────────────────────
   4 up on desktop, 2 on tablet, 1 on mobile. The JS measures slide
   width to derive slides-per-view, so these widths are the single
   source of truth - change them here only.
   ──────────────────────────────────────────────────────────── */
.fac-shots { position: relative; }

.fac-shots__viewport { overflow: hidden; border-radius: var(--r); }

.fac-shots__track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, .2, .2, 1);
}

.fac-shots__slide {
  flex: 0 0 100%;
  padding-inline: 7px;
}
@media (min-width: 640px)  { .fac-shots__slide { flex-basis: 50%; } }
@media (min-width: 1000px) { .fac-shots__slide { flex-basis: 25%; } }

.fac-shots__slide img {
  width: 100%;
  /* Native ratio of the sources, so nothing gets cropped. 300/267 is the
     /first-aid-courses/ set; a page whose photos have a different native
     ratio overrides --shot-ratio on .fac-shots rather than editing this
     rule (see section 17). */
  aspect-ratio: var(--shot-ratio, 300 / 267);
  object-fit: cover;
  border-radius: var(--r);
  background: var(--line);
  box-shadow: var(--shadow);
}

/* Arrows straddle the viewport edge, vertically centred */
.fac-shots__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 2;
  transition: background-color .18s, color .18s, opacity .18s;
}
.c2c-fac .fac-shots__arrow { color: var(--navy); }
.fac-shots__arrow svg { width: 19px; height: 19px; }
.fac-shots__arrow--prev { left: -6px; }
.fac-shots__arrow--next { right: -6px; }
@media (min-width: 1240px) {
  .fac-shots__arrow--prev { left: -22px; }
  .fac-shots__arrow--next { right: -22px; }
}
.fac-shots__arrow:hover:not(:disabled) { background: var(--navy); color: var(--white); }
.fac-shots__arrow:disabled { opacity: 0; pointer-events: none; }

.fac-shots__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.fac-shots__dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 35, 79, .2);
  transition: width .25s, background-color .25s;
}
.fac-shots__dots button:hover { background: rgba(15, 35, 79, .42); }
.fac-shots__dots button[aria-selected="true"] { width: 28px; background: var(--red); }


/* ── 13 · REVIEWS HEADING ────────────────────────────────────
   The reviews themselves are a separate Elementor Shortcode widget
   sitting directly beneath this heading, OUTSIDE .c2c-fac - so the
   plugin styles itself and our reset cannot reach it. Nothing here
   but the heading band, with its bottom padding removed so the
   widget below closes the gap.
   ──────────────────────────────────────────────────────────── */
.fac-section--flush { padding-bottom: 0; }
@media (min-width: 860px) { .fac-section--flush { padding-bottom: 0; } }
.fac-head--flush { margin-bottom: 0; }


/* ── 13.1 · REVIEWS + VIDEO, TWO-UP ──────────────────────────
   The .c2c-rv-wrap component from the location pages, rebuilt on the
   [data-carousel] engine in first-aid-courses.js so it needs no new
   script. Sizing is taken from combined-styles.css so a visitor moving
   between a location page and a course page sees the same block.

   Section 13 above is the OTHER arrangement: a bare heading with the
   review plugin's shortcode widget beneath it. A page uses one or the
   other, not both.
   ──────────────────────────────────────────────────────────── */
.c2c-fac .fac-rv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: stretch;
}
@media (min-width: 1000px) {
  .c2c-fac .fac-rv { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* min-width:0 is load-bearing. A 1fr track is minmax(auto,1fr), so
   without it the rail's min-content - five slides at 100% each - pushes
   this column past its share and squeezes the video column to a ribbon. */
.c2c-fac .fac-rv__panel { min-width: 0; display: flex; flex-direction: column; }

.c2c-fac .fac-rv__title {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: var(--navy);
}
.c2c-fac .fac-rv__sub {
  margin-top: 8px !important;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.c2c-fac .fac-rv__score {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.c2c-fac .fac-rv__big {
  font-family: var(--ff-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  color: var(--navy);
}
.c2c-fac .fac-rv__meta { margin-top: 2px !important; font-size: 14px; color: var(--muted); }
.c2c-fac .fac-rv__attrib {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* The rail fills the panel height and reserves a 36px gutter each side
   for the arrows, which sit inside it. Left at content height, the card
   kept its own size while the rail stretched, and the arrows - pinned to
   top:50% of that stretched rail - floated well below the card. */
.c2c-fac .fac-rv__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
  padding-inline: 36px;
}
.c2c-fac .fac-rv__viewport {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}
.c2c-fac .fac-rv__track {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.c2c-fac .fac-rv__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
}

/* 36px to sit in the gutter. Section 12's 44px arrows overlapped the
   card, and its -22px pull past 1240px puts them outside a half-width
   column entirely. */
.c2c-fac .fac-rv__arrow { width: 36px; height: 36px; }
.c2c-fac .fac-rv__arrow svg { width: 17px; height: 17px; }
.c2c-fac .fac-rv__arrow.fac-shots__arrow--prev { left: 0; }
.c2c-fac .fac-rv__arrow.fac-shots__arrow--next { right: 0; }

.c2c-fac .fac-review {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  box-sizing: border-box;
}
.c2c-fac .fac-review__head { display: flex; align-items: center; gap: 10px; }
.c2c-fac .fac-review__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--avatar, var(--navy));
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
}
.c2c-fac .fac-review__who { display: flex; flex-direction: column; line-height: 1.2; }
.c2c-fac .fac-review__who strong { font-size: 14px; color: var(--navy); }
.c2c-fac .fac-review__who span { font-size: 12px; font-weight: 700; color: #8b98ae; }
.c2c-fac .fac-review__g { flex-shrink: 0; margin-left: auto; }
/* Gold, like .fac-stars in section 03: these sit beside a Google logo
   too, where the colour reads as Google's own rather than as ours. */
.c2c-fac .fac-review__stars {
  margin-top: 12px !important;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 1.4px;
}
.c2c-fac .fac-review__body {
  flex: 1;
  overflow: hidden;
  margin-top: 10px !important;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

.c2c-fac .fac-rv__dots { margin-top: 18px; }
.c2c-fac .fac-rv__cta { width: 100%; margin-top: 28px; }

/* Section 17.8 centres a lone video card at 860px; here it fills its own
   column and grows to match the review panel beside it. */
.c2c-fac .fac-rv .fac-vid {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: none;
  margin: 16px 0 0;
}
.c2c-fac .fac-rv .fac-vid__body { flex: 1; }

/* Section 16 unrolls every rail for print, but by .fac-shots__* name, so
   this one needs its own or print shows one review and clips the rest.
   The arrows and dots are already hidden there: they carry
   .fac-shots__arrow/__dots. */
@media print {
  .c2c-fac .fac-rv { grid-template-columns: 1fr !important; }
  .c2c-fac .fac-rv__viewport { overflow: visible !important; }
  .c2c-fac .fac-rv__track { flex-wrap: wrap !important; height: auto !important; transform: none !important; }
  .c2c-fac .fac-rv__slide { height: auto !important; }
}


/* ── 14 · FAQ ────────────────────────────────────────────────
   Same shape as .c2c-faq on the location pages (eyebrow, heading,
   stacked Q/A with a +/- indicator) but on native <details>, so no
   JS. The question is an <h3> inside <summary>, which the spec
   explicitly allows and which keeps the heading outline intact.
   ──────────────────────────────────────────────────────────── */
.fac-faq {
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

.fac-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.fac-faq__item > summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.fac-faq__item > summary::-webkit-details-marker { display: none; }
.fac-faq__item > summary::marker { content: ''; }

.c2c-fac .fac-faq__q {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--navy);
}

/* +/- indicator, matching the location pages' <span>+</span> */
.fac-faq__item > summary::after {
  content: '+';
  flex: none;
  width: 24px;
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--red);
}
.fac-faq__item[open] > summary::after { content: '\2212'; }
.fac-faq__item > summary:hover .fac-faq__q { color: var(--red); }

.fac-faq__a { padding: 0 22px 20px; }
.fac-faq__a p {
  font-size: .93rem;
  line-height: 1.72;
  color: var(--muted);
}


/* ── 15 · FINAL CTA & MOBILE BAR ─────────────────────────── */
.fac-cta {
  padding-block: 60px;
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
  text-align: center;
}
@media (min-width: 860px) { .fac-cta { padding-block: 84px; } }
.fac-cta .fac-h2 { color: var(--white); }
.fac-cta > .fac-container > p {
  max-width: 46em;
  margin: 16px auto 0 !important;
  font-size: 1rem;
  line-height: 1.66;
}
.fac-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
@media (min-width: 560px) { .fac-cta__actions { flex-direction: row; } }

.fac-mobilebar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 -8px 26px rgba(15, 35, 79, .14);
  transform: translateY(110%);
  transition: transform .3s ease;
  /* Clear the iPhone home indicator */
  padding-bottom: max(11px, env(safe-area-inset-bottom));
}
.fac-mobilebar.is-visible { transform: translateY(0); }
.fac-mobilebar__main { flex: 1; }
@media (min-width: 1000px) { .fac-mobilebar { display: none; } }


/* ── 16 · MOTION & PRINT ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .c2c-fac *,
  .c2c-fac *::before,
  .c2c-fac *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* The rule above would snap the awards marquee straight to its END
     keyframe (translateX(-67%)), pushing the badges out of view. Kill
     the animation outright and let the rail be scrolled by hand. */
  .c2c-fac .c2c-ab-track {
    animation: none !important;
    transform: none !important;
  }
  .c2c-fac .c2c-ab-shell {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media print {
  .fac-mobilebar { display: none !important; }

  /* Flatten the awards marquee so all 12 badges print */
  .fac-mobilebar { display: none !important; }
  .c2c-ab-shell { overflow: visible !important; max-width: none !important;
                  -webkit-mask-image: none !important; mask-image: none !important; }
  .c2c-ab-track { animation: none !important; transform: none !important;
                  flex-wrap: wrap !important; width: auto !important;
                  justify-content: center; gap: 20px !important; }
  .c2c-ab-item { width: 150px !important; }
  .c2c-ab-item img { width: 150px !important; height: 150px !important; filter: none !important; }

  /* Force every <details> open so the full syllabus prints */
  .fac-disc > summary { display: none !important; }
  .fac-faq__item > summary::after { display: none !important; }
  .fac-faq__a { display: block !important; }
  .fac-disc > ul,
  .fac-disc > .fac-content__legend { display: block !important; }

  /* Open every accordion panel */
  .fac-acc__panel { grid-template-rows: 1fr !important; }

  /* Show every photo and location panel */
  .fac-shots__arrow, .fac-shots__dots { display: none !important; }
  .fac-shots__viewport { overflow: visible !important; }
  .fac-shots__track { flex-wrap: wrap !important; transform: none !important; }
  .fac-shots__slide { flex-basis: 25% !important; }

  /* Same for the trust rail. Its arrows and dots already carry the
     .fac-shots__ classes above, so only the track needs unwinding. */
  .fac-badges__viewport { overflow: visible !important; }
  .fac-badges__track { flex-wrap: wrap !important; transform: none !important; }
  .fac-badges__slide { flex-basis: 25% !important; }
}


/* ── 17 · /basic-life-support-bls/ ADDITIONS ─────────────
   Sections 01-16 above are shared by every page that loads this
   file. Everything below is used ONLY by /basic-life-support-bls/,
   which has content /first-aid-courses/ does not: full-width course
   cards, grouped topic lists, provider chips in the card header, and
   a note on a white background.

   Nothing here matches a selector on /first-aid-courses/, so that
   page renders identically with or without this section. The one
   selector that could - `.fac-head .fac-note` - cannot, because that
   page's only .fac-note lives inside .fac-acc__body.
   Adding a third page? Give it a 17.x block of its own.
   ──────────────────────────────────────────────── */

/* ---- 17.0 · page overrides for the shared hero and carousel ----
   These two replace what would otherwise be edits to sections 05
   and 12, so the shared rules stay page-neutral. */

/* The BLS page's own banner, 1520x600, so it fills the hero band at
   native size. It is 274KB against 76KB for the AED banner: if Core
   Web Vitals need the headroom, re-export this at ~80% WebP quality
   rather than substituting a smaller source and letting it upscale.
   MUST match the <link rel=preload> in that page's PASTE BLOCK 1. */
.fac-hero--bls {
  --hero-img: url('https://www.c2cfirstaidaquatics.com/wp-content/uploads/2024/01/red-cross-basic-life-support.png.webp');
}

/* BLS classroom photos are 540x480 (9:8), not the 300x267 of the
   first-aid set. */
.fac-shots--bls { --shot-ratio: 9 / 8; }


/* ---- 17.1 · full-width course card ----
   .fac-courses is a 2-up grid. The BLS page puts two cards side by
   side (the two BLS programs) and then spans single cards across both
   columns beneath, rather than orphaning a half-empty cell.

   No header override here, on purpose: EVERY card on that page carries
   a chip, so they all want section 07's reserved top strip. An
   override that removed it would collide with the absolutely
   positioned .fac-course__ribbon at >=1000px. */
@media (min-width: 1000px) {
  .fac-course--wide { grid-column: 1 / -1; }

  /* At full width a 144px label column against a ~1050px value column
     leaves the values stranded mid-card. Cap the spec list instead. */
  .fac-course--wide .fac-spec { max-width: 780px; }
}


/* ---- 17.1b · align the disclosure across side-by-side cards ----
   The two BLS cards carry different amounts of intro copy, so their
   "Get Course Information" toggles landed at different heights and read
   as a misalignment. Section 07 already pins .fac-course__foot to the
   card floor with margin-top:auto; move that auto up onto the
   disclosure so the slack collects ABOVE it, and both the toggle and
   the CTA under it line up across the row.

   Only ONE auto margin can do this: with auto on both the disclosure
   and the foot, flexbox splits the free space between them and centres
   the pair instead of pinning it. Hence foot goes back to a fixed
   margin here, and .fac-disc--main's own 22px bottom margin supplies
   the gap between the two.

   >=1000px only: below that the cards are stacked, nothing needs
   aligning, and an auto margin would just open a gap mid-card. A card
   spanning the full row is alone in it, so its height equals its
   content and the slack is zero, so the auto margin is a no-op there
   and a --wide card just takes the padding below.

   The padding is the floor that auto cannot eat. margin-top:auto
   REPLACES the 20px the disclosure carries by default, and on whichever
   card is tallest the free space is zero - so the toggle landed flush
   against the last line of intro copy. Padding is not free space, so it
   survives; auto still collects the slack on the shorter card, above
   it. Do not turn this back into a margin: auto would overwrite it. */
@media (min-width: 1000px) {
  .fac-courses--pinned .fac-disc--main { margin-top: auto; padding-top: 26px; }
  .fac-courses--pinned .fac-course__foot { margin-top: 0; }
}


/* ---- 17.1c · two CTAs on one card floor ----
   The bundle is the one card that asks for two bookings, so its foot
   carries a link for each half instead of only the BLS one. The
   modifier goes on .fac-course__foot itself rather than a new wrapper
   inside it, so the margin-top:auto that pins the row to the card floor
   (section 07, overridden at 1000px above) keeps working untouched.

   The pair fills the card floor, each button taking half. flex:1 1 0
   over flex:1 1 auto: the two labels differ in length and auto would
   size each button to its own text, landing them at visibly different
   widths across a card this wide.

   flex-wrap is the safety net, not the plan - min-width:auto stops a
   button shrinking below its label, so at awkward mid-widths they drop
   to one per line instead of overflowing the card. */
.c2c-fac .fac-course__foot--pair {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.c2c-fac .fac-course__foot--pair .fac-btn { flex: 1 1 0; }

/* Stacked below 600px. No width rule needed: align-items defaults to
   stretch, so a column already gives both buttons the full width. */
@media (max-width: 600px) {
  .c2c-fac .fac-course__foot--pair { flex-direction: column; }
}


/* ---- 17.2 · provider chip in the course header ----
   /first-aid-courses/ uses .fac-course__ribbon as a gold "Most booked"
   award marker with a star pseudo-element. On the BLS page the chip
   names the certifying body instead, so it drops the star and takes
   the translucent treatment .fac-hero__badge already uses for
   "Canadian Red Cross Training Partner" - a provider badge reads as
   attribution, not as a distinction.

   Giving every card a chip is also what keeps the header bands the
   same height: section 07 reserves that top strip either way, so one
   filled strip beside one empty strip reads as a misalignment.

   The gold star chip is still used, once, for the bundle offer - the
   one place on that page where "distinction" is the right meaning.

   Specificity is (0,3,0) via the doubled class, not (0,2,0), so this
   wins over the base rule regardless of source order. Section 17 is
   appended to a file that keeps growing; relying on "later in the
   file" is a tie waiting to be broken by a reorder. */
.c2c-fac .fac-course__ribbon.fac-course__ribbon--provider {
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .93);
  box-shadow: none;
}
.c2c-fac .fac-course__ribbon.fac-course__ribbon--provider::before { content: none; }


/* ---- 17.2b · a second chip beside the first ----
   The Airway add-on carries an eligibility caveat next to its provider
   chip. Section 07 pins a lone .fac-course__ribbon into the reserved
   strip with position:absolute at >=1000px, so a second chip would sit
   on top of the first. The wrapper takes that absolute slot instead and
   the chips inside it go back to normal flow.

   flex-basis:100% mirrors .fac-course__title: while the cards are
   stacked the pair keeps its own line above the title, exactly as the
   single chip did. */
.c2c-fac .fac-course__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 100%;
}

@media (min-width: 1000px) {
  .c2c-fac .fac-course__flags {
    position: absolute;
    top: 28px;
    left: 34px;
    right: 34px;
    flex: none;
  }
  /* (0,3,0) beats the (0,2,0) absolute rule in section 07 - without
     this the chips would be positioned twice over. */
  .c2c-fac .fac-course__flags .fac-course__ribbon { position: static; }
}

/* The caveat is the one thing on this card a reader must not miss, so
   it takes the loudest treatment available on a navy band: solid white.
   Not gold - section 17.2 reserves that for distinction, and this is a
   restriction. Not red - a red pill above the red "Register Now" reads
   as a second CTA, which is why the provider chip dropped it. */
.c2c-fac .fac-course__ribbon.fac-course__ribbon--note {
  padding: 8px 15px;
  border: 1px solid var(--white);
  background: var(--white);
  color: var(--navy);
  box-shadow: none;
}
.c2c-fac .fac-course__ribbon.fac-course__ribbon--note::before { content: none; }


/* ---- 17.3 · sub-heads inside a topic list ----
   Airway Management and Oxygen Therapy are two syllabi inside one
   2-hour course, so its <details> holds two labelled lists. */
.c2c-fac .fac-content__group {
  padding: 14px 14px 0;
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
/* The list that follows a group head supplies its own top padding, so
   drop the doubled gap. */
.fac-content__group + .fac-content { padding-top: 6px; }
/* Rule between the two syllabi */
.fac-content + .fac-content__group {
  margin-top: 4px !important;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* On a wide card the two syllabi sit side by side rather than as one
   long column. CSS columns, not grid: a head and its list are siblings
   rather than one wrapped group, so there is no element to make a grid
   item of. break-inside/break-after keep a head glued to its own list
   instead of stranding it at the foot of column 1. */
@media (min-width: 860px) {
  .fac-course--wide .fac-disc__cols {
    columns: 2;
    column-gap: 28px;
    padding-bottom: 8px;
  }
  .fac-course--wide .fac-disc__cols > .fac-content,
  .fac-course--wide .fac-disc__cols > .fac-content__group { break-inside: avoid; }
  .fac-course--wide .fac-disc__cols > .fac-content__group { break-after: avoid; }
  /* The second head's divider rule reads as a stray line mid-column
     once the two lists are side by side. */
  .fac-course--wide .fac-disc__cols > .fac-content + .fac-content__group {
    border-top: 0;
    margin-top: 0 !important;
  }
}


/* ---- 17.4 · note on a white background ----
   .fac-note is white-on-navy for the dark formats section. The BLS
   page needs the same callout on a WHITE section, for the CPR-HCP
   notice under the courses heading.

   Doubled class for (0,3,0). At (0,2,0) this tied with the base
   `.c2c-fac .fac-note` and resolved only by source order - and it
   failed visibly whenever the stylesheet was served from cache
   WITHOUT section 17: the base rule's white text landed on the base
   rule's pale gold panel, i.e. invisible. Keep the specificity. */
.c2c-fac .fac-note.fac-note--light {
  border-color: rgba(240, 183, 47, .5);
  background: var(--gold-soft);
  color: var(--gold-dark);
}
.c2c-fac .fac-note.fac-note--light strong { color: var(--gold-dark); }
.c2c-fac .fac-note.fac-note--light a { color: var(--red); font-weight: 700; text-decoration: underline; }

.fac-head .fac-note { margin-top: 22px; text-align: left; }


/* ---- 17.5 · format chips ---- REMOVED
   Was a chip row listing Heart & Stroke's three formats in the spec
   table. Section 17.7's format switch names the same three and acts on
   them, so the row restated its own control; both it and .fac-formats
   are gone. Nothing else on any page used the class. */


/* ---- 17.6 · location picker ----
   Both BLS programs are booked per location, not from one central
   form: Red Cross BLS runs at 33 facilities that each have their own
   BLS page, and Heart & Stroke is sold as two provincial streams. The
   live page carries a city <select> on one card and an Alberta/Ontario
   pair on the other; this is that control, restyled.

   Inset panel rather than a full-bleed band under the header: a band
   would need negative margins matching .fac-course__body's padding at
   three separate breakpoints, and the two would silently drift apart
   the first time that padding is touched.

   Red-soft, not --bg: this is the one interactive control in the card
   body and it has to read as such next to the navy spec rows. */
.fac-locpick {
  margin-bottom: 24px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(181, 48, 49, .16);
  border-radius: var(--r);
  background: var(--red-soft);
}

/* (0,2,0) beats the `.c2c-fac p` reset at (0,1,1), so no !important. */
.c2c-fac .fac-locpick__label {
  margin-bottom: 10px;
  font-family: var(--ff-display);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}

.fac-locpick__row { display: flex; gap: 10px; align-items: stretch; }

/* Element-qualified for (0,2,1). The theme ships its own select
   styling from WooCommerce and JupiterX at similar weight, and a bare
   (0,2,0) class lost to it often enough to be worth the extra token.
   appearance:none also drops the native arrow, hence the inline
   chevron - keep the %23 escapes, a raw # ends the data URI. */
.c2c-fac select.fac-locpick__select {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 40px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f234f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px 15px;
  box-shadow: none;
  font-family: var(--ff-body);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* The dropdown list itself renders in the OS layer, where only these
   two properties are honoured - and Windows dark mode otherwise paints
   optgroup labels white on white. */
.c2c-fac select.fac-locpick__select option,
.c2c-fac select.fac-locpick__select optgroup { background: var(--white); color: var(--navy); }

/* Matches the select's 48px so the pair sits on one line. */
.c2c-fac .fac-locpick__go { flex: none; padding: 0 22px; height: 48px; }

/* ---- Heart & Stroke: two provinces instead of a city list ----
   Equal columns, so neither province reads as the default. */
.fac-locpick__provs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c2c-fac .fac-locpick__prov {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  transition: border-color .18s, color .18s, box-shadow .18s;
}
.c2c-fac .fac-locpick__prov:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 2px 8px rgba(181, 48, 49, .12);
}


/* ---- 17.7 · course-format switch ----
   Both BLS cards sell the same syllabus in two or three formats that
   differ only in duration, prerequisites and requirements. The live
   page switches those three cells with a script; this does it in CSS.

   Native radios, not buttons. Arrow-key navigation, the group name and
   the checked state are all native, and - the reason it matters - the
   filtering below is `:has()`, so no JavaScript is involved at any
   point. A browser without `:has()` drops those four rules as invalid
   and every variant stays visible, which is exactly how these cards
   read before the switch existed. Nothing becomes unreachable, and
   crawlers see all formats either way.

   Radios are visually hidden rather than `display:none`: the latter
   takes them out of the tab order and the group stops being operable
   by keyboard. The label is the visible control. */
.fac-seg {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r);
  background: var(--bg);
}

.fac-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.c2c-fac .fac-seg label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: var(--r-sm);
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.c2c-fac .fac-seg label:hover { color: var(--navy); }

.c2c-fac .fac-seg input:checked + label {
  background: var(--white);
  color: var(--red);
  box-shadow: 0 1px 4px rgba(15, 35, 79, .14);
}
/* The input is off-screen, so its own focus ring would be invisible -
   put the ring on the label the user is actually looking at. */
.c2c-fac .fac-seg input:focus-visible + label {
  outline: 3px solid var(--navy-3);
  outline-offset: 2px;
}

/* ---- the filter itself ----
   Scoped to the disclosure each switch lives in, so the two cards can
   both use "renewal" without one driving the other. `~=` matches one
   name inside a space-separated list, so a cell shared by two formats
   is data-fmt="inclass blended" rather than a duplicated element.
   One rule per format name in use; a new format needs a new line. */
.fac-disc--main:has([data-fmt-radio="full"]:checked)    [data-fmt]:not([data-fmt~="full"])    { display: none; }
.fac-disc--main:has([data-fmt-radio="renewal"]:checked) [data-fmt]:not([data-fmt~="renewal"]) { display: none; }
.fac-disc--main:has([data-fmt-radio="inclass"]:checked) [data-fmt]:not([data-fmt~="inclass"]) { display: none; }
.fac-disc--main:has([data-fmt-radio="blended"]:checked) [data-fmt]:not([data-fmt~="blended"]) { display: none; }

/* Section 07 stacks sibling values in a spec cell with a top margin
   (`dd > p + p` and `.fac-level + .fac-level`). Once the filter leaves
   one variant standing, that margin is a stray gap above the only
   thing in the cell - and it throws the row off the baseline of the
   rows around it. Zero it, but only inside a disclosure whose filter is
   actually running, so the no-`:has()` fallback keeps its spacing.
   !important because `dd > p + p` carries one. */
.fac-disc--main:has([data-fmt-radio]:checked) .fac-spec dd > [data-fmt] { margin-top: 0 !important; }


/* ---- 17.8 · student video card ----
   The other course pages stop their reviews section at the heading and
   let the Google-reviews shortcode in PASTE BLOCK 2 fill it. This page
   has no shortcode block, so the section carries the YouTube
   testimonial reel instead.

   The 16/9 box is the iframe's PARENT, not the iframe: YouTube's embed
   ships width and height attributes, and those beat an aspect-ratio
   set on the replaced element itself. */
.c2c-fac .fac-vid {
  max-width: 860px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.c2c-fac .fac-vid__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.c2c-fac .fac-vid__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.c2c-fac .fac-vid__body { padding: 24px 26px; }

.c2c-fac .fac-vid__title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}
.c2c-fac .fac-vid__role {
  margin-top: 4px;
  font-size: .93rem;
  font-weight: 700;
  color: var(--red);
}
.c2c-fac .fac-vid__bio {
  margin-top: 14px;
  font-size: .95rem;
  color: var(--muted);
}

.c2c-fac .fac-vid__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: right;
}
.c2c-fac .fac-vid__link {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
}
.c2c-fac .fac-vid__link:hover { color: var(--red); }

@media (max-width: 600px) {
  .c2c-fac .fac-vid__body { padding: 20px 18px; }
}


/* ── 18 · /emr-training/ ADDITIONS ───────────────────────
   Same arrangement as section 17: two declarations that only the
   EMR page can match, so /first-aid-courses/ and
   /basic-life-support-bls/ render byte-identically with or without
   this block.

   The EMR page reuses section 17 wholesale - full-width course card
   (17.1), pinned disclosures (17.1b), provider chips (17.3), grouped
   topic lists (17.3b) and the light note (17.4). Nothing there is
   BLS-specific in its selectors, only in its comments.
   ──────────────────────────────────────────────── */

/* [VERIFY] B - intrinsic size of this photo has not been checked against
   the 1520x600 the hero band wants. If it upscales, re-export the same
   shot at 1520x600. Whatever the URL is, it must stay identical to the
   <link rel=preload> in the <head> of emr-training.html or the browser
   downloads both files. */
.fac-hero--emr {
  --hero-img: url('https://www.c2cfirstaidaquatics.com/wp-content/uploads/2021/04/the-need-to-knows-of-an-emergency-medical-responder-course-Coast2Coast-1-min.jpg');
}

/* EMR classroom photos are 300x200 (3:2) - wider than both the
   first-aid set (300x267) and the BLS set (540x480). */
.fac-shots--emr { --shot-ratio: 3 / 2; }


/* ── 19 · /first-responder-training/ ADDITIONS ───────────
   Same arrangement as sections 17 and 18: two declarations that only
   the First Responder page can match, so every other page renders
   byte-identically with or without this block.

   The FR page reuses section 17 wholesale - full-width course card
   (17.1), pinned disclosures (17.1b), provider chips (17.3) and the
   light note (17.4).
   ──────────────────────────────────────────────── */

/* Unlike the EMR banner, this one is already 1520x600 - the exact
   size the hero band wants, so nothing upscales. MUST match the
   <link rel=preload> in that page's PASTE BLOCK 1. */
.fac-hero--fr {
  --hero-img: url('https://www.c2cfirstaidaquatics.com/wp-content/uploads/2024/01/first-responders.png.webp');
}

/* FR classroom photos are 300x200 (3:2), same set format as EMR. */
.fac-shots--fr { --shot-ratio: 3 / 2; }


/* ── 20 · /recertification-courses/ ADDITIONS ────────────
   Same arrangement as sections 17-19. The recert page reuses
   section 17 wholesale - full-width course card (17.1), pinned
   disclosures (17.1b), provider chips (17.2) and the light note
   (17.4) - and needs no carousel override: its classroom photos are
   the same 300x267 set /first-aid-courses/ uses, so the default
   --shot-ratio already fits.

   The one genuinely new thing on that page is the facilities list.
   It is NOT a new component: it reuses .fac-features / .fac-feature
   from section 09 (bordered card, h3 + muted paragraph) and adds
   only the link treatment, because 35 city names inside a muted
   paragraph need to read as links.
   ──────────────────────────────────────────────── */

/* [VERIFY] C - this banner is already 1520x600, the exact size the
   hero band wants, so nothing upscales. It is however 745KB, against
   78KB for the AED banner and 274KB for the BLS one, and it is the
   preloaded LCP element. Re-export at ~80% WebP quality and keep the
   same filename rather than substituting a smaller source and letting
   it upscale. MUST match the <link rel=preload> in that page's PASTE
   BLOCK 1 or the browser downloads both. */
.fac-hero--recert {
  --hero-img: url('https://www.c2cfirstaidaquatics.com/wp-content/uploads/2024/01/first-aid-cpr-recertification.png.webp');
}

/* ---- 20.1 · facilities list ----
   Section 09's .fac-feature p is var(--muted) at .88rem, which is
   right for prose and wrong for a run of 17 city links: at (0,1,0)
   they would inherit `color: inherit` from the section-01 reset and
   vanish into the paragraph. Doubled class for (0,3,0) so this beats
   the reset's element-qualified `.c2c-fac a` (0,1,1). */
.c2c-fac .fac-places .fac-feature p { color: var(--text); }
.c2c-fac .fac-places.fac-places a {
  color: var(--red);
  font-weight: 600;
  white-space: nowrap;
}
.c2c-fac .fac-places.fac-places a:hover {
  color: var(--red-hover);
  text-decoration: underline;
}

/* Four regions, wildly uneven (17 cities against 2). A 2-up grid
   would leave Alberta as a near-empty card beside a full one, so let
   the cards size to their content and pack: masonry is not needed,
   just a column count that does not force equal rows. */
@media (min-width: 620px) {
  .fac-places { align-items: start; }
}

/* ---- 20.2 · spec list promoted out of the disclosure ----
   On this page the spec rows ARE the pitch - hours, prerequisites and
   the alternating rule are what a returning student came to check - so
   the cards show them open and put the intro prose behind a "Learn
   more" toggle instead, the reverse of every other page.

   That makes the <dl> the first thing in the card body, where section
   07's `margin-top: 22px; border-top` reads as a stray rule hanging
   under the navy header. Section 10 already zeroes both when the list
   sits inside .fac-disc--main; this is the same fix for the list that
   leads the body. `> :first-child` is what makes it recert-only: every
   other page opens its card body with .fac-course__intro. */
.c2c-fac .fac-course__body > .fac-spec:first-child {
  margin-top: 0;
  border-top: 0;
}


/* ── 21 · /cpraed-courses/ ADDITIONS ─────────────────────
   Same arrangement as sections 17-20: one declaration that only the
   CPR/AED page can match, so every other page renders
   byte-identically with or without this block.

   That page reuses everything else already here - full-width course
   card (17.1), pinned disclosures (17.1b), provider chips (17.2),
   the light note (17.4), and the facilities list (20.1), whose
   selectors are page-neutral. Its classroom photos are the same
   300x267 set /first-aid-courses/ uses, so the default --shot-ratio
   already fits and there is no .fac-shots--cpr override.
   ──────────────────────────────────────────────── */

/* The CPR page's own banner, already 1520x600 - the exact size the
   hero band wants, so nothing upscales. 277KB, in line with the BLS
   banner (274KB) and well under the recert one (745KB). MUST match
   the <link rel=preload> in that page's PASTE BLOCK 1 or the browser
   downloads both. */
.fac-hero--cpr {
  --hero-img: url('https://www.c2cfirstaidaquatics.com/wp-content/uploads/2024/01/cpr-red-cross.png.webp');
}


/* ── 22 · a chip that carries a sentence ─────────────────
   The base .fac-course__ribbon is sized for a two-word flag
   ("Most booked"), so it sets line-height:1 and never wraps in
   practice. The Intermediate/Standard card's chip is now a full
   sentence, which wraps to two or three lines inside the 2-up
   card - and at line-height:1 those lines touch.

   Only this element gets the treatment, so every other chip on
   every other page renders unchanged.
   ──────────────────────────────────────────────── */
.c2c-fac .fac-course__ribbon--sentence {
  /* Wrapped text needs leading, and the star must sit on the first
     line rather than centred against the whole block. */
  align-items: flex-start;
  line-height: 1.35;
  text-align: left;
}
/* The star inherits the chip's line-height, which would push it below
   the cap height of the first line. Pin it back to that line. */
.c2c-fac .fac-course__ribbon--sentence::before { line-height: 1.35; }

@media (min-width: 1000px) {
  /* Cap the chip so it breaks to two lines at a stable width instead of
     running to the card's right edge and re-breaking at every viewport
     step. 340px holds this sentence at two lines from 1000px up. */
  .c2c-fac .fac-course__ribbon--sentence { max-width: 340px; }

  /* Section 07 reserves an 80px strip for a one-line chip. Two lines
     need ~92px, and BOTH cards in the row must take the same padding or
     their titles stop sharing a baseline - which is the whole point of
     that reserved strip.

     :has() keeps this self-scoping: only a grid that actually contains
     a sentence chip is affected, so /basic-life-support/,
     /cpraed-courses/ and /recertification-courses/ - which reuse
     .fac-courses with a one-line chip - render unchanged. */
  .fac-courses:has(.fac-course__ribbon--sentence) .fac-course__head {
    padding-top: 92px;
    min-height: 190px;
  }
}


/* ── 23 · COMPARE BAND ───────────────────────────────────────
   Ported from the compare band on the location pages, the same way
   section 08 ports the awards rail:
     .c2c-compare-* / .c2c-score / .c2c-bar
       -> c2c-assets/Ontario Pages/combined-styles.css, "COMPARE" block
   The card rules below are verbatim from that file. The only change
   is the .c2c-fac prefix, which makes them outrank this file's own
   resets and stops them leaking out of the wrapper.

   NOT ported: that band's .c2c-compare-grid and .c2c-carousel. The
   grid is replaced by the rail below, and the carousel needs the
   location pages' script, which this page does not load. Instead the
   rail is section 06's harness - the [data-carousel] engine already
   in first-aid-courses.js - so the band gets the same 1-up swipe,
   arrows, dots and keyboard on phones without a second engine. Above
   860px the transform is switched off and the two cards sit side by
   side, exactly as .c2c-compare-grid had them.
   ──────────────────────────────────────────────────────────── */
.fac-cmp__rail { position: relative; }

/* The padding is shadow clearance, cancelled by an equal negative
   margin so the CONTENT box stays exactly one container wide - the
   width the engine steps the track by. Same trick as section 06. */
.fac-cmp__viewport {
  overflow: hidden;
  padding: 8px;
  margin: -8px;
}

.fac-cmp__track {
  display: flex;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* No gap while the track slides: the engine shifts by whole multiples
   of the viewport width, so a gap would walk the slides out of
   register by one gap per step. It returns at 860px, where the
   transform is off. */
.fac-cmp__slide { flex: 0 0 100%; min-width: 0; display: flex; }
/* The card is verbatim and sets no width, so the slide gives it one.
   align-items:stretch (default) then equalises the two card heights. */
.c2c-fac .fac-cmp__slide > .c2c-compare-card { width: 100%; }

@media (min-width: 860px) {
  .fac-cmp__viewport { overflow: visible; }
  .fac-cmp__track {
    gap: 18px;                    /* .c2c-compare-grid's gap */
    transform: none !important;   /* see section 06 on the !important */
    transition: none;
  }
  .fac-cmp__slide { flex: 1 1 0; }

  /* One dot and two dead arrows is noise once both cards are on
     screen. Scoped with .c2c-fac to outrank section 12's display
     rules, which come later in the file. */
  .c2c-fac .fac-cmp__arrow,
  .c2c-fac .fac-cmp__dots { display: none; }
}

/* ---- cards: verbatim from combined-styles.css ---- */
.c2c-fac .c2c-compare-card{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;display:flex;flex-direction:column}
.c2c-fac .c2c-compare-card.dark{background:linear-gradient(155deg,var(--navy) 0%, #1e3770 55%, #253d7b 100%);color:#fff;border-color:rgba(255,255,255,.08)}
.c2c-fac .c2c-compare-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}
.c2c-fac .c2c-compare-card.dark .c2c-compare-head{border-bottom-color:rgba(255,255,255,.10)}
.c2c-fac .c2c-compare-head h3{margin:0;font-family:'Poppins',sans-serif;font-size:20px;line-height:1.1;color:inherit}
.c2c-fac .c2c-compare-card.dark .c2c-compare-head h3{color:#fff}
.c2c-fac .c2c-compare-head p{margin:2px 0 0;font-size:12px;font-weight:700;color:#93a1b4}
.c2c-fac .c2c-compare-card.dark .c2c-compare-head p{color:rgba(255,255,255,.78)}
.c2c-fac .c2c-compare-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:rgba(36,197,94,.12);color:#9af0b4;border:1px solid rgba(255,255,255,.18);white-space:nowrap}
.c2c-fac .c2c-score{padding:16px 20px 10px}
.c2c-fac .c2c-score strong{font-family:'Poppins',sans-serif;font-size:40px;line-height:1;font-weight:900}
.c2c-fac .c2c-score span{font-size:16px;font-weight:800;color:#8d9bb1}
.c2c-fac .c2c-compare-card.dark .c2c-score span{color:rgba(255,255,255,.72)}
.c2c-fac .c2c-score small{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8d9bb1;margin-top:4px}
.c2c-fac .c2c-compare-card.dark .c2c-score small{color:rgba(255,255,255,.72)}
.c2c-fac .c2c-bar{height:5px;border-radius:999px;background:#dbe4f0;margin-top:10px;overflow:hidden}
.c2c-fac .c2c-compare-card.dark .c2c-bar{background:rgba(255,255,255,.14)}
.c2c-fac .c2c-bar-fill{height:100%;border-radius:999px}
.c2c-fac .c2c-bar-fill.gray{width:40%;background:#9eadc2}
.c2c-fac .c2c-bar-fill.green{width:100%;background:#33d267}
.c2c-fac .c2c-compare-list{list-style:none;margin:0;padding:8px 0 16px;flex:1}
.c2c-fac .c2c-compare-list li{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;border-top:1px solid #edf2f8;font-size:14px;color:#34445d;font-weight:600}
.c2c-fac .c2c-compare-card.dark .c2c-compare-list li{border-top-color:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.c2c-fac .c2c-compare-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 20px;font-size:12px;font-weight:900;margin-top:1px}
.c2c-fac .c2c-compare-icon.no{background:#fff1f1;color:#ef4444;border:1px solid #ffd2d2}
.c2c-fac .c2c-compare-icon.yes{background:#ebfff2;color:#22c55e;border:1px solid #c8f2d7}


/* ── 21 · LOCATION FINDER WIDGET ─────────────────────────── */
/* The shortcode wrapper sits BETWEEN two .c2c-fac blocks, not inside
   one, so neither --shell nor --gut resolves here. The literals below
   mirror section 01's 1180px shell and 16px / 24px@600 gutter so the
   finder lines up with .fac-container instead of running edge to edge.
   The gutter alone was not enough: with no max-width the widget stayed
   wider than every section around it. */
.c2c-location-finder-widget {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 600px) {
  .c2c-location-finder-widget { padding-inline: 24px; }
}