/* House Hack Jack - site chrome on phones (L19.14, 2026-09-23).
   Current version: 20260923a

   ONE LAYER, ONE FILE. Every page carries its own inline <style>, so until now a header change
   meant editing 245 files. This stylesheet is the shared layer for the header and the safe
   areas on phones; it is linked in <head> (so it applies before first paint and causes no
   layout shift) and loads AFTER each page's inline styles, so equal-specificity rules here win.

   WHY: measured 2026-09-23 while scrolled, the sticky header was 190 of 568 px on an iPhone SE
   (33%) and 235 of 609 on the homepage; with the Call/Text/Search bar, 43-47% of the screen was
   permanent chrome while someone read. The 12-link nav wrapped into three rows.

   WHAT, at 999px and under (the header row) / 820px and under (the slide-away):
   - the links become ONE row that scrolls sideways, with Client Login pinned at the right edge
     (position:sticky inside the scroller), so every link is still one tap away;
   - the header's social icons (homepage only) are hidden here - the footer carries them;
   - assets/mobile-cta.js slides the header away while reading down and brings it back on any
     scroll up (transform only, so no layout shift). This file owns the transition.
   Desktop (821px+) is untouched by the header rules: they all sit inside the media query.
   SAFE AREAS (all widths): viewport-fit=cover (added with this file so the call bar clears the
   iPhone home indicator) also lets content run under the notch in landscape, where Safari used to
   inset the page itself. The root element takes the side insets back (env() is 0 everywhere else),
   and the Ask Jack launcher moves in by the same amount. Attacker review 2026-09-23.
   ⛔ Read each page's own header rules before changing these (hard rule, CLAUDE.md). */
/* Slide-away is for PHONES (<=820px), matching the call bar. */
@media (max-width: 820px) {
  header.nav { transition: transform .22s ease; will-change: transform; }
  header.nav.hhj-nav-away { transform: translateY(-100%); }
}
/* L19.13b 2026-09-23: the one-row nav runs to 999px, not 820. Between 821 and 999px (iPad
   portrait is 834) every page fell back to its DESKTOP header, whose 12 links do not fit: the
   homepage scrolled sideways to 1260-1309px and the calculators and /sellers-guide overflowed
   too, identically on the live site. Pages' own >=1000px rules take over from there. */
@media (max-width: 999px) {
  header.nav .row {
    flex-wrap: wrap; height: auto; row-gap: 2px;
    padding-top: 8px; padding-bottom: 0;
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  }
  header.nav .brand-logo { line-height: 1.15; }
  header.nav .nav-links {
    order: 3; width: 100%; margin: 0;
    display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
    gap: 0 18px; padding: 4px 0 8px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-padding-inline: 8px 136px;   /* a focused link is scrolled clear of the pinned Client Login (WCAG 2.4.11) */
    font-size: .86rem; white-space: nowrap;
  }
  header.nav .nav-links::-webkit-scrollbar { display: none; }
  header.nav .nav-links a { flex: 0 0 auto; padding: 8px 0; }
  header.nav .nav-links a.nav-login {
    position: sticky; right: 0; z-index: 1; margin-left: auto; padding: 6px 12px !important;
    box-shadow: -18px 0 14px -2px rgba(0, 0, 0, .55);
  }
  header.nav .nav-soc { display: none; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  header.nav { transition: none; }
}

/* Safe areas - every width. env() is 0 on devices without a notch, so this changes nothing there. */
html { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#hhjA { margin-right: env(safe-area-inset-right); }
@media (min-width: 821px) { #hhjA { margin-bottom: env(safe-area-inset-bottom); } }
