/* ============================================================================
   frannet-core.css — Phase 2 shared foundation (tokens + base + chrome components)
   ONE cached, source-of-truth stylesheet for the site chrome that every coded
   template loads (homepage, consultant, consultant blog index + post, standalone).
   Replaces the per-page inline copies of the chrome CSS that had drifted across
   front-page.css and consultant.css. Chrome MARKUP lives in inc/partials/
   site-header.php + site-footer.php; this file styles it.

   Extracted verbatim from the canonical homepage chrome (front-page.css, measured
   1:1 to live). Per-page-type appearance is preserved via the scoped `.fn-chrome-c`
   variants at the end (consultant-adjacent templates add that body class), so no
   live page changes appearance — only the source of truth is unified.

   Hand-authored; keep lean. Load order: this <link> must precede any page-specific
   inline <style> so page CSS can reference these tokens and override where needed.
   @package frannet
   ============================================================================ */

/* ---- Tokens (union of the homepage + consultant palettes; a11y-correct values baked in) ---- */
:root{
  --ink:#242424;
  --navy:#0e2340;
  --blue:#1a4fa3;
  --red:#d21f27;
  --red-dark:#b91b22;
  --util:#c2410c;      /* WCAG-AA burnt-orange (was #f6602d, 3.22:1 fail) */
  --line:#e7e7e7;
  --muted:#5b6472;
  --bg-soft:#f6f7f9;
  --max:1400px;
  --font:'Poppins',Helvetica,Arial,sans-serif;
}

/* ---- Base ---- */
*{box-sizing:border-box}
/* Base font for the CHROME. The header/utility/footer/mobile-nav partials are SIBLINGS of
   <main class="sa">, so standalone.css's `.sa{font-family}` never reaches them, and the
   Divi/theme `body{font-family}` that used to cover them site-wide is dequeued on standalone
   pages — leaving the chrome in the browser's Times default. Set it here. Homepage
   (front-page.css) + consultant (consultant.css) each declare `body{}` after this file, so
   their appearance is unchanged; only standalone pages lacked a source. */
body{font-family:var(--font);color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:10px;background:#fff;padding:10px 16px;border-radius:6px;z-index:100}

/* ---- Base links (framework anchor reset) ----
   The Divi/theme CSS supplied a site-wide `a{color;text-decoration:none}` reset that the
   chrome nav + content links relied on. It was NOT carried into this file during the chrome
   extraction, so standalone pages (which load core.css but NOT style.css) fell back to the
   browser's underlined blue default on every nav + prose link. Supply it here. The homepage
   (front-page.css) and consultant templates (consultant.css) each redeclare `a{}` AFTER this
   file loads, so their link colour is unchanged; only standalone pages were missing a source. */
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:none}

/* ---- Buttons ---- */
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:500;font-size:18px;padding:10px 20px;border-radius:5px;line-height:1.2;transition:filter .15s ease,transform .15s ease}
.btn:hover{filter:brightness(.93);text-decoration:none;color:#fff;transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid #c9ccd2;font-weight:500}
.btn-outline:hover{filter:none;color:var(--ink);border-color:var(--ink)}
.btn-outline.red{color:var(--red);border-color:var(--red)}

/* ---- Utility bar ---- */
.utility{border-bottom:1px solid var(--line)}
.utility .wrap{display:flex;justify-content:flex-end;gap:28px;padding:9px 0;width:80%;max-width:1400px;margin:0 auto;font-size:14px;font-weight:500}
.utility a{color:var(--util)}

/* ---- Header + primary nav ---- */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:15px 0;width:80%;max-width:1400px;margin:0 auto}
.nav .logo img{width:285px;height:auto}
.menu{display:flex;align-items:center;gap:26px;font-weight:500;font-size:16px}
.menu .links{display:flex;gap:26px}
.menu .links a{color:var(--ink)}
.menu .cta{display:flex;gap:12px}
.caret{font-size:.7em;opacity:.7;margin-left:3px}

