/* ─────────────────────────────────────────────────────────────────
   BCB SITE NAV  —  bcb-nav.css
   Two-tier navigation: photo cards (Bourbon | Cigars | Poker) + sub-links.
   Single source of truth. Loaded by every interior page.
   Updated: 2026-03-27

   Modifier classes on <nav class="bcb-nav">:
     .bcb-nav--bourbon  → bourbon card active, bourbon sub-nav shown
     .bcb-nav--cigars   → cigars card active, cigars sub-nav shown
     .bcb-nav--poker    → poker card active, poker sub-nav shown

   Active states:
     .nav-card.active        → glowing section card
     .bcb-nav__sub-link.active → highlighted sub-page link
─────────────────────────────────────────────────────────────────── */

/* ── Outer shell ── */
.bcb-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(13, 8, 2, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   TOP TIER  —  Photo cards: Bourbon | Cigars | Poker
═══════════════════════════════════════════════════════════════ */
.bcb-nav__top {
  display: flex;
  align-items: stretch;
  gap: 3px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bcb-nav__top::-webkit-scrollbar { display: none; }

/* ── Mini photo cards ── */
.nav-card {
  position: relative;
  width: 72px;
  height: 84px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.12);
  transition: transform 0.3s cubic-bezier(.25,.46,.45,.94),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.nav-card:hover { transform: translateY(-2px); }

/* Glow per section when active */
.nav-card--bourbon.active {
  border-color: rgba(200, 132, 42, 0.55);
  box-shadow: 0 6px 28px rgba(200, 132, 42, 0.4);
}
.nav-card--cigars.active {
  border-color: rgba(90, 153, 112, 0.55);
  box-shadow: 0 6px 28px rgba(61, 107, 79, 0.4);
}
.nav-card--poker.active {
  border-color: rgba(196, 30, 58, 0.55);
  box-shadow: 0 6px 28px rgba(196, 30, 58, 0.4);
}
.nav-card:hover.nav-card--bourbon { border-color: rgba(200,132,42,0.4); box-shadow: 0 4px 20px rgba(200,132,42,0.25); }
.nav-card:hover.nav-card--cigars  { border-color: rgba(90,153,112,0.4); box-shadow: 0 4px 20px rgba(61,107,79,0.25); }
.nav-card:hover.nav-card--poker   { border-color: rgba(196,30,58,0.4);  box-shadow: 0 4px 20px rgba(196,30,58,0.25); }

/* Background photo */
.nav-card__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s ease, filter 0.3s ease;
  filter: brightness(0.5) saturate(0.65);
}
.nav-card.active .nav-card__photo { filter: brightness(0.72) saturate(1.0); }
.nav-card:hover  .nav-card__photo { transform: scale(1.07); filter: brightness(0.65) saturate(0.85); }

/* Dark gradient overlay on top of photo */
.nav-card__photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.88) 100%);
}

/* Text content */
.nav-card__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 0 6px 8px;
  text-align: center;
}
.nav-card__label {
  font-family: 'Playfair Display', serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1; text-shadow: 0 1px 8px rgba(0,0,0,0.95);
  transition: letter-spacing 0.3s ease;
}
.nav-card:hover .nav-card__label { letter-spacing: 0.18em; }
.nav-card--bourbon .nav-card__label { color: #F0C060; }
.nav-card--cigars  .nav-card__label { color: #8FD4A8; }
.nav-card--poker   .nav-card__label { color: #FF7088; }

.nav-card__bar {
  width: 18px; height: 1px; margin: 5px auto 0;
  transition: width 0.3s ease;
}
.nav-card:hover .nav-card__bar,
.nav-card.active .nav-card__bar { width: 32px; }
.nav-card--bourbon .nav-card__bar { background: #C8842A; }
.nav-card--cigars  .nav-card__bar { background: #5A9970; }
.nav-card--poker   .nav-card__bar { background: #C41E3A; }

/* "Currently Viewing" label — only visible on the active card */
.nav-card__viewing {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.38rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: transparent;
  margin-top: 4px; line-height: 1;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.nav-card.active .nav-card__viewing {
  color: rgba(245, 237, 216, 0.55);
}

/* Inactive dim overlay — lifts on active/hover */
.nav-card__dim {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.nav-card.active .nav-card__dim,
.nav-card:hover  .nav-card__dim { opacity: 0; }

/* Divider after card group */
.nav-card-sep {
  width: 1px;
  align-self: stretch;
  margin: 6px 8px;
  background: rgba(212, 175, 55, 0.1);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SUB TIER  —  page-level links inside each section
═══════════════════════════════════════════════════════════════ */
.bcb-nav__sub {
  display: none;
  align-items: center;
  gap: 2px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 9px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-top: 1px solid rgba(212, 175, 55, 0.07);
}
.bcb-nav__sub::-webkit-scrollbar { display: none; }

/* Show correct sub-nav based on modifier */
.bcb-nav--bourbon .bcb-nav__sub--bourbon { display: flex; }
.bcb-nav--cigars  .bcb-nav__sub--cigars  { display: flex; }
.bcb-nav--poker   .bcb-nav__sub--poker   { display: flex; }

/* Sub-nav links */
.bcb-nav__sub-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.56rem; font-weight: 400;
  letter-spacing: 0.17em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 2px;
  border: 1px solid transparent; background: transparent;
  color: rgba(245, 237, 216, 0.3);
  text-decoration: none; cursor: pointer;
  transition: all 0.22s; white-space: nowrap;
  flex-shrink: 0; display: inline-block; line-height: 1;
}
.bcb-nav__sub-link:hover {
  color: rgba(245, 237, 216, 0.68);
  background: rgba(212, 175, 55, 0.04);
}
.bcb-nav__sub-link.active {
  color: #F2E8D6;
  border-color: rgba(212, 175, 55, 0.32);
  background: rgba(212, 175, 55, 0.07);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-card         { width: 60px; height: 70px; }
  .nav-card__label  { font-size: 0.55rem; }
  .bcb-nav__sub     { padding: 0 14px 8px; }
  .bcb-nav__sub-link { font-size: 0.52rem; padding: 5px 10px; letter-spacing: 0.13em; }
}