/**
 * Header/footer redesign overrides.
 * Loaded after global.css (see inc/hooks/scripts-styles.php).
 * Structural/layout pass — colors, fonts and spacing are refined by the
 * pixel-perfect audit against http://localhost:3000/about.
 */

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid #e5e5e5;
}

/*
 * Base theme CSS (css/prod/global.css, the file WP actually serves here —
 * wp_get_environment_type() returns "production" in this env, not
 * "development", so get_asset_file() always resolves to the prod bundle,
 * never css/dev/global.css) defines `.menu-contain { display: flex; }` as a
 * SINGLE row (logo/CTA and nav crammed side by side). The reference design
 * is a two-row header: row 1 = logo + Contact Us, row 2 = nav links + search
 * + Client Login, full width, stacked. flex-direction: column is what makes
 * that split happen — without it the row-2 rules below just rearrange
 * things within the same single row.
 */
/*
 * Base rule is actually `.site-header .menu-contain` (specificity 0,2,0,
 * two classes), not plain `.menu-contain` (0,1,0) — a bare `.menu-contain`
 * override here loses on specificity regardless of stylesheet load order,
 * so every selector touching this element below matches that same
 * `.site-header .menu-contain` compound to guarantee the win.
 */
.site-header .menu-contain {
  flex-direction: column;
  align-items: stretch;
  padding-top: 1.25rem;
  padding-bottom: 0;
  /* Reference (localhost:3000/about) caps its header/footer content row at
     a Tailwind `.container` (max-width: 1400px; padding: 0 32px), not the
     theme's own 1660px .menu-contain default. box-sizing: border-box keeps
     the added padding from pushing the outer box past 1400px. */
  max-width: 1400px;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

.site-branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding-bottom: 1.25rem;
}

.site-branding .head-logo {
  max-height: 95px;
  width: auto;
}

.site-branding .header-cta,
.btn.btn-primary.header-cta {
  display: inline-block;
  background-color: #185891;
  color: #fff;
  border-radius: 9999px;
  padding: 4px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 2rem;
}

.site-branding .header-cta:hover {
  background-color: #124267;
}

.nav-primary {
  width: 100%;
  position: relative;
}

/*
 * The line above the nav row needs to span the full viewport width, but
 * .nav-primary itself sits inside .menu-contain (max-width: 1400px), so a
 * plain border-top on .nav-primary only spans that 1400px box. Full-bleed
 * trick: a pseudo-element sized to 100vw and re-centered on the viewport
 * (left: 50% + translateX(-50%)), independent of the constrained parent.
 */
.nav-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid #e5e5e5;
}

.nav-primary .menu-items-wrapper {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0.85rem 0;
}

/* Base theme's `.menu-item > a` (css/prod/global.css) hardcodes Noto Sans
   16px/700/1.5px letter-spacing/#20598e — none of which match the
   reference's Montserrat 18px/400/normal/#0A0A0A. Higher specificity
   (.nav-primary .menu-items ...) plus later source order wins the override
   without !important. */
.nav-primary .menu-items .menu-item > a {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 28px;
  color: #0a0a0a;
}

/*
 * Mega-menu: Services (10 children) and Industries (6 children) get a
 * wide, 2-column grid dropdown instead of the base theme's cramped
 * single-column 200px flyout (base rule: plain `.sub-menu{width:var(
 * --width-sub-menu)}`, i.e. 20rem — specificity 0,1,0). This is a layout
 * widening of the EXISTING flat menu-item list only — the reference
 * site's mega-menu additionally groups items under 5 category headers
 * (Asbestos Services / Indoor Air Quality / Environmental Services / Lead
 * Services / Construction Inspection) with more granular sub-service
 * links than exist as WP pages today; reproducing that grouping needs new
 * content/IA decisions and is intentionally out of scope here.
 * .menu-item-203 = Services, .menu-item-25613 = Industries (WP db_ids —
 * see `wp menu item list main-menu`). Selector specificity (0,4,0) is
 * deliberately built to beat both the base plain `.sub-menu` rule and the
 * `.menu-item.menu-item-has-children:focus .sub-menu` open-state padding
 * rule (also 0,4,0) via source order (this stylesheet loads after
 * global.css), without needing !important.
 */