/* ---- Mega menu ---- */
.has-mega{position:relative;display:flex;align-items:center}
.mega{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 26px 60px rgba(10,42,102,.16);padding:26px 30px;display:grid;grid-template-columns:repeat(5,minmax(148px,1fr));gap:26px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;z-index:70;width:max-content;max-width:92vw}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
.mega .mega-h{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:var(--blue);margin:0 0 12px;font-weight:700}
.mega a{display:block;color:var(--ink);font-size:.9rem;font-weight:500;padding:6px 0;line-height:1.3}
.mega a:hover{color:var(--red);text-decoration:none}

/* ---- Social icons (footer) ---- */
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;transition:background .2s}
.social a:hover{background:var(--red)}
.social svg{width:16px;height:16px;fill:#c7d2e6}
.social a:hover svg{fill:#fff}

/* ---- Mobile nav (hamburger drawer) ---- */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{width:26px;height:3px;background:var(--ink);border-radius:2px}
.m-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:85}
.m-overlay.open{display:block}
.mobile-nav{position:fixed;top:0;right:0;height:100%;width:min(330px,86vw);background:#fff;z-index:90;box-shadow:-12px 0 40px rgba(0,0,0,.18);padding:70px 26px 30px;overflow-y:auto;transform:translateX(106%);transition:transform .3s ease}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{display:block;color:var(--ink);font-weight:500;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;text-decoration:none}
.mobile-nav .m-sub-title{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--blue);margin-top:14px;font-weight:700}
.mobile-nav .sub a{padding:7px 0 7px 14px;font-size:14.5px;color:#555;border:0}
.m-close{position:absolute;top:18px;right:20px;font-size:1.6rem;background:none;border:0;cursor:pointer;color:var(--ink);line-height:1}
.link-strong{color:var(--red);font-weight:600}

/* ---- Footer ---- */
footer{background:var(--navy);color:#c7d2e6;padding:56px 0 28px;font-size:15px}
footer a{color:#c7d2e6}
footer a:hover{color:#fff}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr 1.2fr;gap:26px}
footer h2{color:#fff;font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.3}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
.fimg img{width:170px;filter:brightness(0) invert(1)}
.phone{color:#fff;font-weight:600;margin:16px 0}
.phone a{color:var(--red)}
.disclaimer{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;font-size:12.5px;color:#8ea0be;line-height:1.6}

/* ---- Chrome a11y (WCAG-AA contrast + visible keyboard focus) ---- */
footer .phone a,footer a.link-strong{color:#ff7a70}
footer a.link-strong{text-decoration:underline}
footer p:not(.phone):not(.disclaimer){color:#c7d2e6}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #1a4fa3;outline-offset:2px}

/* ---- Chrome responsive (source-order matters: overrides the base chrome above) ---- */
.menu .links a,.menu .cta a,.has-mega>a{white-space:nowrap}
.mega-h{white-space:nowrap}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:960px){.mega{display:none}}
@media(max-width:960px){.menu .links{display:none}.menu .cta{display:none}.utility{display:none}.hamburger{display:flex}}
@media(min-width:961px) and (max-width:1608px){
  .menu{font-size:14px;gap:14px}
  .menu .links{gap:14px}
  .nav{gap:14px}
  .nav .logo img{width:210px}
  .menu .cta a{padding:8px 12px;font-size:13px}
}

/* ============================================================================
   Page-type chrome variants — preserve each coded template's current live look.
   Consultant-adjacent templates (single-franchise_consultant, consultant blog
   index + post) add body class `fn-chrome-c`. These re-apply the two deliberate
   deviations from the homepage chrome so no live consultant page changes:
     1. the utility bar is hidden (kept off the top of lead pages)
     2. the logo renders at its smaller 190px consultant size
   Everything else (footer, buttons, mega, mobile drawer) unifies to canonical.
   ============================================================================ */
body.fn-chrome-c .utility{display:none}
body.fn-chrome-c .nav .logo img{width:190px}
@media(min-width:961px) and (max-width:1608px){
  body.fn-chrome-c .nav .logo img{width:190px}
}