/* ===========================
   CORE NAV / HEADER
   =========================== */

/* Default header height var (JS can overwrite precisely) */
:root { --header-h: 132px; }

/* Make header fixed across all pages/sizes */
.sticky-header{
  position: fixed;       /* was sticky */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 4000; /* above everything */
  background: #fff;
  box-shadow: 0 2px 14px rgba(24,34,56,.06);
}

/* Offset page content so it doesn't sit under the fixed header */
body{
  padding-top: var(--header-h, 132px);
  scroll-padding-top: var(--header-h, 132px); /* helps anchor jumps */
}

/* Top row: logo (left) + icon actions (right) */
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  gap:12px;
}

/* Bigger logo on desktop, smaller on mobile */
.logo-box img{
  height:64px;
  width:auto;
}
@media (min-width: 992px){
  .logo-box img{ height:92px; }
}

/* Icon buttons row (hamburger, cart, signin, signup, help, events on desktop) */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Generic icon button */
.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid #e3e9f1;
  background:#fff;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  text-decoration:none !important;
}
.icon-btn:hover{
  border-color:#cfe2ff;
  background:#f7fbff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.icon-btn svg{ width:20px; height:20px; fill:#1a3d7c; }

/* Cart badge */
.icon-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:#e53935;
  color:#fff;
  font-size:11px;
  line-height:18px;
  text-align:center;
  font-weight:700;
}

