/* =========================================================================
   COW TOWN SANCTUARY — MEGA MENU SYSTEM
   3-zone layout per blueprint Section 4.4 / 5:
     Zone 1: icon-led link groups (by sub-theme)
     Zone 2: featured content block (image + heading + copy)
     Zone 3: CTA card
   Desktop (>=1200px): full-width hover/click panel, opaque, high-contrast.
   <1200px (tablet + mobile): becomes accordion-in-drawer — see .mobile-drawer
   / .mobile-accordion rules in style.css for that state.
   ========================================================================= */

.main-nav{ position:relative; }
.mega-menu-item{ position:static; }
.mega-menu-item>.nav-link{ cursor:pointer; }

.mega-panel{
  position:absolute;
  top:100%; left:0; width:100%;
  background:var(--ct-cream);
  border-top:3px solid var(--ct-blue);
  box-shadow:0 36px 70px -12px rgba(18,14,8,.28), 0 2px 0 rgba(18,14,8,.04);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:1045;
  max-height:min(680px, calc(100vh - 110px));
  overflow-y:auto;
}
.mega-menu-item:hover>.mega-panel,
.mega-menu-item.open>.mega-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* invisible bridge so the panel doesn't close when the cursor travels from link to panel */
.mega-panel::before{ content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }

.mega-panel-inner{
  max-width:1360px; margin:0 auto;
  padding:2.5rem 2.25rem 2.75rem;
  display:grid;
  grid-template-columns:minmax(0,2.3fr) minmax(0,1.05fr) minmax(0,0.95fr);
  gap:0 3rem;
}
.mega-panel.mega-compact .mega-panel-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.95fr); }

/* ---- Zone 1: link groups ---- */
.mega-links{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(175px,1fr));
  gap:1.9rem 1.75rem;
  padding-right:2.25rem;
  border-right:1px solid var(--ct-border);
}
.mega-group-title{
  font-family:var(--font-body); font-weight:700; font-size:.74rem;
  text-transform:uppercase; letter-spacing:1.3px; color:var(--ct-blue);
  margin-bottom:.85rem; padding-bottom:.55rem; border-bottom:2px solid var(--ct-blue-pale);
  display:flex; align-items:center; gap:.4rem;
}
.mega-group{ min-width:0; }
.mega-group a{
  display:flex; align-items:center; gap:.7rem;
  padding:.46rem .4rem .46rem 0;
  color:var(--ct-dark); font-size:.87rem; font-weight:500;
  border-radius:8px; transition:background .18s ease, color .18s ease, padding-left .18s ease;
  line-height:1.35;
}
.mega-group a .mgi{
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ct-green-pale); color:var(--ct-green-dark); font-size:.86rem;
  transition:all .18s ease;
}
.mega-group a:hover{ background:rgba(46,125,66,.07); color:var(--ct-green-dark); padding-left:.6rem; }
.mega-group a:hover .mgi{ background:var(--ct-green); color:#fff; transform:scale(1.08); }
.mega-group a .soon-tag{ margin-left:auto; }
.mega-group a.link-muted{ color:var(--ct-text-soft); }

/* ---- Zone 2: featured block ---- */
.mega-featured{
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--ct-border); margin:0 1.75rem; height:fit-content;
  box-shadow:var(--shadow-sm);
}
.mega-featured .mf-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.mega-featured .mf-media img{ width:100%; height:100%; object-fit:cover; }
.mega-featured .mf-tag{
  position:absolute; top:10px; left:10px; background:rgba(20,20,15,.55); backdrop-filter:blur(3px);
  color:var(--ct-gold); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  padding:.28rem .65rem; border-radius:var(--radius-pill);
}
.mega-featured .mf-body{ padding:1.1rem 1.25rem 1.3rem; }
.mega-featured h4{ font-family:var(--font-display); font-size:1.06rem; margin:0 0 .45rem; color:var(--ct-dark); line-height:1.3; }
.mega-featured p{ font-size:.82rem; color:var(--ct-text-soft); margin-bottom:.8rem; line-height:1.55; }
.mega-featured a.mf-link{
  font-weight:700; font-size:.82rem; color:var(--ct-green-dark);
  display:inline-flex; gap:.4rem; align-items:center;
}
.mega-featured a.mf-link i{ transition:transform .18s ease; }
.mega-featured a.mf-link:hover i{ transform:translateX(3px); }

