/*
   Theme Name: Hello Elementor Child
   Theme URI: https://elementor.com/hello-theme/
   Description: Child theme of Hello Elementor for the West Church build. Custom CSS and template overrides belong here so the parent theme stays updatable.
   Author: West Church
   Template: hello-elementor
   Version: 1.0.0
   Requires at least: 6.0
   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: hello-elementor-child
   */
/* Custom styles go below this line.
   Note: the West Church page is built with native Elementor widgets, so its
   design tokens live in the Elementor Kit (Site Settings), not here. Use this
   file only for what the Kit cannot express. */
/* ==========================================================================
   West Church — native Elementor build
   Moved here from wp-content/mu-plugins/westchurch-native-fonts.php on 2026-09-29
   so all CSS lives in one editable place.
   
   SAFE TO LIVE HERE: this stylesheet is enqueued at wp_enqueue_scripts priority 20
   and loads at position 23 in the document, AFTER every Elementor stylesheet
   (positions 7-22: frontend, post-7 kit, per-widget, post-22 page, base-desktop,
   base-mobile, post-30 header, post-31 footer). Verified by reading the rendered
   document order, not assumed — several rules below depend on source order, not
   only specificity (see the prayer block).
   
   The mu-plugin still owns the two things that are PHP, not CSS:
   1. disabling Elementor's static Archivo (no wdth axis)
   2. enqueueing the variable-font request the source template uses
   ========================================================================== */
body {
  font-variation-settings: 'wdth' 118;
}

/* Source: --wide 118 on body, --xwide 125 on the display face (.hero__title, .h2,
   .acts__quote, .value__label ...). .btn uses --wide, and the footer's own faces carry no
   font-variation-settings rule so they inherit body's 118. */
h1,
h2,
h3,
h4,
h5,
h6,
.e-n-accordion-item-title-text,
.elementor-heading-title {
  font-variation-settings: 'wdth' 125;
}

.elementor-widget-button .elementor-button {
  font-variation-settings: 'wdth' 118;
}

.dev-source-site-footer .elementor-heading-title {
  font-variation-settings: 'wdth' 118;
}

/* The eyebrow is a <p> in the source (body face, --wide 118). It ships as a Heading widget
   here, which the rule above would put on the display face (125) and render ~22px wider. */
.wc-eyebrow .elementor-heading-title {
  font-variation-settings: 'wdth' 118;
}

/* Rung (d): the source's .btn carries a decorative 34px rule that animates to 46px on
   hover. Elementor's Button widget has no control for an inline decorative rule, and its
   icon control cannot animate width. Reproduced with the source's own values. */
.elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  /* source .btn line 230 */
}

/* .link-arrow is NOT a .btn in the source - it carries no white-space:nowrap and wraps to
   two lines at 1366. Scoping the nowrap back off for it. */
.elementor.elementor .wc-featured-body .elementor-button {
  white-space: normal;
}

/* source @media(max-width:767px): .hero__actions .btn { width:100%; justify-content:space-between } */
@media (max-width: 767px) {
  .dev-source-hero .elementor-widget-button .elementor-button {
    justify-content: space-between;
  }
}

.elementor-widget-button .elementor-button .elementor-button-text::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 1px;
  margin-left: 16px;
  background: currentColor;
  transition: width .3s;
}

.elementor-widget-button .elementor-button:hover .elementor-button-text::after {
  width: 46px;
}

/* Rung (d): the theme gives a trailing <p> a 0.8em bottom margin. The source's footer
   legal line is a single 28px line box with no trailing space, and Elementor's Text Editor
   exposes no control for the last paragraph's margin. */
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Rung (d): the hero scrim is THREE stacked multi-stop gradients (4, 2 and 7 stops).
   Elementor's container background-overlay exposes a single gradient with two stops,
   so no control can express this. Copied verbatim from the source's .hero__scrim. */
.dev-source-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30,44,56,0) 50%, rgba(30,44,56,.88) 80%, rgba(30,44,56,.98) 90%, rgba(30,44,56,1) 100%), linear-gradient(180deg, rgba(30,44,56,1) 0%, rgba(30,44,56,0) 42%), linear-gradient(90deg, rgba(30,44,56,1) 0%, rgba(30,44,56,.972) 11.8%, rgba(30,44,56,.935) 17.7%, rgba(30,44,56,.899) 23.6%, rgba(30,44,56,.842) 29.5%, rgba(30,44,56,.732) 38.4%, rgba(30,44,56,0) 59%);
}

