/*
Theme Name: New Beginnings (Hello Elementor Child)
Theme URI: https://newbeginningscc.ca
Description: Child theme for New Beginnings Community Church: design tokens plus the CSS escape hatches Elementor v4 atomic cannot express (font-face, pseudo-elements, hover transitions). Built on the Hello Elementor parent. Design decisions live in atomic widget settings and are visible in the v4 editor sidebar, NOT here.
Author: Lucky Tyke (Ryan Davis, LLC)
Author URI: https://luckytyke.com
Template: hello-elementor
Version: 0.31.6
License: Proprietary, client deliverable
Text Domain: nbcc-child
*/

/* =============================================================================
   New Beginnings design system — design tokens live in theme.json.

   This stylesheet hosts only what v4 atomic CANNOT express:
     - @font-face declarations
     - :root tokens for non-Elementor surfaces (block editor, wp-admin)
     - ::before / ::after decorative marks and ::first-letter treatments
     - hover and focus transitions

   Anything expressible as a widget setting belongs in the widget, not here.
   See README.md for the rule and the reasoning.

   WHY EVERY RULE HERE READS `body .elementor …` AND NOT `.elementor …`

   Elementor writes both its atomic base classes (`.elementor .e-button-base`)
   and each widget's own props (`.elementor .s-nbcc-hdr-006`) at exactly the
   specificity of `.elementor .my-class`. So a plain `.elementor` prefix here
   only ever TIED with them, and the winner was decided by document order.

   On the front end that tie went our way by luck of the enqueue: this file is
   the eighteenth and LAST stylesheet on the page, after every Elementor sheet.
   In the editor it does not. The editor's preview iframe is served with no page
   content at all and builds the document client-side, injecting Elementor's
   base CSS and every widget's props as inline <style> blocks AFTER all the
   enqueued sheets - including this one. Measured on the header: identical
   markup, identical stylesheets, opposite winners. That is the whole reason
   nav links rendered as blue Elementor buttons in the builder and plain text
   on the site, and why Marcus reported the editor's spacing as "way off".

   `body` adds one type selector - (0,2,1) against their (0,2,0) - which is the
   smallest bump that ends the tie. It cannot change the front end, because
   nothing this file competes with is loaded after it there; it changes only the
   editor, and only by making the editor agree with the site. It deliberately
   stays BELOW the (0,3,0) of Elementor's state variants (`.elementor .s-x:hover`),
   so widget hover/focus settings still win where they should.

   Keep the prefix on anything that COMPETES with Elementor for the same
   property on the same element: a widget's own props (`.elementor .s-nbcc-x`),
   an atomic base class (`.elementor .e-button-base`), or a kit default. There a
   bare `.nbcc-x` rule loses to a widget setting in both places, and a bare
   `.elementor .nbcc-x` rule loses in the builder only - the harder of the two
   bugs to see.

   It is not a blanket house style, and this file is not written as one: 310 of
   its 408 rule heads carry the prefix and 98 do not. The 98 are the rules with
   no Elementor counterpart to lose to - component internals the builder never
   authors (`.nbcc-sermoncard__title`), Gravity Forms' own DOM, the `:root`
   token blocks, the `.nbcc-js` state hooks, the skip link, and the bare-element
   neutralisers that have to MATCH reset.css's specificity rather than beat it.
   Prefixing those buys nothing and costs the reader the signal: when every rule
   is prefixed, the prefix stops marking the rules that need it.
   ============================================================================= */

:root {
	--nbcc-ink:       #1a2430;
	--nbcc-ink-deep:  #16202b;
	--nbcc-body:      #4c5765;
	--nbcc-muted:     #3d4753;
	--nbcc-lime:      #9DC63F;
	/* Darkened from the design's #7ea52c on 2026-09-03. That value renders
	   between 2.38:1 and 2.87:1 on the six light backgrounds it is used on,
	   so every one of its ~240 instances failed WCAG AA. Same hue (79.3deg)
	   and saturation, solved against the DARKEST background in use (#eceade)
	   so no surface is left behind: 4.54:1 there, 5.48:1 on white. */
	--nbcc-green:     #57721e;
	--nbcc-lime-tint: #f2f5e9;
	--nbcc-canvas:    #fbfaf7;
	--nbcc-white:     #ffffff;
	--nbcc-hairline:  rgba(26, 36, 48, .12);
}

/* -----------------------------------------------------------------------------
   Type stacks. Atomic widgets set the family by NAME only (see functions.php);
   these rules supply the fallbacks Elementor cannot express in a widget value.
   -------------------------------------------------------------------------- */

:root {
	--nbcc-font-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
	--nbcc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The text scale. These mirror three Elementor global variables of the same
   names (NbccFsEyebrow / NbccFsBody / NbccFsLead), so a size is changed in one
   place for widget settings and in one place here, and the two agree.

   In rem, not px, so a reader who has raised their browser's default font size
   gets a site that follows. The eyebrow value is also the floor: nothing on
   this site renders text below it. */
:root {
	--nbcc-fs-eyebrow: 0.75rem;   /* 12px  — eyebrows, micro labels, form labels */
	--nbcc-fs-body:    1rem;      /* 16px  — every paragraph of body copy */
	--nbcc-fs-btn:     0.8125rem; /* 13px  — buttons and pills */
	--nbcc-fs-lead:    1.125rem;  /* 18px  — page-hero leads and sub-headings */
}

body {
	font-family: var(--nbcc-font-sans);
}

/* Long prose wraps for readability, display type wraps for balance.
   Neither is expressible as an atomic widget setting. */
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Hello Elementor's reset.css paints bare elements #CC3366 — a magenta in no
   part of this design system — in three places: `a { color }`, and a border
   plus a hover/focus background on bare `<button>`. It survived because
   Elementor paints its own colours, so the only surfaces exposed are the ones
   no atomic widget owns. On this site that was the skip link, both Gravity
   Forms submit buttons, and the mobile hamburger, which turned magenta the
   moment it was tapped.

   Two rules cancel the defaults. Both are written to be as WEAK as the cascade
   allows, because the danger here is over-reach, not under-reach: an unprefixed
   element+class selector outranks every atomic widget setting on the page, and
   the same fix on a sibling project turned an 87-link correction into 1,635
   repainted links.

   `a { color: inherit }` is (0,0,1) — the weakest selector that can exist. It
   ties reset.css and wins only on load order, and every widget that sets its
   own colour still outranks it, so it removes the bad default and changes
   nothing else. Verified by inventorying colour on all 15 routes, desktop and
   mobile, before and after.

   The attribute selectors are not padding. Specificity in a selector list is
   computed PER SELECTOR, and whichever one matched decides — so the reset's
   `[type=button],[type=submit],button` is (0,1,0) against a
   `<button type="button">` and (0,0,1) against a bare `<button>`. The SAME
   rule, at two different strengths, depending on an attribute. A bare `button`
   selector here beats it on one and loses to it on the other, which is exactly
   what happened: the hamburger (no type attribute, atomic markup) came out
   clean and the sermon player (`type="button"`, hand-written markup) stayed
   magenta, and it read as an inexplicable load-order failure. Isolated with two
   injected buttons on the live page differing only by the attribute.

   EVERY case here is a TIE broken by load order, not a win on margin. Both of
   these rules match at exactly the reset's own specificity — (0,1,0) and
   (0,2,0) for the attribute forms, (0,0,1) and (0,1,1) for bare `button` — and
   come out ahead only because this stylesheet prints second. That is stable
   rather than lucky, and the reason is worth stating exactly rather than
   assumed: Hello Elementor registers reset.css under the handle
   `hello-elementor` ITSELF, so this theme's `array( 'hello-elementor' )` names
   the reset directly and the dependency is what holds the order. Read out of
   the parent's own enqueue (`hello_elementor_scripts_styles`), not inferred
   from the handle name — the name looks like it would point at the parent's
   style.css and does not.

   **That dependency argument is what holds the magenta off the site.** Remove
   it and every button silently goes magenta again.

   If this theme is ever reparented, re-read the new parent's enqueue rather
   than assuming it works the same way. The check is one command: inside a
   `wp_enqueue_scripts` hook, print `$wp_styles->registered[$handle]->src`.

   Do NOT "harden" this by raising the specificity. A neutraliser strong enough
   to win on margin also outranks the component rules below — `.nbcc-player:focus`
   is (0,2,0) — and would clear their backgrounds to transparent, which is the
   bug this file already made once. Weak and second is the correct shape. */
a,
button,
[type="button"],
[type="submit"],
[type="reset"] {
	color: inherit;
	border-color: currentColor;
}

/* The same per-selector arithmetic applies to the reset's hover/focus rule, and
   more sharply: `[type=button]:focus` is (0,2,0) where `button:focus` is only
   (0,1,1). Fixing the base rule alone left the sermon player taking a magenta
   BACKGROUND on focus — caught by comparing every button's resting colour
   against its focused colour rather than by looking, because a focus state is
   not in any screenshot. Both halves need the attribute selectors.

   `background-color: initial` and not a value: a component that paints its own
   background at rest keeps it, because its own rule is more specific than this
   one. Anything that declares a colour at rest and no focus rule of its own is
   therefore unaffected — verified across all ten distinct button states on the
   site, which now all hold their colour and background through focus. */
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="reset"]:hover,
[type="reset"]:focus {
	background-color: initial;
	color: inherit;
}

/* Prose surfaces still need a real link colour, because `inherit` alone would
   leave a link in a ministry body indistinguishable from the text around it.
   Not live yet: ministry bodies are ordinary post_content, so this is for the
   first link a staff member types in after handover. */
