/* Crosson Insurance — site chrome: utility bar, sticky header + nav, footer, quote pill.
   Patterns 01-utility-bar, 02-header, 03-footer, 04-quote-pill. Ported from the static
   build at ae701e0 (design-canvas/_build_parts.py utility_bar/header/footer/sticky_pill);
   every inline style there is a class here. Behaviour classes (.wrap .util .util-hide
   .wm-rest .nav-desktop .nav-mobile #navtoggle #navpanel .navlink .nav-svc .nav-svc-menu
   .fgrid .fb-* .link .btn #quote-pill) are styled in style.css and driven by crosson.js. */

/* ---- token candidates (literals the target uses that have no token yet) ---- */
:root{ --cr-gap-util:20px;        /* CANDIDATE: used by utility-bar (row gap, right cluster gap) */
       --cr-util-pad-v:10px;      /* CANDIDATE: used by utility-bar (vertical padding) */
       --cr-gap-icon:8px;         /* CANDIDATE: used by utility-bar (phone icon to number) */
       --cr-gap-hdr:32px;         /* CANDIDATE: used by header (bar and row gap) */
       --cr-gap-brand:12px;       /* CANDIDATE: used by header + footer (logo to wordmark) */
       --cr-nav-ul-pad:3px;       /* CANDIDATE: used by header (navlink padding-bottom above the 2px underline) */
       --cr-gap-svc:6px;          /* CANDIDATE: used by header (Services label to chevron) */
       --cr-hit:44px;             /* CANDIDATE: used by header (hamburger hit area) + footer (social hit area) */
       --cr-r-toggle:10px;        /* CANDIDATE: used by header (hamburger radius) */
       --cr-panel-pad:14px 20px;  /* CANDIDATE: used by header (mobile panel row padding) */
       --cr-z-hdr:25;             /* CANDIDATE: used by header (sticky z-index) */
       --cr-z-pill:40;            /* CANDIDATE: used by quote-pill (fixed z-index) */
       --cr-gap-pill:10px;        /* CANDIDATE: used by quote-pill (label to arrow) */
       --cr-gap-fb:10px;          /* CANDIDATE: used by footer (brand column stack, title-to-rule) */
       --cr-ftr-head-mb:22px;     /* CANDIDATE: used by footer (column title block margin, social row margin-top) */
       --cr-rule-h:3px;           /* CANDIDATE: used by footer (accent rule height under column titles) */
       --cr-gap-ftr-links:12px;   /* CANDIDATE: used by footer (link list gap) */
       --cr-gap-ftr-contact:8px;  /* CANDIDATE: used by footer (contact rows gap) */
       --cr-ftr-pad-b:28px;       /* CANDIDATE: used by footer (bottom padding) */
       --cr-ftr-div-pt:24px;      /* CANDIDATE: used by footer (padding above copyright, below divider) */
       --cr-legal-mt:10px;        /* CANDIDATE: used by footer (legal row margin-top) */
       --cr-legal-dot-pad:10px;   /* CANDIDATE: used by footer (padding either side of the legal separators) */
       --cr-track-snug:-0.01em;   /* CANDIDATE: used by footer (column title tracking) */
       --cr-ftr-copy:#7E9BBD;     /* CANDIDATE: used by footer (copyright line colour) */
       --cr-gap-social:4px;       /* CANDIDATE: used by footer (social icon gap) */
}

/* ---- page frame: the static build's .pageroot is a flex column with an ink filler
   after the footer so the ink runs to the bottom of short pages. GP's .site-footer
   wrapper (footer.php) plays the filler here. ---- */
body { display:flex; flex-direction:column; min-height:100dvh; }
body > * { flex:none; }
.site-footer { flex:1 0 auto; background:var(--ink); }

/* ---- 01 utility bar ---- */
.cr-util { display:flex; align-items:center; justify-content:space-between; gap:var(--cr-gap-util);
  padding:var(--cr-util-pad-v) var(--pad-h); background:var(--ink); color:var(--on-dark); font-size:var(--fs-ui); }
.cr-util-row { display:flex; align-items:center; gap:var(--cr-gap-util); width:100%; }
.cr-util-strap { font-weight:var(--w-semi); }
.cr-util-right { display:flex; align-items:center; gap:var(--cr-gap-util); }
.cr-util-phone { display:flex; align-items:center; gap:var(--cr-gap-icon); font-weight:var(--w-semi); }
.cr-util-phone svg { flex:none; }
.cr-util-hours { color:var(--on-dark-muted); }

/* ---- 02 header ---- */
.cr-hdr { position:sticky; top:0; z-index:var(--cr-z-hdr); }
.cr-hdr-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--cr-gap-hdr);
  padding:var(--pad-hdr-v) var(--pad-h); background:var(--page); border-bottom:1px solid var(--border); }
.cr-hdr-row { display:flex; align-items:center; justify-content:space-between; gap:var(--cr-gap-hdr); width:100%; }
.cr-brand { display:flex; align-items:center; gap:var(--cr-gap-brand); color:var(--text); }
.cr-brand-logo { display:block; flex:none; height:var(--logo-h); width:auto; }
.cr-brand-mark { font-family:var(--display); font-size:var(--fs-wordmark); font-weight:var(--w-black);
  letter-spacing:var(--track-tight); color:var(--text); white-space:nowrap; }
.cr-hdr .navlink { color:var(--muted); border-bottom:2px solid transparent; padding-bottom:var(--cr-nav-ul-pad); }
.cr-hdr .navlink.cr-nowrap { white-space:nowrap; }
.cr-nav-svc { color:var(--muted); }
.cr-nav-svc-btn { display:flex; align-items:center; gap:var(--cr-gap-svc); cursor:pointer;
  padding-bottom:var(--cr-nav-ul-pad); border-bottom:2px solid transparent; }
