/* House Hack Jack - site chrome on phones (L19.14, 2026-09-23).
   Current version: 20261016b  (L58.25 1000-1199 px header band + homepage header socials hidden on desktop; previous 20261016a L58.5 phone nav edge fade; previous 20261010a L48.7 links in text underlined, h2 section label; L49.2 trust-strip slot; previous 20261002a L35.4 Client Login onto the brand row)

   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, and Client Login sits on the BRAND row at the
     right edge (position:absolute against .row, so it never covers a nav link - L35.4 2026-10-02:
     the old sticky-in-scroller pin hid "Tools" at 390px and left "Contact" unreachable at 834px);
   - 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;   /* Client Login no longer overlaps the scroller (L35.4), so no right inset is needed */
    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; }
  /* L58.5 (round 114): at 390 px the link row is ~800 px in a 358 px box with no hint it scrolls.
     A 28 px fade over the right edge of the link row says 'more this way'. It is an OVERLAY on .row, not a
     mask on .nav-links: a mask clips everything outside the scroller, and Client Login sits outside it (review r114).
     The ::after spacer (+ the 18 px gap) lets Contact scroll clear of the fade; a spacer, not end padding, for older Safari. */
  header.nav .nav-links::after { content: ""; flex: 0 0 10px; }
  header.nav .row:has(> .nav-links)::after { content: ""; position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: 0;
    width: 28px; height: 44px; pointer-events: none; z-index: 0;
    background: linear-gradient(to right, transparent, var(--hhj-nav-fade, rgb(27,30,36))); }
  header.nav .row { position: relative; }
  /* L35.4: out of the scroller's flow, onto the brand row (5px top + 1.2 line-height = centered on
     a one-line brand; 3px clear of the nav links below). Measured 390 + 834: 0 links covered. */
  header.nav .nav-links a.nav-login {
    position: absolute; top: 5px; right: max(16px, env(safe-area-inset-right)); z-index: 1;
    margin-left: 0; padding: 6px 12px !important; line-height: 1.2;
  }
  header.nav .nav-soc { display: none; }
}
/* L58.25 (round 114): 1000-1199 px (iPad landscape is 1024). Pages switch to their desktop header at 1000 px, but
   12 links + Client Login do not fit until ~1200: links wrapped and Client Login fell below the header on the
   homepage, /tools, /listings and listing pages. Tighter type and gaps in this band only; 1200+ is untouched. */
@media (min-width: 1000px) and (max-width: 1199px) {
  header.nav .nav-links { gap: 9px !important; flex-wrap: nowrap !important; }
  header.nav .nav-links a, header.nav nav.links a { font-size: .78rem !important; white-space: nowrap; }
  header.nav .nav-links a.nav-login { padding: 7px 12px !important; }
  header.nav .brand-logo { white-space: nowrap; }
}
/* L58.25: the homepage is the only page with header social icons (.nav-soc). With 12 links + Client Login in a
   1240 px row they never fit on the first line at ANY desktop width: they wrapped onto a second line that hung out of
   the 84 px header across the hero (and pushed the logo to the top edge). Hidden at every width, as below 1000 px;
   the homepage body and footer carry the same social links. */
@media (min-width: 1000px) { header.nav .nav-soc { display: none; } }
@media (min-width: 1000px) and (max-width: 1099px) {
  header.nav .nav-links { gap: 5px !important; }
  header.nav .nav-links a, header.nav nav.links a { font-size: .74rem !important; }
}
@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); } }

/* L48.7 (round 97): links inside paragraphs and the legal footer are underlined, not told apart by color alone (WCAG 1.4.1).
   Links that already draw a border-bottom underline keep it; buttons and cards (links with a class) are untouched. */
p a:not([class]):not([style*="border-bottom"]), .legal a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* a section label promoted to a real h2 keeps the label's own size and spacing */
:where(h2.section-label) { margin-top: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

/* L49.2 (round 97): space for the review strip above a lead form, reserved before trust-strip.js fills it,
   so the form never moves after first paint. Heights measured 10/10 on the live strip: 136px at 768+,
   235-255px at 412, 273-295px at 360. */
.hhj-trust-slot { display: block; max-width: 760px; margin: 0 auto 14px; min-height: 136px; }
@media (max-width: 767px) { .hhj-trust-slot { min-height: 245px; } }
@media (max-width: 380px) { .hhj-trust-slot { min-height: 280px; } }

/* L49.6 (round 97): screen-reader-only text (a section heading that keeps heading levels in order without changing the look) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* listing footer: phone and email links inside the agent info line are underlined */
.binfo a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }