/* === Premium nav link styling ============================================
 * Makes the "PREMIUM" item in the desktop + mobile nav feel actually premium.
 * Champagne-gold gradient text with a slow shimmer sweep + diamond glyph.
 * Loaded globally via <link> on every page that has the standard nav.
 * ========================================================================= */

/* Desktop nav */
.nav-links a[href="premium.html"] {
  background-image: linear-gradient(
    110deg,
    #b8941f 0%,
    #e9c66d 18%,
    #f7e6a3 32%,
    #d4af37 48%,
    #f7e6a3 64%,
    #e9c66d 80%,
    #b8941f 100%
  );
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  animation: bbe-premium-shimmer 5.5s linear infinite;
  position: relative;
}

.nav-links a[href="premium.html"]::before {
  content: '◆';
  display: inline-block;
  margin-right: 5px;
  font-size: 8px;
  vertical-align: middle;
  color: #d4af37;
  -webkit-text-fill-color: #d4af37;
  opacity: 0.85;
  transform: translateY(-1px);
}

.nav-links a[href="premium.html"]:hover {
  animation-play-state: paused;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}

/* Mobile menu */
.mobile-menu a[href="premium.html"] {
  background-image: linear-gradient(
    110deg,
    #b8941f 0%,
    #e9c66d 22%,
    #f7e6a3 38%,
    #d4af37 52%,
    #f7e6a3 66%,
    #e9c66d 82%,
    #b8941f 100%
  );
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  animation: bbe-premium-shimmer 5.5s linear infinite;
}

.mobile-menu a[href="premium.html"]::before {
  content: '◆';
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  vertical-align: middle;
  color: #d4af37;
  -webkit-text-fill-color: #d4af37;
  opacity: 0.85;
}

@keyframes bbe-premium-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -120% 50%; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .nav-links a[href="premium.html"],
  .mobile-menu a[href="premium.html"] {
    animation: none;
    background-position: 50% 50%;
  }
}

/* =========================================================================
 * Nav simplification (Bryant request, 2026-05-22):
 * Full nav-links bar shows ONLY on home (body.is-home).
 * Every other page hides the desktop nav-links and forces the hamburger,
 * so users get the page content uncluttered with a single menu affordance.
 * Brand mark + Book-a-Free-Call CTA stay visible on all pages.
 * ========================================================================= */
body:not(.is-home) nav .nav-links {
  display: none !important;
}
body:not(.is-home) nav .nav-hamburger {
  display: inline-flex !important;
}

/* =========================================================================
 * Hamburger button — 44×44 tap target with THREE visible bars.
 * The HTML structure is: button > [label] + [.nav-hamburger-bars > span × 3]
 * KEY: only the leaf bars get bar styling. The wrapper just lays them out.
 * ========================================================================= */
nav .nav-hamburger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
nav .nav-hamburger:hover,
nav .nav-hamburger[aria-expanded="true"] {
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: rgba(212, 175, 55, 0.55) !important;
}
nav .nav-hamburger .nav-hamburger-label {
  display: none !important;
}
/* The bars wrapper — lays out 3 bars in a column. Has its own dimensions. */
nav .nav-hamburger .nav-hamburger-bars {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 22px !important;
  height: 18px !important;
  background: transparent !important;
}
/* The 3 leaf bars — these are the actual lines.
   Reset margin so old per-page rules with margin:4px don't push them apart. */
nav .nav-hamburger .nav-hamburger-bars > span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: rgba(240, 238, 232, 0.95) !important;
  border-radius: 2px !important;
  margin: 0 !important;
  transition: width 0.22s ease, background-color 0.22s ease;
}
nav .nav-hamburger .nav-hamburger-bars > span:nth-of-type(2) {
  width: 16px !important;
}
nav .nav-hamburger:hover .nav-hamburger-bars > span,
nav .nav-hamburger[aria-expanded="true"] .nav-hamburger-bars > span {
  background: #d4af37 !important;
}
nav .nav-hamburger:hover .nav-hamburger-bars > span:nth-of-type(2) {
  width: 22px !important;
}
/* Fallback: if the page renders bars as direct button children (no .nav-hamburger-bars
   wrapper, just <span><span><span>), make those three the bars instead. */
