/**
 * BCFC Core - front-end styles (1.5.1).
 *
 * RULE: no color or font literals in this folder (tools/build.sh fails on a hex value).
 * Colors come from Elementor globals through the custom properties Site\Assets prints once:
 *   --bcfc-core-c-text, -text-muted, -icon-muted, -primary, -primary-dark, -surface,
 *   -surface-tint, -accent, -band-end, -transparent (each = var(--e-global-color-<id>), config
 *   `tokens`). No color keyword (transparent, white, …) or rgb()/hsl() either (doctor css_hex_lint).
 * Type comes from var(--e-global-typography-<id>-*). Sizes follow Figma (1440 frames).
 *
 * Sections
 *   1. Accessibility utilities: screen-reader text, skip link, <main>, scroll padding
 *   2. Header variant offset (opt-in, config header.offset)
 *   3. Utility classes (one definition each): glass blur, hover structure, band scrim
 *   4. Dynamic tag markup: lines, chips
 *   5. Shortcode components: contact icons, social/share, terms, location features, event
 *      when/notice, map, search proxy, filter toggle, featured work, resource details (1.2.0)
 *   6. State fallbacks: badges, featured card tint, hide-if-empty
 *   7. Print
 *   8. One-slide carousels (1.3.3; core.js §13)
 *   9. Site fixes (1.4.0): the pointer on tab titles; popups that keep the page in place and scroll
 *      on their own (core.js §19)
 *  10. Site header (1.4.0): the rules of header 725 that are this site's design (the effects - fill,
 *      ink, page blur, panel reveal, shrink - are the widget pack's), and the Next Event card
 *  11. Directory carousels that bleed past the grid (1.5.1): the section clip and the carousel rules that
 *      were Custom CSS on Home and Membership (opt-in classes bcfc-core-clip, bcfc-core-carousel-bleed)
 *   (1.2.1) wrapped dot lists: the separator that would start a line is hidden (core.js §16)
 *
 * Sections 9 and 10 name kit globals directly (var(--e-global-color-<id>)), like facets.css: their rules
 * replace Custom CSS that did, and the two sets must compute the same while both are on a page.
 */

/* ==========================================================================
   1. Accessibility utilities
   ========================================================================== */

.bcfc-core-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Hello's "Skip to content" link (A11Y-003, KIT-010). Elementor's frontend CSS keeps
 * .screen-reader-text clipped even on focus and Hello's own reveal rule is switched off on this
 * site, so the link was invisible. On focus it now shows above the fixed header.
 */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100001;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 24px;
	overflow: visible;
	clip: auto !important;
	clip-path: none !important;
	border-radius: 8px;
	background-color: var(--bcfc-core-c-text);
	color: var(--bcfc-core-c-surface);
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: var(--e-global-typography-secondary-line-height);
	text-decoration: none;
	outline: 2px solid var(--bcfc-core-c-surface);
	outline-offset: 2px;
}

/*
 * The skip link's target: focus moves here, a focus ring round the whole page helps nobody.
 * .bcfc-core-skip-target: a target Core did not print (Hello's own <main> on /directory/), made
 * focusable by core.js when the skip link is used (1.1.3).
 */
.bcfc-core-main:focus,
.bcfc-core-skip-target:focus {
	outline: none;
}

/*
 * Anchors, skip-link jumps and keyboard focus stop below the fixed header (A11Y-014).
 * --bcfc-core-anchor-h (1.3.3) is the header's height once it is stuck, which is where an in-page
 * target ends up: a transparent header is 125px at rest but 108px stuck at ≥1025px, and the at-rest
 * --bcfc-core-header-h landed targets 37px under it. Both are measured by core.js §1; the fallback
 * is the solid header height.
 */
html {
	scroll-padding-top: calc(var(--bcfc-core-anchor-h, var(--bcfc-core-header-h, var(--bcfc-core-header-fallback, 108px))) + var(--bcfc-core-scroll-gap, 20px));
}

/*
 * core.js §1 (1.3.3) applies the sticky header's state classes for one synchronous measurement of
 * its stuck height; no transition may start from that.
 */
.bcfc-core-measuring,
.bcfc-core-measuring * {
	transition: none !important;
}

/* ==========================================================================
   2. Header variant offset (P1-HEADER switches it on: config header.offset)
   ========================================================================== */

/*
 * The header is a fixed overlay that takes no layout space. On the solid variant the page starts
 * below it. !important because the kit sets `body { margin: 0 !important }`.
 */
body.bcfc-core-header-offset.bcfc-header--solid {
	margin-top: var(--bcfc-core-header-h, var(--bcfc-core-header-fallback, 108px)) !important;
}

/* ==========================================================================
   3. Utility classes (KIT-006, KIT-V01, KIT-017) - one definition each
   ========================================================================== */

/*
 * Figma background blur R renders as CSS blur(R/2):
 *   .glassmorph            Glass (radius 20)          → 10px   (3053:5242, 3053:3080)
 *   .glassmorph--badge     badges / email cards (15)  → 7.5px  (3053:4044, 3053:2776, 3053:2266)
 *   .blur-badge            alias of --badge (KIT-V01 name)
 *   .glassmorph--overlay   Blur / Overlay (radius 4)  → 2px
 *   .blur-overlay          alias of --overlay (the kit's name for the same Figma effect style)
 * Both prefixes, so Safari ≤17 blurs too. The kit still carries identical .glassmorph and
 * .blur-overlay rules until S6-KITFINAL deletes them; the values match, so nothing changes then.
 */
.glassmorph {
	--bcfc-core-blur: 10px;
	-webkit-backdrop-filter: blur(var(--bcfc-core-blur)) !important;
	backdrop-filter: blur(var(--bcfc-core-blur)) !important;
}

.glassmorph.glassmorph--badge,
.glassmorph--badge,
.blur-badge {
	--bcfc-core-blur: 7.5px;
	-webkit-backdrop-filter: blur(var(--bcfc-core-blur)) !important;
	backdrop-filter: blur(var(--bcfc-core-blur)) !important;
}

