/* ============================================================
   Benefit — Mobile Responsiveness
   !important is required throughout to override inline styles.
   ============================================================ */

/* ---- Hamburger button (injected by main.js) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px 4px;
  background: none;
  border: none;
  color: inherit;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #18140f;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.dark-hero .nav-toggle span { background: #f1ece1; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile nav drawer (injected by main.js) ---- */
.nav-drawer {
  display: none;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  padding: 32px 28px 48px;
  flex-direction: column;
  overflow-y: auto;
  background: rgba(241, 236, 225, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dark-hero .nav-drawer {
  background: rgba(22, 17, 10, 0.98);
}
.nav-drawer.open { display: flex; }

.nav-drawer-link {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #18140f;
  text-decoration: none;
  padding: 20px 0;
  border-bottom: 1px solid rgba(24, 20, 15, .1);
  display: block;
  transition: color .2s;
}
.dark-hero .nav-drawer-link {
  color: #f1ece1;
  border-bottom-color: rgba(255, 255, 255, .1);
}
.nav-drawer-link:hover,
.nav-drawer-link.active { color: #f7b500 !important; }

.nav-drawer-cta {
  display: block;
  margin-top: 28px;
  text-align: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #18140f;
  background: #f7b500;
  padding: 17px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background .25s;
}
.nav-drawer-cta:hover { background: #fff; }

/* ============================================================
   768px — Tablet / Mobile
   ============================================================ */
@media (max-width: 768px) {

  /* Nav */
  .nav-desktop { display: none !important; }
  .nav-toggle  { display: flex; }

  /* ---- Grid layouts → single column ---- */
  .g-hero        { grid-template-columns: 1fr !important; min-height: auto !important; }
  .g-two         { grid-template-columns: 1fr !important; }
  .g-cards       { grid-template-columns: 1fr !important; }
  .g-gauge       { grid-template-columns: 1fr !important; }
  .g-about-head  { grid-template-columns: 1fr !important; align-items: start !important; }
  .g-contact     { grid-template-columns: 1fr !important; }

  /* 4-col → 2-col on tablet */
  .g-four  { grid-template-columns: 1fr 1fr !important; }

  /* 5-col stats → 2-col wrap */
  .g-stats { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .g-stats > div { border-left: none !important; }

  /* Hide hero image panel */
  .hero-img-panel { display: none !important; }

  /* Hero text: remove excess bottom padding */
  .hero-text { padding-bottom: 60px !important; }

  /* Datasheet: collapse to 2-col, hide the right tag column */
  .ds-table > div {
    grid-template-columns: 1fr 1.6fr !important;
  }
  .ds-table > div > span:last-child { display: none !important; }

  /* Reduce section horizontal padding */
  .sec { padding-left: 20px !important; padding-right: 20px !important; }

  /* Contact form on contact.html: stack vertically */
  .g-contact-page { grid-template-columns: 1fr !important; }

  /* Footer: ensure proper stacking */
  .footer-inner {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* About CTA flex: stack */
  .g-cta { flex-direction: column !important; align-items: flex-start !important; }
  .g-cta h2 { font-size: clamp(34px, 9vw, 58px) !important; }

  /* Datasheet header row: fix wrapping */
  .ds-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ============================================================
   480px — Small phones
   ============================================================ */
@media (max-width: 480px) {

  /* 4-col → full single column */
  .g-four { grid-template-columns: 1fr !important; }

  /* Further padding reduction */
  .sec { padding-left: 16px !important; padding-right: 16px !important; }

  /* Nav drawer offset */
  .nav-drawer { top: 58px; }

  /* Hero H1 */
  .g-hero h1 { font-size: clamp(40px, 12vw, 60px) !important; }

  /* Gauge 22G card: full width */
  .g-gauge > div:last-child { min-width: unset !important; }

  /* Stats: keep 2-col but shrink numbers */
  .g-stats > div > div:first-child {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
}