@media (min-width: 1030px) {
  /*
   * Sizing/spacing (safe to apply always, whether the dropdown is
   * currently shown or not — these don't control visibility).
   */
  .nav-primary .menu-items > .menu-item-203 > .sub-menu,
  .nav-primary .menu-items > .menu-item-25613 > .sub-menu {
    width: 640px;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    row-gap: 0;
    padding: 1.25rem 1.5rem;
    position: absolute;
    left: 0;
    top: 100%;
  }

  .nav-primary .menu-items > .menu-item-203 > .sub-menu li,
  .nav-primary .menu-items > .menu-item-25613 > .sub-menu li {
    padding: 0;
  }

  /*
   * `display: grid` must NOT be unconditional — this site never flips
   * body from `no-js` to `js` (a dead feature-detect), so the base
   * theme's actual show/hide mechanism is
   * `.no-js .menu-item-has-children:hover > .sub-menu { display: block }`
   * (specificity 0,4,0) toggling `display: none` -> `block`. Setting
   * `display: grid` unconditionally on the plain `.sub-menu` selector
   * (as an earlier version of this rule did) beats that on specificity
   * and permanently forces both mega-menus open regardless of hover —
   * confirmed live (`display:grid` computed even with the mouse
   * nowhere near the item). Scoping `display: grid` to the same `:hover`
   * condition, at higher specificity (0,5,0), keeps the open/close
   * behavior intact while still switching to grid once opened.
   */
  .no-js .nav-primary .menu-items > .menu-item-203.menu-item-has-children:hover > .sub-menu,
  .no-js .nav-primary .menu-items > .menu-item-25613.menu-item-has-children:hover > .sub-menu {
    display: grid;
  }
}

/* Base `.menu-item .sub-menu a` (specificity 0,2,1) currently renders
   dropdown items at the same size/color as top-level nav links (~18px,
   black) — reference's Services/Industries submenu items are Montserrat
   14px/400/#737373 (gray), distinctly secondary to the 12px/700/uppercase
   category headers of its full mega-menu layout. NOTE: the reference's
   dropdown is a 5-column mega-menu grouped under category headers
   (Asbestos Services / Indoor Air Quality / Environmental Services / Lead
   Services / Construction Inspection); this theme's dropdown is a plain
   single-column flyout with no such grouping — that's a structural gap,
   not a token mismatch, and out of scope for this typography-only fix. */
.nav-primary .menu-item .sub-menu a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #737373;
}

/* Pushes search + Client Login to the far right, leaving the nav-item
   list on the left, without changing DOM/markup order. */
.nav-search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  /* Root font-size is 62.5% (1rem = 10px) in this theme, so 1.1rem was
     rendering an 11px glyph — reference's search icon is a 20px glyph in
     a 36x36 hit area. Use px directly to avoid the rem-base trap; 8px
     padding around a 20px icon gives the same 36x36 target. */
  font-size: 20px;
  padding: 8px;
  margin-left: auto;
}

.nav-client-login {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0a0a0a;
  white-space: nowrap;
  text-decoration: none;
}

.nav-search-panel {
  padding: 1rem 2.5%;
}

.nav-search-panel[hidden] {
  display: none;
}

/* ---------- Footer ---------- */

.site-footer .foot-row {
  grid-template-columns: 28% 22% 22% 22%;
}

.site-footer .branding .foot-logo {
  max-width: 220px;
  height: auto;
  margin-bottom: 1.5rem;
}

.site-footer .branding p {
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.site-footer .our-companies ul,
.site-footer .resources ul,
.site-footer .connect ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.site-footer .our-companies li,
.site-footer .resources li,
.site-footer .connect li {
  margin-bottom: 0.6rem;
}

/* Base `.foot-row h3` (css/prod/global.css) sets color+uppercase but the
   font itself falls through to a generic heading rule — EB Garamond
   24px/700 — vs. the reference's Montserrat 18px/600, not uppercased
   (the source text "Our Companies" is already title-case). */
.site-footer .foot-row h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.site-footer .our-companies a,
.site-footer .resources a,
.site-footer .connect a {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.site-footer .our-companies a:hover,
.site-footer .resources a:hover,
.site-footer .connect a:hover {
  text-decoration: underline;
}

.site-footer .connect .social-icons {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

/* Reference's footer social icons are a 20px glyph in a 40x40 hit area
   (see 4.2's icon/glyph-sizing scan) — measured render here was a bare
   16x19 box with no hit-area padding. */
.site-footer .connect .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.foot-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1660px;
  margin: 0 auto;
  padding: 1.5rem 2.5%;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
}

.foot-bottom-bar a {
  color: inherit;
}

@media (max-width: 768px) {
  .site-footer .foot-row {
    grid-template-columns: 100%;
    row-gap: 2rem;
  }

  .foot-bottom-bar {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}