/*
Theme Name:        Crosson Insurance
Description:       GeneratePress child theme for The Crosson Insurance Agency, North Richland Hills / Fort Worth, TX. Tokens in code, composition in the editor, no per-block overrides.
Author:            Caffo Media
Template:          generatepress
Version:           0.3.0
Requires at least: 6.5
Tested up to:      7.1
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       crosson-insurance
*/

/* =====================================================================
   1. TOKENS.  Single source of truth for everything that is not a colour.
   Colours are defined once in theme.json (settings.color.palette) and only
   ALIASED here, so the names the design uses (--accent, --ink ...) keep
   working while the value lives in one place. Scale tokens below are the
   desktop ramp; the mobile ramp is the @media block at the end of §1.
   Values: design-canvas/_build_shell.py T and SCALE at commit ae701e0.
   ===================================================================== */
:root {
  --page:var(--wp--preset--color--page); --surface:var(--wp--preset--color--surface);
  --surface2:var(--wp--preset--color--surface-2); --border:var(--wp--preset--color--border);
  --text:var(--wp--preset--color--text); --muted:var(--wp--preset--color--muted);
  --accent:var(--wp--preset--color--accent); --accent-ink:var(--wp--preset--color--accent-ink);
  --accent-hi:var(--wp--preset--color--accent-hi); --tint:var(--wp--preset--color--tint);
  --tint2:var(--wp--preset--color--tint-2); --ink:var(--wp--preset--color--ink);
  --on-dark:var(--wp--preset--color--on-dark); --on-dark-muted:var(--wp--preset--color--on-dark-muted);
  --accent-hover:var(--wp--preset--color--accent-hover); --accent-press:var(--wp--preset--color--accent-press);
  --ink-rgb:var(--wp--custom--ink-rgb);
  --display:var(--wp--preset--font-family--display);
  --sans:var(--wp--preset--font-family--sans);
  --shadow:0 2px 4px rgba(var(--ink-rgb),0.05), 0 8px 24px rgba(var(--ink-rgb),0.08);
  --shadow-lift:0 4px 10px rgba(var(--ink-rgb),0.07), 0 18px 44px rgba(var(--ink-rgb),0.13);
  --ease:cubic-bezier(0.23,1,0.32,1);
  --link-hover:var(--text);
  --row-hover-bg:var(--surface);
  --ghost-hover-bg:var(--surface);
  --hero-grad:linear-gradient(90deg, rgba(var(--ink-rgb),0.80) 0%, rgba(var(--ink-rgb),0.68) 52%, rgba(var(--ink-rgb),0.42) 100%);
  /* white-alpha surfaces used on dark grounds (trade-off box, FAQ cards) */
  --glass-06:rgba(255,255,255,0.06); --glass-16:rgba(255,255,255,0.16);
  --glass-28:rgba(255,255,255,0.28); --glass-82:rgba(255,255,255,0.82);
  /* radii, tracking, weights, durations */
  --r-card:14px; --r-menu:12px; --r-btn:9999px; --r-sm:8px;
  --track-eyebrow:0.14em; --track-tight:-0.02em;
  --w-body:400; --w-semi:600; --w-bold:700; --w-black:800;
  --dur-fast:160ms; --dur:200ms; --dur-pill:260ms; --dur-vid:600ms; --dur-enter:1100ms;
  --bp:767px; --bp-nav:1007px; --container:1440px;

  /* ---- responsive scale (desktop ramp) ---- */
  --fs-h1:91.12px; --fs-h2:40.5px; --fs-h3:27px; --fs-body:18px; --fs-lead:18px;
  --fs-stat:40.5px; --fs-num:40.5px; --fs-num-lg:40.5px; --fs-phone:27px; --fs-quote:22.5px;
  --fs-quote-mark:91.12px; --fs-quote-card:18px; --fs-wordmark:22.5px; --fs-hero:18px;
  --fs-hero-badge:14.4px; --fs-why:18px; --fs-check:18px; --fs-ftr-mark:22.5px; --fs-card-h:27px;
  --fs-ui:16.1px; --fs-small:14.4px; --fs-caption:11.52px;
  --lh-h1:1.02; --lh-h2:1.15; --lh-h3:1.30; --lh-body:1.65; --lh-lead:1.45; --lh-ui:1.40; --lh-small:1.50;
  --pad-hero:128px; --pad-big:112px; --pad-std:88px; --pad-tight:56px; --pad-h:64px; --pad-hdr-v:18px; --pad-ftr-v:88px;
  --pad-card:28px; --pad-card-lg:32px; --pad-card-sm:22px; --pad-step:30px; --pad-box:28px; --pad-faq:26px 28px;
  --gap-grid:28px; --gap-steps:32px; --gap-col:56px; --gap-stats:28px; --gap-stat-cell:6px; --gap-hero:24px;
  --gap-stat-note:28px; --gap-stat-icon:4px; --icon-stat:44px; --gap-rev:26px; --gap-legal:30px;
  --gap-car:28px; --gap-car-col:24px; --hit-nav:40px; --gap-dot:10px; --dot:10px; --hit-dot:24px; --dur-car:520ms;
  --avatar:48px; --star:18px; --gap-star:3px; --gmark:22px; --tick:16px; --gap-faq:12px; --gap-fig:22px; --gap-row:28px;
  --btn-pad:18px 34px; --btn-pad-ghost:17px 33px; --btn-pad-md:16px 32px; --btn-pad-sm:13px 24px; --btn-pad-hdr:13px 24px; --logo-h:34px;
  --hero-min:600px; --sechead-mb:44px; --pad-row:26px; --mb-sm:28px; --icon-w:60%; --rule-w:40px; --mark-x:-10px;
  --trade-mt:64px; --trade-pt:44px; --proc-pt:40px;
  --pill-right:calc(max(0px, (100% - 1440px) / 2) + 24px); --pill-bottom:32px; --pill-pad:16px 28px;
  --scroll-mt:104px; --pad-ftr-div:56px; --gap-ftr-row:40px;
}
@media (max-width:767px) {
  :root {
    --hero-grad:linear-gradient(180deg, rgba(var(--ink-rgb),0.78) 0%, rgba(var(--ink-rgb),0.68) 100%);
    --fs-h1:40.5px; --fs-h2:27px; --fs-h3:22.5px; --fs-body:16.1px; --fs-lead:16.1px;
    --fs-stat:27px; --fs-num:27px; --fs-num-lg:27px; --fs-phone:22.5px; --fs-quote:18px;
    --fs-quote-mark:40.5px; --fs-quote-card:18px; --fs-wordmark:16.1px; --fs-hero:16.1px;
    --fs-hero-badge:16.1px; --fs-why:18px; --fs-check:18px; --fs-ftr-mark:22.5px; --fs-card-h:22.5px;
    --fs-ui:16.1px; --fs-small:14.4px; --fs-caption:11.52px;
    --lh-h1:1.10; --lh-h2:1.20; --lh-h3:1.35; --lh-body:1.60; --lh-lead:1.60; --lh-ui:1.40; --lh-small:1.50;
    --pad-hero:72px; --pad-big:64px; --pad-std:56px; --pad-tight:40px; --pad-h:20px; --pad-hdr-v:14px; --pad-ftr-v:48px;
    --pad-card:24px; --pad-card-lg:24px; --pad-card-sm:18px; --pad-step:24px; --pad-box:22px; --pad-faq:20px 20px;
    --gap-grid:16px; --gap-steps:24px; --gap-col:28px; --gap-stats:14px; --gap-stat-cell:4px; --gap-hero:18px;
    --gap-stat-note:22px; --gap-stat-icon:2px; --icon-stat:38px; --gap-rev:16px; --gap-legal:26px;
    --gap-car:20px; --gap-car-col:16px; --hit-nav:40px; --gap-dot:8px; --dot:10px; --hit-dot:28px; --dur-car:420ms;
    --avatar:44px; --star:16px; --gap-star:2px; --gmark:20px; --tick:15px; --gap-faq:10px; --gap-fig:18px; --gap-row:10px;
    --btn-pad:16px 26px; --btn-pad-ghost:15px 25px; --btn-pad-md:15px 26px; --btn-pad-sm:16px 26px; --btn-pad-hdr:10px 18px; --logo-h:28px;
    --hero-min:460px; --sechead-mb:28px; --pad-row:20px; --mb-sm:20px; --icon-w:36%; --rule-w:28px; --mark-x:-6px;
    --trade-mt:40px; --trade-pt:28px; --proc-pt:28px;
    --pill-right:20px; --pill-bottom:20px; --pill-pad:14px 22px;
    --scroll-mt:88px; --pad-ftr-div:40px; --gap-ftr-row:32px;
  }
}

