/* ═══════════════════════════════════════════════════════════════
   css/index.css — Regional MHC 2026
   Homepage-specific styles ONLY.
   All shared styles (nav, footer, modals, partners carousel,
   a11y widget, scroll-top, CSS variables, reveal animations,
   responsive breakpoints) live in css/shared.css.
   This file contains only what is unique to index.html:
     1. Hero section (layout, eyebrow, logo, meta pills, buttons,
        pricing row, stats row, theme card)
     2. Sub-themes section (#subthemes, .st-*)
     3. Countdown section (#countdown-section, .cd-*)
     4. World Mental Health Day callout (.wmhd-*)

   ── CHANGELOG ──
   1. [FIXED] Hero logo/banner was being clipped under the fixed
      nav on DESKTOP (not just mobile). #hero used
      `padding-top: calc(var(--nav-h) - 52px)` plus
      `.hero-logo-wrap { margin-top: -1rem }`. That math assumed
      the logo PNG itself had ~52px+ of empty transparent space
      above the artwork to absorb the overlap — it doesn't, so the
      top of the logo ("REGIONAL") was rendering behind the fixed
      nav bar. Changed #hero to `padding-top: var(--nav-h)` and
      removed the negative margin on `.hero-logo-wrap` so the logo
      sits fully below the nav on all breakpoints. The old 600px
      mobile override that did the same thing is now redundant but
      left in place harmlessly (it just re-applies the same values).
   2. `.hero-meta-row` (small pills: 8+ Countries / 400+ Delegates /
      2 Days) and `.hero-stats-row` (big stat blocks with the same
      numbers) sit far apart on desktop but stack directly on top
      of each other on mobile, reading as a duplicated section.
      Hid `.hero-meta-row` on mobile since `.hero-stats-row`
      already covers all the same info (plus Sub-Themes).
   3. [MOVED] `.hero-stats-row` (8+ Countries / 400+ Delegates /
      10 Sub-Themes / 2 Days) relocated from the bottom of the
      left column to sit directly below the dark
      "Conference Theme 2026" card in the right column. Both are
      now wrapped in a new `.hero-right` flex container so the
      grid layout (`.hero-inner`: 1fr 480px) still places the
      whole right-hand group into the second column correctly.
   4. [NEW] `.hero-pricing-row` — bold registration fee callout
      (Delegate: KSH 5,000/day · Student: KSH 3,000/day) added to
      the left column, in the space the stats row previously
      occupied, right under the CTA buttons.
═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   1. HERO — WHITE / CLEAN
══════════════════════════════════════════════════════════ */

#hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
  background: #ffffff;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 3rem;
  align-items: center;
}

/* ── Hero eyebrow styles kept in case used elsewhere, but element removed from HTML ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.2rem;
}
.hero-eyebrow-line {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--gold);
}

/* ── Conference logo ── */
.hero-logo-wrap {
  margin-bottom: 1rem;
  margin-top: 0;
}
.hero-logo-wrap img {
  max-width: 680px;
  width: 100%;
  height: auto;
}

/* ── World Mental Health Day callout ── */
/* Block design (no border-radius), blue text, sits with zero top
   margin directly beneath the logo. */
.wmhd-callout {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.4rem;
  border-radius: 0;
  border-left: 5px solid var(--gold);
  background: var(--ice);
  position: relative;
  overflow: hidden;
  max-width: max-content;
  animation: wmhd-pop 0.6s ease-out both;
}
.wmhd-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: wmhd-shine 3.2s ease-in-out 1s infinite;
  pointer-events: none;
}
.wmhd-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 0;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-lt);
  font-size: 1.05rem;
}
.wmhd-text {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  font-weight: 600;
  color: var(--blue);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.wmhd-text strong {
  color: var(--navy);
  font-weight: 700;
}
@keyframes wmhd-shine {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes wmhd-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .wmhd-callout {
    padding: 0.7rem 1rem;
    gap: 0.7rem;
  }
  .wmhd-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

/* ── Meta pills row ── */
.hero-meta-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.hero-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ice);
  border: 1px solid var(--border);
  padding: 0.42rem 1rem;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.06em;
}
.hero-meta-pill i {
  color: var(--gold);
  font-size: 0.68rem;
}

