/* ============================================================
   CONCLAVE SECTION FIX — events.html
   File: css/conclave-fix.css
   Link AFTER all other stylesheets in events.html <head>
   ------------------------------------------------------------
   Root causes fixed:
   1. --navy-card CSS variable never defined in :root → card
      background collapses to transparent (white body shows through),
      making white text invisible on a white surface.
   2. --border-navy CSS variable also never defined in :root →
      event-list-item borders disappear.
   3. --shadow-gold CSS variable never defined in :root →
      btn-gold hover shadow silently fails (cosmetic only).
   4. The inline <style> in events.html sits AFTER the external
      stylesheets in the cascade, so it wins on every conclave-*
      class — but it uses var(--navy-card) which is undefined.
      The 4× duplicate "INDIA-THAILAND CONCLAVE" blocks in
      style.css (lines ≈1382, 1636, 1890, 2001) and the full
      block in "footer copy.css" are all OVERRIDDEN by that
      inline style, so they have zero effect in the browser.
   5. btn-gold in the conclave register button inherits the
      wrong display model (not flex) because the late duplicate
      blocks set display:flex but the inline <style> doesn't —
      and then "footer copy.css" re-adds it but is overridden.
   6. .conclave-title and .speaker-name rely on color: var(--white)
      in the inline style, which is correct — but .conclave-card
      has no color: #fff set there, so children that don't
      explicitly set a color inherit var(--text-body) (#1e3050,
      a near-black), which blends into the transparent card.
   ============================================================ */

/* ── 1. Define the missing CSS variables ─────────────────── */
:root {
  --navy-card:   #0f2341;           /* dark navy for conclave card */
  --border-navy: rgba(26,58,107,0.15); /* subtle blue border used site-wide */
  --shadow-gold: 0 8px 24px rgba(43,127,212,0.30); /* btn-gold glow */
}