/* z-index only: Elementor containers are already position:relative via --position, and
   forcing `position` here overrode the scroll container's own absolute positioning. */
.dev-source-hero > .e-con,
.dev-source-hero > .e-child {
  z-index: 1;
}

/* Rung (d): the source constrains .hero__lede with `max-width: 47ch`. Elementor exposes
   no max-width control on a container or widget, and no control unit expresses `ch`.
   A width control cannot substitute: width does not clamp, so at 390 it overflowed. */
/* Targeted by element id: this Elementor build renders a container's `css_classes` but
   silently drops a widget's `_css_classes` (the value IS stored, it just never reaches the
   wrapper), so a semantic class is not available on a widget. Ids are fixed in
   build/_tree-hero.json. `ch` must resolve against the LEDE's own 18px, not the wrapper's.
   The doubled `.elementor.elementor` matches Elementor's own specificity for
   `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }`, which otherwise wins. */
.elementor.elementor .dev-source-hero .elementor-element-hero0008 {
  max-width: 47ch;
}

/* Rung (d): source .hero min-height is min(1081px, 100svh). Elementor's min-height
   slider takes ONE unit, so it cannot express the min() or the svh viewport unit. */
.dev-source-hero {
  min-height: min(1081px, 100svh);
}

@media (max-width: 767px) {
  .dev-source-hero {
    min-height: 0;
  }
}

/* ---- SECTION 2 (featured) ----------------------------------------------
   Rung (d), and the reason is structural: the source flips layout at 1025 --
   above it the media plate is ABSOLUTELY positioned over the text column, below it
   the two photos sit in a 2-column grid in normal flow. Elementor's `position` and
   `container_type` controls are NOT responsive (confirmed against the live schema:
   there is no position_tablet / container_type_tablet), so no combination of controls
   can express both states. The images remain real Image widgets the client can swap;
   only the composition lives here. */
@media (min-width: 1025px) {
  .wc-featured-media {
    position: absolute;
    left: 0;
    top: 0;
    width: 51.82%;
    aspect-ratio: 995 / 960;
    z-index: 1;
    margin-bottom: 0;
  }
  .wc-featured-ghost {
    position: absolute;
    left: 0;
    top: 0;
    width: 65.33%;
    height: 72.92%;
  }
  .wc-featured-photo {
    position: absolute;
    left: 37.19%;
    top: 37.5%;
    width: 62.81%;
    height: 62.5%;
  }
  /* Elementor's own img rules win on specificity, and its `object-fit` control is inert
     unless a height is also set (computed came back `fill`), so both are pinned here. */
  /* height:100% on the img is indefinite unless every wrapper between it and the sized
     cell also has a definite height - .elementor-widget-container is auto by default. */
  .wc-featured-ghost > .e-con-inner,
  .wc-featured-photo > .e-con-inner,
  .wc-featured-ghost .elementor-widget-image,
  .wc-featured-photo .elementor-widget-image,
  .wc-featured-ghost .elementor-widget-container,
  .wc-featured-photo .elementor-widget-container,
  .wc-featured-ghost .elementor-image,
  .wc-featured-photo .elementor-image {
    height: 100%;
  }
  .elementor.elementor .wc-featured-ghost img,
  .elementor.elementor .wc-featured-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* source: .featured__content { padding: 6.25% 0 0 } - the gutter is zero above 1025,
     so the boxed container's own horizontal padding has to go with it. */
  .elementor.elementor .wc-featured-content {
    max-width: none;
    margin-left: 45.83%;
    width: 48%;
    padding: 6.25% 0 0;
    position: relative;
    z-index: 2;
  }
  .elementor.elementor .wc-featured-content > .e-con-inner {
    max-width: none;
    padding-inline: 0;
  }
  .elementor.elementor .wc-featured-head {
    max-width: 785px;
  }
  /* width:auto is essential: an Elementor container computes width:100%, so margin-left
     pushes it OUT instead of shrinking it. At 1366 that left the body 565 wide instead of
     507.5, wrapping less and making the section 53.6px short. */
  .elementor.elementor .wc-featured-body {
    width: auto;
    margin-left: 22.6%;
    max-width: 565px;
    padding-top: 5%;
  }
}

/* No aspect-ratio control exists on the Image widget, and the cell width is fluid,
   so a stepped per-breakpoint height would drift between breakpoints. */
