/* ============================================================
   WordPress-environment overrides (loads AFTER annualife.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. AnnuaLife 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 AnnuaLife 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). AnnuaLife'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;
	}
}

/* hello reset.css boxes every table with a 1px border + 15px padding + .9em font
   and margin. AnnuaLife'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; AnnuaLife 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}`. AnnuaLife bands own
   their vertical rhythm (section padding in annualife.css); zero it for AnnuaLife
   widgets only so native widgets elsewhere keep Elementor's default spacing. */
[class*="elementor-widget-annualife-"]:not(:last-child) {
	margin-block-end: 0;
}
.elementor-widget-container {
	margin: 0;
}

/* Top-level Elementor containers must not constrain the full-bleed bands: every
   AnnuaLife 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. annualife.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 annualife.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, #F4F4F4);
	--mist:       var(--e-global-color-sand, #F4F4F4);
	--sand-soft:  var(--e-global-color-sand_soft, #EAF7F0);
	--ink:        var(--e-global-color-text, #1C1C1C);
	--slate:      var(--e-global-color-secondary, #5C6166);
	/* GREEN is the Avada primary; legacy var --clay carries it. */
	--clay:       var(--e-global-color-primary, #18B26F);
	--green:      var(--e-global-color-primary, #18B26F);
	--clay-deep:  var(--e-global-color-clay_deep, #0E7D4E);
	--hairline:   var(--e-global-color-hairline, #E4E6E4);
	--line:       var(--e-global-color-hairline, #E4E6E4);
	--yellow:     var(--e-global-color-yellow, #FBE12E);
	--forest:     var(--e-global-color-forest, #062D1C);
	--lav:        var(--e-global-color-lav, #F8EDFD);
	--green-lite: var(--e-global-color-green_lite, #65BC7B);
	--caa-navy:   var(--e-global-color-caa_navy, #12233F);
	--caa-gold:   var(--e-global-color-caa_gold, #C7A24A);
	--f-display:  var(--e-global-typography-primary-font-family, "Bricolage Grotesque"), -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--f-body:     var(--e-global-typography-text-font-family, "Bricolage Grotesque"), -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--f-serif:    var(--e-global-typography-primary-font-family, "Bricolage Grotesque"), 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
 * annualife-match-quiz widget renders it, on /match/ only). Padding-bottom via
 * :has() so the fixed bar never covers the footer. Rules copied verbatim from
 * annualife.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; }
}