/* ==========================================================================
   Mega Menu Header — UAT prototype
   Scoped entirely under .site-header so it cannot leak into / clash with
   the existing .main-header styles used by global-header.html.
   ========================================================================== */

/* style.css gives the homepage's hero carousel a 85px top margin to clear
   the OLD header's nav bar, which used position:absolute and so reserved
   no space for itself in normal flow. Our header is fully in-flow, so that
   margin is now just a dead gap between the header and the carousel. Reset
   it here (rather than in style.css, which other legacy pages may still
   depend on) — mega-menu.css loads after style.css, so this wins the tie. */
#minimal-bootstrap-carousel {
  margin-top: 0;
}

.site-header {
  --smh-primary: #0188d1;
  --smh-primary-dark: #016fa9;
  --smh-text: #1f2a33;
  --smh-muted: #667380;
  --smh-border: #e6e9ec;
  --smh-bg: #ffffff;
  --smh-panel-bg: #ffffff;
  --smh-shadow: 0 12px 32px rgba(16, 30, 41, 0.12);
  --smh-radius: 8px;
  --smh-bar-height: 84px;
  --smh-tab-active-bg: #f0f7fc;
  --smh-topbar-bg: #1f2a33;
  font-family: "Poppins", Arial, sans-serif;
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--smh-bg);
  border-bottom: 1px solid var(--smh-border);
  box-shadow: 0 2px 10px rgba(16, 30, 41, 0.06);
}

.site-header * {
  box-sizing: border-box;
}

.site-header a {
    text-decoration: none;
    color: var(--smh-text);
}
a.site-header__topbar-link span {
    color: white !important;
}
.site-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
svg.site-header__topbar-icon {
    color: white;
}
/* Skip link ---------------------------------------------------------- */
.site-header__skip {
  position: absolute;
  left: 1rem;
  top: 0;
  background: var(--smh-primary);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 6px;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
  z-index: 1100;
}
.site-header__skip:focus {
  transform: translateY(0);
}

/* Top utility bar — phone / email --------------------------------------- */
.site-header__topbar {
  background: var(--smh-topbar-bg);
}
.site-header__topbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}
.site-header__topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.site-header__topbar-link:hover,
.site-header__topbar-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.site-header__topbar-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}
@media (max-width: 767.98px) {
  .site-header__topbar {
    display: none;
  }
}

/* Bar ------------------------------------------------------------------ */
.site-header__bar {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--smh-bar-height);
}

.site-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.site-header__logo img {
  max-height: 56px;
  width: auto;
  display: block;
}

/* CTA + toggle live on the right on desktop */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--smh-primary);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
  background: var(--smh-primary-dark);
  transform: translateY(-1px);
}

/* Hamburger -------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--smh-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--smh-text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar--top {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar--mid {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar--bottom {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 32, 0.45);
  z-index: 998;
}
.nav-scrim.is-visible {
  display: block;
}

/* ==========================================================================
   Primary nav — desktop
   ========================================================================== */
.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.primary-nav__item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.primary-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--smh-bar-height);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--smh-text);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.primary-nav__link::-webkit-details-marker {
  display: none;
}
/* "Pipes & Tubes" nests a real <a> inside its <summary>, so the label text
   links straight to the category page while the chevron still just toggles
   the mega panel open/closed (the link stops click propagation so it doesn't
   also trigger the summary's native toggle). .site-header a otherwise gives
   that nested <a> its own fixed color, so without this override it wouldn't
   pick up the hover / current-page color changes below — inherit ties it
   back to whatever color .primary-nav__link (its <summary> parent) is. */
