/* ============================================================
   SIGNAL PACK — GLOBAL HEADER, MEGA MENU, MOBILE NAVIGATION
   ============================================================ */

/* ---------- announcement bar (optional, reusable) ---------- */
.sp-announce{
  background:var(--navy); color:#fff; font-size:12px; font-family:var(--font-display);
  font-weight:600; letter-spacing:0.03em; text-align:center; padding:9px 20px;
}
.sp-announce span{ opacity:0.55; margin:0 10px; }

/* ---------- header ---------- */
.sp-header{ position:sticky; top:0; z-index:var(--z-header); background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow var(--duration-base) var(--ease); }
.sp-header.is-scrolled{ box-shadow:var(--shadow-sm); }

.sp-nav{ display:flex; align-items:center; justify-content:space-between; height:var(--header-height); gap:20px; }
.sp-logo-mark img{ height:48px; width:auto; }
.sp-logo-mark{ flex-shrink:0; }

nav.sp-links{ display:flex; gap:22px; font-size:13.5px; font-weight:600; flex-wrap:nowrap; }
nav.sp-links > a{ position:relative; padding:4px 0; white-space:nowrap; color:var(--navy); }
nav.sp-links > a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red); transition:width .25s var(--ease); }
nav.sp-links > a:hover::after, nav.sp-links > a.is-active::after{ width:100%; }
nav.sp-links > a.is-active{ color:var(--red); }

.sp-has-dropdown{ position:relative; }
.sp-has-dropdown > a{ display:flex; align-items:center; gap:5px; color:var(--navy); }
.sp-has-dropdown > a .sp-caret{ font-size:10px; transition:transform var(--duration-base) var(--ease); }
.sp-has-dropdown:hover > a .sp-caret, .sp-has-dropdown.is-open > a .sp-caret{ transform:rotate(180deg); }

/* ---------- products mega menu ---------- */
.sp-mega{
  position:absolute; top:calc(100% + 20px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:30px 36px 30px; display:grid;
  grid-template-columns:220px 220px 240px; gap:0 48px; opacity:0; visibility:hidden;
  transition:opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
  z-index:var(--z-mega);
}
.sp-has-dropdown:hover .sp-mega,
.sp-has-dropdown.is-open .sp-mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.sp-mega-col h4{ font-family:var(--font-display); font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:0.02em; color:var(--navy); border-bottom:2px solid var(--yellow); padding-bottom:11px; margin-bottom:12px; }
.sp-mega-col a{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink); padding:8px 0; }
.sp-mega-col a .sp-sq{ width:6px; height:6px; background:var(--red); flex-shrink:0; }
.sp-mega-col a:hover{ color:var(--red); }
.sp-mega-col a:hover .sp-sq{ background:var(--navy); }
.sp-mega-col .sp-view-all{ margin-top:8px; font-weight:700; color:var(--navy); }
.sp-mega-promo{ background:var(--grey-bg); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:10px; }
.sp-mega-promo img{ border-radius:var(--radius-sm); height:100px; object-fit:cover; width:100%; }
.sp-mega-promo p{ font-size:12.5px; color:var(--grey-text); line-height:1.5; }
.sp-mega-footer{ grid-column:1/-1; border-top:1px solid var(--line); margin-top:18px; padding-top:16px; }

/* ---------- right-side actions ---------- */
.sp-nav-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.sp-icon-btn{ width:var(--icon-btn-size); height:var(--icon-btn-size); border-radius:var(--radius-circle); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; transition:border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease); }
.sp-icon-btn:hover{ border-color:var(--navy); background:var(--grey-bg); }
.sp-icon-btn svg{ width:var(--icon-size-sm); height:var(--icon-size-sm); stroke:var(--ink); }
.sp-icon-btn .sp-badge{ position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:var(--radius-circle); background:var(--red); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }

.sp-hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; z-index:var(--z-hamburger); }
.sp-hamburger span{ display:block; width:100%; height:2px; background:var(--ink); transition:transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease); }
.sp-hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.sp-hamburger.is-open span:nth-child(2){ opacity:0; }
.sp-hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1180px){
  nav.sp-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:0; position:fixed;
    top:var(--header-height-mobile); left:0; right:0; bottom:0; background:var(--paper);
    padding:14px 24px 120px; transform:translateX(100%); transition:transform var(--duration-slow) var(--ease);
    overflow-y:auto; z-index:var(--z-mobile-nav);
  }
  nav.sp-links.is-open{ transform:translateX(0); }
  nav.sp-links > a, .sp-has-dropdown > a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .sp-has-dropdown{ width:100%; }
  .sp-has-dropdown > a{ display:flex; justify-content:space-between; }
  .sp-mega{
    position:static; transform:none; grid-template-columns:1fr 1fr; box-shadow:none; border:none;
    padding:12px 0 0; opacity:1; visibility:visible; display:none;
  }
  .sp-mega-promo, .sp-mega-footer{ display:none; }
  .sp-has-dropdown.is-open .sp-mega{ display:grid; }
  .sp-hamburger{ display:flex; }
  .sp-nav{ height:var(--header-height-mobile); }
  .sp-nav .sp-request-quote-btn{ display:none; }
}

/* ---------- mobile drawer nav (accordion for Products) ---------- */
.sp-mobile-drawer-section{ border-bottom:1px solid var(--line); }
.sp-mobile-accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; font-size:16px; font-weight:600; color:var(--ink); text-align:left;
}
.sp-mobile-accordion-trigger .sp-caret{ transition:transform var(--duration-base) var(--ease); }
.sp-mobile-accordion-trigger[aria-expanded="true"] .sp-caret{ transform:rotate(180deg); }
.sp-mobile-accordion-panel{ display:none; padding-bottom:12px; }
.sp-mobile-accordion-panel.is-open{ display:block; }
.sp-mobile-accordion-panel h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--navy); margin:12px 0 8px; }
.sp-mobile-accordion-panel a{ display:block; padding:8px 0 8px 8px; font-size:14.5px; color:var(--ink); }