/* ── 2. Conclave card: enforce dark background + white text ─ */
/*
   The inline <style> sets background: var(--navy-card) but that
   variable was undefined, resolving to transparent.  Now that
   --navy-card is defined above, the inline rule works correctly.
   The rules below are belt-and-suspenders overrides with the
   same specificity level but appearing later in the cascade.
*/
.conclave-card {
  background: linear-gradient(135deg, #0f2341 0%, #142d56 50%, #1a3768 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(201,162,39,0.3) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  margin-bottom: 5rem;
  box-shadow: 0 25px 60px rgba(15,35,65,0.22);
}

/* ── 3. Conclave header: keep gold-tinted glassmorphism ───── */
.conclave-header {
  background: linear-gradient(135deg, rgba(201,162,39,0.12), rgba(201,162,39,0.06)) !important;
  padding: 2.5rem 3rem !important;
  border-bottom: 1px solid rgba(201,162,39,0.2) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
}

/* ── 4. Conclave title: white text on dark card ───────────── */
/*
   Global rule h1,h2,h3,h4,h5 { color: var(--navy) } in style.css
   would win over the inline .conclave-title rule because of
   specificity ties resolved by source order when the element is
   actually an h-tag.  Force white here.
*/
.conclave-title,
.conclave-card .conclave-title {
  color: #ffffff !important;
}

/* ── 5. Conclave panels: visible glass-card on dark surface ─ */
/*
   The inline <style> sets padding and border-right but NO
   background — panels appear fully transparent inside the card.
   Set a subtle frosted-glass background.
*/
.conclave-panel {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 14px;
  padding: 2.5rem !important;
}

/* Panel borders: the inline style uses border-right; keep that
   but also ensure correct colour on last child */
.conclave-panel:not(:last-child) {
  border-right: 1px solid rgba(201,162,39,0.12) !important;
}
.conclave-panel:last-child {
  border-right: none !important;
}

/* ── 6. Conclave body: padding so panels breathe ─────────── */
/*
   Inline style sets gap:0, which is fine — but there is no
   padding on the grid wrapper, so the panels touch the card edge.
*/
.conclave-body {
  padding: 0 !important;   /* panels carry their own internal padding */
  gap: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* ── 7. Conclave panel label: gold label visible on dark bg ─ */
.conclave-panel-label {
  color: #D4AF37 !important;   /* hardcoded gold — var(--gold-light) is blue in this theme */
}

/* ── 8. Detail icon: gold icon box on dark card ──────────── */
.conclave-detail .icon {
  color: #D4AF37 !important;
  width: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── 9. Speaker avatar: readable initials ─────────────────── */
.speaker-avatar {
  background: linear-gradient(135deg, #D4AF37, #F4D06F) !important;
  color: #0f2341 !important;
}

/* ── 10. Speaker name & role: visible on dark card ─────────  */
.speaker-name {
  color: #ffffff !important;
}
.speaker-role {
  color: rgba(255,255,255,0.6) !important;
}

/* ── 11. Partner logo pills: white text on dark card ──────── */
/*
   The original .partner-logo-pill in style.css has
   color: rgba(255,255,255,0.7) — correct — but a later duplicate
   block sets color: #fff (also correct).  The inline <style> in
   events.html does NOT define .partner-logo-pill, so the last
   definition in style.css/footer copy.css wins (color:#fff).
   Force here for safety.
*/
.conclave-card .partner-logo-pill,
.conclave-footer .partner-logo-pill {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* ── 12. Conclave footer: dark tinted strip ──────────────── */
.conclave-footer {
  background: rgba(0,0,0,0.15) !important;
  border-top: 1px solid rgba(201,162,39,0.15) !important;
  padding: 2rem 2.5rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

/* ── 13. Register button inside the panel ─────────────────── */
/*
   btn-gold inside conclave-card: the late duplicates in style.css
   set display:flex + dark-on-gold colours, but multiple overrides
   confuse the cascade.  Reinforce once clearly.
*/
.conclave-card .btn-gold {
  background: linear-gradient(135deg, #D4AF37, #F4D06F) !important;
  color: #0f2341 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem;
  font-weight: 700 !important;
  border: none !important;
  text-decoration: none;
}
.conclave-card .btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(212,175,55,0.30) !important;
}

/* ── 14. btn-full width ───────────────────────────────────── */
.btn-full {
  width: 100% !important;
  justify-content: center !important;
}

/* ── 15. Conclave badge ──────────────────────────────────── */
.conclave-badge {
  background: linear-gradient(135deg, #D4AF37, #F4D06F) !important;
  color: #0f2341 !important;
  font-weight: 700 !important;
  white-space: nowrap;
  border-radius: 100px !important;
  padding: 0.4rem 1rem !important;
}

/* ── 16. Event list items: border-navy now defined ────────── */
/*
   These items were borderless because --border-navy was missing.
   Now that :root defines it, they render correctly.
   The rules below are defensive overrides.
*/
.event-list-item {
  border: 1px solid var(--border-navy) !important;
  background: var(--white) !important;
}

/* ── 17. Responsive ───────────────────────────────────────── */
@media (max-width: 992px) {
  .conclave-body {
    grid-template-columns: 1fr !important;
  }
  .conclave-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.75rem 2rem !important;
  }
  .conclave-panel:not(:last-child) {
    border-right: none !important;
    border-bottom: 1px solid rgba(201,162,39,0.12) !important;
  }
}

@media (max-width: 600px) {
  .conclave-header,
  .conclave-footer {
    padding: 1.25rem !important;
    flex-direction: column !important;
  }
  .conclave-body {
    padding: 0 !important;
  }
  .conclave-panel {
    padding: 1.25rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(201,162,39,0.12) !important;
    border-radius: 0 !important;
  }
  .conclave-panel:last-child {
    border-bottom: none !important;
  }
  .speaker-card {
    flex-direction: column !important;
    text-align: center !important;
  }
}