.glassmorph.glassmorph--overlay,
.glassmorph--overlay,
.blur-overlay {
	--bcfc-core-blur: 2px;
	-webkit-backdrop-filter: blur(var(--bcfc-core-blur)) !important;
	backdrop-filter: blur(var(--bcfc-core-blur)) !important;
}

/*
 * Hover structure for image cards. TIM-ANSWERS Q5 (hover system a): "no grow, no zoom" - so
 * these keep the clipping and pointer the cards rely on but no longer scale the image. The 20
 * pasted .hover-scale copies in header 725 / popup 3728 and the kit's .background-expand rules
 * are removed by their owners (P1-HEADER, P1-POPUP, P1-KIT); this is the one definition left.
 */
.hover-scale {
	overflow: hidden;
	cursor: pointer;
}

.background-image-expand .elementor-widget-image {
	width: 100%;
	height: 100%;
}

/*
 * The dark band gradient drawn in Figma 3053:4327 / 4485 / About (DECISIONS "Band gradient as one
 * reusable class"; SUNDANCE-026, PLAN-008, ABOUT-020): Black 0% → 99% at 38.31% → 82% at 50.45%
 * → Gray 44 (bcfcc20, P1-KIT) at 65.69% and beyond (config tokens.band_end). The 99% / 82% stops
 * mix Black with the kit's Transparent global (bcfcc10, config tokens.transparent; 1.1.2 - no
 * color keyword in this file, the css_hex_lint doctor check enforces it).
 */
.bcfc-band-scrim {
	background-image: linear-gradient(
		90deg,
		var(--bcfc-core-c-text) 0%,
		color-mix(in srgb, var(--bcfc-core-c-text) 99%, var(--bcfc-core-c-transparent)) 38.31%,
		color-mix(in srgb, var(--bcfc-core-c-text) 82%, var(--bcfc-core-c-transparent)) 50.45%,
		var(--bcfc-core-c-band-end) 65.69%
	);
}

/* ==========================================================================
   4. Dynamic tag markup
   ========================================================================== */

/* bcfc-starring (DECISIONS "FIB Single"): one name per line, 20px apart. */
.bcfc-core-line {
	display: block;
}

:where(.elementor-heading-title, .elementor-widget-container):has(> .bcfc-core-line) {
	display: flex;
	flex-direction: column;
	row-gap: var(--bcfc-core-line-gap, 20px);
}

/*
 * bcfc-term-groups chips (Figma 3053:3620): 1px Gray pill, 8/12 padding, 20px apart. The Heading's
 * own typography (12px Futura All Caps) and color (secondary text) style the words.
 */
:where(.elementor-heading-title, .elementor-widget-container):has(> .bcfc-core-chip) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcfc-core-chip-gap, 20px);
}

.bcfc-core-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border: 1px solid var(--bcfc-core-c-accent);
	border-radius: 100px;
	white-space: nowrap;
}

/* ==========================================================================
   5. Shortcode components
   ========================================================================== */

/* Lists reset (every component list). */
.bcfc-core-contact-icons,
.bcfc-core-social,
.bcfc-core-terms,
.bcfc-core-features__list,
.bcfc-core-when--series,
.bcfc-core-list,
.bcfc-core-work__track {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Icons inherit the text color. */
.bcfc-core-icon {
	display: block;
	flex: none;
}

/* [bcfc_contact_icons] - Figma 3053:3297: 34px Boulder Red 4 circles, 18px Boulder Red glyphs, 4px apart. */
.bcfc-core-contact-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bcfc-core-contact-gap, 4px);
}

.bcfc-core-contact-icons .bcfc-core-contact-icons__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--bcfc-core-c-surface-tint);
	color: var(--bcfc-core-c-primary);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bcfc-core-contact-icons .bcfc-core-contact-icons__link:hover {
	color: var(--bcfc-core-c-primary-dark);
}

/*
 * [bcfc_social_links] / [bcfc_share] - Figma 3053:3691 / 3053:5884 / 3053:5106: 20/16px glyphs, 32px
 * from one glyph's edge to the next (glyph x 0 / 52 / 100.5 / 148.5), Black.
 * 1.1.3: the link box is the glyph itself, so the 32px gap is glyph to glyph. 1.1.0-1.1.2 gave every
 * link min 24×24 and the gap came on top, drifting the glyphs +5.75 / +13.5 / +21.5 px right.
 * The 24×24 minimum target (WCAG 2.5.8) is an invisible ::before centered on the glyph; with 32px
 * between glyphs no two targets overlap.
 * 1.1.3: link rules are scoped to their list (specificity 0,2,0). The kit's Theme Style
 * `.elementor-kit-142 a { color: primary }` (0,1,1, printed after core.css) beat the bare
 * `.bcfc-core-social__link { color: inherit }` and painted every glyph Boulder Red at rest instead of
 * Black (reported by P1-FOOTER). Same scoping for the contact icons' colors.
 */
.bcfc-core-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcfc-core-social-gap, 32px);
	color: var(--bcfc-core-social-color, var(--bcfc-core-c-text));
}

.bcfc-core-social > li {
	display: flex;
	align-items: center;
}

/* "Copy link" stays hidden where core.js cannot copy (no Clipboard API): the display above beat [hidden]. */
.bcfc-core-social > li[hidden] {
	display: none;
}

.bcfc-core-social .bcfc-core-social__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: color 0.2s ease;
}

.bcfc-core-social .bcfc-core-social__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 24px);
	height: max(100%, 24px);
	transform: translate(-50%, -50%);
}

.bcfc-core-social .bcfc-core-social__link:hover {
	color: var(--bcfc-core-c-primary);
}

/*
 * [bcfc_share style="boxes"] - Blog 3053:5506: 40×40 Gray (accent) boxes, radius 6, 12px apart,
 * Black glyphs centered (Facebook 20px, the others 18px).
 */
.bcfc-core-share--boxes {
	--bcfc-core-social-gap: 12px;
}

.bcfc-core-share--boxes .bcfc-core-social__link {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background-color: var(--bcfc-core-c-accent);
}

/* [bcfc_share style="icons"] - Event 3053:5882 / Location 3053:5104: a 24px-tall row. */
.bcfc-core-share--icons {
	min-height: 24px;
}