.primary-nav__link > a {
  color: inherit;
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible {
  color: var(--smh-primary);
}

.primary-nav__item--current > .primary-nav__link {
  color: var(--smh-primary);
  border-bottom-color: var(--smh-primary);
}

.chevron {
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.nav-dropdown[open] > .primary-nav__link .chevron {
  transform: rotate(180deg);
}
.nav-dropdown[open] > .primary-nav__link {
  color: var(--smh-primary);
}

/* Reset native <details> marker on the summary */
summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  content: "";
}

/* Dropdown panels ---------------------------------------------------- */
.nav-dropdown__panel {
  background: var(--smh-panel-bg);
  border: 1px solid var(--smh-border);
  border-radius: var(--smh-radius);
  box-shadow: var(--smh-shadow);
}

.nav-dropdown__panel--simple {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  z-index: 20;
}

.nav-dropdown__simple-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-dropdown__simple-list li + li {
  margin-top: 2px;
}
.nav-dropdown__simple-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--smh-text);
}
.nav-dropdown__simple-list a:hover,
.nav-dropdown__simple-list a:focus-visible {
  background: #f0f7fc;
  color: var(--smh-primary);
}

/* Mega panels anchor to the header bar itself (not the triggering link) so
   they can never run past the right edge of the viewport regardless of
   which nav item opened them. */
.primary-nav__item--mega {
  position: static;
}
.nav-dropdown__panel--mega {
  position: absolute;
  top: var(--smh-bar-height);
  left: 0;
  right: 0;
  max-width: 1100px;
  max-height: min(52vh, 440px);
  overflow-y: auto;
  padding: 20px;
  z-index: 20;
}

/* ==========================================================================
   Tab-style mega content — left sidebar of categories, right grid of the
   active category's links. Pure CSS (hidden radios + labels): the Nth
   radio, when checked, reveals the Nth panel and highlights the Nth label.
   Works with zero JS; the first tab is checked by default so a no-JS
   visitor still sees real content and every link in the DOM.
   ========================================================================== */
.nav-tabs {
  display: flex;
  min-height: 0;
}
.nav-tabs__body {
  display: flex;
  width: 100%;
  min-height: 0;
  gap: 20px;
}

.nav-tabs__sidebar {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--smh-border);
  padding-right: 16px;
  max-height: min(44vh, 380px);
  overflow-y: auto;
}
.nav-tabs__label {
  display: block;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--smh-text);
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
}
.nav-tabs__label:hover,
.nav-tabs__label:focus-visible,
.nav-tabs__label.is-active {
  background: var(--smh-tab-active-bg);
  color: var(--smh-primary);
  border-left-color: var(--smh-primary);
}
.nav-tabs__label:focus-visible {
  outline: 2px solid var(--smh-primary);
  outline-offset: -2px;
}

.nav-tabs__content {
  flex: 1;
  min-width: 0;
  max-height: min(44vh, 380px);
  overflow-y: auto;
  padding-right: 4px;
}
.nav-tabs__panel {
  display: none;
}
.nav-tabs__links {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 200px;
  column-gap: 24px;
}
.nav-tabs__links li {
  break-inside: avoid;
  border-bottom: 1px solid var(--smh-border);
}
.nav-tabs__links a {
  display: block;
  padding: 12px 0;
  font-size: 13px;
  color: var(--smh-muted);
  line-height: 1.4;
}
.nav-tabs__links a::before {
  content: "•";
  color: var(--smh-muted);
  font-size: 11px;
  margin-right: 8px;
}
.nav-tabs__links a:hover,
.nav-tabs__links a:focus-visible {
  color: var(--smh-primary);
  text-decoration: underline;
}

/* Hovering (or keyboard-focusing) a category name previews its links on the
   right — clicking the name itself navigates there directly, since it's a
   real link. Pure CSS via :has(); the first tab's content shows by default
   so the panel is never empty before the user interacts with it. Reused
   generically by every .nav-tabs instance regardless of tab count. */
