/* ============================================================
   Packagly — header.css  (split from style.css)
   Depends on: common.css (variables, reset, icon helpers)
   Responsive @media rules live in responsive.css
   ============================================================ */

/* sticky wrapper holding the top bar + navbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ============================================================
   TOP BAR
============================================================ */
.topbar {
  background: var(--bg-black);
  color: var(--white);
  font-size: 13px;
  position: relative;
  z-index: 90;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.topbar-inner {
  min-height: 44px;
  padding: 6px 0;
  gap: 18px;
  flex-wrap: nowrap;
}

.topbar-shipping {
  color: var(--green);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar-link {
  color: #fff;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 500;
  font-size: 13.5px;
  transition: color 0.2s ease;
}
.topbar-link:hover {
  color: var(--green);
}
.topbar-link span {
  color: inherit;
}

.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.25);
}

.topbar-socials {
  list-style: none;
}
/* social SVGs are black by default -> make them white on the black bar */
.topbar-socials .icon {
  filter: brightness(0) invert(1);
}
.topbar-socials li a {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  border-radius: 6px;
  transition: all 0.2s ease;
}
.topbar-socials li a:hover {
  color: var(--green);
  transform: translateY(-1px);
}

/* responsive */

/* ============================================================
   MAIN HEADER (transparent, sits over hero)
============================================================ */
.main-header {
  position: relative;
  z-index: 10;
  /* no solid colour — frosted glass that reveals the banner behind it */
  background: rgba(6, 18, 10, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* ===== scrolled state: navbar turns solid white, text/icons go dark ===== */
.site-header.is-scrolled .main-header {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
/* only TOP-LEVEL links go dark on the white bar — NOT submenu links
   (submenu sits on a dark panel, so dark text would vanish there) */
.site-header.is-scrolled .menu-link,
.site-header.is-scrolled .main-menu > li > a {
  color: #14201a;
}
.site-header.is-scrolled .main-menu > li.is-active > a,
.site-header.is-scrolled .main-menu > li > a:hover,
.site-header.is-scrolled .main-menu > li.has-dropdown:hover > a {
  color: var(--green);
}
.site-header.is-scrolled .main-menu > li > a:hover,
.site-header.is-scrolled .main-menu > li.has-dropdown:hover > a {
  background: rgba(112, 174, 19, 0.12);
}
/* keep the dropdown items light & readable while the bar is white */
.site-header.is-scrolled .submenu a {
  color: rgba(255, 255, 255, 0.85);
}
.site-header.is-scrolled .submenu a:hover {
  color: var(--green);
}
.site-header.is-scrolled .main-menu > li > a .chev {
  filter: none; /* black chevrons on the white bar (top level only) */
}
.site-header.is-scrolled .icon-btn .icon {
  filter: none; /* black search / cart icons */
}
.site-header.is-scrolled .icon-btn:hover .icon {
  filter: brightness(0) saturate(100%) invert(56%) sepia(63%) saturate(508%)
    hue-rotate(40deg) brightness(94%) contrast(89%);
}
.site-header.is-scrolled .nav-toggle .icon {
  filter: none; /* dark hamburger on white */
}
.site-header.is-scrolled .brand-logo img {
  filter: brightness(0); /* white logo would vanish on white — make it dark */
}

/* ===== search panel (drops under the navbar) ===== */
.search-bar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(6, 18, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  padding: 14px 0;
  z-index: 60;
}
.search-bar[hidden] {
  display: none;
}
.search-form {
  width: 100%;
}
.search-form-ico {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 15px;
  outline: none;
}
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.search-input:focus {
  border-color: var(--green);
}
.search-submit {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px 22px;
  white-space: nowrap;
}
.search-close {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.search-close .icon {
  filter: brightness(0) invert(1);
}
.main-header-inner {
  min-height: 84px;
  gap: 18px;
  padding: 14px 0;
}

.brand-logo {
  display: inline-block;
}
.brand-logo img {
  height: 42px;
  width: auto;
  transition: filter 0.3s ease;
}

/* hamburger / close */
.nav-toggle,
.nav-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  background: transparent;
  transition: background 0.2s ease;
}
.nav-toggle:hover,
.nav-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* header right actions */
.header-actions {
  margin-left: auto;
}
.icon-btn {
  width: 40px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* no circle / box behind the icon, per design */
  color: #fff;
  position: relative;
  transition: transform 0.2s ease;
}
.icon-btn:hover {
  transform: translateY(-1px);
}
/* search & cart (and the mobile toggles) ship as black SVGs — render them white */
.icon-btn .icon,
.nav-toggle .icon,
.nav-close .icon {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}
/* SVGs are <img>, so recolour via filter on hover for feedback */
.icon-btn:hover .icon {
  filter: brightness(0) saturate(100%) invert(56%) sepia(63%) saturate(508%)
    hue-rotate(40deg) brightness(94%) contrast(89%);
}
.icon-btn-cart .cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  background: var(--green);
  color: #06140a;
  font-size: 10px;
  font-weight: 800;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid var(--bg-hero-2);
}
.icon-btn-cart .cart-badge[hidden] {
  display: none;
}

/* GET QUOTE button (header) */
.btn-quote {
  background: var(--green);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(112, 174, 19, 0.35);
}
.btn-quote:hover {
  background: var(--green-deep);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(112, 174, 19, 0.45);
}

/* ============================================================
   PRIMARY NAV (desktop)
============================================================ */
.primary-nav {
  display: flex;
  align-items: center;
}

.main-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.main-menu > li {
  position: relative;
}

.menu-link,
.main-menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  border-radius: 6px;
  transition:
    color 0.25s ease,
    background 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  position: relative;
}

/* active link underline */
.main-menu > li.is-active > a,
.main-menu > li > a:hover,
.main-menu > li.has-dropdown:hover > a {
  color: var(--green);
}
/* visible hover pill on the transparent/dark bar */
.main-menu > li > a:hover,
.main-menu > li.has-dropdown:hover > a {
  background: rgba(255, 255, 255, 0.1);
}
.main-menu > li.is-active > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

.main-menu .chev {
  filter: invert(100%);
  transition:
    transform 0.25s ease,
    filter 0.3s ease;
  opacity: 0.8;
}
.main-menu > li.has-dropdown:hover > a .chev {
  transform: rotate(180deg);
}

/* ===== SUBMENU ===== */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: #0f2618;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  z-index: 50;
  border: 1px solid rgba(112, 174, 19, 0.18);
  list-style: none;
}
.submenu .submenu {
  top: -9px;
  left: 100%;
}
.submenu li {
  position: relative;
}
.submenu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 500;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.submenu li a {
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.submenu li a:hover {
  background: rgba(112, 174, 19, 0.22);
  color: var(--green);
}
.submenu .chev-right {
  transform: rotate(-90deg);
  margin-left: 8px;
  opacity: 0.6;
}


/* ============================================================
   MOBILE NAV
============================================================ */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  /* Must sit BELOW the header (z:1000) because the mobile nav drawer lives
     inside .site-header's stacking context. A higher value (e.g. 1090) put
     the backdrop on top of the drawer and swallowed every tap on the menu. */
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}
.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}



body.nav-locked {
  overflow: hidden;
}