/* [bcfc_terms] */
.bcfc-core-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcfc-core-terms-gap, 20px);
}

.bcfc-core-terms--pill .bcfc-core-terms__item {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border: 1px solid var(--bcfc-core-c-accent);
	border-radius: 100px;
	white-space: nowrap;
}

/* Dot list (Equipment, DECISIONS "CD Single"): 6px Black 50 dots between items. */
.bcfc-core-terms--dots .bcfc-core-terms__item {
	display: inline-flex;
	align-items: center;
	gap: var(--bcfc-core-terms-gap, 20px);
}

.bcfc-core-terms--dots .bcfc-core-terms__item + .bcfc-core-terms__item::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--bcfc-core-c-icon-muted);
}

/*
 * 1.2.1: a dot list that wraps never starts a line with its separator (P3-1120 / P3-2317 / P3-3572
 * deferrals: "the second line starts with a dot"). core.js §16 marks the item that opens a new line
 * (.bcfc-core-line-start) on load, on resize and after FacetWP refreshes; its leading dot goes.
 * Elementor-built meta rows opt in the same way: container class bcfc-core-dot-row, separator widgets
 * class bcfc-core-dot - a separator ending a line keeps its space but is not drawn, one that would start
 * a line leaves the layout.
 */
.bcfc-core-terms--dots .bcfc-core-terms__item.bcfc-core-line-start::before {
	display: none;
}

.bcfc-core-dot-row > .bcfc-core-dot.bcfc-core-dot--line-end {
	visibility: hidden;
}

.bcfc-core-dot-row > .bcfc-core-dot.bcfc-core-dot--line-start {
	display: none !important;
}

.bcfc-core-terms a {
	color: inherit;
	text-decoration: none;
}

.bcfc-core-terms a:hover {
	color: var(--bcfc-core-c-primary);
}

/*
 * [bcfc_location_features] - Figma 3053:5029: groups 40px apart; title (16/600/25, Black) 20px
 * above its items; items 40px apart in both directions; 24px outline icon (Black 50), 6px gap,
 * label in the text style (secondary text color).
 */
.bcfc-core-features {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.bcfc-core-features__group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bcfc-core-features__title {
	margin: 0;
	color: var(--bcfc-core-c-text);
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: var(--e-global-typography-secondary-line-height);
}

.bcfc-core-features__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}

.bcfc-core-features__item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--bcfc-core-c-text-muted);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
}

.bcfc-core-features__icon {
	color: var(--bcfc-core-c-icon-muted);
}

.bcfc-core-features__glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	color: var(--bcfc-core-c-icon-muted);
}

/* [bcfc_event_when] - inherits the widget's typography; series one date per line. */
.bcfc-core-when {
	margin: 0;
}

.bcfc-core-when--series {
	display: flex;
	flex-direction: column;
}

/* [bcfc_event_notice] */
.bcfc-core-event-notice {
	margin: 0;
	color: var(--bcfc-core-c-text);
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: var(--e-global-typography-secondary-line-height);
}

/*
 * [bcfc_event_badge] - "Past Event" (TIM-ANSWERS Q3), the Figma FEATURED pill's anatomy
 * (3053:3283) without the star: Gray fill, 12px Futura All Caps (1.5px tracking), Black,
 * padding 8/12, radius 100.
 */
.bcfc-core-event-badge {
	display: flex;
	margin: 0;
}

.bcfc-core-event-badge__label {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 100px;
	background-color: var(--bcfc-core-c-accent);
	color: var(--bcfc-core-c-text);
	font-family: var(--e-global-typography-2821501-font-family), sans-serif;
	font-size: var(--e-global-typography-2821501-font-size);
	font-weight: var(--e-global-typography-2821501-font-weight);
	line-height: var(--e-global-typography-2821501-line-height);
	letter-spacing: var(--e-global-typography-2821501-letter-spacing);
	text-transform: var(--e-global-typography-2821501-text-transform);
	white-space: nowrap;
}

/* [bcfc_map] */
.bcfc-core-map {
	position: relative;
}

.bcfc-core-map__frame {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--bcfc-core-map-radius, 0);
}

/*
 * 1.3.0: the map's keyboard stop. The iframe is out of the Tab order (Google's controls show no focus
 * ring); this link opens the same place in Google Maps. Visually hidden until focused, then shown over
 * the map's top-left corner, styled like the skip link (Black chip, White Light text and ring).
 */
.bcfc-core-map__open {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bcfc-core-map__open:focus,
.bcfc-core-map__open:focus-visible {
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 24px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border-radius: 8px;
	background-color: var(--bcfc-core-c-text);
	color: var(--bcfc-core-c-surface);
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: var(--e-global-typography-secondary-line-height);
	text-decoration: none;
	outline: 2px solid var(--bcfc-core-c-surface);
	outline-offset: 2px;
}

/* [bcfc_search_proxy] - structure only; the archive package styles the pill. */
.bcfc-core-search-proxy {
	display: flex;
	align-items: center;
	width: 100%;
}

.bcfc-core-search-proxy__input {
	flex: 1 1 auto;
	min-width: 0;
}

.bcfc-core-search-proxy__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* [bcfc_filter_toggle] - small screens only (D-08d). */
.bcfc-core-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.bcfc-core-filter-toggle[aria-expanded="true"] .bcfc-core-filter-toggle__icon {
	transform: rotate(180deg);
}

.bcfc-core-filter-collapsed {
	display: none !important;
}

@media (min-width: 1025px) {

	.bcfc-core-filter-toggle {
		display: none;
	}
}

/*
 * [bcfc_featured_work] - Figma 3053:3632: 576.67×315 slides, radius 8, 20px apart, the track
 * bleeding to the right; dots + 40×40 Boulder Red 4 arrows 80px below.
 */
.bcfc-core-work {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.bcfc-core-work__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.bcfc-core-work__track::-webkit-scrollbar {
	display: none;
}

.bcfc-core-work__slide {
	flex: 0 0 min(576.67px, 85%);
	scroll-snap-align: start;
}

.bcfc-core-work__figure {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.bcfc-core-work__media {
	position: relative;
	aspect-ratio: 576.67 / 315;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--bcfc-core-c-accent);
}

.bcfc-core-work__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bcfc-core-work__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--bcfc-core-c-surface-tint);
	color: var(--bcfc-core-c-primary);
	transform: translate(-50%, -50%);
}