.cr-navtoggle { width:var(--cr-hit); height:var(--cr-hit); padding:0; margin:0; border:1px solid var(--border); background:var(--page);
  color:var(--text); border-radius:var(--cr-r-toggle); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.cr-navpanel { background:var(--page); border-bottom:1px solid var(--border); box-shadow:var(--shadow); }
.cr-navrow { display:block; padding:var(--cr-panel-pad); font-size:var(--fs-ui); font-weight:var(--w-semi);
  color:var(--muted); border-bottom:1px solid var(--border); }
/* Current page. The static build coloured the active link per page; here the header is one
   element on every page, so the state comes from body classes: WP's own .home / .blog /
   .single-post, plus a `cr-page-<slug>` body class for pages (added by the theme's inc/). */
body.home .cr-nl-home, body.blog .cr-nl-blog, body.single-post .cr-nl-blog,
body.cr-page-about .cr-nl-about, body.cr-page-answer-engine .cr-nl-answer-engine, body.cr-page-contact .cr-nl-contact,
body.cr-page-home-insurance .cr-nl-home-insurance, body.cr-page-auto-insurance .cr-nl-auto-insurance,
body.cr-page-life-insurance .cr-nl-life-insurance, body.cr-page-business-insurance .cr-nl-business-insurance { color:var(--text); }
body.home .navlink.cr-nl-home, body.blog .navlink.cr-nl-blog, body.single-post .navlink.cr-nl-blog,
body.cr-page-about .navlink.cr-nl-about, body.cr-page-answer-engine .navlink.cr-nl-answer-engine,
body.cr-page-contact .navlink.cr-nl-contact { border-bottom-color:var(--accent); }
body.cr-page-home-insurance .cr-nav-svc, body.cr-page-auto-insurance .cr-nav-svc,
body.cr-page-life-insurance .cr-nav-svc, body.cr-page-business-insurance .cr-nav-svc { color:var(--text); }

/* ---- 03 footer ---- */
.cr-ftr { background:var(--ink); color:var(--on-dark); padding:var(--pad-ftr-v) var(--pad-h) var(--cr-ftr-pad-b); --link-hover:var(--on-dark); }
.cr-fb-brand { display:flex; flex-direction:column; gap:var(--cr-gap-fb); }
.cr-fb-mark { display:flex; align-items:center; gap:var(--cr-gap-brand); }
.cr-fb-logo { display:block; flex:none; }
.cr-fb-wordmark { font-family:var(--display); font-size:var(--fs-ftr-mark); font-weight:var(--w-black); letter-spacing:var(--track-tight); color:var(--on-dark); }
.cr-fb-desc { --mw:42ch; font-size:var(--fs-ui); line-height:var(--lh-body); color:var(--on-dark-muted); }
.cr-ftr-head { display:flex; flex-direction:column; gap:var(--cr-gap-fb); margin-bottom:var(--cr-ftr-head-mb); }
.cr-ftr-title { font-family:var(--display); font-size:var(--fs-ui); font-weight:var(--w-bold); letter-spacing:var(--cr-track-snug); color:var(--on-dark); }
.cr-ftr-rule { width:var(--rule-w); height:var(--cr-rule-h); border-radius:2px; background:var(--accent-hi); }
.cr-ftr-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--cr-gap-ftr-links); font-size:var(--fs-ui); }
.cr-ftr-links li { margin:0; padding:0; }
.cr-ftr-links a, .cr-ftr-contact a, .cr-ftr-legal a { color:var(--on-dark-muted); }
.cr-ftr-contact { display:flex; flex-direction:column; gap:var(--cr-gap-ftr-contact); font-size:var(--fs-ui); line-height:var(--lh-ui); color:var(--on-dark-muted); }
/* Approved deviation (Lorena, 2026-09-09): social row hidden until a URL exists. */
.cr-social { margin-top:var(--cr-ftr-head-mb); display:none; }
.cr-social .social { display:flex; align-items:center; gap:var(--cr-gap-social); }
.cr-social-btn { display:inline-flex; align-items:center; justify-content:center; width:var(--cr-hit); height:var(--cr-hit); color:var(--on-dark-muted); }
.cr-social-btn svg { display:block; flex:none; }
.wp-block-group.cr-ftr-wrap > .cr-ftr-bottom { margin-top:var(--pad-ftr-div); padding-top:var(--cr-ftr-div-pt); border-top:1px solid var(--glass-16);
  text-align:center; font-size:var(--fs-ui); color:var(--cr-ftr-copy); }
.wp-block-group.cr-ftr-bottom > .cr-ftr-legal { margin-top:var(--cr-legal-mt); }
.cr-ftr-dot { padding:0 var(--cr-legal-dot-pad); }

/* ---- 04 quote pill ---- */
.cr-pill-wrap { display:contents; }
#quote-pill.cr-pill { position:fixed; right:var(--pill-right); bottom:var(--pill-bottom); z-index:var(--cr-z-pill);
  background:var(--accent); color:var(--on-dark); font-family:var(--sans); border-radius:var(--r-btn); padding:var(--pill-pad);
  font-size:var(--fs-ui); font-weight:var(--w-semi); display:inline-flex; align-items:center; gap:var(--cr-gap-pill);
  white-space:nowrap; box-shadow:var(--shadow-lift); }
#quote-pill.cr-pill svg { flex:none; }

/* Nav and footer regroup at 1007 and the mobile ramp at 767 are already handled by
   style.css (.nav-desktop/.nav-mobile/#navpanel, .fgrid/.fb-*, .util/.util-hide, .wm-rest). */
@media (max-width:1007px) {}
@media (max-width:767px) {}