/* ============================================================================
   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); }
/* Hamburger toggle (injected by assets/nav.js). Hidden on desktop. */
.nav-toggle{ display:none; align-items:center; }
/* Logo must never be shrunk/squished by the flex header row (the global
   img{max-width:100%} compresses it once the nav row gets tight). */
.nav .logo{ flex:0 0 auto !important; }
.nav .logo img{ max-width:none !important; width:auto !important; }
/* Narrow screens (<=1100px): links collapse into a hamburger dropdown so the
   header stays single-row (logo + Free Estimate CTA + phone). The full nav only
   shows when there's room for it on one line. */
@media(max-width:1100px){
  .nav-toggle{
    display:inline-flex !important; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:40px; padding:9px 10px; margin-left:8px; flex:0 0 auto;
    background:#fff; border:1px solid var(--border); border-radius:10px; cursor:pointer; }
  .nav-toggle span{ display:block; width:100%; height:2.5px; background:var(--navy); border-radius:2px; transition:transform .2s, opacity .2s; }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .nav{ position:relative; }   /* anchor for the dropdown */
  .nav-links{
    display:none !important; position:absolute; top:100%; right:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:2px; margin:10px 0 0; padding:8px;
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:0 14px 36px rgba(18,36,62,.16); min-width:210px; }
  .nav.open .nav-links{ display:flex !important; }
  .nav-links a{ padding:12px 14px; border-radius:8px; font-size:15px; white-space:nowrap; }
  .nav-links a:hover{ background:var(--bg); }
}

/* Desktop (>=1101px): keep the full nav on ONE line — no wrap, phone + CTA stay
   intact, tighter spacing. Rating badge only on wide screens so the row isn't
   crowded. !important beats the per-page inline header styles. */
@media(min-width:1101px){
  .nav-links{ flex-wrap:nowrap !important; gap:16px !important; }
  .nav-links a{ font-size:14.5px !important; }
  .nav-phone{ white-space:nowrap !important; }
  .nav .btn{ white-space:nowrap !important; }
}
@media(max-width:1279px){ .rating-badge{ display:none !important; } }

/* Sticky mobile call-to-action bar (Free Estimate / Call) — shown on phones on
   every page. Markup: <div class="sticky-call">…</div> near </body>. Pages that
   still carry their own inline copy of this rule are unaffected (identical). */
.sticky-call{ display:none; }
@media(max-width:680px){
  .sticky-call{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; }
  .sticky-call a{ flex:1; text-align:center; padding:15px; font-weight:800; color:#fff; text-decoration:none; }
  .sticky-call .c1{ background:var(--blue); }
  .sticky-call .c2{ background:var(--navy); }
  body{ padding-bottom:54px; }
}