/* =====================================================================
   2. GENERATEPRESS NEUTRALISATION.  Sections are full-bleed; the design's
   own .wrap caps content at 1440. GP's containers, paddings and margins
   must not add to that. Header and footer come from GP Premium Block
   Elements, so GP's own header/footer never render.
   ===================================================================== */
body { margin:0; background:var(--page); color:var(--text); font-family:var(--sans); font-size:var(--fs-body);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
.site-content, .grid-container, .site-main, .inside-article, .entry-content, .page-header, .inside-page-hero { max-width:none; margin:0; padding:0; }
.site-content { display:block; }
.site-main > article, .site-main > .inside-article { margin:0; padding:0; border:0; box-shadow:none; background:transparent; }
.entry-content > * { margin-top:0; margin-bottom:0; }
.entry-header, .entry-title, .page .entry-header, .entry-meta, .comments-area, .generate-back-to-top, .site-header, .site-footer .site-info, #right-sidebar, #left-sidebar { display:none; }
.entry-content, .site-main { overflow:visible; }
.inside-article > .entry-content { margin-top:0; } /* GP adds 2em after the (hidden) entry header */
h1,h2,h3,h4,h5,h6 { margin:0; font-family:var(--display); color:inherit; }
p { margin:0; }
ul, ol { margin:0; padding:0; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover, a:focus { text-decoration:none; }
button { font:inherit; }
img { max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.is-dark :focus-visible, .cr-on-ink :focus-visible { outline-color:var(--accent-hi); }
.social a:focus-visible { outline:2px solid var(--accent-hi); outline-offset:0; border-radius:8px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:8px; top:8px; z-index:100; background:var(--page); padding:8px 12px; }
/* block wrappers must not add gaps of their own */
.wp-block-group, .wp-block-columns, .wp-block-column { box-sizing:border-box; }
.wp-block-group.is-layout-flow > * + * { margin-block-start:0; }
.wp-block-buttons { gap:12px; }
.wp-block-button__link { border-radius:var(--r-btn); }

/* =====================================================================
   3. LAYOUT PRIMITIVES AND BEHAVIOUR CLASSES.  Ported verbatim from
   _build_shell.py helmet() at ae701e0; only the Python placeholders are
   resolved (FULL build, BP 767, BP_NAV 1007).
   ===================================================================== */
.wrap { width:100%; max-width:var(--container); margin-left:auto; margin-right:auto; }
.grid   { display:grid; grid-template-columns:var(--cols); gap:var(--g,var(--gap-grid)); }
.g2     { display:grid; grid-template-columns:var(--cols); gap:var(--g,var(--gap-col)); align-items:var(--ai,center); }
.gfluid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--g,var(--gap-grid)); }
.rowlink { display:grid; grid-template-columns:var(--cols); gap:var(--g,var(--gap-row)); align-items:var(--ai,center); }
.statgrid { display:grid; grid-template-columns:var(--cols); gap:var(--gap-stats); align-items:start; }
.hero-trust { display:flex; flex-direction:column; gap:12px; padding-top:0; order:1; }
.hero-cta   { order:2; padding-top:20px; }
.measure { max-width:var(--mw,none); }
.portrait  { aspect-ratio:3/4; }
.rev-a, .rev-b { max-width:72%; }
.rev-b     { margin-left:28%; }
.proc-head { align-items:center; text-align:center; }
.proc-cta  { justify-content:center; }
.util      { justify-content:space-between; }

.herovid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity var(--dur-vid) var(--ease); pointer-events:none; }
.herovid.on { opacity:1; z-index:1; }
@media (prefers-reduced-motion: reduce) { .herovid { display:none; } }

