/*
 Theme Name:   BAUUC TT25 Child
 Description:  BAUUC church website child theme built on Twenty Twenty-Five
 Author:       Cam Bevis
 Template:     twentytwentyfive
 Version:      1.16.2
 Text Domain:  tt25-bauuc-child
*/

/* =====================================================================
   BAUUC — Sticky black nav + bottom-left full-bleed hero (Elevation v2)
   ===================================================================== */

/* ---- 1. Sticky black header, no seam ---- */
.site-nav {
	position: sticky;
	top: 0;
	z-index: 100;
}
header.wp-block-template-part {
	border-bottom: none;
	box-shadow: none;
	margin-block: 0; /* no gap above/below the nav */
}

/* ---- 2. Left cluster: drawer toggle + logo spacing ---- */
.site-nav__left {
	gap: 14px;
}
.site-nav__logo {
	margin: 0;
}

/* ---- 3. Search: magnifier toggle + full-screen overlay ----
   The top-bar search pill is gone (it out-shouted the logo and read
   "reference library"). A magnifier button in the right cluster opens a
   fixed overlay holding the core search block; site.js handles the toggle,
   focus, Esc, and backdrop-click close. */
.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}
.search-toggle:hover,
.search-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	background: rgba(11, 17, 32, 0.96);
	padding-top: min(14vh, 110px);
	padding-inline: 24px;
}
.search-overlay.is-open {
	display: block;
}
body.search-overlay-open {
	overflow: hidden;
}
.search-overlay__close {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}
.search-overlay__close:hover,
.search-overlay__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}
.search-overlay .wp-block-search__inside-wrapper {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.06);
	padding: 6px 10px 6px 20px;
}
.search-overlay .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--white);
	font-size: 1.15rem;
	padding: 8px 0;
}
.search-overlay .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}
.search-overlay .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 0;
	padding: 0 12px;
}

/* Instant Search Results Container */
.search-overlay__results {
	margin-top: 1.25rem;
	max-height: calc(85vh - 170px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.search-overlay__results::-webkit-scrollbar {
	width: 6px;
}
.search-overlay__results::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 3px;
}
.search-overlay__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 4px 8px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 8px;
}
.search-overlay__count {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 600;
}
.search-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.search-overlay__item {
	margin: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.search-overlay__item:hover,
.search-overlay__item.is-selected {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.3);
}
.search-overlay__item-link {
	display: block;
	padding: 12px 16px;
	text-decoration: none;
	color: inherit;
}
.search-overlay__item-link:hover,
.search-overlay__item-link:focus {
	text-decoration: none;
	outline: none;
}
.search-overlay__item-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
.search-overlay__badge {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	line-height: 1.2;
}
.search-overlay__badge--page {
	background: rgba(122, 155, 219, 0.25);
	color: var(--wp--preset--color--primary, #7a9bdb);
}
.search-overlay__badge--event {
	background: rgba(255, 238, 88, 0.2);
	color: var(--wp--preset--color--accent-1, #FFEE58);
}
.search-overlay__badge--post {
	background: rgba(246, 207, 244, 0.25);
	color: var(--wp--preset--color--accent-2, #F6CFF4);
}
.search-overlay__item-eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
}
.search-overlay__item-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 3px 0;
	line-height: 1.3;
}
.search-overlay__item-snippet {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.search-overlay__highlight {
	background: transparent;
	color: var(--wp--preset--color--primary, #7a9bdb);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.search-overlay__empty {
	padding: 24px;
	text-align: center;
	color: rgba(255, 255, 255, 0.65);
	font-size: 1rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 8px;
	border: 1px dashed rgba(255, 255, 255, 0.15);
}
.search-overlay__footer {
	display: flex;
	justify-content: flex-end;
	padding: 10px 4px 4px 4px;
}
.search-overlay__hints {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.04em;
}
@media (max-width: 600px) {
	.search-overlay__hints {
		display: none;
	}
	.search-overlay {
		padding-top: 70px;
		padding-inline: 16px;
	}
}

/* ---- 4. Nav links: force white in every state (kills visited-purple) ---- */
.site-nav__links {
	color: var(--wp--preset--color--white);
	flex-wrap: nowrap;
}
.site-nav a,
.site-nav a:link,
.site-nav a:visited,
.site-nav a:hover,
.site-nav a:focus {
	color: var(--wp--preset--color--white);
}

/* ---- 4a. Current page: light-blue highlight (block nav sets aria-current) -- */
.site-nav__links a[aria-current="page"],
.site-nav__links .current-menu-item > a,
.site-nav__links .wp-block-navigation-item.current-menu-item a {
	color: var(--wp--preset--color--primary) !important;
}

/* ---- 4b. Hamburger overlay: black panel, white links, visible close ---- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--header-footer) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white) !important;
}
.wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	opacity: 1;
}
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* ---- 5. Hero: flush full-bleed, bottom-left content ---- */
/* Kill the inter-section block-gap entirely. The slate body background
   (#394467, set by a Global Styles override) otherwise shows as a band in
   every 1.2rem gap — above the nav, below the hero, and around content.
   Zeroing the margins on the four top-level sections removes all bands
   regardless of the body color. */
.wp-site-blocks {
	padding-top: 0 !important;
}
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .hero,
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block: 0 !important;
}
.hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 64px);
	padding-bottom: clamp(32px, 6vh, 72px);
}
.hero__content {
	text-align: left;
}
/* Shared hero formula: eyebrow → sentence-case title → excerpt subhead.
   Eyebrow appearance lives in the registered "Eyebrow" paragraph style
   (styles/eyebrow.json → .is-style-bauuc-eyebrow); here only the hero
   mechanics: empty meta (no eyebrow set) = hidden. */
.hero__eyebrow:empty {
	display: none;
}
.hero__excerpt p {
	max-width: 560px;
	margin-top: 0.5em;
}
/* Interior heroes: one height, one anchor (bottom-left, like home at a
   smaller scale). Clamp beats the template's inline 50vh fallback. Phones stop
   here; desktop overrides the height below (see the 782px rule). */
.hero--page {
	min-height: clamp(380px, 50vh, 560px) !important;
}

/* Desktop hero height from WIDTH, not viewport height.
   The clamp above derives height from 50vh, but crop severity is a width:height
   ratio problem — so a short 1920x800 window (4.8:1) crops HARDER than a 2560px
   monitor, and the focal point below is left choosing between slivers. 32vw
   holds the band near a stable ~3.1:1 from 1280px up, floored so small laptops
   keep a real hero and capped so an ultrawide doesn't push the first body
   section off the fold. Same reasoning as the event hero's aspect-ratio pin
   (see "Event hero" near the end of this file), now applied to featured-image
   heroes too.
   Phones keep 50vh deliberately: below ~1.5:1 the box is TALLER than a typical
   photo, so the crop turns horizontal and mild, and a width-derived height would
   be a letterbox slot on a 390px screen. */
@media (min-width: 782px) {
	.hero--page {
		min-height: clamp(420px, 32vw, 700px) !important;
	}
}

/* Hero crop anchor. Core renders the featured image as an object-fit: cover
   <img> with no object-position, so the crop is dead centre — which slices the
   back row's heads off in the wide, short band a desktop produces. Editors set
   the anchor per page ("Hero image focus" sidebar panel) and
   inc/hero-focal-point.php prints --bauuc-hero-focal in wp_head; pages that set
   nothing print nothing and keep the centred crop.
   cover applies object-position only to the axis that actually overflows, so a
   single stored value serves every breakpoint: X steers the crop on phones
   (box taller than the photo), Y steers it on desktop (box wider). */
.hero > .wp-block-cover__image-background {
	object-position: var(--bauuc-hero-focal, 50% 50%);
}

