/* site.css — shared cross-page rules.
   Home for anything that must be identical on every page. Page-specific styling
   still lives in each page's own <style> block; put a rule here only when all
   pages need it, so it does not have to be edited in eight places.

   NOTE ON !important: the elements these rules target carry *inline* style
   attributes, and an inline style beats any stylesheet rule regardless of load
   order or specificity. Overriding one therefore requires !important. That is
   the reason it appears below -- not a specificity war with the page styles. */

/* ── Mobile header (MAINT-297) ──────────────────────────────────────────────
   The header is a single flex row: logo, three nav links, then the "Start
   planning" pill. It has no breakpoint -- the site shipped with zero @media
   queries -- so on a phone the row cannot fit: the logo wraps onto three lines,
   the links wrap and get cut off vertically, and the pill is pushed past the
   right edge and clipped. Measured on the live site before this fix, the pill's
   right edge sat at 462px on every phone regardless of viewport, so it lost
   32px on a 430px screen and 142px on a 320px one. Because the document's
   scrollWidth still equalled the viewport width, the overflow was hard-clipped
   rather than scrollable -- the primary call to action was simply unreachable.

   The markup already carries a `data-desktop-nav` marker on the links wrapper,
   placed for a breakpoint that was never written. This is that breakpoint.

   The three links are not lost: the footer lists all of them (Signature
   escapes / Meet Courtnay / Family stories / Start planning) on every page. */
@media (max-width: 820px) {
  [data-desktop-nav] {
    display: none !important;
  }

  /* With the links gone the pill is narrow enough that "Start planning" breaks
     onto two lines, which reads as a mistake. Keep it on one line -- it fits
     even at 320px, the narrowest phone still in circulation. The pill is the
     only direct <a> child of nav (the three links sit inside the
     [data-desktop-nav] wrapper), and its href differs per page -- #contact,
     #inquire, index.html#contact -- so match on structure, not href.
     No !important needed here: white-space is not set inline. */
  header nav > a {
    white-space: nowrap;
  }
}