/**
 * RIDA Academy — shared navbar theme.
 *
 * Loaded on every page AFTER the page's inline styles (injected by
 * data/site-chrome.js; linked directly on community.html which doesn't
 * load site-chrome). Later-in-document + equal-or-higher specificity
 * means these rules win over each page's inline nav CSS without
 * touching 23 files.
 *
 * Design: frosted glass bar, links held in a translucent bordered pill
 * so they read clearly against any page background; brighter link text
 * (was rgba .45–.7, now .88); per-link hover chips; glowing CTA.
 *
 * Positioning (fixed vs sticky), height (72px), and markup are left to
 * each page — this file only restyles appearance, so no layout shifts.
 */

/* ── Bar ─────────────────────────────────────────────────────────── */
nav,
nav.rida-nav {
  background: linear-gradient(180deg, rgba(28, 28, 24, 0.82), rgba(16, 16, 14, 0.78)) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
              0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Don't touch in-page nav elements that aren't the site bar
   (e.g. the community page's <nav class="menu"> "nine doors"). */
nav.menu,
nav.breadcrumb,
nav[aria-label="breadcrumb"],
nav[aria-label="The nine doors"] {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

nav .nav-logo img {
  filter: brightness(1.3) !important;
}

/* ── Links pill: the "transparent bordered div" around the options ── */
nav ul.nav-links,
nav.rida-nav ul.nav-links {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 5px 8px;
  gap: 0.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Each option becomes a clearly visible chip.
   white-space:nowrap: multi-word labels ("Webinar Archive") must never
   break into two lines inside their chip — when there isn't room, the
   whole nav collapses to the hamburger instead (see 1280px block). */
nav ul.nav-links > li > a,
nav.rida-nav ul.nav-links > li > a,
nav ul.nav-links .res-dd-trigger,
nav.rida-nav ul.nav-links .res-dd-trigger {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600 !important;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

/* Compact tier: mid-width screens tighten the chips before the
   hamburger takes over, so the pill fits on one row. */
@media (max-width: 1500px) {
  nav ul.nav-links,
  nav.rida-nav ul.nav-links {
    gap: 0;
    padding: 4px 6px;
  }
  nav ul.nav-links > li > a,
  nav.rida-nav ul.nav-links > li > a,
  nav ul.nav-links .res-dd-trigger,
  nav.rida-nav ul.nav-links .res-dd-trigger {
    font-size: 0.78rem !important;
    padding: 6px 9px;
  }
  nav .nav-cta,
  nav.rida-nav .nav-cta {
    font-size: 0.76rem !important;
    padding: 0.5rem 0.95rem !important;
  }
}

nav ul.nav-links > li > a:hover,
nav.rida-nav ul.nav-links > li > a:hover,
nav ul.nav-links .res-dd-trigger:hover,
nav ul.nav-links .res-dd:hover .res-dd-trigger,
nav.rida-nav ul.nav-links .res-dd:hover .res-dd-trigger {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10);
}

nav ul.nav-links > li > a.active,
nav.rida-nav ul.nav-links > li > a.active {
  color: #E2D603 !important;
  background: rgba(226, 214, 3, 0.10);
}

/* CTA text must stay BLACK on its yellow chip. The generic chip rule
   above (nav ul.nav-links > li > a) outranks the .nav-cta color rules
   with its higher specificity, so re-assert black here at equal-or-
   higher specificity, declared later. Covers hover too. */
nav ul.nav-links > li > a.nav-cta,
nav.rida-nav ul.nav-links > li > a.nav-cta,
nav ul.nav-links > li > a.nav-cta:hover,
nav.rida-nav ul.nav-links > li > a.nav-cta:hover {
  color: #000 !important;
}

/* ── CTA: keep yellow, add presence ──────────────────────────────── */
nav .nav-cta,
nav.rida-nav .nav-cta {
  background: #E2D603 !important;
  color: #000 !important;
  font-weight: 700 !important;
  padding: 0.55rem 1.25rem !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(226, 214, 3, 0.35),
              0 4px 18px rgba(226, 214, 3, 0.22);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
nav .nav-cta:hover,
nav.rida-nav .nav-cta:hover {
  background: #F0E440 !important;
  box-shadow: 0 0 0 1px rgba(226, 214, 3, 0.5),
              0 6px 24px rgba(226, 214, 3, 0.34);
  transform: translateY(-1px);
}

/* ── Resources dropdown panel: match the glass language ──────────── */
nav .res-dd-menu,
nav.rida-nav .res-dd-menu {
  background: rgba(22, 22, 20, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 16px !important;
}

/* ── Hamburger ───────────────────────────────────────────────────── */
nav .nav-toggle {
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE LAYOUT — use the space
   The page containers were built at 900–1100px, which reads as a
   narrow centered column with large dead margins on modern screens.
   These overrides widen the shared container classes on large
   viewports only — tablet/mobile layouts are untouched. Loaded after
   each page's inline CSS, so equal selectors win by document order.
   ═══════════════════════════════════════════════════════════════════ */

/* Typographic balance everywhere: headings never leave a lonely last
   word; paragraphs avoid awkward one-word last lines. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

@media (min-width: 1200px) {
  /* Primary content containers (page-dependent: 1000–1100px → 1240px) */
  .container   { max-width: 1240px !important; }
  .wrap        { max-width: 1240px !important; }
  /* Narrow section variants (900px → 1080px) keep their relative
     "tighter than the main column" role, just scaled up */
  .wrap-sm     { max-width: 820px  !important; }
  .ev-wrap     { max-width: 1160px !important; }
  /* Hero text columns: a wider measure so headlines breathe
     (still capped — body text measure stays readable) */
  .hero-inner    { max-width: 980px !important; }
  .sp-hero-inner { max-width: 900px !important; }
}

@media (min-width: 1600px) {
  /* Very wide screens get one more step, not full-bleed */
  .container { max-width: 1360px !important; }
  .wrap      { max-width: 1360px !important; }
  .ev-wrap   { max-width: 1260px !important; }
}

/* Reading pages (podcast episode + webinar replay detail) keep a
   comfortable text measure — transcripts at 1240px would be unreadable.
   Modest bump only: 900px → 1000px. */
@media (min-width: 1200px) {
  body:has(#ep-hero-content) .container,
  body:has(#ep-hero-content) .ep-audio-wrap,
  body:has(#ep-hero-content) .ep-tabs-wrap,
  body:has(#ep-hero-content) .ep-content-area,
  body:has(#wb-hero-content) .container,
  body:has(#wb-hero-content) .wb-wrap {
    max-width: 1000px !important;
  }
}

/* ── Hamburger collapse at 1280px (was 900px in the page CSS) ─────
   Eleven nav items don't fit between 900–1280px, so the pill
   dissolves into a glass dropdown panel much earlier. This block is
   self-contained — it re-declares the toggle/panel behavior the pages
   only define at 900px, so it works across the whole 0–1280 range. */
@media (max-width: 1280px) {
  nav .nav-toggle,
  nav.rida-nav .nav-toggle {
    display: block !important;
  }
  nav ul.nav-links,
  nav.rida-nav ul.nav-links {
    display: none !important;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(14, 14, 12, 0.96) !important;
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    padding: 20px 28px;
    gap: 6px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  }
  nav ul.nav-links.active,
  nav.rida-nav ul.nav-links.active {
    display: flex !important;
  }
  nav ul.nav-links > li,
  nav.rida-nav ul.nav-links > li {
    width: 100%;
  }
  nav ul.nav-links > li > a,
  nav.rida-nav ul.nav-links > li > a {
    display: block;
    font-size: 0.875rem !important;
    padding: 11px 14px;
    border-radius: 10px;
  }
  nav ul.nav-links .res-dd-menu {
    display: none !important;
  }
  nav ul.nav-links .res-dd-trigger svg {
    display: none;
  }
  nav .nav-cta,
  nav.rida-nav .nav-cta {
    display: block;
    text-align: center;
    margin-top: 6px;
    width: 100%;
  }
}