/* ============================================================================
   Legacy Roofing SRQ — microsites shared TYPE + COLOUR tokens.

   SINGLE SOURCE OF TRUTH FOR FONTS AND COLOURS. Edit this file only — every
   microsite page (homepage, area pages, service pages, community pages, about,
   commercial, hoa, warranty) links this and updates at once.

   To switch fonts:
     1. change the @import below to load the new family's weights
     2. change --font-display / --font-body to its name

   To re-colour the site:
     - change any hex in the palette block below. Every page references these
       as var(--navy), var(--blue), etc., so nothing else needs touching.

   ONE EXCEPTION: the <meta name="theme-color"> address-bar tint is plain HTML
   and cannot reference a CSS variable. Generated pages get it from the
   THEME_COLOR constant in _generator/build.py (keep it = --navy below); the
   three static pages (commercial/hoa/warranty) carry the navy hex inline.

   NOTE: the public Instant Roof Quote widget (hermes/static/quote_widget.html)
   does NOT use this file — it embeds cross-origin on the Hibu site and inlines
   its own tokens. Font/colour changes there must be made separately (and the
   PIL-rendered MMS card colours live in hermes/quote/quote_card.py).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Palette — SINGLE SOURCE OF TRUTH FOR COLOURS */
  --blue:#2B77C9; --blue-d:#2265ae; --blue-lt:#5EA9E4; --tint:#EEF4FC;
  --gold:#F4A820; --navy:#12243E; --charcoal:#272D36; --slate:#5C6875;
  --border:#E2E6EA; --bg:#F8F9FA;

  /* Shared shape token */
  --radius:10px;
}

/* Body = reading font; headings / buttons / eyebrows / big numbers = display. */
body{ font-family: var(--font-body); }
h1, h2, h3, h4, .btn, .kick, .eyebrow, .big{ font-family: var(--font-display); }

/* Shared top-nav menu for every interior page (the homepage keeps its own inline
   nav, which overrides this). Right-aligned next to the phone/CTA; hidden on
   narrow screens, where the logo + footer cover navigation. */
.nav-links{ display:flex; gap:22px; margin-right:24px; flex-wrap:wrap; align-items:center; }
.nav-links a{ font-weight:600; font-size:15px; color:var(--navy); text-decoration:none; white-space:nowrap; }
.nav-links a:hover{ color:var(--blue); }
@media(max-width:900px){ .nav-links{ display:none; } }