/* ============================================================================
   Skillwave Africa Training College — site stylesheet
   Mobile-first. System fonts only. No imports, no remote assets.
   Injected once via Website Settings -> head_html.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* surfaces + ink (light) — neutral with a faint warm-purple cast to sit under the brand */
  --sw-bg:          #ffffff;
  --sw-surface:     #f7f5fa;
  --sw-surface-2:   #eee9f4;
  --sw-line:        #e2dcec;
  --sw-text:        #191320;
  --sw-muted:       #5c5470;

  /* brand — SAMPLED FROM THE OFFICIAL 8ft×4ft BANNER (Skillwave_2026):
     red #b01028 (wordmark + headlines + CTA) · green #207040 (wave + accents) ·
     purple #302050 (School-of-Nursing / the dark contact bar). Red is the action colour. */
  --sw-brand:       #b01028;   /* primary: buttons, CTA, links, pills, borders */
  --sw-brand-ink:   #8a0c1f;   /* darker red, hover */
  --sw-brand-soft:  #f8dee3;   /* light red tint: pill bg, active nav, hero glow */
  --sw-on-brand:    #ffffff;

  /* accent — brand green (the wave, the "College", positive marks).
     `--sw-on-accent` is ink for the SOFT background (pills), so it must be DARK. The WhatsApp button
     sits on solid green instead and carries its own pair below — the two were briefly conflated, which
     printed white pill text on a light-green pill. */
  --sw-accent:      #207040;
  --sw-accent-soft: #e0efe6;
  --sw-on-accent:   #0d3a1f;
  --sw-wa-bg:       #207040;
  --sw-wa-fg:       #ffffff;

  /* structural — brand purple (headings, the banner's dark chrome) */
  --sw-purple:      #302050;
  --sw-purple-ink:  #241640;
  --sw-purple-soft: #ebe7f2;
  --sw-on-purple:   #ffffff;
  /* The footer BACKGROUND needs its own token: --sw-purple lightens in dark mode (it is used as INK
     there), which would flip the footer to a light plate under white text — measured 2.88:1. This one
     stays dark in both schemes, like the banner's contact bar it is modelled on. */
  --sw-footer-bg:   #302050;

  /* status */
  --sw-ok:          #207040;
  --sw-warn:        #8a5a00;
  --sw-warn-soft:   #fff2d6;
  --sw-focus:       #b01028;

  /* type scale */
  --sw-fs-xs:   0.8125rem;
  --sw-fs-sm:   0.9375rem;
  --sw-fs-base: 1.0625rem;
  --sw-fs-lg:   1.1875rem;
  --sw-fs-xl:   1.4375rem;
  --sw-fs-2xl:  1.875rem;
  --sw-fs-3xl:  clamp(2.1rem, 7vw, 3.4rem);
  --sw-lh-tight: 1.12;
  --sw-lh-base:  1.6;

  /* spacing */
  --sw-s1: 0.25rem;  --sw-s2: 0.5rem;  --sw-s3: 0.75rem; --sw-s4: 1rem;
  --sw-s5: 1.5rem;   --sw-s6: 2rem;    --sw-s7: 3rem;    --sw-s8: 4.5rem;

  /* shape */
  --sw-r-sm:  8px;
  --sw-r-md:  14px;
  --sw-r-lg:  22px;
  --sw-r-pill: 999px;
  --sw-sh-1: 0 1px 2px rgba(13,31,34,.06), 0 2px 8px rgba(13,31,34,.05);
  --sw-sh-2: 0 8px 28px rgba(13,31,34,.10);

  /* measure */
  --sw-maxw:       72rem;
  --sw-maxw-prose: 38rem;

  --sw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
}

/* ⚠ SCOPED to marketing pages only. This stylesheet rides Website Settings → head_html, so it loads
   on EVERY website route of the site — /login, /group-guide/*, the /fc*reports viewers. An unscoped
   `:root` override here painted ALL of them dark whenever the visitor's OS was dark (their own dark
   ink then sat on our dark body — unreadable), and the ERPNext theme toggle couldn't help because
   website pages never read desk_theme. `:root:has(.sw-nav)` limits auto-dark to pages that actually
   carry the Skillwave shell; on browsers without :has() the marketing pages simply stay light — the
   safe default. Found from gemba (S: reports "all dark" on a dark-OS laptop), 2026-08-07. */
