/* ===================================================================
   Public content pages (/courses, /health-facilities).

   Deliberately small and dependency-free: these pages exist to be read
   by crawlers and by people on slow connections, so they load one
   stylesheet and no JavaScript at all. Fonts fall back to the system
   stack rather than pulling Google Fonts, which would cost a blocking
   round trip on 2G.
   =================================================================== */

:root {
  --s-primary: #0E7A4D;
  --s-primary-dark: #0A5C3A;
  --s-accent: #0EA5E9;
  --s-bg: #FFFFFF;
  --s-surface: #F3F7F5;
  --s-border: #DCE5E0;
  --s-text: #10201A;
  --s-muted: #5A6B65;
  --s-wrap: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --s-bg: #0C1411;
    --s-surface: #121D18;
    --s-border: #23332B;
    --s-text: #E8F0EB;
    --s-muted: #9AAEA4;
    --s-primary: #34C77B;
    --s-primary-dark: #22A362;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--s-primary); }
a:hover { color: var(--s-primary-dark); }

.s-wrap { max-width: var(--s-wrap); margin: 0 auto; padding: 0 1.25rem; }

.s-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--s-primary); color: #fff; padding: 0.75rem 1rem;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- header ---------- */
.s-header { border-bottom: 1px solid var(--s-border); background: var(--s-bg); }
.s-header-in {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 60px; flex-wrap: wrap;
}
.s-brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800; letter-spacing: -0.01em; text-decoration: none; color: var(--s-text);
}
.s-brand img { object-fit: contain; }
.s-brand em { font-style: normal; color: var(--s-primary); }
.s-nav { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; }
.s-nav a { text-decoration: none; color: var(--s-muted); font-size: 0.9rem; font-weight: 500; }
.s-nav a:hover { color: var(--s-text); }

.s-btn {
  display: inline-block; padding: 0.55rem 1.05rem; border-radius: 8px;
  background: var(--s-primary); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 0.9rem; border: 1px solid var(--s-primary);
}
.s-btn:hover { background: var(--s-primary-dark); border-color: var(--s-primary-dark); color: #fff; }
.s-btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.s-btn-ghost { background: transparent; color: var(--s-text); border-color: var(--s-border); }
.s-btn-ghost:hover { background: var(--s-surface); color: var(--s-text); border-color: var(--s-muted); }

/* ---------- breadcrumbs ---------- */
.crumbs { border-bottom: 1px solid var(--s-border); background: var(--s-surface); }
.crumbs ol {
  list-style: none; margin: 0 auto; padding: 0.6rem 1.25rem;
  max-width: var(--s-wrap); display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-size: 0.8rem; color: var(--s-muted);
}
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--s-border); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--s-text); }

/* ---------- hero ---------- */
.s-hero { background: var(--s-surface); border-bottom: 1px solid var(--s-border); }
.s-hero-tight { padding: 2.25rem 0; }
.s-hero .s-wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.s-hero-tight .s-wrap { padding-top: 0; padding-bottom: 0; }
.s-kicker {
  margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--s-primary);
}
.s-hero h1 {
  margin: 0 0 0.75rem; font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch;
}
.s-lede, .s-hero p { max-width: 68ch; color: var(--s-muted); }
.s-hero p { margin: 0 0 1rem; }

.s-stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem;
  margin: 1.5rem 0 0; padding: 0;
}
.s-stats div { margin: 0; }
.s-stats dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--s-muted); font-weight: 600;
}
.s-stats dd { margin: 0.1rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

.s-cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }

/* ---------- sections ---------- */
.s-section { padding: 2.75rem 0; }
.s-section-alt { background: var(--s-surface); border-block: 1px solid var(--s-border); }
.s-section h2 {
  margin: 0 0 0.5rem; font-size: 1.4rem; letter-spacing: -0.015em;
}
.s-section h2:not(:first-child) { margin-top: 2.25rem; }
.s-section h3 { margin: 0 0 0.35rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.s-section p { max-width: 68ch; color: var(--s-muted); }

/* An announcement's picture. <figure> ships with a browser default margin that
   insets it 40px from the text column, and the bare <img> sits on a text
   baseline; both have to be cleared before the image can sit flush with the
   rest of the page. */
.s-figure { margin: 0; max-width: 44rem; }
.s-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--s-border); border-radius: 14px;
  background: var(--s-bg);
}

.s-muted { color: var(--s-muted); }