.carousel  { display:flex; flex-direction:column; gap:var(--gap-car); --per:3; }
.ctrack    { display:grid; grid-auto-flow:column; gap:var(--gap-car-col);
             grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap-car-col)) / var(--per));
             overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.ctrack::-webkit-scrollbar { display:none; }
.cslide    { scroll-snap-align:start; min-width:0; display:flex; }
.cslide > * { flex:1; box-sizing:border-box; }
.cctl      { display:flex; align-items:center; gap:var(--gap-dot); }
.carousel[data-fits] .cctl { display:none; }
.cnav      { width:var(--hit-nav); height:var(--hit-nav); flex:none; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--page);
             display:grid; place-items:center; cursor:pointer; transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease; }
.cnav:hover { border-color:var(--muted); }
.cnav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cdots     { display:flex; gap:var(--gap-dot); margin:0 4px; }
.cdot      { width:var(--hit-dot); height:var(--hit-dot); padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; border-radius:50%; -webkit-appearance:none; appearance:none; }
.cdot[hidden] { display:none; }
/* Approved deviation (Lorena, Phase 1 Q4): inactive dots on --muted, not --border, for non-text contrast. */
.cdot::after { content:""; display:block; width:var(--dot); height:var(--dot); border-radius:50%; background:var(--muted); transition:background var(--dur-fast) ease, transform var(--dur-fast) ease; }
.cdot[aria-current="true"]::after { background:var(--accent); transform:scale(1.15); }
.cdot:hover::after { background:var(--text); }
.cdot[aria-current="true"]:hover::after { background:var(--accent); }
.cdot:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
@media (prefers-reduced-motion: reduce) { .ctrack { scroll-behavior:auto; } .cdot::after { transition:none; } }