@media (prefers-color-scheme: dark) {
  :root:has(.sw-nav) {
    --sw-bg:          #12101a;
    --sw-surface:     #1b1726;
    --sw-surface-2:   #241f33;
    --sw-line:        #322b45;
    --sw-text:        #efecf5;
    --sw-muted:       #b3aac6;

    /* red, lifted just enough for contrast on the dark bg — kept saturated so it still reads as the
       brand red rather than drifting pastel-pink (the first pass at #f0808f did) */
    --sw-brand:       #f4566c;
    --sw-brand-ink:   #ff8493;
    --sw-brand-soft:  #3a1620;
    --sw-on-brand:    #2a0710;

    --sw-accent:      #5cc088;   /* green, lightened */
    --sw-accent-soft: #17301f;
    --sw-on-accent:   #a7e8c1;   /* light ink on the DARK soft-green pill */
    --sw-wa-bg:       #5cc088;
    --sw-wa-fg:       #06210f;   /* dark ink on the light-green button */

    --sw-purple:      #9b8fd6;   /* purple, lightened — this is INK in dark mode */
    --sw-purple-ink:  #c3bbee;
    --sw-purple-soft: #1e1836;
    --sw-on-purple:   #0d0820;
    --sw-footer-bg:   #241a3a;   /* footer stays a DARK plate; see the note in :root */

    --sw-ok:          #5cc088;
    --sw-warn:        #f0c46a;
    --sw-warn-soft:   #33280e;
    --sw-focus:       #f0808f;

    --sw-sh-1: 0 1px 2px rgba(0,0,0,.5);
    --sw-sh-2: 0 10px 30px rgba(0,0,0,.55);
  }
}

/* ---------- 2. BASE ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--sw-bg);
  color: var(--sw-text);
  font-family: var(--sw-font);
  font-size: var(--sw-fs-base);
  line-height: var(--sw-lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* ⚠ Frappe's `website.bundle.css` is linked AFTER this stylesheet (we are injected into head_html, it
   comes later in the head), and it sets `body { background:#fff; color:#525252 }`. At equal specificity
   the later sheet wins, so the plain `body` rule above never applied: the page rendered with a WHITE
   body and Frappe's grey inherited text, while our own class rules still painted sections dark — grey
   text on dark cards, ~2.2:1, all through dark mode. `html body` (0,0,2) out-specifies it.
   Found by a contrast audit, not by looking — the screenshots just read as "a bit dim". */
html body {
  background: var(--sw-bg);
  color: var(--sw-text);
  font-family: var(--sw-font);
  font-size: var(--sw-fs-base);
  line-height: var(--sw-lh-base);
}

/* Same collision for headings and links: Frappe's bundle sets `h1..h4 { color:#171717 }` and its own
   link colour, which on a dark background measured 1.02:1 — invisible, not merely dim. These raise
   specificity just enough to win; our own component classes (.sw-h2, .sw-hero-title, .sw-footer a …)
   are class-level and still override these. */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 { color: var(--sw-text); }
html body a { color: var(--sw-brand); }
html body a:hover { color: var(--sw-brand-ink); }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--sw-brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--sw-brand-ink); }

:focus-visible {
  outline: 3px solid var(--sw-focus);
  outline-offset: 3px;
  border-radius: var(--sw-r-sm);
}

h1, h2, h3 { line-height: var(--sw-lh-tight); margin: 0 0 var(--sw-s3); letter-spacing: -.02em; }
p { margin: 0 0 var(--sw-s4); }
p:last-child { margin-bottom: 0; }