@media (max-width: 1024px) {
  .elementor.elementor .wc-featured-ghost img {
    aspect-ratio: 650 / 700;
    object-fit: cover;
    /* source @media(max-width:1024px): .featured__ghost { opacity: .5 }. The Image widget's
       responsive opacity_tablet/_mobile are a SILENT NO-OP - computed came back 1 at every
       width - so the breakpoint rule ships here instead. */
    opacity: .5;
  }
  .elementor.elementor .wc-featured-photo img {
    aspect-ratio: 625 / 600;
    object-fit: cover;
  }
}

/* Elementor has no mask-image control. Copied verbatim from the source .featured__ghost. */
.wc-featured-ghost img {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.009) 10%, rgba(0,0,0,.05) 15%, rgba(0,0,0,.152) 25%, rgba(0,0,0,1) 70%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.009) 10%, rgba(0,0,0,.05) 15%, rgba(0,0,0,.152) 25%, rgba(0,0,0,1) 70%);
}

/* ---- SECTION 3 (acts) --------------------------------------------------- */
/* Elementor's overflow control is a single axis-agnostic select (hidden/auto). The source
   deliberately clips sideways only, so the oversized wordmark is contained while the
   top-right photo can still overhang upward into the section above. */
.dev-source-acts {
  overflow-x: clip;
  overflow-y: visible;
}

/* Figma positions, as percentages of the section box. `position` is not responsive in
   Elementor, so the <=767 restack of the right-hand photo has to live here too. */
.wc-acts-photo-right {
  aspect-ratio: 450 / 600;
}

.wc-acts-photo-left {
  aspect-ratio: 260 / 350;
}

.wc-acts-photo-right > .e-con-inner,
.wc-acts-photo-left > .e-con-inner,
.wc-acts-photo-right .elementor-widget-image,
.wc-acts-photo-left .elementor-widget-image,
.wc-acts-photo-right .elementor-widget-container,
.wc-acts-photo-left .elementor-widget-container,
.wc-acts-photo-right .elementor-image,
.wc-acts-photo-left .elementor-image {
  height: 100%;
}

/* a flex item's default min-height:auto is its intrinsic height, which overrides the
   container's aspect-ratio (the box came back 260px tall instead of 219.4 at 390). */
.elementor.elementor .wc-acts-photo-right,
.elementor.elementor .wc-acts-photo-left,
.wc-acts-photo-right > .e-con-inner,
.wc-acts-photo-left > .e-con-inner,
.wc-acts-photo-right > .e-con-inner > *,
.wc-acts-photo-left > .e-con-inner > * {
  min-height: 0;
}

.elementor.elementor .wc-acts-photo-right img,
.elementor.elementor .wc-acts-photo-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .wc-acts-photo-right {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
  }
}

/* ch-based max-widths: Elementor has no max-width control and no ch unit, and a width
   control does not clamp. Copied verbatim from the source. */
/* the quote uses the DISPLAY face (--xwide 125), which also changes what `ch` resolves to */
.elementor.elementor .dev-source-acts .elementor-element-06e64cc p {
/*   max-width: 20ch; */
  margin-inline: auto;
/*   font-variation-settings: 'wdth' 125; */
}

.elementor.elementor .dev-source-acts .elementor-element-43d4302,
.elementor.elementor .dev-source-acts .elementor-element-0d3e3ab {
  max-width: 62ch;
  margin-inline: auto;
}

/* ---- SECTION 4 (values) -------------------------------------------------
   Rung (d), one line: the source sizes each icon with `height: clamp(...); width: auto`.
   Elementor's Image widget height control does NOT preserve aspect - with a height set the
   img keeps its intrinsic width (155/140/199/234 instead of 77.5/60/91.8/140.4 at 390). */
.elementor.elementor .wc-value img {
  width: auto;
}

/* ---- SECTION 5 (gather) ------------------------------------------------- */
/* source: .gather__content { width: min(600px, 100%) }. No max-width control exists and
   no control unit expresses min(); a plain width does not clamp (it overflowed at 390). */
.elementor.elementor .wc-gather-content {
  width: min(600px, 100%);
}

/* source: .gather__media img { position:absolute; inset:0; width:100%; height:100%;
   object-fit:cover }. The img must be OUT OF FLOW or its intrinsic 960x1080 drives the
   container (measured 990 instead of 528 at 880). Elementor's _position control is not
   responsive and its offsets cannot express inset:0, so this is the faithful route. */
.wc-gather-media {
  position: relative;
}

.wc-gather-media > .e-con-inner {
  height: 100%;
}

.wc-gather-media .elementor-widget-image {
  position: absolute;
  inset: 0;
}