.nbcc-minbody a,
.nbcc-minlist a,
.entry-content a {
	color: var(--nbcc-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nbcc-minbody a:hover,
.nbcc-minlist a:hover,
.entry-content a:hover { color: var(--nbcc-ink); }

/* The skip link is the one visible piece of chrome no widget owns. It is
   offscreen until a keyboard user tabs to it, at which point it was appearing
   in the reset's magenta. */
.skip-link.screen-reader-text {
	color: var(--nbcc-ink-deep);
	font: 800 var(--nbcc-fs-btn) / 1 var(--nbcc-font-sans);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.skip-link.screen-reader-text:focus {
	background: var(--nbcc-lime);
	color: var(--nbcc-ink-deep);
	border-radius: 0 0 10px 0;
	padding: 14px 22px;
}

/* The design system's one shadow. Everything else separates with hairlines. */
:root { --nbcc-shadow-dropdown: 0 16px 36px rgba(10, 18, 26, .14); }

/* Motion. Scroll reveals are driven by IntersectionObserver adding .is-in;
   honouring prefers-reduced-motion is a stated requirement of the design. */
@keyframes nbRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes nbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nbWipe { from { opacity: 0; transform: translateY(38px) scale(1.03); } to { opacity: 1; transform: none; } }

/* The hidden state is scoped to .nbcc-js, which a one-line snippet in wp_head
   sets. Unscoped, a visitor with JavaScript off gets a page whose Bishop
   section is permanently invisible: `opacity: 0` with nothing left to remove
   it. Scoping it means no-JS shows everything at full opacity, which is the
   correct degradation for a decorative reveal.

   Elementor's editor preview takes that same no-JS path deliberately:
   nbcc_js_class() in functions.php does not print the class there, because the
   editor renders page content client-side AFTER nav.js has already looked for
   reveal targets and found none. Without that exemption the whole "About the
   Bishop" section is an invisible white band in the builder. Change one and
   read the other. */
.nbcc-js [data-reveal] { opacity: 0; }
.nbcc-js [data-reveal].is-in { animation: nbRise .8s cubic-bezier(.22, .7, .24, 1) both; }
.nbcc-js [data-reveal="img"].is-in { animation: nbWipe 1.05s cubic-bezier(.22, .7, .24, 1) both; }
.nbcc-js [data-reveal="rule"].is-in { animation: nbFade .7s ease both; }

@media (prefers-reduced-motion: reduce) {
	.nbcc-js [data-reveal],
	.nbcc-js [data-reveal].is-in {
		opacity: 1;
		animation: none;
	}
}

/* =============================================================================
   Header and footer behaviour.

   Structure, colour, type and spacing are set as Elementor v4 atomic widget
   settings and are visible in the editor sidebar. What lives here is only what
   atomic cannot express:

     - the 1080px breakpoint, which is not one of this kit's breakpoints
       (the kit has desktop / tablet / mobile only)
     - the fluid clamp() sizing the design specifies
     - dropdown and drawer open/close, which need a stacking context and JS
     - mix-blend-mode on the logo mark
     - hover and focus states

   The drawer exists only because it was built by hand: a v4 atomic header has
   no built-in responsive menu, unlike the v3 Nav Menu widget.
   ============================================================================= */

.nbcc-header {
	position: sticky;
	top: 0;
	z-index: 60;
	border-bottom: 1px solid var(--nbcc-hairline);
	width: 100%;
}

.nbcc-header__inner {
	width: 100%;
	margin-inline: auto;
}

/* Logo ---------------------------------------------------------------------- */

.nbcc-logo { text-decoration: none; flex: none; transition: opacity .22s ease; }
.nbcc-logo:hover { opacity: .78; }

/* The supplied mark is a JPEG on a white field. multiply drops that field on
   the white header without us re-cutting the client's asset. */
.nbcc-logo__mark img {
	height: clamp(30px, 5.4vw, 40px);
	width: auto;
	display: block;
	mix-blend-mode: multiply;
}

/* Both wordmark lines are sized as widget settings, so the two clamps that used
   to live here never applied: an unprefixed class rule loses to an atomic
   widget's own style, and these were reporting a size the page did not render.
   Removed rather than given the `.elementor` prefix — the size belongs in the
   widget, where the editor shows it. */

/* Desktop nav --------------------------------------------------------------- */

.nbcc-nav { gap: clamp(17px, 1.8vw, 26px); }

.nbcc-nav__item { position: relative; }

body .elementor .nbcc-nav__link,
body .elementor .nbcc-drawer__link,
body .elementor .nbcc-dropdown__link,
body .elementor .nbcc-footer__link {
	background: none;
	border: 0;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease;
}

body .elementor .nbcc-nav__link:hover,
body .elementor .nbcc-footer__link:hover { color: var(--nbcc-green); }

/* Dropdowns ----------------------------------------------------------------- */

.nbcc-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 262px;
	box-shadow: var(--nbcc-shadow-dropdown);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	z-index: 70;
}

/* focus-within keeps the dropdown reachable by keyboard, which hover alone
   does not. The prototype was mouse-only; the design's definition of done
   requires keyboard navigation. */
.nbcc-has-dropdown:hover > .nbcc-dropdown,
.nbcc-has-dropdown:focus-within > .nbcc-dropdown,
.nbcc-has-dropdown.is-open > .nbcc-dropdown {
	opacity: 1;
	visibility: visible;
}

/* The design shows "Ministries \u25be" and "Contact \u25be". The caret is
   decoration, so it is a pseudo-element rather than a character in the link
   text, which keeps the accessible name clean. */
/* A DESCENDANT combinator, not a child one, and that is not carelessness.
   Elementor's editor wraps every WIDGET in an extra element div that the front
   end does not emit, so in the builder the <a> is a grandchild of the nav item
   rather than a child, `.nbcc-has-dropdown > .nbcc-nav__link` matches nothing,
   and the caret silently disappears - measured: 119.3px wide on the site,
   101.8px in the builder, on the same two items. Containers are not wrapped
   that way, which is why the three `> .nbcc-dropdown` rules above are correct
   as they stand and were verified open in the editor.
   Safe as a descendant: the links inside the dropdown are
   `.nbcc-dropdown__link`, so there is no second `.nbcc-nav__link` to catch. */
.nbcc-has-dropdown .nbcc-nav__link::after {
	content: "\25be";
	/* Sized against the nav link rather than in its own right: the caret is a
	   decoration that should track the label it follows, and it is excluded
	   from the accessible name, so the 12px floor the rest of the site keeps
	   would only make it a large arrow. */
	font-size: .72em;
	margin-inline-start: 5px;
	vertical-align: middle;
	opacity: .65;
}

/* The Ministries dropdown is a collection loop, so its links sit two containers
   below the panel. Both default to a row, which laid the six ministries out
   side by side, 28px wide and overlapping. The panel also has to grow to the
   design's 262px now that each item carries a description line under the name,
   where the fixed list was a single nowrap line. */
body .elementor .nbcc-dropdown__loop,
body .elementor .nbcc-dropdown__layout {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

body .elementor .nbcc-dropdown__loop__item { width: 100%; }

body .elementor .nbcc-dropdown__link { white-space: nowrap; }

/* The ministry name over its audience line, per the design. */
body .elementor .nbcc-dropdown__name { white-space: nowrap; }
body .elementor .nbcc-dropdown__who  { white-space: normal; }
body .elementor .nbcc-dropdown__link:hover { background-color: var(--nbcc-lime-tint); }

/* Hamburger ----------------------------------------------------------------- */

.nbcc-burger {
	display: none;
	border: 1px solid var(--nbcc-hairline);
	background: none;
	cursor: pointer;
	padding: 0;
	flex: none;
}

.nbcc-burger__bar {
	width: 19px;
	height: 2px;
	background: var(--nbcc-ink);
	border-radius: 2px;
}

/* Drawer -------------------------------------------------------------------- */

.nbcc-drawer {
	display: none;
	width: 100%;
	max-height: calc(100vh - 78px);
	overflow-y: auto;
	border-top: 1px solid var(--nbcc-hairline);
}

.nbcc-drawer.is-open { display: flex; }

/* `font-size` moved to the widget 2026-09-04 as a custom-unit size holding the
   same clamp(21px, 5.4vw, 26px). Elementor's size prop accepts a whole CSS
   expression under `unit: custom` - it is how the kit's own global size
   variables store a fluid type scale - so a fluid value has no reason to sit in
   the stylesheet outranking the sidebar. The sidebar used to say 22px on an
   element rendering 26px. */
body .elementor .nbcc-drawer__link {
	padding-block: 16px;
	border-bottom: 1px solid var(--nbcc-hairline);
	text-align: start;
	justify-content: flex-start;
}

/* The chip row's padding moved into the widget: this rule was unprefixed, so
   the atomic base outranked it and the row rendered with none at all. */
body .elementor .nbcc-chip { text-decoration: none; }

/* The 1080 switch ----------------------------------------------------------- */

@media (max-width: 1080px) {
	.nbcc-nav { display: none; }
	.nbcc-burger { display: flex; }
}

@media (min-width: 1081px) {
	.nbcc-drawer { display: none !important; }
}

/* Footer -------------------------------------------------------------------- */

.nbcc-footer { padding-block-start: clamp(38px, 8vw, 64px); }
.nbcc-footer__inner { width: 100%; margin-inline: auto; }
.nbcc-footer__cols { gap: clamp(30px, 4vw, 44px); width: 100%; }

/* Weighted flex, per the design system: proportions survive the collapse in a
   way repeat(auto-fit, minmax()) does not. */
.nbcc-footer__brand { flex: 1.3 1 0; min-width: min(100%, 220px); }
.nbcc-footer__col   { flex: 1 1 0;   min-width: min(45%, 150px); }

.nbcc-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	width: 100%;
}

body .elementor .nbcc-footer__addr a { color: inherit; }

/* =============================================================================
   Header layout corrections.

   Three defects, found by capturing desktop AND mobile and measuring the DOM
   rather than trusting that the rules above had landed:

   1. Every atomic element that sets any flex property also emits `display:flex`
      in its own generated style class. That class has the same specificity as
      ours and loads later, so a plain `display:none` here never wins. Anything
      whose visibility is responsive therefore needs !important. This is the
      escape hatch working as intended, not a specificity war: we are overriding
      generated CSS we do not control.

   2. An atomic flexbox CHILD sizes to intrinsic content, not 100%. The nav
      items collapsed to 20px and their links spilled out of them, which is what
      pushed the document to 1567px. Letting the item be a plain block and the
      link size itself fixes it.

   3. The e-image widget carries our class on the <img> itself, so the
      `.nbcc-logo__mark img` descendant selector matched nothing and the mark
      rendered at its natural 241x348. Target the element, not a descendant.
   ============================================================================= */

/* e-image renders OUR class on the <img> itself, alongside Elementor's own
   .e-image-base. Both are single classes, so a bare `.nbcc-logo__mark` rule ties
   on specificity and loses on order. It needs the extra class and !important, or
   the mark renders at its natural 241x348 and, because the header row is
   space-between, squeezes the nav down to 20px and pushes the document sideways.
   That was the whole 1567px overflow. */
body .elementor .nbcc-logo__mark {
	height: clamp(30px, 5.4vw, 40px) !important;
	width: auto !important;
	max-width: none;
	display: block;
	flex: none;
	mix-blend-mode: multiply;
}

/* `display: block` moved to the widget setting 2026-09-04 (it is what lets the
   link establish the item's width). Only the positioning context stays: the
   dropdown is absolutely positioned against this element, and `position` is not
   an atomic setting. */
body .elementor .nbcc-nav__item {
	position: relative;
}

body .elementor .nbcc-nav__link {
	display: inline-block;
	white-space: nowrap;
}

/* Responsive visibility at 1080px, which is NOT one of this kit's breakpoints
   (it has desktop / tablet / mobile only), so it cannot be a widget setting and
   has to live here. The DESKTOP half is written for each of the three, rather
   than left to the widget, precisely because the mobile half below overrides
   them: leave the desktop state implicit and the rule reads as if the widget
   decided it. The burger and drawer therefore carry NO `display` widget
   setting - a sidebar control that this rule overrides at every width is worse
   than no control at all. */
/* No desktop `display` for the nav: the widget already says flex and saying it
   again here would outrank the sidebar with an identical value. Only the mobile
   half below is the stylesheet's, because 1080px is not a kit breakpoint. */
body .elementor .nbcc-burger { display: none !important; }
body .elementor .nbcc-drawer { display: none !important; }

@media (max-width: 1080px) {
	body .elementor .nbcc-nav { display: none !important; }
	body .elementor .nbcc-burger { display: flex !important; }
	body .elementor .nbcc-drawer.is-open { display: flex !important; }
}

/* The burger is a fixed square; without this the bars stretch it. */
/* `width` and `min-height` are deliberately NOT here: they are widget settings
   (46px each, the design's tap floor), and restating them in the theme would
   override the sidebar with its own value - which looks harmless right up to
   the moment someone changes it in the sidebar and nothing moves. Only `height`
   and `flex` remain, which the widget cannot express. */
body .elementor .nbcc-burger {
	height: 46px;
	flex: none;
}

/* Footer: headings and links read from the start edge, not centred. */
body .elementor .nbcc-footer__brand,
body .elementor .nbcc-footer__col {
	align-items: flex-start;
	text-align: start;
}

body .elementor .nbcc-footer__link,
body .elementor .nbcc-footer__heading,
body .elementor .nbcc-footer__addr,
body .elementor .nbcc-footer__fine {
	text-align: start;
	justify-content: flex-start;
	width: 100%;
}

/* The drawer sits under the bar, so it must not inherit the row's centring. */
body .elementor .nbcc-drawer { align-items: stretch; }
body .elementor .nbcc-drawer__link { display: block; width: 100%; }

/* Header row sizing.

   Elementor's .e-flexbox-base gives a container full width, so the logo link
   expanded to 1180px, took the whole row, and starved the nav and the actions
   group to 20px each. Their links then spilled out of them, which is what the
   overflow warning was reporting. The design has the logo at `flex: none` and
   lets the nav take the middle; these three rules say exactly that. */
body .elementor .nbcc-logo,
body .elementor .nbcc-logo__text,
body .elementor .nbcc-actions {
	width: auto;
	flex: none;
}

/* The nav needs the same `width: auto` to escape .e-flexbox-base, but NOT a
   flex value: it grows to absorb the row's free space so the links right-align
   against the Give pill, and that grow is a widget setting.

   This rule used to pin `flex: 0 1 auto` alongside the width. It ties with
   Elementor's own `.elementor .s-nbcc-hdr-NNN` on specificity and the child
   theme loads second, so it silently won and the widget's `flex: 1` never
   applied — the nav stayed mid-row with a 213px gap before the Give button and
   the CSS looked correct on both sides. Keep this rule to what .e-flexbox-base
   actually forces, and leave layout to the widget. */
body .elementor .nbcc-nav {
	width: auto;
}

body .elementor .nbcc-nav__item { width: auto; }

/* e-button-base ships its own padding and minimum box, which is right for a
   real button and wrong for every link we have styled as text. Left in place it
   indents the footer columns, over-spaces the desktop nav, and inflates the
   three hamburger bars into 30px squares. */
body .elementor .nbcc-nav__link,
body .elementor .nbcc-drawer__link {
	padding-inline: 0;
	min-height: 0;
	min-width: 0;
	justify-content: flex-start;
}

/* The footer links are split out for one declaration: they set
   `padding-inline: 0` as a widget setting of their own, so restating it here
   would quietly outrank the sidebar with an identical value. The other three
   stay, because e-button-base forces them and no widget setting expresses
   them. */
body .elementor .nbcc-footer__link {
	min-height: 0;
	min-width: 0;
	justify-content: flex-start;
}

/* Only the inline padding is cleared above: the footer links carry a 5px block
   padding as a widget setting, which lifts their hit area to 24px without
   changing the visual pitch. Clearing `padding` outright would undo it. */
body .elementor .nbcc-nav__link { padding-block: 0; }

body .elementor .nbcc-drawer__link { padding-block: 16px; }

body .elementor .nbcc-burger__bar {
	width: 19px;
	height: 2px;
	min-height: 2px;
	min-width: 0;
	padding: 0;
	flex: none;
	background: var(--nbcc-ink);
	border-radius: 2px;
}

/* Find Us */
body .elementor .nbcc-footer__find { flex: 1.1 1 0; min-width: min(100%, 190px); }
body .elementor .nbcc-footer__maplink {
	display: block;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
}
body .elementor .nbcc-footer__map {
	width: 100%;
	height: 132px;
	object-fit: cover;
	display: block;
	filter: saturate(.7);
}

/* =============================================================================
   Home page.

   Same division as the header and footer: colour, type, spacing, radius and
   background are atomic widget settings and show in the v4 sidebar. What is
   here is what atomic has no prop for.

   The four base-CSS behaviours that make correct-looking rules do nothing are
   documented at the top of the header block above and all four apply again:
   generated atomic classes emit display:flex and load after ours, .e-flexbox-base
   makes a container full width, e-image puts our class on the <img> itself, and
   e-button-base carries its own padding and minimum box.
   ============================================================================= */

/* Shared -------------------------------------------------------------------- */

.nbcc-inner { width: 100%; margin-inline: auto; }

/* The design does not use one H2 size, it uses five. Each widget carries the
   NbccH2 variable so the sidebar shows a value, and the clamp per section is
   here because clamp() is only expressible in a widget through a global
   variable and four more variables would not earn their place. Weight and line
   height stay widget settings. */

/* The eyebrow's leading dot and the section rule are decoration, not content,
   so they are pseudo-elements rather than empty widgets. */
body .elementor .nbcc-eyebrow--dot {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.nbcc-eyebrow--dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 100px;
	background: var(--nbcc-lime);
	flex: none;
}

body .elementor .nbcc-rule { height: 3px; margin-block: 28px 0; flex: none; }

/* The uppercase link with the lime underline. e-button-base's padding and
   minimum box would otherwise indent it and break the underline width. */
body .elementor .nbcc-textlink {
	background: none;
	border: 0;
	border-bottom: 2px solid var(--nbcc-lime);
	border-radius: 0;
	padding: 0 0 6px;
	min-height: 0;
	min-width: 0;
	width: auto;
	flex: none;
	align-self: flex-start;
	text-decoration: none;
	transition: color .2s ease;
}

body .elementor .nbcc-textlink:hover { color: var(--nbcc-green); }

/* Buttons. Geometry and colour are widget settings; the borders, the hover lift
   and the 44px tap floor are here. */
body .elementor .nbcc-btn {
	text-decoration: none;
	flex: none;
	min-height: 44px;
	line-height: 1;
	transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease,
		border-color .22s ease, filter .22s ease;
}

body .elementor .nbcc-btn--ghost-dark  { border: 1.5px solid rgba(255, 255, 255, .4); background: none; }
body .elementor .nbcc-btn--ghost-light { border: 1.5px solid rgba(26, 36, 48, .22);  background: none; }
body .elementor .nbcc-btn--ghost-lime  { border: 1.5px solid var(--nbcc-lime);       background: none; }

body .elementor .nbcc-btn:hover { transform: translateY(-2px); }
body .elementor .nbcc-btn--primary:hover { box-shadow: 0 4px 12px rgba(157, 198, 63, .28); filter: brightness(1.04); }
body .elementor .nbcc-btn--dark:hover    { box-shadow: 0 6px 16px rgba(13, 20, 28, .24); background-color: #243140; }
body .elementor .nbcc-btn--ghost-dark:hover,
body .elementor .nbcc-btn--ghost-light:hover,
body .elementor .nbcc-btn--ghost-lime:hover { border-color: var(--nbcc-lime); background-color: rgba(157, 198, 63, .12); }

/* Section head: title block left, "all ministries" link right. */
body .elementor .nbcc-sechead { width: 100%; }

/* width:auto, not just a flex value. `.e-flexbox-base` sets width:100%, and a
   flex item whose basis is `auto` falls back to that width - so this block took
   the whole row and pushed the link onto its own line. Any container in a row
   that the design does not stretch needs this; the ones with an explicit
   `flex: n 1 0` are already safe, because a zero basis overrides width. */
body .elementor .nbcc-sechead__text {
	width: auto;
	flex: 1 1 auto;
	min-width: min(100%, 300px);
}

/* Vertical rhythm. Widget-level margin would put the spacing on the child and
   fight the flex gap; these are the design's own paragraph and heading offsets. */
body .elementor .nbcc-hero__lead   { margin-block-start: 22px; max-width: 480px; }
body .elementor .nbcc-hero__cta    { margin-block-start: 30px; }
body .elementor .nbcc-welcome__h2  { margin-block-start: 18px; }
body .elementor .nbcc-welcome__body,
body .elementor .nbcc-sermon__body { margin-block-start: 20px; }
body .elementor .nbcc-welcome__body { max-width: 560px; }
body .elementor .nbcc-textlink     { margin-block-start: 28px; }
body .elementor .nbcc-sechead .nbcc-textlink { margin-block-start: 0; }
body .elementor .nbcc-sermon__h2   { margin-block-start: 16px; }
body .elementor .nbcc-sermon__cta  { margin-block-start: 26px; }

/* Hero ---------------------------------------------------------------------- */

body .elementor .nbcc-hero {
	position: relative;
	min-height: min(660px, 88vh);
	overflow: hidden;
}

/* The photograph is a real <img> rather than a background so it carries alt
   text and can be lazily sized. e-image renders our class ON the <img>, so this
   targets the element and not a descendant. */
body .elementor .nbcc-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 42%;
	display: block;
	border-radius: 0;
}

/* The scrim keeps white type legible over any photograph. Not a gradient behind
   text in the sense the design system forbids: it is the image treatment the
   design specifies for every dark hero. */
.nbcc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 29, 40, .1) 0%, rgba(20, 29, 40, .3) 22%, rgba(20, 29, 40, .97) 100%);
	pointer-events: none;
}

