/* ============================================================
   WordPress-environment overrides (loads AFTER frc.css).
   The static design package never ran under a theme; these
   neutralize hello-elementor + Elementor CSS that fights the
   "Avada-match" (green / yellow / black) skin. Keep every rule
   surgical and commented.
   ============================================================ */

/* Hello Elementor reset.css paints button:hover / button:focus magenta (#c36)
   sitewide. FRC buttons define their own states; unset the theme default
   so unstyled states (nav dropdown buttons, the mobile nav toggle, FAQ
   summaries) stay transparent. */
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
	background-color: transparent;
	color: inherit;
}

/* Re-assert the FRC button states the unset above must not dull. */
.btn--primary:hover,
button.btn--primary:hover,
[type="submit"].btn--primary:hover {
	background: var(--clay-deep);
	color: #fff;
}
.nav__toplink:hover,
.opt:hover {
	color: inherit;
}

/* Re-assert the navy self-check quiz chips (the unset above blanks their focus/hover). */
.artquiz .artq__opt:hover,
.artquiz .artq__opt:focus {
	background-color: rgba(255,255,255,.12);
	color: var(--bone);
}
.artquiz .artq__opt[aria-pressed="true"],
.artquiz .artq__opt[aria-pressed="true"]:hover,
.artquiz .artq__opt[aria-pressed="true"]:focus {
	background-color: var(--brass);
	color: var(--navy);
}

/* Hello Elementor theme.css boxes .site-header/.site-footer to 500/600/800/1140px
   per breakpoint (its own header layout; the :not(.dynamic-header) guard misses
   our widget markup, which reuses the class names). FRC's header/footer are
   full-bleed bands; the inner .wrap owns width and padding. */
.site-header:not(.dynamic-header),
.site-footer:not(.dynamic-footer) {
	max-width: none !important;
	padding-inline: 0 !important;
}

/* Sticky masthead fix. The theme's `.masthead { position: sticky; top: 0 }`
   relies on the masthead being a near-body-level element (its containing block =
   the tall page) so it pins to the viewport while the .topbar scrolls away. In a
   Theme Builder header the widget is wrapped in header.elementor-location-header
   > .e-con > .elementor-widget > .elementor-widget-container, all only header-
   height tall, so the masthead's containing block was that 105px box and it
   scrolled off instead of sticking. Flatten those wrappers (display: contents) on
   the FRONTEND only (not the editor, which needs the widget boxes) so .topbar /
   .masthead / #mobile-nav become body-level children, exactly like the static
   markup, and CSS sticky works. */
body:not(.elementor-editor-active) .elementor-location-header,
body:not(.elementor-editor-active) .elementor-location-header .elementor-element,
body:not(.elementor-editor-active) .elementor-location-header .elementor-widget-container {
	display: contents;
}

/* Elementor's `.elementor img { height: auto; max-width: 100% }` (specificity
   0,1,1) outranks the theme's element-level `.logo__img` / `.logo__lockup` /
   `.logo__mark` rules (0,1,0), so the header logo rendered at its 148x40
   attribute box AND the collapsed mark kept its width at the top state (both
   images occupying space -> ~+34px, masthead overflow at 390). Re-assert the
   lockup sizing and the sticky-collapse crossfade widths at .masthead scope so
   they outrank the Elementor img rule; the .is-scrolled rules stay in sync. */
.masthead .logo__img {
	height: 38px;
	width: auto;
}
.masthead .logo__lockup {
	max-width: 200px;
}
.masthead .logo__mark {
	max-width: 0;
}
.masthead.is-scrolled .logo__lockup {
	max-width: 0;
}
.masthead.is-scrolled .logo__mark {
	max-width: 60px;
}
/* Keep the theme's 560px logo step (the header override above out-specifies the
   theme media rule, so restore the compact mobile height at equal specificity). */
@media (max-width: 560px) {
	.masthead .logo__img {
		height: 34px;
	}
}

/* Elementor's frontend.min.css zeroes EVERY widget <figure> margin with a
   0,4,1 rule (.elementor .elementor-widget:not(.elementor-widget-text-editor)
   :not(.elementor-widget-theme-post-content) figure { margin: 0 }). That defeats
   the theme's centered pull-quote figure (.pullfeat uses margin-inline:auto at
   0,1,0), so the 940px figure sat flush-LEFT inside its 1220px .wrap instead of
   centered (Brandon: "testimonials still not centered"). A 0,4,1 element rule
   can't be beaten from the bridge by specificity without an absurd selector, so
   re-center with !important. .v3believe__lead is a <div> (unaffected) but grouped
   for intent: both are centered display quotes. */