.bcfc-core-work__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.bcfc-core-work__controls[hidden] {
	display: none;
}

.bcfc-core-work__dots {
	display: flex;
	gap: 8px;
}

.bcfc-core-work__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--bcfc-core-c-icon-muted);
	cursor: pointer;
}

.bcfc-core-work__dot[aria-current="true"] {
	background-color: var(--bcfc-core-c-primary);
}

.bcfc-core-work__arrows {
	display: flex;
	gap: 16px;
}

.bcfc-core-work__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--bcfc-core-c-surface-tint);
	color: var(--bcfc-core-c-primary);
	cursor: pointer;
}

.bcfc-core-work__arrow:disabled {
	color: var(--bcfc-core-c-icon-muted);
	cursor: default;
}

/*
 * [bcfc_resource_details] (1.2.0) - a guidance resource opening in place in the Resources list
 * (TIM-ANSWERS "Filming Guidelines"): the loop item (P3-1974) supplies the card chrome; this is the
 * native <details>/<summary>. The title's type is a global (default 33px-Bold-Futura bcfcf05, the
 * list-row title style), overridable per placement through the --bcfc-core-rd-title-* properties
 * (bind them to another var(--e-global-typography-<id>-*)). The chevron rotates like the site's
 * accordions (approved deviation 2026-09-02). Links in the Details are underlined (TIM-ANSWERS Q1)
 * and darken to Black on hover (Q5).
 * 1.2.1: the chevron is the accordions' own glyph (Font Awesome solid, fa-chevron-down = their
 * fa-chevron-up turned 180°) at their timing (0.6s cubic-bezier(.625,.05,0,1), none under reduced
 * motion); a focused summary colors the title Boulder Red like hover; link rules are scoped to the
 * details (0,2,1) because Elementor's later `.elementor a { text-decoration: none }` (0,1,1) won the
 * tie and dropped the underline (P3-1974 carried a row-level override meanwhile).
 */
.bcfc-core-resource-details {
	display: block;
	width: 100%;
}

.bcfc-core-resource-details__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	list-style: none;
	cursor: pointer;
}

.bcfc-core-resource-details__summary::-webkit-details-marker {
	display: none;
}

.bcfc-core-resource-details__summary::marker {
	content: "";
}

.bcfc-core-resource-details__title {
	margin: 0;
	color: var(--bcfc-core-c-text);
	font-family: var(--bcfc-core-rd-title-font-family, var(--e-global-typography-bcfcf05-font-family)), sans-serif;
	font-size: var(--bcfc-core-rd-title-font-size, var(--e-global-typography-bcfcf05-font-size));
	font-weight: var(--bcfc-core-rd-title-font-weight, var(--e-global-typography-bcfcf05-font-weight));
	line-height: var(--bcfc-core-rd-title-line-height, var(--e-global-typography-bcfcf05-line-height));
	letter-spacing: var(--bcfc-core-rd-title-letter-spacing, var(--e-global-typography-bcfcf05-letter-spacing));
	transition: color 0.3s ease;
}

.bcfc-core-resource-details__summary:hover .bcfc-core-resource-details__title,
.bcfc-core-resource-details__summary:focus-visible .bcfc-core-resource-details__title {
	color: var(--bcfc-core-c-primary);
}

.bcfc-core-resource-details__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--bcfc-core-c-text);
	transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.bcfc-core-resource-details__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bcfc-core-resource-details[open] .bcfc-core-resource-details__icon {
	transform: rotate(180deg);
}