.nav-tabs__panel:first-of-type { display: block; }
.nav-tabs__body:has(.nav-tabs__label:hover) .nav-tabs__panel:first-of-type,
.nav-tabs__body:has(.nav-tabs__label:focus-visible) .nav-tabs__panel:first-of-type {
  display: none;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(1):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(1),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(1):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(1) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(2):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(2),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(2):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(2) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(3):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(3),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(3):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(3) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(4):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(4),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(4):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(4) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(5):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(5),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(5):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(5) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(6):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(6),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(6):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(6) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(7):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(7),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(7):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(7) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(8):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(8),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(8):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(8) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(9):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(9),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(9):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(9) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(10):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(10),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(10):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(10) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(11):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(11),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(11):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(11) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(12):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(12),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(12):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(12) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(13):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(13),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(13):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(13) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(14):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(14),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(14):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(14) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(15):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(15),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(15):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(15) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(16):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(16),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(16):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(16) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(17):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(17),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(17):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(17) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(18):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(18),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(18):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(18) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(19):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(19),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(19):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(19) {
  display: block;
}
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(20):hover) .nav-tabs__content .nav-tabs__panel:nth-of-type(20),
.nav-tabs__body:has(.nav-tabs__label:nth-of-type(20):focus-visible) .nav-tabs__content .nav-tabs__panel:nth-of-type(20) {
  display: block;
}

/* JS-driven "sticky" active tab (see mega-menu.js setupMegaTabs). The :has()
   rules above only hold a panel open while the pointer is literally on top
   of its label, so crossing the gap between the sidebar and the content
   grid drops back to the default first tab mid-hover. JS tracks the last
   entered label and toggles .is-active, which — being later in source order
   at equal specificity — wins over the :has() rules and the default
   first-of-type panel, keeping the right panel open while the pointer
   travels to it and while it's over the content grid itself. */
.nav-tabs__body.js-tabs .nav-tabs__panel {
  display: none;
}
.nav-tabs__body.js-tabs .nav-tabs__panel.is-active {
  display: block;
}

/* ==========================================================================
   Responsive — collapse to an off-canvas drawer below 992px
   ========================================================================== */
