/* ============================================================
   STEELHEAD — Site header + footer (matches the design system)
   Used by the theme's PHP partials. Mirrors the marketing-site nav.
   ============================================================ */

.sh-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  background: var(--sh-bone, #F4F1EC);
  border-bottom: 1px solid var(--sh-silver, #B8BCC0);
}
/* Transparent over a dark hero (added via JS/looping on front page) */
.sh-header--over {
  position: absolute;
  left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(244, 241, 236, 0.18);
}

.sh-header__brand { text-decoration: none; flex: none; }
.sh-header__nav { display: flex; gap: 24px; justify-content: center; flex: 1; }
.sh-header__nav, .sh-header__nav ul, .sh-header__nav li { list-style: none; margin: 0; padding: 0; }
.sh-header__nav li::marker { content: ""; }
.sh-header__nav a {
  font-family: var(--sh-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-charcoal, #2A2A2A);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 180ms var(--sh-ease, ease), border-color 180ms var(--sh-ease, ease);
}
.sh-header__nav a:hover { color: var(--sh-patina, #5C2E18); }
.sh-header__nav .current-menu-item > a,
.sh-header__nav .current_page_item > a { border-bottom-color: var(--sh-corten, #8A4B2A); }

/* Dropdown submenus */
.sh-header__nav .menu-item-has-children { position: relative; }
.sh-header__nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); margin-left: 8px; opacity: 0.6;
}
.sh-header__nav .sub-menu {
  position: absolute; top: 100%; left: 0; margin: 12px 0 0; padding: 16px 0; min-width: 210px;
  list-style: none; background: var(--sh-bone, #F4F1EC);
  box-shadow: 0 24px 60px rgba(11, 11, 11, 0.28);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms var(--sh-ease, ease), transform 160ms var(--sh-ease, ease), visibility 160ms;
  z-index: 1001;
}
/* Invisible bridge across the gap so moving to the dropdown keeps it open */
.sh-header__nav .sub-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.sh-header__nav .menu-item-has-children:hover > .sub-menu,
.sh-header__nav .menu-item-has-children:focus-within > .sub-menu,
.sh-header__nav .menu-item-has-children.sh-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sh-header__nav .sub-menu li { display: block; }
.sh-header__nav .sub-menu a {
  display: block; padding: 9px 26px; border-bottom: 0; white-space: nowrap;
  color: var(--sh-charcoal, #2A2A2A);
}
.sh-header__nav .sub-menu a:hover { color: var(--sh-corten, #8A4B2A); }
/* Keep dropdown items dark on the bone panel even under the over/dark header */
.sh-header--over .sh-header__nav .sub-menu a,
.sh-header--dark .sh-header__nav .sub-menu a { color: var(--sh-charcoal, #2A2A2A); }
.sh-header--over .sh-header__nav .sub-menu a:hover,
.sh-header--dark .sh-header__nav .sub-menu a:hover { color: var(--sh-corten, #8A4B2A); }

.sh-header__right { display: flex; align-items: center; gap: 20px; white-space: nowrap; flex: none; }
.sh-header__phone {
  font-family: var(--sh-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sh-black, #0B0B0B);
  text-decoration: none;
}
.sh-header__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.sh-header__toggle span { display: block; width: 24px; height: 2px; background: var(--sh-black, #0B0B0B); margin: 5px 0; }

/* over-dark variants */
.sh-header--over .sh-header__nav a,
.sh-header--over .sh-header__phone { color: var(--sh-bone, #F4F1EC); }
.sh-header--over .sh-lockup__word { color: var(--sh-bone, #F4F1EC); }
.sh-header--over .sh-lockup__tag { color: var(--sh-silver, #B8BCC0); }
.sh-header--over .sh-header__toggle span { background: var(--sh-bone, #F4F1EC); }

@media (max-width: 980px) {
  .sh-header__nav { display: none; }
  .sh-header__phone { display: none; }
  .sh-header__toggle { display: block; }
  .sh-header__nav.is-open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--sh-bone, #F4F1EC);
    border-bottom: 1px solid var(--sh-silver, #B8BCC0);
    padding: 8px 0;
  }
  .sh-header__nav.is-open a { padding: 14px 32px; }
  .sh-header__nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent; padding: 0; margin: 0; min-width: 0;
  }
  .sh-header__nav .sub-menu a { padding: 12px 48px; color: inherit; }
  /* Mobile: lighten the sub-nav items to a readable light gray.
     Extra-specific variants override the over/dark charcoal rules above. */
  .sh-header__nav.is-open .sub-menu a,
  .sh-header--over .sh-header__nav.is-open .sub-menu a,
  .sh-header--dark .sh-header__nav.is-open .sub-menu a { color: var(--sh-silver, #B8BCC0); }
  .sh-header__nav.is-open .sub-menu a:hover,
  .sh-header--over .sh-header__nav.is-open .sub-menu a:hover,
  .sh-header--dark .sh-header__nav.is-open .sub-menu a:hover { color: var(--sh-bone, #F4F1EC); }
  .sh-header__nav .menu-item-has-children > a::after { display: none; }
}

/* Solid dark header variant — reusable site-wide (matches the brand hero look) */
.sh-header--dark { background: var(--sh-black, #0B0B0B); border-bottom: 1px solid rgba(244, 241, 236, 0.12); }
.sh-header--dark .sh-header__nav a,
.sh-header--dark .sh-header__phone { color: var(--sh-bone, #F4F1EC); }
.sh-header--dark .sh-lockup__word { color: var(--sh-bone, #F4F1EC); }
.sh-header--dark .sh-lockup__tag { color: var(--sh-silver, #B8BCC0); }
.sh-header--dark .sh-header__toggle span { background: var(--sh-bone, #F4F1EC); }
@media (max-width: 980px) {
  .sh-header--dark .sh-header__nav.is-open { background: var(--sh-black, #0B0B0B); border-bottom-color: rgba(244, 241, 236, 0.12); }
}

/* Hide Pro's own header (x-masthead); the Steelhead header is global. */
.x-masthead { display: none; }

/* Per-page header banner: background image/video with the nav overlaid */
.sh-hbanner { position: relative; width: 100%; min-height: var(--sh-hbanner-h, 70vh); overflow: hidden; background: var(--sh-black, #0B0B0B); display: flex; flex-direction: column; }
.sh-hbanner__media { position: absolute; inset: 0; z-index: 0; }
.sh-hbanner__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-hbanner__scrim { position: absolute; inset: 0; z-index: 1; background: #0b0b0b; pointer-events: none; }
.sh-hbanner .sh-header { position: relative; z-index: 5; background: transparent; border-bottom: 1px solid rgba(244, 241, 236, 0.18); }
/* Match the site content column used by the theme sections (gallery, showcase,
   pillars, servemap): a 1280px inner with 56px side gutters. max-width 1392 =
   1280 + 2x56, so the text left edge tracks those sections at every width. */
.sh-hbanner__content { position: relative; z-index: 2; flex: 1 1 auto; width: 100%; max-width: 1392px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 56px 72px; }
.sh-hbanner__content .sh-hero__inner { max-width: 820px; }
/* Optional per-page quote form on the right of the banner. */
.sh-hbanner__row { display: block; }
.sh-hbanner--has-form .sh-hbanner__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; }
.sh-hbanner--has-form .sh-hbanner__content .sh-hero__inner { max-width: 620px; flex: 1 1 auto; }
.sh-hbanner__form { flex: 0 0 360px; max-width: 360px; background: rgba(11, 11, 11, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(244, 241, 236, 0.16); border-radius: 6px; padding: 26px 24px; }
.sh-hform { display: flex; flex-direction: column; gap: 12px; }
.sh-hform__title { margin: 0 0 2px; }
.sh-hform__text { margin: 0 0 4px; font-family: var(--sh-sans); font-size: 13px; line-height: 1.5; color: var(--sh-silver, #B8BCC0); }
.sh-hform__field { display: flex; flex-direction: column; gap: 5px; }
.sh-hform__field span { font-family: var(--sh-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sh-silver, #B8BCC0); }
.sh-hform__field input { background: rgba(244, 241, 236, 0.06); border: 1px solid rgba(244, 241, 236, 0.22); border-radius: 3px; padding: 10px 12px; color: var(--sh-bone, #F4F1EC); font-family: var(--sh-sans); font-size: 14px; }
.sh-hform__field input::placeholder { color: rgba(244, 241, 236, 0.4); }
.sh-hform__field input:focus { outline: none; border-color: var(--sh-corten, #8A4B2A); background: rgba(244, 241, 236, 0.1); }
.sh-hform__submit { margin-top: 6px; width: 100%; justify-content: center; text-align: center; border: 0; cursor: pointer; }
.sh-hform__notice { margin: 0; font-family: var(--sh-sans); font-size: 14px; line-height: 1.5; color: var(--sh-bone, #F4F1EC); }
@media (max-width: 980px) {
  .sh-hbanner .sh-header__nav.is-open { background: rgba(11, 11, 11, 0.96); }
  .sh-hbanner__content { width: 100%; padding: 0 28px 48px; }
  .sh-hbanner--has-form .sh-hbanner__row { flex-direction: column; align-items: stretch; gap: 28px; }
  .sh-hbanner__form { flex: 1 1 auto; max-width: none; }
  /* Keep the two hero CTAs side-by-side on mobile instead of stacking:
     equal width, centered, trimmed padding so "Call 406·370·7070" fits. */
  .sh-hbanner .sh-hero__cta { flex-wrap: nowrap; gap: 10px; }
  .sh-hbanner .sh-hero__cta .sh-btn {
    flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
    white-space: nowrap; padding: 15px 12px; font-size: 11px; letter-spacing: 0.1em;
  }
}