.wc-gather-media .elementor-widget-container,
.wc-gather-media .elementor-image {
  height: 100%;
}

.elementor.elementor .wc-gather-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* source: .gather__figure img { width:100%; aspect-ratio:240/280; object-fit:cover } */
.elementor.elementor .wc-gather-figure img {
  width: 100%;
  aspect-ratio: 240 / 280;
  object-fit: cover;
}

/* ---- WATERMARKS ---------------------------------------------------------
   source .watermark { white-space: nowrap } - the wordmark is WIDER than a phone viewport
   by design and is clipped by the section's overflow, not wrapped. Without this the heading
   wrapped to two lines and added exactly one line-height (40.8px at 390) to the section.
   Targeted by element id because a widget's _css_classes never reaches the wrapper. */
.elementor.elementor .elementor-element-c3e1271 .elementor-heading-title,
.elementor.elementor .elementor-element-3738f46 .elementor-heading-title {
  white-space: nowrap;
}

/* ---- SECTION 6 (foundation) ---------------------------------------------
   Rung (d): the scrim is a FOUR-stop gradient. Elementor's container background-overlay
   exposes exactly two stops, so no control can express it. Values copied verbatim from
   .foundation__scrim - the plan records that a hand-tuned version measured ~45 brightness
   units darker and effectively erased the photograph, so these are not to be re-estimated. */
.dev-source-foundation::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30,44,56,1) 0%, rgba(30,44,56,.955) 40%, rgba(30,44,56,.85) 70%, rgba(30,44,56,.2) 100%);
}

.dev-source-foundation > .e-con {
  z-index: 1;
}

/* source: .foundation .h2 { max-width: 20ch } and .foundation__body { max-width: 78ch }.
   No max-width control, no ch unit. Targeted by element id - a widget's _css_classes never
   reaches the wrapper in this build. */
.elementor.elementor .dev-source-foundation .elementor-widget-heading h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.elementor.elementor .dev-source-foundation .elementor-widget-text-editor {
  max-width: 78ch;
  margin-inline: auto;
}

/* source: .foundation .eyebrow { display:inline-flex } - shrink-wraps so the marker stays
   beside the text. _flex_align_self:center alone is not enough: the container computes
   width:100%, which overrides align-self (measured 811.5 wide instead of 365.1 at 880). */
.elementor.elementor .wc-fnd-eyebrow {
  width: auto;
}

/* ---- SECTION 7 (pastors) ------------------------------------------------
   Rung (d): Elementor's grid control emits repeat(N, 1fr) - equal columns only. This grid
   is minmax(0,420fr) minmax(0,560fr) minmax(0,450fr), and the head SPANS both columns at
   2-up. There is no control for a custom track list, for grid-column span, and
   container_type is not responsive. */
/* NOTE: for a BOXED grid container Elementor forces the OUTER to grid-template-columns:1fr
   and puts the real tracks on > .e-con-inner. Targeting the outer silently did nothing
   useful (the items stacked and the section came out 1858 tall instead of 946). */
.elementor.elementor .wc-pastors-inner > .e-con-inner {
  grid-template-columns: minmax(0, 420fr) minmax(0, 560fr) minmax(0, 450fr);
  grid-template-rows: auto;
  /* source .pastors__inner { align-items: start }. The container's flex_align_items control
     does not reach the inner grid, so the items stretched to the row height (head 721.3
     instead of 243.9). */
  align-items: start;
}