@media (max-width: 991.98px) {
  .site-header__bar {
    padding: 0 16px;
  }
  .site-header__inner {
    min-height: 64px;
    gap: 12px;
  }
  .site-header__logo img {
    max-height: 42px;
  }
  .site-header__cta {
    padding: 9px 14px;
    font-size: 13px;
  }
  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(360px, 88vw);
    background: var(--smh-bg);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 999;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(16, 30, 41, 0.18);
  }
  .primary-nav.is-open {
    transform: translateX(0);
  }

  .primary-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--smh-border);
  }
  .primary-nav__header img {
    max-height: 36px;
  }
  .primary-nav__close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--smh-border);
    background: #fff;
    color: var(--smh-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 8px 24px;
    gap: 0;
  }
  .primary-nav__item {
    display: block;
  }
  .primary-nav__link {
    height: auto;
    padding: 14px 10px;
    border-bottom: 1px solid var(--smh-border);
    justify-content: space-between;
  }
  .primary-nav__item--current > .primary-nav__link {
    border-bottom: 1px solid var(--smh-border);
  }

  /* Panels become static, full-width, stacked content instead of floating */
  .nav-dropdown__panel--simple,
  .nav-dropdown__panel--mega {
    position: static;
    width: auto;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 10px 12px 18px;
  }

  /* Each category's panel renders as an accordion body right under its own
     label, instead of the whole label list stacking above the whole panel
     list (which put every active panel after the LAST label, no matter
     which one was tapped — see setupMegaTabs in mega-menu.js for how a tap
     picks the panel). display:contents unwraps the sidebar/content boxes
     so labels and panels become direct flex children of .nav-tabs__body in
     original DOM order; explicit `order` per nth-of-type then interleaves
     each panel right after its label. The DOM itself is untouched, so the
     desktop :has()/:nth-of-type hover rules above keep matching exactly as
     before — this whole block only takes effect below 992px. */
  .nav-tabs__body {
    flex-direction: column;
    gap: 0;
  }
  .nav-tabs__sidebar,
  .nav-tabs__content {
    display: contents;
  }
  .nav-tabs__label:nth-of-type(1) { order: 1; }
  .nav-tabs__panel:nth-of-type(1) { order: 2; }
  .nav-tabs__label:nth-of-type(2) { order: 3; }
  .nav-tabs__panel:nth-of-type(2) { order: 4; }
  .nav-tabs__label:nth-of-type(3) { order: 5; }
  .nav-tabs__panel:nth-of-type(3) { order: 6; }
  .nav-tabs__label:nth-of-type(4) { order: 7; }
  .nav-tabs__panel:nth-of-type(4) { order: 8; }
  .nav-tabs__label:nth-of-type(5) { order: 9; }
  .nav-tabs__panel:nth-of-type(5) { order: 10; }
  .nav-tabs__label:nth-of-type(6) { order: 11; }
  .nav-tabs__panel:nth-of-type(6) { order: 12; }
  .nav-tabs__label:nth-of-type(7) { order: 13; }
  .nav-tabs__panel:nth-of-type(7) { order: 14; }
  .nav-tabs__label:nth-of-type(8) { order: 15; }
  .nav-tabs__panel:nth-of-type(8) { order: 16; }
  .nav-tabs__label:nth-of-type(9) { order: 17; }
  .nav-tabs__panel:nth-of-type(9) { order: 18; }
  .nav-tabs__label:nth-of-type(10) { order: 19; }
  .nav-tabs__panel:nth-of-type(10) { order: 20; }
  .nav-tabs__label:nth-of-type(11) { order: 21; }
  .nav-tabs__panel:nth-of-type(11) { order: 22; }
  .nav-tabs__label:nth-of-type(12) { order: 23; }
  .nav-tabs__panel:nth-of-type(12) { order: 24; }
  .nav-tabs__label:nth-of-type(13) { order: 25; }
  .nav-tabs__panel:nth-of-type(13) { order: 26; }
  .nav-tabs__label:nth-of-type(14) { order: 27; }
  .nav-tabs__panel:nth-of-type(14) { order: 28; }
  .nav-tabs__label:nth-of-type(15) { order: 29; }
  .nav-tabs__panel:nth-of-type(15) { order: 30; }
  .nav-tabs__label:nth-of-type(16) { order: 31; }
  .nav-tabs__panel:nth-of-type(16) { order: 32; }
  .nav-tabs__label:nth-of-type(17) { order: 33; }
  .nav-tabs__panel:nth-of-type(17) { order: 34; }
  .nav-tabs__label:nth-of-type(18) { order: 35; }
  .nav-tabs__panel:nth-of-type(18) { order: 36; }
  .nav-tabs__label:nth-of-type(19) { order: 37; }
  .nav-tabs__panel:nth-of-type(19) { order: 38; }
  .nav-tabs__label:nth-of-type(20) { order: 39; }
  .nav-tabs__panel:nth-of-type(20) { order: 40; }
  .nav-tabs__panel {
    padding: 8px 0 12px;
  }
  .nav-tabs__links {
    columns: 1;
  }

  /* Tapping a category label previews its grade links below it instead of
     navigating straight away (see setupMegaTabs in mega-menu.js) — this
     chevron shows that it's expandable and flips to indicate open state. */
  .nav-tabs__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--smh-border);
  }
  .nav-tabs__label::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--smh-muted);
    border-bottom: 2px solid var(--smh-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease, border-color 0.15s ease;
  }
  .nav-tabs__label.is-active::after {
    transform: rotate(-135deg);
    border-color: var(--smh-primary);
  }

  .site-header__cta--mobile {
    display: flex;
    margin: 16px;
  }
}

@media (min-width: 992px) {
  .primary-nav__header,
  .primary-nav__close,
  .site-header__cta--mobile {
    display: none;
  }
}
/* Desktop hover-to-open for "About Us" / "Pipes & Tubes" / "Our Products"
   is handled in mega-menu.js (setupDesktopHoverOpen), not here — closed
   <details> content is hidden by the browser's own UA stylesheet, which an
   author :hover rule can't reliably override across browsers. The JS sets
   the real [open] attribute instead, which is what the existing
   .nav-dropdown[open] rules above (panel display, chevron rotation, active
   color) already key off of, whether opened by hover, click, or keyboard. */

/* Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-header *,
  .site-header *::before,
  .site-header *::after {
    transition-duration: 0.001ms !important;
  }
}

/* Dark mode (matches viewer OS/browser preference) --------------------- */
@media (prefers-color-scheme: dark) {
  .site-header {
    --smh-text: #eef2f5;
    --smh-muted: #aab4bd;
    --smh-border: #2a343d;
    --smh-bg: #12181e;
    --smh-panel-bg: #171f26;
    --smh-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    --smh-tab-active-bg: rgba(1, 136, 209, 0.16);
  }
  .site-header {
    border-bottom-color: var(--smh-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  .nav-toggle,
  .primary-nav__close {
    background: var(--smh-bg);
    border-color: var(--smh-border);
  }
  .nav-toggle span {
    background: var(--smh-text);
  }
  .nav-dropdown__simple-list a:hover,
  .nav-dropdown__simple-list a:focus-visible,
  .nav-tabs__label:hover {
    background: rgba(1, 136, 209, 0.16);
  }
}

/* ==========================================================================
   Sticky bottom "Get in Touch" CTA bar
   Was originally hardcoded (markup, style and script) only on index.html.
   Centralized here so global-header.html can carry the same markup + styles
   onto every other page too — position:fixed means it renders correctly
   fixed to the viewport regardless of where in the DOM it actually sits.
   index.html keeps its own copy of this same CSS's HTML/JS (not this CSS
   block, which it also loads via this file) since it doesn't fetch
   global-header.html at all.
   ========================================================================== */
.sbcta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  background: #101c36;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(110%);
  pointer-events: none;
  transition: transform 0.35s ease;
}

.sbcta-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sbcta-inner {
  width: min(1400px, 94%);
  margin: auto;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sbcta-label {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 700;
  color: #eef2f5;
  white-space: nowrap;
}

.sbcta-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sbcta-field {
  flex: 1;
  min-width: 140px;
}

.sbcta-message {
  flex: 1.4;
  min-width: 200px;
}

.sbcta-field input,
.sbcta-field select,
.sbcta-field textarea {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  background: #17253f;
  color: #eef2f5;
  outline: none;
  transition: 0.3s;
}

.sbcta-field input::placeholder,
.sbcta-field textarea::placeholder {
  color: #8b97a8;
}

.sbcta-field textarea {
  height: 44px;
  resize: none;
  padding-top: 12px;
}

.sbcta-field input:focus,
.sbcta-field select:focus,
.sbcta-field textarea:focus {
  border-color: #4fb1ff;
  box-shadow: 0 0 0 3px rgba(79, 177, 255, 0.18);
}

.sbcta-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23c7d0d9' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

.sbcta-btn-wrap {
  flex: 0 0 auto;
}

.sbcta-btn-wrap button {
  height: 44px;
  padding: 0 26px;
  border: none;
  border-radius: 8px;
  background: #0b67c2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: 0.3s;
}

.sbcta-btn-wrap button:hover {
  background: #1a83e6;
}

.sbcta-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #c7d0d9;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.sbcta-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Reserve space at the bottom of the page so this fixed bar never covers
   the footer/last section behind it. */
body {
  padding-bottom: 76px;
}

@media (max-width: 900px) {
  .sbcta-hide-sm {
    display: none;
  }
  .sbcta-label {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .sbcta-inner {
    gap: 10px;
    padding: 8px 0;
  }
  .sbcta-label {
    display: none;
  }
  .sbcta-field {
    min-width: 100px;
  }
  .sbcta-btn-wrap button {
    padding: 0 16px;
  }
  body {
    padding-bottom: 66px;
  }
}

/* Hide the sticky bar entirely on phone screens — too little room for it
   alongside real page content there (see the truncated Name/Phone/Send-only
   version it degrades to above); it stays as-is on tablet/desktop. */
@media (max-width: 767.98px) {
  .sbcta-bar {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}