/* ── CTA buttons row ── */
.hero-btns {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* ── Pricing row (NEW) ──
   Bold registration-fee callout. Sits in the left column, in the
   space the stats row used to occupy, directly under the CTA
   buttons — the most natural place for a delegate to see cost
   right after seeing "Register Now". A heading sits above the
   cards so the amounts are read as a registration fee, not a
   stray number. */
.hero-pricing-wrap {
  margin-bottom: 2.5rem;
}
.hero-pricing-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.7rem;
}
.hero-pricing-heading i {
  color: var(--gold);
  font-size: 0.65rem;
}
.hero-pricing-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-pricing-card {
  flex: 1;
  min-width: 220px;
  background: var(--navy);
  border-top: 4px solid var(--gold);
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  box-shadow: 0 10px 28px rgba(8, 28, 58, 0.16);
}
.hero-pricing-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-lt);
  font-size: 1.05rem;
}
.hero-pricing-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-pricing-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero-pricing-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
}
.hero-pricing-amount .unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-lt);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
}

/* ── Stats bar ── */
.hero-stats-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--off);
}
.hero-stat {
  padding: 1rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--border);
  flex: 1;
}
.hero-stat:last-child {
  border-right: none;
}
.hero-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  display: block;
  line-height: 1;
}
.hero-stat-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 0.2rem;
}

/* ── Right column wrapper (NEW) ──
   Groups the theme card + the stats row (moved here from the left
   column) so `.hero-inner`'s 2-column grid still treats the whole
   thing as a single second-column item. */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Theme card (right column) ── */
.hero-theme-card {
  background: var(--navy);
  border-top: 5px solid var(--gold);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 28, 58, 0.18);
}
.hero-theme-card::before {
  content: '"';
  position: absolute;
  top: -1rem;
  right: 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10rem;
  font-weight: 800;
  color: rgba(212, 152, 11, 0.10);
  line-height: 1;
  pointer-events: none;
}
.theme-card-eyebrow {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-lt);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.2rem;
}
.theme-card-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.theme-card-badge {
  display: inline-block;
  background: rgba(212, 152, 11, 0.15);
  border: 1px solid rgba(212, 152, 11, 0.3);
  padding: 0.25rem 0.7rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 1.2rem;
}
.theme-card-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  line-height: 1.55;
  margin-bottom: 2rem;
}
.theme-card-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 1.5rem 0;
}
.theme-card-org-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 0.2rem;
}
.theme-card-org-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gold-lt);
  flex-shrink: 0;
}
.theme-card-org-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.theme-card-org-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.theme-card-org-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Hero responsive ── */
@media (max-width: 1050px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem 2rem;
  }
  .hero-theme-card { max-width: 100%; }
  .hero-right { max-width: 100%; }
  .hero-logo-wrap img { max-width: 560px; }
}
@media (max-width: 600px) {
  .hero-btns { flex-direction: column; align-items: flex-start; }
  .hero-pricing-row { flex-direction: column; }
  .hero-stats-row { flex-wrap: wrap; }
  .hero-stat { min-width: 50%; }
  .hero-logo-wrap img { max-width: 100%; }

  /* Kept for clarity/back-compat — now matches the base desktop
     values above, since the clipping fix applies at all sizes. */
  #hero {
    padding-top: var(--nav-h);
  }
  .hero-logo-wrap {
    margin-top: 0;
  }

  /* Avoid showing the same stats twice in a row when the page
     stacks into a single column. Keep .hero-stats-row (it also
     has the Sub-Themes figure the pills don't) and hide the
     smaller pill row. */
  .hero-meta-row {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════
   2. SUB-THEMES
══════════════════════════════════════════════════════════ */

#subthemes {
  background: var(--off);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}
#subthemes::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--teal), var(--blue));
}