/* Image band: a slim strip of the featured image (page-band.html), title
   overlaid bottom-left. No excerpt — there's no room and it's not the point.
   Crop defaults to centre but honours the same per-page "Hero image focus"
   anchor as .hero--page (the rule above is scoped to .hero, not .hero--page),
   so band pages no longer need a pre-cropped upload. Text-shadow comes from
   .hero above; the scrim does NOT — see §6a. */
.hero--band {
	min-height: 240px !important;
}

/* Desktop: same disease as .hero--page, milder dose. A fixed 240px drifts from
   6.2:1 at 1476px to 10.7:1 at 2560px — the flattest thing on the site. 16vw
   holds it near a constant ~6:1 so the strip stays a strip instead of thinning
   as the monitor widens. Half the page hero's 32vw on purpose: this is meant to
   read as a band, not a second hero. */
@media (min-width: 782px) {
	.hero--band {
		min-height: clamp(240px, 16vw, 400px) !important;
	}
}
.hero__content .wp-block-post-title,
.hero__content h1,
.hero__content .wp-block-post-excerpt,
.hero__content p {
	text-align: left;
}

/* Fallback bg when a page has no Featured Image (sits behind the cover image). */
.hero {
	background-color: var(--wp--preset--color--header-footer);
}

/* Home hero fills the viewport. The inline min-height (100vh) is the fallback;
   svh tracks the *small* viewport so mobile address-bar chrome can't push the
   hero past the fold. */
.hero--home {
	min-height: 100vh !important;
	min-height: 100svh !important;
}
/* Logged-in preview: WP adds a 32px top margin for the admin bar, so a full
   100vh hero overshoots the fold by that much and the scroll chevron lands
   just below the viewport. Subtract the admin-bar height here (public
   visitors, who have no admin bar, keep the plain 100vh/svh above). */
body.admin-bar .hero--home {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)) !important;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)) !important;
}

/* Legibility shadow on hero text. */
.hero .wp-block-post-title,
.hero .wp-block-post-excerpt,
.hero h1,
.hero__content p {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* ---- 6. Bottom-up gradient scrim (replaces the flat dim) ----
   Keeps faces bright in the upper photo while guaranteeing the bottom-left
   text block reads. Also softens the hero→section seam: the scrim bottoms
   out near the header-footer navy the next band starts with. */
.hero > .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(
		to top,
		rgba(9, 13, 22, 0.94) 0%,
		rgba(9, 13, 22, 0.55) 34%,
		rgba(9, 13, 22, 0.12) 62%,
		rgba(9, 13, 22, 0) 82%
	) !important;
}

/* ---- 6a. Band scrim: the same idea, re-tuned for a quarter of the height ----
   §6's stops are proportions, not pixels, so on the 240px band that gradient
   only clears at 82% — roughly 197px of 240px under the wash, leaving ~43px of
   clean photo at the top. Tuned for a 380–560px hero, it swallows a strip.
   The band still needs *a* scrim (white title, bottom-left, over an arbitrary
   photo — a pale wall or window would otherwise fail contrast), so this keeps
   the same navy and the same bottom-up direction, just shallower and lighter
   through the middle: clear by 55%, so the top ~45% of the strip reads as
   photograph. Must come after §6 — equal specificity, both !important. */
.hero--band > .wp-block-cover__background {
	background: linear-gradient(
		to top,
		rgba(9, 13, 22, 0.88) 0%,
		rgba(9, 13, 22, 0.4) 30%,
		rgba(9, 13, 22, 0) 55%
	) !important;
}

/* ---- 7. One button system, site-wide ----
   Primary = filled primary-blue pill, secondary = white outline pill.
   The static declarations (pill radius, padding, fill/outline colors) live
   in theme.json (styles.blocks.core/button + variations); only the hover
   inversions and transitions — which theme.json can't express — stay here.
   The header Give pill (white) is the deliberate lone exception — its own
   override in §9c/§10 beats these. */
.is-style-fill .wp-block-button__link,
.is-style-outline .wp-block-button__link {
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}
.is-style-fill .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

/* ---- 8. Smooth scroll + scroll-arrow ---- */
html {
	scroll-behavior: smooth;
}
/* Bottom-centre chevron cue. Positioning lives on the wrapper (translateX
   centring); the pulse animation lives on the link so its translateY doesn't
   clobber the centring transform. */
.hero-scroll-arrow {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 3vh, 30px);
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
}
.hero-scroll-arrow a {
	display: block;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	pointer-events: auto;
	animation: hero-arrow-pulse 2s ease-in-out infinite;
}
.hero-scroll-arrow svg {
	display: block;
}
@keyframes hero-arrow-pulse {
	0%,
	100% {
		opacity: 1;
		transform: translateY(0);
	}
	50% {
		opacity: 0.3;
		transform: translateY(8px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-scroll-arrow a {
		animation: none;
	}
}

/* ---- 9. Responsive ---- */
@media (max-width: 1024px) {
	.site-nav__links {
		display: none;
	} /* the nav drawer carries the nav on small screens */
}

/* ---- 9a. Give button: graceful mobile degrade ----
   The fill button's 1.7em horizontal padding plus the 24px right-cluster
   gap is fine at desktop widths, but once the 150px logo + drawer toggle
   share the row on phones there isn't enough room and the flex item
   shrinks below the label's width, wrapping "Give" onto two lines. Keep
   the label on one line always, and tighten padding/gap/logo size below
   480px so everything still fits instead of wrapping or overflowing. */
.site-nav__give .wp-block-button__link {
	white-space: nowrap;
}
@media (max-width: 480px) {
	.site-nav__right {
		gap: 12px !important;
	}
	.site-nav__give .wp-block-button__link {
		padding-left: 1em;
		padding-right: 1em;
		font-size: 0.9rem;
	}
	.site-nav__logo img {
		width: 120px !important;
	}
}

/* =====================================================================
   10. Transparent nav treatment  —  THE SWITCH
   In front-page.html, the header part carries className "nav--transparent":
       <!-- wp:template-part {"slug":"header","tagName":"header",
            "className":"nav--transparent"} /-->
   • KEEP that className  → nav overlays the hero video (transparent).
   • DELETE ,"className":"nav--transparent"  → opaque navy bar (default look).
   Nothing else to change. The rules below only fire when the class is present.

   No-JS trade-off: the overlay nav is absolutely positioned, so it scrolls
   away with the hero rather than sticking. A sticky *transparent* nav would
   leave white links invisible over the light content below without a JS
   scroll-state background swap.
   ===================================================================== */

/* Lift the header out of flow so the hero rises to the top behind it. */
.nav--transparent.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
/* When the WP admin bar is present (logged-in preview only), offset the nav
   so it doesn't hide behind it. Non-admin visitors are unaffected. */
body.admin-bar .nav--transparent.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Drop the navy background; override the block's has-background utility, and
   cancel the sticky positioning so the absolute header owns placement.
   Also zero the alignfull break-out margins: the header is already full
   viewport width once absolute, so the default negative margins (which factor
   in scrollbar width via vw) would push the nav past the right edge and clip
   the last nav link. */
.nav--transparent .site-nav,
.nav--transparent .site-nav.has-background,
.nav--transparent .wp-block-group.alignfull.site-nav {
	position: static;
	background-color: transparent !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: visible !important;
}

/* Readability scrim: a soft top-down shade so the white logo and links hold
   up over bright video frames, fading to nothing below the nav. */
.nav--transparent.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.5),
		rgba(0, 0, 0, 0)
	);
	pointer-events: none;
}

/* =====================================================================
   11. Split Content Card Mobile Layout (Image Right Stacks on Top)
   ===================================================================== */