body .elementor .nbcc-hero__inner { position: relative; z-index: 1; }
body .elementor .nbcc-hero__row   { width: 100%; }
body .elementor .nbcc-hero__copy  { max-width: 660px; flex: 1 1 auto; min-width: min(100%, 300px); }

/* line-height is the widget's own 0.92; restating it here would outrank the
   sidebar with the identical value. Removed 2026-09-04. */

body .elementor .nbcc-hero__rail {
	border-inline-start: 2px solid var(--nbcc-lime);
	flex: none;
	min-width: 200px;
	align-items: flex-start;
}

body .elementor .nbcc-hero__time {
	font-size: clamp(23px, 3.1vw, 34px);
	margin-block-start: 9px;
}

/* Styled by position as well as by class: Elementor's html-v3 sanitizer strips
   class attributes from inline tags on the first editor save, so the span
   loses .nbcc-hero__ampm the moment an owner saves Home. */
.nbcc-hero__ampm,
body .elementor .nbcc-hero__time span { font-size: 18px; font-weight: 600; }

body .elementor .nbcc-hero__addr { margin-block-start: 6px; white-space: nowrap; }

/* Motto band ---------------------------------------------------------------- */


/* The gutter is a widget setting now. */
body .elementor .nbcc-motto__inner {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

body .elementor .nbcc-motto__word,
body .elementor .nbcc-motto__sep { font-size: clamp(12px, 2.6vw, 15px); flex: none; }
body .elementor .nbcc-motto__sep { opacity: .45; }

/* Welcome ------------------------------------------------------------------- */

body .elementor .nbcc-welcome__inner { gap: clamp(34px, 5vw, 64px); }

/* Weighted flex, per the design system: desktop proportions survive the
   collapse in a way repeat(auto-fit, minmax()) does not. */
body .elementor .nbcc-welcome__copy  { flex: 1 1 0; min-width: min(100%, 330px); }
body .elementor .nbcc-welcome__media { flex: 1 1 0; min-width: min(100%, 330px); }
body .elementor .nbcc-welcome__pair  { width: 100%; }

body .elementor .nbcc-welcome__img {
	width: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

body .elementor .nbcc-welcome__img--wide { height: 250px; }
body .elementor .nbcc-welcome__img--half { height: 170px; flex: 1 1 0; min-width: 0; }

/* Latest sermon ------------------------------------------------------------- */

body .elementor .nbcc-sermon__inner { gap: clamp(32px, 4.5vw, 56px); }

body .elementor .nbcc-sermon__card {
	flex: 1.15 1 0;
	min-width: min(100%, 330px);
	position: relative;
	overflow: hidden;
	text-decoration: none;
	padding: 0;
	transition: transform .3s ease, box-shadow .3s ease;
}

body .elementor .nbcc-sermon__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(13, 20, 28, .24);
}

body .elementor .nbcc-sermon__img {
	width: 100%;
	max-width: none;
	height: 340px;
	object-fit: cover;
	display: block;
}

.nbcc-sermon__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 29, 40, 0), rgba(20, 29, 40, .55));
	pointer-events: none;
}

body .elementor .nbcc-sermon__badge {
	position: absolute;
	left: 24px;
	bottom: 22px;
	z-index: 1;
	width: auto;
}

body .elementor .nbcc-sermon__play {
	width: 44px;
	height: 44px;
	min-height: 44px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

body .elementor .nbcc-sermon__copy { flex: 1 1 0; min-width: min(100%, 300px); }

/* Ministries ---------------------------------------------------------------- */


/* The collection loop renders loop > layout > item. Only the layout needs to be
   a grid; the loop wrapper is a plain block. */
body .elementor .nbcc-mingrid { width: 100%; }

body .elementor .nbcc-mingrid__layout {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	width: 100%;
}

body .elementor .nbcc-mingrid__item { min-width: 0; }

body .elementor .nbcc-mintile__link {
	position: relative;
	overflow: hidden;
	height: 262px;
	width: 100%;
	text-decoration: none;
	padding: 0;
	transition: transform .3s ease, box-shadow .3s ease;
}

body .elementor .nbcc-mintile__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(13, 20, 28, .22);
}

body .elementor .nbcc-mintile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.nbcc-mintile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 29, 40, 0) 35%, rgba(20, 29, 40, .86));
	pointer-events: none;
}

body .elementor .nbcc-mintile__body {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 1;
	align-items: flex-start;
	text-align: start;
}

/* Bishop -------------------------------------------------------------------- */

body .elementor .nbcc-bishop { overflow: hidden; }
body .elementor .nbcc-bishop__inner { gap: clamp(36px, 6vw, 88px); }

body .elementor .nbcc-bishop__media {
	flex: 1 1 0;
	min-width: min(100%, 320px);
	position: relative;
	align-self: stretch;
	min-height: clamp(380px, 48vw, 580px);
}

body .elementor .nbcc-bishop__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 12px;
	display: block;
}

body .elementor .nbcc-bishop__plate {
	position: absolute;
	left: clamp(-14px, -1.4vw, 0px);
	bottom: clamp(22px, 3vw, 34px);
	z-index: 1;
	width: auto;
	align-items: flex-start;
	box-shadow: 0 12px 28px rgba(13, 20, 28, .22);
}

body .elementor .nbcc-bishop__name { font-size: clamp(18px, 2.2vw, 22px); }

body .elementor .nbcc-bishop__copy { flex: 1.02 1 0; min-width: min(100%, 330px); }
body .elementor .nbcc-bishop__h2 { margin-block-start: 20px; }

body .elementor .nbcc-bishop__lead {
	margin-block-start: 28px;
	max-width: 560px;
	font-size: clamp(17px, 1.9vw, 19px);
}

body .elementor .nbcc-bishop__body {
	margin-block-start: 18px;
	max-width: 560px;
	font-size: var(--nbcc-fs-lead);
}

/* The asymmetric column gap is a WIDGET SETTING now, and the note that used to
   sit here was wrong. It said an asymmetric gap is something atomic cannot
   express, on the evidence that a `column-gap` widget setting was reset by the
   `gap` shorthand Elementor emits after it. The observation was right and the
   conclusion was not: the schema's `column-gap` is the multi-column TEXT gap,
   gated on `column-count >= 1`, and the flex gap's own value is a UNION that
   also accepts `{column, row}` and emits column-gap plus row-gap as two
   longhands with no shorthand beside them. The sidebar exposes it as the
   "Gaps" control's unlink toggle. See v4_shapes.layout_direction(). */
body .elementor .nbcc-bishop__facts {
	margin-block-start: clamp(32px, 4vw, 42px);
	border-block-start: 1px solid rgba(26, 36, 48, .13);
	width: 100%;
}

/* Same trap: without width:auto the two facts each take the full row and stack
   instead of sitting side by side. */
body .elementor .nbcc-bishop__fact { width: auto; flex: 0 1 auto; }
body .elementor .nbcc-bishop__factval { font-size: clamp(16px, 2vw, 19px); }
body .elementor .nbcc-bishop__cta { margin-block-start: clamp(30px, 4vw, 40px); }

/* Events -------------------------------------------------------------------- */


body .elementor .nbcc-evgrid { width: 100%; }