.pullfeat,
.v3believe__lead {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Same Elementor `.elementor img` (0,1,1) gotcha hits the FOOTER lockup: the
   theme's `.footer-brand__logo { height:50px; width:auto }` is 0,1,0, so
   Elementor's `height:auto` won and the 1029x482 SVG scaled up to fill the
   1.6fr footer column (a giant logo). Re-assert the 50px cap at .site-footer
   scope (0,2,0) so it outranks the Elementor img rule on both surfaces. */
.site-footer .footer-brand__logo {
	height: 50px;
	width: auto;
	max-width: 108px;
}

/* hello reset.css boxes every table with a 1px border + 15px padding + .9em font
   and margin. FRC's .rates table declares its own cell padding and hairline;
   restore everything else to browser defaults so undeclared sides stop showing
   theme borders. (The .rates class selectors outrank these element resets.) */
table {
	font-size: inherit;
	margin-block-end: 0;
	border-collapse: collapse;
}
table td,
table th {
	border: 0;
	line-height: inherit;
	vertical-align: middle;
}
table thead:first-child tr:first-child td,
table thead:first-child tr:first-child th {
	border-block-start: 0;
}

/* hello reset.css gives figure a margin; FRC media blocks are div-based. */
figure {
	margin: 0;
}

/* hello reset.css forces `select { width: 100% }`, which the static theme never
   had, so the rate-table filter selects stretch full-width and stack instead of
   sitting inline in the .table-tools flex row. Restore content-width sizing (the
   demo-form `.field select` keeps its own intentional width:100%). */
.table-tools select {
	width: auto;
	max-width: none;
}

/* Elementor spaces stacked widgets with
   `.elementor-widget:not(:last-child){margin-block-end:20px}`. FRC bands own
   their vertical rhythm (section padding in frc.css); zero it for FRC
   widgets only so native widgets elsewhere keep Elementor's default spacing. */
[class*="elementor-widget-frc-"]:not(:last-child) {
	margin-block-end: 0;
}
.elementor-widget-container {
	margin: 0;
}

/* Top-level Elementor containers must not constrain the full-bleed bands: every
   FRC band widget renders its own <section> + .wrap, so page-level
   containers are pure stacking wrappers. Kill their boxed width, padding, and
   gaps via Elementor's own custom properties. */
.e-con.e-parent {
	--content-width: 100%;
	--width: 100%;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

/* The sticky-CTA bar (match page only) is fixed-position; it must sit above the
   Elementor container stacking context. frc.css already positions it. */

/* ------------------------------------------------------------------ */
/* Kit token bridge: Site Settings globals drive the whole design      */
/* system. The kit CSS defines --e-global-* on body.elementor-kit-N;   */
/* re-pointing the theme tokens here (body-level beats the :root        */
/* fallbacks in frc.css) means one Site Settings color/font       */
/* change recolors every widget, custom and native alike.               */
/* Caveat: the derived alpha tokens (--ink-06 .. --ink-12) + the green         */
/* gradient partner --clay-2 stay literal; retune them by hand on a full swap. */
/* ------------------------------------------------------------------ */
body[class*="elementor-kit-"] {
	--paper:      var(--e-global-color-paper, #FFFFFF);
	--white:      var(--e-global-color-paper, #FFFFFF);
	--card:       var(--e-global-color-card, #FFFFFF);
	--sand:       var(--e-global-color-sand, #E9EDF2);
	--mist:       var(--e-global-color-sand, #E9EDF2);
	--sand-soft:  var(--e-global-color-sand_soft, #F0F3F7);
	--ink:        var(--e-global-color-text, #141922);
	--slate:      var(--e-global-color-secondary, #5B6472);
	/* Aged BRASS is the Civic Standard primary (the single accent + CTA fill);
	   the legacy --clay / --green / --ember aliases all carry brass through the
	   bridge. --brass is the token frc.css reads for the accent. */
	--brass:      var(--e-global-color-primary, #B08D57);
	--clay:       var(--e-global-color-primary, #B08D57);
	--green:      var(--e-global-color-primary, #B08D57);
	--ember:      var(--e-global-color-primary, #B08D57);
	--brass-lt:   var(--e-global-color-clay_deep, #C6A06A);
	--clay-deep:  var(--e-global-color-clay_deep, #C6A06A);
	--ember-dk:   var(--e-global-color-clay_deep, #C6A06A);
	--hairline:   var(--e-global-color-hairline, #D8DEE6);
	--line:       var(--e-global-color-hairline, #D8DEE6);
	--yellow:     var(--e-global-color-yellow, #C6A06A);
	--forest:     var(--e-global-color-forest, #0B1F3A);
	--navy:       var(--e-global-color-forest, #0B1F3A);
	--lav:        var(--e-global-color-lav, #13294A);
	--navy-panel: var(--e-global-color-lav, #13294A);
	--green-lite: var(--e-global-color-green_lite, #C6A06A);
	--brass-lt-navy: var(--e-global-color-green_lite, #C6A06A);
	--frc-navy:   var(--e-global-color-frc_navy, #0B1F3A);
	--frc-gold:   var(--e-global-color-frc_gold, #C6A06A);
	/* Civic Standard fonts: Schibsted Grotesk (display grotesque, NO serif) +
	   Inter (body). The kit primary/text typography drives these; the fallbacks
	   match frc.css. There is no serif anywhere in Civic Standard. */
	--f-display:  var(--e-global-typography-primary-font-family, "Schibsted Grotesk"), "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body:     var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--f-serif:    var(--e-global-typography-primary-font-family, "Schibsted Grotesk"), "Inter", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
 * Match page sticky mobile CTA. The static theme scopes this to
 * body.has-sticky (a per-page bodyClass); the Elementor port has no such body
 * class, so re-scope to the presence of .sticky-cta itself (only the
 * frc-match-quiz widget renders it, on /match/ only). Padding-bottom via
 * :has() so the fixed bar never covers the footer. Rules copied verbatim from
 * frc.css @media (max-width:720px) body.has-sticky.
 * ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--ink); padding: 10px var(--s4); gap: var(--s3);
    box-shadow: 0 -4px 20px rgba(0,0,0,.18); align-items: center;
  }
  .sticky-cta .btn { flex: 1; }
  .sticky-cta a.tel { color: #fff; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding: 0 8px; }
  .sticky-cta a.tel svg { width: 22px; height: 22px; color: var(--yellow); }
  body:has(.sticky-cta) { padding-bottom: 70px; }
}