nav .nav-hamburger:not(:has(.nav-hamburger-bars)) > span:not(.nav-hamburger-label) {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: rgba(240, 238, 232, 0.95) !important;
  border-radius: 2px !important;
  margin: 2px 0 !important;
}

/* =========================================================================
 * Tetris-style mobile card packing (Bryant: "remove the blank and do
 * like Tetris"). CSS grid forces equal row heights → blank gaps below
 * shorter cards. Switch to CSS columns on mobile so cards flow vertically
 * and pack tightly. Cards must `break-inside: avoid` to stay whole.
 * Desktop layout untouched.
 * ========================================================================= */
@media (max-width: 780px) {
  .cat-grid,
  .exp-list,
  .vibe-grid {
    display: block !important;
    column-count: 2 !important;
    column-gap: 10px !important;
    grid-template-columns: none !important;
  }
  .cat-grid > .exp-tile,
  .cat-grid > .exp-card,
  .cat-grid > a,
  .exp-list > *,
  .vibe-grid > * {
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
@media (max-width: 420px) {
  .cat-grid,
  .exp-list,
  .vibe-grid {
    column-count: 1 !important;
  }
}

/* =========================================================================
 * Remove the "Heads up · this page is built for the bigger screen" gate
 * (Bryant: "remove the gate from all pages"). It was telling mobile
 * visitors their experience was degraded — kills momentum at launch.
 * The site reads fine on mobile now; the tip is no longer needed.
 * ========================================================================= */
.mobile-only-tip { display: none !important; }

/* =========================================================================
 * Hide the secondary sticky-book bar during launch.
 * sticky-book.js injects a "Book a Free Call · 10 min · trained guides ·
 * no commitment" bar at top:0 with its own padding/transform logic. It
 * collides with the launch countdown banner — looked like a "second
 * hidden menu" above the page content. Suppress entirely for now; the
 * launch banner + footer CTA cover the same use case.
 * Also reset any inline top: styles sticky-book.js may have set on nav
 * and tip, so they honor only --bbe-stb-height (launch banner height).
 * ========================================================================= */
.bbe-stkbk { display: none !important; }
body.bbe-stkbk-active nav {
  top: var(--bbe-stb-height, 0px) !important;
}
body.bbe-stkbk-active .mobile-only-tip {
  top: calc(72px + var(--bbe-stb-height, 0px)) !important;
}
/* Body should not retain any padding-top that sticky-book.js may have
   added on its own — launch banner handles the body padding via
   `html body { padding-top: var(--bbe-stb-height) }` */

/* =========================================================================
 * "Heads up" mobile-only desktop tip — fix sticky position when banner
 * is showing, AND keep it glued to the nav as the nav scroll-hides.
 * Hardcoded 118px in the per-page CSS assumed 44px banner — wrong on
 * mobile. Now uses the CSS variable and follows the nav's slide state.
 * ========================================================================= */
@media (max-width: 768px) {
  .mobile-only-tip {
    top: calc(72px + var(--bbe-stb-height, 0px)) !important;
    transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  body.bbe-stkbk-active .mobile-only-tip {
    top: calc(72px + var(--bbe-stb-height, 0px)) !important;
  }
  /* When the nav scroll-hides, the tip rises to sit just under the banner
     so there's no floating gap between the banner and the tip */
  body.nav-hidden .mobile-only-tip {
    top: var(--bbe-stb-height, 0px) !important;
  }
}

/* =========================================================================
 * Mobile slide-down menu refinement.
 * CRITICAL: launch-countdown.js sets --bbe-stb-height (44px desktop / 56px
 * mobile) and shifts nav top by that amount. Menu top MUST account for
 * the banner height too, or the first item gets clipped behind the nav.
 * ========================================================================= */
.mobile-menu {
  background: rgba(10, 12, 16, 0.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: none !important;
  border-top: 1px solid rgba(212, 175, 55, 0.18) !important;
  padding: 4px 5% 36px !important;
  gap: 0 !important;
  /* Push the menu down by (nav height = 72px) + (banner height, defaults to 0
     if banner dismissed / post-launch) */
  top: calc(72px + var(--bbe-stb-height, 0px)) !important;
  max-height: calc(100vh - 72px - var(--bbe-stb-height, 0px)) !important;
}

/* On desktop + tablet sizes (where the hamburger is visible), constrain the
   menu to a refined right-aligned panel — applies on ALL pages, including
   home. Home at >=1100px has the full nav-links bar so the panel never opens
   there anyway; between 781-1100 on home, the hamburger fires and we want
   the same panel UX, not a full-width slab. */
@media (min-width: 781px) {
  .mobile-menu {
    left: auto !important;
    right: 24px !important;
    top: calc(80px + var(--bbe-stb-height, 0px)) !important;
    width: 280px !important;
    max-width: 92vw !important;
    border: 1px solid rgba(212, 175, 55, 0.20) !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,0,0,0.4) !important;
    padding: 14px 18px 18px !important;
    max-height: calc(100vh - 100px - var(--bbe-stb-height, 0px)) !important;
  }
}

.mobile-menu a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(240, 238, 232, 0.78) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.mobile-menu a:last-of-type:not(.mobile-cta) {
  border-bottom: none !important;
}
.mobile-menu a:hover {
  color: #ffffff !important;
  padding-left: 4px !important;
}
.mobile-menu .mobile-cta {
  margin-top: 10px !important;
  background: var(--green, #2D6A4F) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  text-align: center !important;
  border-bottom: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}
.mobile-menu .mobile-cta:hover {
  filter: brightness(1.12);
  padding-left: 16px !important;
}

/* =========================================================================
 * Less-sticky nav (Bryant: "also it too sticky").
 * Slide the nav off-screen when user scrolls down, reveal on scroll up.
 * Body gets .nav-hidden class via nav-scroll.js. Always shown at the
 * very top of the page (handled by JS, no scroll detection within 80px).
 * ========================================================================= */
nav {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* will-change:transform removed — breaks position:fixed in Safari (forces compositing layer,
     nav stops being viewport-relative). The slide animation works fine without it. */
}
body.nav-hidden nav {
  transform: translateY(-100%) !important;
}
/* Keep mobile menu locked open even when nav slides */
body.nav-hidden .mobile-menu.open {
  transform: translateY(0) !important;
}

/* =========================================================================
 * Pulsating glow on the "Book a Free Call" CTA (desktop nav + mobile menu).
 * Bryant 2026-05-24: draw the eye to the call CTA.
 * Pause on hover, respect prefers-reduced-motion.
 * ========================================================================= */
@keyframes bbe-book-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(254, 223, 0, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      0 0 18px 4px rgba(254, 223, 0, 0.45),
      0 0 32px 8px rgba(254, 223, 0, 0.18);
    filter: brightness(1.08);
  }
}
nav .nav-cta {
  animation: bbe-book-pulse 2.4s ease-in-out infinite;
  border-radius: 4px;
}
.mobile-menu .mobile-cta {
  animation: bbe-book-pulse 2.4s ease-in-out infinite;
}
nav .nav-cta:hover,
.mobile-menu .mobile-cta:hover {
  animation-play-state: paused;
  box-shadow: 0 0 24px 6px rgba(254, 223, 0, 0.55) !important;
}
@media (prefers-reduced-motion: reduce) {
  nav .nav-cta,
  .mobile-menu .mobile-cta {
    animation: none;
  }
}

/* =========================================================================
 * Nav slide transition (hide-on-scroll-down / reveal-on-scroll-up).
 * body.nav-hidden is toggled by nav-scroll.js.
 * ========================================================================= */
nav {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =========================================================================
 * Hide experience-point labels from all public-facing cards.
 * Decision 2026-05-24: "2 pts" / "3 pts" tags raise questions visitors
 * can't answer. Hidden from public view; data stays in trip-builder.html
 * for internal pricing. Reversible — just remove these two rules.
 * ========================================================================= */
.exp-pts, .chk-pts { display: none !important; }

/* =========================================================================
 * Itinerary pages: float the back-bar over the hero image.
 * Removes the blank dark band between the nav and the hero photo.
 * The button sits just below the nav; the hero fills the viewport.
 * ========================================================================= */
body.iti-page .back-bar {
  position: absolute !important;
  top: calc(var(--bbe-stb-height, 0px) + 72px + 14px) !important;
  left: 5% !important;
  background: transparent !important;
  padding: 0 !important;
  z-index: 5 !important;
}