body .elementor .nbcc-evgrid__layout {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

body .elementor .nbcc-evgrid__item { min-width: 0; }

body .elementor .nbcc-evcard { height: 100%; align-items: flex-start; }
body .elementor .nbcc-evcard__date { flex: none; min-width: 62px; }
body .elementor .nbcc-evcard__body { flex: 1 1 auto; min-width: 0; }

/* Give / prayer ------------------------------------------------------------- */

/* Two half-width panels that bleed to the viewport edge but keep their inner
   copy aligned to the 1280px content column. */
/* The padding is the widget's, all four sides. It cannot be split: this rule
   outranks a widget setting, so leaving the block and outer-edge padding here
   while the inner edge moved would have made the moved value lose to a rule
   nobody was looking at. */
body .elementor .nbcc-give__col {
	flex: 1 1 0;
	min-width: min(100%, 320px);
}



body .elementor .nbcc-give__h3   { font-size: clamp(23px, 3.1vw, 34px); }
body .elementor .nbcc-give__body { margin-block: 16px 26px; max-width: 400px; }

/* Breakpoints --------------------------------------------------------------- */

@media (max-width: 900px) {
	body .elementor .nbcc-mingrid__layout,
	body .elementor .nbcc-evgrid__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	body .elementor .nbcc-mingrid__layout,
	body .elementor .nbcc-evgrid__layout { grid-template-columns: minmax(0, 1fr); }

	body .elementor .nbcc-hero__addr { white-space: normal; }
	body .elementor .nbcc-welcome__pair { flex-wrap: wrap; }
	body .elementor .nbcc-welcome__img--half { flex-basis: 100%; }
}

/* -----------------------------------------------------------------------------
   Collection-loop and card box model.

   Two base-CSS behaviours land together here and both present as layout, not as
   an error:

   1. Elementor's `.e-con` base injects `padding: 10px` on every container,
      including the three elements the collection loop generates (loop, layout,
      item). Left alone that is 30px of unasked-for inset between the content
      column and a card, and it compounds per nesting level.

   2. `.e-flexbox-base` sets `width: 100%`. `flex: none` does not undo an
      explicit width, so the event card's date block measured 303px of a 347px
      card and starved the body to 20px — whose text then spilled out of it and
      became the reported horizontal overflow. `width: auto` is the fix, not a
      flex value.
   -------------------------------------------------------------------------- */

body .elementor .nbcc-mingrid,
body .elementor .nbcc-mingrid__layout,
body .elementor .nbcc-mingrid__item,
body .elementor .nbcc-evgrid,
body .elementor .nbcc-evgrid__layout,
body .elementor .nbcc-evgrid__item {
	padding: 0;
	min-width: 0;
}

body .elementor .nbcc-evcard__date {
	width: auto;
	flex: 0 0 auto;
}

body .elementor .nbcc-evcard__body {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* Section vertical rhythm.

   These need the `body .elementor` prefix. Every container the builder creates now
   writes an explicit `padding: 0` widget setting, and Elementor emits that at
   the same specificity as `.elementor .class` - so a bare `.nbcc-welcome` rule
   loses to it and every band collapses to zero vertical padding. The design
   system names one rhythm, clamp(56px, 8vw, 110px), and it exists as the
   NbccSectionY variable for any section the client adds; the prototype varies
   it per band and these are its values.

   Only padding-block is set here, so the widget's inline zero still stands and
   the gutter stays the job of .nbcc-inner. */

/* Every flexbox container the home page builds now sets `padding: 0` as an
   explicit widget setting, so the `.elementor .e-flexbox-base { padding: 10px }`
   base no longer applies anywhere by accident and the zero is visible in the v4
   sidebar. Only the loop's three generated containers still need it here: they
   are produced by Elementor Pro, not by our builder, so we cannot give them a
   widget setting. */

/* The hero rail is a fixed-width column beside the copy. `.e-flexbox-base` also
   sets `width: 100%`, and `flex: none` does not undo an explicit width, so
   without this the rail measured 1180px and wrapped onto its own line under the
   buttons instead of sitting bottom-right. Same failure as the event date
   block; it is worth assuming for any element the design does not stretch. */
body .elementor .nbcc-hero__rail { width: auto; }

/* =============================================================================
   Interior routes — shared furniture.

   Every rule that has to beat a WIDGET SETTING carries the `body .elementor`
   prefix. Elementor emits a widget's own props at the same specificity as
   `.elementor .my-class`, so a bare `.nbcc-x { padding-block: … }` loses to the
   explicit `padding: 0` every container is built with, and a plain `.elementor`
   prefix only TIES with it - which the front end resolves in our favour and the
   builder resolves against us. The leading `body` settles it in both. Rules
   that only have to beat a `.e-*-base` class still win either way, but carry
   the prefix too so there is one rule to remember. This is the trap that turned
   one fix into two on the home page.
   ============================================================================= */

/* Page heading band --------------------------------------------------------- */

body .elementor .nbcc-phero {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Two variants, and the only difference is the photograph: /new-here and
   /about carry one behind the scrim, the rest are flat navy. */
body .elementor .nbcc-phero--photo { min-height: clamp(290px, 42vw, 420px); }
/* The photo hero's inner bottom padding is a widget setting now
   (nbcc_ui.PHERO_PHOTO_BOTTOM), set by page_hero() on the photo variant. */
/* The flat page hero's vertical rhythm moved into the widget 2026-09-04
   (nbcc_ui.PHERO_FLAT_TOP / _BOTTOM). It was a stylesheet rule against a widget
   that said `padding: 0`, so the sidebar reported zero on a band 76px deep. */

body .elementor .nbcc-phero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 35%;
	display: block;
	border-radius: 0;
}

.nbcc-phero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 29, 40, .1) 0%, rgba(20, 29, 40, .3) 22%, rgba(20, 29, 40, .97) 100%);
	pointer-events: none;
}

body .elementor .nbcc-phero__inner { position: relative; z-index: 1; }

/* Each hero photo is framed deliberately; the design fixes the focal point. */
body .elementor .nbcc-phero--visit .nbcc-phero__img { object-position: 50% 22%; }
body .elementor .nbcc-phero--about .nbcc-phero__img { object-position: 50% 40%; }

/* `font-size` moved into the widget (nbcc_ui.PHERO_H1). Only the margin stays:
   atomic has no margin control on a heading. */
body .elementor .nbcc-phero__h1      { margin-block-start: 18px; }
body .elementor .nbcc-phero__lead    { margin-block-start: 20px; max-width: 620px; }
body .elementor .nbcc-phero__eyebrow { width: auto; }

/* Closing call-to-action band ----------------------------------------------- */

body .elementor .nbcc-ctaband__inner { width: 100%; }
body .elementor .nbcc-ctaband__text  { width: auto; flex: 1 1 auto; min-width: min(100%, 280px); }
body .elementor .nbcc-ctaband__sub   { margin-block-start: 10px; }

/* Info card ----------------------------------------------------------------- */

body .elementor .nbcc-infocard {
	border: 1px solid var(--nbcc-hairline);
	flex: 1 1 0;
	min-width: min(100%, 255px);
}

body .elementor .nbcc-infocard__h3   { margin-block-start: 12px; }
body .elementor .nbcc-infocard__body { margin-block-start: 8px; }

/* Hairline-separated row ---------------------------------------------------- */

body .elementor .nbcc-divrow {
	border-top: 1px solid rgba(26, 36, 48, .15);
	width: 100%;
}

body .elementor .nbcc-divrow--last { border-bottom: 1px solid rgba(26, 36, 48, .15); }

body .elementor .nbcc-divrow--dark { border-top-color: rgba(255, 255, 255, .16); }
body .elementor .nbcc-divrow--dark.nbcc-divrow--last { border-bottom-color: rgba(255, 255, 255, .16); }

body .elementor .nbcc-divrow__b { margin-block-start: 8px; }
body .elementor .nbcc-divrow .nbcc-textlink { margin-block-start: 12px; }

/* Motto band, ruled variant (under the /new-here hero). */
body .elementor .nbcc-motto--ruled { border-top: 1px solid rgba(255, 255, 255, .1); }

/* =============================================================================
   /new-here — Plan Your Visit
   ============================================================================= */

body .elementor .nbcc-visitcards__inner { width: 100%; }

body .elementor .nbcc-visitexpect__inner { gap: clamp(34px, 5vw, 60px); }
body .elementor .nbcc-visitexpect__copy { flex: 1 1 0; min-width: min(100%, 330px); }
body .elementor .nbcc-visitfaq          { flex: 1.05 1 0; min-width: min(100%, 330px); }

body .elementor .nbcc-visitexpect__h2 { margin-block-start: 18px; }
body .elementor .nbcc-visitexpect__p  { margin-block-start: 18px; }

body .elementor .nbcc-visitexpect__img {
	width: 100%;
	max-width: none;
	height: 250px;
	object-fit: cover;
	display: block;
	margin-block-start: 28px;
}

body .elementor .nbcc-visitmap__inner { gap: clamp(30px, 4vw, 48px); }
body .elementor .nbcc-visitmap__copy  { flex: 1 1 0; min-width: min(100%, 300px); }
body .elementor .nbcc-visitmap__link  { flex: 1.2 1 0; min-width: min(100%, 320px); overflow: hidden; }
body .elementor .nbcc-visitmap__body  { margin-block-start: 14px; }
body .elementor .nbcc-visitmap .nbcc-btn { margin-block-start: 22px; }

body .elementor .nbcc-visitmap__img {
	width: 100%;
	max-width: none;
	height: 300px;
	object-fit: cover;
	display: block;
	filter: saturate(.7);
}

/* =============================================================================
   /about
   ============================================================================= */

/* The design highlights three verbs inside the mission heading. <em> carries no
   italic here; it is the semantic emphasis the sentence actually has. The
   heading-scoped selector survives an editor save, which strips the class. */
body .elementor .nbcc-hl,
body .elementor .nbcc-aboutmission__h2 em { color: var(--nbcc-green); font-style: normal; }

body .elementor .nbcc-aboutmission__inner { gap: clamp(34px, 5vw, 60px); }
body .elementor .nbcc-aboutmission__copy  { flex: 1.1 1 0; min-width: min(100%, 330px); }
body .elementor .nbcc-aboutmission__media { flex: 1 1 0;   min-width: min(100%, 300px); }

body .elementor .nbcc-aboutmission__lead { margin-block-start: 22px; }
body .elementor .nbcc-callout            { margin-block-start: 30px; width: 100%; }
body .elementor .nbcc-callout__text      { margin-block-start: 12px; }

body .elementor .nbcc-aboutmission__img {
	width: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

body .elementor .nbcc-aboutmission__img--tall  { height: 260px; }
body .elementor .nbcc-aboutmission__img--short { height: 200px; }

/* Three pillars ------------------------------------------------------------- */

body .elementor .nbcc-pillars__inner { width: 100%; }

/* The design's one border-left accent. It is a 2px rule on a plain band, not
   the "rounded card with a coloured left border" the design system forbids. */
body .elementor .nbcc-pillar {
	border-left: 2px solid var(--nbcc-lime);
	flex: 1 1 0;
	min-width: min(100%, 255px);
}

body .elementor .nbcc-pillar__body { margin-block-start: 10px; }

/* Meet our pastor ----------------------------------------------------------- */

body .elementor .nbcc-aboutpastor__inner { gap: clamp(30px, 4vw, 52px); }

body .elementor .nbcc-aboutpastor__media {
	flex: 1 1 0;
	min-width: min(100%, 300px);
	position: relative;
	min-height: clamp(310px, 38vw, 420px);
	border-radius: 10px;
	overflow: hidden;
}

body .elementor .nbcc-aboutpastor__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 20%;
	display: block;
}

/* The nameplate reads over a fade rather than a solid bar, so the photograph
   stays visible behind the name.

   The ramp is steeper than a straight 0 -> .88, and that is a legibility fix
   rather than taste. The lime eyebrow sits at 43% of this box, where a linear
   fade has only reached .38 alpha; lime at 12px needs .80 over the worst case
   (a white pixel of the photograph) to clear AA. On the Bishop page it happened
   to fall over a dark hand and looked fine. On About it falls over a pale
   shirt, where "SENIOR PASTOR" was close to unreadable.

   That is the whole difficulty with text over a photograph: the SAME component
   passes on one image and fails on another, so it cannot be settled from the
   CSS alone and no automated check can decide it - axe reports these as
   undecidable, correctly. This ramp removes the dependency on the picture:
   .83 alpha where the eyebrow sits, whatever is behind it. */
body .elementor .nbcc-plate {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	background: linear-gradient(180deg,
		rgba(20, 29, 40, 0) 0%,
		rgba(20, 29, 40, .42) 20%,
		rgba(20, 29, 40, .82) 40%,
		rgba(20, 29, 40, .95) 70%,
		rgba(20, 29, 40, .97) 100%);
}


body .elementor .nbcc-aboutpastor__copy {
	flex: 1.1 1 0;
	min-width: min(100%, 330px);
	justify-content: center;
}

body .elementor .nbcc-aboutpastor__h2 { margin-block-start: 16px; }
body .elementor .nbcc-aboutpastor__p  { margin-block-start: 18px; }
body .elementor .nbcc-aboutpastor .nbcc-btn { margin-block-start: 26px; }

/* What we believe ----------------------------------------------------------- */

body .elementor .nbcc-beliefs__head { width: 100%; max-width: 640px; }
body .elementor .nbcc-beliefs__h2   { margin-block-start: 18px; }
body .elementor .nbcc-beliefs__lead { margin-block-start: 16px; }

/* THREE columns at 1280, each row its own hairline - the design's own grid.
   This was built as a wrapping flex row at `flex: 1 1 calc(50% - 22px)`, which
   rendered the ten convictions two-up at every desktop width against the
   design's three, and made /about the densest-reading page in the build.

   A real grid, not flex with a 300px basis, and the tenth item is why: there
   are ten beliefs, so the last row holds one. Under auto-fit it occupies a
   single column; under flex-grow it would stretch to the full width and read
   as a footnote rather than the tenth of ten. */
/* `display: grid` is a widget setting now; only the track definition is here,
   because `repeat(auto-fit, minmax(min(100%, 300px), 1fr))` is not something
   the v4 controls express. */
body .elementor .nbcc-beliefs__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 2px 44px;
	width: 100%;
}


/* Only the margin is left: the size and the leading are the row's own widget
   settings now (divider_row's h_size / body_lh), passed by the beliefs list. */