@media (max-width: 1024px) {
  .elementor.elementor .wc-pastors-inner > .e-con-inner {
    grid-template-columns: 1fr 1fr;
  }
  .elementor.elementor .wc-pastors-head {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .elementor.elementor .wc-pastors-inner > .e-con-inner {
    grid-template-columns: 1fr;
  }
}

/* main photo: width 100% + aspect 550/700; the wrapper chain needs a definite height and
   min-height:0 for the same reasons as sections 2 and 3. */
.wc-pastors-media .elementor-widget-container,
.wc-pastors-media .elementor-image {
  height: auto;
}

.elementor.elementor .wc-pastors-main img {
  width: 100%;
  aspect-ratio: 550 / 700;
  object-fit: cover;
}

/* inset photo: absolutely positioned, bottom-left, with a mist border. The LEFT offset is
   the CORRECTED value - the original negative offset is sized for the 3-up grid and at 2-up
   ran the frame off the viewport, where it was clipped 15-23px. */
.elementor.elementor .wc-pastors-inset {
  position: absolute;
  left: clamp(-4.5rem, -6vw, -2rem);
  bottom: 0;
  width: clamp(120px, 15vw, 270px);
  z-index: 2;
}

.elementor.elementor .wc-pastors-inset img {
  width: 100%;
  aspect-ratio: 270 / 340;
  object-fit: cover;
  border: clamp(4px, .6vw, 10px) solid #DAE5EF;
}

@media (max-width: 1024px) {
  .elementor.elementor .wc-pastors-inset {
    left: calc(0.5rem - var(--wc-gutter, 38.272px));
  }
}

@media (max-width: 767px) {
  .elementor.elementor .wc-pastors-inset {
    left: auto;
    right: 0;
    width: 38%;
  }
}

/* min-width:0 keeps the track from being forced wider by the button (the recorded
   1025-1300 overrun). The button itself stays NOWRAP: the measured source keeps it on one
   line at 1920 and simply lets it overhang its track by ~12px. Forcing it to wrap added a
   second line and made the section 28px tall. */
.elementor.elementor .wc-pastors-body {
  min-width: 0;
}

/* ---- SECTION 8 (prayer) -------------------------------------------------
   Rung (d): above 1025 the source turns .prayer__inner into a fixed 1440x780 stage and
   ABSOLUTELY positions the two panels so the card rides 80px higher and they overlap.
   Elementor's position and aspect-ratio have no responsive/any control equivalent. */
@media (min-width: 1025px) {
  /* The stage is the source .container's PADDING box (1440 incl. its 60px gutters), not
     the 1320 content box - `left: 0` on the panel resolves to x=240, the outer edge. So the
     aspect-ratio and positioning context go on the OUTER container; putting them on
     .e-con-inner sized the stage at 1320 and both panels came out 696.7 wide. */
  /* Elementor's boxed container gives a full-width OUTER plus a max-width INNER, so neither
     box is the source's 1440 .container. Rebuild that box explicitly for the stage. */
  .elementor.elementor .wc-prayer-inner {
    position: relative;
    aspect-ratio: 1440 / 780;
    width: min(1440px, 100%);
    margin-inline: auto;
    padding: 0;
  }
  .elementor.elementor .wc-prayer-inner > .e-con-inner {
    display: block;
    height: 100%;
    max-width: none;
    width: 100%;
  }
  /* Because these containers carry position:relative in their settings, Elementor emits
     BOTH `left:0` and `right:0` for them at (0,3,0) - exactly tying a `.elementor.elementor
     .wc-*` selector, so its own rule won on source order. One extra class outranks it. */
  .elementor.elementor .wc-prayer-inner .wc-prayer-panel {
    position: absolute;
    left: 0;
    right: auto;
    top: 10.26%;
    width: 52.78%;
    height: 89.74%;
  }
  /* left:47.22% would not take on this element (computed stayed 0 even though width/height
     from the same block applied). 47.22% + 52.78% = 100%, i.e. flush right, so `right: 0`
     expresses the same position and is not contested. */
  .elementor.elementor .wc-prayer-inner .wc-prayer-card {
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    width: 52.78%;
    height: 89.74%;
  }
}

/* card background photo: out of flow (inset:0) so it contributes no height, greyscaled,
   and masked so it only appears in the lower half. No mask control exists. */
.wc-prayer-card .wc-prayer-cardbg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wc-prayer-card .wc-prayer-cardbg .elementor-widget-container,
.wc-prayer-card .wc-prayer-cardbg .elementor-image {
  height: 100%;
}

.elementor.elementor .wc-prayer-cardbg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.112) 65%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.112) 65%, rgba(0,0,0,1) 100%);
}

/* ---- SECTION 9 (faq) -----------------------------------------------------
   Built with NESTED ACCORDION, not Toggle or Accordion: it renders real <details> elements
   like the source, and its own controls give both behaviours the source has -
   max_items_expended:"all" (items open independently) and default_state:"expanded"
   (the first item ships open). Toggle has neither; Accordion closes siblings.
   Rung (d) below is only what the widget has no control for. */
/* source .faq__item { background:#fff; border-left:4px solid var(--clr-blue) } */
.elementor.elementor .wc-faq-list .e-n-accordion-item {
  background: #FFFFFF;
  border-left: 4px solid #3988D8;
}