.sw-skip {
  position: absolute; left: -9999px;
  background: var(--sw-brand); color: var(--sw-on-brand);
  padding: var(--sw-s3) var(--sw-s4); border-radius: var(--sw-r-sm); z-index: 100;
}
.sw-skip:focus { left: var(--sw-s4); top: var(--sw-s4); }

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.sw-wrap {
  width: 100%;
  max-width: var(--sw-maxw);
  margin-inline: auto;
  padding-inline: var(--sw-s5);
}
@media (min-width: 48rem) { .sw-wrap { padding-inline: var(--sw-s6); } }

.sw-section { padding-block: var(--sw-s7); }
@media (min-width: 48rem) { .sw-section { padding-block: var(--sw-s8); } }

.sw-section-tint {
  background: var(--sw-surface);
  border-block: 1px solid var(--sw-line);
}

.sw-grid { display: grid; gap: var(--sw-s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .sw-grid-2, .sw-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-grid { gap: var(--sw-s5); }
}
@media (min-width: 64rem) {
  .sw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sw-split { display: grid; gap: var(--sw-s6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .sw-split { grid-template-columns: 1.35fr 1fr; gap: var(--sw-s7); } }

/* ---------- 4. NAV ------------------------------------------------------- */
.sw-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--sw-bg) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--sw-line);
}
.sw-nav-inner {
  max-width: var(--sw-maxw); margin-inline: auto;
  padding: var(--sw-s3) var(--sw-s5);
  display: flex; align-items: center; gap: var(--sw-s4);
  flex-wrap: wrap;
}
.sw-logo {
  font-weight: 800; font-size: var(--sw-fs-lg); letter-spacing: -.03em;
  color: var(--sw-text); text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; gap: .35ch;
}
/* The real logo (uploaded by the seed). When present, it replaces the wordmark.
   The lockup contains dark navy ink ("AFRICA TRAINING"), which vanishes on a dark background — so the
   logo always sits on a white plate. On the light nav that plate is invisible; in dark mode it reads as
   a deliberate badge instead of the accidental white rectangle it would otherwise be. */
.sw-logo-img {
  height: 2.1rem; width: auto; display: block;
  background: #ffffff;
  padding: .2rem .35rem;
  border-radius: var(--sw-r-sm);
}
@media (min-width: 48rem) { .sw-logo-img { height: 2.45rem; } }
/* the accent dot only decorates the TEXT logo — hide it when the image is in */
.sw-logo:has(.sw-logo-img)::after { display: none; }
.sw-logo:not(:has(.sw-logo-img))::after {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--sw-accent); align-self: center;
}
.sw-nav-links {
  display: flex; align-items: center; gap: var(--sw-s1);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
  order: 3; width: 100%;
  padding-bottom: var(--sw-s1);
}
.sw-nav-links::-webkit-scrollbar { display: none; }
@media (min-width: 56rem) {
  .sw-nav-links { order: 0; width: auto; gap: var(--sw-s2); overflow: visible; padding-bottom: 0; }
}
.sw-nav-link {
  display: inline-block; white-space: nowrap;
  padding: .55rem .75rem;
  min-height: 44px; line-height: 1.9;
  border-radius: var(--sw-r-pill);
  color: var(--sw-muted); font-weight: 600; font-size: var(--sw-fs-sm);
  text-decoration: none;
}
.sw-nav-link:hover { background: var(--sw-surface); color: var(--sw-text); }
.sw-nav-link.is-active { color: var(--sw-text); background: var(--sw-brand-soft); }
.sw-nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.05rem;
  background: var(--sw-brand); color: var(--sw-on-brand);
  font-weight: 700; font-size: var(--sw-fs-sm);
  border-radius: var(--sw-r-pill); text-decoration: none;
  box-shadow: var(--sw-sh-1);
}
.sw-nav-cta:hover { background: var(--sw-brand-ink); color: var(--sw-on-brand); }