body .elementor .nbcc-belief .nbcc-divrow__b { margin-block-start: 9px; }

/* =============================================================================
   /about/bishop
   ============================================================================= */

body .elementor .nbcc-bishero { width: 100%; }

body .elementor .nbcc-bishero__media {
	flex: 1 1 0;
	min-width: min(100%, 330px);
	position: relative;
	min-height: clamp(340px, 46vw, 560px);
}

body .elementor .nbcc-bishero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 18%;
	display: block;
}

body .elementor .nbcc-bishero__copy {
	flex: 1.05 1 0;
	min-width: min(100%, 320px);
}

/* The back link is a plain lime label, not the underlined text link. */
/* `letter-spacing` is a widget setting now (nbcc_ui.TEXT_TRACKING). */
body .elementor .nbcc-backlink {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Full white, not a fade: at .65 the 12px label fell to 4.16:1 on navy. */
body .elementor .nbcc-backlink:hover { opacity: 1; color: var(--nbcc-white); }

body .elementor .nbcc-bishero__eyebrow { margin-block-start: 34px; }
body .elementor .nbcc-bishero__h1   { font-size: clamp(34px, 5.4vw, 62px); margin-block-start: 16px; }
body .elementor .nbcc-bishero__rule { height: 3px; margin-block-start: 26px; flex: none; }
body .elementor .nbcc-bishero__lead { margin-block-start: 26px; max-width: 520px; }
body .elementor .nbcc-bishero__cta  { margin-block-start: 36px; width: auto; }

/* Facts strip --------------------------------------------------------------- */

body .elementor .nbcc-bisfacts {
	border-bottom: 1px solid rgba(26, 36, 48, .1);
}

body .elementor .nbcc-bisfacts__inner { width: 100%; }
body .elementor .nbcc-bisfact { flex: 1 1 150px; min-width: 140px; width: auto; }

/* Biography ----------------------------------------------------------------- */


/* A measure, not the site's 1280 column: long prose needs a short line. */
body .elementor .nbcc-bisbio__col { width: 100%; max-width: 760px; }

body .elementor .nbcc-bisbio__p { margin-block-start: 22px; }

/* Pull quote ---------------------------------------------------------------- */


body .elementor .nbcc-bisquote__inner {
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
	text-align: center;
}

body .elementor .nbcc-bisquote__text {
	font-size: clamp(23px, 3.6vw, 40px);
	margin-block-start: 24px;
	text-align: center;
}

body .elementor .nbcc-bisquote__attr { margin-block-start: 26px; text-align: center; }

/* Three commitments --------------------------------------------------------- */

body .elementor .nbcc-biscom__head { width: 100%; max-width: 620px; }
body .elementor .nbcc-biscom__h2   { margin-block-start: 18px; }
body .elementor .nbcc-biscom__grid { width: 100%; }

body .elementor .nbcc-biscom__card {
	border-top: 2px solid var(--nbcc-lime);
	flex: 1 1 0;
	min-width: min(100%, 240px);
}

body .elementor .nbcc-biscom__body { margin-block-start: 12px; }

/* First Lady ---------------------------------------------------------------- */


/* wrap-reverse: on desktop the copy leads and the portrait sits right; when it
   collapses the portrait should come FIRST, as the design has it. */
body .elementor .nbcc-bislady__inner {
	gap: clamp(30px, 4vw, 56px);
}

body .elementor .nbcc-bislady__copy { flex: 1.1 1 0; min-width: min(100%, 330px); }
body .elementor .nbcc-bislady__h2   { margin-block-start: 16px; }
body .elementor .nbcc-bislady__p    { margin-block-start: 18px; }

body .elementor .nbcc-bislady__facts {
	width: 100%;
	margin-block-start: 30px;
	border-top: 1px solid rgba(26, 36, 48, .14);
}

body .elementor .nbcc-bislady__fact { width: auto; flex: 0 1 auto; }
body .elementor .nbcc-bislady .nbcc-textlink { margin-block-start: 28px; }

body .elementor .nbcc-bislady__media {
	flex: 1 1 0;
	min-width: min(100%, 300px);
	position: relative;
	min-height: clamp(300px, 36vw, 400px);
	border-radius: 10px;
	overflow: hidden;
}

body .elementor .nbcc-bislady__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 28%;
	display: block;
}

/* =============================================================================
   /sermons

   The player and the archive grid are child-theme shortcode markup, not atomic
   widgets, so these rules do not have to beat a widget setting and the
   `.elementor` prefix is only used where they wrap one.
   ============================================================================= */

body .elementor .nbcc-latest__inner { width: 100%; }
body .elementor .nbcc-latest__eyebrow { margin-block-end: 18px; }

body .elementor .nbcc-latest__row {
	width: 100%;
}

body .elementor .nbcc-latest__media { flex: 1.5 1 0; min-width: min(100%, 330px); overflow: hidden; }
body .elementor .nbcc-latest__copy  { flex: 1 1 0;   min-width: min(100%, 300px); }

body .elementor .nbcc-latest__h1   { font-size: clamp(26px, 4.2vw, 46px); }
body .elementor .nbcc-latest__meta { margin-block-start: 16px; }
body .elementor .nbcc-latest__body { margin-block-start: 18px; }
body .elementor .nbcc-latest__cta  { margin-block-start: 26px; width: auto; }

/* Click-to-play facade ------------------------------------------------------ */

.nbcc-player {
	/* Kept after the mechanism was found, not because it is still needed: the
	   attribute selectors in the reset-neutralising rule at the top of this file
	   now cover this button. This is a `<button type="button">`, which is what
	   made it the one bare button that rule missed. Belt and braces on the
	   element that demonstrated the trap. */
	color: inherit;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #0d141c;
	cursor: pointer;
	transition: filter .28s ease;
}

/* Same reason as the giving button: this is a `<button type="button">`, so the
   reset's focus rule outranks `.nbcc-player` and would paint the plate magenta,
   while the blanket neutraliser would clear it to transparent. Stated here so
   neither happens. */
.nbcc-player:hover,
.nbcc-player:focus {
	background: #0d141c;
	filter: brightness(1.06);
}

.nbcc-player__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nbcc-player__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 20, 28, .15), rgba(13, 20, 28, .5));
}

.nbcc-player__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 100px;
	background: var(--nbcc-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nbcc-ink-deep);
	font-size: 24px;
	box-shadow: 0 8px 26px rgba(13, 20, 28, .35);
	transition: transform .28s ease;
}

.nbcc-player:hover .nbcc-player__play { transform: translate(-50%, -50%) scale(1.06); }

.nbcc-player__frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
	display: block;
}

/* Past messages ------------------------------------------------------------- */

body .elementor .nbcc-archive__h2 { margin-block-start: 16px; }
body .elementor .nbcc-archive__grid { width: 100%; }

/* The design's own grid, not a fixed column count. auto-fit at a 270px floor
   gives FOUR columns at 1280 and steps down on its own; a hard repeat(3) was
   rendering the archive three-up at every desktop width, which is the one place
   this build read visibly less dense than the prototype.

   The design system says to avoid auto-fit for content ROWS, where weighted
   flex keeps deliberate proportions through the collapse. This is not a content
   row: the cards are interchangeable and the design itself specifies auto-fit
   here. */
.nbcc-sermongrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	gap: 22px;
	width: 100%;
}

.nbcc-sermoncard {
	display: block;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	transition: transform .28s ease;
}

.nbcc-sermoncard:hover { transform: translateY(-4px); }

.nbcc-sermoncard__media {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: var(--nbcc-ink);
	aspect-ratio: 16 / 9;
}

.nbcc-sermoncard__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .85;
	display: block;
}

.nbcc-sermoncard__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 29, 40, .1), rgba(20, 29, 40, .55));
}

.nbcc-sermoncard__play {
	position: absolute;
	left: 14px;
	bottom: 14px;
	width: 38px;
	height: 38px;
	border-radius: 100px;
	background: var(--nbcc-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nbcc-ink-deep);
	font-size: 12px;
}

.nbcc-sermoncard__date {
	display: block;
	margin-top: 16px;
	font: 500 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nbcc-green);
}

.nbcc-sermoncard__title {
	display: block;
	margin-top: 9px;
	font: 800 20px/1.25 var(--nbcc-font-sans);
	color: var(--nbcc-ink);
}

/* =============================================================================
   /give
   ============================================================================= */

body .elementor .nbcc-givebody__inner { gap: clamp(32px, 4.5vw, 56px); }

body .elementor .nbcc-givecard {
	flex: 1.15 1 0;
	min-width: min(100%, 330px);
	border: 1px solid rgba(26, 36, 48, .12);
}

body .elementor .nbcc-givecard__h2   { margin-block-start: 12px; }
body .elementor .nbcc-givecard__slot { width: 100%; margin-block-start: 24px; }

/* The hairline between the Tithe.ly button and the e-transfer block inside the
   giving card. `flex: none` because a 1px child in a flex column is otherwise a
   candidate for stretching, and the height would be the first thing to go. */
body .elementor .nbcc-givecard__sep {
	width: 100%;
	height: 1px;
	flex: none;
	background: rgba(26, 36, 48, .12);
	margin-block: 30px 28px;
}

/* `flex: 1 1 0` rather than a width, and the basis is the point: `.e-flexbox-base`
   sets `width: 100%` on every container Elementor builds, and a flex BASIS is
   the thing that overrides it - `flex: none` does not. The card opposite has
   `flex: 1.15 1 0` a few lines up, which is what makes this two columns rather
   than two rows. Before 2026-09-04 a `.nbcc-give__main` wrapper sat between the
   row and the card with no basis of its own, and the page stacked at 1440. */
body .elementor .nbcc-give__side { flex: 1 1 0; min-width: min(100%, 300px); }
body .elementor .nbcc-ways__list { width: 100%; }

body .elementor .nbcc-way {
	border-top: 1px solid rgba(26, 36, 48, .14);
	width: 100%;
}

body .elementor .nbcc-way__b { margin-block-start: 5px; }
body .elementor .nbcc-verse__ref { margin-block-start: 14px; }
body .elementor .nbcc-giveq { border: 1px solid rgba(26, 36, 48, .12); }
body .elementor .nbcc-giveq__b { margin-block-start: 8px; }
body .elementor .nbcc-giveq .nbcc-textlink { margin-block-start: 14px; }

.nbcc-giveform {
	width: 100%;
	min-height: clamp(340px, 58vh, 520px);
	border: 0;
	border-radius: 10px;
	display: block;
}

/* The Tithe.ly button. It is emitted by a shortcode rather than built as an
   atomic widget, so it cannot inherit pill()'s settings the way every other
   primary button on the site does, and the design's primary button is restated
   here instead. Keep the two in step: nbcc_ui.pill("primary") is the original.

   Tithe.ly's own snippet ships inline styles in a green that is not in this
   palette; inc/shortcodes.php drops them, which is why this rule is reachable
   at all. */
body .elementor .nbcc-giveform__btn {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
	background: var(--nbcc-lime);
	color: var(--nbcc-ink-deep);
	border-radius: 100px;
	padding: 17px 30px;
	min-height: 44px;
	font: 800 var(--nbcc-fs-btn)/1 var(--nbcc-font-sans);
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: box-shadow .22s ease, filter .22s ease;
}

/* Background and colour are restated on hover AND focus, not just the shadow:
   the reset's `[type=button]:focus` is (0,2,0), so a rule that only sets a
   shadow leaves the fill to whatever wins underneath. */
body .elementor .nbcc-giveform__btn:hover,
body .elementor .nbcc-giveform__btn:focus {
	background: var(--nbcc-lime);
	color: var(--nbcc-ink-deep);
	filter: brightness(1.04);
}

/* The soft lime glow is HOVER ONLY. On focus it used to apply here too, at
   (0,2,1), which beat the site-wide focus ring's white halo and left the ink
   ring alone on whatever was behind the button. A focus indicator is not a
   decorative glow, and the ring above is the one that has to be legible. */
body .elementor .nbcc-giveform__btn:hover {
	box-shadow: 0 4px 12px rgba(157, 198, 63, .28);
}

/* The review-site-only slot. Deliberately reads as unfinished, because it is:
   it renders nothing at all once a processor is configured, and nothing at all
   on production regardless. See inc/shortcodes.php. */
.nbcc-giveslot {
	border-radius: 10px;
	border: 1.5px dashed rgba(26, 36, 48, .28);
	background: repeating-linear-gradient(135deg, #f6f6f1, #f6f6f1 10px, #f0f0e9 10px, #f0f0e9 20px);
	min-height: clamp(300px, 46vh, 460px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 30px;
}

.nbcc-giveslot__h { font: 800 20px/1.3 var(--nbcc-font-sans); color: var(--nbcc-muted); }
.nbcc-giveslot__b { font: 400 var(--nbcc-fs-body)/1.6 var(--nbcc-font-sans); color: var(--nbcc-body); max-width: 340px; }
.nbcc-giveslot__n {
	font: 500 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nbcc-green);
}

/* =============================================================================
   /contact
   ============================================================================= */

body .elementor .nbcc-contact__inner { gap: clamp(32px, 4.5vw, 56px); }

body .elementor .nbcc-contact__details { flex: 1 1 0; min-width: min(100%, 300px); }

body .elementor .nbcc-contact__card {
	flex: 1.15 1 0;
	min-width: min(100%, 320px);
	border: 1px solid rgba(26, 36, 48, .12);
}


body .elementor .nbcc-contact__maplink {
	display: block;
	width: 100%;
	margin-block-start: 26px;
	overflow: hidden;
	padding: 0;
}

body .elementor .nbcc-contact__map {
	width: 100%;
	max-width: none;
	height: 250px;
	object-fit: cover;
	display: block;
	filter: saturate(.7);
}

body .elementor .nbcc-detail__val a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--nbcc-lime); }
body .elementor .nbcc-detail__val a:hover { color: var(--nbcc-green); }

