/* ── Apex shared header ───────────────────────────────────────────────────
   One copy of the header rules for every page. This lived pasted into 20
   stylesheets; a change to the nav meant 20 edits and any page that missed
   one scrolled sideways, which is exactly how that bug spread.

   Linked AFTER each page's own <style>, so it wins ties on source order. ── */

/* ── Auto-fit header nav ─────────────────────────────────────────────
   Keep all nav buttons on ONE row as the window narrows, by smoothly
   scaling the row down. Wide screens (>~1760px) are unchanged. If the
   window gets too narrow for one row, it wraps instead of scrolling. ── */
header .logo-wrap{flex-shrink:0;}
header nav{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;}
@media (min-width:769px) and (max-width:1760px){
  header{padding:12px clamp(12px,1.3vw,32px);}
  header nav{gap:clamp(2px,0.3vw,4px);}
  header nav a, header nav .nav-btn{
    font-size:clamp(10px,0.70vw,13px);
    padding:clamp(5px,0.45vw,9px) clamp(7px,0.60vw,16px);
    letter-spacing:.2px; margin-left:0;
  }
  header .logo-wrap svg{height:clamp(36px,2.6vw,46px)!important;}
  header .logo-text .brand{font-size:clamp(15px,1.1vw,20px);}
}
@media(max-width:400px){
  /* Below this the mark plus "Apex Vinyl Fence" on one unbreakable line is
     wider than the screen. Let it wrap instead of scrolling the page. */
  header .logo-wrap{flex-shrink:1;min-width:0;gap:7px;}
  header .logo-text{white-space:normal;}
  header .logo-text .brand{font-size:14px;letter-spacing:.5px;}
  header .logo-text .sub{font-size:8.5px;letter-spacing:1px;}
}
@media(max-width:768px){
  /* The logo will not shrink and the widest nav button will not either, so
     side by side they measured 474px inside a 420px screen. Let the header
     wrap: logo on its line, buttons on theirs. */
  header{flex-wrap:wrap;row-gap:8px;}
  header .logo-wrap{flex-shrink:1;min-width:0;}
  header nav{flex:1 1 100%;justify-content:center;}
}

/* Shop by Style is the same button in the nav as in the hero, so it is the
   same colour in both places. Matched by href rather than a class, so it
   picks up every page's nav without touching 20 files of markup. */
header nav a[href="/finished-products"],
header nav a[href="/finished-products"].nav-btn{background:#e07a00 !important;color:#fff !important;}
header nav a[href="/finished-products"]:hover{background:#c06900 !important;}