/* source .faq__icon is a blue CIRCLE with a white glyph; the widget styles the glyph only. */
.elementor.elementor .wc-faq-list .e-n-accordion-item-title-icon {
  flex: none;
  width: clamp(36px, 3vw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3988D8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.elementor.elementor .wc-faq-list .e-n-accordion-item-title-icon svg {
  width: 20px;
  height: auto;
  fill: #FFFFFF;
}

/* The Nested Accordion exposes NO padding or item-spacing controls at all (its only
   dimension control is the animation duration) - header_padding and
   accordion_item_title_space_between were silent no-ops. Using the source's own clamps
   here is exact at every width rather than stepped per breakpoint. */
.elementor.elementor .wc-faq-list .e-n-accordion-item-title {
  /* rung (d): the source has gap: 1.5rem between question and icon. The widget DOES own an
     icon_spacing control, but it is conditioned on
     accordion_item_title_position_horizontal != "stretch" - and "stretch" is the only value
     that reproduces the source's space-between layout (question left, icon hard right).
     With stretch selected Elementor hides the gap control entirely, so there is no rung (a)
     path to it. Without the gap the text box is 14px wider and the last question stops
     wrapping at 390 (item 5 measured 76 high vs the source's 88.2). */
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.2vw, 1.875rem) clamp(1.25rem, 2.2vw, 2.25rem);
}

/* Elementor spaces items with margin-block-end: var(--n-accordion-item-title-space-between),
   NOT a grid gap - adding a gap on top of it doubled the spacing to 40. Drive its own
   variable instead. */
.elementor.elementor .wc-faq-list {
  --n-accordion-item-title-space-between: clamp(.75rem, 1.5vw, 1.25rem);
  /* the widget's default 1px border added 2px to every title (110 vs 108) */
  --n-accordion-border-width: 0px;
}

.elementor.elementor .wc-faq-answer {
  padding: 0 clamp(1.25rem, 2.2vw, 2.25rem) clamp(1.25rem, 2.2vw, 1.875rem);
}

/* source .faq__a::before - a rule above the answer with its own bottom margin. It sits
   INSIDE the answer's horizontal padding, so it goes on the first child rather than as a
   ::before on the container (which Elementor already uses for its background overlay). */
.elementor.elementor .wc-faq-answer > .elementor-widget:first-child {
  border-top: 1px solid rgba(53,78,98,.28);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

/* ==========================================================================
   Header — scrolled state
   Source: .site-header is position:fixed from scroll 0 and overlays the hero; a
   listener toggles .is-stuck at window.scrollY > 40, and .site-header.is-stuck
   paints a translucent navy bar with a blur and a hairline rule.
   
   Not Elementor Pro Sticky: Sticky leaves the element IN FLOW until its threshold,
   which would push the hero down by the header's 110px and lose the overlay the
   design depends on. The built header is position:fixed to match the source, so
   Sticky's .elementor-sticky--effects class never fires.
   ========================================================================== */
.dev-source-site-header {
  /* source: transition: background var(--transition), box-shadow var(--transition) */
  transition: background 180ms ease, box-shadow 180ms ease;
}

.dev-source-site-header.is-stuck {
  background: rgba(30, 44, 56, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

/* ==========================================================================
   Mobile gutter — restore the source's FLUID gutter below 768px

   The source gutter is `--gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.75rem)`, which is
   continuous: 31.08px at 767 down to 20.00px at <=371. Elementor's breakpoints give the
   whole <=767 band a SINGLE padding value, and it was set to 20.52px — the value at 390.
   That is exact on a real phone and 10.6px too small at 767, which widened the content box
   from 705 to 726 there, wrapped less text, and made every section measurably short at 767.

   Rung (d), and it is forced: Elementor's dimensions control (includes/controls/dimensions.php
   in 4.3.2) exposes NO custom unit, so a clamp() cannot be entered into the padding control at
   all. Per-breakpoint px cannot express a continuous function either - any single value is
   wrong somewhere in the band. Overriding Elementor's own custom properties keeps its cascade
   intact rather than fighting the specificity of its emitted rule.

   Scope: DIRECT boxed children of a section only. Audited at 767 - hero, featured, acts,
   pastors, prayer, faq and the header carry the gutter this way; `values` has no boxed
   container (full-bleed grid, as in the source) and gather/footer's boxed containers are
   nested at 0 padding, so the child combinator leaves all three untouched.
   Vertical padding is deliberately not touched.
   ========================================================================== */
@media (max-width: 767px) {
  .elementor.elementor .dev-source-section > .e-con-boxed {
    --padding-inline-start: clamp(1.25rem, 0.6rem + 2.8vw, 3.75rem);
    --padding-inline-end: clamp(1.25rem, 0.6rem + 2.8vw, 3.75rem);
  }
}

/* ==========================================================================
   Buttons below 768 — restore the source's mobile override

   The rule further up sets `white-space: nowrap` on every button, which is correct ABOVE the
   mobile breakpoint (the source keeps long labels on one line at desktop and lets them overhang
   their grid track). But the source explicitly reverses that at <=767:
     .btn { white-space: normal; padding-inline: 1.25rem; letter-spacing: .04em; }
   That override was missing, so four buttons stayed nowrap and ran past a 360px viewport --
   "Come go West with us" measured 367px wide, "Support the Launch" 348, "Get Launch Updates"
   345 -- producing 5px of horizontal document overflow. The source measures 320x82 for all
   four at 360 (wrapped to two lines, full content width).

   Horizontal overflow is a hard gate, so this is a correctness fix, not a cosmetic one.
   ========================================================================== */
@media (max-width: 767px) {
  .elementor.elementor .elementor-widget-button .elementor-button {
    white-space: normal;
    padding-inline: 1.25rem;
    letter-spacing: .04em;
  }
}

/* ==========================================================================
   Hero CTAs below 768 — full-width, as the source has them

   Source: `@media (max-width:767px) { .hero__actions .btn { width:100%;
   justify-content:space-between } }`. Measured at 767 the source's two hero buttons are each
   705px wide (the full content box) and stacked, container 705x131.

   The build already had the `justify-content: space-between` half, but NOT `width: 100%` — so
   there was no free space for space-between to distribute and the buttons stayed at their
   content width (321 and 268 at 767). The widget wrappers are already 705 wide and the parent
   is a flex COLUMN, so width:100% on the <a> is the whole fix.

   Scoped to the hero deliberately: the source does NOT do this to the other CTAs, and they
   measured correct (foundation 324, pastors 342, gather 321 — content width on both sides).
   ========================================================================== */
@media (max-width: 767px) {
  .elementor.elementor .dev-source-hero .elementor-widget-button .elementor-button {
    width: 100%;
  }
}

/* ==========================================================================
   Featured link-arrow — keep its own tracking below 768

   The mobile rule above applies the source's `.btn { letter-spacing: .04em }` override to every
   button. But the source scopes that to `.btn`, and the featured link is `.link-arrow`, a
   different component that keeps `letter-spacing: .06em` at ALL widths (styles.css line 261).
   Applying .04em to it here measured 0.64px against the source's 0.986px and — being narrower
   per character yet wider overall — made it wrap a breakpoint early (50px tall at 540 where the
   source is still 25px on one line).
   ========================================================================== */
@media (max-width: 767px) {
  .elementor.elementor .wc-featured-body .elementor-button {
    letter-spacing: .06em;
    /* The source's `.link-arrow` carries NO padding (measured 0px at every width) - it is a
       text link, not a `.btn`. The mobile rule above adds the source's .btn padding-inline of
       1.25rem, which here added 40px of width (474 content -> 514 box) and pushed it to wrap a
       breakpoint early. */
    padding-inline: 0;
  }
}

.prayer-form {
  --wc-white: #FFFFFF;
  --wc-ink:   #1F2326;   /* input text  */
  --wc-slate: #354E62;   /* placeholder */
  --wc-blue:  #3988D8;   /* accent, submit bg */
  --wc-field-pad-y: clamp(.9rem, 1.6vw, 1.4rem);
  --wc-field-pad-x: clamp(1rem, 1.6vw, 1.5rem);
  --wc-field-gap:   clamp(.75rem, 1.5vw, 1.25rem);
  --wc-body:        clamp(1rem, .96rem + .14vw, 1.125rem);
}

/* ---- strip Gravity's own chrome ----------------------------------------- */
.prayer-form,
.prayer-form .gform_wrapper .gform_body,
.prayer-form .gform_wrapper .gform_footer { margin: 0; padding: 0; }

.prayer-form .gform_wrapper .gform_fields {
  display: block;            /* GF uses a grid; the design is a simple stack */
  grid-row-gap: 0;
}
.prayer-form .gform_wrapper .gfield { margin: 0 0 var(--wc-field-gap); padding: 0; }
.prayer-form .gform_wrapper .gform_heading,
.prayer-form .gform_wrapper .gfield_required { display: none; }

/* The design shows placeholders only. Hide labels VISUALLY but keep them for
   screen readers — the source does exactly this with its own `.sr-only`. */
.prayer-form .gform_wrapper .gfield_label,
.prayer-form .gform_wrapper legend.gfield_label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---- text / email / textarea -------------------------------------------- */
.prayer-form .gform_wrapper input[type="text"],
.prayer-form .gform_wrapper input[type="email"],
.prayer-form .gform_wrapper input[type="tel"],
.prayer-form .gform_wrapper textarea {
  width: 100%;
  padding: var(--wc-field-pad-y) var(--wc-field-pad-x);
  border: 0;
  border-radius: 0;
  background: var(--wc-white);
  color: var(--wc-ink);
  font-family: inherit;
  font-size: var(--wc-body);
  line-height: 1.556 !important;
  resize: vertical;
  height: 80px;
}
.prayer-form .gform_wrapper textarea {
  /* source textarea is rows="3"; `rows` cannot be set from CSS, so reproduce the
     measured box: 3 line-boxes plus the vertical padding (129px at 1920). */
  min-height: calc(3 * 1.556em + 2 * var(--wc-field-pad-y));
}
.prayer-form .gform_wrapper ::placeholder {
  color: var(--wc-slate);
  opacity: 1;              /* source sets this explicitly — Firefox dims otherwise */
}
.prayer-form .gform_wrapper input:focus-visible,
.prayer-form .gform_wrapper textarea:focus-visible {
  outline: 3px solid var(--wc-blue);
  outline-offset: 2px;
}

/* ---- consent checkbox ---------------------------------------------------- */
/* Gravity wraps choice fields in a <fieldset>, which browsers give a default border and
   padding. The design has no box around the consent row — caught by rendering it, not by
   measuring, because a fieldset's border does not change the row's own box metrics. */
.prayer-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;          /* fieldsets otherwise refuse to shrink below their content */
}
.prayer-form .gfield--type-checkbox .gfield_checkbox { margin: 0; padding: 0; list-style: none; }
.prayer-form .gchoice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.5rem, 3vw, 2rem);
  color: var(--wc-white);
}
.prayer-form .gchoice input[type="checkbox"] {
  flex: none;
  width: 20px; height: 20px;
  margin: 3px 0 0;
  accent-color: var(--wc-blue);
}
.prayer-form .gchoice label {
  margin: 0;
  color: var(--wc-white);
  font-size: var(--wc-body);
  line-height: 1.4;
}

/* ---- submit -------------------------------------------------------------- */
.prayer-form .gform_footer { display: flex; }
.prayer-form button#gform_submit_button_1  {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 1rem 1.75rem;
  border: 0;
  border-radius: 0;
  background-color: var(--wc-blue);
  color: var(--wc-white);
  font-family: inherit;
  font-size: var(--wc-body);
  font-weight: 500;
  line-height: 1.556;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;

  /* The design's 34px rule after the label. Gravity renders the submit as
     <input type="submit">, and an input CANNOT have ::before/::after — so the rule is
     painted as a background gradient instead, which an input does support and which can
     still animate. Right padding reserves the rule's 34px plus the source's 16px gap. */
  padding-right: calc(1.75rem + 34px + 16px);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 34px 1px;
  background-position: right 1.75rem center;
  transition: background-size 180ms ease, background-color 180ms ease;
}
.prayer-form button#gform_submit_button_1:hover { background-size: 46px 1px ; }

/* ---- validation / confirmation ------------------------------------------- */
.prayer-form .gfield_validation_message,
.prayer-form .validation_message {
  margin-top: .5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #FFD2D2;          /* legible on the navy card; GF's default red is not */
  font-size: .9375rem;
}
.prayer-form .gform_validation_errors {
  margin: 0 0 var(--wc-field-gap);
  padding: .75rem 1rem;
  border: 0;
  border-left: 4px solid #FFD2D2;
  border-radius: 0;
  background: rgba(255, 255, 255, .08);
  color: var(--wc-white);
  box-shadow: none;
}
.prayer-form .gform_confirmation_message {
  color: var(--wc-white);
  font-size: var(--wc-body);
  line-height: 1.556;
}

/* ---- <=767: the source makes the submit full-width ----------------------- */
@media (max-width: 767px) {
  .prayer-form button#gform_submit_button_1  {
    width: 100%;
    justify-content: space-between;
    padding-inline: 1.25rem;
    padding-right: 1.25rem;          /* space-between positions the rule, no reserve needed */
    letter-spacing: .04em;
    background-position: right 1.25rem center;
  }
}

  .prayer-form span.gform-field-label__text {
    color: #fff;
}