/* Prayer band --------------------------------------------------------------- */

body .elementor .nbcc-prayer {
	scroll-margin-top: 90px;
}

body .elementor .nbcc-prayer__inner { gap: clamp(32px, 4.5vw, 56px); }
body .elementor .nbcc-prayer__copy  { flex: 1 1 0; min-width: min(100%, 300px); }
body .elementor .nbcc-prayer__h2    { margin-block-start: 18px; }
body .elementor .nbcc-prayer__p     { margin-block-start: 16px; }
body .elementor .nbcc-prayer .nbcc-textlink { margin-block-start: 22px; }

body .elementor .nbcc-prayer__card {
	flex: 1.1 1 0;
	min-width: min(100%, 320px);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .14);
}

/* =============================================================================
   Gravity Forms, restyled to the design system.

   Driven ENTIRELY through Gravity Forms' published CSS API (docs.css.gravity.com):
   the Orbital theme reads its own custom properties, and overriding those is the
   supported interface. Fighting its selectors is not - the first attempt here
   set `background` on `.nbcc-formslot .gform_wrapper .gform_footer button` and
   lost, because the theme's own rule is more specific and the button colour
   never came from that declaration in the first place.

   The properties are set on `.gform_wrapper` and NOT on `.nbcc-formslot`. The
   theme defines them on the wrapper itself, so a value set on an ancestor is
   overridden by the closer definition and appears to do nothing.
   ============================================================================= */

body .elementor .nbcc-formslot { width: 100%; }
body .elementor .nbcc-formslot .gform_wrapper { width: 100%; }

.nbcc-formslot .gform_wrapper {
	/* Fields */
	--gf-ctrl-size: 50px;
	--gf-ctrl-size-md: 50px;
	--gf-ctrl-radius: 8px;
	--gf-ctrl-padding-x: 15px;
	--gf-ctrl-font-size: var(--nbcc-fs-body);
	--gf-ctrl-bg-color: var(--nbcc-canvas);
	--gf-ctrl-border-color: rgba(26, 36, 48, .2);
	--gf-ctrl-color: var(--nbcc-ink);
	/* Not the property the label colour is read from - see the direct rule
	   below. Set anyway so the two agree if a future GF version starts using
	   it. */
	--gf-ctrl-label-color-primary: var(--nbcc-body);

	/* The design carries no red. A required marker still has to be visible -
	   it is the only cue that a field is mandatory before submit - so it is
	   muted rather than removed.

	   The one literal grey left in this file, deliberately. Every other one was
	   a near-duplicate of a token and now points at it; this value has no token
	   because it exists to read QUIETER than the label beside it, and the
	   lightest grey in the palette (--nbcc-body, #4c5765) is darker than the
	   label was. Pointing it at a token would invert the only thing it is for.
	   4.74:1 on white, which clears AA for the 12px bold it renders at.

	   Inert today for the same reason as --gf-color-primary-darker below: under
	   legacy markup the marker renders rgb(121,0,0), a dark red, measured on
	   /contact 2026-09-06. Removing the red is part of the markupVersion pass,
	   not something this property is doing yet. */
	--gf-ctrl-label-color-req: #6b7480;

	/* Focus, which is also the visible focus ring the design's definition of
	   done requires on every interactive element. */
	--gf-color-primary: #9DC63F;
	--gf-color-primary-rgb: 157, 198, 63;
	--gf-color-primary-contrast: #16202b;

	/* Yes, this is the #7ea52c that was retired from the palette on
	   2026-09-03, and it is correct HERE. It was retired as a TEXT colour,
	   where it renders 2.38:1 to 2.87:1 on our light surfaces. In Gravity
	   Forms it is a hover BACKGROUND, sat behind --gf-color-primary-contrast
	   (#16202b), which measures 5.73:1. Do not "fix" it to --nbcc-green
	   (#57721e): that is solved for dark ink ON a light surface, and as a
	   background behind #16202b it falls to 3.00:1, which fails AA for normal
	   text. Same hex, opposite role, opposite answer.

	   It reaches nothing today, and not for a reassuring reason. Both forms
	   still render `gform_legacy_markup_wrapper gform-theme--no-framework`
	   (measured on /contact 2026-09-06), and legacy markup makes the whole
	   --gf-* CSS API inert. It goes live the moment the markupVersion pass
	   lands, so it was checked before that and not after. */
	--gf-color-primary-darker: #7ea52c;
	--gf-ctrl-border-color-focus: #9DC63F;

	/* Submit button: the design's dark pill. 50px clears the 44px tap floor. */
	--gf-ctrl-btn-size: 50px;
	--gf-ctrl-btn-size-md: 50px;
	--gf-ctrl-btn-radius: 100px;
	--gf-ctrl-btn-padding-x: 28px;
	--gf-ctrl-btn-font-size: 12.5px;
	--gf-ctrl-btn-font-weight: 800;
	--gf-ctrl-btn-letter-spacing: .05em;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-shadow-hover: none;
	--gf-ctrl-btn-shadow-focus: none;
	--gf-ctrl-btn-bg-color-primary: #16202b;
	--gf-ctrl-btn-bg-color-hover-primary: #243140;
	--gf-ctrl-btn-bg-color-focus-primary: #243140;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-color-hover-primary: #ffffff;
	--gf-ctrl-btn-color-focus-primary: #ffffff;
	--gf-ctrl-btn-border-color-focus-primary: #9DC63F;

	--gf-font-family-base: var(--nbcc-font-sans);
}

/* Label typography is the one thing the API does not expose at the grain the
   design needs (uppercase, tracked, 11px).

   The COLOUR is here too, and that is not a style preference. Setting
   `--gf-ctrl-label-color-primary` looks like it should work and does nothing:
   the label reads its colour from somewhere else, so on the navy prayer panel
   every label rendered #112337 - near-black type on a near-black card, legible
   only if you knew it was there. The field descriptions on the same form DID
   follow their custom property, which is what made it look like the labels had
   been styled too. Measured on the rendered page, not read off the API list. */
.nbcc-formslot .gform_wrapper .gfield_label {
	font: 700 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-sans);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--nbcc-body);
	margin-bottom: 8px;
}

/* The submit button, and the reason it is here rather than in the block above.

   Both forms render as `gform_legacy_markup_wrapper gform-theme--no-framework`,
   NOT Orbital: GFAPI treats a form created without an explicit `markupVersion`
   as legacy, and scripts/seed/forms.php never set one. So every --gf-ctrl-btn-*
   property above applies to nothing, and the button fell all the way through to
   Hello Elementor's reset.css, which paints bare buttons #CC3366. Both forms
   submitted with a magenta outlined button at 3px radius.

   The labels above look styled only because they are set by a direct rule like
   this one. Nothing that relies on the CSS API is reaching these two forms.
   Seeding markupVersion 2 is the structural fix and changes the whole field
   DOM, so it is a decision on its own rather than a change made mid-review. */
.nbcc-formslot .gform_wrapper .gform_footer .gform_button {
	background: var(--nbcc-ink-deep);
	color: #fff;
	border: 0;
	border-radius: 100px;
	padding: 17px 30px;
	min-height: 44px;
	font: 800 var(--nbcc-fs-btn)/1 var(--nbcc-font-sans);
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .22s ease, box-shadow .22s ease;
}

.nbcc-formslot .gform_wrapper .gform_footer .gform_button:hover,
.nbcc-formslot .gform_wrapper .gform_footer .gform_button:focus {
	background: #243140;
	color: #fff;
}

/* On the navy prayer panel the dark pill would disappear, so it takes the
   design's lime primary instead. */
.nbcc-formslot--dark .gform_wrapper .gform_footer .gform_button {
	background: var(--nbcc-lime);
	color: var(--nbcc-ink-deep);
}

.nbcc-formslot--dark .gform_wrapper .gform_footer .gform_button:hover,
.nbcc-formslot--dark .gform_wrapper .gform_footer .gform_button:focus {
	background: var(--nbcc-lime);
	color: var(--nbcc-ink-deep);
}

/* Hover only, for the same reason as the giving button above: this selector is
   (0,4,1) and its box-shadow beat the focus ring's halo on the one form that
   sits on navy, which is exactly where the halo is doing the work. */
.nbcc-formslot--dark .gform_wrapper .gform_footer .gform_button:hover {
	box-shadow: 0 4px 12px rgba(157, 198, 63, .28);
}

.nbcc-formslot--dark .gform_wrapper .gfield_label { color: rgba(255, 255, 255, .6); }
.nbcc-formslot--dark .gform_wrapper .gfield_required { color: rgba(255, 255, 255, .45); }

.nbcc-formslot .gform_wrapper .gfield_required {
	font: 700 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-sans);
	letter-spacing: .09em;
}

.nbcc-formslot .gform_wrapper .gform_footer { margin-top: 4px; }

/* The prayer form sits on navy, so the same properties invert. */
.nbcc-formslot--dark .gform_wrapper {
	--gf-ctrl-bg-color: rgba(255, 255, 255, .06);
	--gf-ctrl-border-color: rgba(255, 255, 255, .2);
	--gf-ctrl-color: #ffffff;
	--gf-ctrl-label-color-primary: rgba(255, 255, 255, .6);
	--gf-ctrl-label-color-req: rgba(255, 255, 255, .45);
	--gf-ctrl-desc-color: rgba(255, 255, 255, .55);
	--gf-ctrl-btn-bg-color-primary: #9DC63F;
	--gf-ctrl-btn-bg-color-hover-primary: #a8d052;
	--gf-ctrl-btn-bg-color-focus-primary: #a8d052;
	--gf-ctrl-btn-color-primary: #16202b;
	--gf-ctrl-btn-color-hover-primary: #16202b;
	--gf-ctrl-btn-color-focus-primary: #16202b;
	--gf-ctrl-btn-border-color-focus-primary: #ffffff;

	/* The dropdown chevron is a data-URI SVG with the arrow colour baked in, so
	   the light-theme one is invisible on navy and has to be re-supplied. */
	--gf-ctrl-select-icon: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E");
}

.nbcc-formslot--dark .gform_wrapper .gfield_checkbox label,
.nbcc-formslot--dark .gform_wrapper .gform_confirmation_message { color: rgba(255, 255, 255, .78); }

.nbcc-formslot .gform_wrapper .gfield_checkbox input { accent-color: var(--nbcc-lime); width: 18px; height: 18px; }
.nbcc-formslot .gform_wrapper .gfield_checkbox label { font: 400 14px/1.5 var(--nbcc-font-sans); }

/* Long text fields must not inherit the 50px control height. */
.nbcc-formslot .gform_wrapper textarea { height: auto; min-height: 130px; padding-block: 14px; }

/* =============================================================================
   /ministries — the nbcc_ministry archive template
   ============================================================================= */

body .elementor .nbcc-minarch__inner { width: 100%; }
body .elementor .nbcc-mincards { width: 100%; }

body .elementor .nbcc-mincards__layout {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

@media (max-width: 900px) { body .elementor .nbcc-mincards__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { body .elementor .nbcc-mincards__layout { grid-template-columns: 1fr; } }

body .elementor .nbcc-mincards__item { min-width: 0; }

body .elementor .nbcc-mincard {
	border: 1px solid rgba(26, 36, 48, .11);
	overflow: hidden;
	text-decoration: none;
	width: 100%;
	height: 100%;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body .elementor .nbcc-mincard:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(13, 20, 28, .11);
}

body .elementor .nbcc-mincard__img {
	width: 100%;
	max-width: none;
	height: 230px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

body .elementor .nbcc-mincard__body  { width: 100%; }
body .elementor .nbcc-mincard__name  { font-size: clamp(21px, 2.6vw, 27px); margin-block-start: 12px; }
body .elementor .nbcc-mincard__blurb { margin-block-start: 10px; }

body .elementor .nbcc-mincard__more {
	margin-block-start: 18px;
	border-bottom: 2px solid var(--nbcc-lime);
	padding-bottom: 5px;
	width: auto;
	transition: color .2s ease;
}

body .elementor .nbcc-mincard:hover .nbcc-mincard__more { color: var(--nbcc-green); }

/* =============================================================================
   /events — the nbcc_event archive template
   ============================================================================= */

body .elementor .nbcc-evarch__inner { width: 100%; }
body .elementor .nbcc-evlist { width: 100%; }
body .elementor .nbcc-evlist__layout { display: flex; flex-direction: column; width: 100%; }

/* A hairline above every row plus one below the last, so the list reads as a
   closed block rather than trailing off. */
body .elementor .nbcc-evlist__item { width: 100%; border-top: 1px solid rgba(26, 36, 48, .15); }
body .elementor .nbcc-evlist__item:last-child { border-bottom: 1px solid rgba(26, 36, 48, .15); }

body .elementor .nbcc-evrow {
	width: 100%;
	transition: background .25s ease, padding-left .25s ease;
}

body .elementor .nbcc-evrow__date  { width: 58px; flex: none; }
body .elementor .nbcc-evrow__day   { font-size: clamp(28px, 4vw, 34px); }
/* The date stays BESIDE the title at 390, as the design has it. That is fixed
   by giving the row its full width (see the collection-loop padding rule
   below), NOT by letting the title column collapse: while the row still had a
   separate time column, `flex: 1 1 0` let that column hold the line and
   squeezed the title to 54px and twenty lines tall. The design's basis of
   240px is right once the row is 351px rather than 291px. (With a thumbnail
   the basis does drop to 0 at phone widths - see the /events rows block.) */
body .elementor .nbcc-evrow__main  { flex: 1 1 240px; min-width: 0; width: auto; }
body .elementor .nbcc-evrow__title { font-size: clamp(18px, 2.4vw, 24px); }

/* =============================================================================
   /ministries/:slug — the nbcc_ministry single template
   ============================================================================= */

body .elementor .nbcc-minhero {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: clamp(300px, 44vw, 440px);
}

/* The focal point is per-ministry data (the ACF `pos` field), emitted as a
   custom property in wp_head because object-position is neither an atomic prop
   nor knowable at stylesheet-authoring time. */
body .elementor .nbcc-minhero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--nbcc-ministry-pos, 50% 50%);
	display: block;
	border-radius: 0;
}

.nbcc-minhero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 29, 40, .1) 0%, rgba(20, 29, 40, .3) 22%, rgba(20, 29, 40, .97) 100%);
	pointer-events: none;
}

