/* =========================================================================
   AUTHORITATIVE HEADER / LOGO SIZING — loaded LAST on every page.

   Each build agent inlined its own white-header patch (a reasonable defensive
   choice while design/tokens.css was still in flux), but they picked three
   different logo heights: 44/56px, 56/68px and 56/74px. The logo therefore
   changed size depending on which page you landed on.

   This file is the single source of truth for the header crest. It loads
   after every other stylesheet and after the inline <style> blocks are
   parsed, so it wins on cascade order without editing five files.

   The mark is a near-square badge (1391x1175, ~1.184:1), not a wide wordmark
   — it needs real height to read. David asked for it prominently displayed.
   ========================================================================= */

/* The base reset sets `img { max-width: 100% }` but never `height: auto`, so a
   constrained image kept its declared pixel height while its width shrank to
   the container — the blog rendered 1800x1013 photos as 260x1013 slivers.
   Element-selector specificity (0,0,0,1) means any component that genuinely
   needs a fixed height (.hero__photo, .video-thumb__img) still wins. */
img { height: auto; }

.site-header__logo-mark {
  height: 92px;
  width: auto;
  display: block;
  flex: none;
}

@media (max-width: 900px) {
  .site-header__logo-mark { height: 76px; }
}

@media (max-width: 480px) {
  .site-header__logo-mark { height: 58px; }
}

/* Three header markup variants shipped: 8 city pages render the crest alone,
   5 render crest + tagline, and 20 render crest + wordmark + tagline. Hiding
   both the wordmark and the tagline collapses all three to one identical
   lockup, and frees the bar space that was making "About" collide with the
   phone number. Nothing is lost: "EST. 2001" appears in the hero proof chips
   ("25 Years in Business") and the footer NAP block. */
.site-header__logo-tag { display: none; }

/* Real gutter between the last nav item and the phone block. */
.site-header__bar {
  column-gap: var(--space-8);
}

/* Some page groups render a "The Hardwood Guys" text wordmark beside the crest
   and some don't, so the header lockup was a different width depending on which
   page you landed on. The crest already contains the wordmark graphically, so
   the text is redundant and costs ~180px of bar. Hidden visually, kept in the
   accessibility tree. */
.site-header__logo-word {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nav stays on one row at desktop — wrapping to two lines pushed the bar to
   130px tall and looked broken. */
.site-nav ul {
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .site-nav ul { gap: var(--space-4); }
}

/* components.css turns the full desktop nav on at 1024px, but the bar needs
   roughly 1200px to fit crest + 6 nav items + phone + hours + CTA. In the
   1024-1199 band the nav overflowed its flex item and printed straight over
   the phone number ("About"/"Blog" on top of 470-826-3581).

   Below 1200px the NAV collapses to the hamburger — but the phone block and
   the Free Estimate button stay visible, because the phone is the primary
   conversion element on this site and tablet users should not lose it. */
@media (max-width: 1199px) {
  .site-nav { display: none; }
  .hamburger { display: inline-flex; }
  /* .site-nav was the flex:1 spacer. With it hidden, the phone and CTA
     collapse back against the logo, so push them to the right instead.
     .hamburger already carries margin-left:auto — leaving both auto margins
     in play splits the free space and strands a ~266px hole mid-bar, so the
     hamburger's is zeroed and the meta block owns the push. */
  .site-header__meta { margin-left: auto; }
  .hamburger { margin-left: 0; }
}

/* Last-resort guard: even if something else re-enables the nav early, never
   let it paint over a sibling. */
.site-nav { min-width: 0; }
.site-nav ul { overflow: hidden; }