/* ==========================================================================
   HEADER RESPONSIVENESS FIXES — task 86ewt8a5k
   Site-specific overrides for choiceammunition.com
   ========================================================================== */

/* =======================================================================
   RULE 1 — Raise hamburger menu breakpoint from 1000px to 1350px.
   Blocksy default: desktop nav ≥1000px, hamburger ≤999.98px.
   This override forces hamburger at 1000–1349px (tablets/narrow laptops).
   At 1350px+ the 10-item nav fits without overflow.
   ======================================================================= */

@media (min-width: 1000px) and (max-width: 1349.98px) {
  /* Hide desktop header row */
  #header [data-device=desktop] { display: none !important; }
  /* Show mobile header row (hamburger) */
  #header [data-device=mobile] { display: block !important; }
}

/* =======================================================================
   RULE 2 — Reduce padding-inline at 1350–1500px
   to give the 10-item nav more horizontal room
   ======================================================================= */

@media (min-width: 1350px) and (max-width: 1500px) {
  #header [data-row*=top],
  #header [data-row*=middle],
  #header [data-row*=bottom] {
    padding-inline: 32px !important;
  }
}

/* =======================================================================
   RULE 3 — Reduce inter-item gap at 1350–1500px
   Default is 24px; reducing to 10px recovers space at narrower desktops
   ======================================================================= */

@media (min-width: 1350px) and (max-width: 1500px) {
  [data-header*="type-1"] .ct-header [data-id="menu"] {
    --menu-items-spacing: 10px;
  }
}

/* =======================================================================
   RULE 4 — Nav bottom row: Fix white background at 1000–1349px
   global.css sets var(--theme-palette-color-8) (#fff) here;
   override with same dark colour used at ≤999.98px
   ======================================================================= */

@media (min-width: 1000px) and (max-width: 1349.98px) {
  [data-header*="type-1"] .ct-header [data-row*="bottom"] {
    background-color: #111111 !important;
  }
}

/* =======================================================================
   RULE 5 — Nav bottom row: Horizontal scroll on overflow at 1000–1349px
   Prevents nav items from being clipped at narrower tablet-landscape sizes
   ======================================================================= */

@media (min-width: 1000px) and (max-width: 1349.98px) {
  #header [data-device=mobile] [data-row=bottom] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================================
   Fix: Wishlist sign-up button unclickable (86ewt8bmx)
   Root cause 1: header#header z-index:1000 < spu-bg z-index:99999 (WP Popups
   backdrop, position:fixed) → wishlist icon unclickable on fresh page loads.
   Root cause 2: body[data-panel*="in"] never matches "wishlist-offcanvas-panel"
   → pointer-events:none on the panel, blocking the sign-up button.
   Fix 1: raise real header above spu-bg.
   Fix 2: hide spu-bg when any panel is open (belt+suspenders).
   Fix 3: restore pointer-events on active wishlist panel.
   ========================================================================= */

/* Fix 1: Raise header above WP Popups backdrop (z-index:99999) */
header#header.ct-header {
  z-index: 1000000 !important;
}

/* Fix 2: Hide WP Popups backdrop when a panel is open */
body[data-panel] .spu-bg {
  display: none !important;
}

/* Fix 3: Restore pointer-events on active wishlist offcanvas panel */
body[data-panel] #wishlist-offcanvas-panel.active {
  pointer-events: auto !important;
}

/* Fix 4: Lower header z-index when panel is open so offcanvas renders above header */
body[data-panel] header#header.ct-header {
  z-index: 999 !important;
}

/* =======================================================================
   RULE 6 — Mobile Landscape: Compress header so banner/content clears it
   Targets Android landscape (typically 360–414px tall, 568–926px wide).
   Keeps search row. Compresses padding on both rows, shrinks logo.
   Acceptance criteria (86ewudctv):
   - Banner/content starts below header (no overlap)
   - Logo, search, nav, hamburger, cart remain accessible
   - No regression on portrait or desktop
   ======================================================================= */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 926px) {

  /* Logo/icons/cart row — proper padding so logo has breathing room */
  #header [data-device=mobile] [data-row=top] {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: unset !important;
  }

  /* Search row — keep visible, reduce padding to save height */
  #header [data-device=mobile] [data-row=middle] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: unset !important;
  }

  /* Override min-height on container children inside both rows */
  #header [data-device=mobile] [data-row=top] .ct-container,
  #header [data-device=mobile] [data-row=top] [data-column],
  #header [data-device=mobile] [data-row=top] [data-items],
  #header [data-device=mobile] [data-row=middle] .ct-container,
  #header [data-device=mobile] [data-row=middle] [data-column],
  #header [data-device=mobile] [data-row=middle] [data-items] {
    min-height: unset !important;
  }

  /* Logo image — slightly larger with proper padding */
  #header [data-device=mobile] .site-logo img,
  #header [data-device=mobile] .ct-image-container img,
  #header [data-device=mobile] [data-id="logo"] img {
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
  }
}

/* Restore L-R padding for RIFLE and other standard mega menus (lost during scroll fix) */
[class*="ct-mega-menu"] > .sub-menu:not(.lead-free-reorganized) > * {
    padding: 32px 24px;
}

/* =========================================================================
   Fix: Off-canvas overlapped by header (86ewuzbwr)
   Root cause 1: Minicart dropdown has z-index:15 < header z-index:1000000
   Root cause 2: PhotoSwipe lightbox has z-index:1500 < header z-index:1000000
   Fix 1: Raise minicart dropdown above header
   Fix 2: Raise PhotoSwipe lightbox above header
   ========================================================================= */

/* Fix 1: Minicart dropdown must render above header */
.ct-cart-content {
  z-index: 1000001 !important;
}

/* Fix 2: PhotoSwipe lightbox (WooCommerce image gallery) must render above header */
.pswp {
  z-index: 1000001 !important;
}

/* Fix 3: Product information offcanvas (Shipping, FAQs, Montana-made, etc.) must render above header */
.ct-information-canvas.offcanvas-overlay,
.ct-information-canvas.offcanvas {
  z-index: 1000001 !important;
}