body .elementor .nbcc-minhero__inner {
	position: relative;
	z-index: 1;
}

body .elementor .nbcc-minhero__back    { margin-block-end: 18px; border-bottom: 0; padding-bottom: 0; }
body .elementor .nbcc-minhero__h1      { font-size: clamp(31px, 5.6vw, 64px); }
body .elementor .nbcc-minhero__tagline { margin-block-start: 16px; max-width: 620px; }

body .elementor .nbcc-minsing__inner { gap: clamp(36px, 5vw, 64px); }
body .elementor .nbcc-minsing__copy  { flex: 1.35 1 0; min-width: min(100%, 330px); }
body .elementor .nbcc-minsing__aside { flex: 1 1 0;    min-width: min(100%, 300px); }

body .elementor .nbcc-minsing__h2 { margin-block-end: 24px; }

/* The welcome line is optional; an empty heading must not leave a gap. */
body .elementor .nbcc-minsing__h2:empty { display: none; margin: 0; }

body .elementor .nbcc-minbody { width: 100%; }
body .elementor .nbcc-minbody p {
	font: 400 var(--nbcc-fs-body)/1.75 var(--nbcc-font-sans);
	color: var(--nbcc-muted);
	margin-bottom: 20px;
}

body .elementor .nbcc-minsing__list { width: 100%; }
body .elementor .nbcc-minsing__cta  { width: 100%; margin-block-start: 36px; }

/* Empty-state collapse: the list, the facts stack and the verse are all
   optional fields, and each shortcode returns an empty string when its field is
   unset. Without this the flex gap still reserves a slot for the nothing. */
body .elementor .nbcc-minsing__list:empty,
body .elementor .nbcc-minsing__facts:empty,
body .elementor .nbcc-minsing__verse:empty { display: none; }

.nbcc-minlist {
	margin-top: 14px;
	padding: clamp(22px, 4vw, 30px) clamp(22px, 4vw, 32px);
	background: var(--nbcc-lime-tint);
	border-radius: 12px;
}

.nbcc-minlist__title {
	display: block;
	font: 500 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nbcc-green);
}

.nbcc-minlist__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 600px) { .nbcc-minlist__items { grid-template-columns: 1fr; } }

.nbcc-minlist__item {
	display: flex;
	gap: 11px;
	font: 400 var(--nbcc-fs-body)/1.55 var(--nbcc-font-sans);
	color: var(--nbcc-muted);
}

.nbcc-minlist__mark { color: var(--nbcc-green); font-weight: 800; flex: none; }

.nbcc-minfacts {
	background: var(--nbcc-ink-deep);
	border-radius: 12px;
	padding: clamp(22px, 4vw, 30px);
	color: #fff;
}

.nbcc-minfacts__eyebrow {
	display: block;
	font: 500 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nbcc-lime);
}

.nbcc-minfacts__list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }

.nbcc-minfact {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 14px;
}

.nbcc-minfact__k {
	display: block;
	font: 500 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.nbcc-minfact__v {
	display: block;
	margin-top: 7px;
	font: 700 var(--nbcc-fs-body)/1.35 var(--nbcc-font-sans);
}

.nbcc-minverse { background: #f0f0eb; border-radius: 12px; padding: 28px 30px; }

.nbcc-minverse__eyebrow {
	display: block;
	font: 500 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nbcc-green);
}

.nbcc-minverse__text {
	display: block;
	margin-top: 14px;
	font: 700 20px/1.45 var(--nbcc-font-sans);
	color: var(--nbcc-ink);
}

body .elementor .nbcc-minsing__tile {
	width: 100%;
	max-width: none;
	height: 230px;
	object-fit: cover;
	display: block;
}

/* =============================================================================
   /events/:slug — the nbcc_event single template

   Layout is keyed off body classes from nbcc_event_body_classes(), because the
   builder cannot branch on whether an event has an image or body text. The DOM
   order is facts, image, body - the stacked order - and above 900px grid areas
   put the image left.
   ============================================================================= */

body .elementor .nbcc-evhero__h1     { margin-block-start: 18px; }
body .elementor .nbcc-evhero__lead   { margin-block-start: 18px; max-width: 620px; }
body .elementor .nbcc-evhero__lead:empty { display: none; }
body .elementor .nbcc-evhero__ended:not(:has(.nbcc-evended)) { display: none; }

/* The back link's arrow is decoration; `/ ""` keeps it out of the accessible
   name. 24px tall for WCAG 2.5.8. */
body .elementor .nbcc-evhero__back { display: inline-block; min-height: 24px; padding-block: 4px; }
.nbcc-evhero__back::before { content: "← " / ""; }

.nbcc-evended {
	margin: 22px 0 0;
	max-width: 620px;
	padding: 12px 16px;
	border-left: 3px solid var(--nbcc-lime);
	border-radius: 4px;
	background: rgba(157, 198, 63, .14);
	color: var(--nbcc-white);
	font: 500 var(--nbcc-fs-body)/1.5 var(--nbcc-font-sans);
}

.nbcc-evended__link { display: inline-block; min-height: 24px; color: var(--nbcc-lime); text-underline-offset: 3px; }
.nbcc-evended__link::after { content: " →" / ""; }

body .elementor .nbcc-evsing__inner { display: flex; flex-direction: column; gap: 28px; width: 100%; }
body .elementor .nbcc-evsing__facts:not(:has(.nbcc-minfacts)) { display: none; }
body.nbcc-event--no-image .elementor .nbcc-evsing__media { display: none; }
body.nbcc-event--no-body .elementor .nbcc-evsing__body  { display: none; }

/* Stacked, the image is capped so a portrait flyer does not fill two screens.
   The cap goes on the shortcode's inner wrapper, not the widget: Elementor's
   `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` is
   (0,4,0) and outranks any class rule on the widget itself. */
body .elementor .nbcc-evsing__media { width: 100%; }
body .elementor .nbcc-evsing__media > .elementor-shortcode { max-width: 480px; margin-inline: auto; }

@media (min-width: 901px) {
	body .elementor .nbcc-evsing__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		/* `auto 1fr`: a tall flyer's extra height goes to the body row, not
		   split between the two, which would open a gap under the panel. */
		grid-template-rows: auto 1fr;
		grid-template-areas: "media facts" "media body";
		column-gap: clamp(36px, 5vw, 64px);
		row-gap: 28px;
		align-items: start;
	}

	body .elementor .nbcc-evsing__facts { grid-area: facts; }
	body .elementor .nbcc-evsing__media { grid-area: media; }
	body .elementor .nbcc-evsing__media > .elementor-shortcode { max-width: none; margin-inline: 0; }
	body .elementor .nbcc-evsing__body  { grid-area: body; }

	body.nbcc-event--no-body .elementor .nbcc-evsing__inner {
		grid-template-rows: auto;
		grid-template-areas: "media facts";
	}

	body.nbcc-event--no-image .elementor .nbcc-evsing__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "body facts";
	}

	body.nbcc-event--no-image.nbcc-event--no-body .elementor .nbcc-evsing__inner {
		grid-template-columns: minmax(0, 480px);
		grid-template-areas: "facts";
	}
}

.nbcc-evsing__card {
	background: var(--nbcc-white);
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 5px 13px rgba(13, 20, 28, .09);
}

/* Contained, never cropped: a flyer's text runs to its edges. */
body .elementor .nbcc-evsing__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 4px;
}

.nbcc-evsing__full {
	display: inline-block;
	min-height: 24px;
	margin-top: 12px;
	padding-block: 4px;
	font: 500 var(--nbcc-fs-eyebrow)/1.3 var(--nbcc-font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nbcc-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The facts panel reuses the ministry panel; these are the event-only parts.
   Its "When & where" label is an h2 here (it heads the panel), so the kit's
   heading type and margins are restated away. */
body .elementor .nbcc-minfacts--event .nbcc-minfacts__eyebrow {
	margin: 0;
	font: 500 var(--nbcc-fs-eyebrow)/1 var(--nbcc-font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nbcc-lime);
}

.nbcc-minfacts--event .nbcc-minfacts__list { margin: 20px 0 0; }
.nbcc-minfacts--event .nbcc-minfact__v     { margin: 0; }

.nbcc-minfact__s {
	display: block;
	margin-top: 3px;
	font: 400 var(--nbcc-fs-body)/1.35 var(--nbcc-font-sans);
	color: rgba(255, 255, 255, .7);
}

.nbcc-evfacts__map {
	display: block;
	width: fit-content;
	min-height: 24px;
	margin-top: 4px;
	padding-block: 4px;
	font: 500 13px/1.3 var(--nbcc-font-sans);
	color: var(--nbcc-lime);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nbcc-evfacts__map::after { content: " ↗" / ""; }

/* Our own visually-hidden class: this theme styles core's .screen-reader-text
   only on the skip link, so relying on it would depend on the parent theme. */
.nbcc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Shortcode-emitted, so it cannot inherit pill()'s widget settings - the
   primary pill is restated here, as for .nbcc-giveform__btn. Keep in step
   with nbcc_ui.pill("primary"). */
body .elementor .nbcc-evfacts__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
	border-radius: 100px;
	padding: 17px 30px;
	background: var(--nbcc-lime);
	color: var(--nbcc-ink-deep);
	font: 800 var(--nbcc-fs-btn)/1 var(--nbcc-font-sans);
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Links on this page need the `body .elementor` prefix like everything else:
   Elementor's `.elementor a { text-decoration: none }` strips the underlines,
   and Hello's `a:hover { color: #336 }` turned the lime links navy-on-navy
   (1.42:1) on hover. The ended link sits inside a sentence, so its underline is
   the only thing, besides colour, that marks it as a link (WCAG 1.4.1). */
body .elementor .nbcc-evfacts__map,
body .elementor .nbcc-evended__link,
body .elementor .nbcc-evsing__full {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .elementor .nbcc-evfacts__map:hover,
body .elementor .nbcc-evended__link:hover { color: var(--nbcc-white); }
body .elementor .nbcc-evsing__full:hover  { color: var(--nbcc-ink); }

/* The pill has no border, so in forced-colours mode it would read as text. */
@media (forced-colors: active) {
	body .elementor .nbcc-evfacts__btn { border: 1px solid ButtonText; }
}

@media (min-width: 601px) and (max-width: 900px) {
	.nbcc-minfacts--event .nbcc-minfacts__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 24px;
	}

	/* Location, when it is the odd row out, spans both columns. */
	.nbcc-minfacts--event .nbcc-minfact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	body .elementor .nbcc-evfacts__btn { display: flex; width: 100%; }
}

/* =============================================================================
   /events rows: thumbnail, range line, whole-row link
   ============================================================================= */

/* Both are optional: an empty one would still take a slot in the column's
   flex gap and push the location down. */
body .elementor .nbcc-evrow__range:empty,
body .elementor .nbcc-evrow__desc:empty { display: none; }

/* The location link sits with the lines above it. The site-wide
   `.nbcc-textlink { margin-block-start: 28px }` is for a link closing a block
   of copy, and here it left the location 34px under the description. */
body .elementor .nbcc-evrow .nbcc-textlink { margin-block-start: 6px; }

/* The location's hover colour has to live here: inside the atomic loop each
   row renders the icon-list under a fresh element id, so the widget's own
   hover setting (scoped to its original id) never matches. The site-wide
   `.nbcc-textlink:hover` colours the <a>, not the text span inside it. */
body .elementor .nbcc-evrow .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--nbcc-green); }

/* pointer-events: none so a click on the thumbnail falls through to the
   title's stretched link, like the rest of the row. */
body .elementor .nbcc-evrow__thumbcell { flex: none; width: auto; align-self: center; pointer-events: none; }
body .elementor .nbcc-evrow__thumbcell:not(:has(img)) { display: none; }

/* A fixed slot on the lime tint, the image contained inside it: a flyer and a
   landscape photo both fit whole, and rows with and without one line up. */
body .elementor .nbcc-evrow__thumb {
	display: block;
	box-sizing: border-box;
	width: 96px;
	height: 124px;
	max-width: none;
	padding: 6px;
	object-fit: contain;
	background: var(--nbcc-lime-tint);
	border-radius: 6px;
}

/* The title's link covers the row. The row cannot be one <a>: it holds the
   Maps link, and links do not nest. */
body .elementor .nbcc-evrow { position: relative; }
body .elementor .nbcc-evrow__title a { color: inherit; text-decoration: none; }
body .elementor .nbcc-evrow__title a::after { content: ""; position: absolute; inset: 0; }
body .elementor .nbcc-evrow .elementor-icon-list-item a { position: relative; z-index: 1; }

/* Hover and title focus share one state. The title keeps the site focus ring;
   :focus-within is not used because it would also fire for the Maps link. */
body .elementor .nbcc-evrow:hover,
body .elementor .nbcc-evrow:has(.nbcc-evrow__title a:focus-visible) {
	background: var(--nbcc-lime-tint);
}

@media (max-width: 900px) {
	body .elementor .nbcc-evrow__thumb { width: 80px; height: 104px; }
}

@media (max-width: 600px) {
	body .elementor .nbcc-evrow__thumbcell { align-self: flex-start; }
	body .elementor .nbcc-evrow__thumb { width: 64px; height: 84px; }

	/* 58 + 240 + 64 + gaps does not fit a 351px row, so with a thumbnail the
	   title column gives up its 240px basis instead of wrapping the image. */
	body .elementor .nbcc-evrow:has(.nbcc-evrow__thumb) .nbcc-evrow__main { flex: 1 1 0; min-width: 0; }
}

/* More ministries ----------------------------------------------------------- */

body .elementor .nbcc-others__inner { width: 100%; }
body .elementor .nbcc-othergrid { width: 100%; }

body .elementor .nbcc-othergrid__layout {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}

@media (max-width: 900px) { body .elementor .nbcc-othergrid__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { body .elementor .nbcc-othergrid__layout { grid-template-columns: 1fr; } }

body .elementor .nbcc-othergrid__item { min-width: 0; }

body .elementor .nbcc-othercard {
	text-decoration: none;
	width: 100%;
	height: 100%;
	transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

body .elementor .nbcc-othercard:hover {
	background: var(--nbcc-lime-tint);
	transform: translateY(-2px);
	box-shadow: 0 5px 13px rgba(13, 20, 28, .09);
}

/* -----------------------------------------------------------------------------
   Mobile corrections, found by capturing at 390 rather than reasoning about it.
   -------------------------------------------------------------------------- */

/* =============================================================================
   Home: the closing "You're invited" band

   Added in session 5. The prototype's home page has nine bands and the build
   had eight; this one was missed, so the page ended on the give/prayer split
   with no final call to action.
   ============================================================================= */

body .elementor .nbcc-invite {
	position: relative;
	min-height: clamp(320px, 42vw, 420px);
	overflow: hidden;
}

/* Same treatment as the hero photograph: a real <img> so it carries alt text,
   with e-image putting our class on the <img> itself. */
body .elementor .nbcc-invite__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 22%;
	display: block;
	border-radius: 0;
}

/* 90deg, not the hero's 180deg. The copy sits in a 560px column on the left,
   so the scrim runs across rather than down and the greeter stays visible. */
.nbcc-invite::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 29, 40, .92) 0%, rgba(20, 29, 40, .5) 55%, rgba(20, 29, 40, .15) 100%);
	pointer-events: none;
}