/* ---------- course cards ---------- */
.s-cards {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.s-card {
  border: 1px solid var(--s-border); border-radius: 12px;
  padding: 1.15rem 1.25rem; background: var(--s-bg);
}
.s-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.s-card h3 a { text-decoration: none; }
.s-card p { margin: 0 0 0.85rem; font-size: 0.9rem; }
.s-tag {
  margin: 0 0 0.4rem; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--s-primary);
}

.s-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; }
.s-facts div { margin: 0; }
.s-facts dt {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--s-muted); font-weight: 600;
}
.s-facts dd { margin: 0; font-size: 0.9rem; font-weight: 700; }
.s-facts-stack { display: grid; gap: 0.6rem; }
.s-facts-stack div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--s-border);
}
.s-facts-stack dd { text-align: right; }

/* ---------- syllabus ---------- */
.s-syllabus-item {
  padding: 1.25rem 0; border-bottom: 1px solid var(--s-border);
}
.s-syllabus-item h3 { display: flex; align-items: baseline; gap: 0.6rem; }
.s-num {
  font-size: 0.75rem; font-weight: 800; color: var(--s-primary);
  font-variant-numeric: tabular-nums;
}
.s-syllabus-item > p { margin: 0 0 0.75rem; font-size: 0.82rem; }

.s-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.s-lessons li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.4rem 0.7rem; border-radius: 6px; font-size: 0.88rem;
}
.s-lessons li:nth-child(odd) { background: var(--s-surface); }
.s-lessons li span:last-child { flex-shrink: 0; font-size: 0.78rem; }

/* ---------- details / definition lists ---------- */
.s-details { margin: 1.75rem 0 0; display: grid; gap: 0.75rem; max-width: 60ch; }
.s-details div { margin: 0; }
.s-details dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--s-muted); font-weight: 600;
}
.s-details dd { margin: 0.1rem 0 0; font-weight: 600; }

/* ---------- regions / link lists ---------- */
.s-regions {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.s-regions a, .s-links a {
  display: block; padding: 0.7rem 0.9rem; text-decoration: none;
  border: 1px solid var(--s-border); border-radius: 9px; background: var(--s-bg);
}
.s-regions a:hover, .s-links a:hover { border-color: var(--s-primary); }
.s-regions b, .s-links b { display: block; font-size: 0.95rem; }
.s-regions span, .s-links span { display: block; font-size: 0.8rem; color: var(--s-muted); }
.s-regions a[aria-current] { border-color: var(--s-primary); background: var(--s-surface); }

.s-links { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 0.5rem; }
.s-links li { margin: 0; }

/* ---------- tables ---------- */
.s-table-wrap { overflow-x: auto; margin: 1rem 0 0; }
.s-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.s-table th, .s-table td {
  text-align: left; padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--s-border); vertical-align: top;
}
.s-table thead th {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--s-muted); font-weight: 700; white-space: nowrap;
}
.s-table tbody th { font-weight: 600; }
.s-table tbody tr:hover { background: var(--s-surface); }
.s-table a { text-decoration: none; }
.s-table a:hover { text-decoration: underline; }

/* ---------- two column ---------- */
.s-two-col {
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 720px) {
  .s-two-col { grid-template-columns: 1fr; }
}
.s-two-col aside h2 { font-size: 1.05rem; }
.s-two-col aside .s-btn { margin-top: 0.5rem; }

/* ---------- CTA ---------- */
.s-cta { background: var(--s-primary-dark); color: #fff; padding: 2.5rem 0; }
.s-cta h2 { margin: 0 0 0.5rem; font-size: 1.4rem; letter-spacing: -0.015em; }
.s-cta p { margin: 0; max-width: 62ch; color: rgba(255, 255, 255, 0.86); }
.s-cta .s-btn { background: #fff; color: var(--s-primary-dark); border-color: #fff; }
.s-cta .s-btn:hover { background: rgba(255, 255, 255, 0.9); color: var(--s-primary-dark); }
.s-cta .s-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.s-cta .s-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ---------- footer ---------- */
.s-footer { border-top: 1px solid var(--s-border); padding: 2.25rem 0 1.5rem; font-size: 0.88rem; }
.s-footer-grid {
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .s-footer-grid { grid-template-columns: 1fr; } }
.s-footer h2 {
  margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--s-muted);
}
.s-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.s-footer a { text-decoration: none; }
.s-footer a:hover { text-decoration: underline; }
.s-brand-foot { font-size: 1rem; margin: 0 0 0.5rem; }
.s-footer-bot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--s-border);
  font-size: 0.8rem; color: var(--s-muted);
}
.s-footer code { font-size: 0.78rem; }