/* ============================================================
   WordPress-environment overrides (loads AFTER caa.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. CAA 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 CAA 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;
}

/* 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). CAA'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__lockup-white` / `.logo__mark` rules (0,1,0), so without re-assertion
   the logo renders at Elementor's height:auto box. Re-assert the sizing at
   .masthead scope (0,2,0+) so it outranks the Elementor img rule on both
   surfaces. The logo stays the FULL lockup at every scroll position (no
   collapse-to-mark): the white lockup governs on the navy .navytop home, the
   dark lockup on light inner-page mastheads (opacity in caa.css gates which
   one shows). The seal mark is retired (always width 0). Height bumped to 48px
   per Brandon's ask to enlarge the nav logo. */
.masthead .logo__img {
	height: 48px;
	width: auto;
}
.masthead .logo__lockup,
.masthead.is-scrolled .logo__lockup,
.masthead .logo__lockup-white,
.masthead.is-scrolled .logo__lockup-white {
	max-width: 220px;
}
.masthead .logo__mark,
.masthead.is-scrolled .logo__mark {
	max-width: 0;
}
/* 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: 40px;
	}
}

/* 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. CAA'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; CAA 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}`. CAA bands own
   their vertical rhythm (section padding in caa.css); zero it for CAA
   widgets only so native widgets elsewhere keep Elementor's default spacing. */
[class*="elementor-widget-caa-"]:not(:last-child) {
	margin-block-end: 0;
}
.elementor-widget-container {
	margin: 0;
}

/* Top-level Elementor containers must not constrain the full-bleed bands: every
   CAA 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. caa.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 caa.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, #FBF8F2);
	--white:      var(--e-global-color-paper, #FBF8F2);
	--card:       var(--e-global-color-card, #FBF8F2);
	--sand:       var(--e-global-color-sand, #EDE5D4);
	--mist:       var(--e-global-color-sand, #EDE5D4);
	--sand-soft:  var(--e-global-color-sand_soft, #F6EFDF);
	--ink:        var(--e-global-color-text, #20232B);
	--slate:      var(--e-global-color-secondary, #5F6470);
	/* EMBER is the Charter primary (the single CTA fill); the legacy --clay /
	   --green aliases both carry it through the bridge. */
	--clay:       var(--e-global-color-primary, #F0561E);
	--green:      var(--e-global-color-primary, #F0561E);
	--clay-deep:  var(--e-global-color-clay_deep, #D2440F);
	--hairline:   var(--e-global-color-hairline, #E3DBCB);
	--line:       var(--e-global-color-hairline, #E3DBCB);
	--yellow:     var(--e-global-color-yellow, #EACB86);
	--forest:     var(--e-global-color-forest, #081D3B);
	--lav:        var(--e-global-color-lav, #F8EDFD);
	--green-lite: var(--e-global-color-green_lite, #EACB86);
	--caa-navy:   var(--e-global-color-caa_navy, #081D3B);
	--caa-gold:   var(--e-global-color-caa_gold, #C9A227);
	/* Charter fonts: Spectral (display serif) + Hanken Grotesk (body). The kit
	   primary/text typography still drives these; the fallbacks match caa.css. */
	--f-display:  var(--e-global-typography-primary-font-family, "Spectral"), Georgia, "Times New Roman", serif;
	--f-body:     var(--e-global-typography-text-font-family, "Hanken Grotesk"), -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--f-serif:    var(--e-global-typography-primary-font-family, "Spectral"), Georgia, 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
 * caa-match-quiz widget renders it, on /match/ only). Padding-bottom via
 * :has() so the fixed bar never covers the footer. Rules copied verbatim from
 * caa.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; }
}