@media (max-width: 781px) {
	.bauuc-split-card.bauuc-split-card--image-right > .wp-block-columns {
		display: flex !important;
		flex-direction: column-reverse !important;
		gap: 24px !important;
	}
	.bauuc-split-card.bauuc-split-card--image-right .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* ---- 12. Full Width Image Utilities ---- */
.bauuc-stretch-img img {
	width: 100% !important;
	height: auto !important;
}

/* ---- 13. Fix: Ensure strong/b elements are actually bold (700) ---- */
strong,
b {
	font-weight: 700;
}

/* ---- 14. Fix: MEC calendar month header — override plugin's hardcoded dark grey ---- */
/* MEC's frontend.min.css sets .mec-calendar .mec-calendar-header h2 { color: #333 }
   which is illegible against the dark header-footer body background (#151e31).
   This overrides it to white to match the site's heading colour. */

.mec-calendar .mec-calendar-header h2 {
	color: var(--wp--preset--color--white) !important;
}
/* ---- 15. Fix: Editor canvas nav z-index — unblock the block toolbar ---- */
/* .site-nav z-index:100 covers the floating block toolbar in the editor.
   The admin body class scopes this to the editor only; frontend is unaffected. */

.wp-admin .site-nav {
	z-index: auto;
}

/** ---- 16. Fix: Center inline SVG wrappers inside block editor layouts ---- */
/**
 * Center inline SVG wrappers inside block editor layouts
 */
.fse-icon-wrapper {
	display: flex;
	justify-content: center; /* Horizontally center */
	align-items: center; /* Vertically center */
	width: 100%; /* Stretch across the Gutenberg column */

	/* Global Color Config */
	color: var(--wp--preset--color--primary); /* Default icon stroke color */
	transition:
		color 0.3s ease,
		transform 0.3s ease; /* Smooth fade and movement */
}

/* Hover state triggered when mouse interacts with the icon wrapper */
.fse-icon-wrapper:hover {
	color: var(--wp--preset--color--white); /* Transitions to crisp white on hover */
	transform: translateY(-3px); /* Subtle nudge upward for visual feedback */
}
/* Modifier class to left-align the icon instead of centering it */
.fse-icon-wrapper.is-left-aligned {
	justify-content: flex-start; /* Overrides center alignment to align left */
}

/* ---- 17. Justice page: consistent image-first stacking on mobile ---- */
/* The core Columns block stacks in DOM order on mobile. The Mental Health and
   Sustainability sections lead with their image column (image-on-top), but the
   LGBTQIA+ section leads with its text column (image-right at desktop), which
   would stack text-first. Reverse just that section so every feature section
   leads with the image on mobile. Mirrors the column-reverse approach in #12
   above; desktop left/right alternation is untouched. */
@media (max-width: 781px) {
	#lgbtqia > .wp-block-columns {
		display: flex;
		flex-direction: column-reverse;
	}
	#lgbtqia > .wp-block-columns > .wp-block-column {
		flex-basis: 100%;
		width: 100%;
	}
}

/* ---- 17a. Section kit: abutting full-bleed bands, no seam ---- */
/* The global block gap (1.2rem, inherited from TT25) puts a top margin on every
   post-content child, so between two coloured full-width sections the body's
   header-footer colour shows through as a thin bar. Kit sections carry their
   own padding, so band-to-band they butt flush. Scoped to adjacent coloured
   alignfull pairs: prose blocks keep their normal rhythm. */
.wp-block-post-content > .alignfull.has-background + .alignfull.has-background {
	margin-block-start: 0;
}

/* =====================================================================
   18. On-page section nav (scroll-spy)
   Opt-in pattern (tt25-bauuc-child/section-nav) for long landing pages:
   a list of #anchor links to the page's sections. site.js highlights the
   section in view (adds .is-active / aria-current).
   Full-width slim sticky bar pinned under the sticky header at every width
   (--bauuc-header-h is set by site.js; 0 on the transparent-nav front page).
   A vertical fixed right-rail variant was retired: this site's content bands
   run edge-to-edge at the 1340px wide measure, leaving no gutter for a rail
   without overlapping content — so the nav stays horizontal throughout. */
/* Anchor jumps (#section links, deep links, keyboard focus) must land below
   the sticky header AND the sticky jump-band, not underneath them. Both heights
   are published as vars by site.js. 16px gives the target a little breathing
   room under the bar. */
html {
	scroll-padding-top: calc(
		var(--bauuc-header-h, 0px) + var(--bauuc-jumpband-h, 0px) + 16px
	);
}

.bauuc-section-nav {
	position: sticky;
	top: var(--bauuc-header-h, 0px);
	z-index: 90;
	background: var(--wp--preset--color--header-footer);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: 12px clamp(20px, 5vw, 64px);
	margin-block: 0 !important;
}
.bauuc-section-nav ul {
	display: flex;
	justify-content: center;
	gap: 24px;
	list-style: none;
	/* overflow-x:auto makes overflow-y compute to auto too, turning the ul
	   into a hidden vertical scroller: clicking a pill focuses the link and
	   the browser nudges the ul down to reveal the focus ring, so the pills
	   dip below the bar. overflow-y:clip removes the vertical scroll
	   container entirely; the padding/negative-margin pair leaves room for
	   the focus ring without changing the bar's height. */
	margin: -4px 0;
	padding: 4px 0;
	overflow-x: auto;
	overflow-y: clip;
	white-space: nowrap;
	scrollbar-width: none;
}
.bauuc-section-nav ul::-webkit-scrollbar {
	display: none;
}
.bauuc-section-nav a,
.bauuc-section-nav a:visited {
	font-size: 0.9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}
.bauuc-section-nav a:hover {
	color: var(--wp--preset--color--white);
}
.bauuc-section-nav a.is-active,
.bauuc-section-nav a[aria-current="page"] {
	color: var(--wp--preset--color--primary);
}

/* ---- 18a. Jump-band overflow affordances ----
   Three cooperating signals that the row side-scrolls, all driven by classes
   site.js toggles on scroll/resize:
     .has-overflow        — the list overflows at all
     .has-overflow-start  — there is content hidden off the LEFT edge
     .has-overflow-end    — there is content hidden off the RIGHT edge
   The directional pair is what carries the information: a fade/chevron that
   disappears once you reach that end tells you something a permanent one
   cannot. */

/* Edge fades. Wide enough on mobile to actually dissolve a pill — the bar's
   own side padding is 20px there, so a narrow fade would only veil padding. */
.bauuc-section-nav::before,
.bauuc-section-nav::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 1;
}
.bauuc-section-nav::before {
	left: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--header-footer), transparent);
}
.bauuc-section-nav::after {
	right: 0;
	background: linear-gradient(270deg, var(--wp--preset--color--header-footer), transparent);
}
.bauuc-section-nav.has-overflow-start::before,
.bauuc-section-nav.has-overflow-end::after {
	opacity: 1;
}
@media (min-width: 782px) {
	.bauuc-section-nav::before,
	.bauuc-section-nav::after {
		width: 40px;
	}
}

/* Left-align once the row overflows. Centering an overflowing flex row puts
   the active pill mid-viewport, which on a phone clips it on BOTH sides at
   once — the exact "which way do I swipe?" ambiguity the fades are there to
   resolve. Left-aligned, the row reads as a rail with a start. */
.bauuc-section-nav.has-overflow ul {
	justify-content: flex-start;
	scroll-padding-inline: 44px;
}

/* Chevron scroll buttons — injected by site.js (so the already-stamped pages
   need no re-stamping) and revealed per direction. Absolutely positioned, so
   they overlay the fades rather than stealing row width on a 375px screen. */
.bauuc-section-nav__scroll {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
}
.bauuc-section-nav__scroll:hover {
	color: var(--wp--preset--color--white);
}
.bauuc-section-nav__scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -4px;
	border-radius: 4px;
}
.bauuc-section-nav__scroll svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bauuc-section-nav__scroll--prev {
	left: 0;
}
.bauuc-section-nav__scroll--next {
	right: 0;
}
.bauuc-section-nav.has-overflow-start .bauuc-section-nav__scroll--prev,
.bauuc-section-nav.has-overflow-end .bauuc-section-nav__scroll--next {
	display: flex;
}

/* The inline rail (A2) opts out of all of the above. */
.bauuc-section-nav--inline::before,
.bauuc-section-nav--inline::after {
	content: none;
}
.bauuc-section-nav--inline .bauuc-section-nav__scroll {
	display: none !important;
}

/* ---- 18b. Inline rail modifier ----
   The same anchor nav, but living inside a section column (see
   patterns/section-intro-rail.php) instead of as a standalone full-width
   bar. Undoes the sticky/horizontal-strip chrome and renders a static,
   right-aligned vertical list against a left hairline — Elevation-style.
   Still carries .bauuc-section-nav, so site.js scroll-spy lights it up. */
.bauuc-section-nav--inline {
	position: sticky;
	top: calc(var(--bauuc-header-h, 0px) + 16px);
	z-index: auto;
	background: transparent;
	border-bottom: none;
	padding: 0;
}
.bauuc-section-nav--inline ul {
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	overflow: visible;
	white-space: normal;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.bauuc-section-nav--inline li {
	width: 100%;
}
.bauuc-section-nav--inline a {
	display: block;
	text-align: right;
	padding: 8px 0 8px 20px;
	margin-left: auto;
	border-right: 2px solid transparent;
	margin-right: -1px; /* sit the active bar on top of the ul hairline */
	font-size: 0.95rem;
}
.bauuc-section-nav--inline a.is-active {
	color: var(--wp--preset--color--white);
	border-right-color: var(--wp--preset--color--primary);
}
/* Desktop/tall viewports: keep the inline rail pinned in-view while the page
   scrolls. It remains right-aligned, but sticky instead of fixed. */
@media (min-width: 1024px) {
	.bauuc-section-nav--inline {
		position: sticky;
		top: calc(var(--bauuc-header-h, 0px) + 24px);
	}
	.bauuc-section-nav--inline a {
		border-left: none;
	}
}
@media (max-width: 781px) {
	/* Stacked column on mobile: left-align the rail so it doesn't float. */
	.bauuc-section-nav--inline {
		position: static;
		top: auto;
	}
	.bauuc-section-nav--inline ul {
		align-items: flex-start;
		border-left: none;
	}
	.bauuc-section-nav--inline a {
		text-align: left;
		padding-left: 0;
	}
}

/* ---- 18c. Pill modifier (No-Hero informational template) ----
   patterns/section-nav-pills.php carries .bauuc-section-nav--pills on top of
   the base .bauuc-section-nav, so site.js scroll-spy still lights it up. The
   bar keeps the base sticky/overflow mechanics (18/18a); only the chrome
   changes: a translucent blurred bar and outlined pill links whose active
   state fills like the theme's primary button. */
.bauuc-section-nav--pills {
	background: color-mix(in srgb, var(--wp--preset--color--header-footer) 96%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.bauuc-section-nav--pills ul {
	gap: 12px;
}
.bauuc-section-nav--pills a,
.bauuc-section-nav--pills a:visited {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50px;
	padding: 0.4em 1.1em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.bauuc-section-nav--pills a:hover {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.3);
}
.bauuc-section-nav--pills a.is-active,
.bauuc-section-nav--pills a[aria-current="page"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--header-footer);
}
/* The blurred bar re-tints the overflow fades to match. */
.bauuc-section-nav--pills::before {
	background: linear-gradient(90deg, var(--wp--preset--color--header-footer), transparent);
}
.bauuc-section-nav--pills::after {
	background: linear-gradient(270deg, var(--wp--preset--color--header-footer), transparent);
}

/* ---- 18e. Cross-page variant ----
   patterns/section-nav-pages.php carries .bauuc-section-nav--pills AND
   .bauuc-section-nav--pages. It is a plain core/list whose chips link to
   sibling pages, so it needs no chrome of its own — it inherits the whole
   pill bar (18/18a/18c) via the base .bauuc-section-nav ul/a selectors.
   The active pill is driven by site.js, which adds .is-active /
   aria-current="page" to the chip matching the current URL (the --pills
   active rule in 18c fills it). Hand-authored labels let a chip differ from
   its page title.

   Unlike the on-page anchor bars, the cross-page variant links to sibling
   pages, so there's no in-page scroll to spy on — pinning it just makes it
   float over the content. Opt out of the base sticky (18) so it sits in
   place at the top of the section, under the title band.

   Use `relative`, NOT `static`: the overflow affordances in 18a (edge fades,
   chevron buttons) are absolutely positioned against the nav, and `static`
   would remove the nav as their containing block — they'd anchor to some
   ancestor and vanish from the bar. `relative` un-sticks it just the same
   while keeping it a containing block. */
.bauuc-section-nav--pages {
	position: relative;
	top: auto;
	z-index: auto;
}

/* =====================================================================
   18d. No-Hero title band
   Slim flat band that replaces the featured-image cover on the page-no-hero
   template (templates/page-no-hero.html). Bg/typography come from tokens in
   the block markup; only the bottom hairline needs CSS (no hairline token). */
.page-no-hero__band {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* =====================================================================
   19. (Relocated) Card + card-link + eyebrow chrome now lives in the
   registered block style variations under styles/ (card.json,
   card-media.json, card-link.json, eyebrow.json). Apply via the editor's
   Styles picker; classes are .is-style-bauuc-*.
   ===================================================================== */

/* =====================================================================
   20. Accordion navigation drawer
   Right-side 384px drawer opened by the header hamburger; replaces the
   retired explore-canopy mega-menu and mobile-menu (v1.4.0). Markup is a
   wp:html block in parts/header.html; behavior in assets/js/nav-drawer.js.
   All colors/typography come from theme.json presets via --wp--preset--*.
   ===================================================================== */

/* ---- Hamburger toggle ---- */
.nav-drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;               /* 44px min hit target */
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	color: var(--wp--preset--color--white);
}
.nav-drawer-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.nav-drawer-toggle__bars { display: flex; flex-direction: column; gap: 5px; }
.nav-drawer-toggle__bars span {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* ---- Scrim ----
   z-index 99 sits just below the sticky header (.site-nav, z-index 100) so the
   nav bar stays crisp and readable above the dim, while everything else on the
   page recedes. The drawer (z-index 999) rides above both. This only works
   because the scrim + drawer markup lives in the footer part — at the root
   stacking context — not trapped inside .site-nav's z-index:100 context. */
.nav-drawer__scrim {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(9, 13, 22, 0.5);
	backdrop-filter: blur(1.5px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s ease;
}
.nav-drawer-open .nav-drawer__scrim { opacity: 1; pointer-events: auto; }

/* ---- Drawer shell ---- */
.nav-drawer {
	/* Drawer-scoped warm gold accent (Option 1a handoff). Local to the drawer —
	   intentionally not a theme.json token, since it's a chrome detail here only. */
	--nd-gold: #e8b54a;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	width: min(384px, 100vw);
	background: var(--wp--preset--color--card);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
	font-family: var(--wp--preset--font-family--manrope);
	transform: translateX(100%);
	transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
	visibility: hidden;
}
.nav-drawer-open .nav-drawer { transform: translateX(0); visibility: visible; }

/* keep it reachable during the slide-out transition */
.nav-drawer[aria-hidden="false"] { visibility: visible; }

/* ---- Drawer header ---- */
.nav-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	padding: 22px 22px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-drawer__eyebrow {
	margin-right: auto;               /* push the icon buttons to the right edge */
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--nd-gold);
}
/* Header search magnifier — icon-only, mirrors the close button's hit area. */
.nav-drawer__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: 6px;
	padding: 0;
	border: none;
	border-radius: 9px;
	background: none;
	color: #c9d1d9;
	cursor: pointer;
}
.nav-drawer__search-btn:hover { color: #fff; }
.nav-drawer__search-btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }
.nav-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
}
.nav-drawer__close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nav-drawer__close:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }

/* ---- "New here?" fast-lane card ---- */
.nav-drawer__newhere {
	display: block;
	flex-shrink: 0;
	margin: 8px 20px 14px;
	padding: 14px 16px;
	background: var(--nd-gold);
	border-radius: 10px;
	text-align: left;
	transition: filter 0.15s;
}
.nav-drawer__newhere:hover,
.nav-drawer__newhere:focus-visible { filter: brightness(1.05); outline: none; }
.nav-drawer__newhere:focus-visible { box-shadow: 0 0 0 2px var(--wp--preset--color--card), 0 0 0 4px var(--nd-gold); }
.nav-drawer__newhere-t1 {
	display: block;
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.3;
	color: #141414;
}
.nav-drawer__newhere-t2 {
	display: block;
	margin-top: 2px;
	font-size: 0.72rem;
	line-height: 1.3;
	color: rgba(20, 20, 20, 0.7);
}

/* ---- Accordion ---- */
.nav-drawer__nav { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
.nav-drawer__nav::-webkit-scrollbar { width: 8px; }
.nav-drawer__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 8px; }

.nav-drawer__sec { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

/* Split row: name <a> (navigates) | toggle <button> (expands). */
.nav-drawer__row { display: flex; align-items: stretch; }

.nav-drawer__name {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 15px 18px;
	text-align: left;
	transition: background 0.15s;
}
.nav-drawer__name:hover { background: rgba(255, 255, 255, 0.03); }
.nav-drawer__name:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; }

.nav-drawer__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 44px;
	padding: 0 18px;
	background: none;
	border: none;
	border-left: 1px solid rgba(255, 255, 255, 0.09);
	cursor: pointer;
	transition: background 0.15s;
}
.nav-drawer__toggle:hover { background: rgba(255, 255, 255, 0.03); }
.nav-drawer__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; }

.nav-drawer__ic { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.nav-drawer__ic svg { width: 100%; height: 100%; }
/* stroke inline icons with the drawer gold accent */
.nav-drawer__ic svg :is(circle, ellipse, path, line) {
	stroke: var(--nd-gold);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nav-drawer__label { flex: 1; font-size: 0.95rem; font-weight: 600; color: #fff; }
.nav-drawer__count { font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.34); }

.nav-drawer__chev { width: 14px; height: 14px; display: block; transition: transform 0.28s ease; }
.nav-drawer__chev svg { width: 100%; height: 100%; }
.nav-drawer__chev svg path { stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.5; stroke-linecap: round; }
.nav-drawer__toggle[aria-expanded="true"] .nav-drawer__chev { transform: rotate(180deg); }
.nav-drawer__toggle[aria-expanded="true"] .nav-drawer__chev svg path { stroke: var(--nd-gold); }

/* collapsible panel — animates via grid-template-rows (0fr <-> 1fr) */
.nav-drawer__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.nav-drawer__row:has(.nav-drawer__toggle[aria-expanded="true"]) + .nav-drawer__panel { grid-template-rows: 1fr; }
.nav-drawer__panel-inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0 18px 0 51px;
}
.nav-drawer__row:has(.nav-drawer__toggle[aria-expanded="true"]) + .nav-drawer__panel .nav-drawer__panel-inner { padding-bottom: 16px; }

.nav-drawer__panel-inner a {
	padding: 8px 0;
	font-size: 0.9rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.68);
	transition: color 0.15s, padding-left 0.15s;
}
.nav-drawer__panel-inner a:hover,
.nav-drawer__panel-inner a:focus-visible {
	color: var(--wp--preset--color--primary);
	padding-left: 4px;
	outline: none;
}
/* keep collapsed links out of the tab order */
.nav-drawer__row:has(.nav-drawer__toggle[aria-expanded="false"]) + .nav-drawer__panel a { visibility: hidden; }
.nav-drawer__row:has(.nav-drawer__toggle[aria-expanded="true"])  + .nav-drawer__panel a { visibility: visible; }

/* ---- Discoverability hint ---- */
.nav-drawer__hint {
	margin: 0;
	padding: 16px 18px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.6875rem;
	line-height: 1.4;
	color: #6e7681;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.nav-drawer,
	.nav-drawer__scrim,
	.nav-drawer__panel,
	.nav-drawer__chev { transition: none; }
}

/* =====================================================================
   21. MEC events grid — clean card restyle (Connect page, shortcode 412)
   Recasts Modern Events Calendar's "classic" grid skin into the site's
   rounded-card look: rounded image on top, then title + date/time/location
   as muted icon rows. Drops the plugin's cyan date bar and the share +
   "View detail" footer. Scoped to .mec-event-grid-classic so the monthly
   calendar skin (calendar page, shortcode 247) is untouched.
   Data note: the grid skin's "include_events_times" option is enabled on
   shortcode 412 so start/end time render in .mec-time-details.
   ===================================================================== */

/* Even 3-up grid, equal-height cards. MEC lays events out with a Bootstrap
   .row/.col-md-4 and its frontend.min.css (loaded after the theme) sets
   .row{display:flex}, so the grid + column resets need !important to win
   regardless of stylesheet order. */
.mec-event-grid-classic .row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin: 0 !important;
	float: none !important;
}
.mec-event-grid-classic .row > [class*="col-"] {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	float: none !important;
	position: static !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* MEC's Bootstrap .row carries a clearfix (.row:before/:after{display:table}).
   Under display:grid those generated boxes count as grid items and shove the
   cards out of their columns, so suppress them. */
.mec-event-grid-classic .row::before,
.mec-event-grid-classic .row::after {
	display: none !important;
}
@media (max-width: 900px) {
	.mec-event-grid-classic .row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.mec-event-grid-classic .row { grid-template-columns: 1fr; }
}

/* Card shell: strip the plugin's box, stack image over content */
.mec-event-grid-classic .mec-event-article {
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
}

/* Image on top — rounded, consistent 16:9 crop. Constrain the wrapper and
   the <a> to the cell and clip, so the medium-size <img> (native 300px, set
   via its width attribute) can't spill past the column edges. */
.mec-event-grid-classic .mec-event-image,
.mec-event-grid-classic .mec-event-image a {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: 0;
	overflow: hidden;
	border-radius: 14px;
}
.mec-event-grid-classic .mec-event-image img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
}

/* Content column below the image */
.mec-event-grid-classic .mec-event-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 2px 0;
	background: none;
}

/* Title first, left-aligned, clean case */
.mec-event-grid-classic .mec-event-title {
	order: 1;
	margin: 0 0 2px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	font-weight: 700;
	text-align: left;
	text-transform: none;
}
.mec-event-grid-classic .mec-event-title a { color: var(--wp--preset--color--white); }
.mec-event-grid-classic .mec-event-title a:hover { color: var(--wp--preset--color--primary); }
/* Hide the category colour dot for a cleaner heading */
.mec-event-grid-classic .mec-event-title .event-color { display: none; }

/* Meta rows: neutralise the cyan bar, render as muted icon rows.
   Order: date (2) -> time (nested with date) -> location (3). */