.bcfc-core-resource-details__body {
	padding-top: 20px;
	color: var(--bcfc-core-c-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
}

.bcfc-core-resource-details__body > :first-child {
	margin-top: 0;
}

.bcfc-core-resource-details__body > :last-child {
	margin-bottom: 0;
}

.bcfc-core-resource-details__body p,
.bcfc-core-resource-details__body ul,
.bcfc-core-resource-details__body ol {
	margin: 0 0 16px;
}

.bcfc-core-resource-details__body ul,
.bcfc-core-resource-details__body ol {
	padding-left: 24px;
}

.bcfc-core-resource-details__body ul {
	list-style: disc;
}

.bcfc-core-resource-details__body ol {
	list-style: decimal;
}

.bcfc-core-resource-details__body li + li {
	margin-top: 8px;
}

.bcfc-core-resource-details .bcfc-core-resource-details__body a {
	color: var(--bcfc-core-c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bcfc-core-resource-details .bcfc-core-resource-details__body a:hover {
	color: var(--bcfc-core-c-text);
}

/* Visible focus on every Core control (the brief's standing rule). */
.bcfc-core-contact-icons .bcfc-core-contact-icons__link:focus-visible,
.bcfc-core-social .bcfc-core-social__link:focus-visible,
.bcfc-core-terms a:focus-visible,
.bcfc-core-search-proxy__submit:focus-visible,
.bcfc-core-filter-toggle:focus-visible,
.bcfc-core-work__track:focus-visible,
.bcfc-core-work__play:focus-visible,
.bcfc-core-work__dot:focus-visible,
.bcfc-core-work__arrow:focus-visible,
.bcfc-core-resource-details__summary:focus-visible,
.bcfc-core-resource-details .bcfc-core-resource-details__body a:focus-visible {
	outline: 2px solid var(--bcfc-core-c-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.bcfc-core-contact-icons .bcfc-core-contact-icons__link,
	.bcfc-core-social .bcfc-core-social__link,
	.bcfc-core-filter-toggle__icon,
	.bcfc-core-resource-details__title,
	.bcfc-core-resource-details__icon {
		transition: none;
	}

	.bcfc-core-work__track {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   6. State fallbacks (FACETCORE-029b, TIM-ANSWERS Q3)
   Server-side gates (bcfc-core-if-featured / -member / -past on the element) are preferred:
   they print nothing. These CSS rules cover badges built without a gate.
   ========================================================================== */

.bcfc-core-badge--featured,
.bcfc-core-badge--member,
.bcfc-core-badge--past {
	display: none !important;
}

.e-loop-item.bcfc-core-is-featured .bcfc-core-badge--featured,
body.bcfc-core-is-featured .bcfc-core-badge--featured:not(.e-loop-item *),
.e-loop-item.bcfc-core-is-member .bcfc-core-badge--member,
body.bcfc-core-is-member .bcfc-core-badge--member:not(.e-loop-item *),
.e-loop-item.bcfc-core-is-past .bcfc-core-badge--past,
body.bcfc-core-is-past .bcfc-core-badge--past:not(.e-loop-item *),
.elementor-editor-active .bcfc-core-badge--featured,
.elementor-editor-active .bcfc-core-badge--member,
.elementor-editor-active .bcfc-core-badge--past {
	display: var(--display, flex) !important;
}

/* Featured directory card (Figma: Boulder Red 4 card, radius 8) - opt in on the card's container. */
.e-loop-item.bcfc-core-is-featured .bcfc-core-featured-tint {
	border-radius: 8px;
	background-color: var(--bcfc-core-c-surface-tint);
}

/* A section with nothing in it (FACETCORE-025): no Core output, no card, no link. */
.bcfc-core-hide-if-empty:not(:has(.bcfc-core-out, .e-loop-item, a[href])) {
	display: none !important;
}

/* ==========================================================================
   7. Print (CRITIC-022): content only, no chrome over it.
   ========================================================================== */

@media print {

	.elementor-location-header,
	.elementor-location-popup,
	[data-elementor-type="popup"],
	.elementor-popup-modal,
	.bcfc-loader,
	.skip-link,
	.elementor-swiper-button,
	.swiper-pagination,
	.bcfc-core-work__controls,
	.bcfc-core-filter-toggle,
	.bcfc-core-search-proxy,
	.bcfc-core-share,
	.bcfc-core-map,
	.elementor-location-footer .e-con.e-parent:first-child {
		display: none !important;
	}

	body,
	body.bcfc-core-header-offset.bcfc-header--solid {
		margin-top: 0 !important;
	}

	.elementor-sticky,
	.elementor-sticky--active {
		position: static !important;
	}

	/* Carousels print as wrapped grids. */
	.swiper-wrapper,
	.bcfc-core-work__track {
		flex-wrap: wrap !important;
		transform: none !important;
		overflow: visible !important;
	}

	.swiper-slide {
		width: auto !important;
		max-width: 48% !important;
		break-inside: avoid;
	}

	img {
		break-inside: avoid;
	}
}

/* ==========================================================================
   8. One-slide carousels (1.3.3; core.js §13)
   ========================================================================== */

/*
 * Elementor starts no Swiper for a carousel with fewer than two slides (Elementor 4.3 base-swiper.js
 * onInit: `2 > this.elements.$slides.length` returns). Its slide then keeps swiper.css's
 * width: 100%, because Elementor Pro's pre-init cap (widget-loop-carousel.css) targets
 * `.swiper--slide`, a class no slide carries: one upcoming event on Sundance (614 › b4d522b) was a
 * 1280×463 card at 1440 (Figma 3053:4241: 413×463) with its 640px image shown 1280 wide, and the
 * two arrows stayed tab stops that do nothing. The lone slide gets the width of one slide of its
 * breakpoint, from the widget's own --swiper-slides-to-display and --swiper-slides-gap (as Swiper
 * would size it; 1 and 0 when a widget sets neither, i.e. full width), and the arrows and dots
 * leave the layout and the Tab order.
 *
 * Matched two ways. With :has(): a .swiper that Swiper never initialized whose wrapper holds no
 * second slide - before any script runs, so the card never flashes full width. And by the class
 * core.js §13 puts on the widget, for browsers without :has() (a separate rule: one unsupported
 * selector drops its whole rule). Only the carousel's own slides, arrows and dots are matched
 * (child and sibling combinators), never those of a carousel inside its slide. The width rules sit in
 * :where() (specificity 0): a document that lays out its own single slide keeps its rule (Membership
 * 1383 › 0e4bce7 centers its one 630px card at ≤1024px).
 */
:where(.swiper:not(.swiper-initialized):not(:has(> .swiper-wrapper > .swiper-slide ~ .swiper-slide)) > .swiper-wrapper > .swiper-slide) {
	max-width: calc((100% - (var(--swiper-slides-to-display, 1) - 1) * var(--swiper-slides-gap, 0px)) / var(--swiper-slides-to-display, 1));
}

.swiper:not(.swiper-initialized):not(:has(> .swiper-wrapper > .swiper-slide ~ .swiper-slide)) > .elementor-swiper-button,
.swiper:not(.swiper-initialized):not(:has(> .swiper-wrapper > .swiper-slide ~ .swiper-slide)) > .swiper-pagination,
.swiper:not(.swiper-initialized):not(:has(> .swiper-wrapper > .swiper-slide ~ .swiper-slide)) ~ .elementor-swiper-button,
.swiper:not(.swiper-initialized):not(:has(> .swiper-wrapper > .swiper-slide ~ .swiper-slide)) ~ .swiper-pagination {
	display: none !important;
}

:where(.bcfc-core-carousel--single > .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide),
:where(.bcfc-core-carousel--single > .elementor-widget-container > .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide) {
	max-width: calc((100% - (var(--swiper-slides-to-display, 1) - 1) * var(--swiper-slides-gap, 0px)) / var(--swiper-slides-to-display, 1));
}

.bcfc-core-carousel--single > .swiper > .elementor-swiper-button,
.bcfc-core-carousel--single > .swiper > .swiper-pagination,
.bcfc-core-carousel--single > .swiper ~ .elementor-swiper-button,
.bcfc-core-carousel--single > .swiper ~ .swiper-pagination,
.bcfc-core-carousel--single > .elementor-widget-container > .swiper > .elementor-swiper-button,
.bcfc-core-carousel--single > .elementor-widget-container > .swiper > .swiper-pagination,
.bcfc-core-carousel--single > .elementor-widget-container > .swiper ~ .elementor-swiper-button,
.bcfc-core-carousel--single > .elementor-widget-container > .swiper ~ .swiper-pagination {
	display: none !important;
}

/* ==========================================================================
   9. Site fixes (1.4.0, Round 1)
   ========================================================================== */

/*
 * Tab titles ("just add the pointer cursor ... for all tabs"). Elementor's nested tabs leave the pointer
 * to the theme's button reset, and Hello's reset.css is switched off on this site, so a tab title showed
 * the arrow (Home 13 › 96622c2, Sundance 614 › 683f4b8, Plan Your Production 1140 › 2496f7d). The class
 * is on the <button>, so the whole hit area gets the pointer, not only the letters.
 */
.elementor-widget-n-tabs .e-n-tab-title {
	cursor: pointer;
}

/*
 * Popups with Elementor's "Disable Page Scrolling" ("I can't scroll when this opens": Report This
 * Listing 4376). Elementor puts .dialog-prevent-scroll { max-height: 100vh; overflow: hidden } on
 * <body>. That lock relies on <body>'s overflow being handed to the viewport, which only happens while
 * <html> is overflow: visible; the kit clips <html> sideways (overflow-x: clip), so <body> itself became
 * the clipping box: the document was cut to one screen, the page jumped to the top and stayed there
 * after the popup closed. Lock the root instead and leave <body> its height. Elementor's selector is one
 * class, so these win without !important.
 */
html:has(> body.dialog-prevent-scroll) {
	overflow-y: hidden;
}

body.dialog-prevent-scroll {
	max-height: none;
	overflow: visible;
}

/*
 * core.js §19 holds the page for as long as a locking popup is open, counted: the class stays until
 * the last one closes (Elementor drops its own body class as soon as the first of two closes), and it
 * also serves browsers without :has().
 */
html.bcfc-core-scroll-held {
	overflow-y: hidden;
}

/*
 * A box that scrolls on its own inside the page (opt-in class, Advanced → CSS Classes; core.js §19 marks
 * it for the widget pack's smooth scroll, which otherwise takes the wheel): its ends do not hand the
 * scroll on to the page behind.
 */
.bcfc-core-own-scroll {
	overscroll-behavior: contain;
}

/* ==========================================================================
   10. Site header (1.4.0, Round 1). Template 725: Header container .bcfc-header, Mega Menu
   widget .bcfc-mega-menu, item "Film in Boulder" #film-in-boulder; body.bcfc-header--transparent
   or --solid from Site\Header_Variant.

   The header's EFFECTS are the widget pack's Header Effects extension (fill on hover and focus,
   ink, the blurred page behind an open panel, the panel reveal, the smaller header once stuck).
   This section holds what is this site's design and no effect: where the header sits on a photo
   page and how tall it is there, the photo scrim under it, the menu's hit areas and focus rings,
   the "Film in Boulder" button, the panel links and photo cards, the Next Event card.

   Until the extension is switched on for 725, the same rules are still in the Custom CSS of the
   Header (a0e0f61) and the Mega Menu (cfb969e): those selectors are heavier and the values are
   the same, so nothing moves while both are there. That Custom CSS is deleted in the save that
   switches the extension on, and the header keeps its place and size (measured). Without either,
   the header is still complete: filled, color logo, Black rings, 108px tall at rest.

   Three rules follow the extension's own class, .bcfc-hfx, on the Header:
     - the at-rest height WAITS for it (the old logo box still makes that height today);
     - the old logo's stacked artwork WAITS for it (today the Logo Artwork widget a778e81 styles
       itself; the extension's roll-out deletes that Custom CSS);
     - the open item's color STANDS DOWN with it (the extension colors the open item and has a
       control for it; a rule here would outrank that control).
   ========================================================================== */

/* Transparent variant: the header is an overlay on the hero, directly under the pencil banner. */
body.bcfc-header--transparent .elementor-location-header .bcfc-header.e-con {
	--position: absolute;
}

/*
 * ...and 125px tall at rest at ≥1025px (Figma 3053:3117), by padding: the template's own padding makes
 * 108 (92 at ≤767), which is every other state's rest height. Once stuck the extension's shrink takes
 * over (it reads Elementor's .elementor-sticky--effects, as core.js §1 does to measure the stuck height).
 */
@media (min-width: 1025px) {

	body.bcfc-header--transparent .elementor-location-header .bcfc-header.bcfc-hfx.e-con:not(.elementor-sticky--effects) {
		--padding-top: 32.5px;
		--padding-bottom: 32.5px;
	}
}

/*
 * Logo link (725 › 53cac60): the keyboard ring, in the header's ink like the menu rings below.
 */
.elementor-location-header .bcfc-header .elementor-element-53cac60:focus-visible {
	outline: 2px solid var(--bcfc-hfx-ink, var(--bcfc-nav-ring, var(--e-global-color-text)));
	outline-offset: 4px;
	border-radius: 4px;
}

/*
 * The old logo (HTML widget 725 › a778e81: span.bcfc-logo holding the color and the reverse SVG), for
 * the time between switching the Header Effects extension on - which deletes that widget's Custom CSS,
 * whose two logo sizes and unclocked opacity fight the extension - and replacing the widget with the
 * pack's Logo widget. Both drawings sit in one 282 × 60 box at the SAME size and cross-fade on the
 * header's clock; --bcfc-hfx-light is 1 while the header is clear over a photo. With the Logo widget in
 * the header these rules match nothing: delete them then.
 */
.elementor-location-header .bcfc-header.bcfc-hfx .bcfc-logo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 282 / 60;
}

.elementor-location-header .bcfc-header.bcfc-hfx .bcfc-logo svg {
	position: absolute;
	top: 50%;
	left: 0.355%;
	display: block;
	width: 99.397%;
	height: auto;
	translate: 0 -50%;
	transition: opacity var(--bcfc-hfx-clock, 0.3s) var(--bcfc-hfx-ease, ease);
}

/* As a panel opens the extension marks the header for two frames: a cross-fade still running is cut to its end. */
.elementor-location-header .bcfc-header.bcfc-hfx[data-bcfc-hfx-opening] .bcfc-logo svg {
	transition: none;
}

.elementor-location-header .bcfc-header.bcfc-hfx .bcfc-logo .logo-color {
	opacity: calc(1 - var(--bcfc-hfx-light, 0));
}

.elementor-location-header .bcfc-header.bcfc-hfx .bcfc-logo .logo-reverse {
	opacity: var(--bcfc-hfx-light, 0);
}

/*
 * Header-zone photo scrim on transparent pages (TIM-ANSWERS Q1: "photo overlays ... never on the
 * header"; A11Y-011). Painted on the PAGE, not on the header: a gradient on the top of <main>, from
 * Black 60 to Transparent, so the White Light navigation and the light logo stay legible over any
 * photo. It sits above the hero's slides (Elementor carousels stack at z-index 1) and ends above the
 * first hero text at every breakpoint. Heights 189 / 156 / 112px, solid Black 60 through the logo and
 * navigation band (95 / 84 / 72px). Black 60, not Black 50: over a white photo area Black 50 caps White
 * Light text at 4.0:1, Black 60 keeps it at 5.2:1 or more.
 */
body.bcfc-header--transparent main#content {
	position: relative;
}

body.bcfc-header--transparent main#content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 189px;
	pointer-events: none;
	background-image: linear-gradient(180deg, var(--e-global-color-bcfcc23) 0, var(--e-global-color-bcfcc23) 95px, var(--e-global-color-bcfcc10) 100%);
}

@media (max-width: 1024px) {

	body.bcfc-header--transparent main#content::before {
		height: 156px;
		background-image: linear-gradient(180deg, var(--e-global-color-bcfcc23) 0, var(--e-global-color-bcfcc23) 84px, var(--e-global-color-bcfcc10) 100%);
	}
}

@media (max-width: 767px) {

	body.bcfc-header--transparent main#content::before {
		height: 112px;
		background-image: linear-gradient(180deg, var(--e-global-color-bcfcc23) 0, var(--e-global-color-bcfcc23) 72px, var(--e-global-color-bcfcc10) 100%);
	}
}

/*
 * Mega menu. Dropdown toggles: Elementor's toggle button (0 × 0 without an icon) is stretched over its
 * label, so the whole label is the target and the keyboard ring is visible (A11Y-002: no chevrons, the
 * Figma look kept). The ring takes the header's ink: --bcfc-hfx-ink is published by the Header Effects
 * extension (White Light over a photo, Black on the filled header); before it, --bcfc-nav-ring from the
 * template's Custom CSS; else Black.
 */
.bcfc-header .bcfc-mega-menu .e-n-menu-heading {
	align-items: center;
}

.bcfc-header .bcfc-mega-menu .e-n-menu-title {
	position: relative;
}

.bcfc-header .bcfc-mega-menu .e-n-menu-title .e-n-menu-dropdown-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 4px;
	cursor: pointer;
}

