/*************************************************
 ELK RIVER GUNS — HEADER + MEGA
 Steel/Range theme | ERG2 system
**************************************************/

/* =================================================
   LAYERING (keep predictable)
   header: 9990
   mega panels: 9980 (under header, above page)
   mobile overlay: 99999
   mobile panel: 100000
================================================= */

/* ==============================================
   HEADER WRAP
============================================== */
.erg2-header-wrap{
  position: sticky;
  top: 0;
  z-index: 9990;

  background: radial-gradient(circle at top,#161922 0,#040507 45%,#020304 100%);
  border-bottom: 1px solid rgba(255,255,255,.03);
  box-shadow: 0 10px 25px rgba(0,0,0,.75);

  transition: box-shadow .18s ease, background .18s ease;
}

.erg2-header{
  position: relative;
  z-index: 120;
  /* Taller at the top of the page */
  padding: 12px 32px 4px;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    padding .2s var(--erg2-ease-out),
    box-shadow .2s var(--erg2-ease-out),
    transform .2s var(--erg2-ease-out);
}


/* Elementor containers inside header should not create extra spacing */
.erg2-header-wrap,
.erg2-header .elementor-container,
.erg2-header .elementor-row,
.erg2-header .e-con{
  padding: 0 !important;
  margin: 0 !important;
}

/* ==============================================
   HEADER — TOP ROW
============================================== */
.erg2-header__top{
  display: grid;
  grid-template-columns: .3fr .5fr .2fr;
  align-items: center;
  column-gap: 20px;
}

.erg2-header__logo{
  display: flex;
  align-items: center;
}

.erg2-header__logo img{
  max-height: 52px;
  width: auto;
  transition: max-height .18s ease, transform .18s ease;
}

.erg2-header__center{
  display: flex;
  align-items: center;
  gap: 10px;
}

.erg2-header__center .elementor-widget-ajax-search{
  flex: 1 1 auto;
}

.erg2-header__center input[type="search"],
.erg2-header__center input[type="text"]{
  width: 100%;
  height: 40px;
  border-radius: var(--erg2-radius-pill);
  background: #f8f8f8;
  border: none;
  padding: 0 16px;
  font-size: 14px;
}

/* Right controls */
.erg2-header__right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Cart toggle */
.erg2-header__right .elementor-menu-cart__toggle{
  border-radius: var(--erg2-radius-pill);
  background: radial-gradient(circle at top,#202633 0,#080a0d 60%,#020304 100%);
  padding: 6px 16px 6px 10px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.9);
  color: var(--erg2-text-main);
}

.erg2-header__right .elementor-menu-cart__toggle .elementor-button{
  background: transparent;
  border: none;
  box-shadow: none;
}

.erg2-header__right .elementor-menu-cart__counter{
  background: var(--erg2-accent-red);
  color: #fff;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 4px;
}

/* ==============================================
   HEADER — BOTTOM ROW (MAIN NAV)
============================================== */
.erg2-header__bottom{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 2px;
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Desktop-only: keep nav horizontal (avoid breaking mobile drawer) */
@media (min-width: 1025px){
  .erg2-main-nav .elementor-nav-menu{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

.erg2-main-nav .elementor-nav-menu > li{ display: block; }

.erg2-main-nav .elementor-nav-menu > li > a{
  font-family: "Oswald", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--erg2-text-muted);
  padding: 4px 0;
  white-space: nowrap;
}

.erg2-main-nav .elementor-nav-menu > li.current-menu-item > a,
.erg2-main-nav .elementor-nav-menu > li > a:hover{
  color: var(--erg2-text-main);
}

/* ==============================================
   MEGA MENUS (Shop / In-Store)
============================================== */
.erg2-mega{
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(14px);

  width: min(1240px, calc(100vw - 32px));
  background: radial-gradient(circle at top, #141823 0, #050609 55%, #020304 100%);
  color: var(--erg2-text-main);

  border-radius: var(--erg2-radius-lg);
  box-shadow: var(--erg2-shadow-soft);
  padding: 28px 40px 32px;

  display: block;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .16s ease-out, visibility .16s ease-out, transform .16s ease-out;
  z-index: 9980;
}

/* Hide megas on tablet/mobile (drawer handles nav there) */
@media (max-width: 1024px){
  .erg2-mega{ display: none !important; }
}

/* Grid wrapper INSIDE the panel */
.erg2-mega__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 22px;
  align-items: flex-start;
}

.erg2-mega__col{ min-width: 0; }

.erg2-mega__heading{
  font-family: "Oswald", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.erg2-mega__divider{
  height: 1px;
  width: 80%;
  max-width: 220px;
  background: rgba(255,255,255,.11);
  margin-bottom: 14px;
}

.erg2-mega__list{
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.erg2-mega__list li + li{ margin-top: 6px; }

.erg2-mega__list a{
  color: var(--erg2-text-muted);
  text-decoration: none;
}

.erg2-mega__list a:hover{ color: var(--erg2-text-main); }

/* Promo block (optional) */
.erg2-mega__promo{
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 12px;

  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);

  text-decoration: none;
  color: var(--erg2-text-main);
}

.erg2-mega__promo-fig img{
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}

.erg2-mega__promo-text{ display: grid; gap: 6px; }

.erg2-mega__promo-text strong{
  font-family: "Oswald", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

.erg2-mega__promo-text span{
  font-size: 12px;
  color: var(--erg2-text-muted);
}

/* ==============================================
   MEGA OPEN STATES (hover + keyboard)
   Requires nav li classes: .menu-item--shop / .menu-item--instore
============================================== */

/* SHOP mega */
.erg2-main-nav:has(.menu-item--shop:hover) ~ .erg2-mega--shop,
.erg2-main-nav:has(.menu-item--shop:focus-within) ~ .erg2-mega--shop,
.erg2-mega--shop:hover,
.erg2-mega--shop:focus-within{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
}

/* IN-STORE mega */
.erg2-main-nav:has(.menu-item--instore:hover) ~ .erg2-mega--instore,
.erg2-main-nav:has(.menu-item--instore:focus-within) ~ .erg2-mega--instore,
.erg2-mega--instore:hover,
.erg2-mega--instore:focus-within{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
}

/* ==============================================
   RESPONSIVE TUNING (header padding + mega spacing)
============================================== */
@media (max-width: 1024px){
  .erg2-header{ padding: 6px 20px 2px; }
  .erg2-main-nav .elementor-nav-menu{ gap: 20px; }
}

@media (max-width: 767px){
  /* Slightly tighter overall header stack on mobile */
  .erg2-header{
    padding: 10px 16px 6px;
    gap: 8px;
  }

  /* Two-row mobile layout for the top bar */
  .erg2-header__top{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo controls"
      "search search";
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }

  /* Place logo in top-left */
  .erg2-header__logo{
    grid-area: logo;
    justify-self: flex-start;
  }

  /* Search + category full-width underneath */
  .erg2-header__center{
    grid-area: search;
    width: 100%;
  }
  .erg2-header__center > .elementor-widget-wrap{
    width: 100%;
  }
  .erg2-header__center .elementor-widget-ajax-search{
    flex: 1 1 auto;
  }

  /* Cart / price pill / whatever is on the right */
  .erg2-header__right{
    grid-area: controls;
    justify-self: flex-end;
  }
}


/* ==============================================
   SHRINK-ON-SCROLL (driven by /erg-assets/80-header.js)
============================================== */
.erg2-header-wrap.is-at-top{
  box-shadow: none;
}

.erg2-header-wrap.is-scrolled{
  box-shadow: 0 14px 40px rgba(0,0,0,.85);
}

.erg2-header-wrap.is-scrolled .erg2-header{
  /* Smaller than the base state above */
  padding: 4px 28px 0;
  box-shadow: 0 14px 40px rgba(0,0,0,.85);
  transform: translateY(0);
}


.erg2-header-wrap.is-scrolled .erg2-header__logo img{
  max-height: 40px;
  transform: translateY(-1px);
}

/* ==============================================
   JETBLOCKS MOBILE DRAWER (overlay + right panel)
   Scoped to .erg2-main-nav to avoid collateral
============================================== */
.erg2-main-nav{
  position: relative;
  z-index: 9995;
}

@media (max-width: 1024px){

  /* Backdrop */
  .erg2-main-nav .jet-nav__mobile-overlay,
  .erg2-main-nav .jet-nav__overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.72) !important;
    z-index: 99999 !important;
  }

  /* Right panel */
  .erg2-main-nav .jet-nav__mobile-panel,
  .erg2-main-nav .jet-nav__mobile-container,
  .erg2-main-nav .jet-nav__mobile-wrap{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;

    width: min(86vw, 380px) !important;
    max-width: 380px !important;

    background: var(--erg2-bg-panel, #050609) !important;
    color: var(--erg2-text-main, #f2f2f2) !important;

    box-shadow: 0 22px 70px rgba(0,0,0,.85) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    z-index: 100000 !important;
  }

  /* Trigger + close icon colors */
  .erg2-main-nav .jet-nav__mobile-trigger,
  .erg2-main-nav .jet-nav__mobile-trigger-icon,
  .erg2-main-nav .jet-nav__mobile-close,
  .erg2-main-nav .jet-nav__mobile-close-icon{
    color: var(--erg2-text-main, #f2f2f2);
  }

  /* Close stays reachable */
  .erg2-main-nav .jet-nav__mobile-close{
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    padding: 14px 14px 6px;
    background: inherit;
    z-index: 1;
  }

  /* Tap targets */
  .erg2-main-nav .jet-nav__mobile-wrap .menu-item > a,
  .erg2-main-nav .jet-nav__mobile-panel .menu-item > a{
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    color: var(--erg2-text-main, #f2f2f2);
    text-decoration: none;
  }

  .erg2-main-nav .jet-nav__mobile-wrap .menu-item > a:hover,
  .erg2-main-nav .jet-nav__mobile-panel .menu-item > a:hover{
    color: var(--erg2-text-main, #fff);
  }

  /* Body lock */
  body.jet-nav-mobile-active,
  body.jet-nav--mobile-active{
    overflow: hidden;
  }
}
/* ==============================================
   HEADER SHRINK TUNING
   (override base + .is-scrolled behavior)
============================================== */

/* Default: slightly taller, more breathing room */
.erg2-header {
  padding: 14px 32px 8px;
}

.erg2-header__logo img {
  max-height: 60px;
}

/* On scroll: tighten padding + logo size */
.erg2-header-wrap.is-scrolled .erg2-header {
  padding: 6px 24px 2px;
}

.erg2-header-wrap.is-scrolled .erg2-header__logo img {
  max-height: 42px;
  transform: translateY(-1px);
}

/* Tablet / mobile: keep things compact */
@media (max-width: 1024px) {
  .erg2-header {
    padding: 10px 20px 4px;
  }
}

@media (max-width: 767px) {
  .erg2-header {
    padding: 8px 16px 4px;
  }

  .erg2-header__top {
    row-gap: 6px;
  }

  .erg2-header__center input[type="search"],
  .erg2-header__center input[type="text"] {
    height: 36px;
    font-size: 13px;
  }

  /* Tighten the row with the mobile trigger a bit */
  .erg2-main-nav {
    padding: 4px 0 6px;
  }
}