/* ==========================================================================
   Generations Auto Glass — shared site CSS
   --------------------------------------------------------------------------
   Scope note: every page ships its OWN scoped <style> (verbatim custom-coded
   blocks: .gag-*, .wsr-*, .agr-*, …). This file deliberately does NOT restyle
   those. What lives here:
     1. Global reset + old-platform-replacement defaults (the old stack set
        body font + a{text-decoration:none} globally; without these the legal
        page falls back to serif with underlined links, and full-bleed
        sections get 8px edge slivers from the default body margin).
     2. Skip link (WCAG).
     3. The visible breadcrumb bar (JSON-LD comes from includes/head.php; the
        bar is inserted by /assets/js/breadcrumb.js from the same trail).
   Fonts (@font-face, Barlow + Inter, self-hosted) live in fonts.css.
   ========================================================================== */

html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #1e2d3d;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* ── Skip link — visually hidden until focused ─────────────────────────── */
.gag-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #0b1f45;
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font: 700 14px 'Inter', sans-serif;
}
.gag-skip:focus { left: 0; }

/* ── Breadcrumb bar (inserted before <main> by breadcrumb.js) ──────────────
   AA note: link color #1565c0 clears 4.5:1 on the #f0f4f8 strip; the muted
   current-page color #4a5a6d clears it too. Do not swap in the brand sky
   (#0ea5e9) here — it fails AA at this size on a light background. */
.gag-bc {
  background: #f0f4f8;
  border-bottom: 1px solid #e2e8f0;
  font-family: 'Inter', sans-serif;
}
.gag-bc__list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.gag-bc__item { display: flex; align-items: center; gap: 4px; }
.gag-bc__item + .gag-bc__item::before {
  content: "›";
  color: #94a3b8;
  padding: 0 4px;
}
.gag-bc__link { color: #1565c0; font-weight: 600; min-height: 24px; display: inline-flex; align-items: center; }
.gag-bc__link:hover { text-decoration: underline; }
.gag-bc__current { color: #4a5a6d; min-height: 24px; display: inline-flex; align-items: center; }

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Author card (wj-author-box) ───────────────────────────────────────────
   Structure is shared across the fleet; the colours below are LOCAL brand —
   this is the "shared structure, LOCAL brand" case, so the block is copied
   and recoloured rather than pulled from the shared library.
   Markup is GENERATED from _inc/site.md into _inc/author-box.html by
   `php _inc/aise.php author-box` — never hand-edit the card itself.

   AA note: the brand sky (#0ea5e9) fails 4.5:1 as small text on this wash, so
   the deep blue #1565c0 is used for links and the name, and #4a5a6d for muted
   copy — both clear AA at these sizes. Do not "brand-correct" them to sky. */
.wj-author-box{display:flex;gap:1.25rem;align-items:flex-start;background:#f0f4f8;border:1px solid #e2e8f0;border-left:4px solid #0ea5e9;border-radius:8px;padding:1.5rem;margin:2.5rem 0 0;font-family:'Inter',sans-serif}
.wj-author-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
.wj-author-text{min-width:0}
.wj-author-name{font-family:'Barlow',sans-serif;font-weight:800;font-size:1.05rem;margin:0 0 .15rem;color:#0b1f45}
.wj-author-name a{color:#0b1f45;text-decoration:none}
.wj-author-name a:hover{text-decoration:underline}
.wj-author-role{font-size:.85rem;color:#4a5a6d;margin:0 0 .6rem}
.wj-author-bio{font-size:.9rem;line-height:1.7;color:#4a5a6d;margin:0 0 .75rem}
.wj-author-highlights{margin:0 0 .85rem;padding-left:1.1rem;list-style:disc}
.wj-author-highlights li{font-size:.86rem;line-height:1.6;color:#4a5a6d;margin:.25rem 0}
.wj-author-social{display:flex;gap:1rem;flex-wrap:wrap}
.wj-author-social a{font-size:.78rem;font-weight:700;color:#1565c0;text-decoration:none;text-transform:uppercase;letter-spacing:.04em}
.wj-author-social a:hover{text-decoration:underline}
@media(max-width:640px){.wj-author-box{flex-direction:column}.wj-author-avatar{width:56px;height:56px}}

/* ⚠ Specificity guard for the avatar. Article/post templates carry a generic
   `.gag-article img{max-width:100%;height:auto;border-radius:10px}` at (0,1,1),
   which OUT-RANKS the single-class `.wj-author-avatar` at (0,1,0). The effect is
   not subtle: `height:auto` removes the reserved box, and because the card sits
   at the bottom of a long post the avatar is `loading="lazy"`, so it measured
   0x0 with a 10px radius instead of a 72px circle.
   Re-assert EVERY property the winning selector sets — height, max-width AND
   border-radius — at (0,2,0). Fixing only the radius would have left the
   collapse in place. */
.wj-author-box .wj-author-avatar{width:72px;height:72px;max-width:none;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
@media(max-width:640px){.wj-author-box .wj-author-avatar{width:56px;height:56px}}