/* ---------- 5. HERO + PAGE HEAD ------------------------------------------ */
.sw-hero, .sw-pagehead {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90rem 40rem at 15% -25%, var(--sw-brand-soft) 0%, transparent 62%),
    var(--sw-surface);
  border-bottom: 1px solid var(--sw-line);
  padding-block: var(--sw-s7);
}
.sw-hero { padding-block: var(--sw-s8) var(--sw-s7); }
@media (min-width: 48rem) { .sw-hero { padding-block: 5.5rem 4rem; } }

.sw-eyebrow {
  display: inline-block;
  margin: 0 0 var(--sw-s3);
  font-size: var(--sw-fs-xs); font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--sw-brand-ink);
  background: var(--sw-bg);
  border: 1px solid var(--sw-line);
  padding: .3rem .7rem; border-radius: var(--sw-r-pill);
}
.sw-hero-title {
  font-size: var(--sw-fs-3xl); font-weight: 800;
  color: var(--sw-purple);
  max-width: 18ch; margin-bottom: var(--sw-s4);
}
.sw-pagehead .sw-hero-title { font-size: clamp(1.9rem, 5.5vw, 2.75rem); max-width: 22ch; }
.sw-hero-sub {
  font-size: var(--sw-fs-lg); color: var(--sw-muted);
  max-width: 46ch; margin-bottom: var(--sw-s5);
}

.sw-actions { display: flex; flex-wrap: wrap; gap: var(--sw-s3); }

/* ---------- 6. TYPE HELPERS --------------------------------------------- */
.sw-h2 {
  font-size: var(--sw-fs-2xl); font-weight: 800;
  color: var(--sw-purple);
  margin-bottom: var(--sw-s5); max-width: 24ch;
}
.sw-h3 { font-size: var(--sw-fs-xl); font-weight: 700; margin-bottom: var(--sw-s2); }
.sw-lead { font-size: var(--sw-fs-lg); color: var(--sw-muted); max-width: var(--sw-maxw-prose); }
.sw-prose { max-width: var(--sw-maxw-prose); }
.sw-prose > * + * { margin-top: var(--sw-s4); }

.sw-list, .sw-checklist { margin: 0 0 var(--sw-s4); padding: 0; list-style: none; }
.sw-list li, .sw-checklist li {
  position: relative; padding-left: 1.75rem; margin-bottom: var(--sw-s2);
}
.sw-list li::before {
  content: ""; position: absolute; left: .45rem; top: .72em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--sw-accent);
}
.sw-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--sw-brand); font-weight: 800;
}
/* Two-column name lists (fee item names, kit lists) on wider screens */
@media (min-width: 40rem) {
  .sw-list { columns: 2; column-gap: var(--sw-s6); }
  .sw-list li { break-inside: avoid; }
}

/* ---------- 7. CARDS ----------------------------------------------------- */
.sw-card {
  display: flex; flex-direction: column; gap: var(--sw-s2);
  padding: var(--sw-s5);
  background: var(--sw-bg);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-lg);
  box-shadow: var(--sw-sh-1);
  color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.sw-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sw-sh-2);
  border-color: var(--sw-brand);
}
a.sw-card:hover .sw-card-title { color: var(--sw-brand-ink); }
.sw-card-title {
  font-size: var(--sw-fs-lg); font-weight: 700; margin: 0;
  letter-spacing: -.01em;
}
.sw-card-meta { font-size: var(--sw-fs-sm); color: var(--sw-muted); margin: 0; }
.sw-card-price {
  margin: auto 0 0; padding-top: var(--sw-s3);
  border-top: 1px dashed var(--sw-line);
  font-weight: 800; font-size: var(--sw-fs-lg); color: var(--sw-text);
}
.sw-card-price small {
  display: block; font-weight: 600; font-size: var(--sw-fs-xs);
  color: var(--sw-muted); letter-spacing: .02em;
}