.st-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Section shared eyebrow + heading used on this page */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.8rem;
}
.section-eyebrow-line {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--gold);
}
.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.section-sub {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 3rem;
}

/* ── Sub-theme grid ──
   Previously used a gap + grey background trick for hairlines, which
   leaked grey through any unfilled cell in the last row (columns 3 & 4
   still hold cards from earlier rows, so auto-fit can't collapse them —
   auto-fit only collapses a column that is empty across the ENTIRE grid).
   Fix: draw hairlines directly on each card via inset box-shadow, and
   leave the grid background transparent. Empty trailing cells now show
   the section's own background instead of a grey patch. */
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content: start;
  gap: 0;
  background: transparent;
}

.st-card {
  background: var(--white);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset -1px 0 0 var(--border),
    inset 0 -1px 0 var(--border),
    inset 1px 0 0 var(--border),
    inset 0 1px 0 var(--border);
  transition: box-shadow 0.25s, transform 0.25s;
}
.st-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s;
}
.st-card:hover {
  box-shadow:
    inset -1px 0 0 var(--border),
    inset 0 -1px 0 var(--border),
    inset 1px 0 0 var(--border),
    inset 0 1px 0 var(--border),
    0 8px 32px rgba(8, 28, 58, 0.1);
  transform: translateY(-2px);
  z-index: 1;
}
.st-card:hover::before {
  transform: scaleY(1);
}

.st-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(14, 59, 122, 0.07);
  line-height: 1;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
}
.st-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--navy);
  color: var(--gold-lt);
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.st-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.st-register {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  cursor: pointer;
  margin-top: auto;
  width: fit-content;
  padding: 0;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.2s;
}
.st-register:hover { color: var(--gold); }
.st-register i { font-size: 0.6rem; }

@media (max-width: 600px) {
  .st-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   3. COUNTDOWN
══════════════════════════════════════════════════════════ */

#countdown-section {
  background: var(--navy);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}
#countdown-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 700px;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 152, 11, 0.14) 0%,
    transparent 68%
  );
  pointer-events: none;
}
#countdown-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.cd-top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--teal), var(--gold));
}

.cd-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.cd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 1.4rem;
}
.cd-eyebrow-line {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(245, 185, 48, 0.45);
}

.cd-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 3.5rem;
  line-height: 1.3;
}
.cd-headline em {
  color: var(--gold-lt);
  font-style: normal;
}

/* Digit blocks */
.cd-blocks {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  flex-wrap: wrap;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}
.cd-unit:last-child { border-right: none; }

.cd-digit {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.cd-unit-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.7rem;
  display: block;
}

/* Separator colon */
.cd-sep-wrap {
  display: flex;
  align-items: flex-start;
  padding-bottom: 1.4rem;
}
.cd-colon {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  opacity: 0.75;
}

/* Decorative divider below digits */
.cd-divider {
  display: block;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 3rem auto 1.2rem;
}
.cd-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════════
   4. FAQ
══════════════════════════════════════════════════════════ */

#faq {
  background: var(--white);
  padding: 6rem 2rem;
}

.faq-inner {
  max-width: 900px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: relative;
}

.faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s;
}
.faq-item[open]::before {
  transform: scaleY(1);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.6rem;
  transition: background 0.2s;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  background: var(--off);
}

.faq-q {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

.faq-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--gold-lt);
  font-size: 0.7rem;
  transition: transform 0.25s;
}
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
}

.faq-a {
  padding: 0 1.6rem 1.6rem;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.75;
}
.faq-a p {
  margin: 0 0 0.9rem;
}
.faq-a p:last-child {
  margin-bottom: 0;
}
.faq-a ol {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}
.faq-a ol li {
  margin-bottom: 0.4rem;
}
.faq-a strong {
  color: var(--navy);
  font-weight: 700;
}
.faq-a a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}
.faq-a a:hover {
  color: var(--gold);
}

@media (max-width: 600px) {
  #faq { padding: 4rem 1.5rem; }
  .faq-item summary { padding: 1.1rem 1.2rem; }
  .faq-a { padding: 0 1.2rem 1.3rem; }
}