/* main.css — the global stylesheet every page loads.
 *
 * RETUNED 2026-09-08 (Step 1, feat/sitewide-chrome). The palette, typography
 * and focus treatment below are the approved homepage's design system,
 * promoted from that page's scoped <style> block to :root so the other pages
 * inherit it WITHOUT being restructured. Approved as "Option B" by Patrick on
 * 2026-09-08: retune typography, palette, backgrounds, links and spacing
 * tokens; do not redesign page bodies or move content. Deeper interior-page
 * redesign is a later project.
 *
 * ── REACH. Read this before assuming a token change here is sitewide. ──
 *   FULLY INHERITED (16 pages)  /guides/*  /neighborhoods/*  /about/*
 *   MOSTLY INHERITED            /home-value/thanks/  /homes-for-sale/thanks/
 *                               (small local <style> blocks, no token shadowing)
 *   NOT INHERITED AT ALL        /home-value/  /homes-for-sale/
 *
 * Those last two redefine --ink, --muted, --cream and --line inside their own
 * .hv / .bh scope and carry ~30 hardcoded hex literals each, so nothing in
 * this file reaches them. Their green body palette is DELIBERATELY unchanged
 * (approved 2026-09-08) and is a separate future project with its own
 * conversion QA. They are the highest-converting, most heavily scripted pages
 * on the site. Do not "fix" them from here.
 *
 * The homepage also redefines these tokens inside .pv, so it is unaffected by
 * this block. That is intentional — .pv is the source these values were copied
 * FROM. If either changes, change both.
 *
 * Previously this file opened with the nav rules and had the :root block
 * jammed onto the closing brace of .site-footer-meta ("}:root {") from a bad
 * concatenation. Tokens now come first, which is also the readable order.
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Brand — mirrors .pv in src/pages/index.astro */
  --navy:       #1b2a4a;
  --navy-deep:  #14203a;
  --brass:      #c9a96e;
  /* --brass is 2.04:1 on cream. NEVER use it as text on a light ground.
     --brass-dark is the readable substitute: 5.47:1 on cream, so it clears AA
     for the 0.92rem nav links. It was #8a6d33 until Step 6, which measured
     4.44:1 — near miss, still a fail. It also serves as the focus-ring colour
     on light grounds; dark surfaces override to --brass (see SiteFooter). */
  --brass-dark: #7a5f2c;
  --cream:      #f7f4ef;

  /* Applied roles */
  --ink:    #22303f;      /* 12.25:1 on cream */
  --muted:  #55606e;      /* 5.83:1 on cream. NOT the homepage's #6b7a8c, which is
                             4.00:1 and would fail AA for .compliance / .byline. */
  --line:   #e2dcd2;
  --panel:  #ffffff;
  --accent: var(--navy);
  --bg:     var(--cream);

  /* Long-form reading measure. UNCHANGED at 760px — the guides are read, not
     scanned, and the homepage's 1180px would hurt them. */
  --max: 760px;

  --font-body:    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);   /* was Georgia */
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;               /* unchanged */
}

main { max-width: var(--max); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* Heading SIZES and MARGINS are unchanged. Only the face and colour move. */
h1, h2, h3 { font-family: var(--font-display); color: var(--navy); }
h1 { font-size: 2rem;   line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; }

p { margin: 0 0 1rem; }

a { color: var(--navy); text-underline-offset: .12em; }
a:hover { color: var(--brass-dark); }

/* ============================================================
   ACCESSIBILITY
   Added 2026-09-08. The site previously had ZERO :focus rules in any
   stylesheet — keyboard users got only the browser default, which is close to
   invisible on both the old teal and the new navy.
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--brass-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link. Styled here in Step 1; RENDERED from Step 6 by SiteHeader, which
   puts it first in the DOM. Its target is #main — index.astro (on .pv) and
   about/index.astro (on <main>) both carry id="main" tabindex="-1" so the
   anchor can actually move focus, not just scroll. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  padding: .75rem 1.25rem;
  border-radius: 0 0 2px 0;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }

/* The skip target is focusable only so the link can land on it. Suppress the
   ring there — the visible result of following the link is the page scrolling
   to the content, and a box around the whole main region reads as an error. */
#main:focus { outline: none; }

/* ============================================================
   INTERIOR PAGE COMPONENTS
   Skinned, not restructured. Every size, margin and padding below is
   unchanged from the pre-retune file; only colours move.
   ============================================================ */
.byline  { color: var(--muted); font-size: .95rem; font-style: italic; margin-bottom: 1.5rem; }
.updated { color: var(--muted); font-size: .9rem; }
.bluf    { font-size: 1.08rem; }

table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-family: var(--font-body); font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
th { background: #efe9dd; }        /* was #f4f4f2 (cool grey) */

/* ============================================================
   RESPONSIVE CONTENT MEDIA — Step 7.1, 2026-09-08
   Both fixes below address overflows that predate this project and are
   reproducible on production. Neither changes desktop rendering.
   ============================================================ */

/* Content images had no width ceiling, so the 800px bio portraits pushed the
   document to 820px inside a 390px viewport. height:auto keeps them
   proportional rather than squashing them to a fixed attribute height.

   Deliberately does NOT reach:
     - the homepage, where .pv img (0,1,1) sets the same values and the hero's
       width:100% wins outright;
     - /home-value/ and /homes-for-sale/, where .hv/.bh size .avatar by class
       (0,2,0), which outranks this bare element selector. */
img { max-width: 100%; height: auto; }

/* Wide tables get their own horizontal scroll container so the PAGE never
   scrolls sideways. BaseLayout wraps qualifying tables at runtime and marks
   the wrapper focusable only when it actually overflows, so no pointless tab
   stop appears on desktop. Without JS, tables behave exactly as they do today
   — this is an improvement or a no-op, never a regression. */
.table-scroll { max-width: 100%; overflow-x: auto; margin: 1.5rem 0; }
.table-scroll > table { margin: 0; }

.faq { margin-top: 2.5rem; border-top: 2px solid var(--line); padding-top: 1rem; }
.faq-item { margin-bottom: 1.2rem; }
.faq-item h3 { margin-bottom: .2rem; }

.cta {
  background: #efe9dd;                        /* was #f4f4f2 */
  border-left: 4px solid var(--brass);        /* was var(--accent), i.e. teal */
  padding: 1.2rem 1.4rem;
  margin: 2.5rem 0 1rem;
}

.compliance {
  color: var(--muted);
  font-size: .82rem;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* The Phase 2 (Aug 2026) nav CSS — .site-header, .site-nav, .site-logo,
   .nav-drop, .site-footer, .site-footer-meta — was deleted here in Step 10
   along with Header.astro and Footer.astro. All chrome styling now lives
   inside SiteHeader.astro and SiteFooter.astro, scoped to those components.

   Note for anyone searching: SiteHeader's menu panel uses id="site-nav".
   That is an ID and has nothing to do with the removed .site-nav class. */