.mec-event-grid-classic .mec-event-date.mec-bg-color {
	order: 2;
	position: static !important;
	background: none !important;
	color: inherit;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 400;
}
.mec-event-grid-classic .mec-event-date .mec-start-date-label,
.mec-event-grid-classic .mec-event-date .mec-time-details,
.mec-event-grid-classic .mec-grid-event-location {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: color-mix(in srgb, var(--wp--preset--color--white) 62%, transparent);
}
.mec-event-grid-classic .mec-grid-event-location { order: 3; }
/* Nudge the leading icon to sit on the text baseline of the first line */
.mec-event-grid-classic .mec-start-date-label::before,
.mec-event-grid-classic .mec-time-details::before,
.mec-event-grid-classic .mec-grid-event-location::before {
	margin-top: 1px;
}

/* Leading icons — masked SVG so they inherit the muted text colour */
.mec-event-grid-classic .mec-start-date-label::before,
.mec-event-grid-classic .mec-time-details::before,
.mec-event-grid-classic .mec-grid-event-location::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	        mask: center / contain no-repeat;
}
.mec-event-grid-classic .mec-start-date-label::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.mec-event-grid-classic .mec-time-details::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");
}
.mec-event-grid-classic .mec-grid-event-location::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Drop the share + booking footer entirely */
.mec-event-grid-classic .mec-event-footer { display: none; }

/* ---------------------------------------------------------------------------
   MEC cover band — hero replacement on the "Page — Events Calendar" template
   (templates/page-events.html). The MEC "cover" skin (id 574, style "clean")
   ships its own markup; here we bend it to match the interior page hero
   (.hero--page) exactly — full-bleed, same 50vh clamp, same bottom-up scrim,
   white title bottom-left — so moving between pages feels continuous.
   --------------------------------------------------------------------------- */
.mec-cover-band {
	margin-block: 0;
}

.mec-cover-band > *,
.mec-cover-band .mec-wrap {
	margin-block: 0;
	max-width: none;
}

/* The article becomes the full-bleed hero frame. Navy fallback behind the
   image, matching .hero. */
.mec-cover-band .mec-event-cover-clean {
	position: relative;
	/* Mirrors .hero--page (§5) — including its desktop 32vw override below.
	   Kept in lockstep deliberately: the whole point of this band is that the
	   Events page hero is the same height as every other interior hero. */
	min-height: clamp(380px, 50vh, 560px);
	margin: 0;
	/* Strip the cover-clean skin's card chrome (1px border + 8px inset). */
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--header-footer);
}

/* Desktop: track width, not viewport height — see the §5 rule this mirrors. */
@media (min-width: 782px) {
	.mec-cover-band .mec-event-cover-clean {
		min-height: clamp(420px, 32vw, 700px);
	}
}

/* Image covers the frame like a hero featured image. */
.mec-cover-band .mec-event-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
}
.mec-cover-band .mec-event-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Same bottom-up gradient scrim as the page hero (§6). */
.mec-cover-band .mec-event-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 1;
	/* Kill the skin's 12px solid #fff frame — this was cropping the image. */
	border: 0;
	border-radius: 0;
	background: linear-gradient(
		to top,
		rgba(9, 13, 22, 0.94) 0%,
		rgba(9, 13, 22, 0.55) 34%,
		rgba(9, 13, 22, 0.12) 62%,
		rgba(9, 13, 22, 0) 82%
	);
}

/* Title/place anchored bottom-left, constrained to the wide width like
   .hero > .wp-block-cover__inner-container. */
.mec-cover-band .mec-event-content {
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	padding-inline: clamp(20px, 5vw, 64px);
	padding-bottom: clamp(32px, 6vh, 72px);
	text-align: left;
}
.mec-cover-band .mec-event-title {
	margin: 0;
	/* Title-scale, not hero-headline-scale: the image carries the weight and
	   the title just labels it (matches how the source event page reads).
	   Capped + line-clamped so long event titles can't run across the cover. */
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mec-cover-band .mec-event-title,
.mec-cover-band .mec-event-title a,
.mec-cover-band .mec-event-place {
	color: var(--wp--preset--color--white);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.mec-cover-band .mec-event-place {
	margin-top: 0.4em;
	font-size: 1.38rem;
}

/* Drop the auto date chip and the little category-color square entirely. */
.mec-cover-band .mec-event-date,
.mec-cover-band .mec-event-title .event-color {
	display: none;
}

/* =====================================================================
   Scroll-triggered entrance animations

   The hidden starting state is only applied once JS adds .js-scroll-init —
   never by .animate-on-scroll alone. This keeps the block visible by
   default in the Site Editor (style.css loads there too via
   add_editor_style, but scroll-animations.js is front-end only) and as a
   safe fallback if JS fails to run on the front end for any reason.
   ===================================================================== */
.animate-on-scroll.js-scroll-init {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	will-change: opacity, transform;
}

.animate-on-scroll.js-scroll-init.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll.js-scroll-init {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =====================================================================
   MEC event feeds — [bauuc_event_cover] + [bauuc_event_cards]

   These two shortcodes (bauuc-core's includes/mec-feeds.php) emit hand-written HTML, not
   blocks, so they CANNOT reuse the is-style-bauuc-card-media variation:
   WordPress rewrites variation classes per block instance at render
   (is-style-bauuc-card-media--15) and only emits CSS for the suffixed
   selector — a bare is-style-bauuc-card-media in raw HTML gets nothing.

   So the card chrome is mirrored here from styles/card-media.json, which
   stays the source of truth: card bg, #26314e border, 16px radius, meta
   #8ea0c4, body #98a3bd, content padding 18px 20px 22px. Change it there,
   change it here. Same trade-off, same four values, as
   blockstudio/people-grid/style.css.

   Buttons mirror the core/button chrome in theme.json (50px pill,
   .7em/1.7em, fill = primary, outline = white) plus the hover inversion
   from §7 above.
   ===================================================================== */

/* ---- Cover: next upcoming event. Content left, image right. ---- */
.bauuc-event-cover {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: center;
	padding: 24px;
	background: var(--wp--preset--color--card);
	border: 1px solid #26314e;
	border-radius: 16px;
}

.bauuc-event-cover__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}
.bauuc-event-cover__title a {
	color: inherit;
	text-decoration: none;
}
.bauuc-event-cover__title a:hover {
	text-decoration: underline;
}

.bauuc-event-cover__excerpt {
	margin: 14px 0 0;
	color: #98a3bd;
}

.bauuc-event-cover__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.bauuc-event-cover__media {
	margin: 0;
}
/* height:auto is load-bearing. These are raw <img> tags, not core/image blocks, so the
   `.wp-block-image img{height:auto}` reset never reaches them — and wp_get_attachment_image()
   emits height="576", which then stands as a presentational hint. Without this the box is
   portrait and object-fit:cover crops the 16:9 source hard. */
.bauuc-event-cover__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
}

/* Buttons — mirror of theme.json core/button + the §7 hover inversion. */
.bauuc-event-btn {
	display: inline-block;
	padding: 0.7em 1.7em;
	border: 1px solid transparent;
	border-radius: 50px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}
.bauuc-event-btn--fill {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--header-footer);
}
.bauuc-event-btn--outline {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}
.bauuc-event-btn:hover,
.bauuc-event-btn:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

/* ---- Cards: last N past events. Mirrors is-style-bauuc-card-media. ---- */
.bauuc-event-cards {
	display: grid;
	grid-template-columns: repeat(var(--event-cols, 3), 1fr);
	gap: 20px;
}

.bauuc-event-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--card);
	border: 1px solid #26314e;
	border-radius: 16px;
}