.bcfc-header .bcfc-mega-menu .e-n-menu-title .e-n-menu-dropdown-icon:focus {
	outline: none;
}

.bcfc-header .bcfc-mega-menu .e-n-menu-title:has(.e-n-menu-dropdown-icon:focus-visible),
.bcfc-header .bcfc-mega-menu .e-n-menu-title-container:focus-visible {
	outline: 2px solid var(--bcfc-hfx-ink, var(--bcfc-nav-ring, var(--e-global-color-text)));
	outline-offset: 4px;
	border-radius: 4px;
}

/*
 * The item whose panel is open is Boulder Red (Figma 3053:2454 / 2476 / 2423); the button keeps its White
 * Light label. Only while the Header Effects extension is NOT on this header: the extension colors the open
 * item itself (its Open Item Color control, else the Mega Menu widget's Hover color, which is Boulder Red),
 * and this selector - an id inside :not() - would outrank it and leave that control without effect.
 */
.bcfc-header:not(.bcfc-hfx) .bcfc-mega-menu .e-n-menu-title:not(#film-in-boulder):has(.e-n-menu-dropdown-icon[aria-expanded="true"]) .e-n-menu-title-text {
	color: var(--e-global-color-primary);
}

/*
 * "Film in Boulder" opens the Film in Boulder panel, so it stays a menu item, drawn in the widget
 * pack's button design (no icon, as the Menu button): padding 18 / 28, radius 8, Boulder Red with a
 * White Light label, Boulder Red Dark on hover (TIM-ANSWERS Q4 / Q5), the press scale, a 2px focus ring.
 * The same in every header state.
 */
