/* WEB-1018 header refinement — single true sticky header (W23) — 2026-10-30.
   Port of the proven WEB-1017 pattern (header-hero-refine.css v3.1,
   Quality PASS 2026-10-26) via the WEB-1021 port, to Maricopa Quality
   Drywall.
   Founder direction (2026-10-26 ~10:35, Rulebook W23): ONE true sticky
   header per site — not two separately styled headers.
   The Brizy animated section carries TWO header contents: an in-flow
   header block (.brz-section__menu-item, custom-id uIhe1hoEsLCB; logo
   iIt4lQQgbKWk / nav ifl0ODpCug3G / phone w03hQ_6BJrQc) that scrolls
   away, and a fixed wrapper (.brz-section__header--animated) holding
   the sticky-item div (tce7SRrIjR60; row ukVTXata2Du1; logo
   quYUXM_LORwB / nav container lefLyK7jZb9D / phone c8_fOFEqgSmQ)
   that Brizy slides in on scroll. Structural note vs WEB-1021: the
   three sticky columns are nested — one outer column (xT3TqLsciisp)
   whose items hold the logo wrapper plus the nav column (pqJUJuK3kJZ0)
   and the phone column (lv5Lc6wP1AYH).
   This file makes Brizy's own sticky header the SINGLE header: the
   fixed wrapper is forced always visible (Brizy's JS hides it at the
   top via inline opacity/visibility/transform; !important beats
   those), the in-flow block is hidden, and body padding-top equals
   the sticky header's height so the hero is never covered and there
   is no layout shift.
   Only the sticky header is styled. The in-flow header is not styled
   at all — it is hidden, not restyled.
   Brand tokens — 1018's OWN, from its Brizy palette (the
   --brz-global-color* values defined in every page's <style> block)
   and confirmed against the rendered baseline (Playwright, 2026-10-30):
   header bg white #FFFFFF (global-color4; Brizy's own sticky bg rule
   renders rgba(255,255,255,1)); nav #000000 (Brizy's own menu rules,
   Overpass 700); gold #C8A96A (global-color3 — the phone CTA's
   designed background); CTA text white #FFFFFF (global-color4) with
   Brizy's own button shadow (1px 2px 4px rgba(70,70,70,1),
   global-color6 #464646); hamburger #333333 (Brizy's own
   .brz-mm-menu__icon colour).
   CTA divergence from the baseline's sticky copy: Brizy's generated
   CSS restyles the STICKY copy's button to a white background with
   dark slate text (#1F2933, global-color8) — a white button on the
   white header — while the designed in-flow copy is gold with white
   text and the shadow above. Per the pattern (the sticky copy is
   pinned to Brizy's own rendered colours for the DESIGNED header, so
   the single header matches the header visitors see at the top) and
   the W23 requirement that the phone CTA stay prominent, this file
   pins the sticky CTA to the in-flow copy's treatment.
   Sticky header height (measured from the rendered tree, 2026-10-30):
   105px desktop / 80px mobile. Body padding-top matches it. */

