/*
	Theme Name: BPF — Hello Elementor Child
	Theme URI: https://betterplaceforests.example/
	Description: Child theme of Hello Elementor for the Better Place Foundation site. Holds BPF-specific functions, font preloads, and Elementor customizations.
	Author: Better Place Foundation
	Author URI: https://betterplaceforests.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: bpf-hello-child
*/

/* ==========================================================================
   BPF — Site custom CSS

   Globals available from the kit (see bpf-elementor-kit.zip):
     Primary:   Grove, Canopy, Spirulina, Acorn, Pollen
     Secondary: Woodland, Moss, Bark, Seafoam, Evergreen,
                Evergreen Stripe, Seaweed, Acorn Dark
     Shared:    Sand, Stone, Chalk, White
   Use via: var(--e-global-color-<slug>)  e.g. var(--e-global-color-grove)

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

   Class naming:
     All custom classes namespaced with .bpf-* to avoid plugin collisions.
     Elementor native classes (.e-n-menu-*, .elementor-*) used as-is.

   Sections:
     0. Design tokens (CSS vars)
     1. Global defaults (links, p spacing)
     2. Form inputs
     3. Button variants
     4. Menu (to be built when header is ready)
   ========================================================================== */


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

:root {
  /* Radii */
  --bpf-radius-input: 4px;

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


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

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

a:focus-visible {
  outline: 2px solid var(--e-global-color-grove, #068466);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inline paragraph links — inherit the paragraph's color and show a
   muted underline (woodland at 40% alpha) so the line is clearly a
   secondary affordance rather than competing with the text weight.
   Specificity is raised above Elementor's `.elementor-widget-* a`
   rules so the underline isn't silently stripped inside toggle /
   text-editor widgets. */
.elementor-widget-text-editor p a,
.elementor-widget-toggle .elementor-tab-content p a,
.elementor-widget-toggle .elementor-tab-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(67, 99, 102, 0.4);
}
.elementor-widget-text-editor p a:hover,
.elementor-widget-text-editor p a:focus-visible,
.elementor-widget-toggle .elementor-tab-content p a:hover,
.elementor-widget-toggle .elementor-tab-content p a:focus-visible,
.elementor-widget-toggle .elementor-tab-content a:hover,
.elementor-widget-toggle .elementor-tab-content a:focus-visible {
  text-decoration-color: currentColor;
}

/* Cookie-consent banner "Privacy Policy" link — match the inline FAQ link
   hover above: a muted woodland-40% underline at rest that darkens to the
   full text color on hover (Kate: "same hover on privacy policy as FAQ —
   line gets darker"). The bp-cc-banner plugin ships a flat, full-color
   underline with no hover change, so we override it here. The leading
   `body` raises specificity above the plugin's `.bp-cc-banner
   .bp-cc-banner__link` rule regardless of stylesheet load order. */
body .bp-cc-banner .bp-cc-banner__link {
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(67, 99, 102, 0.4); /* woodland 40% — same as FAQ */
  transition: text-decoration-color var(--bpf-dur-fast) ease-in-out;
}
body .bp-cc-banner .bp-cc-banner__link:hover,
body .bp-cc-banner .bp-cc-banner__link:focus-visible {
  text-decoration-color: currentColor; /* full woodland — line gets darker */
}

/* ── Inline link with always-visible right arrow (Figma nav-items pattern) ──
   Matches the `nav-items` instance in the BPFF kit: a row with TEXT +
   16x16 chevron icon, gap 8px, in canopy color, Dada Grotesk Book (400).
   Arrow is visible by default; on hover a 1px underline appears and the
   arrow shifts 2px to the right — same hover treatment as the
   `icon-right-canopy` button variant in this stylesheet.

   The `.elementor-widget-toggle` scope is needed to beat the (0,2,2)
   `.elementor-widget-toggle .elementor-tab-content p a` rule above
   when used inside an FAQ answer paragraph. */
a.bpf-link-animated,
.bpf-link-animated a,
.elementor-widget-toggle .elementor-tab-content a.bpf-link-animated,
.elementor-widget-toggle .elementor-tab-content .bpf-link-animated a,
.elementor-widget-text-editor a.bpf-link-animated,
.elementor-widget-text-editor .bpf-link-animated a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--e-global-color-canopy, #004C54);
  text-decoration-line: none;
  text-decoration-color: transparent;
  font-weight: 400;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color var(--bpf-dur-fast) ease-in-out;
}
a.bpf-link-animated:hover,
a.bpf-link-animated:focus-visible,
.bpf-link-animated a:hover,
.bpf-link-animated a:focus-visible,
.elementor-widget-toggle .elementor-tab-content a.bpf-link-animated:hover,
.elementor-widget-toggle .elementor-tab-content a.bpf-link-animated:focus-visible,
.elementor-widget-toggle .elementor-tab-content .bpf-link-animated a:hover,
.elementor-widget-toggle .elementor-tab-content .bpf-link-animated a:focus-visible {
  color: var(--e-global-color-canopy, #004C54);
  text-decoration-line: none;
  text-decoration-color: transparent;
  border-bottom-color: currentColor;
}

a.bpf-link-animated::after,
.bpf-link-animated a::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.334%208h9.333M8%2012.667L12.667%208%208%203.333%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.334%208h9.333M8%2012.667L12.667%208%208%203.333%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: transform var(--bpf-dur-fast) ease;
}
a.bpf-link-animated:hover::after,
a.bpf-link-animated:focus-visible::after,
.bpf-link-animated a:hover::after,
.bpf-link-animated a:focus-visible::after {
  transform: translateX(2px);
}

p:last-child {
  margin-bottom: 0;
}


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

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(--bpf-radius-input);
  color: var(--e-global-color-bark, #493E2C);
  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-stone, #DACFBC);
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════════════
   3. BUTTON VARIANTS
   TODO: Update each variant's bg/color/hover once BPF button spec is
   confirmed in Figma. Placeholders below mirror BP's structure with
   BPF colors — verify before shipping.
   ════════════════════════════════════════════════════════════════════ */

.elementor-widget-button .elementor-button {
  /* Body typography (kit's "primary" system slot → Body) */
  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);
  padding: 8px 24px;
  transition:
    background-color var(--bpf-dur-med) ease-out,
    color var(--bpf-dur-med) ease-out,
    border-color var(--bpf-dur-med) ease-out;
}

/* Primary — Spirulina → Grove on hover */
.elementor-widget-button.elementor-button-type-primary .elementor-button {
  background-color: var(--e-global-color-spirulina, #1F927D);
  color: #FFFFFF;
  border-color: var(--e-global-color-spirulina, #1F927D);
}
.elementor-widget-button.elementor-button-type-primary .elementor-button:hover,
.elementor-widget-button.elementor-button-type-primary .elementor-button:focus-visible {
  background-color: var(--e-global-color-grove, #068466);
  color: #FFFFFF;
  border-color: var(--e-global-color-grove, #068466);
}

/* Secondary — placeholder, you'll customize. Outline-style by default. */
.elementor-widget-button.elementor-button-type-secondary .elementor-button {
  background-color: transparent;
  color: var(--e-global-color-spirulina, #1F927D);
  border: 1px solid var(--e-global-color-spirulina, #1F927D);
}

/* Email Capture — White bg, Woodland text → Grove on hover, Spirulina on focus */
.elementor-widget-button.elementor-button-type-email-capture .elementor-button {
  background-color: #FFFFFF;
  color: var(--e-global-color-woodland, #436366);
  border-color: #FFFFFF;
}
.elementor-widget-button.elementor-button-type-email-capture .elementor-button:hover {
  background-color: #FFFFFF;
  color: var(--e-global-color-grove, #068466);
  border-color: #FFFFFF;
}
.elementor-widget-button.elementor-button-type-email-capture .elementor-button:focus-visible {
  background-color: #FFFFFF;
  color: var(--e-global-color-grove, #068466);
  border: 1px solid var(--e-global-color-spirulina, #1F927D);
  outline: none; /* using border instead for focused state */
}

/* Icon — transparent bg, white text/icon. Hover/focus shows a 1px border
   under the text. Border is always present (transparent → currentColor) so
   the layout doesn't shift on state change. */
.elementor-widget-button.elementor-button-type-icon .elementor-button {
  background-color: transparent;
  color: #FFFFFF;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 8px; /* square padding for icon-only */
}
.elementor-widget-button.elementor-button-type-icon .elementor-button:hover,
.elementor-widget-button.elementor-button-type-icon .elementor-button:focus-visible {
  background-color: transparent;
  color: #FFFFFF;
  border-bottom-color: currentColor;
}

/* Icon Right — White bg + dark text + trailing icon. Hover with bottom border. */
.elementor-widget-button.elementor-button-type-icon-right .elementor-button {
  background-color: #FFFFFF;
  color: var(--e-global-color-canopy, #004C54);
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.elementor-widget-button.elementor-button-type-icon-right .elementor-button:hover,
.elementor-widget-button.elementor-button-type-icon-right .elementor-button:focus-visible {
  background-color: #FFFFFF;
  color: var(--e-global-color-canopy, #004C54);
  border-bottom-color: currentColor;
}

/* A11y focus ring */
.elementor-widget-button .elementor-button:focus-visible {
  outline: 2px solid var(--e-global-color-grove, #068466);
  outline-offset: 3px;
}

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

/* SVG icons inside buttons — stroke follows current text color */
.elementor-button svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
  stroke: currentColor;
}

.elementor-button svg {
  shape-rendering: geometricPrecision;
}

/* Button icon size: 24px regardless of source (SVG, font-icon, or <img>) */
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon img {
  width: 24px;
  height: 24px;
}
.elementor-button .elementor-button-icon i {
  font-size: 24px;
}


/* ════════════════════════════════════════════════════════════════════
   4. MENU
   TODO: Build the header structure in Elementor first, then port the
   menu CSS from bp/hello-elementor-child/style.css with .bpf-* class
   renames as needed. For now only the header stacking fix is here.
   ════════════════════════════════════════════════════════════════════ */

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

/* Hide Elementor's native dropdown chevron on desktop. We don't use it on
   the main nav (custom design or no chevron). On tablet/mobile it stays
   visible to indicate the accordion behavior. */
@media screen and (min-width: 1025px) {
  .elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon {
    display: none !important;
  }
}

/* Heading widgets inside nav submenus — make the widget div a flex
   container so the inner span is truly vertically centered. Without
   this, the span sits on the text baseline which creates a visible
   offset when paired with icons in a flex row (Kate's QA note). */
.bpf-main-menu .elementor-widget-heading {
  display: flex !important;
  align-items: center;
}
.bpf-main-menu .elementor-heading-title {
  display: block;
  margin: 0 !important;
}
.bpf-main-menu .elementor-widget-image {
  line-height: 0;
}

/* Submenu left section: column separators between direct children
   (right-border on every container except the last). */
.bpf-submenu-left > .e-con:not(:last-child) {
  border-right: 0.5px solid var(--e-global-color-stone, #DACFBC);
}

/* Submenu left — link hover: underline via border-bottom (no layout shift,
   transparent border always present so the box height never changes). */
.bpf-submenu-left a {
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--bpf-dur-fast) ease-in-out, color var(--bpf-dur-fast) ease-in-out;
}
.bpf-submenu-left a:hover,
.bpf-submenu-left a:focus-visible {
  border-bottom-color: var(--e-global-color-canopy, #004C54);
}

/* Submenu right (dark panel) — link hover: white underline.
   The <a> is an Elementor e-con (full width, can't shrink). The border
   goes on the heading widget which extends left via negative margin +
   padding to cover the icon (24px + 8px gap = 32px). */
.bpf-submenu-right a .elementor-widget-heading {
  margin-left: -32px;
  padding-left: 32px;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--bpf-dur-fast) ease-in-out;
}
.bpf-submenu-right a:hover .elementor-widget-heading,
.bpf-submenu-right a:focus-visible .elementor-widget-heading {
  border-bottom-color: #FFFFFF;
}

/* Fallback for icon-list widgets if used in the dark panel later */
.bpf-submenu-right .elementor-icon-list-text {
  border-bottom: 1px solid transparent;
  transition: border-color var(--bpf-dur-fast) ease-in-out, color var(--bpf-dur-fast) ease-in-out;
}
.bpf-submenu-right .elementor-icon-list-item a:hover .elementor-icon-list-text,
.bpf-submenu-right .elementor-icon-list-item a:focus-visible .elementor-icon-list-text {
  border-bottom-color: #FFFFFF;
}

/* Top-level menu titles — hover/focus shows white border-bottom.
   DESKTOP-ONLY: header is dark Canopy so a white underline is visible.
   In mobile/tablet the menu is white-on-white and we never want this. */
@media screen and (min-width: 1025px) {
  .bpf-main-menu .e-n-menu-title-text {
    border-bottom: 1px solid transparent;
    transition: border-color var(--bpf-dur-fast) ease-in-out;
  }
  .bpf-main-menu .e-n-menu-title:hover .e-n-menu-title-text,
  .bpf-main-menu .e-n-menu-title:focus-visible .e-n-menu-title-text,
  .bpf-main-menu .e-n-menu-title[aria-expanded="true"] .e-n-menu-title-text {
    border-bottom-color: #FFFFFF;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Tablet & Mobile — top-level menu items (accordion mode)
   Three top-level rows (Our Forests, Memorials, About Us) with text on
   the left and an animated chevron on the right that rotates 180° when
   the dropdown opens.

   We hide the "opened" caret entirely and just rotate the "closed" one
   so the transition is smooth (Elementor's default swap can't animate).
   ───────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  /* White accordion panel — when the menu is open we turn it into a
     fixed full-screen overlay so the page underneath doesn't scroll
     away. Header (74h) and bottom Tree Owner Login bar (74h) sit
     outside the wrapper, so the panel itself fills the gap between
     them and scrolls internally if its content overflows. */
  .bpf-main-menu .e-n-menu-wrapper {
    background-color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body:has(.bpf-main-menu .e-n-menu-toggle[aria-expanded="true"]) .bpf-main-menu .e-n-menu-wrapper {
    position: fixed !important;
    top: 74px;          /* tablet header height */
    left: 0;
    right: 0;
    bottom: 74px;       /* above the Tree Owner Login bar */
    width: 100% !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* don't propagate scroll to body on bounce */
    z-index: 9998;
  }

  /* Lock the underlying page when the mobile menu is open.
     overflow:hidden on html+body. We do NOT use position:fixed on body
     because it shifts the header / loses scroll position. */
  html:has(.bpf-main-menu .e-n-menu-toggle[aria-expanded="true"]),
  body:has(.bpf-main-menu .e-n-menu-toggle[aria-expanded="true"]) {
    overflow: hidden !important;
    height: 100% !important;
  }

  /* Per Figma — expanded top-level items show a 1px Canopy "underline"
     that spans the row inset 40px on each side. Implemented with a
     `::before` pseudo (Elementor uses `::after` on this element for its
     own vertical divider, so `::before` is free) at the row's bottom
     edge with opacity transition — GPU-composited, not a paint-per-
     frame transition like a background gradient would be. */
  .bpf-main-menu .e-n-menu-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background-color: var(--e-global-color-canopy, #004C54);
    opacity: 0;
    transition: opacity var(--bpf-dur-fast) ease-in-out;
    pointer-events: none;
  }
  .bpf-main-menu .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"])::before {
    opacity: 1;
  }

  /* Sub-menu items (Point Arena, Santa Cruz, etc.) — border-bottom on
     the <a> on hover/focus, Canopy color. The `<a>` is inline so the
     border naturally hugs the text. */
  .bpf-main-menu .bpf-submenu-left .elementor-heading-title a {
    border-bottom: 1px solid transparent;
    transition: border-color var(--bpf-dur-fast) ease-in-out;
  }
  .bpf-main-menu .bpf-submenu-left .elementor-heading-title a:hover,
  .bpf-main-menu .bpf-submenu-left .elementor-heading-title a:focus-visible {
    border-bottom-color: var(--e-global-color-canopy, #004C54);
  }

  /* ───────────── BUGFIX: Elementor uses `top: -160000px` on
     `.elementor-screen-only` spans (a11y labels like "Open Our Forests").
     That positioning, inside a `position: relative` row whose ancestor is
     `position: fixed`, makes Chrome compute the spans at y = +160000
     instead of -160000, inflating `.e-n-menu-wrapper.scrollHeight` to
     ~160058px and creating a phantom infinite scroll. Pinning them to
     y:0 keeps the a11y intent (1×1 clipped, off-screen for sighted users)
     without breaking layout. ───────────── */
  .bpf-main-menu .elementor-screen-only {
    top: 0 !important;
  }

  /* Tree Owner Login — hidden in header on tablet; shown as fixed bottom
     bar (full width, Canopy bg) when menu is open. Get Updates stays
     visible in the header. */
  .bpf-owner-login {
    display: none !important;
  }
  body:has(.bpf-main-menu .e-n-menu-toggle[aria-expanded="true"]) .bpf-owner-login {
    display: flex !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 74px;
    background-color: var(--e-global-color-canopy, #004C54) !important;
    padding: 16px 40px !important;
    align-items: center;
    box-sizing: border-box;
    z-index: 9999;
    margin: 0 !important;
  }

  /* Force the items list into a single column with 20px gap (Figma spec).
     Vertical padding lives here; horizontal padding is applied per-row so
     full-width children (the dark panel) can bleed to the screen edges.
     `list-style: none` kills the default <li> bullets that were leaking
     through as small dots near each row. */
  .bpf-main-menu .e-n-menu-heading {
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 24px 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .bpf-main-menu .e-n-menu-item {
    list-style: none !important;
    width: 100% !important;
  }

  /* Title row: text left, chevron right. Horizontal padding (40) here so
     the row aligns with the rest of the inset content. `position: relative`
     anchors the ::before underline pseudo. */
  .bpf-main-menu .e-n-menu-title {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between !important;
    width: 100%;
    padding: 8px 40px !important;
    gap: 10px;
    box-sizing: border-box;
  }

  /* Text — Canopy on Dada Grotesk Body */
  .bpf-main-menu .e-n-menu-title-container,
  .bpf-main-menu .e-n-menu-title-container:hover,
  .bpf-main-menu .e-n-menu-title-container:focus,
  .bpf-main-menu .e-n-menu-title-text {
    color: var(--e-global-color-canopy, #004C54) !important;
    text-decoration: none;
    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);
  }

  /* Chevron button — clean, 24×24. We set Elementor's own CSS variable
     `--n-menu-dropdown-indicator-size` so the SVG sizing rule
     `.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon span svg`
     picks it up cleanly (otherwise it falls back to title font-size = 16). */
  .bpf-main-menu .e-n-menu-dropdown-icon {
    --n-menu-dropdown-indicator-size: 24px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    min-height: 24px;
    flex: 0 0 24px;
  }

  /* Hide the "opened" icon — we'll rotate the "closed" one for a smooth flip
     (Elementor's default swap can't transition). */
  .bpf-main-menu .e-n-menu-dropdown-icon-opened {
    display: none !important;
  }
  .bpf-main-menu .e-n-menu-dropdown-icon-closed {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform var(--bpf-dur-med) ease-out;
    transform-origin: center;
  }
  .bpf-main-menu .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed {
    transform: rotate(180deg);
  }

  /* Icon sizing + color. Match Elementor's selector specificity (note the
     `span` between the button and the svg) so we win over its default. */
  .bpf-main-menu .e-n-menu-dropdown-icon span svg,
  .bpf-main-menu .e-n-menu-dropdown-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--e-global-color-canopy, #004C54);
  }
  .bpf-main-menu .e-n-menu-dropdown-icon svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
    stroke: currentColor;
  }

  /* ──────────────────────────────────────────────────────────────────
     Submenu (open dropdown content) on tablet/mobile.
     Same accordion bg/spacing as the white menu-items panel above so
     it reads as a single continuous block. The dark "Explore Our
     Forests" panel breaks out to full viewport width below it.
     ────────────────────────────────────────────────────────────────── */

  /* Submenu content sits flush with the wrapper padding (no double gap) */
  .bpf-main-menu .e-n-menu-content {
    width: 100% !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  .bpf-main-menu .e-n-menu-content > .e-con-inner {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Region list — full width, vertical stack, padded 40 horizontally to
     match the title rows above. `flex-wrap: nowrap` is critical: with
     `flex-direction: column + flex-wrap: wrap` (Elementor's default for
     containers), regions stack vertically only until they hit the parent
     height, then spill into a new column to the right. nowrap forces the
     internal scroll to take over instead. */
  .bpf-main-menu .bpf-submenu-left {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
    background-color: transparent !important;
    padding: 16px 40px 0 40px !important;
    box-sizing: border-box;
  }
  .bpf-main-menu .bpf-submenu-left > .e-con {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 0 16px 0 !important;
    /* Override desktop column separators */
    border-right: none !important;
    /* Stone divider between regions, mirrors Figma Line 14/17/18 */
    border-bottom: 1px solid var(--e-global-color-stone, #DACFBC);
  }
  .bpf-main-menu .bpf-submenu-left > .e-con:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
  }

  /* Region heading (CALIFORNIA, SOUTHWEST, etc.) — first heading in
     each region container. Woodland 11/700 uppercase. */
  .bpf-main-menu .bpf-submenu-left .elementor-widget-heading:first-child .elementor-heading-title {
    font-family: var(--e-global-typography-primary-font-family, "Dada Grotesk"), sans-serif;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    color: var(--e-global-color-woodland, #436366) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
  }

  /* Region sub-items (Point Arena, Santa Cruz, etc.) — 16/400 Canopy.
     The <a> stays inline-block so the hover border-bottom hugs the
     text, not the whole row width. */
  .bpf-main-menu .bpf-submenu-left .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title,
  .bpf-main-menu .bpf-submenu-left .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title a {
    font-family: var(--e-global-typography-primary-font-family, "Dada Grotesk"), sans-serif;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--e-global-color-canopy, #004C54) !important;
    text-decoration: none;
  }
  .bpf-main-menu .bpf-submenu-left .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title a {
    display: inline-block;
  }

  /* Dark "Explore Our Forests" panel — full-bleed across the wrapper.
     Now that the wrapper has no horizontal padding, this just stretches
     to 100% naturally; we only set internal padding so the text isn't
     glued to the screen edges. */
  .bpf-main-menu .bpf-submenu-right {
    width: 100% !important;
    margin: 16px 0 0 0 !important;
    padding: 24px 40px !important;
    background-color: var(--e-global-color-woodland, #436366) !important;
    box-sizing: border-box;
  }

  /* Heading inside the dark panel — small white label */
  .bpf-main-menu .bpf-submenu-right .elementor-widget-heading:first-of-type .elementor-heading-title {
    font-family: var(--e-global-typography-primary-font-family, "Dada Grotesk"), sans-serif;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Items inside the dark panel — white text + icon row, 16/400 */
  .bpf-main-menu .bpf-submenu-right .elementor-heading-title,
  .bpf-main-menu .bpf-submenu-right .elementor-heading-title a,
  .bpf-main-menu .bpf-submenu-right .elementor-icon-list-text,
  .bpf-main-menu .bpf-submenu-right .elementor-icon-list-item a {
    color: #FFFFFF !important;
    font-family: var(--e-global-typography-primary-font-family, "Dada Grotesk"), sans-serif;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    text-decoration: none;
  }
  .bpf-main-menu .bpf-submenu-right .elementor-icon-list-icon svg,
  .bpf-main-menu .bpf-submenu-right .elementor-icon-list-icon i {
    color: #FFFFFF;
    fill: #FFFFFF;
  }
  .bpf-main-menu .bpf-submenu-right .elementor-icon-list-icon svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
    stroke: currentColor;
  }
}


/* ════════════════════════════════════════════════════════════════════
   5. MOBILE OVERRIDES (≤ 767px)
   Per Figma "Navigation-Menu-Mobile" / "Navigation-our forests-Mobile"
   the mobile breakpoint tightens horizontal padding from 40 → 24, drops
   the heading→wrapper gap to 0, and shrinks the inter-item gap to 16.
   Header in Figma is 62h (vs 74h on tablet) — the wrapper offset is
   adjusted accordingly.
   ════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  /* Mobile header is 62h, owner login bar 62h */
  body:has(.bpf-main-menu .e-n-menu-toggle[aria-expanded="true"]) .bpf-main-menu .e-n-menu-wrapper {
    top: 62px !important;
    bottom: 74px !important;
  }

  /* List padding (top only on mobile, no bottom — last item flows
     directly into the dark panel below) and tighter gap */
  .bpf-main-menu .e-n-menu-heading {
    padding: 16px 0 0 0 !important;
    gap: 16px !important;
  }

  /* Top-level row — 8/24 padding (vs 8/40 tablet) */
  .bpf-main-menu .e-n-menu-title {
    padding: 8px 24px !important;
  }

  /* Underline pseudo inset 24px each side on mobile (vs 40 tablet) */
  .bpf-main-menu .e-n-menu-title::before {
    left: 24px;
    right: 24px;
  }

  /* Sub-menu region container — padding 16/24 */
  .bpf-main-menu .bpf-submenu-left {
    padding: 16px 24px 0 24px !important;
  }

  /* Dark "Visit the forest" panel — padding 16/24 */
  .bpf-main-menu .bpf-submenu-right {
    padding: 16px 24px !important;
  }

  /* Right nav container — hidden on mobile; promoted to a fixed bottom
     bar (full width, Canopy bg, row layout) when the menu is open.
     Contains Tree Owner Login + Get Updates buttons. */
  .bpf-menu-right-nav {
    display: none !important;
  }
  body:has(.bpf-main-menu .e-n-menu-toggle[aria-expanded="true"]) .bpf-menu-right-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 74px;
    background-color: var(--e-global-color-canopy, #004C54) !important;
    padding: 16px 24px !important;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    z-index: 9999;
    margin: 0 !important;
  }

  /* On mobile, owner-login is a normal child inside the right-nav bar,
     not its own fixed element (tablet rules don't apply here). */
  .bpf-owner-login,
  body:has(.bpf-main-menu .e-n-menu-toggle[aria-expanded="true"]) .bpf-owner-login {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}


/* Footer links — border-bottom hover (white on dark Canopy bg).
   Matches the nav-items component from Figma: 1px bottom stroke with
   4px gap between text and border. */
footer .elementor-widget-heading a,
[data-elementor-type="footer"] .elementor-widget-heading a {
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--bpf-dur-fast) ease-in-out;
}
footer .elementor-widget-heading a:hover,
footer .elementor-widget-heading a:focus-visible,
[data-elementor-type="footer"] .elementor-widget-heading a:hover,
[data-elementor-type="footer"] .elementor-widget-heading a:focus-visible {
  border-bottom-color: #FFFFFF;
}

/* Footer social icons — Seafoam → white on hover (per Figma).
   The icons are SVGs embedded as <img>, so `fill`/`color` can't reach
   inside them; a CSS filter recolors them.

   We use `grayscale(1) brightness(4)` (NOT `brightness(0) invert(1)`):
   both end at pure white, but invert interpolates through a muddy dark
   `brightness(.5) invert(.5)` midpoint — a visible grey flash on a light
   icon. grayscale+brightness only ever LIGHTENS, so the fade stays clean.
   Add class `bpf-footer-social` to the social-row container in Elementor. */
.bpf-footer-social img {
  transition: filter var(--bpf-dur-fast) ease-in-out;
}
.bpf-footer-social a:hover img,
.bpf-footer-social a:focus-visible img {
  filter: grayscale(1) brightness(4);
}

/* Footer address links — same white border-bottom hover as the heading
   links above. These are "container links" (the whole <a> wraps a pin
   icon + a heading widget), so `.elementor-widget-heading a` doesn't
   match them. `a.e-con` uniquely targets the 2 address links in the
   footer; the underline goes on the inner heading text so it hugs the
   words (not the icon/row).
   `inline-block` (not `inline`): the addresses wrap to two lines, and an
   inline box would paint the border under EACH line — two underlines.
   inline-block paints ONE line at the bottom of the block, matching the
   single-line dropdown underline (Kate 2026-06-26: "match the one line
   underline, same as dropdown"). */
.elementor-location-footer a.e-con .elementor-heading-title {
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--bpf-dur-fast) ease-in-out;
}
.elementor-location-footer a.e-con:hover .elementor-heading-title,
.elementor-location-footer a.e-con:focus-visible .elementor-heading-title {
  border-bottom-color: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════════════
   Ceremony popup form — Radio field ("Do you currently have a Memorial
   Tree or Spreading Grove?"). Matches Figma frame 2147216486.

   The form has "Hide Labels" ON (placeholder-driven). A Radio has no
   placeholder, so its question can only live in the label — we keep the
   global hide and RE-SHOW just this field's label (reversing Elementor's
   .elementor-screen-only). Requires the field's Advanced → ID = "radio"
   (→ class .elementor-field-group-radio); the option labels Yes/No are
   separate inline labels and are never affected by "Hide Labels".
   ════════════════════════════════════════════════════════════════════ */

/* Re-show the question label + Canopy 16/26 per Figma */
.elementor-field-group-additional_form_details > .elementor-field-label, .elementor-field-group-has_a_memorial_tree_or_spreading_grove > .elementor-field-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 16px;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  color: var(--e-global-color-canopy, #004C54);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

/* Options row — inline, vertical-centered, 16px between options */
.elementor-field-group-additional_form_details .elementor-field-subgroup, .elementor-field-group-has_a_memorial_tree_or_spreading_grove .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.elementor-field-group-additional_form_details .elementor-field-option, .elementor-field-group-has_a_memorial_tree_or_spreading_grove .elementor-field-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Custom radio circle — 24×24, 1px Woodland border, white fill */
.elementor-field-group-additional_form_details input[type="radio"], .elementor-field-group-has_a_memorial_tree_or_spreading_grove input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--e-global-color-woodland, #436366);
  border-radius: 50%;
  background-color: #FFFFFF;
  flex: 0 0 auto;
  cursor: pointer;
}
/* Checked — filled inner dot in Woodland */
.elementor-field-group-additional_form_details input[type="radio"]:checked, .elementor-field-group-has_a_memorial_tree_or_spreading_grove input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--e-global-color-woodland, #436366) 0 6px, transparent 7px);
}
.elementor-field-group-additional_form_details input[type="radio"]:focus-visible, .elementor-field-group-has_a_memorial_tree_or_spreading_grove input[type="radio"]:focus-visible {
  outline: 2px solid var(--e-global-color-woodland, #436366);
  outline-offset: 2px;
}

/* Option text Yes/No — Woodland 16/26 per Figma */
.elementor-field-group-additional_form_details .elementor-field-option label, .elementor-field-group-has_a_memorial_tree_or_spreading_grove .elementor-field-option label {
  color: var(--e-global-color-woodland, #436366);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════
   6. FOOTER — column dividers
   Per Figma:
     · Desktop (≥1025): 3 cols × 2 rows, vertical Seafoam dividers
     · Tablet (≥768):   3 cols × 2 rows, same vertical dividers
     · Mobile (≤767):   1-col stack, horizontal Seafoam dividers

   Add class `bpf-footer-columns` to the row container in Elementor.
   In Elementor set the container's gap to 0 — the divider spacing is
   produced entirely by column padding here.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablet + Desktop — vertical dividers between 3-column rows ── */
@media screen and (min-width: 768px) {
  /* Equal-height columns within each row so the divider lines line up */
  .bpf-footer-columns > .e-con,
  .bpf-footer-columns > .e-con-inner > .e-con {
    align-self: stretch;
  }

  /* 32px each side on every column; first/last of each row drop the
     outer padding so the row's edges stay flush with the parent. */
  .bpf-footer-columns > .e-con,
  .bpf-footer-columns > .e-con-inner > .e-con {
    padding-left: 32px;
    padding-right: 32px;
  }
  .bpf-footer-columns > .e-con:nth-child(3n+1),
  .bpf-footer-columns > .e-con-inner > .e-con:nth-child(3n+1) {
    padding-left: 0;
  }
  .bpf-footer-columns > .e-con:nth-child(3n),
  .bpf-footer-columns > .e-con-inner > .e-con:nth-child(3n) {
    padding-right: 0;
  }
  .bpf-footer-columns > .e-con:not(:nth-child(3n+1)),
  .bpf-footer-columns > .e-con-inner > .e-con:not(:nth-child(3n+1)) {
    border-left: 1px solid var(--e-global-color-seafoam, #C9F7EC);
  }
}

/* ── Mobile — single-column stack, horizontal dividers between cols.
   Spec: 16px from last item to divider AND 16px from divider to next
   heading (total 32px around each line). Achieved with `!important`
   on both paddings so any per-column overrides set in Elementor
   (margin/padding on individual containers) don't break the rhythm. ── */
@media screen and (max-width: 767px) {
  .bpf-footer-columns > .e-con,
  .bpf-footer-columns > .e-con-inner > .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--e-global-color-seafoam, #C9F7EC);
  }
  .bpf-footer-columns > .e-con + .e-con,
  .bpf-footer-columns > .e-con-inner > .e-con + .e-con {
    padding-top: 16px !important;
  }
  /* First column has no top padding (it's flush with the row above
     it — usually the heading or a section above the columns). */
  .bpf-footer-columns > .e-con:first-child,
  .bpf-footer-columns > .e-con-inner > .e-con:first-child {
    padding-top: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Utility: underline on hover — add class `bpf-underline-hover` to any
   button widget to get a text-decoration underline on hover/focus.
   ════════════════════════════════════════════════════════════════════ */
.elementor-widget-button.bpf-underline-hover .elementor-button {
  border-bottom: 1px solid transparent;
  transition: border-color var(--bpf-dur-fast) ease-in-out;
}
.elementor-widget-button.bpf-underline-hover .elementor-button:hover,
.elementor-widget-button.bpf-underline-hover .elementor-button:focus-visible {
  border-bottom-color: currentColor;
}

/* ════════════════════════════════════════════════════════════════════
   Button variant: icon-right (White) — text + arrow icon on the right.
   For use on dark/colored backgrounds (Canopy, Spirulina, etc.).
   Default state: white text + white arrow, transparent bg.
   Hover state: subtle underline + arrow translates 2px right.
   ════════════════════════════════════════════════════════════════════ */
.elementor-widget-button.elementor-button-type-icon-right-white .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  color: #FFFFFF;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0;
  transition: border-bottom-color 0.2s ease;
}
.elementor-widget-button.elementor-button-type-icon-right-white .elementor-button::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.334%208h9.333M8%2012.667L12.667%208%208%203.333%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.334%208h9.333M8%2012.667L12.667%208%208%203.333%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform 0.2s ease;
}
.elementor-widget-button.elementor-button-type-icon-right-white .elementor-button:hover,
.elementor-widget-button.elementor-button-type-icon-right-white .elementor-button:focus-visible {
  background-color: transparent;
  color: #FFFFFF;
  border-bottom-color: currentColor;
}
.elementor-widget-button.elementor-button-type-icon-right-white .elementor-button:hover::after,
.elementor-widget-button.elementor-button-type-icon-right-white .elementor-button:focus-visible::after {
  transform: translateX(2px);
}

/* Same as icon-right-white but with Canopy color — for use on light/Chalk bg. */
.elementor-widget-button.elementor-button-type-icon-right-canopy .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  color: var(--e-global-color-canopy, #004C54);
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0;
  transition: border-bottom-color 0.2s ease;
}
.elementor-widget-button.elementor-button-type-icon-right-canopy .elementor-button::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.334%208h9.333M8%2012.667L12.667%208%208%203.333%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.334%208h9.333M8%2012.667L12.667%208%208%203.333%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform 0.2s ease;
}
.elementor-widget-button.elementor-button-type-icon-right-canopy .elementor-button:hover,
.elementor-widget-button.elementor-button-type-icon-right-canopy .elementor-button:focus-visible {
  background-color: transparent;
  color: var(--e-global-color-canopy, #004C54);
  border-bottom-color: currentColor;
}
.elementor-widget-button.elementor-button-type-icon-right-canopy .elementor-button:hover::after,
.elementor-widget-button.elementor-button-type-icon-right-canopy .elementor-button:focus-visible::after {
  transform: translateX(2px);
}


/* ════════════════════════════════════════════════════════════════════
   FAQ accordion — item dividers + chevron behavior
   Scoped to `.bpf-comp-faq-accordion` (root container class).

   Layout decisions:
     - Title row is flex so the chevron centers vertically with the text
       (Elementor's default is `display: block` + `float: right`, which
       leaves the chevron pinned to the top of the row).
     - Divider color is canopy at 15% alpha — visible enough to read as
       a separator without competing with the title typography.
     - 24x24 chevron hitbox containing a 16x16 SVG matches the Figma spec.
   ════════════════════════════════════════════════════════════════════ */

.bpf-comp-faq-accordion .elementor-toggle .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--e-global-color-stone, #DACFBC);
  padding: 20px 0;
}

/* Chevron — bigger hitbox, centered vertically inside the flex title row.
   Reset Elementor's `float: right` so flexbox can position it.
   `order: 2` pushes the icon to the end of the flex row even though it
   appears first in the DOM (Elementor puts the toggle-icon span before
   the text node inside the <h6>). */
.bpf-comp-faq-accordion .elementor-toggle .elementor-toggle-icon {
  float: none !important;
  flex-shrink: 0;
  order: 2;
  width: 24px;
  height: 24px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}
.bpf-comp-faq-accordion .elementor-toggle .elementor-toggle-icon svg {
  width: 16px;
  height: 16px;
}
.bpf-comp-faq-accordion .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon {
  transform: rotate(180deg);
}
/* Hide the secondary "opened" icon span so only the rotating chevron-down
   shows. Without this, Elementor renders both icons and toggles their
   display, breaking the rotation effect. */
.bpf-comp-faq-accordion .elementor-toggle .elementor-toggle-icon-opened {
  display: none !important;
}
.bpf-comp-faq-accordion .elementor-toggle .elementor-toggle-icon-closed {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Answer area — breathing room above (so the answer doesn't kiss the
   title row when expanded) and below (before the next item's divider). */
.bpf-comp-faq-accordion .elementor-toggle .elementor-tab-content {
  border: 0;
  padding: 16px 0 24px;
}

/* Open item = ONE divider that slides to the bottom of the answer
   (Kate 2026-06-26: "only one line, no color change — the line under the
   question just moves all the way down when expanded").
   - Hide the under-title line while active. `transparent` (not `0`) keeps
     the 1px so the row doesn't jump on open. `!important` beats the
     widget's own border-color setting, which Elementor paints on active
     titles too (overriding its built-in border:none-when-active default).
   - Paint the under-answer line in the SAME Stone as the resting divider,
     so it reads as the one line sliding down — no color change. */
.bpf-comp-faq-accordion .elementor-toggle .elementor-tab-title.elementor-active {
  border-bottom-color: transparent !important;
}
.bpf-comp-faq-accordion .elementor-toggle .elementor-tab-title.elementor-active + .elementor-tab-content {
  border-bottom: 1px solid var(--e-global-color-stone, #DACFBC);
}

/* Defeat the default border that Elementor toggle paints on each tab item. */
.bpf-comp-faq-accordion .elementor-toggle .elementor-toggle-item {
  border: 0;
}


/* ════════════════════════════════════════════════════════════════════
   Forest Stewardship — Image carousel (Protecting America's forestland)
   Scoped to `.bpf-comp-protecting-forestland`.
   Everything else (sizing, fit, navigation, etc.) is configured from
   the Elementor widget UI directly.
   ════════════════════════════════════════════════════════════════════ */

/* Caption — centered at the bottom of each slide, no background.
   Matches the Figma "[Forest Name], [STATE]" overlay caption.
   `font-style: normal` because some browsers/themes default
   <figcaption> to italic. */
.bpf-comp-protecting-forestland .elementor-image-carousel-caption {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  background: transparent;
  font-style: normal;
  z-index: 2;
}
.bpf-comp-protecting-forestland .swiper-slide {
  position: relative;
}

/* Pagination dots — Figma spec: 8×8 circles, 8px gap between dots.
     Inactive: chalk #F3EDE9 fill, stone #DACFBC border (1px).
     Active:   stone #DACFBC fill, no border. */
.bpf-comp-protecting-forestland .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: #F3EDE9;
  border: 1px solid #DACFBC;
  opacity: 1;
  box-sizing: border-box;
}
.bpf-comp-protecting-forestland .swiper-pagination-bullet-active {
  background-color: #DACFBC;
  border-color: #DACFBC;
}


/* ════════════════════════════════════════════════════════════════════
   Forest Stewardship — Quote slider (We don't work alone)
   Scoped to `.bpf-comp-we-dont-work-alone`.

   Override Elementor's default testimonial-carousel layout (avatar-top,
   name-bottom) to match Figma: forest photo on the LEFT, eyebrow +
   quote + attribution on the RIGHT.
   ════════════════════════════════════════════════════════════════════ */

/* Slide layout:
     - The .elementor-testimonial root is a positioned flex column
       that clears space for the absolute image on the left.
     - .elementor-testimonial__image is positioned absolutely so it
       doesn't push other content; the right column then doesn't
       inherit any row-height constraints from a grid.
     - `justify-content: center` on the flex root vertically centers
       eyebrow + quote + attribution as a single tight stack.
     - `order` reorders the testimonial widget's DOM (which renders
       __text first, then __image and __cite inside __footer) into
       eyebrow → quote → attribution. */
/* Override the testimonial-carousel widget's default 20px slide
   padding so the layout below fills the slide edge-to-edge. */
.bpf-comp-we-dont-work-alone .elementor-widget-testimonial-carousel .swiper-slide {
  padding: 0;
}

.bpf-comp-we-dont-work-alone .elementor-testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 346px;
  padding-left: 552px; /* 520 image + 32 gap */
  text-align: left;
}
.bpf-comp-we-dont-work-alone .elementor-testimonial__content {
  /* This contains __text (the quote). */
  order: 2;
}
.bpf-comp-we-dont-work-alone .elementor-testimonial__footer {
  /* Dissolved so its children (__image, __cite) become flex children
     of .elementor-testimonial. */
  display: contents;
}
.bpf-comp-we-dont-work-alone .elementor-testimonial__cite {
  /* Same — dissolve so __title and __name become direct flex
     children with their own `order`. */
  display: contents;
}

/* Image — positioned absolutely on the left, occupying the
   reserved 520px column. */
.bpf-comp-we-dont-work-alone .elementor-testimonial__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 346px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.bpf-comp-we-dont-work-alone .elementor-testimonial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  /* Override Elementor's default circular avatar styling. */
  max-width: none;
}

/* Layout-only rules for the text elements — `order` controls the
   flex stack sequence (eyebrow → quote → attribution); `display: block`
   defeats the cite's default inline rendering so flex order applies.
   Typography (font, size, color, etc.) is configured from Elementor. */
.bpf-comp-we-dont-work-alone .elementor-testimonial__title {
  order: 1;
  display: block;
}
.bpf-comp-we-dont-work-alone .elementor-testimonial__name {
  order: 3;
  display: block;
}

/* Hide the inline-cite default separator. */
.bpf-comp-we-dont-work-alone .elementor-testimonial__cite::before,
.bpf-comp-we-dont-work-alone .elementor-testimonial__cite::after {
  display: none;
}

/* Defeat Elementor's default 95% width on the testimonial carousel
   main-swiper so the slide spans the full container (matches the
   horizontal layout where the image + content already fill 1072px). */
.bpf-comp-we-dont-work-alone .elementor-widget-testimonial-carousel .elementor-main-swiper {
  width: 100%;
}

/* Dots — Figma spec (matches image carousel): 8x8 circles,
   chalk fill + stone border (1px) inactive, stone fill active.
   `width: 520px` matches the image column so the dots sit beneath
   the photo; `text-align: center` centers them horizontally within
   that column; `margin-top: 16px` matches the Figma 16px gap. */
.bpf-comp-we-dont-work-alone .swiper-pagination {
  position: relative;
  width: 520px;
  margin-top: 16px;
  text-align: center;
  padding-left: 0;
}
.bpf-comp-we-dont-work-alone .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: #F3EDE9;
  border: 1px solid #DACFBC;
  opacity: 1;
  box-sizing: border-box;
}
.bpf-comp-we-dont-work-alone .swiper-pagination-bullet-active {
  background-color: #DACFBC;
  border-color: #DACFBC;
}

/* Same overflow fix as the image carousel. */
.bpf-comp-we-dont-work-alone .elementor-main-swiper,
.bpf-comp-we-dont-work-alone .swiper {
  overflow: hidden;
}

/* Tablet + mobile — image stacks above content; pagination spans the
   container width (instead of the 520px image column on desktop). */
@media screen and (max-width: 1024px) {
  .bpf-comp-we-dont-work-alone .elementor-testimonial {
    padding-left: 0;
    min-height: 0;
    gap: 16px;
  }
  .bpf-comp-we-dont-work-alone .elementor-testimonial__image {
    position: static;
    width: 100%;
    height: auto;
    order: 0; /* image on top in the flex flow */
  }
  .bpf-comp-we-dont-work-alone .elementor-testimonial__image img {
    height: auto;
  }
  .bpf-comp-we-dont-work-alone .swiper-pagination {
    width: 100%;
    text-align: center;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Still have Questions? — phone + email links underline on hover only.
   Underline spans the full link (icon + text), not just the text node —
   per Kate's review (2026-05-22): "hover state has line all the way
   across".

   Two gotchas:
   - Elementor's `.elementor-widget .elementor-icon-list-item a` sets
     `display: flex`, which makes the <a> stretch to fill the column
     (the underline would then run past the text). Adding `.elementor-widget`
     to our selector raises specificity from (0,3,1) to (0,4,1) so our
     `inline-flex` wins and the <a> hugs its icon + text.
   - The unstyled <a> inherits the theme's default link color
     (#CC3366 — pinkish/red). The text only looks canopy because
     `.elementor-icon-list-text` paints it canopy. Setting `color` on the
     <a> itself fixes `currentColor` for the border so the hover line is
     canopy, not red — and removes the red mid-transition flash. */
.bpf-comp-still-questions .elementor-widget .elementor-icon-list-item a {
  display: inline-flex;
  width: fit-content;        /* defeat `.elementor-list-item-link-full_width a { width:100% }` */
  color: var(--e-global-color-canopy, #004C54);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--bpf-dur-fast) ease-in-out;
}
.bpf-comp-still-questions .elementor-widget .elementor-icon-list-item a:hover,
.bpf-comp-still-questions .elementor-widget .elementor-icon-list-item a:focus-visible {
  border-bottom-color: currentColor;
}
/* Defeat any per-text underline so we don't double up with the row border. */
.bpf-comp-still-questions .elementor-widget .elementor-icon-list-item a .elementor-icon-list-text {
  text-decoration: none;
}


/* ── Hero + Footer-Hero: full viewport height ──
   Matches every hero variant (bpf-comp-hero, bpf-comp-hero-about, -fs,
   -grief, -memorials) and every footer-hero variant (bpf-comp-footer-hero,
   -about, -faq, -grief, -memorials).

   Fallback pattern: legacy `100vh` first for older browsers, then `100svh`
   (small viewport) so the section is ALWAYS at least the visible viewport
   on mobile — never cut off when the browser URL bar is showing.
   `!important` overrides Elementor's inline `min-height:800px` from the
   widget's min_height control.

   --bpf-header-h is the rendered height of the (sticky) site header. It
   is subtracted from the TOP hero so header + hero together = one full
   viewport. The footer-hero deliberately gets the FULL 100svh (no
   subtraction) — user preference: the section feeling slightly taller
   than the visible area at the bottom of the page reads better. */
:root { --bpf-header-h: 74px; }              /* desktop + tablet */
@media (max-width: 767px) {
  :root { --bpf-header-h: 62px; }            /* mobile */
}
[class*="bpf-comp-hero"] {
  min-height: calc(100vh - var(--bpf-header-h)) !important;
  min-height: calc(100svh - var(--bpf-header-h)) !important;
}
[class*="bpf-comp-footer-hero"] {
  min-height: 100vh !important;
  min-height: 100svh !important;
}


/* ── Header submenu containers: 50/50 vertical split bg (desktop only) ──
   Applies to every submenu panel of the main nav (Our Forests, Memorials,
   About Us — Elementor generates one #e-n-menu-content-<id> per parent
   nav item). Scoped to the header location so footer / other nested
   menus aren't affected.

   Left half white, right half woodland (#436366). Hard edge at 50%:
   both stops at 50% means no soft transition.

   Desktop-only (>1024px) — tablet/mobile use the full-screen menu panel
   pattern where the split doesn't apply. */
@media (min-width: 1025px) {
  .elementor-location-header [id^="e-n-menu-content-"] {
    background: linear-gradient(to right, #FFFFFF 50%, #436366 50%) !important;
  }
}


/* ── Form fields: input + textarea (Figma `form Fields` component set) ──
   Three states from the `type=Form Field, State=*` Figma components:
     default → border 1px woodland (#436366)
     focused → border 1px canopy   (#004C54)
     error   → border 1px acorn    (#C8742A), with matching error message

   Common (all states): white bg, radius 8, padding 8, body type 16/400
   in woodland, 42px tall row.

   Targets Elementor Form's text-like inputs (`.elementor-field-textual`
   covers text/email/tel/url/search/date/number/password) and explicit
   textareas. The `:user-invalid` pseudo only fires AFTER the user has
   interacted (not on initial page render of required fields). The
   `[aria-invalid="true"]` fallback handles browsers without :user-invalid
   support and matches what Elementor sets after a failed submit. */

.elementor-field-group .elementor-field-textual,
.elementor-field-group textarea.elementor-field {
  background-color: #FFFFFF;
  border: 1px solid var(--e-global-color-woodland, #436366);
  border-radius: 8px;
  padding: 8px;
  font-family: var(--e-global-typography-body-font-family, "Dada Grotesk"), sans-serif;
  font-size: var(--e-global-typography-body-font-size, 16px);
  font-weight: var(--e-global-typography-body-font-weight, 400);
  line-height: var(--e-global-typography-body-line-height, 26px);
  color: var(--e-global-color-woodland, #436366);
  transition: border-color var(--bpf-dur-fast, 150ms) ease-in-out;
}
/* !important required: Elementor Form widget emits per-popup styles like
   `.elementor-1006 .elementor-element-XXXX .elementor-field-group
   .elementor-field:not(.elementor-select-wrapper) { border-color: ... }`
   with specificity (0,6,0) for the default border. Our focus/error
   selectors can't match without !important. */
.elementor-field-group .elementor-field-textual:focus,
.elementor-field-group textarea.elementor-field:focus,
.elementor-field-group .elementor-field-textual:focus-visible,
.elementor-field-group textarea.elementor-field:focus-visible {
  border-color: var(--e-global-color-canopy, #004C54) !important;
  outline: none;
}
.elementor-field-group .elementor-field-textual:user-invalid,
.elementor-field-group textarea.elementor-field:user-invalid,
.elementor-field-group .elementor-field-textual[aria-invalid="true"],
.elementor-field-group textarea.elementor-field[aria-invalid="true"] {
  border-color: var(--e-global-color-acorn, #C8742A) !important;
}

/* Error message text (matches the "Required field" label in Figma) */
.elementor-field-group .elementor-message.elementor-message-danger,
.elementor-field-group .elementor-error-message,
.elementor-message.elementor-message-danger {
  color: var(--e-global-color-acorn, #C8742A);
  font-family: var(--e-global-typography-body-font-family, "Dada Grotesk"), sans-serif;
  font-size: var(--e-global-typography-body-font-size, 16px);
  font-weight: var(--e-global-typography-body-font-weight, 400);
  line-height: var(--e-global-typography-body-line-height, 26px);
}

/* Placeholder — Figma spec is full opacity. Firefox defaults to ~0.54 and
   Chrome inherits a dim placeholder from the input color * default opacity;
   force opacity:1 so the placeholder reads at the spec'd woodland color. */
.elementor-field-group .elementor-field-textual::placeholder,
.elementor-field-group textarea.elementor-field::placeholder {
  color: var(--e-global-color-woodland, #436366);
  opacity: 1;
}

/* Chrome autofill reset — INTENTIONALLY REMOVED.

   Attempted via the standard `:-webkit-autofill { box-shadow: 0 0 0
   1000px white inset }` trick + sibling `:autofill` rule. Worked on
   simple page-loaded inputs but NOT on Elementor popup-widget forms:
   Chrome paints the autofill bg before the popup widget initializes,
   and `input.matches(':-webkit-autofill')` returns false in that state,
   so no `:-webkit-autofill` CSS rule matches (the visible bg is a
   persisted user-agent paint, not a live pseudo-state).

   Only reliable fix is JS (animationstart event on a no-op keyframe
   gated on `:-webkit-autofill`, then inline-style override). Project
   constraint: no JS allowed for this. Accepted limitation — popup
   inputs may show Chrome's blue autofill bg.

   See engram: "BPF: autofill reset bug — cannot fix with CSS alone". */


/* ── Email-capture variant: form on dark / photo background ──
   Triggered by `.footer-hero-get-updates` carrier class on the Form widget
   (or any ancestor). Inputs are white text on a 30%-white translucent fill
   with white border, to read over the footer-hero photo.

   States (from Figma `type=email capture, State=*`):
     default       → bg white@30%, border white, text/placeholder white
     focused       → bg white solid, border canopy, text woodland
     error         → bg white solid, border acorn, text woodland, message acorn
     confirmation  → field back to default look, success message white below

   Author setup: add CSS class `footer-hero-get-updates` to the Form widget
   in Elementor → Advanced → CSS Classes. */

.footer-hero-get-updates .elementor-field-group .elementor-field-textual,
.footer-hero-get-updates .elementor-field-group textarea.elementor-field {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
.footer-hero-get-updates .elementor-field-group .elementor-field-textual::placeholder,
.footer-hero-get-updates .elementor-field-group textarea.elementor-field::placeholder {
  color: #FFFFFF;
  opacity: 1;
}
.footer-hero-get-updates .elementor-field-group .elementor-field-textual:focus,
.footer-hero-get-updates .elementor-field-group textarea.elementor-field:focus,
.footer-hero-get-updates .elementor-field-group .elementor-field-textual:focus-visible,
.footer-hero-get-updates .elementor-field-group textarea.elementor-field:focus-visible {
  background-color: #FFFFFF !important;
  border-color: var(--e-global-color-canopy, #004C54) !important;
  color: var(--e-global-color-woodland, #436366) !important;
}
.footer-hero-get-updates .elementor-field-group .elementor-field-textual:focus::placeholder,
.footer-hero-get-updates .elementor-field-group textarea.elementor-field:focus::placeholder {
  color: var(--e-global-color-woodland, #436366);
}
.footer-hero-get-updates .elementor-field-group .elementor-field-textual:user-invalid,
.footer-hero-get-updates .elementor-field-group textarea.elementor-field:user-invalid,
.footer-hero-get-updates .elementor-field-group .elementor-field-textual[aria-invalid="true"],
.footer-hero-get-updates .elementor-field-group textarea.elementor-field[aria-invalid="true"] {
  background-color: #FFFFFF !important;
  border-color: var(--e-global-color-acorn, #C8742A) !important;
  color: var(--e-global-color-woodland, #436366) !important;
}
/* Confirmation/success message under the form — white italic, no icon.
   Elementor renders a leading checkmark via `::before` on the
   .elementor-message-svg class; we hide it. */
.footer-hero-get-updates .elementor-message.elementor-message-success {
  color: #FFFFFF;
  font-family: var(--e-global-typography-body-font-family, "Dada Grotesk"), sans-serif;
  font-size: var(--e-global-typography-body-font-size, 16px);
  font-weight: var(--e-global-typography-body-font-weight, 400);
  font-style: italic;
  line-height: var(--e-global-typography-body-line-height, 26px);
}
.footer-hero-get-updates .elementor-message.elementor-message-success::before {
  display: none;
}


/* ── Elementor Popup overlay: backdrop blur ──
   Per Figma `desktop-forms-Get Updates-1/2` (frame 2638:47218): the
   white overlay has fill rgba(255,255,255,0.16) + BACKGROUND_BLUR
   radius 30.

   The fill (overlay color/opacity) is controlled per-popup in the
   Elementor editor → Popup Settings → Background Overlay. This rule
   only adds the BLUR — applied to every popup's full-viewport
   backdrop, so any popup with a translucent overlay gets a frosted-
   glass look. -webkit- prefix for Safari < 18. */
.elementor-popup-modal {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}


/* ── .bpf-hero-overlay — opt-in mobile-only dark top-fade overlay ──
   Author setup: add the CSS class `bpf-hero-overlay` to a hero section
   in Elementor → Advanced → CSS Classes. The overlay renders only at
   mobile (≤767px) so light text over the hero photo stays readable.

   Mirrors Figma `Home/mobile` Hero overlay (node 2232:19750): a vertical
   linear gradient with the fill layer at 30% opacity:
     stop 0 (top)    → rgba(0, 0, 0, 1.0)
     stop 1 (bottom) → rgba(102, 102, 102, 0.0)   ← transparent
   Folded together (each stop's alpha × 0.30): rgba(0,0,0,0.3) → transparent,
   top → bottom. (Currently the Home hero is the only user of this class; if a
   hero needs a different opacity later, add a scoped override for it.)

   The `::before` sits above the section background-image but below
   content thanks to `z-index: 1` on direct children. `pointer-events:
   none` keeps CTAs/links clickable through the overlay. */
@media (max-width: 767px) {
  .bpf-hero-overlay {
    position: relative;
  }
  .bpf-hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(102, 102, 102, 0) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .bpf-hero-overlay > * {
    position: relative;
    z-index: 1;
  }
}


/* ── .bpf-comp-hero-home — small-mobile background nudge ──
   At narrow viewports the hero photo crops out the focal point; shift
   the background horizontally per breakpoint to keep the composition. */
@media (min-width: 376px) and (max-width: 400px) {
  .bpf-comp-hero-home {
    background-position: -450px 0 !important;
  }
}
@media (max-width: 375px) {
  .bpf-comp-hero-home {
    background-position: -390px 0 !important;
  }
}

/* ── "Stay involved" footer form — keep email + button on one row ──
   The form wrapper is display:flex; flex-wrap:wrap with: email (col-60),
   Cloudflare Turnstile (col-100), submit button (col-40). Elementor forces
   the submit button to be the LAST field in the builder, so the Turnstile
   field sits between email and button in the DOM — and being 100% wide it
   forces a wrap, pushing the button onto its own row (email / turnstile /
   button stacked). Sending the Turnstile group to the end via flex `order`
   lets email (60%) + button (40%) fill row 1, with Turnstile on row 2 below.
   Works whether the widget is visible (interaction needed) or invisible
   (interaction-only) — the 100%-wide group breaks the row either way.
   NOTE: targets the field GROUP class (derived from the field's custom id
   "turnstilefooter"), NOT #form-field-turnstilefooter, which is an inner
   .elementor-field div, not the flex child. */
.elementor-field-group-turnstilefooter {
  order: 1;
}
/* Left-align the widget + 16px breathing room BELOW it — but only when the
   widget is actually showing. The handler adds `.turnstile-visible` to the
   field group in its before-interactive-callback; when the challenge passes
   silently (interaction-only) that class is absent and the handler's base
   rule keeps margin-bottom:0, so no dead space is left. Two classes + the
   !important beat the handler's inline rules
   (.elementor-field-type-cf_turnstile.turnstile-visible{justify-content:center}
   and the base margin-bottom:0 !important). */
.elementor-field-group-turnstilefooter.turnstile-visible {
  justify-content: flex-start !important;
  margin-bottom: 16px !important;
}

/* Popups ("Stay involved" / "Plan your ceremony"): 16px breathing room below
   the Turnstile, only when visible (same `.turnstile-visible` hook → no dead
   space when it passes silently). Centering is left as-is (handler default).
   Scoped to any Turnstile inside a popup modal rather than to the field's
   custom id, because only one popup currently carries the "turnstilepopup" id
   (the "Stay involved" popup's field has an auto id field_975d618) — this way
   both popups, and any future popup form, are covered without relying on the
   id being set per-field. Does NOT touch the footer form (not in a modal). */
.elementor-popup-modal .elementor-field-type-cf_turnstile.turnstile-visible {
  margin-bottom: 16px !important;
}