/* ---------- 8. PILLS + TBC ---------------------------------------------- */
.sw-pill, .sw-pill-accent, .sw-tbc {
  display: inline-block; width: fit-content;
  padding: .22rem .65rem;
  border-radius: var(--sw-r-pill);
  font-size: var(--sw-fs-xs); font-weight: 700;
  letter-spacing: .02em;
}
.sw-pill { background: var(--sw-brand-soft); color: var(--sw-brand-ink); }
.sw-pill-accent { background: var(--sw-accent-soft); color: var(--sw-on-accent); }
.sw-tbc {
  background: var(--sw-warn-soft); color: var(--sw-warn);
  border: 1px dashed currentColor;
  font-variant: all-small-caps; letter-spacing: .08em;
}

/* ---------- 9. BUTTONS --------------------------------------------------- */
.sw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5ch;
  min-height: 48px; padding: .7rem 1.25rem;
  border: 2px solid transparent; border-radius: var(--sw-r-pill);
  font: inherit; font-weight: 700; font-size: var(--sw-fs-sm);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .16s ease, box-shadow .16s ease;
}
.sw-btn:active { transform: translateY(1px); }
.sw-btn-lg { min-height: 54px; padding: .85rem 1.6rem; font-size: var(--sw-fs-base); }

.sw-btn-primary {
  background: var(--sw-brand); color: var(--sw-on-brand);
  box-shadow: var(--sw-sh-1);
}
.sw-btn-primary:hover { background: var(--sw-brand-ink); color: var(--sw-on-brand); box-shadow: var(--sw-sh-2); }

.sw-btn-ghost {
  background: transparent; color: var(--sw-text);
  border-color: var(--sw-line);
}
.sw-btn-ghost:hover { background: var(--sw-surface-2); color: var(--sw-text); border-color: var(--sw-brand); }

.sw-btn-wa {
  background: var(--sw-wa-bg); color: var(--sw-wa-fg);
  box-shadow: var(--sw-sh-1);
}
.sw-btn-wa:hover { filter: brightness(.95); color: var(--sw-wa-fg); }

/* ---------- 10. FACTS STRIP --------------------------------------------- */
.sw-facts {
  display: grid; gap: var(--sw-s1);
  grid-template-columns: 1fr;
  margin: 0 0 var(--sw-s5);
  padding: var(--sw-s4);
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
}
@media (min-width: 40rem) {
  .sw-facts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sw-s3) var(--sw-s5); }
}
@media (min-width: 64rem) {
  .sw-facts { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.sw-fact { display: flex; flex-direction: column; gap: .15rem; padding-block: var(--sw-s2); }
.sw-fact-k {
  font-size: var(--sw-fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--sw-muted); margin: 0;
}
.sw-fact-v { font-size: var(--sw-fs-lg); font-weight: 700; margin: 0; }

/* ---------- 11. STEPS ---------------------------------------------------- */
.sw-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sw-s4); grid-template-columns: 1fr;
  counter-reset: sw-step;
}
@media (min-width: 56rem) { .sw-steps { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.sw-step {
  position: relative;
  padding: var(--sw-s5) var(--sw-s4) var(--sw-s4);
  background: var(--sw-bg);
  border: 1px solid var(--sw-line);
  border-top: 4px solid var(--sw-brand);
  border-radius: var(--sw-r-md);
}
.sw-step .sw-h3 { font-size: var(--sw-fs-lg); }
.sw-step p { font-size: var(--sw-fs-sm); color: var(--sw-muted); margin: 0; }

/* ---------- 12. TABLES --------------------------------------------------- */
.sw-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  margin-bottom: var(--sw-s4);
  background: var(--sw-bg);
}
.sw-table {
  width: 100%; min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--sw-fs-sm);
}
.sw-table caption {
  text-align: left; padding: var(--sw-s3) var(--sw-s4);
  font-weight: 700; color: var(--sw-muted); font-size: var(--sw-fs-xs);
  text-transform: uppercase; letter-spacing: .08em;
}
.sw-table th, .sw-table td {
  padding: var(--sw-s3) var(--sw-s4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--sw-line);
}
.sw-table thead th {
  background: var(--sw-surface);
  font-weight: 800; font-size: var(--sw-fs-xs);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--sw-muted);
  position: sticky; top: 0;
}
.sw-table tbody tr:last-child td { border-bottom: 0; }
.sw-table tbody tr:hover { background: var(--sw-surface); }
.sw-table td:last-child, .sw-table th:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 13. NOTES ---------------------------------------------------- */
.sw-note, .sw-note-warn {
  margin: 0 0 var(--sw-s4);
  padding: var(--sw-s4);
  border-radius: var(--sw-r-md);
  border-left: 4px solid var(--sw-brand);
  background: var(--sw-brand-soft);
  color: var(--sw-text);
  font-size: var(--sw-fs-sm);
}
.sw-note-warn { border-left-color: var(--sw-warn); background: var(--sw-warn-soft); }

