:root{
  --brand-navy:#0f2147;
  --hero-bg:/assets/images/hero/store_front_guntersville_35976.webp;
}

/* ========================================
   HERO SECTION – final LCP optimization
======================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: #0f2147 url('/assets/images/hero/store_front_guntersville_35976.webp')
              center/cover no-repeat;
  will-change: transform, opacity;
  contain: paint layout style;
  transform: translateZ(0);
}

/* Separate gradient overlay for parallel GPU compositing */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,33,71,0.92) 0%, rgba(15,33,71,0.88) 100%);
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
}

/* Hero text sits above both layers */
.hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(60px, 12vw, 120px) 20px;
}

.hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  margin: 0 0 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero p {
  font-size: clamp(16px, 2vw, 20px);
  max-width: 800px;
  margin: 12px auto 22px;
  color: #e6ecff;
}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;
  font-weight:700;text-decoration:none;transition:background .2s ease;}
.btn-primary{background:#a11222;color:#fff;}
.btn-primary:hover{background:#c91529;}
.btn-secondary{border:1px solid #fff;color:#fff;}
.btn-secondary:hover{background:rgba(255,255,255,.15);}

/* ========================================
   MOBILE NAV — site-wide
   CSS owns all positioning.
   JS only toggles .active class + scroll lock.
======================================== */
@media (max-width: 768px) {
  #mainNav.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
  #mainNav.active > a,
  #mainNav.active .dropdown {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
  }
  #mainNav.active .dropdown-menu {
    position: static;
    box-shadow: none;
    background: #f9f9f9;
    margin: 0;
    display: block;
    padding: 0;
  }
  #mainNav.active .dropdown-menu a {
    display: block;
    padding: 12px 20px 12px 35px;
  }
  #mainNav.active .dropdown::before {
    display: none;
  }
}