.fgrid { display:grid; grid-template-columns:1.5fr minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:var(--gap-ftr-row) var(--gap-col); align-items:start; }
.fgrid a, .fgrid p { overflow-wrap:anywhere; }

.btn { line-height:1; transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn-primary:active, .btn-ghost:active { transform:scale(0.97); }
.card { position:relative; transition:transform var(--dur) var(--ease); }
.link { transition:color var(--dur) var(--ease); }
.row { transition:background-color var(--dur) var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover { background:var(--accent-hover) !important; transform:translateY(-2px); }
  .btn-ghost:hover   { background:var(--ghost-hover-bg) !important; transform:translateY(-2px); }
  .card-link:hover   { transform:translateY(-2px); }
  .link:hover        { color:var(--link-hover) !important; }
  .row:hover         { background:var(--row-hover-bg) !important; }
  .navlink:hover     { color:var(--link-hover) !important; }
  .maplink:hover { border-color:var(--accent-ink) !important; }
}
.maplink { transition:border-color var(--dur) var(--ease); }
.maplink:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-card); }
.navlink { transition:color var(--dur) var(--ease); }
.nav-svc { position:relative; }
.nav-svc-menu { position:absolute; top:100%; left:0; margin-top:10px; background:var(--page); border:1px solid var(--border);
  border-radius:var(--r-menu); padding:8px; display:none; flex-direction:column; min-width:180px; z-index:30; box-shadow:var(--shadow); }