/* ---------- 14. FORMS ---------------------------------------------------- */
.sw-form {
  display: grid; gap: var(--sw-s4);
  max-width: 34rem;
  padding: var(--sw-s5);
  background: var(--sw-bg);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-lg);
  box-shadow: var(--sw-sh-1);
}
.sw-field { display: grid; gap: var(--sw-s2); }
.sw-label { font-weight: 700; font-size: var(--sw-fs-sm); }
.sw-hint { font-size: var(--sw-fs-xs); color: var(--sw-muted); margin: 0; }
.sw-input {
  width: 100%; min-height: 50px;
  padding: .7rem .9rem;
  font: inherit; font-size: var(--sw-fs-base);
  color: var(--sw-text);
  background: var(--sw-bg);
  border: 2px solid var(--sw-line);
  border-radius: var(--sw-r-sm);
}
textarea.sw-input { min-height: 7rem; resize: vertical; }
.sw-input::placeholder { color: var(--sw-muted); opacity: .8; }
.sw-input:focus { border-color: var(--sw-brand); outline-offset: 1px; }

/* Programme picker: radio CARDS, never a 500-option <select> */
.sw-radiocards { display: grid; gap: var(--sw-s2); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .sw-radiocards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sw-radiocard {
  display: flex; align-items: flex-start; gap: var(--sw-s3);
  min-height: 52px; padding: var(--sw-s3) var(--sw-s4);
  border: 2px solid var(--sw-line); border-radius: var(--sw-r-md);
  background: var(--sw-bg);
  font-size: var(--sw-fs-sm); font-weight: 600;
  cursor: pointer;
}
.sw-radiocard:hover { border-color: var(--sw-brand); background: var(--sw-surface); }
.sw-radiocard input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--sw-brand); flex: none; }
.sw-radiocard:has(input:checked) { border-color: var(--sw-brand); background: var(--sw-brand-soft); }
.sw-radiocard:has(input:focus-visible) { outline: 3px solid var(--sw-focus); outline-offset: 2px; }

/* ---------- 15. CLOSING CTA --------------------------------------------- */
.sw-cta {
  background:
    radial-gradient(60rem 30rem at 85% 120%, color-mix(in srgb, var(--sw-accent) 32%, transparent) 0%, transparent 60%),
    var(--sw-brand);
  color: var(--sw-on-brand);
  padding-block: var(--sw-s7);
  text-align: center;
}
.sw-cta .sw-h2 { color: var(--sw-on-brand); max-width: none; margin-bottom: var(--sw-s3); }
.sw-cta .sw-lead { color: color-mix(in srgb, var(--sw-on-brand) 82%, transparent); margin-inline: auto; margin-bottom: var(--sw-s5); }
.sw-cta .sw-actions { justify-content: center; }
.sw-cta .sw-btn-primary { background: var(--sw-bg); color: var(--sw-brand-ink); }
.sw-cta .sw-btn-primary:hover { background: var(--sw-surface); color: var(--sw-brand-ink); }
.sw-cta .sw-btn-ghost { color: var(--sw-on-brand); border-color: color-mix(in srgb, var(--sw-on-brand) 55%, transparent); }
.sw-cta .sw-btn-ghost:hover { background: color-mix(in srgb, var(--sw-on-brand) 14%, transparent); color: var(--sw-on-brand); }