.bcfc-header .bcfc-mega-menu #film-in-boulder {
	padding: 18px 28px;
	border-radius: 8px;
	background-color: var(--e-global-color-primary);
	cursor: pointer;
	transition: background-color 0.3s ease, scale 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.bcfc-header .bcfc-mega-menu #film-in-boulder .e-n-menu-title-text {
	color: var(--e-global-color-secondary);
}

.bcfc-header .bcfc-mega-menu #film-in-boulder:hover {
	background-color: var(--e-global-color-3ed7e1d);
}

.bcfc-header .bcfc-mega-menu #film-in-boulder:active {
	scale: 0.97 0.94;
}

.bcfc-header .bcfc-mega-menu #film-in-boulder .e-n-menu-dropdown-icon {
	border-radius: 8px;
}

.bcfc-header .bcfc-mega-menu #film-in-boulder:has(.e-n-menu-dropdown-icon:focus-visible) {
	outline-offset: 2px;
	border-radius: 8px;
}

/* Panel text links (TIM-ANSWERS Q5): the title turns Boulder Red; the keyboard ring is Black on the White Light panel. */
.bcfc-header .bcfc-mega-menu .bcfc-mega-link:is(:hover, :focus-visible) .bcfc-mega-title .elementor-heading-title {
	color: var(--e-global-color-primary);
}

.bcfc-header .bcfc-mega-menu .bcfc-mega-link:focus-visible {
	outline: 2px solid var(--e-global-color-text);
	outline-offset: 4px;
}

/*
 * Panel photo cards that are still link containers (class bcfc-mega-card): the title on the photo turns
 * Gray (the kit's accent color), the keyboard ring is Black. They match nothing once a card is the pack's Call to Action widget.
 */
