/* .site-header — styles for src/lib/expand.mjs's `x-header`.
   Load AFTER tokens.css. See public/components/README.md for load order and
   the split rationale.

   Sits flush on the page background rather than as a raised, bordered bar —
   contained at --column-wide with --column-wide-inset padding, the same
   max-width AND horizontal inset every other section on a --column-wide
   page uses (see hero.css's header comment for why using --hero-inset here
   instead, a different sitewide clamp, drifted from .column--wide's own
   padding past a certain viewport width). A full-bleed treatment would also
   have needed its own separate alignment fix, the way .hero used to.
   baseline alignment, not center: the wordmark is serif display type sitting
   beside smaller UI text, and baseline is what keeps that pairing from
   looking like it's floating relative to the smaller text next to it. */

/* Grid, not flex-wrap, because the two layouts below are genuinely
   different ARRANGEMENTS of the same three children (brand, contact,
   toggle) rather than the same row reflowing — flex-wrap can drop items
   onto a new line but can't relocate the toggle to span both of them.
   Default: one row, brand left, an elastic gap, then contact+toggle
   grouped tight against the right edge — unchanged from what this header
   always looked like. Below the breakpoint: a letterhead — wordmark, then
   phone/Contact hugging directly beneath it on the left, toggle pinned to
   the far right and vertically centered against that whole block, never
   splitting from its own corner the way a plain wrap let it. The
   breakpoint (600px) is measured, not guessed: below 574px, the brand
   column on auto.apricotter.com's header ("Apricotter Auto" — the widest
   wordmark across every page using x-header) no longer has room for its
   own single line and wraps to "Apricotter" / "Auto", which looks broken
   rather than intentional. 600px switches to the letterhead with margin
   before that point, never sitting right on the edge where it wraps. */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "brand . contact toggle";
  align-items: baseline;
  gap: var(--space-2);
  max-width: var(--column-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--column-wide-inset) 20px;
  /* Explicit, not just "absent": every page that has used x-header so far
     happens to never load the legacy public/style.css alongside it, so
     that file's own bare `header {}` rule (dark background-color, a
     border-bottom) never had anything to leak into here. The first page
     that loads both (src/lib/listing-view-page.mjs, still-legacy for its
     other sections) exposed that this class was relying on an absence
     rather than actually declaring "flush on the page background" itself,
     which is what its own header comment already claims. */
  background-color: transparent;
  border-bottom: none;
}

.site-header__brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-header__wordmark {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--size-800);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.site-header__tagline {
  margin: 0;
  font-size: var(--size-200);
  line-height: var(--line-height-heading);
  color: var(--color-text-muted);
}

/* --- header contact slot -------------------------------------------------- */
/* Same geometry as .nav (nav.css), because it occupies the same position: one
   header handles the homepage's phone number and an industry page's phone
   number + Contact link. flex-wrap: nowrap — phone and Contact must always
   stay on one line together; they're short enough that the letterhead
   breakpoint above handles running out of room, not an internal wrap. */
.site-header__contact {
  grid-area: contact;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  align-items: center;
}

.site-header__contact .nav__item {
  min-height: var(--hit-target);
  display: inline-flex;
  align-items: center;
  /* flex's default min-width: auto lets a flex item's own text reflow to
     shrink below its content width — at very narrow letterhead widths
     (320px) that wrapped the phone number itself mid-digit
     ("(352) 807-" / "6959"). nowrap forces the number to overflow instead
     of break, which reads fine here: it still comfortably fits the
     available width at every measured breakpoint, this only stops the
     browser from reaching for a wrap that was never actually necessary. */
  white-space: nowrap;
}

/* The toggle is x-header's third grid child (see expand.mjs — a direct
   sibling of .site-header__brand/.site-header__contact, not nested inside
   either), so it can hold its own position independent of both: flush
   right and vertically centered in the default one-row layout (baseline
   alignment on a round button with no text baseline would sit it oddly
   low). The letterhead media query below overrides this to align: start
   once the toggle's cell spans both the brand and contact rows — centering
   against that whole two-row span reads as floating once contact hugs the
   wordmark instead of sitting a full row away. */
.theme-toggle {
  grid-area: toggle;
  align-self: center;
}

/* The number is the reason the slot exists, so it leans one weight heavier
   than Contact beside it. */
.site-header__phone {
  font-weight: var(--weight-semibold);
}

/* Must come after the base .site-header/.theme-toggle rules above: an
   equal-specificity override earlier in the file loses the cascade to a
   later unconditional rule for the same property, even when its own media
   condition matches — .theme-toggle's align-self: start here was
   previously getting silently clobbered back to align-self: center by the
   unconditional rule above it, because that rule came later in the file
   than the (then-earlier) media query. */
@media (max-width: 600px) {
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand   toggle"
      "contact toggle";
    align-items: start;
    row-gap: 0;
  }

  /* Pulls .site-header__contact flush against the wordmark on both axes,
     cancelling padding .nav__item carries for reasons that don't apply
     here:
     - margin-top: .nav__item's own --hit-target min-height (48px) centers
       the phone/Contact text inside a box much taller than the text
       itself, so real visual air sits above the text even at row-gap: 0.
     - margin-left: .nav__item's own padding-inline (0.9rem, sized for a
       comfortable tappable pill) pushed the visible "(352)..." text 0.9rem
       right of the wordmark's own flush-left edge — indented, not flush,
       which is backwards from how a subordinate line conventionally sits
       under a heading (flush left is the named convention; centered is
       the documented alternative, indented is neither — Fonts.com/
       Fontology's Subheads lesson: "subheads set flush left impart a
       clean, tailored look"). Both negative margins cancel the box the
       hit-target needs without shrinking it — the full 48px-tall,
       comfortably-padded tap target is still there, just positioned so
       its PADDING (not the tap target itself) overlaps the wordmark's own
       whitespace instead of pushing the visible text away from it. */
  .site-header__contact {
    margin-top: -14px;
    margin-left: -0.9rem;
  }

  /* The phone number is the one contact method that matters in the
     letterhead's tight space; Contact (a plain mailto/anchor link, never
     the only way to reach anyone since the phone number is always right
     beside it) is redundant here and was the second thing on the line
     competing with the number for a hug that's supposed to read as one
     unit. Phone-only keeps :not(.site-header__phone) scoped to whichever
     link ISN'T the phone, rather than hardcoding which attribute produced
     it (contact-href) — same outcome either way today, but this reads
     correctly even if a future page adds a differently-sourced second
     link here. */
  .site-header__contact a:not(.site-header__phone) {
    display: none;
  }

  .theme-toggle {
    align-self: start;
  }
}