/*
	Theme Name: BP — Hello Elementor Child
	Theme URI: https://betterplace.example/
	Description: Child theme of Hello Elementor for the Better Place site. Holds BP-specific functions, font preloads, and Elementor customizations.
	Author: Better Place
	Author URI: https://betterplace.example/
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: bp-hello-child
*/

/* ==========================================================================
   BP — Site custom CSS

   Globals used from the kit:
     --e-global-color-midnight       #1A1040
     --e-global-color-dusk           #0A2D73
     --e-global-color-horizon        #3787FF
     --e-global-color-sunrise        #FFCAA0
     --e-global-color-golden-hour    #FFE8D6
     --e-global-color-fog            #91C3FF

   Breakpoints (Elementor defaults):
     tablet: max-width 1024px
     mobile: max-width 767px

   Class naming:
     All custom classes are namespaced with .bp-* to avoid collisions with
     plugin CSS. Elementor's native classes (.e-n-menu-*, .elementor-*) are
     used as-is since they're stable enough.

   Sections:
     0. Design tokens (CSS vars)
     1. Global defaults (links, p spacing)
     2. Form inputs
     3. Button variants
     4. Menu (header stacking + services accordion)
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════
   0. DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Frosted glass surfaces */
  --bp-frost-dark-bg: rgba(26, 16, 64, 0.16);
  --bp-frost-light-bg: rgba(255, 255, 255, 0.16);
  --bp-frost-blur: blur(32px);

  /* Radii */
  --bp-radius-card: 24px;
  --bp-radius-item: 16px;
  --bp-radius-input: 4px;

  /* Motion */
  --bp-dur-fast: 150ms;
  --bp-dur-med: 300ms;
}


/* ════════════════════════════════════════════════════════════════════
   1. GLOBAL DEFAULTS
   ════════════════════════════════════════════════════════════════════ */

/* Content link transitions.
   Uses :where() for zero specificity so any widget-specific color rule wins
   naturally. Colors are set per-widget in Elementor; this only smooths state
   changes.

   Excludes nav menu anchors ([class*="e-n-menu"], .e-anchor) and our own
   submenu links — those have their own transitions and shouldn't animate
   from Hello Elementor's reset.css default (rgb(204, 51, 102) pink). */

:where(a:not([class*="e-n-menu"]):not(.e-anchor):not(.bp-submenu-link-container)) {
  transition: color var(--bp-dur-fast) ease-in-out, text-decoration-color var(--bp-dur-fast) ease-in-out;
}

/* A11y focus ring — widget-level overrides win naturally (e.g. buttons) */
a:focus-visible {
  outline: 2px solid var(--e-global-color-horizon);
  outline-offset: 2px;
  border-radius: 2px;
}


/* Last-child spacing reset — strip bottom margin from the last <p> so the
   Elementor container gap is the single source of widget-to-widget spacing. */
p:last-child {
  margin-bottom: 0;
}


/* Inline paragraph links — inherit the paragraph's color and show an
   underline instead of switching to an accent color. Common pattern
   for body-copy links that should blend visually with the surrounding
   text rather than draw attention as a discrete CTA.

   Specificity intentionally low (`:where(p)` collapses to 0) so any
   per-link override (Elementor's link color setting, a widget-specific
   class, etc.) wins naturally without `!important`. */
:where(p) a {
  color: inherit;
  text-decoration: underline;
}


/* `<small>` element — apply the BP "Body Small" global typography by default.
   Reads from Elementor's CSS variables for the body-small global so that any
   change in the kit's Site Settings → Global Fonts cascades automatically.
   Fallback values match the kit defaults in case the global isn't loaded
   (e.g. when editing in the WP admin without Elementor frontend running). */
small {
  font-family: var(--e-global-typography-body-small-font-family, 'Dada Grotesk'), sans-serif;
  font-size:   var(--e-global-typography-body-small-font-size,   14px);
  font-weight: var(--e-global-typography-body-small-font-weight, 400);
  line-height: var(--e-global-typography-body-small-line-height, 22px);
  letter-spacing: var(--e-global-typography-body-small-letter-spacing, normal);
}


/* ── Underlined link helper ──
   Apply via CSS Classes on a wrapper widget/container that holds
   inline `<a>` elements (e.g., a heading or text-editor with a link
   inside its body). Only the descendant `<a>` gets the underline —
   the wrapper element itself does NOT.

   This is the typical use case in Elementor: the class is set on the
   widget div, the actual link is inside the heading/text element. */
.bp-link-underline a {
  /* Longhand (not the `text-decoration` shorthand) so the thickness below
     isn't dropped. from-font = same hairline size as the form's legal links. */
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
}


/* ── Animated link with slide-in arrow ──
   Same hover-arrow animation as the Outline / Small buttons, but for
   inline `<a>` links (e.g., "Learn more" in body copy).

   Selector logic — applies styles only to the `<a>` itself:
     `a.bp-link-animated`  → class on the link directly
     `.bp-link-animated a` → class on a wrapper (text-editor / container)

   We don't apply `display: inline-flex` to the wrapper element because
   that could break a container's layout. Only the actual `<a>` becomes
   inline-flex.

   Same SVG + currentColor mask trick as the buttons: one color-agnostic
   SVG that takes the link's text color via `background-color: currentColor`. */

a.bp-link-animated,
.bp-link-animated a,
.link-wrapper a {
  display: inline-flex;
  align-items: center;
}

a.bp-link-animated::after,
.bp-link-animated a::after,
.link-wrapper a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 16px;
  margin-left: 0;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.33203 8H12.6654' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 3.33301L12.6667 7.99967L8 12.6663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.33203 8H12.6654' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 3.33301L12.6667 7.99967L8 12.6663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: 16px 16px;
          mask-size: 16px 16px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  opacity: 0;
  transition:
    width var(--bp-dur-med) ease,
    margin-left var(--bp-dur-med) ease,
    opacity var(--bp-dur-med) ease;
}

a.bp-link-animated:hover::after,
a.bp-link-animated:focus-visible::after,
.bp-link-animated a:hover::after,
.bp-link-animated a:focus-visible::after,
.link-wrapper a:hover::after,
.link-wrapper a:focus-visible::after {
  width: 16px;
  margin-left: 8px;
  opacity: 1;
}

/* .link-wrapper — container utility: gives every inner <a> the animated
   slide-in arrow (reuses the .bp-link-animated rules above) plus a Horizon
   hover/focus color. Used on the forest-map location list; the arrow inherits
   the color via currentColor, so it turns Horizon on hover too.
   These links are Elementor Button widgets. `!important` makes the hover color
   uniform across every link regardless of each widget's own hover setting (and
   beats the Hello/Elementor fallbacks: reset.css `a:hover{#333366}` and
   `.elementor-button:hover{color:#fff}`). Those rules are not !important, so
   this wins. */
.link-wrapper a:hover,
.link-wrapper a:focus-visible {
  color: var(--e-global-color-horizon, #3787FF) !important;
}


/* ── Frost utility classes ──
   Apply directly via Advanced → CSS Classes on any element/container.
     .bp-frost-dark  → Midnight @ 16% + blur(32px)  — for dark/colorful bgs
     .bp-frost-light → White @ 16% + blur(32px)     — for white/light bgs

   ⚠️ `backdrop-filter` creates a new stacking context. If you need a CHILD
   of this element to also use backdrop-filter (e.g., nested frost card on
   top of a frost panel), Chromium will collapse the inner blur. Use the
   `::before` pattern from `.bp-menu-container` instead in that case. */

.bp-frost-dark,
.bp-frost-light {
  backdrop-filter: var(--bp-frost-blur);
  -webkit-backdrop-filter: var(--bp-frost-blur);
}
.bp-frost-dark  { background-color: var(--bp-frost-dark-bg); }
.bp-frost-light { background-color: var(--bp-frost-light-bg); }


/* ── Width utility classes (responsive) ──
   Tailwind-style: base class applies on all viewports; device suffixes
   apply ONLY at that breakpoint and use !important so they override the
   base when both are present.

   Breakpoints (matches Elementor Pro defaults):
     @mobile   → ≤ 767px
     @tablet   → 768–1024px
     @laptop   → 1025–1366px
     @desktop  → ≥ 1367px

   Base (all devices):
     .bp-w-fit   → width: fit-content
     .bp-w-full  → width: 100%
     .bp-w-auto  → width: auto
     .bp-w-min   → width: min-content
     .bp-w-max   → width: max-content

   Example: `bp-w-fit bp-w-full@mobile` = fit on desktop/laptop/tablet,
   full on mobile. `bp-w-fit@laptop` = fit ONLY on laptops, default elsewhere.

   Note: Elementor accepts the `@` literally in the CSS Classes field;
   the CSS file escapes it as `\@` for valid selector syntax. */

/* base */
.bp-w-fit  { width: fit-content !important; }
.bp-w-full { width: 100%       !important; }
.bp-w-auto { width: auto        !important; }
.bp-w-min  { width: min-content !important; }
.bp-w-max  { width: max-content !important; }

/* desktop only (≥ 1367px) */
@media screen and (min-width: 1367px) {
  .bp-w-fit\@desktop  { width: fit-content !important; }
  .bp-w-full\@desktop { width: 100% !important; }
  .bp-w-auto\@desktop { width: auto !important; }
  .bp-w-min\@desktop  { width: min-content !important; }
  .bp-w-max\@desktop  { width: max-content !important; }
}

/* laptop only (1025–1366px) */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .bp-w-fit\@laptop  { width: fit-content !important; }
  .bp-w-full\@laptop { width: 100% !important; }
  .bp-w-auto\@laptop { width: auto !important; }
  .bp-w-min\@laptop  { width: min-content !important; }
  .bp-w-max\@laptop  { width: max-content !important; }
}

/* tablet only (768–1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .bp-w-fit\@tablet  { width: fit-content !important; }
  .bp-w-full\@tablet { width: 100% !important; }
  .bp-w-auto\@tablet { width: auto !important; }
  .bp-w-min\@tablet  { width: min-content !important; }
  .bp-w-max\@tablet  { width: max-content !important; }
}

/* mobile only (≤ 767px) */
@media screen and (max-width: 767px) {
  .bp-w-fit\@mobile  { width: fit-content !important; }
  .bp-w-full\@mobile { width: 100% !important; }
  .bp-w-auto\@mobile { width: auto !important; }
  .bp-w-min\@mobile  { width: min-content !important; }
  .bp-w-max\@mobile  { width: max-content !important; }
}


/* ── Viewport height utility classes ──
   Each class declares the legacy `vh` first (fallback) and the modern
   unit second so older browsers fall back gracefully.

     .bp-h-screen       → exact height = current viewport (dvh: dynamic,
                          adjusts as the mobile browser chrome shows/hides)
     .bp-min-h-screen   → at-least viewport height (svh: ALWAYS the small
                          viewport, so content never gets cut off when the
                          URL bar is visible)
     .bp-min-h-screen-l → at-least viewport height (lvh: largest viewport,
                          legacy `100vh` behavior — rarely needed)

   Use only ONE class per element depending on the case. */

.bp-h-screen {
  height: 100vh;
  height: 100dvh;
}
.bp-min-h-screen {
  min-height: 100vh;
  min-height: 100svh;
}
.bp-min-h-screen-l {
  min-height: 100vh;
  min-height: 100lvh;
}


/* ── Responsive line break (<br>) utility classes ──
   Apply directly to a `<br>` element to make it visible only at the
   target breakpoint. Useful for breaking long titles differently per
   device without duplicating headings.

   Usage in Elementor:
     1. In a Heading widget, switch to Text editor mode (or Code view).
     2. Insert: `<br class="bp-br-mobile">` (or whichever device you want).
     3. The line break only shows at that breakpoint; hidden everywhere else.

   Available:
     .bp-br-mobile      → ≤ 767
     .bp-br-tablet      → 768–1024
     .bp-br-laptop      → 1025–1366
     .bp-br-desktop     → 1367–1919
     .bp-br-widescreen  → ≥ 1920 */

.bp-br-mobile,
.bp-br-tablet,
.bp-br-laptop,
.bp-br-desktop,
.bp-br-widescreen {
  display: none;
}