.bcfc-header .bcfc-mega-menu .bcfc-mega-card:is(:hover, :focus-visible) .bcfc-mega-title .elementor-heading-title {
	color: var(--e-global-color-accent);
}

.bcfc-header .bcfc-mega-menu .bcfc-mega-card:focus-visible {
	outline: 2px solid var(--e-global-color-text);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

	.bcfc-header .bcfc-mega-menu #film-in-boulder,
	.elementor-location-header .bcfc-header.bcfc-hfx .bcfc-logo svg {
		transition: none;
	}
}

/*
 * The Next Event card (loop item "Events - Mega Menu - Loop Item": the header's Events panel and the
 * Mobile Menu popup, so these rules are not scoped to the header). Classes set in the loop item:
 * bcfc-mega-event on the card container, bcfc-mega-event-image on its Image widget, bcfc-mega-title on
 * the title Heading (a link to the event).
 *
 * The picture keeps the flyer ratio at every column width (event images are 16:9 flyers with printed
 * text; the Image widget has no ratio control).
 */
.bcfc-mega-event-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * One click target (the house stretched-link pattern, as the Home event card 1301): on the front end the
 * title link's ::after covers the card, its nearest positioned ancestor; everything between the two is
 * static. The Event Details button stays above it through its own Z-Index control (2). In the editor none
 * of this applies, so every element stays selectable.
 *
 * --z-index: auto on the containers inside the card: Elementor gives every container
 * `--z-index: revert; z-index: var(--z-index)`, and `revert` on a custom property means the inherited
 * value, so each container nested in the Header (Z-Index 100) computes z-index 100. A flex item with a
 * z-index is a stacking context even when static: the card's text container then lifted the title's
 * overlay above the button, whatever the button's own Z-Index (measured: the button was not hit).
 */
body:not(.elementor-editor-active) .bcfc-mega-event {
	--position: relative;
}

body:not(.elementor-editor-active) .bcfc-mega-event .e-con {
	--position: static;
	--z-index: auto;
}

body:not(.elementor-editor-active) .bcfc-mega-event .bcfc-mega-title {
	position: static;
}

body:not(.elementor-editor-active) .bcfc-mega-event .bcfc-mega-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 8px;
}

/* The keyboard ring is drawn round the whole card (on the overlay), not round the title's letters. */
body:not(.elementor-editor-active) .bcfc-mega-event .bcfc-mega-title a:focus-visible {
	outline: none;
}

body:not(.elementor-editor-active) .bcfc-mega-event .bcfc-mega-title a:focus-visible::after {
	outline: 2px solid var(--e-global-color-text);
	outline-offset: 4px;
}

/* ==========================================================================
   11. Directory carousels that bleed past the grid (1.5.1)
   ========================================================================== */

/*
 * Home 13 › 0887cdb / 97bef17 and Membership 1383 › e0b325c / 0e4bce7 (Figma 3053:2913 in frame 3053:2895,
 * 3053:4681): the Featured Directory Carousel's slides run past the 1280 grid to the edge of the screen and
 * the section clips them there. From Round 1 (2026-10-13) to 1.5.1 these rules were the four elements' own
 * Custom CSS; the values are the same, and the elements now carry classes instead (Advanced → CSS Classes).
 *
 * .bcfc-core-clip, on a container: overflow: clip on top of the container's own Overflow: Hidden (keep the
 * control at Hidden; Elementor prints overflow: var(--overflow) on .e-con). A Hidden box can still be scrolled
 * by the browser, and Safari scrolls the whole section sideways when Find on Page lands in an off-screen slide
 * (heading, buttons and grid slide out of view and nothing scrolls them back; WebKit, 8 slides at 1440: the
 * section's scrollLeft 0 -> 2504). A clipped box cannot scroll. The control has no Clip value; a browser that
 * does not know the value (Safari before 16) drops the rule and keeps Hidden.
 */
.e-con.bcfc-core-clip {
	overflow: clip;
}

/*
 * .bcfc-core-carousel-bleed, on a Loop Carousel whose section clips it:
 *  - the track is not clipped by Swiper (its slides bleed to the section's edge; the Loop Carousel has no
 *    control for the track's overflow);
 *  - until Swiper starts, every slide is one slide of its breakpoint wide, from the widget's own
 *    --swiper-slides-to-display and --swiper-slides-gap (2 per view above 880 on both pages: (100% - 20px) / 2;
 *    one per view below: full width), and the arrows are not shown. Elementor never starts Swiper for one slide
 *    (frontend-modules CarouselHandlerBase.onInit), so with one featured listing that state stays and the arrows,
 *    which could do nothing, stay hidden;
 *  - the arrows get a visible keyboard ring (HOME-037; Pro has no focus-state control);
 *  - a lone card is centered like the centered carousel, at 881px and wider (one per view below: full width).
 *    Only a card that is the only slide is matched, not "Swiper has not started": several slides start at the
 *    first card while the script is still loading.
 * .bcfc-core-carousel-bleed--capped (Membership): the lone card is centered at every width and never wider than
 * Figma's 630px card (3053:4682).
 */
.elementor-widget.bcfc-core-carousel-bleed .swiper {
	overflow: visible;
}

.elementor-widget.bcfc-core-carousel-bleed:has(.swiper:not(.swiper-initialized)) .elementor-swiper-button {
	display: none;
}

.elementor-widget.bcfc-core-carousel-bleed .elementor-swiper-button:focus-visible {
	outline: 2px solid var(--bcfc-core-c-text);
	outline-offset: 2px;
}

.elementor-widget.bcfc-core-carousel-bleed .swiper:not(.swiper-initialized) .swiper-slide {
	width: calc((100% - (var(--swiper-slides-to-display, 1) - 1) * var(--swiper-slides-gap, 0px)) / var(--swiper-slides-to-display, 1));
}

@media (min-width: 881px) {

	.elementor-widget.bcfc-core-carousel-bleed .swiper-slide:only-of-type {
		margin-inline: auto;
	}
}

.elementor-widget.bcfc-core-carousel-bleed--capped .swiper-slide:only-of-type {
	max-width: 630px;
	margin-inline: auto;
}