body .elementor .nbcc-invite__inner { position: relative; z-index: 1; width: 100%; }
body .elementor .nbcc-invite__copy  { max-width: 560px; }
body .elementor .nbcc-invite .nbcc-eyebrow { margin-block-end: 16px; }
body .elementor .nbcc-invite__body { margin-block: 18px 28px; }

/* =============================================================================
   Collection loops: no base padding on the wrappers

   A v4 collection loop nests TWO containers between the section's inner column
   and each item - the loop itself and its layout container - and both carry the
   atomic base padding of 10px per side, as does the item. On /events at a 390px
   viewport that took the event row from 351px down to 291px, 59px narrower than
   the design's row, which is what pushed the date above the title and made the
   page run 20% long. The site-wide gutter was correct the whole time; the
   padding was compounding three levels below it.

   We never want this padding anywhere: a loop is a layout wrapper and its
   spacing is the grid gap. Scoped under `.elementor` so it beats the base
   class, which is a single class and would otherwise win on load order.
   ============================================================================= */

body .elementor .e-collection-loop-base,
body .elementor .e-collection-loop-layout-base,
body .elementor .nbcc-evlist__item { padding-inline: 0; }


/* ---------------------------------------------------------------------------
   Live now.

   Added by initLive() in nav.js only when the church is actually broadcasting,
   so none of this is in the DOM on an ordinary day. The dot animation is
   inside the reduced-motion opt-out with every other animation on the site.
   --------------------------------------------------------------------------- */
body .elementor .nbcc-player__live {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #b3261e;
	color: var(--nbcc-white);
	font-family: var(--nbcc-font-mono);
	font-size: var(--nbcc-fs-eyebrow);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
}

/* #b3261e on white is 5.7:1, and the label sits on the badge itself rather
   than on the photograph behind it, so the contrast is deterministic instead
   of depending on which frame the thumbnail happens to show. */
body .elementor .nbcc-player__live::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nbcc-white);
	animation: nbcc-live-pulse 1.6s ease-in-out infinite;
}

@keyframes nbcc-live-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
	body .elementor .nbcc-player__live::before { animation: none; }
}

/* The home page's badge is a link label, not a player, so it gets the same
   red treatment without the absolute positioning the facade pill needs. */
body .elementor .nbcc-sermon__badgetext.is-live {
	background: #b3261e;
	color: var(--nbcc-white);
	padding: 6px 12px;
	border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   An explicit focus ring, rather than the browser's.

   Every interactive element on this site was relying on the user agent's
   default focus ring, which mostly worked and quietly did not on the bare
   `<a href="mailto:...">` in the Contact details: it matches :focus-visible
   and something upstream still zeroes its outline-style.

   Relying on a browser default for a WCAG 2.4.7 requirement is fragile in any
   case - it varies by browser, and any upstream `outline: none` silently wins.
   Declaring it here makes the ring ours.

   TWO COLOURS, AND THAT IS THE WHOLE POINT. This rule used to read
   `outline: 2px solid currentColor` with the same 2px offset, on the reasoning
   that the ring "then contrasts with its own background wherever it lands,
   because the text already does". The offset is what defeats that: it moves the
   ring OFF the element's own background and onto its ancestor's, which nothing
   ever measured it against. A white-on-navy pill sitting on a white card gets a
   white ring on white.

   Measured 2026-09-05, before this change, resolving Elementor v4's degenerate
   gradients rather than reading `backgroundColor`:

     .gform_button   Contact "Send Message"   #ffffff on #ffffff     1:1
     .gform_button   Prayer, on navy          #16202b on #16202b     1:1
     .nbcc-btn--primary  x3, home             #16202b on #1a2430     1.05:1
     .nbcc-btn--dark     home                 #ffffff on #fbfaf7     1.04:1

   Eleven elements in all, and the two worst were the home page's primary call
   to action and the contact form's submit. `audit-a11y.py` reported all 952
   focusable elements as ringed throughout, because it checks that an outline is
   DECLARED and never what colour it is.

   No single palette colour fixes it: nothing in this system clears 3:1 against
   both #fbfaf7 and #16202b (green manages 5.55 and 2.89, lime 1.98 and 8.09).
   So the indicator is an ink ring inside a white halo. On a light surface the
   ink ring carries it; on a dark one the halo does. Both are palette values and
   the pair works on every background this site has.

   :focus-visible, so a mouse click does not paint a ring the way :focus would.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--nbcc-ink) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px var(--nbcc-white) !important;
}

/* THE ONE !important IN THIS FILE THAT IS NOT ABOUT A BREAKPOINT, and it is
   deliberate. Everywhere else the rule is that a widget setting should win,
   because a sidebar control that does nothing is the defect this theme spent a
   whole refactor removing. A focus indicator is the exception: it is an
   accessibility floor, not a design decision, and a component that paints over
   it is a bug rather than a preference.

   Without it the halo loses at (0,1,1) to any widget that emits a box-shadow
   prop at (0,2,0) - including the transparent `rgba(0,0,0,0) 0 0 0` that several
   of the ghost buttons carry, which is not a design intent so much as a default
   riding along. Measured on the first pass of this fix: nine elements across
   four routes kept an ink-on-navy ring at 1.34:1 because their own transparent
   shadow beat the halo. */

/* Gravity Forms' required asterisk on the dark prayer form measured 4.11:1
   against #222b36, just under AA. The form renders in LEGACY markup, so the
   --gf-ctrl-* custom properties do not reach it and this has to be a direct
   rule on the legacy class name. */
.nbcc-formslot--dark .gform_wrapper .gfield_required,
.nbcc-formslot--dark .gform_wrapper .gfield_required_asterisk {
	color: #9aa0a6;
}

/* ---------------------------------------------------------------------------
   Interac e-transfer card on /give.

   Added 2026-09-03 at Marcus's request, with the church's own wording and the
   official mark he supplied. Sits under the online giving card in the left
   column, because it is a giving METHOD and not a footnote about one.
   --------------------------------------------------------------------------- */
body .elementor .nbcc-etransfer__logo {
	width: 160px;
	max-width: 100%;
	height: auto;
}

/* The address is long enough to overflow a narrow card, and an email address
   is one of the few strings where a mid-word break is acceptable and a
   horizontal scrollbar is not.

   Three overrides on the shared textlink, all scoped to this card so no other
   link on the site moves. `.nbcc-textlink` carries `margin-top: 28px` for
   standalone links, which here opened a 35px hole between "SEND TO" and the
   address it labels. It also uppercases, which is wrong for an email address:
   it reads as shouting, and it invites someone to retype it in caps. And 12.5px
   is small for a string people have to copy into their banking app. */
body .elementor .nbcc-etransfer__addr {
	overflow-wrap: anywhere;
	line-height: 1.4;
	margin-top: 0;
}
/* Background-only widget; the atomic root and overlay keep their layout. */
body .elementor .nbcc-hero [data-id="nbcc-hero-media"].nbcc-hero__media { position:absolute; inset:0; width:100%; height:100%; min-height:0; overflow:hidden; pointer-events:none; z-index:0; }
.nbcc-hero__still { position:absolute; inset:0; display:none; background-size:cover; background-position:50% 42%; background-repeat:no-repeat; z-index:2; }
.nbcc-hero__media--still .nbcc-hero__still { display:block; }
.nbcc-hero__media--playing .nbcc-hero__still { display:none; }
.nbcc-hero__player { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:none; opacity:0; pointer-events:none; border:0; z-index:3; }
.nbcc-hero__media--playing .nbcc-hero__player { opacity:1; }
.nbcc-hero--video::after { background:linear-gradient(180deg,rgba(20,29,40,.88) 0%,rgba(20,29,40,.92) 22%,rgba(20,29,40,.97) 100%); }
@media (min-width: 1025px) {
	.nbcc-hero--video::after {
		background: linear-gradient(180deg, rgba(20,29,40,.12) 0%, rgba(20,29,40,.20) 20%, rgba(20,29,40,.86) 38%, rgba(20,29,40,.92) 65%, rgba(20,29,40,.97) 100%);
	}
}
body .elementor .nbcc-hero__motion { position:absolute; inset:16px 16px auto auto; z-index:2; min-width:44px; min-height:44px; padding:10px 14px; border:1px solid #fff; border-radius:0; background:#141d28; color:#fff; font:600 12px Archivo,sans-serif; cursor:pointer; }
body .elementor .nbcc-hero__motion:hover { background:#263545; color:#fff; }
body .elementor .nbcc-hero__motion:focus-visible { outline:3px solid #9dc63f; outline-offset:3px; }
body .elementor .nbcc-hero__motion[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .nbcc-hero__media .elementor-background-slideshow { visibility:hidden; } }
.nbcc-hero__media .elementor-widget-container { height:100%; }
.nbcc-hero__initial { position:absolute; inset:0; background-size:cover; background-position:50% 42%; background-repeat:no-repeat; }
.nbcc-hero__media .elementor-background-slideshow { z-index:1; }
/* Native Swiper8 base/fade rules are missing on this mixed atomic page. */
.nbcc-hero__media .elementor-background-slideshow .swiper-wrapper { position:relative; width:100%; height:100%; z-index:1; display:flex; transition-property:transform; box-sizing:content-box; transform:translate3d(0,0,0); }
.nbcc-hero__media .elementor-background-slideshow .swiper-slide { flex-shrink:0; width:100%; height:100%; position:relative; transition-property:transform; }
.nbcc-hero__media .elementor-background-slideshow.swiper-fade .swiper-slide { pointer-events:none; transition-property:opacity; }
.nbcc-hero__media .elementor-background-slideshow__slide__image { height:100%; background-position:50% 42%; background-size:cover; }