/* ---- Zone 3: CTA card ---- */
.mega-cta{
  border-radius:var(--radius-md); padding:1.9rem 1.6rem;
  display:flex; flex-direction:column; height:fit-content;
  background:linear-gradient(150deg,var(--ct-green-dark),var(--ct-green));
  color:#fff; box-shadow:var(--shadow-sm);
}
.mega-cta.cta-gold{ background:linear-gradient(150deg,var(--ct-blue-dark),var(--ct-blue)); color:#fff; }
.mega-cta.cta-navy{ background:linear-gradient(150deg,var(--ct-navy-dark),var(--ct-navy)); color:#fff; }
.mega-cta.cta-terracotta{ background:linear-gradient(150deg,var(--ct-blue-dark),var(--ct-blue-light)); color:#fff; }
.mega-cta .mc-icon{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); color:#fff; font-size:1.35rem; margin-bottom:1rem;
}
.mega-cta.cta-gold .mc-icon{ background:rgba(255,255,255,.18); color:#fff; }
.mega-cta h4{ font-family:var(--font-display); font-size:1.18rem; margin-bottom:.55rem; line-height:1.3; }
.mega-cta.cta-gold h4{ color:#fff; }
.mega-cta p{ font-size:.85rem; margin-bottom:1.4rem; flex:1; opacity:.92; }
.mega-cta.cta-gold p{ color:rgba(255,255,255,.88); }
.mega-cta .btn{ width:100%; }

/* ---- Home: simple link, no panel ---- */
.mega-menu-item.no-mega>.nav-link .caret{ display:none; }

/* ---- Caret ---- */
.nav-link .caret{ font-size:.62rem; margin-left:.15rem; transition:transform .2s ease; opacity:.65; }
.mega-menu-item.open>.nav-link .caret{ transform:rotate(180deg); }

/* ---- Compact nav sizing for the whole desktop range (>=1200px). One
   consistent tier (rather than a "roomier" tier above some width) keeps the
   item-count the priority-nav JS shows as a smooth, monotonic function of
   available width — a separate wider-padding tier above a fixed pixel
   value previously caused a brief dip (2 extra items into "More") right at
   that boundary, since it shrank the nav's own budget just as the viewport
   grew. ---- */
@media (min-width:1200px){
  .main-nav>.nav-item>.nav-link{ padding:.6rem .55rem; font-size:.8925rem; }
  .main-nav{ gap:0; }
  .mega-panel-inner{ gap:0 2rem; padding:2.1rem 1.6rem 2.3rem; }
  .mega-links{ padding-right:1.6rem; gap:1.5rem; }
  .mega-featured{ margin:0 1.2rem; }
}

/* ---- Laptop tier (1200–1650px, i.e. a 1366px screen at 100% zoom).
   All 14 top-level items have to fit here without collapsing into "More",
   so the nav is tightened and the logo drops its wordmark — the logo mark
   alone still carries the brand, and the full name sits in the top bar and
   the footer. Above 1650px — where all 14 fit at full size — everything relaxes back. ---- */
@media (min-width:1200px) and (max-width:1649.98px){
  .main-nav>.nav-item>.nav-link{ padding:.6rem .28rem; font-size:.8325rem; letter-spacing:-.1px; }
  .nav-link .caret{ font-size:.55rem; margin-left:.08rem; }
  .header-inner .brand-logo .brand-word{ display:none; }
  .header-inner{ gap:.5rem; }
  .header-utility{ gap:.4rem; }
}

/* ---- Priority overflow: 13 top-level items is more than fits reliably at
   any single fixed breakpoint (verified: even 1920px can't fit all 13 at
   once). Instead of guessing pixel breakpoints, JS (see the priority-nav
   block in main.js) measures the nav's real rendered width on load/resize
   and moves exactly as many low-priority items as needed into this "More"
   dropdown — toggling Bootstrap's own .d-none utility on the direct nav
   item and its matching row here — so every viewport ends with zero
   overlap. Below 1200px the mobile drawer (complete, un-curated list) takes
   over entirely — see .mobile-drawer. ---- */
.nav-more-item .dropdown-menu{
  border:none; border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:.6rem; margin-top:.6rem;
  border-top:3px solid var(--ct-gold);
}
.nav-more-item .dropdown-item{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:8px; font-size:.88rem; font-weight:500;
}
.nav-more-item .dropdown-item i{ color:var(--ct-green); width:18px; text-align:center; }
.nav-more-item .dropdown-item:hover, .nav-more-item .dropdown-item.active{ background:var(--ct-green-pale); color:var(--ct-green-dark); }

/* ---- Scrollbar styling inside a tall panel ---- */
.mega-panel::-webkit-scrollbar{ width:8px; }
.mega-panel::-webkit-scrollbar-thumb{ background:var(--ct-border); border-radius:4px; }

/* ---- "Become A Member" button uses its short "Join" label across the
   whole desktop nav range, freeing a consistent bit of extra room for the
   priority nav (see above — one tier, no mid-range dip) ---- */
@media (min-width:1200px){
  .become-member-btn .btn-label-long{ display:none; }
  .become-member-btn .btn-label-short{ display:inline; }
}
.become-member-btn .btn-label-short{ display:none; }