.nav-svc-menu::before { content:''; position:absolute; left:0; right:0; top:-10px; height:10px; }
.nav-svc:hover .nav-svc-menu, .nav-svc:focus-within .nav-svc-menu { display:flex; }
.nav-svc-menu a { display:block; padding:10px 14px; border-radius:var(--r-sm); font-size:var(--fs-ui); font-weight:var(--w-semi); color:var(--muted); }
.nav-svc-menu a:hover { background:var(--tint); color:var(--text); }
.nav-desktop { display:flex; align-items:center; gap:34px; font-size:var(--fs-ui); font-weight:var(--w-semi); color:var(--muted); }
.nav-mobile  { display:none; align-items:center; gap:10px; }
#navpanel    { display:none; }

html.pillwatch #quote-pill { opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur-pill) var(--ease), transform var(--dur-pill) var(--ease), visibility 0s var(--dur-pill); }
html.pillwatch #quote-pill.show { opacity:1; visibility:visible; transform:none;
  transition:opacity var(--dur-pill) var(--ease), transform var(--dur-pill) var(--ease), visibility 0s; }

html.mo [data-up], html.mo .cr-up       { opacity:0; transform:translateY(26px); }
html.mo [data-left], html.mo .cr-left   { opacity:0; transform:translateX(-36px); }
html.mo [data-right], html.mo .cr-right { opacity:0; transform:translateX(36px); }
html.mo [data-up].in, html.mo [data-left].in, html.mo [data-right].in, html.mo .cr-up.in, html.mo .cr-left.in, html.mo .cr-right.in {
  opacity:1; transform:none; transition:opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html.mo [data-up], html.mo [data-left], html.mo [data-right], html.mo .cr-up, html.mo .cr-left, html.mo .cr-right { opacity:1; transform:none; }
  html.mo [data-up].in, html.mo [data-left].in, html.mo [data-right].in, html.mo .cr-up.in, html.mo .cr-left.in, html.mo .cr-right.in { transition:opacity 150ms ease-out; }
  .btn-primary:hover, .btn-ghost:hover, .card-link:hover { transform:none; }
  html.pillwatch #quote-pill, html.pillwatch #quote-pill.show { transform:none; transition:none; }
}

@media (max-width:1007px) {
  .nav-desktop { display:none; }
  .carousel    { --per:2; }
  .nav-mobile  { display:flex; }
  #navpanel:not([hidden]) { display:block; }
  .fgrid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .fb-brand    { grid-column:1 / -1; }
  .fb-quick    { grid-column:1; }
  .fb-services { grid-column:2; }
  .fb-contact  { grid-column:1 / -1; }
}
@media (max-width:767px) {
  .grid, .g2, .rowlink { grid-template-columns:1fr; }
  .statgrid           { grid-template-columns:1fr; }
  .hero-trust { flex-direction:column; gap:12px; }
  .g2, .rowlink        { align-items:start; }
  .measure             { max-width:100%; }
  .wm-rest { display:none; }
  .util-hide   { display:none; }
  .util        { justify-content:center; }
  .arrow-end   { display:none; }
  .carousel  { --per:1; }
  .portrait  { aspect-ratio:4/3; }
  .rev-a, .rev-b { max-width:100%; }
  .rev-b     { margin-left:0; }
  .proc-head { align-items:flex-start; text-align:left; }
  .proc-cta  { justify-content:flex-start; }
  /* Approved deviation (Lorena, Phase 1 Q10): footer is ONE column below 768. */
  .fgrid { grid-template-columns:minmax(0,1fr); }
  .fb-brand, .fb-quick, .fb-services, .fb-contact { grid-column:1 / -1; }
}

/* Map facade: the iframe lives in a <template> until clicked (Phase 1 Q6). */
.cr-map-facade { position:relative; cursor:pointer; }
.cr-map-facade.is-loaded { cursor:default; }
.cr-map-facade template { display:none; }