/* ---------- the single sticky header: always visible ---------- */
.brz .brz-section__header-type--animated .brz-section__header--animated {
  /* Brizy's own fixed scroll header. Forced always visible so it is the
     one header at the top and on scroll; !important beats Brizy's JS,
     which hides it at the top via inline opacity/visibility/transform.
     z-index 2000: Brizy's content sections carry z-index 1055 on their
     menu-item divs, which otherwise paint OVER a z-index 100 header.
     pointer-events:auto: Brizy's .brz-section__header--animated-closed
     class sets pointer-events:none on this wrapper in its hidden state
     (at the top / small scrolls); forcing visibility without restoring
     pointer-events leaves the header dead to mouse/touch at scrollY 0
     (WEB-1017 Quality defect D1). auto restores hit-testing on the
     wrapper and, by inheritance, its subtree. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ---------- the in-flow header block: hidden (the duplicate header) ----------
   One div wraps the whole in-flow header — its row AND its .brz-bg —
   so this single rule hides both (the section's only other child is
   the fixed wrapper). */
.brz .brz-section__header-type--animated [data-brz-custom-id="uIhe1hoEsLCB"] {
  display: none !important;
}

/* ---------- the header section itself: collapse to zero height ----------
   With the in-flow block hidden, collapse the section so the hero
   starts directly below the fixed header (no residual band from the
   section's own box). The fixed wrapper is position:fixed
   (viewport-relative), so it is unaffected. */
.brz .brz-section__header-type--animated {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
}

/* ---------- body padding-top = sticky header height (no overlap, no shift) ---------- */
body {
  padding-top: 105px !important;
}

/* ---------- sticky header background: white ---------- */
.brz .brz-section__header-sticky-item[data-brz-custom-id="tce7SRrIjR60"] > .brz-bg > .brz-bg-color {
  background-color: #FFFFFF;
}

/* ---------- logo: pinned to its own natural size, on the wrapper div ----------
   The custom-id sits on the DIV.brz-image wrapper (not the <picture>);
   the wrapper is display:flex + overflow:hidden and can clip the img.
   Size wrapper + picture + img explicitly to the logo's natural size
   (166x85, aspect 1.953) so the full lockup fits at the size Brizy
   itself renders it. */
.brz .brz-section__header-sticky-item [data-brz-custom-id="quYUXM_LORwB"] {
  width: 166px !important;
  height: 85px !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
.brz .brz-section__header-sticky-item [data-brz-custom-id="quYUXM_LORwB"] .brz-picture {
  width: 166px !important;
  height: 85px !important;
}
.brz .brz-section__header-sticky-item [data-brz-custom-id="quYUXM_LORwB"] .brz-img {
  width: 166px !important;
  height: 85px !important;
  max-width: none !important;
}

/* ---------- nav: black on white, gold current/hover underline ---------- */
.brz .brz-section__header-sticky-item .brz-menu__ul > .brz-menu__item > a.brz-a {
  color: #000000;
}
.brz .brz-section__header-sticky-item .brz-menu__ul > .brz-menu__item > a.brz-a:hover,
.brz .brz-section__header-sticky-item .brz-menu__ul > .brz-menu__item.brz-menu__item--current > a.brz-a {
  /* Brizy's own current-page colour outranks the base nav rule; the
     !important keeps the current link black like the rest. */
  color: #000000 !important;
  border-bottom: 2px solid #C8A96A;
}

/* ---------- phone CTA: gold bg, white text, Brizy's own button shadow ----------
   Pinned to the DESIGNED (in-flow) copy's rendered treatment — gold
   #C8A96A background, white text, 1px 2px 4px rgba(70,70,70,1)
   shadow — not to Brizy's sticky-copy restyle (white bg, dark slate
   text), which would leave a white button on the white header.
   Hover is deliberately NOT overridden: Brizy's generated button CSS
   carries this button's own hover treatment, which stays as the site
   has it. */
.brz .brz-section__header [data-brz-custom-id="c8_fOFEqgSmQ"].brz-btn {
  background-color: #C8A96A;
  border-color: #C8A96A;
  color: #FFFFFF;
  box-shadow: 1px 2px 4px 0px rgba(70, 70, 70, 1);
}
.brz .brz-section__header [data-brz-custom-id="c8_fOFEqgSmQ"].brz-btn .brz-span {
  color: #FFFFFF;
}

/* ---------- hamburger: Brizy's own dark grey on white ---------- */
.brz .brz-section__header-sticky-item .brz-mm-menu__icon {
  color: #333333;
}

/* ---------- tablet (<=1020px): Brizy inflates its own sticky header ----------
   At this width Brizy's generated CSS adds 5px vertical padding on
   the header's .brz-column__items (and stacks margins at narrower
   widths), which made the sticky header 136px tall at 800px wide —
   past the 105px body padding, so it would overlap the hero. Zero
   those spacings (they are Brizy's stacked-layout rhythm, meaningless
   in the single header). Divergence from the WEB-1021 port: 1021 also
   RELEASED its desktop logo pin in this block, because its 118px
   padding had slack for Brizy's smaller tablet logo; 1018's padding
   (105px) has no slack — Brizy's tablet logo renders at the same
   166px width — so the pin stays and the header holds 105px at every
   width in this range. */
@media (max-width: 1020px) {
  .brz .brz-section__header-sticky-item .brz-column__items {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .brz .brz-section__header-sticky-item .brz-wrapper,
  .brz .brz-section__header-sticky-item .brz-wrapper-clone {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ---------- mobile: one row — logo left, phone + hamburger right ---------- */
@media (max-width: 767px) {
  body {
    padding-top: 80px !important;
  }
  /* logo at Brizy's own mobile render size (117x60; 129x66 asset,
     aspect 1.955). max-width:none releases Brizy's max-width:30% cap,
     which is relative to the (now narrower) logo column and would
     shrink the logo below its authored mobile size. */
  .brz .brz-section__header-sticky-item [data-brz-custom-id="quYUXM_LORwB"] {
    width: 117px !important;
    height: 60px !important;
    max-width: none !important;
  }
  .brz .brz-section__header-sticky-item [data-brz-custom-id="quYUXM_LORwB"] .brz-picture {
    width: 117px !important;
    height: 60px !important;
  }
  .brz .brz-section__header-sticky-item [data-brz-custom-id="quYUXM_LORwB"] .brz-img {
    width: 117px !important;
    height: 60px !important;
  }
  /* the sticky row becomes a single horizontal row. Divergence from
     WEB-1021's shape: there the row's three children were the three
     columns, so flexing .brz-row sufficed; here the row holds ONE
     outer column (xT3TqLsciisp) whose .brz-column__items stack the
     logo wrapper, the nav column and the phone column (Brizy stacks
     them at this width, which made the sticky header 264px tall in
     the baseline render) — so the items container is flexed as well. */
  .brz .brz-section__header [data-brz-custom-id="ukVTXata2Du1"] .brz-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .brz .brz-section__header-sticky-item [data-brz-custom-id="xT3TqLsciisp"] > .brz-column__items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* logo wrapper takes the free space */
  .brz .brz-section__header-sticky-item [data-brz-custom-id="xT3TqLsciisp"] > .brz-column__items > .brz-wrapper {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  /* nav column shrinks to the hamburger — the desktop nav list is
     hidden, the hamburger (which lives in this column's menu
     container) stays visible. Only the desktop nav's list is hidden;
     the mmenu nav (the mobile menu itself) is a separate element and
     is not touched. */
  .brz .brz-section__header [data-brz-custom-id="pqJUJuK3kJZ0"] {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .brz .brz-section__header [data-brz-custom-id="lefLyK7jZb9D"] > nav.brz-menu:not(.brz-menu__mmenu) .brz-menu__ul {
    display: none !important;
  }
  /* phone column stays visible, compact */
  .brz .brz-section__header [data-brz-custom-id="lv5Lc6wP1AYH"] {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .brz .brz-section__header [data-brz-custom-id="c8_fOFEqgSmQ"].brz-btn {
    padding: 8px 12px;
    font-size: 14px;
  }
}