@media screen and (max-width: 767px) {
  .bp-br-mobile { display: inline; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .bp-br-tablet { display: inline; }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .bp-br-laptop { display: inline; }
}
@media screen and (min-width: 1367px) and (max-width: 1919px) {
  .bp-br-desktop { display: inline; }
}
@media screen and (min-width: 1920px) {
  .bp-br-widescreen { display: inline; }
}


/* ── Horizontal scroll utility ──
   Moved to its own file: assets/css/bp-scroll.css
   Companion JS: assets/js/bp-scroll.js
   Both are enqueued by functions.php. See the CSS file header for
   docs on .bp-scroll-x, its @device variants, the --inset feature
   flags, and the tunable CSS custom properties. */


/* ── Aspect ratio utilities ──
   Force a container to keep a specific width:height ratio. Useful when
   you want a square card on mobile (`aspect-ratio: 1 / 1`) or a 16:9
   media block regardless of content height.

   Usage:
     1. Container in Elementor → CSS Classes: `bp-aspect-square` (or @device variant)
     2. The container's height is derived from its computed width.

   Variants:
     .bp-aspect-square      → 1:1 on all viewports
     .bp-aspect-square@mobile / @tablet / @laptop / @desktop / @widescreen

   Other ratios are available globally only (no @device variants yet —
   add them if a design needs them):
     .bp-aspect-video    → 16 / 9
     .bp-aspect-photo    → 4 / 3
     .bp-aspect-portrait → 3 / 4 */

.bp-aspect-square    { aspect-ratio: 1 / 1; }
.bp-aspect-video     { aspect-ratio: 16 / 9; }
.bp-aspect-photo     { aspect-ratio: 4 / 3; }
.bp-aspect-portrait  { aspect-ratio: 3 / 4; }

@media screen and (max-width: 767px) {
  .bp-aspect-square\@mobile { aspect-ratio: 1 / 1; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .bp-aspect-square\@tablet { aspect-ratio: 1 / 1; }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .bp-aspect-square\@laptop { aspect-ratio: 1 / 1; }
}
@media screen and (min-width: 1367px) and (max-width: 1919px) {
  .bp-aspect-square\@desktop { aspect-ratio: 1 / 1; }
}
@media screen and (min-width: 1920px) {
  .bp-aspect-square\@widescreen { aspect-ratio: 1 / 1; }
}


/* ── Process steps connector ──
   Apply to the parent container that holds the numbered steps. Each
   step inside (with class `bp-step`) gets a vertical connector line
   drawn via `::before` pseudo-element — going from below its number
   badge down to the next step's badge.

   No extra DOM needed. The line is positioned absolutely on the
   step itself, so as steps stack vertically, the lines connect
   seamlessly across them.

   Structure expected:
     .bp-process-steps  (flex column, gap: 0)
       └─ .bp-step      (flex row, gap: 8)  — repeated for each step
            ├─ .bp-step__badge  (24×24 round, position 0,0 in row)
            └─ [text content]

   Tunable via CSS variables on .bp-process-steps:
     --bp-step-line-color  (default: Midnight)
     --bp-step-line-width  (default: 1px)
     --bp-step-badge-size  (default: 24px)
     --bp-step-line-gap    (default: 4px)  — space between badge and line

   To hide the line on the last step manually, add `.bp-step--last`. */

.bp-process-steps {
  --bp-step-line-color: var(--e-global-color-midnight, #1A1040);
  --bp-step-line-width: 1px;
  --bp-step-badge-size: 26px;
  --bp-step-line-gap:   4px;
}

.bp-process-steps .bp-step {
  position: relative;
}

.bp-process-steps .bp-step:not(:last-child):not(.bp-step--last)::before {
  content: '';
  position: absolute;
  /* Center the line horizontally on the badge */
  left: calc((var(--bp-step-badge-size) - var(--bp-step-line-width)) / 2);
  /* Start just below the current badge (with a small gap) */
  top: 0;
  /* Extend to the bottom of THIS step. With `flex_gap: 0` between
     steps in the parent, this point coincides with the next step's
     badge top — the line ends exactly where the next badge begins.
     Sub-pixel overlap is hidden by the badge's z-index. */

  width: var(--bp-step-line-width);
  background: var(--bp-step-line-color);
  z-index: 0;
}

/* Keep the badge ABOVE the connector line — without explicit z-index,
   the absolute-positioned line (with z-index: 0) creates a stacking
   context and paints over the static-position badge. Giving the badge
   `position: relative; z-index: 1` lifts it back on top, so the line
   appears to terminate cleanly at the badge edge instead of bleeding
   onto it. The badge's solid background also visually masks any
   sub-pixel overlap from rendering. */
.bp-process-steps .bp-step__badge {
  position: relative;
  z-index: 1;
}

/* ── Process steps: scroll reveal ──
   First step is always at full opacity (above-the-fold readability).
   Steps 2+ start at lower opacity and fade in to 1 as they enter the
   viewport. The companion JS (assets/js/process-steps.js) adds the
   `.is-revealed` class via IntersectionObserver.

   Tunables (override on .bp-process-steps):
     --bp-step-dim-opacity     (default 0.3)
     --bp-step-reveal-duration (default 600ms)
     --bp-step-reveal-easing   (default ease)

   Respects `prefers-reduced-motion` — disabled animation, full opacity
   from the start. Also degrades gracefully if JS fails: even without
   the .is-revealed class, the dim state is still visible (no content
   hidden, just slightly faded). */
.bp-process-steps {
  --bp-step-dim-opacity:     0.3;
  --bp-step-reveal-duration: 600ms;
  --bp-step-reveal-easing:   ease;
}
.bp-process-steps .bp-step {
  opacity: 1;
  transition: opacity var(--bp-step-reveal-duration) var(--bp-step-reveal-easing);
}
.bp-process-steps .bp-step:not(:first-child) {
  opacity: var(--bp-step-dim-opacity);
}
.bp-process-steps .bp-step.is-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bp-process-steps .bp-step {
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   2. FORM INPUTS
   ════════════════════════════════════════════════════════════════════ */

/* Native HTML inputs + Elementor Form widget fields.
   Placeholder uses Muted, text uses Midnight, radius 4px across the board.
   Typography pulls from the kit's "primary" system font (= Body). */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select,
.elementor-field-textual,
.elementor-field-group .elementor-field {
  border-radius: var(--bp-radius-input);
  color: var(--e-global-color-midnight, #1A1040);
  font-family: var(--e-global-typography-primary-font-family, "Dada Grotesk"), sans-serif;
  font-size: var(--e-global-typography-primary-font-size, 16px);
  font-weight: var(--e-global-typography-primary-font-weight, 400);
  line-height: var(--e-global-typography-primary-line-height, 26px);
}

input::placeholder,
textarea::placeholder,
.elementor-field-textual::placeholder {
  color: var(--e-global-color-muted, #5A5A70);
  opacity: 1; /* Firefox lowers placeholder opacity by default */
}


/* ════════════════════════════════════════════════════════════════════
   3. BUTTON VARIANTS
   ════════════════════════════════════════════════════════════════════ */

/* Targets the wrapper class added by `prefix_class: 'elementor-button-type-'`
   in functions.php. Works in both editor preview and frontend.
   Transition spec matches Figma prototype: 300ms ease-out (DISSOLVE). */

.elementor-widget-button .elementor-button {
  /* Baseline 1px transparent border on every variant so heights stay
     consistent. Variants that only declare `border-color` inherit
     width/style from here; outline variants override with their own
     `border: 1px solid X` (same total height). */
  border: 1px solid transparent;
  transition:
    background-color var(--bp-dur-med) ease-out,
    color var(--bp-dur-med) ease-out,
    border-color var(--bp-dur-med) ease-out;
}

/* Primary — transparent, white text. For colored/dark backgrounds. */
.elementor-widget-button.elementor-button-type-primary .elementor-button {
  background-color: transparent;
  color: #FFFFFF;
  border-color: transparent;
}
.elementor-widget-button.elementor-button-type-primary .elementor-button:hover,
.elementor-widget-button.elementor-button-type-primary .elementor-button:focus-visible {
  background-color: #FFFFFF;
  color: #FFFFFF;
}

/* Secondary — Midnight → Horizon */
.elementor-widget-button.elementor-button-type-secondary .elementor-button {
  background-color: var(--e-global-color-midnight, #1A1040);
  color: #FFFFFF;
  border-color: var(--e-global-color-midnight, #1A1040);
}
.elementor-widget-button.elementor-button-type-secondary .elementor-button:hover,
.elementor-widget-button.elementor-button-type-secondary .elementor-button:focus-visible {
  background-color: var(--e-global-color-horizon, #3787FF);
  color: #FFFFFF;
  border-color: var(--e-global-color-horizon, #3787FF);
}

/* Tertiary — Sunrise → Golden Hour */
.elementor-widget-button.elementor-button-type-tertiary .elementor-button {
  background-color: var(--e-global-color-sunrise, #FFCAA0);
  color: var(--e-global-color-midnight, #1A1040);
  border-color: var(--e-global-color-sunrise, #FFCAA0);
}
.elementor-widget-button.elementor-button-type-tertiary .elementor-button:hover,
.elementor-widget-button.elementor-button-type-tertiary .elementor-button:focus-visible {
  background-color: var(--e-global-color-golden-hour, #FFE8D6);
  color: var(--e-global-color-midnight, #1A1040);
  border-color: var(--e-global-color-golden-hour, #FFE8D6);
}

/* Quaternary — Horizon → Fog (Fog contrast fails WCAG AA; approved per design) */
.elementor-widget-button.elementor-button-type-quaternary .elementor-button {
  background-color: var(--e-global-color-horizon, #3787FF);
  color: #FFFFFF;
  border-color: var(--e-global-color-horizon, #3787FF);
}
.elementor-widget-button.elementor-button-type-quaternary .elementor-button:hover,
.elementor-widget-button.elementor-button-type-quaternary .elementor-button:focus-visible {
  background-color: var(--e-global-color-fog, #91C3FF);
  color: #FFFFFF;
  border-color: var(--e-global-color-fog, #91C3FF);
}

/* Outline White — for dark backgrounds. Hover affordance is the
   slide-in arrow defined below (no color/border change). */
.elementor-widget-button.elementor-button-type-outline-white .elementor-button {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.elementor-widget-button.elementor-button-type-outline-white .elementor-button:hover,
.elementor-widget-button.elementor-button-type-outline-white .elementor-button:focus-visible {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

/* Outline Dark — for light backgrounds. Hover affordance is the
   slide-in arrow defined below (no color/border change). */
.elementor-widget-button.elementor-button-type-outline-dark .elementor-button {
  background-color: transparent;
  color: var(--e-global-color-midnight, #1A1040);
  border: 1px solid var(--e-global-color-midnight, #1A1040);
}
.elementor-widget-button.elementor-button-type-outline-dark .elementor-button:hover,
.elementor-widget-button.elementor-button-type-outline-dark .elementor-button:focus-visible {
  background-color: transparent;
  color: var(--e-global-color-midnight, #1A1040);
  border: 1px solid var(--e-global-color-midnight, #1A1040);
}

/* Small White — for dark backgrounds. Like outline-white but NO
   border + Body Small typography. Slide-in arrow defined below. */
.elementor-widget-button.elementor-button-type-small-white .elementor-button {
  background-color: transparent;
  color: #FFFFFF;
  border: none;
  font-size: 14px;
  line-height: 22px;
  padding: 8px 24px;
}
.elementor-widget-button.elementor-button-type-small-white .elementor-button:hover,
.elementor-widget-button.elementor-button-type-small-white .elementor-button:focus-visible {
  background-color: transparent;
  color: #FFFFFF;
  border: none;
}

/* Small Dark — for light backgrounds. Like outline-dark but NO
   border + Body Small typography. Slide-in arrow defined below. */
.elementor-widget-button.elementor-button-type-small-dark .elementor-button {
  background-color: transparent;
  color: var(--e-global-color-midnight, #1A1040);
  border: none;
  font-size: 14px;
  line-height: 22px;
  padding: 8px 24px;
}
.elementor-widget-button.elementor-button-type-small-dark .elementor-button:hover,
.elementor-widget-button.elementor-button-type-small-dark .elementor-button:focus-visible {
  background-color: transparent;
  color: var(--e-global-color-midnight, #1A1040);
  border: none;
}

/* ── Outline + small buttons: slide-in arrow on hover/focus ──
   One SVG works for all 4 variants (outline-white/dark, small-white/dark)
   — the visible color comes from `currentColor` (= the button's text
   color) via `mask-image`. No JS, no markup change.

   Implementation note: the pseudo-element is on
   `.elementor-button-content-wrapper`, NOT on `.elementor-button`. The
   wrapper is already `display: flex; flex-direction: row;` (Elementor's
   default for the button's icon+text slot), so the arrow becomes a real
   flex sibling of `.elementor-button-text` and aligns naturally on the
   same baseline. The outer `.elementor-button` is `inline-block`, so
   pseudos there end up on a separate baseline and look misaligned.

   Animation: the arrow is `width: 0` by default and grows to 16px
   (+8px margin-left) on hover/focus, so the button itself widens
   ("slide-in" effect). */

.elementor-widget-button.elementor-button-type-outline-white .elementor-button .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-outline-dark  .elementor-button .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-small-white   .elementor-button .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-small-dark    .elementor-button .elementor-button-content-wrapper::after {
  content: '';
  display: block;
  width: 0;
  height: 16px;
  margin-left: 0;
  flex-shrink: 0;
  align-self: center;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.33203 8H12.6654' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 3.33301L12.6667 7.99967L8 12.6663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.33203 8H12.6654' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 3.33301L12.6667 7.99967L8 12.6663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: 16px 16px;
          mask-size: 16px 16px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  opacity: 0;
  transition:
    width var(--bp-dur-med) ease,
    margin-left var(--bp-dur-med) ease,
    opacity var(--bp-dur-med) ease;
}

.elementor-widget-button.elementor-button-type-outline-white .elementor-button:hover           .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-outline-white .elementor-button:focus-visible   .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-outline-dark  .elementor-button:hover           .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-outline-dark  .elementor-button:focus-visible   .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-small-white   .elementor-button:hover           .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-small-white   .elementor-button:focus-visible   .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-small-dark    .elementor-button:hover           .elementor-button-content-wrapper::after,
.elementor-widget-button.elementor-button-type-small-dark    .elementor-button:focus-visible   .elementor-button-content-wrapper::after {
  width: 16px;
  margin-left: 8px;
  opacity: 1;
}

/* ── Permanently-active arrow ──
   Opt-in modifier to lock the slide-in arrow into its "on" state — use
   it on outline-* and small-* buttons that need a persistent "active /
   current page" affordance (e.g. selected nav item in the bp-comp-compare-bar).
   Add via Elementor → Advanced → CSS Classes: `bp-btn-arrow-on`.

   Works on the widget wrapper so it composes with any of the 4 button
   types that have the arrow. The transition stays in place, so toggling
   the class (e.g. via JS for client-side route changes) still animates. */
.elementor-widget-button.bp-btn-arrow-on .elementor-button .elementor-button-content-wrapper::after {
  width: 16px !important;
  margin-left: 8px !important;
  opacity: 1 !important;
}

/* A11y focus ring — on top of any variant's hover styles */
.elementor-widget-button .elementor-button:focus-visible {
  outline: 2px solid var(--e-global-color-horizon, #3787FF);
  outline-offset: 3px;
}

/* Disabled */
.elementor-widget-button .elementor-button[disabled],
.elementor-widget-button .elementor-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Nav Items */

.bp-nav-button .elementor-button {padding: 4px 16px;}
/* Call Now button — vertically center the icon + text as a group. The phone
   icon renders taller (~28px) than the text line-height (26px), so in the
   default inline-block button it sat low (children were baseline-aligned).
   Flex + align-items:center centers them; the old margin-top:-2px nudge (which
   only patched the inline-block case) is dropped. */
.bp-call-now-button a.elementor-button { display: inline-flex !important; align-items: center !important; }
.bp-call-now-button .elementor-button-content-wrapper { display: flex !important; align-items: center !important; }
/* Optical nudge: the text ink sits ~0.78px above its line-box center (line-height
   26 > font 16), so the geometrically-centered icon reads slightly low next to it.
   Lift the icon ~1px to match the visible text. */

/*   
@media (max-width: 767px) {
  .bp-call-now-button .elementor-button-icon { margin-top: 2px !important;}
  .bp-call-now-button .elementor-button-text {height:22px}
}
*/
/* ════════════════════════════════════════════════════════════════════
   4. MENU
   Header stacking + mega-menu + accordion (driven by menu-accordion.js).
   ════════════════════════════════════════════════════════════════════ */

/* ── Header stacking ──
   Elementor's <header> is static by default and doesn't create a stacking
   context. That traps the dropdown inside its widget context (z: 9999),
   so any element in main with a higher z-index could cover the submenu.
   Forcing position:relative + high z-index on the header makes everything
   inside it stack above main, unconditionally. */

.elementor-location-header {
  position: relative;
  z-index: 9999;
}


/* ── Header left pill container (logo + Services/Resources/About Us) ──
   The blur is applied via ::before pseudo-element instead of directly on the
   container. This way the container itself doesn't create a stacking context
   that would block descendants (sub-menu, etc.) from running their own
   backdrop-filter. Standard workaround for Chromium nested backdrop-filter
   limitation. */

.bp-menu-container {
  position: relative;
  border-radius: var(--bp-radius-card);
}

.bp-menu-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bp-frost-dark-bg);
  backdrop-filter: var(--bp-frost-blur);
  -webkit-backdrop-filter: var(--bp-frost-blur);
  z-index: -1;
}

/* Right-side header pill (phone + Start Here). No inner blur needed, so
   direct backdrop-filter is fine here (no nested descendants to blur). */
.right-nav {
  border-radius: var(--bp-radius-card);
  background: var(--bp-frost-dark-bg);
  backdrop-filter: var(--bp-frost-blur);
  -webkit-backdrop-filter: var(--bp-frost-blur);
}


/* ── Top-level nav titles (Services / Resources / About Us) ── */

.e-n-menu-title {
  transition: background-color var(--bp-dur-med), color var(--bp-dur-med);
  padding-top: 5px;
  padding-bottom: 5px;
}

.e-n-menu-title:has(button[aria-expanded="true"]) {
  background-color: var(--bp-frost-light-bg);
}

.e-n-menu-toggle {
  background: transparent;
}

/* ── Services sub-menu dark wrapper (matches Resources / About Us pattern) ── */

.bp-sub-menu-wrapper {
  background-color: var(--bp-frost-dark-bg);
  backdrop-filter: var(--bp-frost-blur);
  -webkit-backdrop-filter: var(--bp-frost-blur);
}

/* On tablet/mobile the outer .e-n-menu-heading already provides the dark
   backdrop, so this inner wrapper goes transparent to avoid double-bg. */
@media screen and (max-width: 1024px) {
  .bp-sub-menu-wrapper {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Exception: the Services-specific wrapper keeps the dark frost on mobile */
  .bp-sub-menu-wrapper-services {
    background-color: var(--bp-frost-dark-bg) !important;
    backdrop-filter: var(--bp-frost-blur) !important;
    -webkit-backdrop-filter: var(--bp-frost-blur) !important;
    padding: 8px;
  }

  .e-n-menu-toggle:is(:hover, :focus, :focus-within) {background: transparent !important;}
}


/* ── Mega-menu columns: .bp-title-trigger + .bp-links-container ── */

/* Cremation & Funerals, Memorial Options: always light frost bg
   (matches their submenu panels). No backdrop-filter — they live inside
   .bp-sub-menu-wrapper which already has the blur. Adding another would be
   redundant (parent's stacking context blocks it anyway). */
.bp-title-trigger {
  background: var(--bp-frost-light-bg);
  cursor: pointer;
}

/* Where to Start: always solid Midnight (open or closed). */
.bp-title-trigger.bp-where-to-start {
  background-color: var(--e-global-color-midnight, #1A1040);
}

/* Same logic — bg only, no backdrop-filter. The sub-menu wrapper above
   already contributes the blur layer. */
.bp-links-container {
  display: none;
  border-radius: var(--bp-radius-item);
  background: var(--bp-frost-light-bg);
}

.bp-links-container.is-open {
  display: flex;
}

/* The "where to start" panel always renders on white when open */
.bp-links-container.bp-where-to-start.is-open {
  background: white;
}


/* ── Submenu title + link rows ── */

.submenu-title {
  border-bottom: 1px solid white;
  width: 100%;
  padding-bottom: 4px;
}

/* Unified transition across bg + text color. Higher specificity than the
   global :where(a) so this wins. */
.bp-submenu-link-container {
  transition: background-color var(--bp-dur-med) ease, color var(--bp-dur-med) ease;
  cursor: pointer;
}

.bp-submenu-link-container .elementor-heading-title {
  transition: color var(--bp-dur-med) ease;
}

/* Hover only on LEAF link containers (those that don't wrap a nested
   accordion). Without :not(:has()) the parent wrapper containing a
   .bp-nested-trigger would also receive :hover when the child is hovered,
   making all visible items change bg together. */
.bp-submenu-link-container:not(:has(.bp-nested-trigger)):hover {
  background: var(--e-global-color-dawn);
}

/* !important: Elementor auto-generates per-widget CSS with 4-class specificity
   (e.g. `.elementor-168 .elementor-element.elementor-element-XXX
   .elementor-heading-title`) that sets color: white. */
.bp-submenu-link-container:not(:has(.bp-nested-trigger)):hover .elementor-heading-title {
  color: var(--e-global-color-midnight, #1A1040) !important;
}

/* Wrappers that hold a nested accordion are just containers — they shouldn't
   have their own bg / padding / blur (those would stack on top of the trigger
   pill and the inner links-container panel, causing visual artifacts).
   Elementor's per-widget CSS often adds these when the container is configured
   in the editor; this strips them back to a plain container. */
.bp-submenu-link-container:has(.bp-nested-trigger) {
  background: transparent !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Nested trigger pill (Memorial Options, Find a Memorial Forest).
   Per design: Midnight at 16% (--bp-frost-dark-bg), not the lighter
   white 16% used by the top-level Services column triggers. */
.bp-nested-trigger {
  background: var(--bp-frost-dark-bg);
  border-radius: var(--bp-radius-item);
  padding: 4px 18px;
  cursor: pointer;
  transition: background-color var(--bp-dur-med) ease;
}

/* Light variant of the nested trigger — same accordion behavior, but a
   white-16% pill instead of Midnight-16%. The Resources › "How we compare"
   trigger uses this per design (Figma frame 2147216783 / node 4542:7105),
   matching the white-16% pills of that dropdown. Add `bp-nested-trigger--light`
   ALONGSIDE `bp-nested-trigger` on the trigger. */
.bp-nested-trigger.bp-nested-trigger--light {
  background: var(--bp-frost-light-bg);
}

/* Nested links-container panel (the items inside Memorial Options /
   Find a Memorial Forest) — same Midnight 16% as their trigger above,
   to match the design system. The base .bp-links-container rule sets
   white 16%, which we override here for the nested case. */
.bp-submenu-link-container .bp-links-container {

}

.bp-memorials-options .bp-links-container, .bp-find-memorial .bp-links-container, .bp-cremations-options .bp-links-container {
  background: var(--bp-frost-dark-bg);
    backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* No .is-open bg change on nested triggers — rotating chevron is the signal. */


/* ── Chevron arrow rotation ──
   Shared rule for the 2 accordion systems:
     - .bp-title-trigger (Services column headers)
     - .bp-nested-trigger (Memorial Options / Memorial Trees) */

.bp-title-trigger img,
.bp-nested-trigger img {
  transition: transform var(--bp-dur-med) ease;
}

.bp-title-trigger.is-open img,
.bp-nested-trigger.is-open img {
  transform: rotate(180deg);
}


/* ── Desktop: hide Elementor's native dropdown chevron (we use our own) ── */

@media screen and (min-width: 1025px) {
  .elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon {
    display: none;
  }
}


/* ── Tablet and mobile menu layout ── */

@media screen and (max-width: 1024px) {
  .e-n-menu-content {
    width: 100% !important;
  }

  .e-n-menu-wrapper {
    padding: 21px 32px 30px 32px;
  }

  .e-n-menu-wrapper .e-n-menu-heading {
    padding: 8px;
    border-radius: var(--bp-radius-card);
    background: var(--bp-frost-dark-bg);
    backdrop-filter: var(--bp-frost-blur);
    -webkit-backdrop-filter: var(--bp-frost-blur);
  }

  .e-n-menu-item {
    position: relative;
    margin-bottom: 8px;
  }

  .e-n-menu-item:last-child {
    margin-bottom: 0;
  }

  .e-n-menu-title {
    background-color: var(--bp-frost-light-bg) !important;
    width: 100%;
    display: flex !important;
    align-items: center;
  }

  /* Push the chevron button to the right edge of the pill */
  .e-n-menu-title .e-n-menu-dropdown-icon {
    margin-left: auto !important;
  }

  /* The chevron SVGs are designed stroke-only — kill the default fill so
     they don't render with a doubled-up filled+stroked look. */
  .e-n-menu-dropdown-icon svg {
    fill: none !important;
  }

  .bp-icon-mobile {
    margin-right: auto;
  }
}


@media screen and (max-width: 767px) {
  .e-n-menu-wrapper {
    padding: 21px 16px 30px 16px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Start Here — mobile-only menu item, styled as a CTA pill
   Per Figma "Frame 2147216602" (Components page, id 1379:38427).
   The user added this as an item inside the Nested Menu widget with
   id `start-here-mobile`. Its DOM is `.e-n-menu-title > .e-n-menu-title-container > .e-n-menu-title-text`,
   NOT a button widget — so we style the <a> container directly.
   Hidden on tablet/desktop; visible only below the mobile breakpoint.
   ════════════════════════════════════════════════════════════════════ */

#start-here-mobile {
  display: none !important;
}

/* Also hide the parent <li> wrapper (`.e-n-menu-item`) on tablet/desktop,
   otherwise it leaves a blank slot (gap + padding) in the menu list even
   though its `.e-n-menu-title` is hidden. */
.e-n-menu-item:has(#start-here-mobile) {
  display: none !important;
}

@media screen and (max-width: 767px) {
  /* Show the LI wrapper again on mobile */
  .e-n-menu-item:has(#start-here-mobile) {
    display: flex !important;
  }

  /* Show the menu item again on mobile (override the global hide above
     and any inherited `display` on .e-n-menu-title). */
  #start-here-mobile {
    display: flex !important;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Style the inner <a> as the actual pill button */
  #start-here-mobile .e-n-menu-title-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px;
    padding: 4px 17px !important;
    background-color: var(--e-global-color-midnight, #1A1040) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--e-global-color-midnight, #1A1040);
    border-radius: 15px !important;
    text-decoration: none;
    box-sizing: border-box;
    transition:
      background-color var(--bp-dur-med) ease-out,
      color var(--bp-dur-med) ease-out,
      border-color var(--bp-dur-med) ease-out;
  }
  #start-here-mobile .e-n-menu-title-text {
    color: #FFFFFF !important;
    font-family: var(--e-global-typography-primary-font-family, "Dada Grotesk"), sans-serif;
    font-size: var(--e-global-typography-primary-font-size, 16px);
    font-weight: var(--e-global-typography-primary-font-weight, 400);
    line-height: var(--e-global-typography-primary-line-height, 26px);
  }

  /* Hover/focus — invert: white bg, Midnight text */
  #start-here-mobile .e-n-menu-title-container:hover,
  #start-here-mobile .e-n-menu-title-container:focus-visible {
    background-color: #FFFFFF !important;
    color: var(--e-global-color-midnight, #1A1040) !important;
  }
  #start-here-mobile .e-n-menu-title-container:hover .e-n-menu-title-text,
  #start-here-mobile .e-n-menu-title-container:focus-visible .e-n-menu-title-text {
    color: var(--e-global-color-midnight, #1A1040) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   FAQ — "View more / View less" arrow rotation
   The JS in /assets/js/faq-toggle.js toggles `.is-open` on the
   `.more-question` button when expanding the accordion. The `.arrow`
   element next to the button rotates 180° to match.

   Selectors cover both common layouts:
     - .arrow as direct sibling of .more-question (most common)
     - .arrow as descendant inside .more-question
     - .arrow as later sibling (in case a wrapper exists between them)
   ════════════════════════════════════════════════════════════════════ */
.more-question .arrow,
.more-question + .arrow,
.more-question ~ .arrow {
  display: inline-block;
  transform: rotate(180deg);          /* default state — arrow flipped */
  transition: transform var(--bp-dur-med) ease-out;
  transform-origin: center;
}
.more-question.is-open .arrow,
.more-question.is-open + .arrow,
.more-question.is-open ~ .arrow {
  transform: rotate(0deg);            /* open state — arrow back to natural */
}


/* ════════════════════════════════════════════════════════════════════
   FAQ component — accordion item dividers + collapse-after-5 behavior
   Scoped to `.bp-comp-faq` (apply to the root container in Elementor).

   Items 6+ are hidden by default with max-height: 0 + opacity: 0.
   The `.show-all` class (toggled by faq-toggle.js when the user clicks
   `.more-question`) reveals them with a smooth max-height + opacity
   transition.
   ════════════════════════════════════════════════════════════════════ */
.bp-comp-faq .e-con {
  border: none;
}
.bp-comp-faq .e-n-accordion-item {
  border-bottom: 1px solid #1A104029;
}
.bp-comp-faq .e-n-accordion-item:first-child {
  border-top: 1px solid #1A104029;
}
.bp-comp-faq .e-n-accordion-item-title-header {
  flex-grow: 1;
}
.bp-comp-faq .e-n-accordion .e-n-accordion-item:nth-of-type(n+6) {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.7s ease, opacity 0.5s ease;
}
.bp-comp-faq .e-n-accordion.show-all .e-n-accordion-item {
  max-height: 1000px;
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════
   Comparing Memorial table — bp-comp-comparing-memorial
   Semantic <table> (for SEO) with one highlighted column (Memorial Trees).
   Wrap in `.bp-scroll-x.bp-scroll-x--bar` to enable horizontal scroll on
   smaller breakpoints.
   ════════════════════════════════════════════════════════════════════ */
.bp-compare-table {
  border-collapse: separate;
  border-spacing: 32px 0;
  table-layout: fixed;
  width: max-content;
  margin: 0; /* outer border-spacing creates 32px lead-in inside .bp-scroll-x padding */
}
/* Defeat Hello Elementor's reset.css for tables. Background-color is
   from zebra-striping `table tbody > tr:nth-child(2n+1) > td`; border
   is from `table td, table th`.

   In theory class-scoped selectors should win by specificity, but in
   practice some Elementor stylesheet layer overrides border-top on
   thead cells regardless of cascade rules — `!important` is the only
   reliable defeat across all 54 cells. */
table.bp-compare-table thead > tr > th,
table.bp-compare-table tbody > tr > th,
table.bp-compare-table tbody > tr > td {
  background-color: transparent !important;
  border: 0 !important;
  /* Anchor for the ::after row-divider line. */
  position: relative;
}

/* Continuous row divider — each cell draws a 1px line at its bottom that
   extends `border-spacing` px to the right to cross the column gap.
   Adjacent cell's line picks up at exactly the gap's end → no visible
   break. Last cell in each row stops at its own right edge. */
table.bp-compare-table thead > tr > th::after,
table.bp-compare-table tbody > tr > th::after,
table.bp-compare-table tbody > tr > td::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 32px);
  height: 1px;
  background-color: rgba(26, 16, 64, 0.08);
  pointer-events: none;
}
table.bp-compare-table thead > tr > th:last-child::after,
table.bp-compare-table tbody > tr > th:last-child::after,
table.bp-compare-table tbody > tr > td:last-child::after {
  width: 100%;
}
/* Highlighted "Memorial Trees" column — per-cell selector. */
table.bp-compare-table thead > tr > th:nth-child(2),
table.bp-compare-table tbody > tr > th:nth-child(2),
table.bp-compare-table tbody > tr > td:nth-child(2) {
  background-color: rgba(26, 16, 64, 0.08) !important;
}
/* Opt-out of the column-2 highlight — for plain multi-column tables that
   aren't a "compare against BP" layout (e.g. the tasks-handled checklist).
   Higher specificity (extra class) beats the highlight rule above. */
table.bp-compare-table.bp-compare-table--no-highlight thead > tr > th:nth-child(2),
table.bp-compare-table.bp-compare-table--no-highlight tbody > tr > th:nth-child(2),
table.bp-compare-table.bp-compare-table--no-highlight tbody > tr > td:nth-child(2) {
  background-color: transparent !important;
}

/* Complete Cremation (CA) comparison table — uniform 84px data rows so the
   single-line rows match the multi-line ones (Figma "Frame 2147216876", Lark
   QA). `height` is a MINIMUM on table rows, so taller rows (the 2-line header,
   the multi-line "Cremation" row) keep their content height, and section
   dividers (.section-row) stay at their own height. Page-scoped so the shared
   .bp-compare-table component is untouched elsewhere. */
.bp-page-complete-cremation-california table.bp-compare-table tbody > tr:not(.section-row) {
  height: 84px;
}

/* Secondary parenthetical line inside a compare cell (e.g. the "Cremation"
   row's "(aquamation & natural organic reduction available)"). Renders as
   "small body" (14px) and stays on one line so it does not wrap (Lark QA,
   node 4352:11658). The parenthetical is wrapped in <span class="bp-compare-sub">,
   itself inside a single wrapper <span> so the parent flex .bp-compare-check
   keeps exactly two flex items (check icon + text) — otherwise the text node,
   <br> and span would each become separate flex items and break the layout. */
.bp-page-complete-cremation-california .bp-compare-table .bp-compare-sub {
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
}

/* ── bp-comp-tasks-handled — borderless, tight checklist rows ──
   Scoped to the component so the comparison tables are untouched. Matches
   Figma 3862:8066 exactly:
     - border-spacing 0 (NOT the inherited 32px) so the Midnight section
       rows go FULL-BLEED edge-to-edge and the gutters are controlled by
       per-column cell padding instead.
     - No row dividers.
     - Data cells: 16px-top / 8px-bottom (tighter than comparison tables),
       left + top aligned. Column gutters via padding: first cell 24px left,
       last cell 24px right (outer inset), 16px on the inner sides → 32px
       between columns.
     - Section rows: full-bleed Midnight, 14px vertical / 16px inset, 56px.
     - 10px check↔text gap, check stays on the first line when text wraps. */
.bp-comp-tasks-handled .bp-compare-table {
  border-spacing: 0 !important;
  /* The responsive `.bp-compare-table` rules apply margin-left: -16/-24px to
     cancel the OUTER border-spacing so the sticky first column sits flush.
     This table has border-spacing 0 (nothing to cancel), so that negative
     margin would just eat the scroll container's left gutter — kill it.
     The START gutter then comes cleanly from the scroll container's
     padding-left (20 mobile / 32 tablet); the END gutter is rebuilt below
     via a transparent right border (scroll padding-right is dropped by
     browsers at the scroll-end of an overflow container). */
  margin: 0 !important;
}
.bp-comp-tasks-handled .bp-compare-table tbody > tr > td::after,
.bp-comp-tasks-handled .bp-compare-table tbody > tr > th::after {
  display: none !important;
}
/* Vertical rhythm (Figma): middle data rows are TIGHT — 0 top / 8 bottom,
   so only 8px separates consecutive items. The first row after a section
   gets 16px top (space under the header); the last row before the next
   section (or end of table) gets 16px bottom. Horizontal: 24px outer
   inset, 32px between columns (16 + 16 adjacent padding). */
.bp-comp-tasks-handled .bp-compare-table tbody > tr > td {
  padding: 0 16px 8px 16px !important;
  text-align: left !important;
  vertical-align: top !important;
}
.bp-comp-tasks-handled .bp-compare-table tbody > tr > td:first-child {
  padding-left: 24px !important;
}
.bp-comp-tasks-handled .bp-compare-table tbody > tr > td:last-child {
  padding-right: 24px !important;
}
/* first data row after a section header → 16px top */
.bp-comp-tasks-handled .bp-compare-table tr.section-row + tr > td {
  padding-top: 16px !important;
}
/* last data row before the next section header (or end) → 16px bottom */
.bp-comp-tasks-handled .bp-compare-table tbody > tr:has(+ tr.section-row) > td,
.bp-comp-tasks-handled .bp-compare-table tbody > tr:last-child > td {
  padding-bottom: 16px !important;
}
.bp-comp-tasks-handled .bp-compare-table tr.section-row > th {
  padding: 14px 16px !important;
}
.bp-comp-tasks-handled .bp-compare-check {
  gap: 10px;
  align-items: flex-start;
}
/* END gutter (tablet/mobile only — the table only scrolls there).
   A transparent right border lives INSIDE the table's border-box, so it is
   part of the horizontal scroll width and survives the scroll-end (unlike the
   scroll container's padding-right, which the browser collapses). Values match
   the working comparison tables' right gutter: 24px tablet / 16px mobile. */
@media (max-width: 1024px) {
  .bp-comp-tasks-handled .bp-compare-table {
    border-right: 24px solid transparent !important;
  }
}
@media (max-width: 767px) {
  .bp-comp-tasks-handled .bp-compare-table {
    border-right: 16px solid transparent !important;
  }
}

/* ── bp-cremation-near-me — city directory grouped by county ──────────
   A REFLOWING 5-column grid of city links under full-bleed Midnight county
   headers. Source: Figma 3887:8043. Unlike the comparison/checklist tables
   this reflows (5 → 3 → 2 cols) instead of horizontally scrolling, because
   each city is an independent link (no column relationship). Markup is a
   grouped list (<section><h3> + <ul>) for SEO/a11y, not a <table>. */
.bp-cremation-near-me .bp-cnm-county {
  /* sections stack flush — the grid's 16px bottom padding is the rhythm */
  margin: 0;
}
.bp-cremation-near-me .bp-cnm-county-title {
  background-color: var(--e-global-color-text, #1A1040);
  color: #FFFFFF;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  margin: 0;
  padding: 14px 16px;
}
.bp-cremation-near-me .bp-cnm-cities {
  list-style: none;
  margin: 0;
  /* 16 top (under header) / 16 bottom (before next header); 24 outer inset */
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 8px;
}
.bp-cremation-near-me .bp-cnm-cities > li {
  margin: 0;
  padding: 0;
}
.bp-cremation-near-me .bp-cnm-cities a {
  display: inline-block;
  color: #5A5A70; /* muted (default) */
  font-size: 16px;
  line-height: 26px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.bp-cremation-near-me .bp-cnm-cities a:hover,
.bp-cremation-near-me .bp-cnm-cities a:focus-visible {
  color: var(--e-global-color-text, #1A1040); /* Midnight on hover, underline stays */
}
@media (max-width: 1024px) {
  .bp-cremation-near-me .bp-cnm-cities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .bp-cremation-near-me .bp-cnm-cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
}

.bp-compare-table th,
.bp-compare-table td {
  padding: 16px 0;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  box-sizing: border-box;
}
.bp-compare-table thead th,
.bp-compare-table tbody th[scope="row"] {
  font-size: 18px;
  line-height: 28px;
  color: var(--e-global-color-text, #1a1040);
}
.bp-compare-table tbody td {
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-muted, #5a5a70);
}
.bp-compare-table tbody th[scope="row"] {
  text-align: left;
}
.bp-compare-table th:nth-child(1),
.bp-compare-table td:nth-child(1) { width: 101px; }
.bp-compare-table th:nth-child(2),
.bp-compare-table td:nth-child(2) { width: 166px; padding: 16px 24px; }
.bp-compare-table th:nth-child(3),
.bp-compare-table td:nth-child(3) { width: 176px; }
.bp-compare-table th:nth-child(4),
.bp-compare-table td:nth-child(4) { width: 113px; }
.bp-compare-table th:nth-child(5),
.bp-compare-table td:nth-child(5) { width: 135px; }
.bp-compare-table th:nth-child(6),
.bp-compare-table td:nth-child(6) { width: 229px; }

@media (max-width: 1024px) {
  /* `margin-left` cancels the table's OUTER border-spacing on the left so
     the first column starts flush with the scroll wrap edge — otherwise
     `position: sticky; left: 0` lets the column drift the first 24px
     before pinning (sticky activates only when the cell would cross x=0). */
  .bp-compare-table {
    border-spacing: 24px 0;
    margin-left: -24px;
  }

  /* Row divider line extension matches the smaller border-spacing. */
  table.bp-compare-table thead > tr > th::after,
  table.bp-compare-table tbody > tr > th::after,
  table.bp-compare-table tbody > tr > td::after {
    width: calc(100% + 24px);
  }
  table.bp-compare-table thead > tr > th:last-child::after,
  table.bp-compare-table tbody > tr > th:last-child::after,
  table.bp-compare-table tbody > tr > td:last-child::after {
    width: 100%;
  }

  /* Sticky first column on tablet/mobile (frozen labels while cols 2-6 scroll).
     Needs solid bg + box-shadow to cover the border-spacing gap to the next
     column, otherwise col 2 peeks through during scroll. */
  table.bp-compare-table thead > tr > th:first-child,
  table.bp-compare-table tbody > tr > th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #FFFFFF !important;
    box-shadow: 24px 0 0 #FFFFFF;
  }
}
@media (max-width: 767px) {
  .bp-compare-table {
    border-spacing: 16px 0;
    margin-left: -16px;
  }

  table.bp-compare-table thead > tr > th::after,
  table.bp-compare-table tbody > tr > th::after,
  table.bp-compare-table tbody > tr > td::after {
    width: calc(100% + 16px);
  }
  table.bp-compare-table thead > tr > th:last-child::after,
  table.bp-compare-table tbody > tr > th:last-child::after,
  table.bp-compare-table tbody > tr > td:last-child::after {
    width: 100%;
  }

  table.bp-compare-table thead > tr > th:first-child,
  table.bp-compare-table tbody > tr > th[scope="row"] {
    box-shadow: 16px 0 0 #FFFFFF;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Opt-out modifier: bp-compare-table--no-sticky

   Keeps all the visual styling of bp-compare-table (borders, highlight,
   padding, font sizes, scroll wrapper, etc.) but disables the sticky
   first column behavior at tablet/mobile. First column scrolls with
   the rest of the table as a normal cell.

   Usage:
     <table class="bp-compare-table bp-compare-table--no-sticky">
   ════════════════════════════════════════════════════════════════════ */
table.bp-compare-table.bp-compare-table--no-sticky thead > tr > th:first-child,
table.bp-compare-table.bp-compare-table--no-sticky tbody > tr > th[scope="row"] {
  /* Keep `relative` (NOT static) — cells need a positioned ancestor for
     the `::after` row-divider to anchor inside the cell. With static,
     the ::after escapes to a higher ancestor and the divider line ends
     up rendered at the bottom of the whole table or beyond. */
  position: relative !important;
  background-color: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* ════════════════════════════════════════════════════════════════════
   Compare-table extensions — section header rows + list cells
   Used by 3-col cremation comparison tables (bp-comp-comparing-traditional
   and bp-comp-comparing-direct). Backwards-compatible with the original
   6-col bp-comp-comparing-table (rules only kick in if the markup is used).
   ════════════════════════════════════════════════════════════════════ */

/* Section divider row — Midnight bg, white text, spans all columns.
   Used as visual section break inside long comparison tables.
   Figma: Dada Grotesk 18/28 w400 (style 15:167 — body-medium). */
table.bp-compare-table tr.section-row > th {
  background-color: var(--e-global-color-text, #1a1040) !important;
  color: #FFFFFF !important;
  text-align: left !important;
  padding: 16px 24px !important;
  font-weight: 400;
  font-size: 18px !important;
  line-height: 28px !important;
}
/* Section row covers the row-divider line below it (so it doesn't show
   as a faint stripe under the dark bg). */
table.bp-compare-table tr.section-row > th::after {
  display: none !important;
}

/* List cells inside compare-table cells — used when a cell needs to
   show multiple bullet items (e.g. "What's Included" in Traditional).
   Each <li> gets a leading circle-check icon via ::before (SVG mask,
   colored with currentColor). List is centered horizontally as a block. */
.bp-compare-table ul.bp-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* Center the inline-flex list block inside the cell. */
.bp-compare-table td:has(ul.bp-compare-list),
.bp-compare-table th:has(ul.bp-compare-list) {
  vertical-align: top !important;
  text-align: center !important;
}
.bp-compare-table ul.bp-compare-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.625;
}
.bp-compare-table ul.bp-compare-list li::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M21.801 10C22.2577 12.2413 21.9322 14.5714 20.8789 16.6018C19.8255 18.6322 18.1079 20.24 16.0125 21.1573C13.9171 22.0746 11.5706 22.2458 9.36431 21.6424C7.15798 21.0389 5.2252 19.6974 3.88828 17.8414C2.55137 15.9854 1.89113 13.7272 2.01767 11.4434C2.14421 9.15952 3.04989 6.98808 4.58366 5.29116C6.11743 3.59424 8.18659 2.47442 10.4461 2.11844C12.7056 1.76247 15.0188 2.19185 17 3.33499' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 11L12 14L22 4' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M21.801 10C22.2577 12.2413 21.9322 14.5714 20.8789 16.6018C19.8255 18.6322 18.1079 20.24 16.0125 21.1573C13.9171 22.0746 11.5706 22.2458 9.36431 21.6424C7.15798 21.0389 5.2252 19.6974 3.88828 17.8414C2.55137 15.9854 1.89113 13.7272 2.01767 11.4434C2.14421 9.15952 3.04989 6.98808 4.58366 5.29116C6.11743 3.59424 8.18659 2.47442 10.4461 2.11844C12.7056 1.76247 15.0188 2.19185 17 3.33499' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 11L12 14L22 4' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* bp-compare-check — single-cell inline check (no list).
   Used inside <td> when a row's "included" item needs a leading
   circle-check icon (same SVG as the bp-compare-list). The script's
   cell() helper detects "✓ " prefix in source text and wraps the
   remainder in <span class="bp-compare-check">…</span>.
   The host cell itself is left-aligned (overriding the cell-level
   center) so icon + text hug the left edge — matches Figma. */
.bp-compare-table td:has(> .bp-compare-check) {
  text-align: left !important;
  vertical-align: middle !important;
}
.bp-compare-table .bp-compare-check {
  display: flex;          /* block-level flex — avoids inline-flex baseline quirk
                             that misaligned vertical centering in the cell */
  align-items: center;
  gap: 8px;
  text-align: left;
}
.bp-compare-table .bp-compare-check::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M21.801 10C22.2577 12.2413 21.9322 14.5714 20.8789 16.6018C19.8255 18.6322 18.1079 20.24 16.0125 21.1573C13.9171 22.0746 11.5706 22.2458 9.36431 21.6424C7.15798 21.0389 5.2252 19.6974 3.88828 17.8414C2.55137 15.9854 1.89113 13.7272 2.01767 11.4434C2.14421 9.15952 3.04989 6.98808 4.58366 5.29116C6.11743 3.59424 8.18659 2.47442 10.4461 2.11844C12.7056 1.76247 15.0188 2.19185 17 3.33499' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 11L12 14L22 4' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M21.801 10C22.2577 12.2413 21.9322 14.5714 20.8789 16.6018C19.8255 18.6322 18.1079 20.24 16.0125 21.1573C13.9171 22.0746 11.5706 22.2458 9.36431 21.6424C7.15798 21.0389 5.2252 19.6974 3.88828 17.8414C2.55137 15.9854 1.89113 13.7272 2.01767 11.4434C2.14421 9.15952 3.04989 6.98808 4.58366 5.29116C6.11743 3.59424 8.18659 2.47442 10.4461 2.11844C12.7056 1.76247 15.0188 2.19185 17 3.33499' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 11L12 14L22 4' stroke='black' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ════════════════════════════════════════════════════════════════════
   Compare-table extensions — 2-col variant with images + stacked cells
   Used by bp-comp-comparing-tree-pod (and any future 2-col compare table
   that has a leading image row and cells with title + sub-body text).
   ════════════════════════════════════════════════════════════════════ */

/* BP-first modifier — when the BP-highlighted column is column 1 instead
   of column 2 (default). Reverses the highlight only; padding stays at
   16px/24px on BOTH cols so content starts at the same horizontal offset
   from each cell's left edge. Used for 2-col tables where BP leads. */
table.bp-compare-table.bp-compare-table--bp-first thead > tr > th:nth-child(2),
table.bp-compare-table.bp-compare-table--bp-first tbody > tr > td:nth-child(2) {
  background-color: transparent !important;
  padding: 16px 24px !important;
}
table.bp-compare-table.bp-compare-table--bp-first thead > tr > th:nth-child(1),
table.bp-compare-table.bp-compare-table--bp-first tbody > tr > td:nth-child(1) {
  background-color: rgba(26, 16, 64, 0.08) !important;
  padding: 16px 24px !important;
}

/* Images row inside <thead> — sits above the column headers, fills the
   full cell width, no padding, no row-divider line. Selector beats the
   --bp-first rule above by also including `.bp-compare-table--bp-first`
   in the selector, so the image cell stays clean (no padding/highlight)
   even on BP-first tables. */
table.bp-compare-table tr.bp-compare-imgs-row > th,
table.bp-compare-table.bp-compare-table--bp-first tr.bp-compare-imgs-row > th {
  padding: 0 !important;
  background-color: transparent !important;
  vertical-align: top !important;
}
table.bp-compare-table tr.bp-compare-imgs-row > th::after {
  display: none !important;
}
table.bp-compare-table tr.bp-compare-imgs-row img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Stacked cell — title + sub-body in a single <td>. The title can be
   wrapped in <span class="bp-compare-check"> for BP-side check rows.
   When a cell contains .bp-compare-cell-title, the whole cell switches
   to left-aligned / top-aligned so multi-line content reads naturally. */
.bp-compare-table td:has(.bp-compare-cell-title) {
  text-align: left !important;
  vertical-align: top !important;
}
.bp-compare-table .bp-compare-cell-title {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-text, #1a1040);
}
.bp-compare-table .bp-compare-cell-body {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--e-global-color-muted, #5a5a70);
}
/* When the title contains a check icon, indent the following body so it
   aligns with the title text (past the icon + gap = 24 + 8 = 32px). */
.bp-compare-table .bp-compare-cell-title:has(.bp-compare-check) + .bp-compare-cell-body {
  padding-left: 32px;
}

/* ════════════════════════════════════════════════════════════════════
   bp-imgs-row — opt-in helper for an Elementor flex-row container
   holding multiple image widgets that should stay at their intrinsic
   width (Elementor "Initial" width) and OVERFLOW horizontally with
   the parent scroll container — instead of wrapping to a vertical
   stack on narrow viewports.

   Add `bp-imgs-row` via Advanced → CSS Classes on the parent container.
   Typically nested inside a parent `.bp-scroll-x.bp-scroll-x--bar`
   container so images + table below scroll together as one unit.

   Why the override: Elementor's default flex container sets
   `flex-wrap: wrap`, which makes children rewrap to stacked rows
   when the total content width exceeds the container. For "scroll
   horizontally to see both" we need nowrap + flex-shrink: 0 on the
   image widgets so they stay at intrinsic size.
   ════════════════════════════════════════════════════════════════════ */
.bp-imgs-row {
  --bp-imgs-row-img-w: 325px;      /* per-image fixed width; override on the
                                      container in Elementor Advanced → Custom
                                      CSS if a different width is needed */
  flex-wrap: nowrap !important;
}
.bp-imgs-row > .elementor-widget-image {
  flex: 0 0 var(--bp-imgs-row-img-w) !important;
  width: var(--bp-imgs-row-img-w) !important;
  max-width: var(--bp-imgs-row-img-w) !important;
}
.bp-imgs-row > .elementor-widget-image .elementor-image,
.bp-imgs-row > .elementor-widget-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}


/* ════════════════════════════════════════════════════════════════════
   bp-comp-tab-compare-cremation
   Interactive pricing component — 2 region toggle buttons + 4 tree tabs.
   Each combination shows one of 8 pricing tables. Tab/region state held
   on `.bp-cremation-tabs` root via data-region / data-tree attrs; JS
   (bp-cremation-tabs.js) handles click handlers + visibility toggles.
   Wrapped in bp-scroll-x bp-scroll-x--bar so the 1184-wide layout
   scrolls horizontally on viewports < 1184.
   ════════════════════════════════════════════════════════════════════ */
.bp-cremation-tabs {
  font-family: var(--e-global-typography-body-font-family, 'Dada Grotesk', sans-serif);
  color: var(--e-global-color-text, #1A1040);
}

/* ── Header (viewport-width, outside the scroll container) ── */
.bp-cremation-tabs .cremation-tabs-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0 auto 48px;
  padding: 0 24px;
  max-width: 1184px;
}
.bp-cremation-tabs .cremation-tabs-title {
  font-size: 48px;
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
  text-align: center;
  color: var(--e-global-color-text, #1A1040);
}

/* Region buttons — pill outline, midnight border + text, white bg.
   Active state reveals the arrow icon. */
.bp-cremation-tabs .cremation-tabs-region-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.bp-cremation-tabs .cremation-region-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border: 1px solid var(--e-global-color-text, #1A1040);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--e-global-color-text, #1A1040);
  font: inherit;
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
  transition: background var(--bp-dur-med, .3s) ease,
              color var(--bp-dur-med, .3s) ease;
}
.bp-cremation-tabs .cremation-region-btn .cremation-arrow {
  flex-shrink: 0;
  width: 0;
  height: 16px;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: width var(--bp-dur-med, .3s) ease,
              margin-left var(--bp-dur-med, .3s) ease,
              opacity var(--bp-dur-med, .3s) ease;
}
.bp-cremation-tabs .cremation-region-btn.is-active .cremation-arrow {
  width: 16px;
  margin-left: 0;
  opacity: 1;
}
.bp-cremation-tabs .cremation-region-btn:hover,
.bp-cremation-tabs .cremation-region-btn:focus-visible {
  background: var(--e-global-color-text, #1A1040);
  color: #FFFFFF;
}

/* ── Scroll container (bp-scroll-x bp-scroll-x--bar handles overflow) ── */
.bp-cremation-tabs .cremation-tabs-content {
  width: 1184px;
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: content-box;
}

/* ── Tree cards row (4 cards in a rounded sand-tint container) ── */
.bp-cremation-tabs .cremation-tree-cards {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: rgba(26, 16, 64, 0.08);
  border-radius: 24px;
  margin-bottom: 32px;
}
.bp-cremation-tabs .cremation-tree-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--e-global-color-text, #1A1040);
  font: inherit;
  font-family: var(--e-global-typography-body-font-family, 'Dada Grotesk', sans-serif);
  cursor: pointer;
  text-align: center;
  transition: background var(--bp-dur-med, .3s) ease,
              color var(--bp-dur-med, .3s) ease;
}
.bp-cremation-tabs .cremation-tree-card:hover {
  background: rgba(26, 16, 64, 0.05);
}
.bp-cremation-tabs .cremation-tree-card.is-active {
  background: var(--e-global-color-text, #1A1040);
  color: #FFFFFF;
  cursor: default;
}
.bp-cremation-tabs .cremation-tree-card.is-active:hover {
  background: var(--e-global-color-text, #1A1040);
}
.bp-cremation-tabs .cremation-tree-card .tree-eyebrow {
  display: inline-block;
  background: var(--e-global-color-golden-hour, #FFE8D6);
  color: var(--e-global-color-text, #1A1040);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.24px;
  margin-bottom: 12px;
}
.bp-cremation-tabs .cremation-tree-card .tree-name {
  display: block;
  font-size: 28px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.28px;
  margin-bottom: 4px;
}
.bp-cremation-tabs .cremation-tree-card .tree-price {
  display: block;
  font-size: 16px;
  line-height: 26px;
  color: inherit;
}

/* ── Pricing tables (one visible at a time, rest [hidden]) ── */
.bp-cremation-tabs .cremation-pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  table-layout: fixed;
}
.bp-cremation-tabs .cremation-pricing-table[hidden] {
  display: none !important;
}
.bp-cremation-tabs .cremation-pricing-table thead th {
  background: var(--e-global-color-text, #1A1040) !important;
  color: #FFFFFF !important;
  padding: 16px 24px;
  text-align: left;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  border: 0 !important;
  width: 50%;
}
.bp-cremation-tabs .cremation-pricing-table thead .th-region {
  font-weight: 400;
  opacity: 0.85;
}
.bp-cremation-tabs .cremation-pricing-table tbody td {
  padding: 16px 24px;
  border: 0 !important;
  border-bottom: 1px solid rgba(26, 16, 64, 0.08) !important;
  background: transparent !important;
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-text, #1A1040);
  text-align: left;
  vertical-align: middle;
}
.bp-cremation-tabs .cremation-pricing-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
.bp-cremation-tabs .cremation-pricing-table tbody td strong {
  font-weight: 400;
}
.bp-cremation-tabs .cremation-pricing-table tbody td .muted {
  color: var(--e-global-color-muted, #5A5A70);
}

/* ── Footer note ── */
.bp-cremation-tabs .cremation-footnote {
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-muted, #5A5A70);
  margin: 16px 0 0;
}

/* ── Responsive overrides ── */
@media (max-width: 991px) {
  .bp-cremation-tabs .cremation-tabs-title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .bp-cremation-tabs .cremation-tabs-title {
    font-size: 28px;
  }
  .bp-cremation-tabs .cremation-tabs-header {
    margin-bottom: 32px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Text-color utility classes (BP kit globals)
   Apply via Elementor → Advanced → CSS Classes, or inline in HTML widgets.
   Mirrors the kit color slugs from bp/CLAUDE.md so the class name maps
   1:1 to the design token. `!important` so they win against widget-level
   color settings or Elementor's typography color cascade.
   ════════════════════════════════════════════════════════════════════ */
.bp-text-text        { color: var(--e-global-color-text, #1A1040) !important; }   /* Midnight */
.bp-text-muted       { color: var(--e-global-color-muted, #5A5A70) !important; }
.bp-text-canopy      { color: var(--e-global-color-canopy, #004C54) !important; }
.bp-text-white       { color: #FFFFFF !important; }

/* Primary palette */
.bp-text-dusk        { color: var(--e-global-color-dusk, #0A2D73) !important; }
.bp-text-horizon     { color: var(--e-global-color-horizon, #3787FF) !important; }
.bp-text-dawn        { color: var(--e-global-color-dawn, #D2F0FF) !important; }
.bp-text-sunrise     { color: var(--e-global-color-sunrise, #FFCAA0) !important; }

/* Secondary palette */
.bp-text-golden-hour { color: var(--e-global-color-golden-hour, #FFE8D6) !important; }
.bp-text-fog         { color: var(--e-global-color-fog, #91C3FF) !important; }
.bp-text-twilight    { color: var(--e-global-color-twilight, #465F98) !important; }
.bp-text-chalk       { color: var(--e-global-color-chalk, #F9F4F1) !important; }

/* Shared neutrals */
.bp-text-sand        { color: var(--e-global-color-sand, #F3EDE9) !important; }
.bp-text-stone       { color: var(--e-global-color-stone, #DACFBC) !important; }


/* ════════════════════════════════════════════════════════════════════
   bp-comp-compare-cremation
   3-tab interactive pricing component (Flame / Aquamation / Natural
   Organic Reduction). Tabs are icon+label cards (NOT pill buttons).
   Active tab swaps a 3-column pricing table below.
   Interactivity in bp-cremation-compare.js.
   Inside bp-scroll-x bp-scroll-x--bar so the 1184-wide table scrolls
   horizontally on viewports < 1184.
   ════════════════════════════════════════════════════════════════════ */
.bp-cremation-compare {
  font-family: var(--e-global-typography-body-font-family, 'Dada Grotesk', sans-serif);
  color: var(--e-global-color-text, #1A1040);
}

/* ── Header (outside scroll, viewport-width centered) ── */
.bp-cremation-compare .cremation-compare-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 644px;
  margin: 0 auto 48px;
  padding: 0 24px;
  text-align: center;
}
.bp-cremation-compare .cremation-compare-eyebrow {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--e-global-color-muted, #5A5A70);
}
.bp-cremation-compare .cremation-compare-headline {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--e-global-color-text, #1A1040);
}
.bp-cremation-compare .cremation-compare-body {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-muted, #5A5A70);
}

/* ── Scroll wrapper (sub-header + tabs + tables + footnote) ── */
.bp-cremation-compare .cremation-compare-content {
  width: 1184px;
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: content-box;
}

/* Sub-header above the tabs */
.bp-cremation-compare .cremation-compare-sub {
  margin: 0 0 24px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  text-align: center;
  color: var(--e-global-color-text, #1A1040);
}

/* ── Tabs row (3 cards in a rounded sand-tint container) ── */
.bp-cremation-compare .cremation-compare-tabs-row {
  display: flex;
  gap: 32px;
  padding: 16px;
  background: rgba(26, 16, 64, 0.08);
  border-radius: 24px;
  margin-bottom: 32px;
}
.bp-cremation-compare .cremation-compare-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 24px;
  border: 1px solid var(--e-global-color-text, #1A1040);
  border-radius: 16px;
  background: transparent;
  color: var(--e-global-color-text, #1A1040);
  font: inherit;
  font-family: var(--e-global-typography-body-font-family, 'Dada Grotesk', sans-serif);
  cursor: pointer;
  text-align: left;
  transition: background var(--bp-dur-med, .3s) ease,
              color var(--bp-dur-med, .3s) ease,
              border-color var(--bp-dur-med, .3s) ease;
}
.bp-cremation-compare .cremation-compare-tab:hover {
  background: rgba(26, 16, 64, 0.05);
}
.bp-cremation-compare .cremation-compare-tab.is-active {
  background: var(--e-global-color-text, #1A1040);
  color: #FFFFFF;
  border-color: var(--e-global-color-text, #1A1040);
  cursor: default;
}
.bp-cremation-compare .cremation-compare-tab.is-active:hover {
  background: var(--e-global-color-text, #1A1040);
}
.bp-cremation-compare .cremation-compare-tab .tab-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  color: inherit;
}
.bp-cremation-compare .cremation-compare-tab .tab-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bp-cremation-compare .cremation-compare-tab .tab-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.24px;
}

/* ── Pricing tables (one visible, rest [hidden]) ── */
.bp-cremation-compare .cremation-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  table-layout: fixed;
}
.bp-cremation-compare .cremation-compare-table[hidden] {
  display: none !important;
}
.bp-cremation-compare .cremation-compare-table thead th {
  background: var(--e-global-color-text, #1A1040) !important;
  color: #FFFFFF !important;
  padding: 16px 24px;
  text-align: left;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  border: 0 !important;
  width: 33.333%;
}
.bp-cremation-compare .cremation-compare-table tbody td {
  padding: 16px 24px;
  border: 0 !important;
  border-bottom: 1px solid rgba(26, 16, 64, 0.08) !important;
  background: transparent !important;
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-text, #1A1040);
  text-align: left;
  vertical-align: middle;
}
.bp-cremation-compare .cremation-compare-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
.bp-cremation-compare .cremation-compare-table tbody td strong {
  font-weight: 400;
}
.bp-cremation-compare .cremation-compare-table tbody td .muted {
  color: var(--e-global-color-muted, #5A5A70);
}
.bp-cremation-compare .cremation-compare-table .cremation-compare-cta {
  color: var(--e-global-color-text, #1A1040);
}
.bp-cremation-compare .cremation-compare-cta-phone {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bp-cremation-compare .cremation-compare-cta-phone:hover,
.bp-cremation-compare .cremation-compare-cta-phone:focus-visible {
  color: var(--e-global-color-canopy, #004C54);
}

/* ── Footer note ── */
.bp-cremation-compare .cremation-compare-footnote {
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-muted, #5A5A70);
  margin: 16px 0 0;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .bp-cremation-compare .cremation-compare-headline { font-size: 36px; }
  .bp-cremation-compare .cremation-compare-sub      { font-size: 24px; }
}
@media (max-width: 767px) {
  .bp-cremation-compare .cremation-compare-headline { font-size: 28px; }
  .bp-cremation-compare .cremation-compare-header   { margin-bottom: 32px; }

  /* Narrower fixed content → columns/cards shrink, less horizontal scroll */
  .bp-cremation-compare .cremation-compare-content {
    width: 820px;
    padding: 0 16px;
  }

  /* Sub-header + footnote: left-aligned on mobile */
  .bp-cremation-compare .cremation-compare-sub {
    font-size: 20px;
    line-height: 28px;
    text-align: left;
  }
  .bp-cremation-compare .cremation-compare-footnote {
    text-align: left;
  }

  /* Tabs row: tighter, smaller cards */
  .bp-cremation-compare .cremation-compare-tabs-row {
    gap: 12px;
    padding: 8px;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  .bp-cremation-compare .cremation-compare-tab {
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
  }
  .bp-cremation-compare .cremation-compare-tab .tab-icon {
    width: 32px;
    height: 32px;
  }
  .bp-cremation-compare .cremation-compare-tab .tab-title {
    font-size: 16px;
    line-height: 22px;
  }

  /* Pricing table: tighter cells, smaller type */
  .bp-cremation-compare .cremation-compare-table thead th {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 20px;
  }
  .bp-cremation-compare .cremation-compare-table tbody td {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 20px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   bp-comp-form-multistep
   Multi-step form (Email → Need state → Location → Calendar → Thank you).
   Interactivity in assets/js/bp-form-multistep.js.
   Built incrementally per milestone — current scope: M1 (Email capture).
   ════════════════════════════════════════════════════════════════════ */

/* Brand-side error color — not in kit globals; introduced here for form
   validation. If a kit global is added later, switch to var(--e-global-color-error). */
.bp-form-multistep {
  --bp-form-error: #C0392B;

  font-family: var(--e-global-typography-body-font-family, 'Dada Grotesk', sans-serif);
  color: var(--e-global-color-text, #1A1040);
  display: flex;
  justify-content: center;
  scroll-margin-top: 110px;
}

/* Landing-page prefill: while step 1 auto-advances to step 2 (the email came
   from a paid landing), hide the step-1 card and show a spinner so the user
   perceives landing directly on step 2. The class is removed once we reach
   step 2 — or if a Turnstile challenge needs to be shown (then step 1 appears
   so it can be solved). See initController() / autoAdvanceFromPrefill(). */
/* Two triggers, same visual:
   - html.bp-prefill-pending → set by a <head> script before first paint when the
     URL has ?prefill=1, so the SSR step-1 never flashes. Scoped to
     [data-step="email_capture"] so it ONLY hides step 1: the moment the JS
     advances (data-step becomes need_state) the form auto-reveals, even if the
     class is never removed (e.g. stale cached JS) — so it can't get stuck hidden.
   - .bp-prefilling on the form → set by the JS while it takes over the advance. */
.bp-form-multistep.bp-prefilling,
html.bp-prefill-pending .bp-form-multistep[data-step="email_capture"] {
  position: relative;
  min-height: 220px;
}
.bp-form-multistep.bp-prefilling .bp-form-modal,
html.bp-prefill-pending .bp-form-multistep[data-step="email_capture"] .bp-form-modal {
  visibility: hidden;
}
.bp-form-multistep.bp-prefilling::after,
html.bp-prefill-pending .bp-form-multistep[data-step="email_capture"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--e-global-color-dawn, #D2F0FF);
  border-top-color: var(--e-global-color-horizon, #3787FF);
  border-radius: 50%;
  animation: bp-prefill-spin 0.7s linear infinite;
}
@keyframes bp-prefill-spin {
  to { transform: rotate(360deg); }
}

/* Landing prefill forms redirect on submit, so the brief "Your submission was
   successful" flash is just noise before the jump to /start-here/. Hide ONLY
   the success message — error / validation messages (.elementor-message-danger)
   stay visible so users still see why a submit failed. */
.bp-landing-prefill .elementor-message-success {
  display: none !important;
}

/* ── Modal-like card container ── */
.bp-form-multistep .bp-form-modal {
  width: 576px;
  max-width: 100%;
  padding: 48px;
  /* Frosted-glass card: translucent midnight tint + backdrop blur so the
     full-bleed sky behind the form reads as blurred (Figma "Let's get started"
     mockup). -webkit- prefix kept for Safari. */
  background: rgba(26, 16, 64, 0.16);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
}

/* ── Progress bar (4 segments, current step = midnight, rest = white) ── */
.bp-form-multistep .bp-form-progress {
  display: flex;
  height: 4px;
  width: 100%;
}
.bp-form-multistep .bp-form-progress-dot {
  flex: 1 1 0;
  background: #FFFFFF;
  transition: background .35s ease;
}
/* Filled segments (up to + including the current step) render in the
   original Midnight so the bar visibly "loads up" as the user progresses. */
.bp-form-multistep .bp-form-progress-dot.is-active {
  background: var(--e-global-color-text, #1A1040);
}

/* ── Body (title + fields) ── */
.bp-form-multistep .bp-form-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.bp-form-multistep .bp-form-title {
  margin: 0;
  font-size: 28px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: var(--e-global-color-text, #1A1040);
}
.bp-form-multistep .bp-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Single field block ── */
.bp-form-multistep .bp-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-form-multistep .bp-form-field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bp-form-multistep .bp-form-field-label {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--e-global-color-text, #1A1040);
}
.bp-form-multistep .bp-form-field-optional {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--e-global-color-muted, #5A5A70);
}

/* Input — default, focused, error */
.bp-form-multistep .bp-form-field-input {
  width: 100%;
  height: 42px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--e-global-color-text, #1A1040);
  box-sizing: border-box;
  transition: border-color .15s ease;
  -webkit-appearance: none;
          appearance: none;
}
/* Disabled City input (before a State is chosen). "Not yet fillable" state =
   the exact translucent white a top-nav item shows on hover (#FFFFFF29 =
   rgba(255,255,255,0.16)). No per-field blur — the nav item has none either;
   the frost comes from the parent card's backdrop-filter. (Figma QA.) */
.bp-form-multistep .bp-form-field-input:disabled {
  background: #FFFFFF29;
  color: var(--e-global-color-muted, #5A5A70);
  cursor: not-allowed;
}
.bp-form-multistep .bp-form-field-input::placeholder {
  color: var(--e-global-color-muted, #5A5A70);
  opacity: 1;
}
.bp-form-multistep .bp-form-field-input:focus {
  outline: none;
  border-color: var(--e-global-color-text, #1A1040);
}
.bp-form-multistep .bp-form-field.has-error .bp-form-field-input {
  border-color: var(--bp-form-error);
}
.bp-form-multistep .bp-form-field-error {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--bp-form-error);
}

/* ── Footer (button + legal) ── */
.bp-form-multistep .bp-form-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Cloudflare Turnstile on step 1 — injected by the JS as the FIRST child of
   .bp-form-footer, i.e. between the fields and the Continue button. Hidden
   until a challenge is actually shown: managed/interaction-only passes
   silently, so in the normal case the widget adds NO layout (display:none =
   not a flex item = no dead gap above the button). The JS adds .is-visible via
   Turnstile's before-interactive-callback when a challenge appears; it then
   becomes a flex item and the footer's 16px gap spaces it from the button.
   (Token still generates while hidden — same pattern as the Elementor handler.) */
.bp-form-multistep .bp-form-turnstile { display: none; }
.bp-form-multistep .bp-form-turnstile.is-visible {
  display: flex;
  justify-content: center;
  /* Pull up to absorb the body→footer gap so the widget sits closer to the
     fields (only applies when shown — it's display:none otherwise). */
  margin-top: -20px;
}
.bp-form-multistep .bp-form-turnstile-error { text-align: center; }
@media (max-width: 767px) {
  .bp-form-multistep .bp-form-turnstile.is-visible { margin-top: -8px; }
}
.bp-form-multistep .bp-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 24px;
  border: 0;
  border-radius: 24px;
  font-family: inherit;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Default M1 button fills the modal width (Screen 1 has a single CTA). */
.bp-form-multistep .bp-form-btn--full {
  width: 100%;
}
.bp-form-multistep .bp-form-btn-primary {
  background: var(--e-global-color-text, #1A1040);
  color: #FFFFFF;
}
@media (hover: hover) and (pointer: fine) {
  .bp-form-multistep .bp-form-btn-primary:hover {
    background: var(--e-global-color-horizon, #3787FF);
  }
}
.bp-form-multistep .bp-form-btn-primary:focus-visible {
  background: var(--e-global-color-horizon, #3787FF);
  outline: none;
}
.bp-form-multistep .bp-form-btn[disabled] {
  opacity: 0.5;
  cursor: wait;
}

.bp-form-multistep .bp-form-legal {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  color: var(--e-global-color-text, #1A1040);
  text-align: center;
}
.bp-form-multistep .bp-form-legal a {
  color: inherit;
  /* Longhand text-decoration-line (not the `text-decoration` shorthand) so the
     thickness longhand below isn't dropped by shorthand serialization. */
  text-decoration-line: underline;
  /* Hairline underline matching Figma, which uses the font's own underline
     metric (measured ≈0.2px @11px). `from-font` pulls that same thin metric;
     the browser default `auto` rendered much heavier. (Figma QA.) */
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
/* Hover/click state for underlined link copy in the form → Horizon blue
   (Figma QA). Scoped to exclude buttons and the Thank-You article card,
   which have their own hover treatments. */
.bp-form-multistep a:not(.bp-form-btn):not(.bp-form-thanks-article):hover,
.bp-form-multistep a:not(.bp-form-btn):not(.bp-form-thanks-article):active,
.bp-form-multistep a:not(.bp-form-btn):not(.bp-form-thanks-article):focus-visible {
  color: var(--e-global-color-horizon, #3787FF);
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .bp-form-multistep .bp-form-modal {
    padding: 20px;
    gap: 20px;
  }
  .bp-form-multistep .bp-form-title {
    font-size: 24px;
    line-height: 28px;
  }
}


/* ── M2: Need state cards + Back/Continue footer ── */
.bp-form-multistep .bp-form-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card = full-width button with horizontal layout: text block (left) + radio (right) */
.bp-form-multistep .bp-form-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--e-global-color-text, #1A1040);
  font: inherit;
  font-family: var(--e-global-typography-body-font-family, 'Dada Grotesk', sans-serif);
  cursor: pointer;
  text-align: left;
  transition: background .2s ease, color .2s ease;
}
/* Hover state ONLY on devices that actually support hover AND have a
   precise pointer (mouse). On touch devices, `:hover` can stick after a
   tap until the user taps elsewhere — caused the "Facing a loss card
   looks hovered" bug on mobile. `(hover: hover) and (pointer: fine)` is
   stricter than `(hover: hover)` alone — some hybrid devices (Surface,
   Chromebooks with touch) report `hover: hover` even when used by touch.
   focus-visible stays outside for keyboard a11y. Also kill the iOS tap
   highlight that flashes the card on touch. */
.bp-form-multistep .bp-form-card {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .bp-form-multistep .bp-form-card:hover {
    background: var(--e-global-color-dawn, #D2F0FF);
  }
  .bp-form-multistep .bp-form-card.is-selected:hover {
    background: var(--e-global-color-horizon, #3787FF);
  }
}
.bp-form-multistep .bp-form-card:focus-visible {
  background: var(--e-global-color-dawn, #D2F0FF);
  outline: none;
}
.bp-form-multistep .bp-form-card.is-selected {
  background: var(--e-global-color-horizon, #3787FF);
  color: #FFFFFF;
}
/* Force the default background on touch (any non-precise pointer)
   regardless of pseudo-state. Defensive against any stuck :hover that
   slips through the media query. */
@media (hover: none), (pointer: coarse) {
  .bp-form-multistep .bp-form-card:not(.is-selected):hover,
  .bp-form-multistep .bp-form-card:not(.is-selected):active,
  .bp-form-multistep .bp-form-card:not(.is-selected):focus {
    background: #FFFFFF;
  }
}

/* Card text block — needs min-width: 0 + overflow-wrap to prevent the
   description text from forcing horizontal overflow on narrow viewports
   (mobile cards are ~250px wide, descriptions can have long words).
   Also forces children to display: block with max-width clamp because
   <button> + <span> + flex interactions can leave the text rendering
   on one line in some Chromium versions. */
.bp-form-multistep .bp-form-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.bp-form-multistep .bp-form-card-content > * {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.bp-form-multistep .bp-form-card-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--e-global-color-muted, #5A5A70);
  text-transform: uppercase;
}
.bp-form-multistep .bp-form-card.is-selected .bp-form-card-eyebrow {
  color: #FFFFFF;
  opacity: 0.85;
}
.bp-form-multistep .bp-form-card-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.22px;
  color: inherit;
}
.bp-form-multistep .bp-form-card-desc {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--e-global-color-muted, #5A5A70);
}
.bp-form-multistep .bp-form-card.is-selected .bp-form-card-desc {
  color: #FFFFFF;
  opacity: 0.95;
}

/* Radio circle (right side of card) */
.bp-form-multistep .bp-form-card-radio {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--e-global-color-text, #1A1040);
}
.bp-form-multistep .bp-form-card.is-selected .bp-form-card-radio {
  color: #FFFFFF;
}

/* Footer with 2 buttons (Back outline + Continue primary), space-between */
.bp-form-multistep .bp-form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Outline (Back) button — transparent bg + Midnight text + arrow icon, no
   visible border in Figma. Keep a 1px transparent border so the button's
   height matches the primary Continue button when they sit next to each
   other (otherwise the primary's no-border vs ours creates a 1px misalign). */
.bp-form-multistep .bp-form-btn-outline {
  background: transparent;
  color: var(--e-global-color-text, #1A1040);
  border: 1px solid transparent;
  gap: 8px;
}
/* Hover/click = just a color change to Horizon (no fill), per Figma QA. The
   arrow icon follows via currentColor. */
@media (hover: hover) and (pointer: fine) {
  .bp-form-multistep .bp-form-btn-outline:hover {
    background: transparent;
    color: var(--e-global-color-horizon, #3787FF);
  }
}
.bp-form-multistep .bp-form-btn-outline:focus-visible {
  background: transparent;
  color: var(--e-global-color-horizon, #3787FF);
  outline: 2px solid var(--e-global-color-horizon, #3787FF);
  outline-offset: 2px;
}
.bp-form-multistep .bp-form-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ── M3: Location screens (3A/B/C/D + D's sub-step) ── */

/* Header eyebrow (small uppercase line above the title, like "Sorry for your
   loss. We're here." on Screen 3A). Different from card eyebrows. */
.bp-form-multistep .bp-form-eyebrow {
  /* Target a 16px eyebrow→headline gap. The parent .bp-form-body is a flex
     column with gap:32px, and margins do NOT collapse in flex — a positive
     margin would ADD to the 32px (→48px). A -16px margin subtracts from the
     flex gap instead: 32 + (-16) = 16px, leaving title→fields at 32px. (Figma QA.) */
  margin: 0 0 -16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  /* H6 overline sits in Midnight, not Muted (Figma QA). */
  color: var(--e-global-color-text, #1A1040);
}

/* Simple card variant (used for D's Myself / Someone else sub-step).
   Reuses .bp-form-card states (hover, selected) but with just a title +
   radio, no eyebrow/description. */
.bp-form-multistep .bp-form-card--simple {
  padding: 16px;
  align-items: center;
}
.bp-form-multistep .bp-form-card--simple .bp-form-card-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.22px;
}

/* Hide the native datalist-picker chevron Chrome shows on inputs with [list].
   The datalist suggestions still work — we just don't want the visual artifact
   since Figma's city input is plain. */
.bp-form-multistep input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
}
.bp-form-multistep input[list]::-webkit-list-button {
  display: none !important;
}

/* Custom combobox — replaces <datalist> (mobile-unreliable) and <select>
   (inconsistent picker UX) with a JS-driven dropdown that filters as the
   user types. Used by City + State on the location step. Behavior in
   bp-form-multistep.js → setupCombo(). */
.bp-form-multistep .bp-form-combo {
  position: relative;
}
/* Caret arrow on the input (purely visual hint that there's a dropdown) */
.bp-form-multistep .bp-form-combo-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 6L8 10L12 6' stroke='%231A1040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
.bp-form-multistep .bp-form-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid var(--e-global-color-text, #1A1040);
  /* Match the entry-window (input) corner radius, not a larger one (Figma QA). */
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(26, 16, 64, 0.15);
  -webkit-overflow-scrolling: touch;
}
/* The .bp-form-modal's backdrop-filter (F1 frost) creates a stacking context
   that traps the combobox dropdown — its z-index:20 only competes inside the
   card, so an open State/City list paints UNDER the following footer section.
   Lift the whole form container above its sibling sections (footer is z-auto)
   so the dropdown escapes. (Figma QA.) */
.bp-comp-form-multistep {
  position: relative;
  z-index: 10;
}
.bp-form-multistep .bp-form-combo-list[hidden] { display: none; }
.bp-form-multistep .bp-form-combo-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
  color: var(--e-global-color-text, #1A1040);
  /* min 44px touch target on mobile (10*2 padding + 22px line = 42, close) */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.bp-form-multistep .bp-form-combo-item.is-active {
  background: var(--e-global-color-dawn, #D2F0FF);
}
@media (hover: hover) and (pointer: fine) {
  .bp-form-multistep .bp-form-combo-item:hover {
    background: var(--e-global-color-dawn, #D2F0FF);
  }
}

/* Row layout for fields (used by location step: city + state side-by-side
   at 50/50). With a single field, flex: 1 1 0 makes it take 100% — so
   3A/3B with city-only still render full-width. */
.bp-form-multistep .bp-form-fields--row {
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}
.bp-form-multistep .bp-form-fields--row > .bp-form-field {
  flex: 1 1 0;
  min-width: 0;
}


/* ── M4: Calendar step (HubSpot Meetings embed) ── */
/* Wide modal variant — calendar needs more room than the email/need/location
   modals. Figma frame for screen 4 is 946px wide (vs 576 for the others). */
.bp-form-multistep .bp-form-modal--wide {
  width: 900px;
  gap: 48px;
  padding-bottom: 48px;
}
@media (max-width: 1024px) {
  .bp-form-multistep .bp-form-modal--wide { padding: 32px !important; gap:32px; }
}
@media (max-width: 767px) {
  .bp-form-multistep .bp-form-modal--wide { padding: 20px !important;}
}

.bp-form-multistep .bp-form-modal--wide .bp-form-body {gap: 8px;}

/* HubSpot Meetings embed container. The iframe is injected by HS's
   MeetingsEmbedCode.js (loaded via a separate HTML widget on the page). */
.bp-form-multistep .meetings-iframe-container {
  width: 100%;
  /* Crop the iframe's empty bottom padding (see iframe rule below). */
  overflow: hidden;
}

.bp-form-multistep .meetings-iframe-container iframe {
  width: 100% !important;
  border: 0 !important;
  display: block;
  /* HubSpot hardcodes the iframe stage to 756px, but the calendar widget is
     only ~690px tall — leaving ~70px of dead space at the bottom (≈94px to the
     card edge once the card's 24px bottom padding is added). Pull the iframe up
     and let the container clip that dead space so the calendar sits ~24px above
     the card edge (matches the card's bottom padding). Verified the Confirm/Back
     buttons on the booking-detail screen stay fully visible (24px clearance). */
  margin-bottom: -70px;
}


/* ── M5: Thank you screens (no progress bar; centered title + article card) ── */
.bp-form-multistep .bp-form-thanks-body {
  gap: 24px;
  text-align: left;
}
.bp-form-multistep .bp-form-thanks-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* Small Dark — text-only variant with slide-in arrow on hover. Matches
   the BP brand small-dark Elementor button: transparent bg, no border,
   Midnight text, 14/22 typography, and a ::after arrow that grows from
   0 to 16px (currentColor mask) when hovered. Used for "Start a New
   Request" on the thank-you screen. */
.bp-form-multistep .bp-form-btn-small-dark {
  background: transparent;
  border: 0;
  color: var(--e-global-color-text, #1A1040);
  font-size: 14px;
  line-height: 22px;
  min-height: 0;
  padding: 8px 24px;
  gap: 0;
}
.bp-form-multistep .bp-form-btn-small-dark::after {
  content: '';
  display: block;
  width: 0;
  height: 16px;
  margin-left: 0;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.33203 8H12.6654' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 3.33301L12.6667 7.99967L8 12.6663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.33203 8H12.6654' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/><path d='M8 3.33301L12.6667 7.99967L8 12.6663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: 16px 16px;
          mask-size: 16px 16px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  opacity: 0;
  transition:
    width var(--bp-dur-med, .3s) ease,
    margin-left var(--bp-dur-med, .3s) ease,
    opacity var(--bp-dur-med, .3s) ease;
}
@media (hover: hover) and (pointer: fine) {
  .bp-form-multistep .bp-form-btn-small-dark:hover::after {
    width: 16px;
    margin-left: 8px;
    opacity: 1;
  }
  .bp-form-multistep .bp-form-btn-small-dark:hover {
    color: var(--e-global-color-text, #1A1040);
  }
}
.bp-form-multistep .bp-form-btn-small-dark:focus-visible::after {
  width: 16px;
  margin-left: 8px;
  opacity: 1;
}
.bp-form-multistep .bp-form-btn-small-dark:focus-visible {
  outline: none;
  color: var(--e-global-color-text, #1A1040);
}
.bp-form-multistep .bp-form-thanks-sub {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--e-global-color-text, #1A1040);
}

/* Article "While you wait" card */
.bp-form-multistep .bp-form-thanks-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.bp-form-multistep .bp-form-thanks-card-eyebrow {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--e-global-color-text, #1A1040);
}
.bp-form-multistep .bp-form-thanks-article {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  border-radius: 16px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
}
/* Hover: the ONLY thing that changes is the "Read article" CTA color (→
   Horizon); the card background stays put (Figma QA). */
@media (hover: hover) and (pointer: fine) {
  .bp-form-multistep .bp-form-thanks-article:hover .bp-form-thanks-article-cta {
    color: var(--e-global-color-horizon, #3787FF);
  }
}
/* Keyboard focus keeps a visible ring for a11y (mouse hover does not). */
.bp-form-multistep .bp-form-thanks-article:focus-visible {
  outline: 2px solid var(--e-global-color-horizon, #3787FF);
  outline-offset: 2px;
}
.bp-form-multistep .bp-form-thanks-article:focus-visible .bp-form-thanks-article-cta {
  color: var(--e-global-color-horizon, #3787FF);
}
.bp-form-multistep .bp-form-thanks-article-img {
  flex-shrink: 0;
  width: 159px;
  height: 106px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.bp-form-multistep .bp-form-thanks-article-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.bp-form-multistep .bp-form-thanks-article-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.22px;
  color: var(--e-global-color-text, #1A1040);
}
.bp-form-multistep .bp-form-thanks-article-cta {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  /* Not underlined (Figma QA) — recolors to Horizon on card hover/focus. */
  color: var(--e-global-color-text, #1A1040);
  transition: color .15s ease;
}

/* Thank-you footer: centered, single CTA */
.bp-form-multistep .bp-form-thanks-footer {
  align-items: center;
}
.bp-form-multistep .bp-form-thanks-footer .bp-form-btn {
  min-width: 200px;
}

/* Responsive: article card stacks on mobile */
@media (max-width: 575px) {
  .bp-form-multistep .bp-form-thanks-article {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .bp-form-multistep .bp-form-thanks-article-img {
    width: 100%;
    height: auto;
    aspect-ratio: 159 / 106;
  }
}

/* ── Legal pages — muted + underlined text-editor links ──
   Accessibility / Privacy Policy / Terms of Service want their inline links
   (inside text-editor widgets) rendered as muted, underlined links instead of
   the default Midnight, no-underline. Scoped via the bp-page-<slug> body class
   added in functions.php §5 — slug-based so it only hits these pages AND
   survives a staging→production migration (page-id scoping would not).
   !important is required: the kit sets the link color with !important. */
.bp-page-accessibility .elementor-widget-text-editor a,
.bp-page-privacy-policy .elementor-widget-text-editor a,
.bp-page-terms-of-service .elementor-widget-text-editor a {

  text-decoration: underline !important;
  text-decoration-color: #5A5A70 !important;
}

/* Legal pages: ordered lists = NUMBERS at the top level, lowercase LETTERS when
   nested (matches Figma "Frame 2147216721").
   Privacy/Accessibility still use the original pasted markup, which wraps the
   whole list in an extra single-item <ol> — so the real top level sits one <ol>
   deep: `ol ol` = top (numbers), `ol ol ol` = nested (letters), and the empty
   wrapper's marker is hidden via :has(). */
.bp-page-accessibility .elementor-widget-text-editor ol,
.bp-page-privacy-policy .elementor-widget-text-editor ol,
.bp-page-accessibility .elementor-widget-text-editor ol ol,
.bp-page-privacy-policy .elementor-widget-text-editor ol ol {
  list-style-type: decimal;
}
.bp-page-accessibility .elementor-widget-text-editor ol ol ol,
.bp-page-privacy-policy .elementor-widget-text-editor ol ol ol {
  list-style-type: lower-alpha;
}
.bp-page-accessibility .elementor-widget-text-editor ol:has(> li:only-child > ol),
.bp-page-privacy-policy .elementor-widget-text-editor ol:has(> li:only-child > ol) {
  list-style-type: none;
  padding-left: 0; /* wrapper has no marker → drop its indent (avoid double-indent) */
}

/* Terms of Service uses the clean regenerated component (one proper 2-level
   list, no wrapper) → straightforward mapping: top = numbers, nested = letters. */
.bp-page-terms-of-service .elementor-widget-text-editor ol {
  list-style-type: decimal;
}
.bp-page-terms-of-service .elementor-widget-text-editor ol ol {
  list-style-type: lower-alpha;
}

/* "What's an online tribute?" hero email-capture form — keep email + Get
   Notified on one row. Elementor forces the submit button last, so the
   Cloudflare Turnstile field (elementor-col-100, custom id "turnstilehero")
   sits between email (col-70) and button (col-30) and breaks the row. Sending
   it to the end via flex order lets email + button fill row 1, with Turnstile
   on row 2. (Same fix as BPF's footer "Stay involved" form.) */
.elementor-field-group-turnstilehero {
  order: 1;
}

/* turnstileleft — same as turnstilehero (order:1 keeps email + button on row 1,
   Turnstile on row 2) but LEFT-aligned instead of the handler's default center.
   The handler sets justify-content:center on .turnstile-visible when a challenge
   shows; override it to flex-start. Apply this custom id to the Turnstile field
   wherever you want it left-aligned. */
.elementor-field-group-turnstileleft {
  order: 1;
}

@media (min-width: 1025px) {
  .elementor-field-group-turnstileleft.turnstile-visible {
    justify-content: flex-start !important;
  }
}

/* ── Search widget (Resources index + category archives) ─────────────────────
   Scoped to the WIDGET, not a page body class. The Elementor Search widget is
   used only for the Resources search — the /resources/ page AND the category
   archive template — and they don't share a body class (archives are
   `category-*`/`archive`, the index is `bp-page-resources`). Page-scoping it to
   `.bp-page-resources` meant the magnifier reappeared on every /resources/<cat>/
   archive. Targeting `.elementor-widget-search` covers every place the widget
   renders, now and in the future. (Verified: no other search widget exists on
   the site — header/home/etc. have none — so this won't affect anything else.)
   1) Shrink the search bar to 42px tall. Elementor sizes the input via the
      LOGICAL min-block-size (--e-search-icons-* vars), so plain height/min-height
      don't win — we also set block-size + min-block-size, and zero the vertical
      padding so the text stays centered.
   2) Hide the small magnifier SVG that Elementor un-hides inside
      .e-search-input-wrapper while typing (the left icon in .e-search-label stays). */
.elementor-widget-search .e-search-input,
.elementor-widget-search .e-search-form,
.elementor-widget-search .e-search-input-wrapper,
.elementor-widget-search .e-search-label {
  height: 42px !important;
  min-height: 42px !important;
  block-size: 42px !important;
  min-block-size: 42px !important;
}
.elementor-widget-search .e-search-input {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.elementor-widget-search .e-search-input-wrapper svg {
  display: none !important;
}

/* ── Blog single: post-content body styles ───────────────────────────────────
   Figma "Article page template-desktop" (4063:14781). The hero block (title,
   category, author/date) is styled in Elementor; this covers the rendered post
   body (theme-post-content widget), which Elementor can't style per-element.

   Design system (article column):
   - Section titles (H2 in post HTML)    → Dada 500 36/40, ls -0.54, Midnight
   - Sub-sections  (H3)                  → Dada 500 28/32, ls -0.28, Midnight
   - H4 (next step down the kit ladder)  → Dada 500 22/28, ls -0.11, Midnight
   - Body copy + lists                   → 16/26, MUTED #5A5A70
   - Links: muted + underline, Midnight on hover (site-wide link pattern)
   - Inline emphasis (<strong>) = weight 500 callout, not 700
   - Rhythm: 24px above blocks (headings/figures), 16px between body items,
     8px between list items. Images rounded 24px. */
.single-post .elementor-widget-theme-post-content p,
.single-post .elementor-widget-theme-post-content li {
  color: #5A5A70;
}
.single-post .elementor-widget-theme-post-content h2 {
  font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: -0.54px;
  color: var(--e-global-color-text, #1A1040);
  margin: 24px 0 0;
}
.single-post .elementor-widget-theme-post-content h3 {
  font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.28px;
  color: var(--e-global-color-text, #1A1040);
  margin: 24px 0 0;
}
.single-post .elementor-widget-theme-post-content h4 {
  font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.11px;
  color: var(--e-global-color-text, #1A1040);
  margin: 24px 0 0;
}
.single-post .elementor-widget-theme-post-content p {
  margin: 16px 0 0;
}
.single-post .elementor-widget-theme-post-content ul,
.single-post .elementor-widget-theme-post-content ol {
  margin: 16px 0 0;
  padding-left: 24px;
}
.single-post .elementor-widget-theme-post-content li + li {
  margin-top: 8px;
}
.single-post .elementor-widget-theme-post-content figure {
  margin: 24px 0 0;
}
.single-post .elementor-widget-theme-post-content img {
  border-radius: 24px;
}
.single-post .elementor-widget-theme-post-content > .elementor-widget-container > *:first-child,
.single-post .elementor-widget-theme-post-content > div > *:first-child {
  margin-top: 0;
}
.single-post .elementor-widget-theme-post-content a {
  color: #5A5A70;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-post .elementor-widget-theme-post-content a:hover,
.single-post .elementor-widget-theme-post-content a:focus-visible {
  color: var(--e-global-color-horizon, #3787FF);
}
.single-post .elementor-widget-theme-post-content strong,
.single-post .elementor-widget-theme-post-content b {
  font-weight: 500;
}

/* Share buttons (icon view) under the post: fully round, like the footer's
   social icons (Dawn circles). Widget default is a 3px-radius square; 28x28
   evens out the box (27x28 stock) so 50% is a true circle. */
.single-post .elementor-share-btn {
  border-radius: 50% !important;
  width: 28px;
  height: 28px;
}
.single-post .elementor-share-btn__icon {
  border-radius: 50%;
}

/* Rank Math "Table of Contents" block: give it the article's block rhythm —
   the plugin ships it flush (0 margins, and it zeroes its inner h2 too).
   24px above the block (like every other block) + 16px title→links (the
   design's section gap). Link/list styling is inherited from the rules above. */
.single-post .elementor-widget-theme-post-content .wp-block-rank-math-toc-block {
  margin: 24px 0 0;
}
.single-post .elementor-widget-theme-post-content .wp-block-rank-math-toc-block nav {
  margin-top: 16px;
}

/* "Jump to nav:" — auto in-article TOC on long posts (functions.php §7).
   Matches the Figma "Article page template" mockup: an h2-sized Midnight label
   above a bulleted list of muted, underlined section links (horizon on hover,
   consistent with the body-link hover above). Only rendered when the filter
   injects it (>2000 words, ≥2 h2, and no Rank Math TOC already present). */
.bp-jump-nav {
  margin: 24px 0 40px;
}
.bp-jump-nav__label {
  font-family: "Dada Grotesk", sans-serif;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  color: var(--e-global-color-text, #1A1040);
  margin: 0 0 16px;
}
.bp-jump-nav__list {
  list-style: disc;
  margin: 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-jump-nav__list li {
  margin: 0;
  color: #5A5A70; /* bullet = muted, matching the links */
}
.bp-jump-nav__list a {
  color: #5A5A70;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 16px;
  line-height: 26px;
}
.bp-jump-nav__list a:hover,
.bp-jump-nav__list a:focus-visible {
  color: var(--e-global-color-horizon, #3787FF);
}
/* Offset the jump target so the heading isn't hidden behind the fixed header. */
.single-post .elementor-widget-theme-post-content h2 {
  scroll-margin-top: 72px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ── Blog sidebar "Categories": Dawn pill on the active category + hover ─────
   Figma "Category Page desktop" (4053:13901): the current category is a Nav
   Button in its hover state — Dawn #D2F0FF pill (radius 16, 4/16 padding),
   Midnight text. The sidebar items are plain heading widgets linking to
   /resources/<cat>/, with no active class — so we pair the category body class
   with the matching href. On desktop the pill bleeds 16px left (negative
   margin) so the text keeps its alignment and the pill lines up with the
   "Categories" title, like the design; on the mobile scroll bar the items are
   side by side, so no negative margins there.
   "All Articles" links to the /resources/ index, which has no category body
   class, so its active state is paired with `.bp-page-resources` instead.
   NOTE: this styling is href-specific — a NEW category must be added to the
   selectors below by hand; cloning the Elementor item alone won't pick it up. */
.elementor-widget-heading .elementor-heading-title a[href$="/resources/cremation/"],
.elementor-widget-heading .elementor-heading-title a[href$="/resources/funerals/"],
.elementor-widget-heading .elementor-heading-title a[href$="/resources/memorials/"],
.elementor-widget-heading .elementor-heading-title a[href$="/resources/obituaries/"],
.elementor-widget-heading .elementor-heading-title a[href$="/resources/grief/"],
.elementor-widget-heading .elementor-heading-title a[href$="/resources/"] {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 16px;
  transition: background-color 0.2s ease;
}
@media (min-width: 1025px) {
  .elementor-widget-heading .elementor-heading-title a[href$="/resources/cremation/"],
  .elementor-widget-heading .elementor-heading-title a[href$="/resources/funerals/"],
  .elementor-widget-heading .elementor-heading-title a[href$="/resources/memorials/"],
  .elementor-widget-heading .elementor-heading-title a[href$="/resources/obituaries/"],
  .elementor-widget-heading .elementor-heading-title a[href$="/resources/grief/"],
  .elementor-widget-heading .elementor-heading-title a[href$="/resources/"] {
    margin: -4px 0 -4px -16px;
  }
}
.elementor-widget-heading .elementor-heading-title a[href$="/resources/cremation/"]:hover,
.elementor-widget-heading .elementor-heading-title a[href$="/resources/funerals/"]:hover,
.elementor-widget-heading .elementor-heading-title a[href$="/resources/memorials/"]:hover,
.elementor-widget-heading .elementor-heading-title a[href$="/resources/obituaries/"]:hover,
.elementor-widget-heading .elementor-heading-title a[href$="/resources/grief/"]:hover,
.elementor-widget-heading .elementor-heading-title a[href$="/resources/"]:hover,
.category-cremation .elementor-widget-heading .elementor-heading-title a[href$="/resources/cremation/"],
.category-funerals .elementor-widget-heading .elementor-heading-title a[href$="/resources/funerals/"],
.category-memorials .elementor-widget-heading .elementor-heading-title a[href$="/resources/memorials/"],
.category-obituaries .elementor-widget-heading .elementor-heading-title a[href$="/resources/obituaries/"],
.category-grief .elementor-widget-heading .elementor-heading-title a[href$="/resources/grief/"],
.bp-page-resources .elementor-widget-heading .elementor-heading-title a[href$="/resources/"] {
  background-color: var(--e-global-color-dawn, #D2F0FF);
}

/* Posts-widget pagination (blog archives): same Dawn-pill language — current
   page = active pill, links Midnight (kills the reset.css pink) with the pill
   on hover. */
.elementor-pagination {
  margin-top: 32px;
}
.elementor-pagination .page-numbers {
  display: inline-block;
  color: var(--e-global-color-text, #1A1040);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 16px;
  transition: background-color 0.2s ease;
}
.elementor-pagination a.page-numbers:hover,
.elementor-pagination a.page-numbers:focus-visible,
.elementor-pagination .page-numbers.current {
  background-color: var(--e-global-color-dawn, #D2F0FF);
}

/* ── Talk to a Guide: trim the HubSpot Meetings iframe dead space ────────────
   HubSpot's MeetingsEmbedCode.js hardcodes the iframe to height:756px inline
   (a generic "stage"), but the widget content is shorter — e.g. a 5-row month
   leaves ~140px of empty panel at the bottom that reads as stray padding.
   That space lives INSIDE the cross-origin iframe, so it can't be styled away;
   and shrinking the iframe's height adds an inner scrollbar (the inner page
   stays 756 tall). The fix is a CROP: keep the iframe at its native 756 (inner
   viewport untouched → no added scroll) and mask the dead bottom strip with
   the container. Verified on staging: month grid cuts clean (room for 6-row
   months), time list keeps only its own internal scroll, and the booking form
   still shows every field + the Back/Confirm bar. */
/* NOTE: never target HubSpot's inner classes (e.g. .bBOqVk) — they live in the
   cross-origin iframe (unreachable) and are styled-components hashes that
   change on their deploys. All of this works from OUTSIDE the iframe.

   Desktop (two-column widget): the inner card is fluid with a ~850px max-width
   and CENTERS inside the iframe, so a 1008px iframe shows ~79px of dead space
   per side — capping at 810px makes the card fill it. Height: HubSpot
   hardcodes a 756px stage; the bottom ~76px is empty, so the container CROPS
   it (the iframe keeps its native 756 → inner viewport unchanged → no added
   scrollbars). Booking-form state verified: all fields + Confirm visible. */
@media (min-width: 1025px) {
  .bp-page-talk-to-a-guide .meetings-iframe-container {
    /* max-width: 810px; */ /* TEST: ancho comentado */
    margin-left: auto;
    margin-right: auto;
    height: 680px;
    overflow: hidden;
  }
}

/* Tablet (single-column widget): the inner card is a ~370px column pinned LEFT
   of the iframe, leaving a big dead zone on the right. Capping + centering the
   container makes the card fill it. NO height crop here: stacked content is
   taller than the 756px stage and scrolls inside by design. */
@media (min-width: 768px) and (max-width: 1024px) {
  .bp-page-talk-to-a-guide .elementor-element-9cbf058 {
    /* width: fit-content !important; */ /* TEST: ancho comentado */
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bp-page-talk-to-a-guide .meetings-iframe-container {
    /* FIXED width, not max-width: with fit-content the container would
       otherwise resolve against the iframe's intrinsic minimum (312px) and
       re-clip the calendar. */
    /* width: 400px; */ /* TEST: ancho comentado */
  }
  .bp-page-talk-to-a-guide .meetings-iframe-container iframe {
    /* CLAMP (not crop): shrinks the inner viewport too, so later screens
       (times / booking form) scroll inside and everything stays reachable —
       safe on the stacked single-column layout, unlike the desktop crop. Kills
       the dead stage below the month grid that read as container padding. */
    height: 630px !important;
  }
}

@media (max-width: 767px) {
  .bp-page-talk-to-a-guide .meetings-iframe-container iframe {
    height: 630px !important;
  }
}


/* ── Header nav buttons: keep the pointer cursor ─────────────────────────────
   The mega-menu top-level items render as <div class="e-n-menu-title e-click">
   (no <a> once the placeholder "#" link is removed — the "#" was scrolling the
   page to the top). The outer div is pointer, but Elementor forces
   cursor:default on the inner .e-n-menu-title-container / -text (where the mouse
   actually sits, over the label), so the button "loses" the pointer. Force
   pointer on the titles + their inner content, and on the nested-menu triggers,
   within the header. */
.elementor-location-header .e-n-menu-title,
.elementor-location-header .e-n-menu-title *,
.elementor-location-header .bp-nested-trigger,
.elementor-location-header .bp-nested-trigger * {
  cursor: pointer !important;
}

.bp-list-w-link a {
  display:inline !important;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bp-list-w-link a:hover {
  color: var(--e-global-color-muted);
}