/* Section and component classes live in assets/css/sections/*.css, one file per
   pattern family, enqueued after this file. */

/* =====================================================================
   §4  Launch mode  (body.cr-launch — switched by CROSSON_LAUNCH_MODE in functions.php)
   Hides, never removes: the desktop nav links, the hamburger and its panel,
   and the footer Quick Links / Services columns. The brand, contact details,
   Get-a-quote pill and legal links stay.
   ===================================================================== */
body.cr-launch .nav-desktop,
body.cr-launch .nav-mobile,
body.cr-launch .fb-quick,
body.cr-launch .fb-services { display:none !important; }
body.cr-launch .fgrid { grid-template-columns:1.5fr minmax(0,1.3fr); }
@media (max-width:1007px) { body.cr-launch .fgrid { grid-template-columns:minmax(0,1fr); } }

/* ---- Launch-mode homepage trims (Lorena, 10 Sep 2026). All hide-only; flip
   CROSSON_LAUNCH_MODE to false and every one of these comes back. ---- */
body.cr-launch .cr-util { display:none; }                                    /* navy utility bar */
body.cr-launch .cr-hero-cta .btn-ghost { display:none; }                      /* "Explore coverage" */
body.cr-launch .cr-btn-arrow .wp-block-button__link::after,
body.cr-launch #quote-pill svg,
body.cr-launch .cr-tile .cr-arrow { display:none; }                           /* every CTA arrow */
body.cr-launch .cr-process .cr-btn-arrow .wp-block-button__link::after,
body.cr-launch .cr-tradeoff-band .cr-btn-arrow .wp-block-button__link::after { display:block; }  /* ...except "Get started" and the trade-off "Get a quote" */
body.cr-launch .cr-tile > .cr-tile-link { display:none; }                     /* coverage-tile links */
body.cr-launch .cr-tile { box-shadow:none; }                                  /* ...and their shadow */
body.cr-launch .cr-tile.card-link:hover { transform:none; }                   /* ...and hover lift */
body.cr-launch .cr-why-cta { display:none; }                                  /* why-choose-us CTA */
body.cr-launch .cnav { display:none; }                                        /* carousel arrows */
body.cr-launch .cctl { justify-content:center; }                              /* dots centred under the cards */
body.cr-launch .cr-faq-head, body.cr-launch .cr-faq-photo .cr-faq-items { margin-left:0; }  /* FAQ left-aligned */
body.cr-launch .cr-faq-plus { display:none; }                                 /* FAQ plus signs */
body.cr-launch .cr-blog-row { display:none; }                                 /* blog row */
body.cr-launch .cr-map-load { display:none; }                                 /* map loads on its own (crosson.js) */
body.cr-launch .wm-rest { display:inline; }                                  /* full "Crosson Insurance" wordmark on phones */
@media (max-width:767px) {                                                    /* mobile: bar indicators */
  body.cr-launch .cdot { width:auto; padding:0 2px; }
  body.cr-launch .cdot::after { width:28px; height:4px; border-radius:2px; }
  body.cr-launch .cdot[aria-current="true"]::after { transform:none; }
  body.cr-launch .cr-tile-ico { width:27%; }                                  /* coverage icons 25% smaller (36% → 27%) */
  /* coverage tiles on phones: heading left, icon right, on one line (Lorena, 10 Sep 2026) */
  body.cr-launch .cr-tile { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:var(--cr-gap-12); }
  body.cr-launch .cr-tile > .cr-tile-ico { grid-column:2; grid-row:1; width:54px; }
  body.cr-launch .cr-tile > .cr-card-h { grid-column:1; grid-row:1; line-height:1; }
  body.cr-launch .cr-tile > .cr-body, body.cr-launch .cr-tile > .cr-tile-link { grid-column:1 / -1; }
}

/* ---- Hide any block without deleting it: add "cr-hidden" under Advanced →
   Additional CSS class(es). Remove the class to show it again. ---- */
.cr-hidden { display:none !important; }