/* ---------- 16. FOOTER --------------------------------------------------- */
/* Purple footer — the banner's dark contact bar. */
.sw-footer {
  background: var(--sw-footer-bg);
  border-top: 3px solid var(--sw-brand);
  padding-block: var(--sw-s6);
  font-size: var(--sw-fs-sm);
  color: rgba(255,255,255,.92);
}
.sw-footer-grid {
  display: grid; gap: var(--sw-s5);
  grid-template-columns: 1fr;
  max-width: var(--sw-maxw); margin-inline: auto;
  padding-inline: var(--sw-s5);
}
@media (min-width: 48rem) { .sw-footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sw-s6); } }
.sw-footer h3 {
  font-size: var(--sw-fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #ffffff; margin-bottom: var(--sw-s3);
}
.sw-footer ul { list-style: none; margin: 0; padding: 0; }
.sw-footer li { margin-bottom: var(--sw-s2); }
.sw-footer a { color: rgba(255,255,255,.92); text-decoration: none; }
.sw-footer a:hover { color: #ffffff; text-decoration: underline; }
.sw-footer p, .sw-footer strong { color: rgba(255,255,255,.92); }
.sw-footer a[href^="tel:"], .sw-footer a[href^="mailto:"] {
  display: inline-block; min-height: 40px; line-height: 40px;
}

/* ---------- 17. NATIVE FRAPPE SHELL DAMPING ------------------------------ */
/* Our pages ship their own nav + footer; keep the stock website chrome quiet. */
main.container, main { padding: 0 !important; }
.web-footer, .page-breadcrumbs { display: none; }

/* ---------- 18. PRINT ---------------------------------------------------- */
@media print {
  .sw-nav, .sw-cta, .sw-footer { display: none; }
  .sw-hero, .sw-pagehead { background: none; border: 0; }
  .sw-card, .sw-table-wrap { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------- 18. PHOTOGRAPHY ----------------------------------------------
   Slots are filled by seed_skillwave_site.py from images/ (see ../images.py).
   A slot with no file is REMOVED from the page, so nothing here ever has to
   style an empty or broken image. */

.sw-figure { margin: 0 0 var(--sw-s6) 0; }

.sw-figure img,
.sw-img {
  width: 100%;
  border-radius: var(--sw-r-md);
  border: 1px solid var(--sw-line);
  background: var(--sw-surface);
  object-fit: cover;
}

/* Hero photo: wide and short on desktop, taller on phones so faces stay legible. */
.sw-figure-hero img { aspect-ratio: 16 / 7; }
@media (max-width: 40rem) { .sw-figure-hero img { aspect-ratio: 4 / 3; } }

.sw-figure-card img { aspect-ratio: 4 / 3; }

.sw-caption {
  margin-top: var(--sw-s2);
  font-size: var(--sw-fs-sm);
  color: var(--sw-muted);
}

/* A row of photos that collapses to one column on a phone. */
.sw-gallery {
  display: grid;
  gap: var(--sw-s4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Photographs carry their own contrast; don't let dark mode wash them out. */
@media (prefers-color-scheme: dark) {
  .sw-figure img, .sw-img { border-color: var(--sw-line); }
}

/* ---------- 19. GRADE-FILTERED PROGRAMME CARDS ---------------------------
   /apply greys out programmes the applicant's KCSE grade cannot enter, with
   the reason inline. A lead-qualification aid, not a hard gate. */

.sw-radiocard-off {
  opacity: 0.55;
  background: var(--sw-surface);
}
.sw-radiocard-off input { cursor: not-allowed; }

.sw-radiocard-reason {
  display: block;
  width: 100%;
  margin-top: var(--sw-s1);
  color: var(--sw-warn);
  font-size: var(--sw-fs-xs);
}

/* ---------- 20. ACCREDITOR LOGO STRIP -------------------------------------
   Third-party marks (NCK · TVETA · KNEC · NITA), shown because the college
   holds these accreditations. Filled by the seed; removed if no files. */

.sw-acclogos {
  list-style: none; margin: var(--sw-s5) 0 0; padding: 0;
  display: grid; gap: var(--sw-s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) {
  .sw-acclogos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sw-s5); }
}

.sw-acclogo {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sw-s2);
  padding: var(--sw-s4);
  background: #ffffff;                 /* the marks are drawn for a white ground */
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
}
.sw-acclogo img {
  height: 3.6rem; width: auto; max-width: 100%;
  object-fit: contain;
}
.sw-acclogo-name {
  font-weight: 800; font-size: var(--sw-fs-sm); color: var(--sw-purple);
  letter-spacing: .04em;
}
.sw-acclogo-meaning {
  font-size: var(--sw-fs-xs); color: var(--sw-muted); line-height: 1.35;
}
/* keep the white plate in dark mode — logos are not designed for dark grounds */
@media (prefers-color-scheme: dark) {
  .sw-acclogo { border-color: transparent; }
  .sw-acclogo-name { color: #302050; }
  .sw-acclogo-meaning { color: #4d4560; }
}

/* ---------- 21. QUOTED LETTER (NCK approval) ------------------------------
   A formatted rendition of an official letter — deliberately NOT a scan: the
   original carries personal names and a signature that must not be published. */

.sw-letter {
  margin: var(--sw-s5) 0;
  padding: var(--sw-s5);
  background: var(--sw-bg);
  border: 1px solid var(--sw-line);
  border-left: 4px solid var(--sw-purple);
  border-radius: var(--sw-r-md);
  box-shadow: var(--sw-sh-1);
}
.sw-letter-from {
  font-weight: 800; color: var(--sw-purple);
  font-size: var(--sw-fs-sm); letter-spacing: .02em;
  margin-bottom: var(--sw-s1);
}
.sw-letter-date {
  color: var(--sw-muted); font-size: var(--sw-fs-sm);
  margin-bottom: var(--sw-s4);
}
/* Explicit colours: the native Frappe website stylesheet styles bare `h3` and `blockquote`
   (#171717 / #525252), which is near-black on our dark letter card. Ours must win. */
.sw-letter-subject {
  font-size: var(--sw-fs-lg); font-weight: 800;
  color: var(--sw-text);
  margin-bottom: var(--sw-s4);
}
.sw-letter-body {
  margin: 0 0 var(--sw-s4);
  padding-left: var(--sw-s4);
  border-left: 2px solid var(--sw-brand-soft);
  color: var(--sw-text);
  font-style: italic;
}
.sw-letter-body p { color: var(--sw-text); }
.sw-letter-body p { margin-bottom: var(--sw-s3); }
.sw-letter-body p:last-child { margin-bottom: 0; }
.sw-letter-note {
  font-size: var(--sw-fs-xs); color: var(--sw-muted);
  margin: 0; padding-top: var(--sw-s3);
  border-top: 1px solid var(--sw-line);
}

/* ---------- 20. PATHWAY FLOW DIAGRAM -------------------------------------
   Inline SVG so it inherits the palette in both colour schemes. It cannot
   reflow to one column, so below its readable minimum width it scrolls
   inside its own box rather than shrinking its labels into illegibility --
   the same behaviour as .sw-table-wrap, which visitors have already met.  */
.sw-flow { margin: 0 0 var(--sw-s6) 0; }
.sw-flow-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-md);
  background: var(--sw-bg);
  padding: var(--sw-s3);
}
.sw-flow-scroll svg { display: block; min-width: 660px; width: 100%; height: auto; }
.sw-flow text { font-family: inherit; }
.sw-flow .swHead {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  fill: var(--sw-muted);
}
.sw-flow .swGrade { font-size: 17px; font-weight: 800; fill: var(--sw-text); text-anchor: middle; }
.sw-flow .swGradeSub { font-size: 11.5px; fill: var(--sw-muted); text-anchor: middle; }
.sw-flow .swTitle { font-size: 15px; font-weight: 700; fill: var(--sw-text); }
.sw-flow .swSub { font-size: 12.5px; fill: var(--sw-muted); }
.sw-flow .swClimb {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  fill: var(--sw-accent); text-anchor: end;
}