.bauuc-event-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.bauuc-event-card__img {
	display: block;
	width: 100%;
	height: auto; /* Required — see the note on .bauuc-event-cover__img. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}
.bauuc-event-card__img--placeholder {
	background: var(--wp--preset--color--deep);
}

.bauuc-event-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 20px 22px;
}
.bauuc-event-card__content > * {
	margin-block: 0;
}
.bauuc-event-card__content > * + * {
	margin-top: 8px;
}

.bauuc-event-card__meta {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #8ea0c4;
}

.bauuc-event-card__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}
.bauuc-event-card__link:hover .bauuc-event-card__title {
	text-decoration: underline;
}

.bauuc-event-card__body {
	font-size: var(--wp--preset--font-size--small);
	color: #98a3bd;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.bauuc-event-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	/* Match the core columns breakpoint: cover stacks, image above content. */
	.bauuc-event-cover {
		grid-template-columns: 1fr;
	}
	.bauuc-event-cover__media {
		order: -1;
	}
}

@media (max-width: 600px) {
	.bauuc-event-cards {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Event hero — [bauuc_event_cover style="hero"] on templates/page-events.html.

   Wears the real .hero / .hero--page classes, so the 50vh clamp (§5), the
   bottom-up scrim on `.hero > .wp-block-cover__background` (§6), the
   inner-container width + bottom-left anchor, and the hero text-shadow all
   apply unchanged — one hero look site-wide, not a second one.

   Only two things are declared here, and both exist because this is raw HTML
   from a shortcode rather than a core/cover block:
     1. Base positioning. With no wp:cover block on the page, core's
        wp-block-cover stylesheet may never be enqueued, so we cannot rely on
        it for `position:absolute` on the background span.
     2. The eyebrow. is-style-bauuc-eyebrow is rewritten per block instance and
        emits no bare selector, so the values are mirrored from
        styles/eyebrow.json.
   --------------------------------------------------------------------------- */
.bauuc-event-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

/* Fixed shape, so the poster crops the SAME WAY on every screen.
   .hero--page sizes interior heroes with min-height: clamp(380px, 50vh, 560px) — height
   from the VIEWPORT. That is fine for a photo, but here it means the hero box aspect ratio
   changes with the window (a short window bottoms out at 380px and crops far harder than a
   tall one), so object-fit: cover zooms the poster by a different amount for every visitor
   and the focal point can only pick the anchor, never the framing.
   Pinning an aspect-ratio makes the box shape constant: the height now tracks the window's
   WIDTH, the zoom is identical everywhere, and the focal point becomes predictable.
   The min-height floor is kept as a floor only, so narrow screens still get a usable band.
   §5 has since taken the same medicine — featured-image heroes derive their desktop height
   from 32vw rather than 50vh — but this stays a hard aspect-ratio because a poster has text
   in it and must crop identically for everyone, where a photo only needs to stop flattening.
   The two-class selector outranks §5's single-class rules, so this still wins. */
.bauuc-event-hero.hero--page {
	aspect-ratio: 3 / 1;
	min-height: 380px !important; /* Floor only. Beats the clamp() in .hero--page (§5). */
}

@media (max-width: 781px) {
	/* Portrait phones: 21/9 would be a letterbox slot. Give it a taller, squarer box. */
	.bauuc-event-hero.hero--page {
		aspect-ratio: 4 / 3;
		max-height: none;
	}
}

.bauuc-event-hero > .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bauuc-event-hero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Mirrored from styles/eyebrow.json — see the note above. */
.bauuc-event-hero__eyebrow {
	margin: 0 0 0.5em;
	color: var(--wp--preset--color--accent-1);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
}

.bauuc-event-hero__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.1;
}

.bauuc-event-hero__excerpt {
	max-width: 560px;
	margin: 0.5em 0 0;
	color: var(--wp--preset--color--white);
}

.bauuc-event-hero .bauuc-event-cover__actions {
	margin-top: 24px;
}

/* =====================================================================
   22. ICS Calendar — dark token restyle (Church Calendar, page 1040)
   The page renders the church's public Google Calendar feed through the
   free "ICS Calendar" plugin ([ics_calendar view="month"]); MEC stays
   for featured single events only. The plugin themes itself through
   --r34ics--element--* custom properties declared on :root, so the bulk
   of the restyle is re-pointing those at site tokens on the calendar
   and its lightbox (which lives outside the <section>, as a sibling).
   Selectors below that aren't variable-driven are floats/borders the
   plugin hardcodes. On phones the plugin swaps the grid for a stacked
   day list itself (.phone_only / .no_phone) — no media query needed.
   ===================================================================== */

.ics-calendar,
.r34ics_lightbox {
	--r34ics--element--events--color: var(--wp--preset--color--white);
	--r34ics--element--month--background: var(--wp--preset--color--card);
	--r34ics--element--month--day--background: transparent;
	--r34ics--element--month--day--color: #98a3bd;
	--r34ics--element--month--off--background: color-mix(in srgb, var(--wp--preset--color--deep) 55%, transparent);
	--r34ics--element--month--off--color: #98a3bd;
	--r34ics--element--month--th--background: var(--wp--preset--color--deep);
	--r34ics--element--month--th--color: #8ea0c4;
	--r34ics--element--month--th-td--border-color: #26314e;
	--r34ics--element--month--events-li--border-bottom-color: #26314e;
	--r34ics--element--month--today-day--background: color-mix(in srgb, var(--wp--preset--color--accent-teal) 14%, transparent);
	--r34ics--element--month--today-day--color: var(--wp--preset--color--white);
	--r34ics--element--month-label--color: var(--wp--preset--color--white);
	--r34ics--element--select--background: var(--wp--preset--color--card);
	--r34ics--element--select--color: var(--wp--preset--color--white);
	--r34ics--element--hover-block--background: var(--wp--preset--color--card);
	--r34ics--element--hover-block--border-color: #26314e;
	--r34ics--element--lightbox--background: color-mix(in srgb, var(--wp--preset--color--deep) 80%, transparent);
	--r34ics--element--lightbox-content--background: var(--wp--preset--color--card);
	--r34ics--element--lightbox-content--color: var(--wp--preset--color--white);
	--r34ics--element--lightbox-content--box-shadow: none;
	--r34ics--element--lightbox-close--background: var(--wp--preset--color--accent-teal);
	--r34ics--element--lightbox-close--color: var(--wp--preset--color--white);
	--r34ics--element--lightbox-close--box-shadow: none;
}

/* The shortcode output (an AJAX container the calendar loads into) lands
   in the 645px content column; a 7-column month grid needs the wide
   measure. */
.wp-block-post-content > .r34ics-ajax-container {
	max-width: var(--wp--style--global--wide-size);
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* Card shell */
.ics-calendar {
	padding: 18px;
	background: var(--wp--preset--color--card);
	border: 1px solid #26314e;
	border-radius: 16px;
	color: var(--wp--preset--color--white);
}

/* Month heading + nav row: "September 2026" left, pills + select right */
.ics-calendar .ics-calendar-label {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}
.ics-calendar .ics-calendar-select {
	border: 1px solid #26314e;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.8125rem;
}
.ics-calendar .ics-calendar-arrow-nav > * {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1px solid #26314e;
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.ics-calendar .ics-calendar-arrow-nav > .today { margin-right: 8px; }
.ics-calendar .ics-calendar-arrow-nav > *:hover,
.ics-calendar .ics-calendar-arrow-nav > *:focus-visible {
	border-color: var(--wp--preset--color--accent-teal);
	color: var(--wp--preset--color--accent-teal);
}
.ics-calendar .ics-calendar-arrow-nav > * { cursor: pointer; }
/* The plugin hides the out-of-range arrow with .inactive; keep that
   winning over the inline-flex above regardless of stylesheet order. */
.ics-calendar .ics-calendar-arrow-nav > .inactive { display: none; }

/* Grid */
.ics-calendar .ics-calendar-month-grid {
	border-radius: 10px;
	overflow: hidden;
}
.ics-calendar .ics-calendar-month-grid th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
}
.ics-calendar .ics-calendar-month-grid .day {
	font-size: 0.8125rem;
	font-weight: 600;
}
/* Today: teal top bar over the tinted day strip */
.ics-calendar .ics-calendar-month-grid .today .day {
	box-shadow: inset 0 2px 0 var(--wp--preset--color--accent-teal);
}
.ics-calendar .ics-calendar-month-grid .past { opacity: 0.6; }

/* Event entries: teal time, light title, pointer affordance for the lightbox */
.ics-calendar .ics-calendar-month-grid .events .time,
.ics-calendar .ics-calendar-month-grid .events .all-day-indicator {
	color: var(--wp--preset--color--accent-teal);
}
.ics-calendar .ics-calendar-month-grid .events .title {
	color: #e7ecf7;
	font-weight: 600;
}
.ics-calendar .events .title.has_desc { cursor: pointer; }
.ics-calendar .events .title.has_desc:hover { color: var(--wp--preset--color--accent-teal); }

/* Lightbox card */
.r34ics_lightbox .r34ics_lightbox_content {
	border: 1px solid #26314e;
	border-radius: 16px;
}
.r34ics_lightbox .r34ics_lightbox_content a { color: var(--wp--preset--color--accent-teal); }
.r34ics_lightbox .r34ics_lightbox_content .time_in_hover_block { color: var(--wp--preset--color--accent-teal); }

/* =====================================================================
   Kit swatch (Site Manual → The kit)

   One private page generated by .ddev/build-kit-swatch.php that stamps
   every registered BAUUC pattern in a row, each behind a caption. The
   specimens are emitted verbatim — the wrapper classes below are the only
   thing this page adds, so what an editor sees here is exactly what they
   get when they insert.

   Editor-facing chrome only; nothing here loads on a public page.
   ===================================================================== */

/* Nav patterns are sticky by design (§18). Four of them stacked down one
   page, plus the manual's own sticky bar, would pin five bars over the
   content — so a nav shown AS A SPECIMEN sits still. Scroll-spy still runs
   on them; site.js already no-ops when a chip's target isn't on the page. */
.bauuc-swatch__stage .bauuc-section-nav {
	position: static;
	top: auto;
}

.bauuc-swatch__intro {
	margin-block: var(--wp--preset--spacing--50);
}

/* The family heading is the only full-width rule on the page — it reads as
   a divider between kinds of section, where the per-pattern captions read
   as labels attached to the specimen below them. */
.bauuc-swatch__family {
	margin-block: var(--wp--preset--spacing--60) 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--primary);
}

.bauuc-swatch__label {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
.bauuc-swatch__label h3 {
	margin-bottom: 0.35em;
}

.bauuc-swatch__insert {
	color: #8ea0c4;
}

/* A hairline box around the specimen so a section with no background of its
   own still reads as one bounded thing rather than as loose page content. */
.bauuc-swatch__stage {
	border: 1px solid #26314e;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--50);
}

/* =====================================================================
   23. MEC single event page — dark token restyle (/events/<slug>/)

   templates/single-mec-events.html gives MEC's "default" single layout
   the wide measure and nothing else (MEC renders its own title + image
   through the_content on block themes). MEC's skin assumes a white page:
   white .mec-frontbox cards, #616161 14px body copy, #000 meta labels —
   all of which disappear on header-footer navy. Recast into the §21/22
   card language: card background, #26314e hairlines, primary accents.
   Prefixed with .single-mec-events so the 3-class selectors outrank
   MEC's frontend.min.css (which loads after this sheet) without
   !important, and so no shortcode view elsewhere is affected.
   ===================================================================== */

.single-mec-events .mec-wrap {
	font-family: inherit;
	color: var(--wp--preset--color--white);
}

/* Title + description: site type scale, readable contrast */
.single-mec-events .mec-single-event .mec-single-title {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	letter-spacing: normal;
	color: var(--wp--preset--color--white);
}
.single-mec-events .mec-single-event .mec-events-content p,
.single-mec-events .mec-single-event .mec-events-content li {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--white);
}
.single-mec-events .mec-single-event .mec-events-content a {
	color: var(--wp--preset--color--primary);
}

/* Card shells: export row, countdown, meta sidebar, share box */
.single-mec-events .mec-single-event .mec-frontbox,
.single-mec-events .mec-single-event .mec-events-meta-group-countdown {
	background: var(--wp--preset--color--card);
	border: 1px solid #26314e;
	border-radius: 16px;
	box-shadow: none;
	color: var(--wp--preset--color--white);
}
.single-mec-events .mec-single-event .mec-event-export-module.mec-frontbox {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* Export buttons as outline pills */
.single-mec-events .mec-single-event .mec-events-button {
	background: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.single-mec-events .mec-single-event .mec-events-button:hover,
.single-mec-events .mec-single-event .mec-events-button:focus-visible {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--header-footer);
}

/* Countdown: white numerals, muted labels */
.single-mec-events .mec-single-event .mec-events-meta-group-countdown .block-w span {
	color: var(--wp--preset--color--white);
}
.single-mec-events .mec-single-event .mec-events-meta-group-countdown .label-w {
	margin: 0;
	color: #8ea0c4;
}

/* Sidebar meta (Date / Time / Category) */
.single-mec-events .mec-single-event .mec-event-meta .mec-date,
.single-mec-events .mec-single-event .mec-event-meta .mec-time,
.single-mec-events .mec-single-event .mec-event-meta .mec-events-single-section-title {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--white);
}
.single-mec-events .mec-single-event .mec-event-meta i::before {
	color: var(--wp--preset--color--primary);
}
.single-mec-events .mec-single-event .mec-event-meta dd,
.single-mec-events .mec-single-event .mec-event-meta dd a {
	font-size: var(--wp--preset--font-size--medium);
	color: #c9d3ea;
}
.single-mec-events .mec-single-event .mec-event-meta dd a:hover {
	color: var(--wp--preset--color--primary);
}
.single-mec-events .mec-single-event .mec-event-meta dl {
	margin: 0;
}

/* Share box heading: hairline instead of MEC's 4px light-grey bar */
.single-mec-events .mec-single-event .mec-event-social h3 {
	margin-top: 0;
	color: var(--wp--preset--color--white);
	border-bottom: 1px solid #26314e;
}
.single-mec-events .mec-single-event .mec-event-social h3::before {
	display: none;
}

/* Below Bootstrap's md breakpoint the two columns stack; keep a gap */
@media (max-width: 767px) {
	.single-mec-events .mec-single-event .col-md-4 {
		margin-top: var(--wp--preset--spacing--50);
	}
}

/* ── Volunteer Openings (patterns/section-volunteer-openings.php) ──
   Role rows reuse the FAQ item variation, whose partial zeroes <p> margins
   (fine for 1–2 line answers). A role posting stacks many blocks, so restore
   rhythm; (0,2,1) beats the variation's suffixed `.is-style-bauuc-faq--N p`. */
.wp-block-details.bauuc-role > p,
.wp-block-details.bauuc-role > ul {
	margin-block: 0;
}
.wp-block-details.bauuc-role > * + p,
.wp-block-details.bauuc-role > * + ul {
	margin-block-start: 0.75em;
}
.wp-block-details.bauuc-role > ul {
	margin-block-start: 0.35em;
	padding-inline-start: 1.25em;
}
.wp-block-details.bauuc-role strong {
	color: var(--wp--preset--color--white);
}
.wp-block-details.bauuc-role > p.bauuc-role__meta {
	margin-block-start: 4px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-1);
}