/* Cart flare/bump animation when count changes */
@keyframes cart-bump {
  0% { transform: scale(1); }
  25% { transform: scale(1.18); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.cart-bump{ animation: cart-bump .42s ease-out; }

/* Search row (always under the logo) */
.search-row{
  padding: 6px 12px 6px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.search-form{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:780px;
}
.search-input{
  flex:1 1 auto;
  height:42px;
  border:1px solid #d9e1ec;
  border-radius:10px;
  padding:0 12px;
  font-size:16px;
}
.search-go{
  width:42px; height:42px;
  border-radius:10px;
  border:1px solid #e3e9f1;
  background:#fff;
  cursor:pointer;
}
.search-go:hover{ background:#f7fbff; border-color:#cfe2ff; }
.search-go svg{ width:20px; height:20px; fill:#1a3d7c; }

/* Mega-menu (desktop only) */
.navbar{
  background-color:#3394db;
  display:flex;
  gap:6px;
  padding:0 12px;
  position:relative;
  z-index:4600; /* keep tabs above panels along the top edge */
}
.navbar > .dropdown{ position:relative; }
.navbar > .dropdown > a{
  color:#fff;
  font-size:1rem;
  font-weight:700;
  padding:12px 10px;
  text-decoration:none;
  display:block;
}
.navbar > .dropdown:hover > a{
  background:#fff; color:#3394db;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* Desktop mega panel — wide, centered, never off-screen */
.mega-menu{
  display:none;                   /* hidden by default */
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  padding:22px 28px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  min-width:680px;
  max-width:min(92vw, 960px);
  max-height:70vh;               /* long lists scroll instead of spilling */
  overflow:auto;
  z-index:4100;
  display:flex;
  flex-wrap:wrap;
  column-gap:40px;
  row-gap:14px;
}
.navbar > .dropdown:hover .mega-menu{ display:flex; }

/* Only one panel visible at a time (prevents stacking while moving across) */
@supports(selector(.navbar:has(.dropdown))){
  .navbar:has(> .dropdown:hover) > .dropdown .mega-menu{ display:none !important; }
  .navbar:has(> .dropdown:hover) > .dropdown:hover .mega-menu{ display:flex !important; }
}

/* Columns grow but keep a sensible minimum */
.mega-menu-col{
  min-width:180px;
  flex:1 1 180px;
}
.mega-menu-col h5{
  font-size:15px; color:#333; font-weight:700; margin:0 0 10px 0;
}
.mega-menu-col a{
  color:#1a222f; text-decoration:none; display:block; padding:4px 0; font-size:14px;
}
.mega-menu-col a:hover{ color:#002f6c; text-decoration:underline; }

/* First/last items pin to edges so the panel never clips */
.navbar > .dropdown:nth-child(-n+2) .mega-menu{
  left:0;
  right:auto;
  transform:none;
}
.navbar > .dropdown:nth-last-child(-n+2) .mega-menu{
  left:auto;
  right:0;
  transform:none;
}

/* Mobile offcanvas (two-panel) */
.mobile-nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:5000; display:none;
}
.mobile-nav{
  position:fixed; top:0; left:0; height:100%; width:88vw; max-width:360px;
  background:#fff; box-shadow:2px 0 20px rgba(0,0,0,.28);
  transform:translateX(-100%); transition:transform .28s ease;
  z-index:5100; overflow:hidden; display:flex; flex-direction:column;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-overlay.show{ display:block; }

/* Drawer header */
.mobile-nav .drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eef1f6;
}
.drawer-title{ font-weight:800; color:#163e6f; }

/* Two panes */
.mobile-nav .panes{
  display:grid; grid-template-columns: 1fr 1fr; gap:0; flex:1 1 auto; min-height:0;
}
.mobile-pane{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:10px 8px;
  border-right:1px solid #f0f2f6;
}
.mobile-pane:last-child{ border-right:none; }

/* Cat & subcat items */
.mobile-list{ list-style:none; margin:0; padding:0; }
.mobile-item{
  display:block; padding:14px 12px; border-radius:8px; color:#0b2f6d; font-weight:800; font-size:20px; text-decoration:none;
}
.mobile-item:hover{ background:#eef5ff; }

/* Subcats smaller */
.mobile-sub{
  display:block; padding:10px 12px; border-radius:8px; color:#275f9b; font-weight:600; font-size:16px; text-decoration:none;
}
.mobile-sub:hover{ background:#f4f8ff; }

/* Help + Events pinned bottom */
.mobile-nav .footer-links{
  border-top:1px solid #eef1f6; padding:10px 12px 14px 12px;
}
.mobile-footer-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:#0b2f6d; font-weight:700; text-decoration:none;
}
.mobile-footer-link:hover{ background:#eef5ff; }
.mobile-footer-link svg{ width:18px; height:18px; fill:#1a3d7c; }

/* Show/Hide hamburger */
.hamburger-btn{ display:inline-flex; }
@media (min-width: 992px){
  .hamburger-btn{ display:none; }           /* HIDE on desktop */
}

/* Desktop: show Help + Events icons inline with others */
@media (min-width: 992px){
  .desktop-only{ display:inline-flex; }
}
@media (max-width: 991.98px){
  .desktop-only{ display:none; }
}

/* Desktop navbar only on >=992 */
@media (max-width: 991.98px){
  .navbar{ display:none !important; }
}
@media (min-width: 992px){
  .navbar{ display:flex; }
}

/* Tooltips via title attr: make sure cursor shows pointer */
.icon-btn[title]{ position:relative; }

/* Small tweaks */
body.nav-open{ overflow:hidden; }

/* ---------- OPTIONAL CART PAGE MOBILE HELPERS (if you add these classes) ---------- */
@media (max-width: 640px){
  .cart-table{ font-size:14px; }
  .cart-table th:nth-child(1),
  .cart-table td:nth-child(1){ width:48px; }
  .cart-table img{ width:46px; height:46px; }
  .cart-table .remove-btn{ font-size:16px; }
}

/* Fallback when JS adds .open to the hovered tab */
.navbar .dropdown .mega-menu{ display:none; }
.navbar .dropdown.open .mega-menu{ display:flex !important; }

/* ===== Hardened fixes to ensure header is fixed and no top gap ===== */

/* Keep the header fixed on all pages/sizes */
.sticky-header{
  position: fixed !important;   /* override any page-specific CSS */
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 4000;
}

/* Ensure the main page scroller is the viewport, not an inner div */
body > .container.mt-4{
  overflow: visible !important;
}

/* Remove extra gap just below the header on the first content block */
.sticky-header + .home_content,
.sticky-header + main,
.sticky-header + #page,
#page > .home_content:first-child,
main > .home_content:first-child,
.container:first-child,
.container.mt-4:first-child {
  margin-top: 0 !important;
  padding-top: 8px; /* adjust to 0 if you want it completely flush */
}

/* Make the desktop logo larger (optional) */
@media (min-width: 992px){
  .logo-box img{ height: 120px !important; }
}