/**
 * CBV component styles — Hero, Header, Footer.
 *
 * Loaded directly (not via the webpack build) so pattern/part styling
 * is guaranteed regardless of build state. Uses theme.json preset vars.
 *
 * @package CBV
 */

/* ==========================================================================
   Typography scale (fluid, rem-based)

   Shared heading sizes so the hero / feature / page-header titles all scale
   identically from mobile → desktop without per-component overrides.
   ========================================================================== */

:root {
	/* Display title (hero, video-feature, page header): 28px → 48px. */
	--cbv-fs-display: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);

	/* Reusable colours not covered by the theme.json palette
	   (--wp--preset--color--* already provides primary/navy/accent/border/etc.). */
	--cbv-border-light: #b4bbc2;        /* jump-menu / stat-cell borders */
	--cbv-border-muted: #cfcfd8;        /* input / control borders */
	--cbv-divider: #e4e4ea;             /* subtle content dividers */
	--cbv-surface-muted: #f2f4f6;       /* light grey surface / hover */
	--cbv-surface-navy: #221c58;        /* secondary navy / purple surface */
	--cbv-surface-teal-light: #b3f1f1;  /* bright teal jump-menu / info surface */
	--cbv-text-muted: #585e64;          /* muted grey body text */
	--cbv-accent-hover: #57b7b6;        /* teal button hover */
	--cbv-accent-light-hover: #d7ebeb;  /* light-blue item hover */
	--cbv-surface-teal-light-hover: #9de9e9; /* bright teal item hover */
	--cbv-link-hover: #4362cf;          /* accessible blue link hover (WCAG AA on white) */
}

.cbv-hero__title,
.cbv-hero__title .stk-block-heading__text,
.cbv-video-feature__title,
.cbv-page-header__title {
	font-size: var(--cbv-fs-display);
	line-height: 1.15;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.cbv-hero {
	position: relative;
	overflow: hidden;
	/* Figma hero uses Surface/canvas (#221C58) — the same navy as the page
	   header — not the indigo "primary". */
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
}

/* Heroes inserted from the older pattern carry has-primary-background-color
   (WP sets it !important); override so their background matches the design. */
.cbv-hero.has-primary-background-color {
	background-color: var(--cbv-surface-navy) !important;
}

/* Sit flush against the header (cancel the block-gap above <main>). */
.cbv-hero.alignfull {
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
}

/* Force true full-bleed at all widths (viewport-centered). !important beats
   the theme's mobile alignfull rule, which otherwise insets it 20px. */
.cbv-hero.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Give the hero presence and let the two columns fill its height so the
   image can anchor to the bottom edge and the text can center vertically. */
.cbv-hero .wp-block-columns {
	min-height: 640px;
	align-items: stretch;
	/* The theme's content-size is a narrow 800px reading measure, and the hero
	   Columns block isn't aligned wide — so the constrained-layout rule would cap
	   it at 800px and centre it, pushing the text column ~216px in from the left.
	   The hero is a full-width band; span the wide (1280) measure so the text
	   column's left edge lines up with the logo/nav instead. */
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

.cbv-hero .wp-block-column.is-vertically-aligned-bottom {
	justify-content: flex-end;
}

/* Triangle field — full-bleed on the right, faded toward the left. Uses the
   design's triangles.svg (a single composed field, not a repeating tile). */
.cbv-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../images/triangles.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.35) 45%, #000 72%);
	mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.35) 45%, #000 72%);
	pointer-events: none;
	z-index: 0;
}

/* Diagonal accent in the bottom-right corner, sitting above the hero image. */
.cbv-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(561px, 42vw);
	aspect-ratio: 561 / 191;
	background: url(../images/bottom-right-accent.svg) no-repeat bottom right;
	background-size: contain;
	pointer-events: none;
	z-index: 3;
}

.cbv-hero > * {
	position: relative;
	z-index: 2;
}

.cbv-hero__eyebrow {
	margin: 0 0 1rem;
}

.cbv-hero__eyebrow .stk-block-text__text {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Title margins (were inline on the core heading: 30 top / 40 bottom). */
.cbv-hero__title {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.cbv-hero__title .stk-block-heading__text {
	color: var(--wp--preset--color--accent);
}

/* Summary paragraph (was white / medium / 50 bottom margin inline). */
.cbv-hero__summary {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cbv-hero__summary .stk-block-text__text {
	color: var(--wp--preset--color--white);
}

/* Right column holds the cut-out image, anchored to the bottom edge. */
.cbv-hero__media {
	margin: 0;
	align-self: flex-end;
}

.cbv-hero__media img {
	display: block;
	width: auto;
	max-height: 600px;
	margin-inline: auto;
	margin-block-end: 0;
}

/* Text-link style button ("Find a CBV ›") */
.wp-block-button.is-style-cbv-text-link .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	padding-inline: 0.5rem;
	border-radius: 0;
	font-weight: 700;
}

.wp-block-button.is-style-cbv-text-link .wp-block-button__link:hover,
.wp-block-button.is-style-cbv-text-link .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* White outline button (e.g. hero secondary CTA "Become a CBV"). */
.wp-block-button.is-style-cbv-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
}

.wp-block-button.is-style-cbv-outline .wp-block-button__link:hover,
.wp-block-button.is-style-cbv-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Nav-over-hero (desktop). On any page that contains a hero, the nav (utility
   bar + main nav) gets a translucent navy tint and the hero slides up beneath
   it so the triangle field reads through the navigation (per the design:
   rgba(19,16,50,0.7) over the hero). --cbv-nav-h is the combined rendered
   height of the utility bar (~66px) + main nav (~91px).
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	:root {
		--cbv-nav-h: 157px;
	}

	/* Translucent navy so the hero/header triangles read through both nav rows.
	   z-index must clear the sticky jump menu (.cbv-jump-menu, z-index:30) so the
	   Max Mega Menu panel — which drops down out of the header — paints over the
	   jump bar instead of behind it. */
	body:has(.cbv-hero) .cbv-topbar.has-background,
	body:has(.cbv-hero) .cbv-mainnav.has-background,
	body:has(.cbv-page-header) .cbv-topbar.has-background,
	body:has(.cbv-page-header) .cbv-mainnav.has-background {
		position: relative;
		z-index: 40;
		background-color: rgba(19, 16, 50, 0.7) !important;
	}

	/* Pull the hero up beneath the whole nav, then restore the content offset
	   with an equal top padding so the copy still clears the nav. */
	body:has(.cbv-hero) .cbv-hero.alignfull {
		margin-top: calc(-1 * (var(--wp--preset--spacing--40) + var(--cbv-nav-h)));
		/* Just enough to clear the overlaid nav (matches the design's ~813px hero;
		   spacing--70 here over-inflated it, leaving dead field above the image). */
		padding-top: calc(var(--wp--preset--spacing--40) + var(--cbv-nav-h)) !important;
	}

	/* Same treatment for the branded page header (template-level, sits directly
	   under the site header group). */
	body:has(.cbv-page-header) .cbv-page-header {
		margin-top: calc(-1 * var(--cbv-nav-h));
	}

	/* The full-bleed breadcrumb band is the header's first child; push it clear
	   of the overlaid nav. The hero content then follows it with only its normal
	   top padding (the nav offset is no longer needed on __inner). */
	body:has(.cbv-page-header) .cbv-breadcrumbs {
		margin-top: var(--cbv-nav-h);
	}

	body:has(.cbv-page-header) .cbv-page-header__inner {
		padding-top: var(--wp--preset--spacing--50);
	}

	/* Let the hero image fill the column height and anchor to the bottom, so the
	   figure reads large (like the design's tall portrait cutout) instead of
	   floating short in a sea of triangle field. object-position keeps her head
	   in frame while the bottom (torso) is cropped by the band, as in the design. */
	/* Text sits in the left half (Figma splits the hero 50/50). */
	.cbv-hero .wp-block-column.is-vertically-aligned-center {
		flex-basis: 50% !important;
	}

	/* Per the Figma the figure is large, bottom-anchored, and bleeds to the hero's
	   right edge (image box ≈ 80% of the hero height, right edge flush, left edge
	   overlapping toward centre). Pull it out of the column and anchor it to the
	   hero's bottom-right so it fills the right side instead of being boxed into —
	   and capped by — the 1280 content column. It's a full-frame cutout, so
	   `contain` keeps her whole. */
	.cbv-hero__media {
		position: absolute;
		/* The positioning context is the 1280 columns wrapper, so right:0 would
		   stop at the content edge and leave triangles to her right. Offset out to
		   the true viewport edge (the columns are centred, so half the difference). */
		right: calc((100% - 100vw) / 2);
		bottom: 0;
		/* ~80% of the hero height, scaled to the frame width like the Figma (her box
		   is 652 tall in the 1440 frame ≈ 45vw), capped on ultrawide. The floor is
		   kept modest so she doesn't crowd the text at the 992px desktop minimum. */
		height: clamp(480px, 45vw, 760px);
		margin: 0;
		z-index: 1;
		pointer-events: none;
	}

	.cbv-hero__media img {
		width: auto;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: contain;
		object-position: right bottom;
		display: block;
	}
}

/* Editor: the desktop hero image is absolutely positioned out to the true
   viewport edge (right: calc((100% - 100vw)/2)) for a full-bleed cutout on the
   front end, and is pointer-events:none. In the narrower/offset editor canvas
   that pushes it off-screen, so it "disappears" and can't be selected. Render
   it in normal flow in the editor instead so it's visible and editable. Front
   end is unaffected. */
.editor-styles-wrapper .cbv-hero__media {
	position: static !important;
	right: auto !important;
	bottom: auto !important;
	height: auto !important;
	pointer-events: auto !important;
}

/* Constrain by width (fit the column), not max-height: a max-height clip leaves
   the image block's resize handles sized to the un-clipped height, so they float
   over the middle of the image and make it awkward to select/replace. Width-only
   keeps the displayed image and its handles in sync. */
.editor-styles-wrapper .cbv-hero__media img {
	position: static !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	margin-inline: auto;
}

@media (max-width: 991px) {
	/* Sit the hero flush under the mobile nav (no desktop nav-overlay here):
	   cancel the root block-gap above <main> (spacing-40, 24px) plus <main>'s own
	   20px mobile top padding (from the has-global-padding constrained-group rule).
	   The previous value cancelled spacing-60 (64px) instead of main's real 20px
	   padding, overshooting by ~44px and tucking the hero — and the subject's head
	   — up behind the solid navy bar. Breakpoint matches the nav's mobile switch
	   (991px) so the hero goes to its stacked mobile layout exactly when the nav
	   does — no desktop-hero-with-mobile-nav in-between zone. */
	.cbv-hero.alignfull {
		margin-top: calc(-1 * (var(--wp--preset--spacing--40) + 20px));
	}

	.cbv-hero .wp-block-columns {
		flex-direction: column-reverse;
		/* Drop the desktop 717px min-height so the media area hugs the image
		   (otherwise the triangle field balloons above the woman). */
		min-height: 0;
		align-items: stretch;
	}

	/* Text column: 32px top/bottom padding on mobile (overrides the pattern's
	   inline desktop padding of 40px top / 96px bottom). */
	.cbv-hero .wp-block-column.is-vertically-aligned-center {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.cbv-hero__media {
		position: relative;
	}

	.cbv-hero__media img {
		max-height: 420px;
	}

	/* Replace the desktop bottom-right corner with a full-width diagonal band
	   under the image (matches the mobile design). */
	.cbv-hero::after {
		display: none;
	}

	.cbv-hero__media::after {
		content: "";
		position: absolute;
		/* Full-bleed across the whole hero, ignoring any column padding. */
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		bottom: -1px;
		height: 3rem;
		background: url(../images/hero-band.svg) no-repeat center bottom;
		background-size: 100% 100%;
		pointer-events: none;
		/* Sit in front of the cut-out image (img is z-index:1) so the diagonal
		   band crosses the figure's base, as in the design. */
		z-index: 2;
	}

	/* Triangle field fills the top image area full-width and fades out before
	   the copy (mobile design), rather than the desktop right-to-left mask.
	   `cover` scales the 6000×4000 field enormously at phone widths, so the
	   triangles read as huge blocks. Pin an explicit background-size instead:
	   at ~660px the 73-unit source triangles render ~8px wide with ~14px gaps —
	   the small, dense scatter the mobile design shows. */
	/* Mobile uses its own arrow graphic (mobile-hero-arrows.svg) behind the top
	   of the hero. Render it as a pseudo-element on the media box itself, not on
	   .cbv-hero, so the arrow field is bounded to the figure's own box and can
	   NEVER bleed past the bottom of .cbv-hero__media — regardless of the cut-out
	   image's aspect ratio. (A viewport-height calc on .cbv-hero::before was only
	   an approximation of the figure's base and overshot when the image aspect
	   differed from the design's 0.731 cut-out.) The desktop right-to-left
	   triangles.svg field is switched off for this stacked mobile layout. */
	.cbv-hero::before {
		display: none;
	}

	.cbv-hero__media::before {
		content: "";
		position: absolute;
		/* Bottom is bound to the media box (bottom: 0), so the arrows always end
		   exactly at the figure's base (the diagonal band) and the copy area below
		   stays clean navy. Top is pulled up by 20px to cover the hero's mobile
		   top padding (set on .wp-block-group.has-global-padding … below), so the
		   arrow field reaches the very top of the hero — under the translucent nav
		   — with no bare navy strip, matching the design. */
		top: -20px;
		bottom: 0;
		/* Full-bleed width across the hero, ignoring the column padding. */
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		background-image: url(../images/mobile-hero-arrows.svg);
		background-repeat: no-repeat;
		background-position: center top;
		/* `cover` scales the arrow field to fill the box; `center top` crops any
		   overflow at the bottom edge, which the diagonal band then caps. */
		background-size: cover;
		pointer-events: none;
		z-index: 0;
	}

	/* Keep the cut-out figure above the arrow field behind it. */
	.cbv-hero__media img {
		position: relative;
		z-index: 1;
	}

	/* Title uses 16px top/bottom margins on mobile (overrides the pattern's
	   inline desktop margins). */
	.cbv-hero__title {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	/* CTAs stack full-width, 24px apart. */
	.cbv-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 24px;
	}

	.cbv-hero .wp-block-button {
		width: 100%;
	}

	.cbv-hero .wp-block-button .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
}

/* ==========================================================================
   Hero — Standard Image variant — patterns/hero-standard-image.php
   Same navy full-bleed hero, triangle field, typography, and nav-overlay
   behavior as Hero (CBV), but the right column holds a standard rectangular
   image (contained, rounded, vertically centred) instead of the bottom-
   anchored cut-out that bleeds to the viewport edge.
   ========================================================================== */

/* The bottom-right diagonal accent (::before triangle field and ::after wave)
   are inherited from the base .cbv-hero — kept here, matching Hero (CBV). */

/* Standard rectangle: fills its column width (stretch is the column's cross
   axis — horizontal), rounded corners. Vertical position is set on the column
   itself, not here. */
.cbv-hero--standard-image .cbv-hero__media {
	align-self: stretch;
}

.cbv-hero--standard-image .cbv-hero__media img {
	width: 100%;
	height: auto;
	max-height: none;
	margin-inline: 0;
}

@media (min-width: 992px) {
	/* Remove the hero's bottom padding so the image can reach the bottom edge
	   where the wave accent sits — no navy gap between the image and the wave. */
	body:has(.cbv-hero--standard-image) .cbv-hero.alignfull {
		padding-bottom: 0 !important;
	}

	/* Image column fills the hero's height rather than centring the shorter
	   column (both columns carry is-vertically-aligned-center), so the image can
	   run top-to-bottom. */
	.cbv-hero--standard-image .wp-block-column:has(.cbv-hero__media) {
		align-self: stretch;
	}

	/* Undo the cut-out's absolute, bleed-to-edge positioning. The image fills the
	   column height, pulled up so its top meets the nav and its bottom meets the
	   wave accent (the wave, z-index 3, then overlaps its bottom-right corner). */
	.cbv-hero--standard-image .cbv-hero__media {
		position: static;
		right: auto;
		bottom: auto;
		align-self: stretch;
		height: calc(100% + var(--wp--preset--spacing--40));
		margin-top: calc(-1 * var(--wp--preset--spacing--40));
		z-index: 2;
		pointer-events: auto;
	}

	.cbv-hero--standard-image .cbv-hero__media img {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: none;
		object-fit: cover;
		object-position: center;
	}

	/* Even 50/50 split (the cut-out variant runs the text at 50% too). */
	.cbv-hero--standard-image .wp-block-column.is-vertically-aligned-center {
		flex-basis: 50% !important;
	}
}

@media (max-width: 991px) {
	/* Mobile: image sits directly below the nav — drop the section's large top
	   padding and the image column's top padding so nothing pushes it down. The
	   diagonal wave band under the image (.cbv-hero__media::after) is kept. */
	.cbv-hero--standard-image.alignfull {
		padding-top: 0 !important;
	}

	.cbv-hero--standard-image .wp-block-column:has(.cbv-hero__media) {
		padding-top: 0 !important;
	}

	/* Hide the arrow/triangle background field on mobile. Its height is derived
	   from the cut-out image's proportions, so against this variant's shorter
	   4:3 image it runs past the image and wave band into the copy area. The
	   full-bleed opaque image already covers it everywhere else, so dropping it
	   just removes that stray strip below the image. */
	.cbv-hero--standard-image::before {
		display: none;
	}

	/* Bleed the image to the viewport edges — cancel the hero's 20px mobile
	   inline inset so the image is full-width (the wave band below it already
	   runs edge-to-edge). */
	.cbv-hero--standard-image .cbv-hero__media {
		margin-inline: -20px;
	}

	/* Fixed crop ratio + cover so the image never distorts across the mobile /
	   tablet range (a plain max-height with width:100% squashes it, e.g. ~962px).
	   Cover crops to the ratio instead of stretching. */
	.cbv-hero--standard-image .cbv-hero__media img {
		aspect-ratio: 4 / 3;
		height: auto;
		max-height: 480px;
		object-fit: cover;
		object-position: center;
	}
}

/* ==========================================================================
   Header — utility bar + main nav
   ========================================================================== */

.cbv-topbar {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.cbv-topbar a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.cbv-topbar a:hover {
	color: var(--wp--preset--color--accent);
}

/* Eyebrow "Enroll Now" button keeps dark button text (the .cbv-topbar link
   color would otherwise make it white on teal). */
.cbv-topbar .wp-block-button__link {
	color: #000000;
}

.cbv-topbar .wp-block-search {
	margin: 0;
}

/* Single dark rounded search field */
.cbv-topbar .wp-block-search__inside-wrapper {
	background-color: #0d0a26;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
	padding: 0;
	min-width: 240px;
}

.cbv-topbar .wp-block-search__input {
	background-color: transparent;
	border: 0;
	color: var(--wp--preset--color--white);
	padding: 0.5rem 0.85rem;
	box-shadow: none;
}

.cbv-topbar .wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	box-shadow: none;
}

.cbv-topbar .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.cbv-topbar .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 0;
	padding: 0.35rem 0.75rem;
	margin: 0;
}

.cbv-topbar .wp-block-search__button svg {
	fill: var(--wp--preset--color--white);
}

/* Eyebrow / utility menu rendered by [cbv_menu location=eyebrow] */
.cbv-topbar .cbv-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cbv-topbar .cbv-menu__list a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.cbv-topbar .cbv-menu__list a:hover {
	color: var(--wp--preset--color--accent);
}

.cbv-lang {
	white-space: nowrap;
}

/* Language switcher sits on the header's navy overlay in two contexts —
   the desktop `.cbv-topbar` eyebrow AND the mobile `.cbv-mainnav` menu.
   Component-scoped rules so both contexts behave the same and neither
   inherits theme.json's global prose-link colour (#007A7A — tuned for light
   backgrounds, ~3.5:1 on navy).
   Inactive → white (~18:1 on navy). Active → accent teal + bold (~9.3:1). */
.cbv-lang a {
	color: var(--wp--preset--color--white);
	font-weight: 400;
	text-decoration: none;
}

.cbv-lang .is-active {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.cbv-mainnav {
	background-color: var(--wp--preset--color--primary);
	/* Design spec: 1px rules above and below the main nav row (--border/default). */
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cbv-logo img {
	display: block;
	height: 52px;
	width: auto;
}

/* Max Mega Menu container within the header row */
.cbv-mainnav .max-mega-menu,
.cbv-mainnav #mega-menu-wrap-primary {
	background: transparent;
}

/* Collapse the wrap to the menu height (a stray wpautop <p> + whitespace add
   ~28px at the bottom, pushing the links up). Flex centres the menu. */
.cbv-mainnav #mega-menu-wrap-primary {
	display: flex;
	align-items: center;
}

.cbv-mainnav #mega-menu-wrap-primary > p {
	display: none;
}

/* Full-screen-width mega panels, anchored to the full-width header row so the
   inner content lines up with the 1280px page container (logo / hero text). */
@media (min-width: 993px) {
	/* Anchor the mega panel to the full-width nav row, and keep the whole nav
	   (and its dropdown panel) above the sticky jump menu (z-index:30) even on
	   pages without the translucent-navy overlay rule above. */
	.cbv-mainnav {
		position: relative;
		z-index: 40;
	}

	/* Neutralise MMM's own positioned ancestors so the panel anchors to
	   .cbv-mainnav (which spans the full viewport) instead of the menu wrap. */
	#mega-menu-wrap-primary,
	#mega-menu-wrap-primary > #mega-menu-primary,
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu {
		position: static !important;
	}

	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
		left: 0 !important;
		right: auto !important;
		top: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		box-sizing: border-box !important;
		padding-left: max(1.5rem, calc((100% - 1280px) / 2)) !important;
		padding-right: max(1.5rem, calc((100% - 1280px) / 2)) !important;
	}

	/* 40px above and below each column's content — applied per column (not to the
	   panel) so the grey featured / registered columns fill that space with their
	   own background instead of leaving white above them. */
	#mega-menu-wrap-primary .mega-menu-column {
		box-sizing: border-box !important;
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* MMM already styles the column header per the design (navy, 16px bold, with a
   full-width `border-bottom: 1px #b4bbc2` underline). Its :hover state, however,
   sets `border-color: transparent`, dropping the underline and making the header
   read as a link. Keep the underline on hover. */
#mega-menu-wrap-primary .mega-block-title:hover {
	border-bottom-color: var(--cbv-border-light) !important;
}

/* Column title — Open Sans 16/24, bold. margin-bottom trimmed so the gap down to
   the first link isn't too large. */
#mega-menu-wrap-primary .mega-block-title {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	margin-bottom: 24px !important;
}

/* Panel links: grey, teal on hover (MMM's top-level white would otherwise
   bleed down onto the light panel and make them invisible), and compact
   vertical rhythm (MMM's default item height leaves ~30px of dead space). */
#mega-menu-wrap-primary .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
	margin: 0 !important;
}

/* 24px of space below each menu link item (no top padding, so the gap sits below).
   Applies to every non-widget item — page links (type-post_type), custom links,
   taxonomy links, etc. — not just custom links, so columns that mix link types
   (e.g. "For Registered Students", which combines page and custom links) keep one
   even rhythm instead of MMM's default 15px top/bottom on the page links. Widget /
   heading items are excluded; they carry their own margins (see .mega-block-title). */
#mega-menu-wrap-primary .mega-menu-column li.mega-menu-item:not(.mega-menu-item-type-widget) {
	padding-top: 0 !important;
	padding-bottom: 24px !important;
}

/* Zero MMM's default 15px padding on heading/widget items so the heading sits at
   the column's 40px top edge and its own 24px margin controls the gap below it. */
#mega-menu-wrap-primary .mega-menu-column li.mega-menu-item-type-widget {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Panel links — Open Sans Bold 14/20 grey (Figma Body/Medium Bold). No padding
   here; the 24px gap below each item sits on the li's padding-bottom, over a
   20px line. */
#mega-menu-wrap-primary .mega-menu-column a.mega-menu-link {
	color: var(--cbv-text-muted) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-transform: none !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 20px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

#mega-menu-wrap-primary .mega-menu-column a.mega-menu-link:hover,
#mega-menu-wrap-primary .mega-menu-column a.mega-menu-link:focus {
	color: var(--cbv-link-hover) !important;
}

/* Parent-item dropdown indicator: replace MMM's dashicon with a thin chevron. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link .mega-indicator {
	display: none !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--wp--custom--transition, 0.2s ease);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link::after {
	transform: translateY(1px) rotate(-135deg);
}

/* Featured "cta" column (Become a CBV → "Enroll Now") and the "For registered
   students" panel (Members): greyer card columns. The 40px top/bottom comes from
   the .mega-menu-column rule above, so the grey fills the full column height (no
   white above it); here we only add the side inset and grey fill. */
#mega-menu-wrap-primary .mega-menu-column.cta,
#mega-menu-wrap-primary .mega-menu-column.mega-cta,
#mega-menu-wrap-primary .mega-menu-column.cbv-registered {
	background-color: var(--cbv-surface-muted) !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
	border-radius: 6px;
}

/* The 40px top/bottom above only applies to columns at >=993px. Below that the
   columns stack, so give the grey cards their own vertical padding — otherwise
   their content sits flush against the grey box's top and bottom edges. */
@media (max-width: 992px) {
	#mega-menu-wrap-primary .mega-menu-column.cta,
	#mega-menu-wrap-primary .mega-menu-column.mega-cta,
	#mega-menu-wrap-primary .mega-menu-column.cbv-registered {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

/* The CTA heading ("Enroll Now") has no underline in the design. */
#mega-menu-wrap-primary .mega-menu-column.cta .mega-block-title,
#mega-menu-wrap-primary .mega-menu-column.mega-cta .mega-block-title {
	border-bottom: 0 !important;
	padding-bottom: 4px;
}

/* Featured-card image. */
#mega-menu-wrap-primary .mega-menu-column.cta .cbv-mega-card__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 16px;
}

#mega-menu-wrap-primary .mega-menu-column.cbv-registered li.mega-menu-item-type-widget:not(:first-child) .mega-block-title {
	margin-top: 20px;
}

/* Primary nav items use the heading font (Gotham) per the design — the Figma
   "Arial" is the fallback for the theme's heading family. Applies at all widths
   so desktop and mobile match. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	font-family: var(--wp--preset--font-family--heading) !important;
}

/* Gotham is wider than the previous Lato, so at the tighter desktop widths the
   horizontal nav would grow left into the logo. Trim the item padding there to
   keep it on one row and clear of the logo. */
@media (min-width: 992px) and (max-width: 1199px) {
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		padding-left: 9px !important;
		padding-right: 9px !important;
	}
}

/* French labels run longer than their English counterparts (e.g. "Members &
   Registered Students" → "Membres et étudiants inscrits"), so in that same tight
   desktop band the five top-level items overflow the single nav row and wrap to a
   second line. Trim the padding a little further and drop the type one step —
   scoped to French only (WPML sets <html lang="fr-FR">), so the English layout is
   pixel-identical. Above 1200px both languages fit on one row already. */
@media (min-width: 992px) and (max-width: 1199px) {
	html[lang="fr-FR"] #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 15px !important;
	}
}

/* French eyebrow items run longer than English and, in this tight band, wrap the
   utility topbar to two rows — which under the homepage's translucent header
   exposes the light area above the hero as an odd two-tone band. Tighten the gaps
   and type one step and narrow the search field (French only) so the eyebrow stays
   on one row. English already fits, and above 1219px both languages do. */
@media (min-width: 992px) and (max-width: 1219px) {
	html[lang="fr-FR"] .cbv-topbar > .wp-block-group {
		gap: 12px !important;
	}
	html[lang="fr-FR"] .cbv-topbar .cbv-menu__list {
		gap: 12px !important;
	}
	html[lang="fr-FR"] .cbv-topbar .cbv-menu__list a,
	html[lang="fr-FR"] .cbv-topbar .cbv-login-links,
	html[lang="fr-FR"] .cbv-topbar .cbv-login-links a,
	html[lang="fr-FR"] .cbv-topbar .wp-block-button__link,
	html[lang="fr-FR"] .cbv-topbar .cbv-lang {
		font-size: 13px !important;
	}
	html[lang="fr-FR"] .cbv-topbar .cbv-topbar__search,
	html[lang="fr-FR"] .cbv-topbar .cbv-topbar__search .wp-block-search__inside-wrapper {
		width: 150px !important;
		min-width: 0 !important;
	}
	html[lang="fr-FR"] .cbv-topbar .cbv-topbar__search .wp-block-search__input {
		width: 100% !important;
	}
}

/* "Enroll Now" matches the "My Dashboard" button weight (the standard theme
   button, bold) so the two CTAs read consistently side by side — on the desktop
   topbar and stacked in the mobile menu clone. */
.cbv-topbar .wp-block-button__link,
.cbv-mobile-utility .wp-block-button__link {
	font-weight: 700 !important;
}

/* ==========================================================================
   Mobile navigation (<= 991px, matches Max Mega Menu's responsive breakpoint)

   Collapsed bar = logo + hamburger only (the utility topbar is hidden). Tapping
   the toggle drops a full-width LIGHT panel below the header containing,
   top-to-bottom: search, the primary nav, then the utility "banner menu"
   (Enroll Now + eyebrow links + EN|FR). The search and utility items are cloned
   into the Max Mega Menu panel by main.js (.cbv-mobile-item) so the single
   toggle reveals everything.

   The panel is fixed from just below the bar to the bottom of the screen and
   scrolls internally (--cbv-mobile-bar-h is set by main.js), so tall expanded
   submenus stay reachable while the background is locked.

   .cbv-mobile-item is hidden by default and only shown at <=991px, so the
   desktop horizontal menu is unaffected. !important because the clones are
   appended into #mega-menu-primary, whose Max Mega Menu `> li` rules otherwise
   out-specify this and leave the clones visible on desktop.
   ========================================================================== */

.cbv-mobile-item {
	display: none !important;
}

@media (max-width: 991px) {
	/* Collapsed bar shows just logo + toggle. */
	.cbv-topbar {
		display: none !important;
	}

	/* Header bar = 70px (Figma spec): no vertical padding, logo inset 20px,
	   teal toggle flush to the right edge. The desktop top/bottom borders are
	   not part of the mobile design, so drop them here. */
	.cbv-mainnav {
		position: relative !important;
		/* Sit above the hero, which is pulled up (margin-top:-88px) to meet the
		   nav — without this the hero's triangle field paints over the logo.
		   (Desktop gets z-index:20 in the min-width:782px block; mobile needs
		   its own since that rule doesn't apply here.) */
		z-index: 30 !important;
		padding: 0 0 0 20px !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
		/* Navy header (design), not the purple --primary. */
		background-color: var(--wp--preset--color--navy) !important;
	}

	/* MMM's off-canvas backdrop is a full-screen black overlay that dims the
	   header behind our dropdown panel. We don't use off-canvas, so kill it. */
	#mega-menu-wrap-primary .mega-menu-toggle::after {
		display: none !important;
	}

	.cbv-mainnav > .wp-block-group {
		min-height: 70px !important;
		padding: 0 !important;
		column-gap: 0 !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	/* Kill the logo link's inline line-height space so the mark centers
	   vertically in the 70px bar (otherwise it rides ~4px high). */
	.cbv-logo a {
		display: block !important;
		line-height: 0 !important;
	}

	.cbv-logo img {
		height: 51px !important;
	}

	/* The wrap holds the toggle at the right edge and stretches to bar height. */
	#mega-menu-wrap-primary {
		position: static !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: flex-end !important;
		align-self: stretch !important;
	}

	#mega-menu-wrap-primary .mega-menu-toggle {
		position: static !important;
	}

	/* Teal toggle: 70x70 square, navy icon, full bar height, flush right
	   (matches the Figma mobile nav). */
	#mega-menu-wrap-primary .mega-menu-toggle,
	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right,
	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block {
		height: 70px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 70px !important;
		background: var(--wp--preset--color--accent) !important;
	}

	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block button {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 70px !important;
		height: 70px !important;
		padding: 0 !important;
	}

	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,
	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::before,
	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::after {
		background-color: var(--wp--preset--color--navy) !important;
	}

	/* Panel is hidden when the menu is closed. MMM adds .mega-menu-open to the
	   toggle while open, so scope the visible panel to that state — otherwise
	   our overrides keep it on screen after closing. */
	#mega-menu-wrap-primary #mega-menu-primary {
		display: none !important;
	}

	/* Override MMM's fixed left-flyout: a light panel fixed below the bar,
	   scrolling internally so tall menus stay reachable. */
	#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ #mega-menu-primary {
		display: block !important;
		position: fixed !important;
		top: var(--cbv-mobile-bar-h, 70px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		z-index: 100 !important;
		background: var(--wp--preset--color--white) !important;
		box-shadow: 0 12px 14px -6px rgba(0, 0, 0, 0.16) !important;
		transform: none !important;
		opacity: 1 !important;
		padding: 0 0 8px !important;
	}

	/* Top-level nav rows: navy text, even generous height (override MMM's
	   fixed ~40px mobile link height), and an inset divider between rows.
	   The divider is a bottom-anchored gradient (not a border) so it stays
	   inset 20px from each edge and doesn't clash with the caret ::after. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
		border-bottom: 0 !important;
		background-image: linear-gradient(to right, var(--cbv-divider), var(--cbv-divider)) !important;
		background-size: calc(100% - 40px) 1px !important;
		background-position: 20px bottom !important;
		background-repeat: no-repeat !important;
	}

	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		height: auto !important;
		padding: 22px 20px !important;
		font-size: 16px !important;
		line-height: 1.25 !important;
		color: var(--wp--preset--color--navy) !important;
	}

	/* Caret indicator in navy to match the dark item text. */
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link::after {
		border-color: var(--wp--preset--color--navy) !important;
		color: var(--wp--preset--color--navy) !important;
	}

	/* Cloned search + utility items on the light panel. Same inset divider
	   treatment as the nav rows. */
	.cbv-mobile-item {
		display: block !important;
		margin: 0 !important;
		padding: 20px !important;
		list-style: none !important;
		border-bottom: 0 !important;
		background-image: linear-gradient(to right, var(--cbv-divider), var(--cbv-divider)) !important;
		background-size: calc(100% - 40px) 1px !important;
		background-position: 20px bottom !important;
		background-repeat: no-repeat !important;
	}

	.cbv-mobile-item a {
		color: var(--wp--preset--color--navy) !important;
	}

	/* Search: grey pill, magnifier on the left, bold dark placeholder. */
	.cbv-mobile-search .wp-block-search__inside-wrapper {
		flex-direction: row-reverse !important;
		background: var(--cbv-surface-muted) !important;
		border: 1px solid var(--cbv-border-muted) !important;
		border-radius: 3px !important;
		padding: 2px 6px !important;
	}

	.cbv-mobile-search .wp-block-search__input {
		width: 100% !important;
		background: transparent !important;
		border: 0 !important;
		color: var(--wp--preset--color--navy) !important;
		font-family: var(--wp--preset--font-family--heading) !important;
		font-size: 16px !important;
		font-weight: 700 !important;
	}

	.cbv-mobile-search .wp-block-search__input::placeholder {
		color: var(--wp--preset--color--navy) !important;
		opacity: 1 !important;
		font-family: var(--wp--preset--font-family--heading) !important;
		font-size: 16px !important;
		font-weight: 700 !important;
	}

	.cbv-mobile-search .wp-block-search__button {
		min-width: 0 !important;
		padding: 8px !important;
		background: transparent !important;
	}

	/* Thin outline magnifier (JS swaps the glyph to a stroked circle+handle). */
	.cbv-mobile-search .wp-block-search__button svg {
		width: 24px !important;
		height: 24px !important;
		fill: none !important;
		stroke: var(--wp--preset--color--navy) !important;
		color: var(--wp--preset--color--navy) !important;
	}

	/* Utility "banner menu": present each item as a full nav-style row — the same
	   inset divider ("border") and padding as the primary nav rows. Its own
	   .cbv-mobile-item padding is dropped so each row carries its own. */
	.cbv-mobile-utility {
		display: block !important;
		padding: 0 !important;
		border-bottom: 0 !important;
		background-image: none !important;
	}

	.cbv-mobile-utility ul {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	/* Inset divider under each text row: eyebrow links + login text links. */
	.cbv-mobile-utility .cbv-menu__list li,
	.cbv-mobile-utility .cbv-login-links a:not(.wp-element-button) {
		background-image: linear-gradient(to right, var(--cbv-divider), var(--cbv-divider)) !important;
		background-size: calc(100% - 40px) 1px !important;
		background-position: 20px bottom !important;
		background-repeat: no-repeat !important;
	}

	/* Text links fill the row with nav-row padding + typography (no underline).
	   The "My Dashboard" button keeps its button styling. */
	.cbv-mobile-utility .cbv-menu__list a,
	.cbv-mobile-utility .cbv-login-links a:not(.wp-element-button) {
		display: block !important;
		padding: 22px 20px !important;
		font-family: var(--wp--preset--font-family--heading) !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		color: var(--wp--preset--color--navy) !important;
		text-decoration: none !important;
	}

	/* Login group stacks its items as rows; the inline "/" separator (one-line
	   only) is hidden. The Dashboard button sits in its own padded row. */
	.cbv-mobile-utility .cbv-login-links {
		display: block !important;
		margin: 0 !important;
	}

	.cbv-mobile-utility .cbv-login-links__sep {
		display: none !important;
	}

	.cbv-mobile-utility .cbv-login-links a.wp-element-button {
		display: inline-block !important;
		margin: 22px 20px !important;
		/* Match the Enroll Now button (small) — the desktop .cbv-topbar-scoped
		   size rule doesn't reach the cloned button, so it would otherwise be
		   the larger default. */
		font-size: var(--wp--preset--font-size--small) !important;
	}

	/* Enroll Now button row and the EN|FR row get matching row padding. */
	.cbv-mobile-utility > .wp-block-buttons,
	.cbv-mobile-utility > .cbv-lang {
		margin: 0 !important;
		padding: 22px 20px !important;
	}
}

/* ==========================================================================
   Stats (2x2 grid on a dark panel)
   ========================================================================== */

/* Stacked full-bleed sections (hero, stats, video, banners…) sit flush — no
   block-gap sliver between the coloured panels. Image-text sections are
   excluded: they carry their own default gap and honour editor margin
   overrides (see .cbv-image-text spacing below). */
.wp-block-post-content > .alignfull + .alignfull:not(.cbv-image-text) {
	margin-top: 0 !important;
}

/* A full-bleed section that ends the content sits flush against the footer.
   Rather than a fixed negative margin on the block (which over-pulls and lets the
   footer overlap the section on templates whose <main> has no bottom padding),
   cancel the two real gaps directly: <main>'s bottom padding and the footer
   template part's 24px top margin. These are only removed when the last content
   block is full-bleed, so normal pages keep their gap above the footer.

   Editors can opt a block out — keeping its normal spacing above the footer — by
   adding the "cbv-keep-bottom-space" class (Advanced → Additional CSS class(es)). */
main:has( > .wp-block-post-content > .alignfull:last-child:not( .cbv-keep-bottom-space ) ) {
	padding-bottom: 0;
}

.wp-site-blocks:has( > main > .wp-block-post-content > .alignfull:last-child:not( .cbv-keep-bottom-space ) ) > footer {
	margin-top: 0;
}

.cbv-stats {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--white);
}

/* Full-bleed, edge-to-edge panel (square corners) at every width — including
   mobile, where main.css's `.has-global-padding > .alignfull` (0,2,0) otherwise
   insets it 20px. Two-class selector + later load order beats that rule. */
.cbv-stats.alignfull,
.cbv-stats.alignwide {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* In the block editor the canvas is narrower and offset from the browser
   viewport, so a viewport-based full-bleed overflows it (this is what made the
   stats panel look broken in the editor). Render it as a normal in-canvas
   block there instead. */
.editor-styles-wrapper .cbv-stats {
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	transform: none;
	left: auto;
}

/* The editor applies a layout max-width (~768px) to the inner flow groups,
   which shrinks the 2-column grid and crushes the descriptions. Let the grid
   and its cells fill the panel instead. */
.editor-styles-wrapper .cbv-stats__grid,
.editor-styles-wrapper .cbv-stat {
	max-width: none !important;
}

/* Same problem for the other full-bleed patterns: their viewport-based
   break-out (100vw + negative margins) overflows the narrower, offset editor
   canvas and reads as "squished/broken". Render them as normal in-canvas blocks
   in the editor only (front end is unaffected). */
.editor-styles-wrapper .cbv-video-feature.alignfull,
.editor-styles-wrapper .cbv-cta-banner.alignfull,
.editor-styles-wrapper .cbv-cta-banner.alignwide,
.editor-styles-wrapper .cbv-steps.alignfull,
.editor-styles-wrapper .cbv-steps.alignwide,
.editor-styles-wrapper .cbv-image-text.alignfull,
.editor-styles-wrapper .cbv-call-to-action.alignfull {
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Card grids (Latest news, Upcoming events) break out to a viewport-centred
   1280 box with `left: 50%; translateX(-50%)`; against the editor's offset
   canvas that shifts the whole grid to the right. Reset the break-out so the
   grid fills the editor content column normally (front end is unaffected). */
.editor-styles-wrapper .cbv-cards {
	left: auto;
	transform: none;
	width: auto;
	max-width: none;
	margin-inline: 0;
}

/* Testimonial carousel breaks out with 100vw + negative margins, and its
   content inset is derived from 100vw too. In the editor 100vw is the offset
   canvas width, so the band gets slammed off to the left. Render it in-canvas
   with a plain side inset instead (front end is unaffected). */
.editor-styles-wrapper .cbvinstitute-carousel:has( .cbv-testimonial ) {
	--cbv-ts-inset: var(--wp--preset--spacing--50);
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Faint triangle pattern across the panel. */
.cbv-stats::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../images/hero-triangles.svg);
	background-repeat: repeat;
	background-size: 132px 132px;
	opacity: 0.12;
	pointer-events: none;
}

/* Centre-lightening gradient overlay (per Figma): dark navy edges, a lighter
   surface-navy tint through the middle, over the triangle field. */
.cbv-stats::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #131032 0%, rgba(34, 28, 88, 0.4) 49%, #131032 100%);
	pointer-events: none;
}

.cbv-stats > * {
	position: relative;
	z-index: 1;
}

.cbv-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Fixed, equal row heights so all four cells match regardless of how the
	   descriptions wrap. */
	grid-auto-rows: 12rem;
	/* Cap the content at the Figma stats width (1440px) and centre it, so on
	   wide screens the cells don't spread apart. The panel background stays
	   full-bleed. */
	max-width: 1440px;
	margin-inline: auto;
}

.cbv-stat {
	display: flex;
	align-items: center;
	/* Number → description gap: up to 60px on desktop (per Figma), easing down
	   on narrower columns so the copy doesn't overflow. */
	gap: clamp(1.75rem, 4vw, 60px);
	padding: 0 clamp(1.5rem, 5vw, 5rem);
	min-width: 0;
	/* Fill the fixed-height grid row so every cell is the same height. */
	height: 100%;
	/* Kill WordPress's block-gap margin (it adds 24px to every cell except the
	   first, which knocks the top row out of vertical alignment). */
	margin: 0 !important;
}

.cbv-stat__desc {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Divider cross between the four cells (Figma: 0.5px #B4BBC2). */
.cbv-stat:nth-child(odd) {
	border-right: 0.5px solid #b4bbc2;
}

.cbv-stat:nth-child(1),
.cbv-stat:nth-child(2) {
	border-bottom: 0.5px solid #b4bbc2;
}

.cbv-stat__number {
	flex-shrink: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.cbv-stat__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.cbv-stats__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	/* Mobile (per design): four stacked full-width cells, centered, each with a
	   0.5px light border; big 80px number above the description. */
	.cbv-stat {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 12px;
		padding: 40px 20px;
		/* Replace the desktop divider cross with a per-cell border; drop the top
		   on stacked cells so adjacent borders share instead of doubling.
		   Figma border/default is #B4BBC2. */
		border: 0.5px solid #b4bbc2 !important;
	}

	.cbv-stat:not(:first-child) {
		border-top: 0 !important;
	}

	.cbv-stat__number {
		font-size: 5rem; /* 80px — Display/1 */
		line-height: 1.05;
		letter-spacing: -0.01em;
	}
}

/* ==========================================================================
   Card Grid (centered title + intro over a 3-card grid)
   ========================================================================== */

.cbv-cards {
	position: relative;
	/* Break out of the constrained content column to a viewport-centered 1280
	   container (matches the page content width). */
	left: 50%;
	transform: translateX(-50%);
	width: min(1280px, calc(100vw - 3rem));
	max-width: none;
	margin-inline: 0;
}

/* Two card sections stacked back-to-back (e.g. Latest news + Upcoming events)
   would otherwise double their 96px vertical padding — news' bottom plus
   events' top — leaving a cavernous gap. Drop the following section's top
   padding so the break between them reads as one section gap, not two. */
.cbv-cards + .cbv-cards {
	padding-top: 0 !important;
}

.cbv-cards__title {
	max-width: 46rem;
	margin-inline: auto;
	color: var(--cbv-surface-navy);
	font-size: clamp(1.75rem, 4vw, 3rem); /* 28px mobile → 48px desktop */
	line-height: 1.16;
	letter-spacing: -0.01em;
}

.cbv-cards__intro {
	max-width: 40rem;
	margin: 1rem auto 0;
	color: var(--cbv-text-muted);
}

/* Restyle the CBV Institute Blocks Card block to the design (scoped to this
   pattern so other uses of the card block keep their default styling). */
.cbv-cards .wp-block-cbvinstitute-blocks-card {
	height: 100%;
	/* Figma: content block has 28px top/bottom padding, no side padding. The
	   28px above the tag is the tag's margin-top; this adds the 28px below. */
	padding: 0 0 1.75rem !important;
	gap: 0 !important;
	border: 0 !important;
	/* Figma: the card image has square corners and the content is transparent, so
	   there is no visible rounding — keep the image sharp (no radius). */
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit;
	text-align: left;
	text-decoration: none;
}

/* Figma: card images are square (no radius) — leave the block's default corners. */

/* Text is flush with the card edges in the design — remove the card block's
   default 16px horizontal content padding from the text elements (the image
   and the tag pill keep their own spacing). */
.cbv-cards .wp-block-cbvinstitute-blocks-card > :not(.wp-block-image):not(.cbv-tag) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The whole card is a link — give clear hover affordance (heading + "Learn
   more" recolour) without adding chrome that fights the flat design. */
.cbv-cards .wp-block-cbvinstitute-blocks-card.is-link-enabled:hover {
	box-shadow: none !important;
}

.cbv-cards .wp-block-cbvinstitute-blocks-card.is-link-enabled:hover .cbv-card-heading {
	color: var(--wp--preset--color--primary) !important;
}

.cbv-cards .wp-block-cbvinstitute-blocks-card.is-link-enabled:hover .cbv-card-link span {
	color: var(--cbv-link-hover);
}

.cbv-card-image {
	margin: 0 !important;
	position: relative;
}

.cbv-card-image img {
	display: block;
	width: 100%;
	aspect-ratio: 408 / 226;
	object-fit: cover;
}

/* Hover: tint the card image with the Figma overlay — a flat #221C58 at 50%
   (not a gradient). Tied to hovering the whole card so it covers both the block
   cards and the events-grid cards; pointer-events off so it never blocks clicks. */
.cbv-card-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(34, 28, 88, 0.5);
	opacity: 0;
	transition: opacity var(--wp--custom--transition, 0.2s ease);
	pointer-events: none;
}

.cbv-cards .wp-block-cbvinstitute-blocks-card:hover .cbv-card-image::after {
	opacity: 1;
}

.cbv-cards .cbv-tag {
	display: inline-block;
	align-self: flex-start;
	width: auto;
	margin: 1.75rem 0 1.0625rem !important; /* 28px above (image→tag), 17px below */
	padding: 0.25rem 0.75rem !important;    /* Figma: 4px vertical, 12px horizontal */
	background-color: var(--wp--preset--color--accent);
	color: #000000;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;      /* 12px */
	font-weight: 400;
	line-height: 1.3333;     /* 16px */
	letter-spacing: 0.2px;
	border-radius: 4px;
}

/* The tag's top margin exists to space it below a featured image. When the card
   has no image (the tag is the first thing in the card), drop that gap so the
   tag sits flush with the top and tagged/untagged cards line up in the grid. */
.cbv-cards .wp-block-cbvinstitute-blocks-card > .cbv-tag:first-child {
	margin-top: 0 !important;
}

/* Inverse case: an image card with no tag. The title would otherwise sit flush
   against the image; give it the same gap the tag would have provided so the
   image→content spacing is consistent whether or not a tag is present. */
.cbv-cards .cbv-card-image + .cbv-card-heading {
	margin-top: 1.75rem !important;
}

.cbv-cards .cbv-card-heading {
	margin: 0 0 0.5rem !important;
	color: var(--cbv-surface-navy) !important;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px → 24px */
	line-height: 1.17;
	letter-spacing: 0;
	transition: color 0.2s ease;
}

.cbv-cards .cbv-card-body {
	margin: 0 0 1.0625rem !important;
	color: var(--cbv-text-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Push the link to the bottom so it aligns across cards of varying height. */
.cbv-cards .cbv-card-link {
	margin: auto 0 0 !important;
}

.cbv-cards .cbv-card-link span {
	color: var(--cbv-surface-navy);
	font-weight: 700;
	font-size: 1rem;
	transition: color 0.2s ease;
}

/* ==========================================================================
   Query: Card grid — patterns/query-card-grid.php
   Reusable across post types (News, Events, …). Renders a Query Loop's posts
   as CBV cards (reusing the .cbv-cards card styles
   above) in a responsive three-up grid. The whole card is clickable via a
   title-link overlay, which keeps valid, accessible markup — one real link per
   card, plus the independently clickable category tag.
   ========================================================================== */

/* Header row: title left, "View all" button right; stacks on narrow screens.
   The news pattern's header gets flex from WP's layout classes; the PHP events
   grid renders a plain group, so own the flex here to cover both. */
.cbv-cards--query .cbv-cards__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 1.5rem;
}

.cbv-cards--query .cbv-cards__header .cbv-cards__title {
	max-width: none;
	margin: 0;
	text-align: left;
}

/* "View all" — primary navy button per Figma (Button/bg-primary #221c58,
   white text, square corners, 56px tall). Overrides the theme's default teal
   button in this header only. */
.cbv-cards--query .cbv-cards__header .wp-block-button__link {
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
	border-radius: 0;
	padding: 1rem 1.5rem;
	font-weight: 700;
	box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.cbv-cards--query .cbv-cards__header .wp-block-button__link:hover,
.cbv-cards--query .cbv-cards__header .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Query list: strip list chrome, own the grid. */
.cbv-cards__query .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Force the three-up grid on .cbv-cards__grid itself, not on WP's .is-layout-grid
   class. The Post Template's grid layout setting does not reliably round-trip
   through the block editor (it can reset to the default flow layout on save),
   which would otherwise drop the cards into a single stacked column. Owning the
   grid here keeps the layout correct no matter how the query is edited. */
.cbv-cards .cbv-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem; /* Figma: 28px column gutter */
	margin: 0;
	padding: 0;
	list-style: none;
}

.cbv-cards .cbv-cards__grid > li {
	height: 100%;
	margin: 0;
}

/* Stay 3-up on tablet (was 2-up); collapse straight to one column on mobile.
   On mobile the stacked cards get a thin divider between them and the "View
   all" button stretches to full width — matches the Figma mobile mockup. */
@media (max-width: 781px) {
	.cbv-cards .cbv-cards__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	/* Strip the card block's built-in bottom padding on mobile — the divider
	   rule below owns bottom spacing for non-last cards, and the last card
	   should end flush with the grid so no orphan gap sits before whatever
	   follows the section. Base rule sets `padding: 0 0 1.75rem !important`
	   at matching specificity, so `!important` is required here. */
	.cbv-cards .wp-block-cbvinstitute-blocks-card {
		padding: 0 !important;
	}

	/* Tighten the query-driven sections' top spacing on mobile — both News
	   (patterns/query-card-grid.php) and Events (render_events_grid()) set
	   `padding-top: var(--wp--preset--spacing--70)` as an inline style, which
	   leaves ~96px of dead space above the heading at phone widths. Inline
	   styles have highest specificity, so `!important` is required. */
	.cbv-cards--query {
		padding-top: 1.5rem !important; /* 24px */
	}

	/* Base header→grid rhythm for the query variants (News, Events) on
	   mobile — a smaller gap under the header than the desktop rhythm. The
	   Events-specific rule below overrides this with a larger gap plus a
	   divider line per the mockup. Source order matters: this rule sits
	   first so `.cbv-cards--events` (same specificity) wins for Events. */
	.cbv-cards--query .cbv-cards__header {
		padding-bottom: 1.5rem;
	}

	/* Divider between the header (title + "View all" button) and the grid on
	   mobile — matches the Events mockup. Scoped to the Events variant only;
	   the News query grid does not carry this divider under its header.
	   `.cbv-cards__query` margin picks up the rhythm below the divider. */
	.cbv-cards--events .cbv-cards__header {
		padding-bottom: 3.5rem;
		border-bottom: 1px solid var(--cbv-border-light, #b4bbc2);
	}
	.cbv-cards--events .cbv-cards__query {
		margin-top: 3.5rem !important; /* override the inline `margin-top: var(--wp--preset--spacing--60)` (~48px). */
	}

	/* Divider under each stacked card (skip the last so there's no trailing
	   line above whatever follows the grid). Padding-bottom gives the line
	   breathing room from the card content above. Two selectors cover both
	   grid structures:
	     - Query variant (`.cbv-cards__grid > li`) — News, Events grids.
	     - Curated variant (`.wp-block-cbvinstitute-blocks-card-grid`) —
	       manually placed CBV Institute Blocks card-grid block. */
	.cbv-cards .cbv-cards__grid > li:not(:last-child),
	.cbv-cards .wp-block-cbvinstitute-blocks-card-grid > .wp-block-cbvinstitute-blocks-card:not(:last-child) {
		padding-bottom: 2rem !important;
		border-bottom: 1px solid var(--cbv-border-light, #b4bbc2) !important;
	}

	/* Full-width "View all" button on mobile per mockup. Applies to the
	   button wrappers inside the header row so both the .wp-block-button
	   container and its inner .wp-block-button__link stretch. */
	.cbv-cards--query .cbv-cards__header .wp-block-buttons,
	.cbv-cards--query .cbv-cards__header .wp-block-button {
		width: 100%;
	}
	.cbv-cards--query .cbv-cards__header .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Whole-card link via a title-link overlay (valid: one anchor + the tag). */
.cbv-cards--query .wp-block-cbvinstitute-blocks-card {
	position: relative;
}

.cbv-cards--query .cbv-card-heading a {
	color: inherit;
	text-decoration: none;
}

.cbv-cards--query .cbv-card-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Category tag stays independently clickable above the overlay. */
.cbv-cards--query .cbv-tag {
	position: relative;
	z-index: 1;
}

.cbv-cards--query .cbv-tag a {
	color: inherit;
	text-decoration: none;
}

/* Excerpt is a block wrapper — flatten its inner paragraph margins. */
.cbv-cards--query .cbv-card-body p {
	margin: 0;
}

/* Hover / keyboard-focus affordance across the whole card. */
.cbv-cards--query .wp-block-cbvinstitute-blocks-card:hover .cbv-card-heading,
.cbv-cards--query .wp-block-cbvinstitute-blocks-card:focus-within .cbv-card-heading {
	color: var(--wp--preset--color--primary);
}

.cbv-cards--query .wp-block-cbvinstitute-blocks-card:hover .cbv-card-link span,
.cbv-cards--query .wp-block-cbvinstitute-blocks-card:focus-within .cbv-card-link span {
	color: var(--cbv-link-hover);
}

/* ==========================================================================
   Newsletter signup band (site-wide, directly above the footer)
   Content from inc/newsletter.php ([cbv_newsletter] shortcode).
   ========================================================================== */

.cbv-newsletter {
	/* Full-bleed navy band (matches the design), same technique as the hero /
	   jump-menu so it spans edge-to-edge regardless of the parent layout. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}

/* When placed as the "Newsletter signup" pattern the band is an align:full
   group living inside the constrained post content. Alignfull exempts it from
   the constrained layout's `margin: auto` on children; the two-class selector +
   later load order then beats main.css's `.has-global-padding > .alignfull`
   inset so it stays edge-to-edge at every width (matches .cbv-hero / .cbv-stats). */
.cbv-newsletter.alignfull,
.cbv-newsletter.alignwide {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* In the editor the canvas is narrower and offset from the browser viewport, so
   a viewport-based break-out overflows it and reads as broken. Render the band
   as a normal in-canvas block there (front end is unaffected). */
.editor-styles-wrapper .cbv-newsletter {
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.cbv-newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: 1280px;
	margin-inline: auto;
	/* 3rem top + bottom on both mobile and desktop (per Figma). */
	padding-block: 3rem;
}

.cbv-newsletter__intro {
	flex: 1 1 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cbv-newsletter__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.cbv-newsletter__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--cbv-fs-display);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
}

.cbv-newsletter__desc {
	margin: 0;
	max-width: 40rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
}

.cbv-newsletter__form-col {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cbv-newsletter__label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--wp--preset--color--accent);
}

.cbv-newsletter__input-group {
	display: flex;
}

/* input.cbv-newsletter__input (not just the class) so it beats the base
   input[type="email"] styling from the theme. */
.cbv-newsletter input.cbv-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 15px 16px;
	background-color: rgba(19, 16, 50, 0.7);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
}

.cbv-newsletter input.cbv-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.cbv-newsletter input.cbv-newsletter__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.cbv-newsletter__submit {
	flex: none;
	padding: 16px 24px;
	background-color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 0;
	color: #000000;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.cbv-newsletter__submit:hover,
.cbv-newsletter__submit:focus {
	background-color: var(--cbv-accent-hover);
	color: #000000;
}

.cbv-newsletter__submit[disabled] {
	opacity: 0.7;
	cursor: default;
}

.cbv-newsletter__feedback {
	margin: 0;
	min-height: 1.4em;
	font-size: 0.875rem;
	line-height: 1.4;
}

.cbv-newsletter__feedback[data-state="success"] {
	color: var(--wp--preset--color--accent);
}

.cbv-newsletter__feedback[data-state="error"] {
	color: #ffb4b4;
}

.cbv-newsletter__fineprint {
	margin: 0;
	max-width: 40rem;
	/* Figma Body/Large Bold — 16px, bold, full white (not a muted caption). */
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}

/* Honeypot — visually hidden, kept in the tab order out (bots still fill it). */
.cbv-newsletter__hp {
	position: absolute;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Mobile: stack the field and button full-width. */
@media (max-width: 600px) {
	.cbv-newsletter__input-group {
		flex-direction: column;
	}

	.cbv-newsletter__submit {
		border-left: 1px solid var(--wp--preset--color--border);
		border-top: 0;
	}
}

/* ==========================================================================
   Footer (slim)
   ========================================================================== */

.cbv-footer {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	/* 2.5rem mobile → 3rem desktop (per Figma). */
	padding-block: 2.5rem;
}

@media (min-width: 782px) {
	.cbv-footer {
		padding-block: 3rem;
	}
}

.cbv-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.cbv-footer a:hover {
	text-decoration: underline;
}

.cbv-footer__heading {
	/* Figma Heading/5 — Open Sans Bold, not the Gotham display face (it's an h2). */
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	margin: 0;
}

.cbv-footer__divider {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin: 0;
}

.cbv-footer__legal a {
	color: var(--wp--preset--color--accent);
	/* Underline the in-sentence link: teal on white surrounding text is only
	   1.96:1, so color alone can't distinguish it (WCAG 1.4.1). */
	text-decoration: underline;
}

.cbv-footer .wp-block-social-links {
	color: var(--wp--preset--color--accent);
}

.cbv-footer .wp-block-social-link {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
	.cbv-footer__contact,
	.cbv-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}

/* ==========================================================================
   Video Feature — text left, poster + play button right, video in a modal
   ========================================================================== */

.cbv-video-feature {
	position: relative;
	overflow: hidden;
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
}

/* The block ships with backgroundColor:primary; override WP's !important preset
   class so the band uses the design's surface navy (matches the hero). */
.cbv-video-feature.has-primary-background-color {
	background-color: var(--cbv-surface-navy) !important;
}

/* True full-bleed at all widths (beats the theme's mobile alignfull inset). */
.cbv-video-feature.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Let the two columns share a common height so the poster can fill its side.
   Figma band is 700px; this floor gets it close without excess text-side space. */
.cbv-video-feature .wp-block-columns {
	min-height: 640px;
	align-items: stretch;
	margin-block: 0;
}

.cbv-video-feature__eyebrow {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0;
}

.cbv-video-feature__title {
	color: var(--wp--preset--color--accent);
}

/* Media side ------------------------------------------------------------- */

.cbv-video-feature__media-col {
	align-self: stretch;
}

.cbv-video-feature__media {
	position: relative;
	height: 100%;
	min-height: 100%;
	margin: 0;
	overflow: hidden;
}

/* Poster fills the media column and is cropped to cover. */
.cbv-video-feature__poster {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.cbv-video-feature__poster img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* The poster is a decorative video thumbnail; never show its caption. On
   desktop it's clipped by the absolute-positioned figure, but on mobile the
   poster flows in normal layout, so the caption would otherwise appear. */
.cbv-video-feature__poster figcaption {
	display: none;
}

/* Play button — teal circle with a white triangle, centered on the poster. */
.cbv-video-feature__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 0;
	padding-left: 4px; /* optically center the triangle */
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	box-shadow: 0 7px 14px rgba(0, 0, 0, 0.35);
}

/* The icon SVG has a loose 24-unit viewBox (triangle fills ~11/24), so size it
   up here to land the visible triangle near Figma's ~33px inside the 80px
   circle. */
.cbv-video-feature__play svg {
	width: 72px;
	height: 72px;
	transition: transform var(--wp--custom--transition, 0.2s ease),
		background-color var(--wp--custom--transition, 0.2s ease);
}

.cbv-video-feature__play:hover {
	transform: translate(-50%, -50%) scale(1.06);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.cbv-video-feature__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

/* Before JS moves it, the raw video sits under the poster — keep it hidden on
   the front end (JS re-parents it into the modal). Editor has no JS, so the
   block stays visible there for editing. */
.cbv-video-feature.is-enhanced .cbv-video-feature__video {
	display: none;
}

/* Modal ------------------------------------------------------------------ */

body.cbv-modal-open {
	overflow: hidden;
}

.cbv-video-feature__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

.cbv-video-feature__modal.is-open {
	display: flex;
}

.cbv-video-feature__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(19, 16, 50, 0.88); /* navy @ 88% */
}

.cbv-video-feature__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 960px;
}

.cbv-video-feature__close {
	position: absolute;
	top: -3rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: color var(--wp--custom--transition, 0.2s ease);
}

.cbv-video-feature__close:hover {
	color: var(--wp--preset--color--accent);
}

.cbv-video-feature__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
	border-radius: 50%;
}

/* Force a 16:9 stage for whatever source (video / embed) lands inside. */
.cbv-video-feature__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #000;
}

.cbv-video-feature__player :is(video, iframe, lite-youtube, lite-vimeo),
.cbv-video-feature__player .cbv-video-feature__video,
.cbv-video-feature__player .wp-block-video,
.cbv-video-feature__player .wp-block-embed,
.cbv-video-feature__player .wp-block-embed__wrapper,
.cbv-video-feature__player figure {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* Neutralise core-embed's intrinsic-ratio padding hack inside the fixed stage. */
.cbv-video-feature__player .wp-block-embed__wrapper::before {
	display: none;
}

.cbv-video-feature__player :is(video, iframe) {
	display: block;
	object-fit: contain;
	border: 0;
}

/* Responsive: stacked columns get an explicit poster height. */
@media (max-width: 781px) {
	.cbv-video-feature .wp-block-columns {
		min-height: 0;
	}

	.cbv-video-feature__media {
		min-height: 0;
	}

	/* Text column: symmetric 32px top/bottom padding and a normal side gutter
	   (desktop's 60px right inset is dropped so the copy isn't pushed left). */
	.cbv-video-feature__content {
		padding: 32px 20px !important;
	}

	.cbv-video-feature__title {
		margin-bottom: 16px !important;
	}

	.cbv-video-feature__desc {
		margin-bottom: 20px !important;
	}

	/* Smaller play button on mobile (desktop's 80px reads too large there). */
	.cbv-video-feature__play {
		width: 56px;
		height: 56px;
	}

	.cbv-video-feature__play svg {
		width: 48px;
		height: 48px;
	}

	/* Mobile uses a short landscape crop (vs. the tall portrait crop on
	   desktop): the poster flows normally at a 3:2 ratio instead of filling
	   the column height. */
	.cbv-video-feature__poster {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	/* Full-bleed poster on mobile: cancel the constrained container's inset so
	   the image runs edge to edge (the text column keeps its inset). The extra
	   specificity + flex-basis reset beats core's `flex-basis:100% !important`
	   on stacked columns. */
	.cbv-video-feature .wp-block-columns > .wp-block-column.cbv-video-feature__media-col {
		order: -1; /* image above the text on mobile */
		flex-basis: 100vw !important;
		width: 100vw;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	/* CTAs stack full-width. */
	.cbv-video-feature .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 16px;
	}

	.cbv-video-feature .wp-block-button {
		width: 100%;
	}

	.cbv-video-feature .wp-block-button .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.cbv-video-feature__close {
		top: 0.5rem;
		right: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cbv-video-feature__play,
	.cbv-video-feature__close {
		transition: none;
	}

	.cbv-video-feature__play:hover {
		transform: translate(-50%, -50%);
	}
}

/* ==========================================================================
   Events calendar — modal shell only.
   Phase 2 scope: give calendar.js's cbv-events-modal actual overlay
   positioning so it renders on top of the page instead of inline. Inner
   typography, filter-bar dedupe, and category-tinted styling ship in
   Phase 3. Mirrors .cbv-video-feature__* positioning; class prefix swapped.
   ========================================================================== */

.cbv-events-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

.cbv-events-modal.is-open {
	display: flex;
}

.cbv-events-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(19, 16, 50, 0.88);
}

.cbv-events-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;   /* focused, less horizontal whitespace */
	max-height: calc(100vh - var(--wp--preset--spacing--40, 2rem) * 2);
	overflow: auto;
	background-color: var(--wp--preset--color--white, #fff);
	border-radius: 0;   /* matches search + filter chrome elsewhere */
	padding: 40px;
}

.cbv-events-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* WCAG-friendly hit area kept even though the glyph is smaller */
	height: 44px;
	/* MEC's `.mec-wrap button` sweep + WP's default button chrome both
	   set border/background on this. `!important` beats both. */
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cbv-text-muted, #585E64);
	cursor: pointer;
	opacity: .7;   /* softer default — hover lifts to full opacity */
	transition: color .15s ease, opacity .15s ease;
}
.cbv-events-modal__close:hover {
	color: var(--wp--preset--color--navy, #131032);
	opacity: 1;
}
.cbv-events-modal__close svg {
	width: 18px;
	height: 18px;
}

.cbv-events-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy, #131032);
	outline-offset: 2px;
}

.cbv-events-modal__content {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Modal content restyle. The fetched fragment comes from MEC's m1 template
   (plugin/app/skins/single/m1.php); rules below apply to that markup once
   it's dropped into `.cbv-events-modal__content`.

   Information hierarchy (top → bottom):
     1. Title
     2. Description
     3. Details grid — Date, Time, Location (2-col on desktop, stacks on mobile)
     4. Primary CTA — Register / More Info button
     5. Secondary — Add to Google Calendar / iCal export

   Everything else the m1 template ships (organizer, weather, speakers,
   FAQ, next-prev navigator, booking form, tags, share, countdown, QR,
   image, progress bar, custom fields) is hidden so the modal reads as a
   focused summary.
   -------------------------------------------------------------------------- */

/* Hidden modules — organizer/speaker/etc. keep the modal focused. Note
   `.mec-event-more-info` is hidden as a duplicate of the primary CTA. */
.cbv-events-modal__content .mec-events-meta-group-countdown,
.cbv-events-modal__content .mec-qrcode-details,
.cbv-events-modal__content .mec-event-social,
.cbv-events-modal__content .mec-events-meta-group-tags,
.cbv-events-modal__content .mec-event-more-info,
.cbv-events-modal__content .mec-single-event-organizer,
.cbv-events-modal__content .mec-events-event-image,
.cbv-events-modal__content .mec-progress-bar,
.cbv-events-modal__content .mec-weather-details,
.cbv-events-modal__content .mec-local-time-details,
.cbv-events-modal__content .mec-single-event-category,
.cbv-events-modal__content .mec-speakers-details,
.cbv-events-modal__content .mec-attendees-list-details,
.cbv-events-modal__content .mec-next-event-details,
.cbv-events-modal__content .mec-events-meta-group-gmap,
.cbv-events-modal__content .mec-events-meta-group-hourly-schedule,
.cbv-events-modal__content .mec-events-meta-group-booking,
.cbv-events-modal__content .mec-links-details,
.cbv-events-modal__content .mec-single-event-faq {
	display: none !important;
}

/* Flatten Bootstrap columns — `display: contents` makes their children
   direct participants in `.mec-single-event`'s flex layout, so we can
   reorder them regardless of which column MEC put them in. */
.cbv-events-modal__content .col-md-4,
.cbv-events-modal__content .col-md-8 {
	display: contents;
}

.cbv-events-modal__content .mec-wrap,
.cbv-events-modal__content .mec-single-event {
	padding: 0;
	margin: 0;
	background: transparent;
}
.cbv-events-modal__content .mec-single-event {
	display: flex;
	flex-direction: column;
	/* Per-section margins (below) instead of a uniform flex gap — the
	   title + description read as one cohesive header block (16px),
	   while the details / CTA / secondary rows sit on a wider 24-32px
	   rhythm. */
	gap: 0;
}

/* -- Order --------------------------------------------------------------- */
.cbv-events-modal__content .mec-single-title { order: 0; }
.cbv-events-modal__content .mec-event-content { order: 1; }        /* description wrap */
.cbv-events-modal__content .mec-single-event-bar { order: 2; }    /* date + time */
/* Two `.mec-event-meta` boxes ship: first has the register button,
   second has location + more info. Send the register box below the
   details, location box in with the details, more info stays hidden. */
.cbv-events-modal__content .mec-event-meta:has(.mec-booking-button) { order: 4; }
.cbv-events-modal__content .mec-event-meta:not(:has(.mec-booking-button)) { order: 3; }
.cbv-events-modal__content .mec-event-export-module { order: 5; }

/* -- 1. Title ------------------------------------------------------------ */
/* `data-event-id` on `.cbv-events-modal` (set by calendar.js on open)
   receives the category color/slug + course/category label vars from
   inc/mec.php's per-event style block. Pseudo-elements on the title
   render:
     ::before → event-type pill (In-Person / Webinar / Connect on
                 General; Level pill on Educational)
     ::after  → tag row with the driving taxonomy term (Course on
                 Educational, Category on General) */
.cbv-events-modal__content .mec-single-title {
	font-family: var(--wp--preset--font-family--heading, 'Open Sans'), sans-serif;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--wp--preset--color--navy, #131032);
	margin: 0;
	padding-right: 44px;   /* clear space for the close ✕ */
	/* Grid so the ::before badge + hoisted .mec-holding-status chip
	   share row 1, and the JS-wrapped title text (row 2) + ::after tag
	   (row 3) each get their own row. Wrapped items:
	     - `::before`               → row 1, col 1
	     - `.mec-holding-status`    → row 1, col 2 (present only when the
	                                    event has a status; JS toggles
	                                    `.has-status` when it hoists it)
	     - `.cbv-modal-title-text`  → row 2, spans both cols
	     - `::after`                → row 3, spans both cols
	   Grid areas keep the layout stable whether or not `.has-status`
	   is present. */
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 12px;
	column-gap: 8px;
	justify-items: start;
	align-items: center;
}
.cbv-events-modal__content .mec-single-title::before {
	content: var(--cbv-cat-slug, '');
	display: var(--cbv-cat-display, none);
	background: var(--cbv-cat-color, var(--wp--preset--color--accent-light, #e9f3f3));
	color: var(--cbv-cat-text, var(--wp--preset--color--contrast, #131032));
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: capitalize;
	padding: 4px 12px;
	border-radius: 4px;
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}
/* Hoisted status pill (JS moves it here from `.mec-single-event-date`
   in calendar.js → openModal). Sits inline with the type badge on
   row 1. Restyled here to override the row-3 date-cell rules further
   down and drop the pill-inside-a-dl chrome. */
.cbv-events-modal__content .mec-single-title > .mec-holding-status {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	align-self: center;
	margin: 0;
	padding: 2px 10px;
}
/* JS-wrapped title text — row 2, spans both cols so long titles wrap
   the full width of the header. */
.cbv-events-modal__content .mec-single-title .cbv-modal-title-text {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: start;
	align-self: center;
	font: inherit;
	color: inherit;
}
.cbv-events-modal__content .mec-single-title::after {
	content: var(--cbv-tag-label);
	display: var(--cbv-tag-display, none);
	align-items: center;
	color: var(--cbv-text-muted, #585E64);
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	font-feature-settings: 'liga' off, 'clig' off;
	padding-left: 24px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M6 4.5C6 5.32843 5.32843 6 4.5 6C3.67157 6 3 5.32843 3 4.5C3 3.67157 3.67157 3 4.5 3C5.32843 3 6 3.67157 6 4.5ZM5 4.5C5 4.22386 4.77614 4 4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5C4.77614 5 5 4.77614 5 4.5Z' fill='%2380868C'/><path d='M2 1H6.58579C6.851 1 7.10536 1.10536 7.29289 1.29289L14.2929 8.29289C14.6834 8.68342 14.6834 9.31658 14.2929 9.70711L9.70711 14.2929C9.31658 14.6834 8.68342 14.6834 8.29289 14.2929L1.29289 7.29289C1.10536 7.10536 1 6.851 1 6.58579V2C1 1.44772 1.44772 1 2 1ZM2 6.58579L9 13.5858L13.5858 9L6.58579 2L2 2L2 6.58579Z' fill='%2380868C'/></svg>") left center / 16px 16px no-repeat;
	grid-column: 1 / -1;
	grid-row: 3;
	justify-self: start;
}

/* -- 2. Description ----------------------------------------------------- */
/* 20px below the title's tag row — the category tag reads as metadata
   and the description reads as its own content section that may run
   long. Enough space here keeps multi-line descriptions from feeling
   cramped up against the category chip. */
.cbv-events-modal__content .mec-event-content {
	margin: 20px 0 0;
	padding: 0;
}
.cbv-events-modal__content .mec-single-event-description {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: var(--cbv-text-muted, #585E64);
	/* Cap long paragraphs for readability at the modal width. */
	max-width: 58ch;
}
.cbv-events-modal__content .mec-single-event-description p {
	margin: 0 0 12px;
}
.cbv-events-modal__content .mec-single-event-description p:last-child {
	margin-bottom: 0;
}
.cbv-events-modal__content .mec-single-event-description a {
	color: var(--wp--preset--color--navy, #131032);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -- 3. Details grid (Date + Time [+ Location]) ------------------------- */
/* Two-column layout on desktop; stacks on mobile. Alignment carries the
   grouping — no card backgrounds, no borders. Labels are subtle,
   values are the primary read. Sits 24px below the header block.
   `!important` on grid + template-columns overrides MEC's
   `.mec-single-modern .mec-single-event-bar` rule (frontend.min.css
   line 1 area) which forces `display: table` on the bar and
   `display: block` on its children — that ties on specificity and can
   win by load order, stacking the date/time vertically. */
/* Details wrapper — in this render path MEC consolidates date, time,
   more-info and the register button into one `.mec-event-info-desktop
   .mec-event-meta.mec-frontbox` box. Flex-wrap gives us date + time
   side by side (50/50) with the button dropping onto its own row.
   Sits 20px below the description so metadata reads as a continuation
   of the header block. */
.cbv-events-modal__content .mec-event-info-desktop {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;   /* time cell aligns to top when date grows for a status chip */
	column-gap: 24px;
	row-gap: 16px;
	margin: 20px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* Style Date + Time cells by class so we're independent of whatever
   wrapper MEC picks (m1's `.mec-single-event-bar` or the consolidated
   `.mec-event-info-desktop`). Both cells share the same layout, so
   icon / label / value baselines match exactly across the row. */
.cbv-events-modal__content .mec-single-event-date,
.cbv-events-modal__content .mec-single-event-time {
	flex: 1 1 calc(50% - 12px);
	min-width: 0;
	display: grid !important;
	grid-template-columns: 20px 1fr;
	/* Row 1: icon + label. Row 2: value. Row 3 (date only): status chip. */
	grid-template-rows: auto auto auto;
	column-gap: 8px;
	row-gap: 4px;
	align-items: center;
	background: transparent;
	padding: 0;
	margin: 0;
}
/* Icon glyphs — MEC's `.mec-color-before :before` rule sets
   `color: #40d9f1` (bright cyan) on every descendant `:before`,
   which our icon-font glyphs render as. Override with the CBV
   accent teal so the icons match the In-Person badge. */
.cbv-events-modal__content .mec-color-before :before,
.cbv-events-modal__content .mec-single-event-date > i::before,
.cbv-events-modal__content .mec-single-event-time > i::before {
	color: var(--wp--preset--color--accent, #69C8C7);
}
.cbv-events-modal__content .mec-single-event-date > svg,
.cbv-events-modal__content .mec-single-event-date > i,
.cbv-events-modal__content .mec-single-event-time > svg,
.cbv-events-modal__content .mec-single-event-time > i:not(.mec-time-comment) {
	grid-column: 1;
	grid-row: 1;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
	color: var(--wp--preset--color--accent, #69C8C7);
	display: inline-block;
}
.cbv-events-modal__content .mec-single-event-time > i.mec-time-comment {
	display: none;
}
.cbv-events-modal__content .mec-single-event-date h3,
.cbv-events-modal__content .mec-single-event-time h3 {
	grid-column: 2;
	grid-row: 1;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: var(--cbv-text-muted, #585E64);
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
	display: block;
}
.cbv-events-modal__content .mec-single-event-date dl,
.cbv-events-modal__content .mec-single-event-time dl {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
}
.cbv-events-modal__content .mec-single-event-date dd,
.cbv-events-modal__content .mec-single-event-time dd {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #131032);
}
.cbv-events-modal__content .mec-single-event-date abbr,
.cbv-events-modal__content .mec-single-event-time abbr {
	border: 0;
	text-decoration: none;
	cursor: inherit;
}

/* Event status chip (Expired / Cancelled / Sold Out / Postponed).
   MEC injects a second `<dl>` inside `.mec-single-event-date`
   carrying `.mec-holding-status`, which our default rule for
   `.mec-single-event-date dl` puts in the same cell as the date
   value — the two overlap. Send it to row 3 spanning both grid
   columns so it sits underneath the date without touching the value.
   Full-width span means the chrome inside the `<dl>` renders
   left-aligned. */
.cbv-events-modal__content .mec-single-event-date dl:has(.mec-holding-status) {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 4px 0 0;
	padding: 0;
}
.cbv-events-modal__content .mec-single-event-date dl:has(.mec-holding-status) dd {
	display: block;
	margin: 0;
	font-size: 0;   /* collapse the whitespace around the span child */
	line-height: 0;
}

/* Chip base — flexible across status modifiers via `--status-fg` /
   `--status-bg` custom props. Modifier classes below only reassign
   the two vars; the shape stays consistent, so future statuses
   (Cancelled / Sold Out / Postponed / etc.) plug in with a single
   two-line override. */
.cbv-events-modal__content .mec-holding-status {
	--status-fg: var(--cbv-text-muted, #585E64);
	--status-bg: var(--cbv-surface-muted, #f2f4f6);
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--status-bg);
	color: var(--status-fg) !important;   /* beats MEC's `.mec-holding-status-expired { color: #d8000c }` */
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
}
/* Per-status colour hooks. Kept in the CBV palette so we don't
   introduce new colours; expired reads as muted-but-dark on the
   default grey chip. Add more `.mec-holding-status-<slug>` blocks
   when MEC ships additional statuses. */
.cbv-events-modal__content .mec-holding-status-expired {
	--status-fg: var(--wp--preset--color--navy, #131032);
	--status-bg: var(--cbv-divider, #e4e4ea);
}
.cbv-events-modal__content .mec-holding-status-ongoing {
	--status-fg: var(--wp--preset--color--navy, #131032);
	--status-bg: var(--wp--preset--color--accent-light, #b3f1f1);
}

/* Location — same treatment as the details grid rows, spans full width. */
.cbv-events-modal__content .mec-event-meta:not(:has(.mec-booking-button)) {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 12px 0 0;
}
.cbv-events-modal__content .mec-single-event-location {
	background: transparent;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 20px 1fr;
	column-gap: 8px;
	row-gap: 2px;
	align-items: center;
}
.cbv-events-modal__content .mec-single-event-location > svg,
.cbv-events-modal__content .mec-single-event-location > i {
	grid-column: 1;
	grid-row: 1;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--accent, #69C8C7);
	display: block;
}
.cbv-events-modal__content .mec-single-event-location h3 {
	grid-column: 2;
	grid-row: 1;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--cbv-text-muted, #585E64);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}
.cbv-events-modal__content .mec-single-event-location dl,
.cbv-events-modal__content .mec-single-event-location dd,
.cbv-events-modal__content .mec-single-event-location p {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #131032);
}

/* -- 4. Primary CTA ----------------------------------------------------- */
/* The register button sits inside the same wrapper as date/time in the
   consolidated render path, where the flex-wrap layout drops it onto
   its own row underneath (see `.mec-event-info-desktop` above).
   The `:has()` fallback here handles the m1 render path where the
   booking button lives in its own `.mec-event-meta` sidebar box. */
.cbv-events-modal__content .mec-event-meta:has(.mec-booking-button) {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 20px 0 0;
}
/* Full-width button so it uses the modal's horizontal space and reads
   as the primary action. 48px control height matches the filter
   selects + search input. `box-sizing: border-box` + fixed height
   beats MEC's own padded `.mec-booking-button` rule that ships taller. */
.cbv-events-modal__content .mec-booking-button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 48px;
	padding: 0 32px !important;
	background: var(--wp--preset--color--navy, #131032) !important;
	color: var(--wp--preset--color--white, #fff) !important;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 0 !important;
	border-radius: 0;
	margin: 0;
	transition: background-color .15s ease;
}
.cbv-events-modal__content .mec-booking-button:hover,
.cbv-events-modal__content .mec-booking-button:focus-visible {
	background: var(--cbv-surface-navy, #221c58) !important;
	color: var(--wp--preset--color--white, #fff) !important;
	text-decoration: none;
}

/* -- 5. Secondary — export links --------------------------------------- */
/* Divider above separates primary CTA from secondary actions.
   `::before` renders a small "Add to Calendar" heading that reads as
   the section label (no PHP change needed). Links group tight-left. */
.cbv-events-modal__content .mec-event-export-module {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--cbv-divider, #e4e4ea);
	box-shadow: none;
	padding: 20px 0 0;
	margin: 24px 0 0;
}
.cbv-events-modal__content .mec-event-export-module::before {
	content: 'Add to Calendar';
	display: block;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: var(--cbv-text-muted, #585E64);
	margin: 0 0 8px;
}
.cbv-events-modal__content .mec-event-export-module ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 8px;
	justify-content: flex-start;
	align-items: center;
}
.cbv-events-modal__content .mec-event-export-module li {
	margin: 0;
	padding: 0;
}
.cbv-events-modal__content .mec-events-gcal {
	display: inline-flex;
	align-items: center;
	background: transparent !important;
	color: var(--wp--preset--color--navy, #131032) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cbv-events-modal__content .mec-events-gcal:hover,
.cbv-events-modal__content .mec-events-gcal:focus-visible {
	color: var(--wp--preset--color--accent, #69C8C7) !important;
	background: transparent !important;
}

/* -- Mobile ------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.cbv-events-modal__dialog {
		padding: 32px 20px 24px;
	}
	.cbv-events-modal__content .mec-single-title {
		font-size: 24px;
	}
	/* Stack date + time on mobile so each takes the full row. */
	.cbv-events-modal__content .mec-event-info-desktop {
		margin-top: 20px !important;
		row-gap: 12px;
	}
	.cbv-events-modal__content .mec-single-event-date,
	.cbv-events-modal__content .mec-single-event-time {
		flex: 1 1 100%;
	}
	.cbv-events-modal__content .mec-event-meta:has(.mec-booking-button) {
		margin-top: 20px;
	}
	.cbv-events-modal__content .mec-event-export-module {
		margin-top: 20px;
	}
	.cbv-events-modal__content .mec-event-export-module ul {
		flex-direction: column;
		gap: 8px;
	}
	/* MEC's own <768px rule centers each <li>
	   (`.mec-single-event .mec-event-export-module.mec-frontbox
	   .mec-event-exporting .mec-export-details ul li { text-align:
	   center }`). Match its specificity and force left alignment so
	   the calendar links line up under the "Add to Calendar" heading. */
	.cbv-events-modal__content .mec-single-event .mec-event-export-module.mec-frontbox .mec-event-exporting .mec-export-details ul li a {
		text-align: left;
	}
}

/* ==========================================================================
   Events calendar — month grid + category-tinted event pills (Phase 3 step 21)
   Scoped to .mec-full-calendar-wrap (only present where the [MEC …] shortcode
   renders the full_calendar skin, so no page-body class needed for isolation).

   Category pill colors come from inc/mec.php's `<style id="cbv-mec-category-
   colors">` block, which emits `--cbv-cat-color` / `--cbv-cat-text` per
   `[data-event-id]`. See the Figma monthly frame (8458-73880) for the target.
   ========================================================================== */

/* Escape the .entry-content's contentSize (660px) constraint so the
   calendar fills the wideSize (1280px) — the Figma design lays this out
   full-width.

   Trick: viewport-anchored positioning. `position: relative` + `left:
   50%` centers the anchor on the viewport, then `translateX(-50%)`
   pulls the block back so it's centered. Width is capped at wideSize
   (1280px) or the viewport minus 24px each side (whichever is smaller
   — keeps things sane on mobile).

   Percentage-based negative margins (`calc((100% - W) / 2)`) don't work
   here because WP's block layout wraps this element in an `auto`-margin
   context and browsers clamp one side to 0 when the calc goes negative
   in that context. */
.entry-content .mec-full-calendar-wrap {
	--cbv-cal-width: min(1280px, 100vw - 48px);
	position: relative;
	width: var(--cbv-cal-width);
	max-width: none;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0;
	margin-right: 0;
}

/* Whitespace under the calendar so the following block doesn't hug the
   last row. 60px desktop / 20px mobile per client spec. */
.mec-wrap.colorskin-custom.mec-full-calendar-wrap {
	padding-bottom: 60px;
}

@media (max-width: 991.98px) {
	.mec-wrap.colorskin-custom.mec-full-calendar-wrap {
		padding-bottom: 20px !important;
	}
	/* Exclude the header nav: this rule's 4-class specificity would otherwise beat
	   the mobile `.cbv-mainnav { padding: 0 0 0 20px }` rule and add dead space
	   above the logo / menu toggle. */
	.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained:not(.cbv-mainnav):not(.cbv-topbar) {
		padding-top: 20px !important;
	}
}

/* Neutralise MEC's own event-cell background/border chrome. The Simple sub-
   skin emits `<div class="mec-past-event">` wrappers with a plugin default
   background that fights our pill styling. */
.mec-full-calendar-wrap .mec-calendar-events-side .mec-past-event,
.mec-full-calendar-wrap dt .mec-past-event {
	background: transparent;
	border: 0;
	padding: 0;
	margin-bottom: 4px;
}

/* Day-of-week header row: uppercase, small, spaced. Matches Figma. */
.mec-full-calendar-wrap .mec-calendar-header-title,
.mec-full-calendar-wrap dt.mec-table-nullday-head,
.mec-full-calendar-wrap .mec-calendar-day.mec-table-nullday-head {
	font-family: var(--wp--preset--font-family--body, "Open Sans"), sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #131032);
	background: transparent;
	padding: 12px 8px;
	border-bottom: 1px solid var(--wp--preset--color--muted, #b4bbc2);
}

/* Weekday header row (Classic sub-skin): drop MEC's default background,
   center-align the labels. The visible grey band lives on the parent
   <dl class="mec-calendar-table-head"> itself, so wipe its background
   too — the cells were already transparent. */
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl.mec-calendar-table-head,
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl.mec-calendar-table-head .mec-calendar-day-head {
	background: transparent;
	text-align: center;
}

/* Expand MEC's 2-letter weekday labels (MO/TU/WE…) to 3-letter labels
   (MON/TUE/WED…). MEC hard-codes the two-letter form server-side; the
   `font-size: 0` on the <dt> hides the original text, and a `::before`
   pseudo-element per column renders the three-letter form at 12px.
   MEC's `.mec-calendar .mec-calendar-table-head dt { font-size: 15px }`
   at 0,2,1 beats a plain two-class override — match it to hide the
   original label. */
.mec-full-calendar-wrap .mec-calendar .mec-calendar-table-head dt.mec-calendar-day-head {
	font-size: 0;
	line-height: 1;
	text-align: center;
	padding: 8px;
}

.mec-full-calendar-wrap .mec-calendar-day-head::before {
	display: block;
	font-family: var(--wp--preset--font-family--body, "Open Sans"), sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #131032);
}

.mec-full-calendar-wrap dl.mec-calendar-table-head .mec-calendar-day-head:nth-child(1)::before { content: "MON"; }
.mec-full-calendar-wrap dl.mec-calendar-table-head .mec-calendar-day-head:nth-child(2)::before { content: "TUE"; }
.mec-full-calendar-wrap dl.mec-calendar-table-head .mec-calendar-day-head:nth-child(3)::before { content: "WED"; }
.mec-full-calendar-wrap dl.mec-calendar-table-head .mec-calendar-day-head:nth-child(4)::before { content: "THU"; }
.mec-full-calendar-wrap dl.mec-calendar-table-head .mec-calendar-day-head:nth-child(5)::before { content: "FRI"; }
.mec-full-calendar-wrap dl.mec-calendar-table-head .mec-calendar-day-head:nth-child(6)::before { content: "SAT"; }
.mec-full-calendar-wrap dl.mec-calendar-table-head .mec-calendar-day-head:nth-child(7)::before { content: "SUN"; }

/* 1px borders on the Simple sub-skin's row cells and head cells. MEC ships
   its own border rules with 3-class specificity on `.mec-calendar.mec-
   event-container-simple .mec-calendar-row dt` and the `:last-child`
   variant; match those exactly and force width 1px so nothing wider slips
   through from stock styles. */
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple .mec-calendar-row dt,
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple .mec-calendar-row dt:last-child,
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple .mec-calendar-table-head dt,
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple .mec-calendar-table-head dt:last-child {
	border-width: 1px;
	border-style: solid;
	border-color: #B4BBC2;
	border-top: 0;
	border-left: 0;
}

/* Fixed cell dimensions on desktop (≥ 992px, above the mobile-list gate).
   Matching MEC's Classic sub-skin selector chain so this beats the
   plugin's own dt sizing. Horizontal padding is intentionally 0 — it
   lives on the day-number div instead, so event pills reach cell-edge. */
@media (min-width: 992px) {
	.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt {
		height: 171px;
		padding: 8px 0;
	}
}

/* Grid cells. Uniform 1px inner borders per user request. */
.mec-full-calendar-wrap .mec-calendar-table {
	border-top: 1px solid #B4BBC2;
	border-left: 1px solid #B4BBC2;
}

.mec-full-calendar-wrap .mec-calendar-table dl {
	border: 0;
}

.mec-full-calendar-wrap .mec-calendar-day {
	background: #fff;
	border-right: 1px solid #B4BBC2;
	border-bottom: 1px solid #B4BBC2;
	border-top: 0;
	border-left: 0;
	min-height: 110px;
	/* Horizontal padding lives on the day-number div and the event
	   pill children below, so pills can span cell-edge to cell-edge. */
	padding: 8px 0;
	vertical-align: top;
	position: relative;
	/* MEC ships `.mec-calendar.mec-event-container-simple dl dt.mec-calendar-day
	   { font-size: 30px }` — that governs cells rendered as bare text (days
	   with no events, where MEC emits the number directly inside `<dt>`
	   rather than wrapping it in a `<div>`). Force 16px so those cells
	   match the wrapped-div cells that our `> div:first-child` rule below
	   already sizes. Text-align right so the bare number sits at the
	   top-right corner too. */
	font-size: 16px;
	text-align: right;
	line-height: 1;
}

/* Ensure the wider MEC selector doesn't out-specify the base font-size
   on the cell (its 30px would otherwise leak back in). Also right-align
   here — MEC has `.mec-calendar.mec-event-calendar-classic dl dt` with
   `text-align: left` at 0,2,2 which beats a two-class override. Bold
   weight matches the div-wrapped variant. */
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple dl dt.mec-calendar-day,
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-calendar-day {
	font-size: 16px;
	font-weight: 700;
	text-align: right;
}

/* Bump MEC's own `.mec-calendar dt { font-size: 14px }` base rule up to
   16px so every dt (head cell, null-day, empty cell) picks up the new
   size, not just the ones caught by the day-specific rules above. */
.mec-full-calendar-wrap .mec-calendar dt {
	font-size: 16px;
}

/* Reset text alignment for descendants (event pills, tooltips) — the
   `text-align: right` on the cell is only for the bare-text number. */
.mec-full-calendar-wrap .mec-calendar-day > * {
	text-align: left;
}

/* Day-of-month number: rendered in normal flow at the top-right so event
   pills stack naturally below it. Block-level element with right-aligned
   text keeps the number pinned to the top-right corner. Owns the
   horizontal padding (the cell has none) so pill children below can span
   cell-edge to cell-edge. */
.mec-full-calendar-wrap .mec-calendar-day > div:first-child,
.mec-full-calendar-wrap .mec-calendar-day > .mec-selected-day-date {
	display: block;
	position: static;
	font-family: var(--wp--preset--font-family--body, "Open Sans"), sans-serif;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #131032);
	margin: 0 0 8px;
	padding: 0 16px 0 8px;
	text-align: right;
	pointer-events: none;
}

/* Bare-text day cells (MEC's Simple sub-skin emits `<dt>6</dt>` when the
   day has no events — no wrapping div, just a text node). Give the cell
   itself the same horizontal padding as the day-number div gets in the
   event case, so the number keeps a consistent 8px inset from the cell
   edges. `:not(:has(> div))` scopes this to cells with no child divs
   so cells with events don't get double-padded. Matches MEC's own
   `.mec-calendar.mec-event-calendar-classic dl dt` chain (0,3,1) so it
   beats the desktop cell-padding override higher up. */
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-calendar-day:not(:has(> div)) {
	padding-left: 8px;
	padding-right: 16px;
}

/* Event pill container (`.mec-past-event.ended-relative.simple-skin-ended`
   is the wrapper MEC emits around each event anchor). Force block flow
   so it always sits BELOW the day number rather than potentially
   overlapping when the number is short. */
.mec-full-calendar-wrap .mec-calendar-day .mec-past-event.ended-relative.simple-skin-ended,
.mec-full-calendar-wrap .mec-calendar-day .mec-past-event {
	display: block;
	clear: both;
	margin-top: 0;
	margin-bottom: 0;
}

/* 10px gap between stacked pills — apply to any past-event that HAS a
   following past-event sibling. Because MEC emits a `.tooltip_templates`
   div between adjacent past-events, adjacent-sibling (`+`) selectors
   don't reach; `:has(~ .mec-past-event)` matches through the tooltip
   template and gives the last past-event a naturally clean bottom. */
.mec-full-calendar-wrap .mec-calendar-events-side .mec-past-event:has(~ .mec-past-event),
.mec-full-calendar-wrap dt .mec-past-event:has(~ .mec-past-event) {
	margin-bottom: 10px;
}

/* Adjacent-month cells (July 30-31 / Sep 1-2 when viewing August): MEC
   marks them `.mec-table-nullday`. Two DOM variants:
   1. Empty leading/trailing cells → `<dt class="mec-table-nullday">`
      (no `.mec-calendar-day`).
   2. Adjacent-month cells that carry a day number → `<dt class="mec-
      calendar-day mec-table-nullday">`.
   Both variants get the tint and the fade. Weekends of the current
   month keep the standard white background. */
.mec-full-calendar-wrap .mec-calendar-row > dt.mec-table-nullday,
.mec-full-calendar-wrap dl > dt.mec-table-nullday {
	background: #f0f1f3;
	border-right: 1px solid #B4BBC2;
	border-bottom: 1px solid #B4BBC2;
	min-height: 110px;
	/* Vertical padding: 8px top and bottom, matching current-month cells.
	   Horizontal padding is set below per DOM variant. */
	padding: 8px 0;
	text-align: right;
	font-weight: 700;
	vertical-align: top;
	position: relative;
}

/* Bare-text null-day cells (`<dt class="mec-table-nullday">27</dt>`) get
   horizontal padding on the cell itself. Div-wrapped variants (like
   `<dt class="mec-calendar-day mec-table-nullday">` where a `<div>29</div>`
   holds the number and a `<div class="mec-past-event">` holds the pill)
   keep zero horizontal cell padding — the inner day-number div picks up
   its own 0 8px inset from the shared day-number rule, and the pill can
   span cell-edge. Same `:not(:has(> div))` logic as `.mec-calendar-day`
   uses higher up. */
.mec-full-calendar-wrap .mec-calendar-row > dt.mec-table-nullday:not(:has(> div)),
.mec-full-calendar-wrap dl > dt.mec-table-nullday:not(:has(> div)) {
	padding-left: 8px;
	padding-right: 16px;
}

/* Also apply on desktop where the Classic-sub-skin dt rule sets its own
   padding — mirror the same has()-based split. */
@media (min-width: 992px) {
	.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-table-nullday {
		padding: 8px 0;
		text-align: right;
		font-weight: 700;
	}
	.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-table-nullday:not(:has(> div)) {
		padding-left: 8px;
		padding-right: 16px;
	}
}

.mec-full-calendar-wrap dt.mec-table-nullday,
.mec-full-calendar-wrap dt.mec-table-nullday > div:first-child {
	color: #585E64;
	font-weight: 700;
}

/* Hide events (and their tooltip templates) in adjacent-month null-day
   cells — only the faded day number should show. MEC uses different
   wrapper classes for past vs upcoming events:
     - Prev-month: `<div class="mec-past-event ended-relative simple-skin-ended">`
     - Next-month: `<div class="ended-relative simple-skin-ended">`
   Both variants share `.ended-relative.simple-skin-ended`, so key off
   that. The universal-child hide would work too but is (0,4,0), and
   we have an earlier `.mec-past-event.ended-relative.simple-skin-ended`
   `display: block` rule at (0,5,0) that wins on the ties — match it. */
.mec-full-calendar-wrap .mec-calendar-day.mec-table-nullday > .ended-relative.simple-skin-ended,
.mec-full-calendar-wrap .mec-calendar-day.mec-table-nullday > .tooltip_templates {
	display: none;
}

/* "Today" indicator. MEC adds .mec-selected-day (and .mec-calendar-novel-
   selected-day on some Simple variants) on the current day cell. Render
   the number as a square teal chip: black text on the Surface/teal
   token, 4×8 padding, square corners, hugging the number itself so the
   background doesn't span the full cell width. `display: inline-block`
   respects the cell's `text-align: right`, keeping the chip pinned top-
   right. */
.mec-full-calendar-wrap .mec-calendar-day.mec-calendar-novel-selected-day > div:first-child,
.mec-full-calendar-wrap .mec-calendar-day.mec-selected-day > div:first-child {
	display: inline-block;
	color: #000000;
	font-weight: 700;
	background: var(--wp--preset--color--accent, #69C8C7);
	border-radius: 0;
	padding: 4px 8px;
	width: auto;
	height: auto;
}

/* Right-align the parent cell so the inline-block chip floats to the
   top-right corner of the today cell. Pull the right padding back to
   8px (all other bare-text cells use 16px right) so the teal chip
   doesn't sit uncomfortably far from the cell edge. */
.mec-full-calendar-wrap .mec-calendar-day.mec-calendar-novel-selected-day,
.mec-full-calendar-wrap .mec-calendar-day.mec-selected-day {
	text-align: right;
}

.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple dl dt.mec-calendar-day.mec-selected-day,
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-calendar-day.mec-selected-day,
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple dl dt.mec-calendar-day.mec-calendar-novel-selected-day,
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-calendar-day.mec-calendar-novel-selected-day {
	padding-right: 8px;
}

/* Bare-text today (no events): the day number is a text node directly
   inside `<dt>12</dt>`, so `> div:first-child` above doesn't match. Hide
   the raw text with `font-size: 0` and render an inline-block chip via
   `::before content: attr(data-day)` — same visual as the div-wrapped
   variant. */
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple dl dt.mec-calendar-day.mec-selected-day:not(:has(> div)),
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-calendar-day.mec-selected-day:not(:has(> div)),
.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple dl dt.mec-calendar-day.mec-calendar-novel-selected-day:not(:has(> div)),
.mec-full-calendar-wrap .mec-calendar.mec-event-calendar-classic dl dt.mec-calendar-day.mec-calendar-novel-selected-day:not(:has(> div)) {
	font-size: 0;
}

.mec-full-calendar-wrap .mec-calendar-day.mec-selected-day:not(:has(> div))::before,
.mec-full-calendar-wrap .mec-calendar-day.mec-calendar-novel-selected-day:not(:has(> div))::before {
	content: attr(data-day);
	display: inline-block;
	font-family: var(--wp--preset--font-family--body, "Open Sans"), sans-serif;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	color: #000000;
	background: var(--wp--preset--color--accent, #69C8C7);
	padding: 4px 8px;
}

/* Event pill. Compact, tinted by category via the emitted custom props.
   Square corners per Figma. Padding lives on the inner .mec-event-title
   so the pill hugs the h4 exactly. MEC ships a `border-bottom: 1px
   dashed #e3e3e3` under the anchor via
   `.mec-event-container-simple .mec-monthly-tooltip.event-single-link-simple`
   — wipe it here so the pill's coloured background is the only edge. */
.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple {
	display: block;
	background: var(--cbv-cat-color, var(--wp--preset--color--accent-light, #e9f3f3));
	color: var(--cbv-cat-text, var(--wp--preset--color--contrast, #131032));
	border: 0;
	border-radius: 0;
	/* Padding lives on the anchor (not the h4) so `-webkit-line-clamp`
	   on the title clips cleanly at the content-box edge. The clamp
	   calc misbehaves when the clamped element also has its own
	   padding — text peeks past the 2nd line. */
	padding: 8px;
	margin-bottom: 8px;
	text-decoration: none;
	line-height: 1.25;
	transition: filter 0.15s ease;
	overflow: hidden;   /* belt-and-suspenders: clip anything the h4 misses. */
}

/* Match MEC's own three-class specificity chain to make sure the
   `border-bottom: 1px dashed #e3e3e3` on
   `.mec-event-container-simple .mec-monthly-tooltip.event-single-link-simple`
   really is gone (its 3-class ties ours on specificity but loads later). */
.mec-full-calendar-wrap .mec-event-container-simple .mec-monthly-tooltip.event-single-link-simple {
	border-bottom: 0;
}

.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple:hover {
	filter: brightness(0.94);
}

.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #131032);
	outline-offset: 2px;
}

.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple .mec-event-title {
	color: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	/* Padding moved to the anchor above — a `-webkit-box` clamped
	   element with its own padding leaks a partial next line past
	   the clip. Anchor's `overflow: hidden` still catches it. */
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	max-height: calc(1.2em * 2);   /* hard cap in case the clamp math wobbles. */
	/* Long unbreakable tokens (e.g. compound course names) would push
	   past the day cell without ever hitting a wrap point, defeating
	   the line-clamp. `anywhere` lets the browser break mid-word as a
	   last resort so the ellipsis actually kicks in. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Q2 — events without More Info get href="#cbv-no-more-info". Render the
   title as plain text on the tinted pill (no cursor affordance, no
   underline, no hover brightness change). */
.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple[href^="#cbv-no-more-info"] {
	cursor: default;
	pointer-events: none;
}

.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple[href^="#cbv-no-more-info"]:hover {
	filter: none;
}

/* Hide the plugin-emitted chrome we don't want inside the calendar cells:
   event thumbnails, times, detail text, booking + share icons, and the
   post-title label chip (MEC's `get_normal_labels()` emits a
   `<span class="mec-labels-normal">Webinar</span>` after the h4, which
   would otherwise leak onto a third line below the clamped title). The
   Figma month grid shows title-only pills. */
.mec-full-calendar-wrap .mec-monthly-contents .mec-event-image,
.mec-full-calendar-wrap .mec-monthly-contents .mec-event-time,
.mec-full-calendar-wrap .mec-monthly-contents .mec-event-detail,
.mec-full-calendar-wrap .mec-monthly-contents .mec-booking-button,
.mec-full-calendar-wrap .mec-monthly-contents .mec-event-sharing-wrap,
.mec-full-calendar-wrap .mec-monthly-contents .mec-event-social-icons,
.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple .mec-labels-normal,
.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple .mec-labels-normal-container,
.mec-full-calendar-wrap a.mec-monthly-tooltip.event-single-link-simple .mec-cancellation-reason {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Hover tooltip on the monthly grid pills.

   MEC ships this via tooltipster (`.tooltipster-sidetip.tooltipster-shadow`)
   with a hardcoded chrome — 3px radius, mid-grey border, 17px padding,
   soft grey shadow — plus content selectors `.mec-tooltip-event-{title,
   time,desc}`. Refined here to sit alongside the modal's design language:
   square corners, subtle divider border, softer shadow, tighter padding,
   navy title, teal clock, muted metadata, and a 3-line clamp on the
   description.

   MEC's own rules land at 3-class specificity with `!important`, so ours
   match that pattern to win.
   -------------------------------------------------------------------------- */

.tooltipster-sidetip.tooltipster-shadow:not(.uael-tooltipster-active) .tooltipster-box {
	border-radius: 0 !important;
	border: 1px solid var(--cbv-divider, #e4e4ea) !important;
	background: var(--wp--preset--color--white, #fff) !important;
	/* Softer, closer-to-modern shadow — sits low and diffuse rather than
	   MEC's stock dark 30px blur. */
	box-shadow: 0 8px 24px -8px rgba(19, 16, 50, 0.16) !important;
}
/* MEC's frontend.js pins tooltipster to `minWidth: 350; maxWidth: 350`
   (see `mec_tooltip()`). Overriding width via CSS alone shifts the box
   visually but tooltipster's positioning math still uses 350, so the
   arrow no longer aligns with the pill. Accept 350px as the fixed
   width — tooltipster centers correctly, and the content styling below
   fills the box with a comfortable rhythm. */
.tooltipster-sidetip.tooltipster-shadow:not(.uael-tooltipster-active) .tooltipster-content {
	padding: 14px 16px !important;
}

/* Title — primary read. Navy, weight 700, 12px gap to the time line. */
.tooltipster-box .mec-tooltip-event-title {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: var(--wp--preset--color--navy, #131032);
	margin: 0 0 8px !important;
}

/* Time — secondary, teal clock + muted body text. Overrides MEC's stock
   `.mec-tooltip-event-time { font-size:12px; color:#888; margin: 5px 0 8px }`. */
.tooltipster-box .mec-tooltip-event-time {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 20px !important;
	color: var(--cbv-text-muted, #585E64) !important;
	margin: 0 0 12px !important;
	display: flex;
	align-items: center;
	gap: 6px;
}
.tooltipster-box .mec-tooltip-event-time i {
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--wp--preset--color--accent, #69C8C7) !important;
}
.tooltipster-box .mec-tooltip-event-time i:before {
	color: var(--wp--preset--color--accent, #69C8C7) !important;
}

/* Description — supporting content. Clamp to 3 lines with ellipsis
   so long descriptions don't stretch the tooltip vertically. Note:
   MEC appends a literal " , ..." to the desc string on the server —
   the clamp hides it when the description exceeds the line cap, but
   very short descriptions (like our test-event seed) show the suffix.
   Nothing we can strip from pure CSS. */
.tooltipster-box .mec-tooltip-event-desc {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 20px !important;
	color: var(--cbv-text-muted, #585E64) !important;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tooltipster-box .mec-tooltip-event-desc p {
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit;
}

/* Hide the extras MEC bolts on but the design doesn't need: empty
   organizer wrapper, embedded booking button, cost row, local-time
   details. Keeps the tooltip focused on title + time + description. */
.tooltipster-box .mec-event-detail,
.tooltipster-box .mec-price-details,
.tooltipster-box .mec-booking-button,
.tooltipster-box .mec-localtime-details,
.tooltipster-box .mec-tooltip-event-featured {
	display: none !important;
}

/* Arrow — MEC ships border-width 11-12px. Halve for a subtler tip
   that reads as visually attached rather than a big beak. */
.tooltipster-sidetip.tooltipster-shadow:not(.uael-tooltipster-active) .tooltipster-arrow-border {
	border-width: 7px !important;
}
.tooltipster-sidetip:not(.uael-tooltipster-active) .tooltipster-arrow-background {
	border-width: 6px !important;
}
.tooltipster-sidetip.tooltipster-shadow:not(.uael-tooltipster-active) .tooltipster-arrow-border {
	border-top-color: var(--cbv-divider, #e4e4ea) !important;
}
/* Bottom / right / left variants: recolour the flat border side to
   match the box divider so the tip blends seamlessly. */
.tooltipster-sidetip.tooltipster-shadow.tooltipster-bottom:not(.uael-tooltipster-active) .tooltipster-arrow-border {
	border-bottom-color: var(--cbv-divider, #e4e4ea) !important;
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-left:not(.uael-tooltipster-active) .tooltipster-arrow-border {
	border-left-color: var(--cbv-divider, #e4e4ea) !important;
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-right:not(.uael-tooltipster-active) .tooltipster-arrow-border {
	border-right-color: var(--cbv-divider, #e4e4ea) !important;
}

/* Mobile note: MEC only initializes tooltipster above 768px viewport
   width (see `mec_tooltip()` in frontend.js) — the phone tap opens
   the modal directly. No mobile-specific tooltip overrides needed. */

/* Month navigator row: Heading first (left), then [Prev][Next] pinned
   right after it.
   MEC's DOM order is prev → heading → next, so we flip via `order`:
   heading gets order:-1 (first), and margin-right:auto pushes any
   remaining space to the right after the buttons.

   `!important` on display is required only for the HOISTED nav — the
   one calendar.js promoted to the top of the wrap. MEC's toggleMonth
   sets inline `display: none` on non-current navigators; the ones
   still inside its own container should honour that hide, otherwise
   several months' navigators pile up. The .cbv-nav-hoisted class is
   toggled onto whichever nav is currently visible. */
.mec-full-calendar-wrap .mec-month-navigator {
	align-items: center;
	gap: 12px;
	margin: 8px 0 16px;
}

.mec-full-calendar-wrap .mec-month-navigator.cbv-nav-hoisted {
	display: flex !important;
}

.mec-full-calendar-wrap .mec-calendar-header {
	order: -1;
	flex: 0 0 auto;
	margin-right: 8px;
}

.mec-full-calendar-wrap .mec-calendar-header h2 {
	font-family: var(--wp--preset--font-family--heading, "Gotham HTF"), sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast, #131032);
	margin: 0;
	text-align: left;
}

/* Push the buttons together at the left, right after the heading; any
   remaining space collects on the far right. */
.mec-full-calendar-wrap .mec-next-month {
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   List sub-skin — event cards (Phase 3 step 22).
   MEC's list_standard emits <article class="mec-event-article"> with
   .mec-topsec (title + meta columns) and .mec-event-footer (share icons +
   "View Detail" button). Category color inherits via CSS custom props from
   the inline <style> in inc/mec.php.
   -------------------------------------------------------------------------- */

/* Month divider ("August 2026" heading between groups): style plainly. */
.mec-full-calendar-wrap .mec-event-list-standard .mec-month-divider {
	display: none; /* the calendar page's own month controls handle this */
}

/* Single-column list of full-width rows per Figma frame 8458-70837.
   No card background, no rounded corners, no dividers — rows are
   separated by whitespace alone. */
.mec-full-calendar-wrap .mec-event-list-standard {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
	border: 0;
}

.mec-full-calendar-wrap .mec-event-article {
	position: relative;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;   /* MEC ships `0 2px 0 rgba(0,0,0,.016)` — subtle bottom line */
	padding: 12px 0;
	margin: 0;
	list-style: none;
	overflow: visible;
	display: flex;
	align-items: center;
	/* Fluid horizontal breathing room between the left info column
	   (`.mec-topsec`) and the right footer (`Add to Calendar` + register
	   box). `clamp` keeps a floor of 12px on tighter viewports so the two
	   blocks never sit flush, and tops out at 24px on wider screens. */
	gap: clamp(12px, 2vw, 24px);
}

/* MEC drops `border-left: 1px solid #eee` on `.mec-event-meta-wrap` at
   3-class specificity; wipe it here at matching specificity. */
.mec-full-calendar-wrap .mec-event-article .mec-event-meta-wrap {
	border-left: 0;
	border: 0;
}

/* Category badge — top-left pill using the inherited --cbv-cat-color.
   Rendered via a ::before pseudo so we don't need extra markup. Slug is
   surfaced via `--cbv-cat-slug` (see inc/mec.php's style block) so the
   badge text matches the assigned category. Positioned absolutely so
   the flex row's other children fill the width naturally. */
.mec-full-calendar-wrap .mec-event-article::before {
	content: var(--cbv-cat-slug, '');
	position: absolute;
	top: 12px;
	left: 0;
	/* `--cbv-cat-display` flips to inline-block when inc/mec.php emits
	   the category vars for an event; events without a term keep it at
	   the `none` fallback so no empty pill renders. */
	display: var(--cbv-cat-display, none);
	background: var(--cbv-cat-color, var(--wp--preset--color--accent-light, #e9f3f3));
	color: var(--cbv-cat-text, var(--wp--preset--color--contrast, #131032));
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: capitalize;
	padding: 4px 12px;
	border-radius: 4px;
	margin: 0;
}

/* MEC's topsec holds two columns (content + meta) — repurpose as the
   left-hand info block of the row, offset down to make room for the
   absolute-positioned category badge. */
.mec-full-calendar-wrap .mec-event-article .mec-topsec {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 32px;   /* clear the absolute category badge above */
	margin: 0;
}

/* MEC ships `.mec-event-content { padding: 15px 30px 0 0 }` — strip the
   top padding so the title sits flush against the date row above. */
.mec-full-calendar-wrap .mec-event-article .mec-event-content {
	padding-top: 0;
	/* Defaults for the tag row below. inc/mec.php → emit_event_tag_labels
	   overrides these on events that have a term in the page's driving
	   taxonomy (cbv_course on Educational, cbv_general_category on
	   General). Unset → the ::after stays `display: none`. */
	--cbv-tag-label: '';
	--cbv-tag-display: none;
}

/* Tag row — course (Educational) or category (General) surfaced under
   the event title on the list-view card. Icon on the left (Figma tag
   glyph @ #80868C), then the term name in Figma Button/Medium.
   `.mec-event-article` only exists on the list skin, so this is scoped
   to the list view without further gating. */
.mec-full-calendar-wrap .mec-event-article .mec-event-content::after {
	content: var(--cbv-tag-label);
	display: var(--cbv-tag-display);
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
	color: var(--cbv-text-muted, #585E64);
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	font-feature-settings: 'liga' off, 'clig' off;
	padding-left: 24px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M6 4.5C6 5.32843 5.32843 6 4.5 6C3.67157 6 3 5.32843 3 4.5C3 3.67157 3.67157 3 4.5 3C5.32843 3 6 3.67157 6 4.5ZM5 4.5C5 4.22386 4.77614 4 4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5C4.77614 5 5 4.77614 5 4.5Z' fill='%2380868C'/><path d='M2 1H6.58579C6.851 1 7.10536 1.10536 7.29289 1.29289L14.2929 8.29289C14.6834 8.68342 14.6834 9.31658 14.2929 9.70711L9.70711 14.2929C9.31658 14.6834 8.68342 14.6834 8.29289 14.2929L1.29289 7.29289C1.10536 7.10536 1 6.851 1 6.58579V2C1 1.44772 1.44772 1 2 1ZM2 6.58579L9 13.5858L13.5858 9L6.58579 2L2 2L2 6.58579Z' fill='%2380868C'/></svg>") left center / 16px 16px no-repeat;
}

.mec-full-calendar-wrap .mec-event-article .mec-col-table-c {
	width: 100%;
	padding: 0;
	float: none;
}

/* Date row: rendered ABOVE the title (via column ordering). Bold, in
   contrast color, calendar icon in teal. */
.mec-full-calendar-wrap .mec-event-article .mec-event-content-wrap {
	order: 2;
}

.mec-full-calendar-wrap .mec-event-article .mec-event-meta-wrap {
	order: 1;
}

.mec-full-calendar-wrap .mec-event-article .mec-event-meta,
.mec-full-calendar-wrap .mec-event-article .mec-date-details {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* Apply also to `.mec-event-d` / `.mec-event-m` — MEC ships
   `.mec-event-list-standard .mec-event-meta span.mec-event-d` at
   (0,3,1) which beats a bare `.mec-date-details` override, so match its
   3-class + 1-element specificity and reset its uppercase + padding. */
.mec-full-calendar-wrap .mec-event-article .mec-date-details,
.mec-full-calendar-wrap .mec-event-article .mec-date-details span.mec-event-d,
.mec-full-calendar-wrap .mec-event-article .mec-date-details span.mec-event-m {
	color: #585E64;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
	font-feature-settings: 'liga' off, 'clig' off;
	text-transform: none;
	padding: 0;
}

.mec-full-calendar-wrap .mec-event-article .mec-date-details i {
	color: var(--wp--preset--color--accent, #69c8c7);
	margin-right: 6px;
}

/* Hide MEC's inline event-color dot (we use the category badge instead)
   and the time-details row (Figma list card shows just the date). */
.mec-full-calendar-wrap .mec-event-article .event-color,
.mec-full-calendar-wrap .mec-event-article .mec-time-details {
	display: none;
}

/* Kill the Simple-Line-Icons glyph on `.mec-sl-calendar` inside list
   cards — MEC's icon font drops a calendar `\e075` via ::before that
   competes with the Figma-designed date row. */
.mec-full-calendar-wrap .mec-event-article .mec-sl-calendar::before {
	content: none;
}

.mec-full-calendar-wrap .mec-event-article .mec-event-title {
	font-family: var(--wp--preset--font-family--heading, "Open Sans"), sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.mec-full-calendar-wrap .mec-event-article .mec-event-title a {
	color: var(--wp--preset--color--contrast, #131032);
	text-decoration: none;
}

.mec-full-calendar-wrap .mec-event-article .mec-event-title a:hover {
	color: var(--wp--preset--color--accent, #69c8c7);
}

.mec-full-calendar-wrap .mec-event-article .mec-event-description {
	display: none;   /* Figma list card doesn't show the description */
}

/* Footer: hide social share, right-align the "View Detail" (Register
   Now-equivalent) button. Sits in the row's right column. */
.mec-full-calendar-wrap .mec-event-article .mec-event-footer {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.mec-full-calendar-wrap .mec-event-article .mec-event-sharing-wrap {
	display: none;
}

.mec-full-calendar-wrap .mec-event-article .mec-booking-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--contrast, #131032);
	color: #fff;
	font-family: var(--wp--preset--font-family--body, "Open Sans"), sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.mec-full-calendar-wrap .mec-event-article .mec-booking-button:hover {
	background: var(--wp--preset--color--primary, #170f6b);
}

.mec-full-calendar-wrap .mec-event-article .mec-booking-button:focus-visible {
	/* Focus ring on the light card background — indigo, not accent teal
	   (which fails 3:1 on white; WCAG 2.4.7 + 2.4.11). */
	outline: 2px solid var(--wp--preset--color--primary, #170f6b);
	outline-offset: 2px;
}

/* No-More-Info events (Q2): the booking button anchor gets the sentinel
   href from inc/mec.php's rewrite. Render it as disabled-looking text. */
.mec-full-calendar-wrap .mec-event-article .mec-booking-button[href^="#cbv-no-more-info"] {
	background: transparent;
	color: var(--wp--preset--color--muted, #6e6a92);
	cursor: default;
	pointer-events: none;
	font-weight: 400;
}

/* Export links + register block injected via inc/mec.php
   `inject_list_export_links()` on the `mec_standard_booking_button`
   action. Figma frame 8458-70837 splits the row's right side into two
   columns: "Add to Calendar" links and the "Ready to register?" block.
   Make the footer a flex row of the two blocks with a divider between. */
.mec-full-calendar-wrap .mec-event-article .mec-event-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;   /* MEC ships #fafafa here; blank it out. */
	justify-content: flex-end;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-exports {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	min-width: 220px;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-register {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 12px;
	border-radius: 8px;
	background: #F0F1F3;
	/* Sized to fit the longest realistic deadline string —
	   "Register by September 30, 2026" (~208px of text at Open Sans
	   14/20) — plus 24px of horizontal padding. Fixed pixel value so
	   short dates still land at the same width and the right column
	   stays aligned down the list. */
	min-width: 232px;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-register__heading {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
	color: #000000;
	font-feature-settings: 'liga' off, 'clig' off;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-register__deadline {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	color: #585E64;
	font-feature-settings: 'liga' off, 'clig' off;
	/* Keep "Register by <date>" on one line — `max-content` on the
	   parent will grow the card to fit whatever this needs. */
	white-space: nowrap;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-register__link {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	color: #221C58;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
	font-feature-settings: 'liga' off, 'clig' off;
	text-decoration: none;
	transition: color 0.15s ease;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-register__chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-register__link:hover {
	color: var(--wp--preset--color--accent, #69c8c7);
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-register__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #170f6b);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Hide MEC's native footer chrome — the Figma right column is the
   export links only. */
.mec-full-calendar-wrap .mec-event-article .mec-event-footer .mec-booking-button,
.mec-full-calendar-wrap .mec-event-article .mec-event-footer .mec-event-sharing-wrap {
	display: none;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-export-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #221C58;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
	font-feature-settings: 'liga' off, 'clig' off;
	text-decoration: none;
	transition: color 0.15s ease;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-export-link:hover,
.mec-full-calendar-wrap .mec-event-article .cbv-event-export-link:focus-visible {
	color: var(--wp--preset--color--accent, #69c8c7);
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-export-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #170f6b);
	outline-offset: 3px;
	border-radius: 2px;
}

.mec-full-calendar-wrap .mec-event-article .cbv-event-export-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

/* List sub-skin pagination bar (Prev / Next pills + total count).
   MEC ships this markup when `sk-options[list][pagination] = nextprev`:
     <div class="mec-nextprev-wrap">
       <span class="mec-nextprev-prev-button"> <svg/> Prev </span>
       <a class="mec-nextprev-next-button" href="...">Next <svg/></a>
     </div>
     <div class="mec-total-events">Total Events: N</div>
   Style as pill buttons centred with a total-count line below. */
.mec-full-calendar-wrap .mec-nextprev-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 32px 0 8px;
	padding: 0;
	background: transparent;
	border: 0;
	/* MEC's stock frontend.min.css sets `overflow: hidden` on this wrap, which
	   clips the 2px focus outline on the Prev/Next buttons (outline-offset:2px
	   + 2px width). The wrap only contains the two buttons — no floats or
	   absolutely-positioned content that needs clipping — so restoring the
	   default is safe. */
	overflow: visible;
}

/* Chevron + label buttons per Figma: no border, no fill, navy
   chevron next to a Body/Medium Bold label. MEC ships each button
   with a text node ("Prev"/"Next") + a teal arrow SVG. We hide MEC's
   arrow SVG and draw our own chevron via `::before` (prev) / `::after`
   (next) using an inline data-URI SVG so we don't have to bundle an
   icon asset. */
.mec-full-calendar-wrap .mec-nextprev-prev-button,
.mec-full-calendar-wrap .mec-nextprev-next-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	min-height: 40px;
	padding: 0 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--cbv-surface-navy);
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	font-feature-settings: 'liga' off, 'clig' off;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.mec-full-calendar-wrap .mec-nextprev-prev-button svg,
.mec-full-calendar-wrap .mec-nextprev-next-button svg {
	display: none;
}

.mec-full-calendar-wrap .mec-nextprev-prev-button::before,
.mec-full-calendar-wrap .mec-nextprev-next-button::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	flex: 0 0 auto;
}

.mec-full-calendar-wrap .mec-nextprev-prev-button::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M15 6l-6 6 6 6' stroke='%23221C58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.mec-full-calendar-wrap .mec-nextprev-next-button::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M9 6l6 6-6 6' stroke='%23221C58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.mec-full-calendar-wrap .mec-nextprev-prev-button:hover,
.mec-full-calendar-wrap .mec-nextprev-next-button:hover {
	opacity: .6;
}

.mec-full-calendar-wrap .mec-nextprev-prev-button:focus-visible,
.mec-full-calendar-wrap .mec-nextprev-next-button:focus-visible {
	outline: 2px solid var(--cbv-surface-navy);
	outline-offset: 2px;
}

/* MEC adds `.mec-util-hidden` to Prev on the first page and Next on
   the last. Show the button greyed out + inactive rather than hiding
   it, so the row stays visually complete and users can see the
   pagination controls exist. `display: inline-flex !important` beats
   MEC's stock `.mec-util-hidden { display: none }`. Colour is
   explicitly muted grey (not opacity of navy) — the chevron `::before`
   / `::after` re-declares its SVG with a `#B4BBC2` stroke to override
   the navy version from the active-state rule. */
.mec-full-calendar-wrap .mec-nextprev-wrap .mec-util-hidden {
	display: inline-flex !important;
	visibility: visible;
	pointer-events: none;
	cursor: not-allowed;
	color: var(--Border-default, #B4BBC2);
}

.mec-full-calendar-wrap .mec-nextprev-prev-button.mec-util-hidden::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M15 6l-6 6 6 6' stroke='%23B4BBC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.mec-full-calendar-wrap .mec-nextprev-next-button.mec-util-hidden::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M9 6l6 6-6 6' stroke='%23B4BBC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* MEC computes `Total Events` via a raw wpdb COUNT that bypasses our
   `cbv_calendar_type` tax_query — so it reports the site-wide total,
   not the current calendar's count (client feedback: misleading).
   Rather than patch the plugin, hide the line. Every other pagination
   affordance (Prev/Next, page-N indicator) is calendar-scoped. */
.mec-full-calendar-wrap .mec-total-events {
	display: none;
}

/* --------------------------------------------------------------------------
   Filter bar (Phase 3 step 23).
   Horizontal layout: category checkboxes with color chips on the top row,
   search + month/year + view toggle on the bottom row. Approximate rather
   than pixel-perfect per plan.md — dropdown chevrons and the FaceWP-style
   pill controls in Figma aren't stock MEC widgets.
   -------------------------------------------------------------------------- */

.mec-full-calendar-wrap .mec-search-form.mec-totalcal-box {
	background: transparent;
	padding: 0;
	margin-bottom: 24px;
	border: 0;
	box-shadow: none;   /* MEC ships `0 3px 2px 0 rgba(0,0,0,.012)` — subtle bottom line */
	min-height: 0;      /* MEC ships `min-height: 78px` — collapses the row when empty and adds spurious space when filled. */
	position: relative; /* anchor the absolutely-positioned .cbv-filter-reset-row below the filter row (Educational only). */
	overflow: visible;  /* MEC ships `overflow: hidden` which clips the absolute reset row that sits at `top: 100%` outside this container. */
}

/* Filter bar layout — desktop matches Figma frame 8458-48318:
   [ Search ] [ Term ] [ Course ] [ Reset ]   (+ view toggle at end)
   Mobile stacks vertically. The form has two top-level wrappers (MEC's
   own dropdown container + `.mec-full-calendar-search-ends` which
   houses Search + view toggle). We flex both, and use `order` to hoist
   Search in front of the dropdowns. */
.mec-full-calendar-wrap .mec-search-form form {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	padding: 0;
}

/* The generic `> div` rule applies to MEC's inner filter wrapper (which
   holds Term/Course/etc.) but NOT to `.mec-full-calendar-search-ends`
   below — that one gets `display: contents` and must stay flattened.
   `flex: 0 1 auto` (don't grow) keeps the dropdowns at their natural
   width so Search can absorb all leftover row space. */
.mec-full-calendar-wrap .mec-search-form form > div:not(.mec-full-calendar-search-ends) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	flex: 0 1 auto;
}

/* `.mec-full-calendar-search-ends` bundles Search + View toggle. To
   place Search first and View toggle last (per Figma), collapse this
   wrapper with `display: contents` so its two children become direct
   flex items of the form and can be reordered individually. */
.mec-full-calendar-wrap .mec-full-calendar-search-ends {
	display: contents;
}

/* Search grows to fill the leftover row width so the filter bar reads
   as a single unit (Figma). Removing the max-width lets it stretch;
   the other controls stay at their intrinsic width. */
.mec-full-calendar-wrap .mec-text-input-search {
	order: -1;
	flex: 1 1 320px;
}

/* View toggle sits at the far right of the row via `order: 99`. No
   `margin-left: auto` needed — Search's flex-grow eats leftover space,
   so the toggle naturally lands next to whatever it follows. */
.mec-full-calendar-wrap .mec-tab-loader {
	order: 99;
	flex: 0 0 auto;
}

/* Mobile — stack every row cleanly. Restore the search-ends wrapper as
   a flex container so its children stack in DOM order below the
   dropdowns. */
@media ( max-width: 991px ) {
	.mec-full-calendar-wrap .mec-search-form form,
	.mec-full-calendar-wrap .mec-search-form form > div {
		flex-direction: column;
		align-items: stretch;
	}
	.mec-full-calendar-wrap .mec-full-calendar-search-ends {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.mec-full-calendar-wrap .mec-tab-loader {
		margin-left: 0;
	}
}

/* Legacy chip filter — kept in the stylesheet in case the mec_category
   filter is ever re-enabled. The `order: 2` here still works because
   we removed `flex-direction: column` above. */
.mec-full-calendar-wrap .mec-search-form form > div:has(.mec-simple-checkboxes-search) {
	order: 2;
	flex-basis: 100%;
}

/* Category checkboxes: horizontal row of pill-shaped chips with color dots. */
.mec-full-calendar-wrap .mec-simple-checkboxes-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.mec-full-calendar-wrap .mec-simple-checkboxes-search > i.mec-sl-folder {
	display: none; /* the folder icon adds visual noise vs. Figma */
}

.mec-full-calendar-wrap .mec-searchbar-category-wrap ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mec-full-calendar-wrap .mec-searchbar-category-wrap li {
	display: inline-flex;
	align-items: center;
}

.mec-full-calendar-wrap .mec-searchbar-category-wrap label.selectit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast, #131032);
	cursor: pointer;
}

/* Hide the native checkbox — the category row is a visual legend, not a
   filter control (user feedback #3). The color chip below IS the whole
   indicator. Screen readers still get the input's label text since the
   input stays in the DOM. */
.mec-full-calendar-wrap .mec-searchbar-category-wrap label.selectit input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Color chip before the label text. Uses --cbv-cat-color emitted per <li>
   in inc/mec.php's inline <style>. */
.mec-full-calendar-wrap .mec-searchbar-category-wrap li[id^="mec_category-"] label::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--cbv-cat-color, transparent);
	margin-right: 4px;
	flex-shrink: 0;
}

/* Note: `.mec-full-calendar-search-ends` is styled `display: contents`
   above so its children (Search + View toggle) become direct flex
   items of the form. Any per-container styling here would break that
   flattening — do the styling on the children themselves. */

/* Search input — Figma frame 8458-48318 shows it as the first filter,
   wider than the dropdowns. Now updated to Figma tokens: 12px padding,
   flex-row with magnifier + input, tinted-canvas surface, no border
   radius. `flex` grow is set on the layout rule above; no max-width
   cap here so it grows to fill any leftover row space. */
.mec-full-calendar-wrap .mec-text-input-search {
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: space-between;
	position: relative;
	padding: 12px;
	background: transparent;
	border: 1px solid var(--Border-default, #B4BBC2);
	border-radius: 0;
	overflow: hidden;
	height: 48px;
}

/* MEC ships a `min-height: 78px` + `margin-bottom` on these three filter
   row wrappers — drop both so their height + spacing are driven by their
   actual content (the 48px Figma spec) and the form's own gap. Same
   override pattern as `.mec-totalcal-box` above. */
.mec-full-calendar-wrap .mec-search-form .mec-full-calendar-search-ends .mec-text-input-search.col-md-12,
.mec-full-calendar-wrap .mec-search-form .mec-minmax-event-cost,
.mec-full-calendar-wrap .mec-search-form .mec-text-address-search {
	min-height: 0;
	margin-bottom: 0;
}

/* MEC ships a border + extra padding on the filter-box icon glyphs
   (magnifier, folder, etc.). Drop the border and normalize to the
   24×24 Figma icon size. */
.mec-full-calendar-wrap .mec-totalcal-box i {
	border: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	font-size: 24px;
}

.mec-full-calendar-wrap .mec-text-input-search i.mec-sl-magnifier {
	position: static;
	flex: 0 0 auto;
	margin-right: 12px;
	color: var(--cbv-surface-navy);
	pointer-events: none;
	transform: none;
}

.mec-full-calendar-wrap .mec-text-input-search input[type="search"] {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cbv-surface-navy);
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0;
	font-weight: 700;
}

.mec-full-calendar-wrap .mec-text-input-search input[type="search"]::placeholder {
	color: #6E6A92;
	opacity: 1;
}

/* Focus indicator on the wrapper (not the inner `<input>`) — the
   wrapper carries the visible 1px gray border + padding. On focus we
   darken the border to navy and add a soft 3px semi-transparent glow;
   avoids the "doubled-edge" look a hard outline produces next to the
   gray border. */
.mec-full-calendar-wrap .mec-text-input-search:focus-within {
	outline: 0;
	border-color: var(--cbv-surface-navy);
	box-shadow: 0 0 0 3px rgba(34, 28, 88, 0.15);
}
.mec-full-calendar-wrap .mec-text-input-search input[type="search"]:focus,
.mec-full-calendar-wrap .mec-text-input-search input[type="search"]:focus-visible {
	outline: 0;
}

.mec-full-calendar-wrap .mec-date-search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #d0d3d9;
	border-radius: 6px;
}

.mec-full-calendar-wrap .mec-date-search i.mec-sl-calendar {
	color: var(--wp--preset--color--accent, #69c8c7);
	margin: 0;
}

.mec-full-calendar-wrap .mec-date-search select {
	background: transparent;
	border: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #131032);
	padding: 2px 4px;
	cursor: pointer;
	min-width: 90px;
}

.mec-full-calendar-wrap .mec-date-search select:focus {
	outline: 2px solid var(--wp--preset--color--primary, #170f6b);
	outline-offset: 2px;
}

/* View toggle: two 48×48 icon buttons per Figma (nodes 8458-73907 /
   -73904). Text labels ("Monthly" / "List") stay in the DOM for a11y
   but are visually hidden — the SVG mask does the visual talking.
   Active state = navy fill + white icon; inactive = light grey + navy. */
.mec-full-calendar-wrap .mec-tab-loader {
	margin-left: auto;
	padding: 0;
	flex: 0 0 auto;
	width: auto !important;
}

/* Educational calendar is list-only — hide the view toggle. Pivot on
   the Term dropdown (Educational-exclusive) via `:has()` so we don't
   need a PHP-side body/wrap class. */
.mec-full-calendar-wrap:has([data-cbv-taxonomy="cbv_term"]) .mec-tab-loader {
	display: none;
}

.mec-full-calendar-wrap .mec-totalcal-view {
	display: inline-flex;
	gap: 4px;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/* A view switcher with a single option is dead weight — collapse the whole
   toolbar column when it has no second view. Uses :has() to test for a
   second child span; a solo <span> gets hidden along with its container. */
.mec-full-calendar-wrap .mec-totalcal-view:not(:has(> *:nth-child(2))) {
	display: none;
}

/* MEC's own rules (.mec-wrap .mec-totalcal-box .mec-totalcal-view span,
   3-class specificity) set padding + inline-block on these spans. Match
   with our own 3-class chain and add width/height overrides.

   Colors:
     - Inactive icon = #000000 (per Elena)
     - Active bg    = #221C58 (per Elena)
     - Inactive bg  = #f0f1f3 (Figma "canvas-tinted-dark")
   Text (the "Monthly"/"List" label MEC prints) is visually hidden with
   a text-indent shift so screen readers still read it — `font-size: 0`
   would strip the label from the a11y tree. */
.mec-full-calendar-wrap .mec-totalcal-view [data-skin],
.mec-full-calendar-wrap .mec-tab-loader [data-skin] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 48px !important;
	height: 48px !important;
	min-height: 48px !important;       /* MEC forces min-height: 36px */
	line-height: 0 !important;
	box-sizing: border-box;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 4px;
	background: #f0f1f3 !important;    /* MEC sets bg: #fff at same specificity */
	color: #000000 !important;         /* MEC sets color: #777 at same specificity */
	cursor: pointer;
	font-size: 0 !important;           /* MEC sets font-size: 13px */
	overflow: hidden;
	position: relative;
	transition: background 0.15s ease, color 0.15s ease;
}

.mec-full-calendar-wrap [data-skin]::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 22px 22px;
	mask-size: 22px 22px;
}

/* Monthly button = calendar icon (Figma node 8458-73908). */
.mec-full-calendar-wrap [data-skin="monthly"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 7H17M1 7V15.8002C1 16.9203 1 17.4801 1.21799 17.9079C1.40974 18.2842 1.71547 18.5905 2.0918 18.7822C2.5192 19 3.079 19 4.19691 19H13.8031C14.921 19 15.48 19 15.9074 18.7822C16.2837 18.5905 16.5905 18.2842 16.7822 17.9079C17 17.4805 17 16.9215 17 15.8036V7M1 7V6.2002C1 5.08009 1 4.51962 1.21799 4.0918C1.40974 3.71547 1.71547 3.40973 2.0918 3.21799C2.51962 3 3.08009 3 4.2002 3H5M17 7V6.19691C17 5.07899 17 4.5192 16.7822 4.0918C16.5905 3.71547 16.2837 3.40973 15.9074 3.21799C15.4796 3 14.9203 3 13.8002 3H13M5 3H13M5 3V1M13 3V1M8.75 15C8.88807 15 9 14.8881 9 14.75V11.25C9 11.1119 8.88807 11 8.75 11H5.25C5.11193 11 5 11.1119 5 11.25V14.75C5 14.8881 5.11193 15 5.25 15H8.75Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 7H17M1 7V15.8002C1 16.9203 1 17.4801 1.21799 17.9079C1.40974 18.2842 1.71547 18.5905 2.0918 18.7822C2.5192 19 3.079 19 4.19691 19H13.8031C14.921 19 15.48 19 15.9074 18.7822C16.2837 18.5905 16.5905 18.2842 16.7822 17.9079C17 17.4805 17 16.9215 17 15.8036V7M1 7V6.2002C1 5.08009 1 4.51962 1.21799 4.0918C1.40974 3.71547 1.71547 3.40973 2.0918 3.21799C2.51962 3 3.08009 3 4.2002 3H5M17 7V6.19691C17 5.07899 17 4.5192 16.7822 4.0918C16.5905 3.71547 16.2837 3.40973 15.9074 3.21799C15.4796 3 14.9203 3 13.8002 3H13M5 3H13M5 3V1M13 3V1M8.75 15C8.88807 15 9 14.8881 9 14.75V11.25C9 11.1119 8.88807 11 8.75 11H5.25C5.11193 11 5 11.1119 5 11.25V14.75C5 14.8881 5.11193 15 5.25 15H8.75Z'/></svg>");
}

/* List button = list-check icon (Figma node 8458-73905). */
.mec-full-calendar-wrap [data-skin="list"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 11H8M17 8L13 12L11 10M1 6H12M1 1H12'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 11H8M17 8L13 12L11 10M1 6H12M1 1H12'/></svg>");
}

.mec-full-calendar-wrap [data-skin]:hover {
	background: #e2e4ea;
}

.mec-full-calendar-wrap [data-skin].mec-totalcalview-selected {
	background: #221C58 !important;   /* beats MEC's own selected bg */
	color: #ffffff !important;
}

.mec-full-calendar-wrap [data-skin]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #170f6b);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Month pager (Phase 3 step 24).
   MEC emits `.mec-previous-month` and `.mec-next-month` divs above the
   month grid, each containing a `<a class="mec-load-month-link">` with an
   icon-font chevron and the month name. Match the News-archive .cbv-pager
   visual language: navy-outlined chip on white, 40px hit area, small
   uppercase label, chevron on the leading edge for prev / trailing for next.
   -------------------------------------------------------------------------- */

/* Extra `.mec-month-navigator` selector in front adds specificity so we
   beat MEC's `.mec-calendar .mec-calendar-side .mec-previous-month`
   (specificity 0,3,0) which forces position:absolute. */
.mec-full-calendar-wrap .mec-month-navigator .mec-previous-month,
.mec-full-calendar-wrap .mec-month-navigator .mec-next-month {
	position: static;
	display: inline-block;
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	left: auto;
	right: auto;
	top: auto;
}

.mec-full-calendar-wrap .mec-previous-month a.mec-load-month-link,
.mec-full-calendar-wrap .mec-next-month a.mec-load-month-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid #B4BBC2;
	border-radius: 0;
	color: var(--wp--preset--color--contrast, #131032);
	font-family: var(--wp--preset--font-family--body, "Open Sans"), sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.mec-full-calendar-wrap .mec-previous-month a.mec-load-month-link:hover,
.mec-full-calendar-wrap .mec-next-month a.mec-load-month-link:hover {
	background: var(--wp--preset--color--surface, #e9f3f3);
	color: var(--wp--preset--color--contrast, #131032);
}

.mec-full-calendar-wrap .mec-previous-month a.mec-load-month-link:focus-visible,
.mec-full-calendar-wrap .mec-next-month a.mec-load-month-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #170f6b);
	outline-offset: 2px;
}

/* MEC's chevrons are icon-font glyphs (mec-sl-angle-left / -right). */
.mec-full-calendar-wrap .mec-previous-month a.mec-load-month-link .mec-sl-angle-left,
.mec-full-calendar-wrap .mec-next-month a.mec-load-month-link .mec-sl-angle-right {
	color: #000000;
	font-size: 14px;
}

/* Drop MEC's `.mec-clear` clearfix pseudos site-wide — nothing in our
   layout floats, so the extra whitespace they insert just adds vertical
   gaps between rows/cards. */

.mec-wrap .mec-clear:after {
	display: none;
}

/* --------------------------------------------------------------------------
   Mobile viewport (Phase 3 step 26). Breakpoint 991.98px per Q1.

   Below 992px users only see the list view. calendar.js already forces the
   list sub-skin via jQuery.trigger on load (see MEC_MEDIA in calendar.js),
   but the rules below also hide the view toggle and the monthly grid
   defensively so the JS gate can't fail visibly.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	/* Hide the view toggle — mobile is list-only. */
	.mec-full-calendar-wrap .mec-tab-loader,
	.mec-full-calendar-wrap .mec-totalcal-view {
		display: none !important;
	}

	/* Defensive: hide the monthly grid if MEC ever renders it below 992px
	   before our JS has swapped the sub-skin. The list container above
	   remains visible. */
	.mec-full-calendar-wrap .mec-calendar.mec-event-container-simple,
	.mec-full-calendar-wrap .mec-calendar.mec-box-calendar {
		display: none !important;
	}

	/* Single-column list cards on mobile per Figma frame 8458-70696.
	   Flex column with a 28px gap gives visible breathing room between
	   rows without any per-card padding. */
	.mec-full-calendar-wrap .mec-event-list-standard {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	/* Flush cards on mobile — no inset. Vertical rhythm handled by the
	   list-standard `gap` above. */
	.mec-full-calendar-wrap .mec-event-article {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 0;
	}

	/* Category badge sits flush with the top of the card, and the
	   type name reads in regular weight to match the Figma mobile
	   variant (desktop keeps bold). */
	.mec-full-calendar-wrap .mec-event-article::before {
		top: 0;
		font-weight: 400;
	}

	/* Add a small vertical breathing gap inside each card column so
	   the content and meta blocks don't sit flush against the card
	   edge on mobile. */
	.mec-full-calendar-wrap .mec-event-article .mec-col-table-c {
		padding: 4px 0;
	}

	/* MEC ships `min-height: 230px` on the content-wrap at max-width
	   960px to force uniform card heights; on our stacked mobile
	   layout it leaves an empty gap under short cards. */
	.mec-event-list-standard .mec-col-table-c.mec-event-content-wrap {
		min-height: auto;
	}

	/* MEC's `.mec-clear::after` inserts a clearfix pseudo-element that
	   adds vertical whitespace between the stacked mobile cards.
	   Non-floated layout — safe to drop. */
	.mec-wrap .mec-clear:after {
		display: none;
	}

	.mec-full-calendar-wrap .mec-event-article .mec-event-title {
		font-size: 20px;
	}

	/* Stack the right-side blocks vertically on mobile:
	     [share icons]
	     [export links]
	     [Ready to register? chip]
	   The `.mec-event-footer` was a right-aligned row on desktop;
	   collapse to a full-width column here. */
	.mec-full-calendar-wrap .mec-event-article .mec-event-footer {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 12px;
	}

	.mec-full-calendar-wrap .mec-event-article .mec-event-sharing-wrap,
	.mec-full-calendar-wrap .mec-event-article .cbv-event-exports,
	.mec-full-calendar-wrap .mec-event-article .cbv-event-register {
		min-width: 0;
		width: 100%;
	}

	.mec-full-calendar-wrap .mec-event-article .mec-booking-button {
		flex: 1 1 auto;
		text-align: center;
		padding: 12px 20px;
	}

	/* Wrap filter bar controls stack cleanly (search, then dates). */
	.mec-full-calendar-wrap .mec-full-calendar-search-ends {
		gap: 8px;
	}

	.mec-full-calendar-wrap .mec-text-input-search {
		max-width: none;
		flex-basis: 100%;
	}

	.mec-full-calendar-wrap .mec-date-search {
		flex: 1 1 auto;
	}

	/* Collapse the empty legend container on mobile. Chips are hidden
	   here, so with no active filter the legend is just an invisible
	   Reset button + 24px bottom margin — showing as a gap between
	   Search and the first card. Re-shows as a flex row the moment a
	   filter is applied so the enabled Reset sits above the list.
	   (The row itself is collapsed by the global rule below.) */
	.mec-full-calendar-wrap .cbv-event-type-legend {
		display: none;
	}
	.mec-full-calendar-wrap .cbv-event-type-legend:has(.cbv-filter-reset:not([disabled])) {
		display: flex;
	}
}

/* Collapse the Reset row itself whenever Reset is disabled — the row's
   own `min-height: 24px` + `margin: 4px 0 0` reserve layout that shows
   as an empty band above the list. Applied at all widths so it fixes
   the Educational calendar (where Reset sits inline in the form) on
   desktop and both calendars on mobile. On General/desktop the row is
   hoisted into the legend, which stays visible thanks to its chips —
   removing the invisible reset row from the flex container is a no-op
   there. Beats the base rule at `.cbv-filter-reset-row` (which forces
   `display: block !important`) with matching `!important`. */
.mec-full-calendar-wrap .cbv-filter-reset-row:not(:has(.cbv-filter-reset:not([disabled]))) {
	display: none !important;
}

/* ==========================================================================
   "Hide page title" page option (ACF Page Options,
   acf-json/group_6568c9276a3c1.json)

   When enabled, inc/page-options.php strips the core/post-title block from the
   markup server-side (keeping a single H1 once the editor adds their own via a
   hero or heading block) and adds `has-hidden-h1` to the body. With the title
   gone, collapse the content area's top padding so the editor's own H1 sits
   flush under the site header.
   ========================================================================== */

.has-hidden-h1 main {
	padding-top: 0 !important;
}

/* When the branded page title is implemented, hide its banner here too (its H1
   is a core/post-title block, already removed server-side, so the wrapper would
   otherwise remain as an empty branded band). Mirrors amca's
   `.has-hidden-h1 .amca-page-header { display: none }`. Uncomment and set the
   real selector once the branded title lands: */
/* .has-hidden-h1 .cbv-page-title { display: none !important; } */

/* ==========================================================================
   Branded page header (page post type) — rendered by inc/page-header.php via
   the [cbv_page_header] shortcode in parts/page-header.html. Breadcrumbs +
   eyebrow / title / description / CTA over the shared hero triangle field,
   followed by the optional anchor-link "jump menu".
   ========================================================================== */

/* Sit the header flush under the site header (cancel the block-gap sliver on
   the template-part wrapper). Desktop pulls the header up under the nav below. */
.cbv-page-header-part {
	margin-top: 0 !important;
	/* Stack the bands (header → info bar → jump) as a flex column so stray
	   whitespace text nodes (re-inserted by wpautop around the shortcode output)
	   don't render as ~17px anonymous line boxes between them. */
	display: flex;
	flex-direction: column;
}

.cbv-page-header {
	position: relative;
	overflow: hidden;
	/* Muted purple banner (Figma Surface/canvas), matching the info bar so the
	   header + info bar read as one continuous band. */
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
	/* Full-bleed to the viewport (matches the hero). */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Match the site's content gutter so the inner (1280 centred) aligns its
	   left edge with the logo / nav / breadcrumbs. */
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}

/* Triangle field: concentrated on the right and semi-transparent, so it stays
   clear of the copy on the left (matches the design). */
.cbv-page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../images/triangles.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.4) 66%, #000 90%);
	mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.4) 66%, #000 90%);
	pointer-events: none;
	z-index: 0;
}

.cbv-page-header__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	/* Horizontal gutter comes from the band's root padding (above) so content
	   aligns with the logo; only vertical padding here. */
	padding-block: var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--60, 3rem);
}

/* Content column sits on the left, clear of the triangle field. */
.cbv-page-header__content {
	max-width: 745px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.cbv-page-header__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--white);
}

.cbv-page-header__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
}

.cbv-page-header__desc {
	margin: 0;
	/* Keep the description clear of the triangle field on the right. */
	max-width: 30rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}

.cbv-page-header__desc p {
	margin: 0;
}

/* CTA — teal button with dark text (matches the design/theme button). */
.cbv-page-header__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
	padding: 16px 24px;
	background-color: var(--wp--preset--color--accent);
	color: #000000;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.cbv-page-header__cta:hover,
.cbv-page-header__cta:focus {
	background-color: var(--cbv-accent-hover);
	color: #000000;
}

/* Breadcrumbs — full-bleed band directly under the nav, with a translucent
   light "glass" background and 1px rules top + bottom (per the design). */
.cbv-breadcrumbs {
	/* Break out of the header's inline gutter so the band + border rules span
	   the full viewport width. */
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
	background-color: rgba(19, 16, 50, 0.7);
	border-block: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Re-centre the trail to the page content width. max-width includes the gutter
   so the content edge lines up with .cbv-page-header__inner (1280 centred
   inside the same gutter). */
.cbv-breadcrumbs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	max-width: calc(1280px + 2 * var(--wp--style--root--padding-left, 1.5rem));
	margin-inline: auto;
	padding-block: 0.875rem;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}

.cbv-breadcrumbs a {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
}

.cbv-breadcrumbs a:hover,
.cbv-breadcrumbs a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.cbv-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.cbv-breadcrumbs__sep {
	flex: none;
	color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Information bar — up to 4 highlight boxes (title + value) on the dark navy
   band directly below the page hero. Content from the "Information boxes" ACF
   repeater (see inc/page-header.php).
   -------------------------------------------------------------------------- */
.cbv-info-bar {
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
	/* Figma frames the bar in a #3e3975 border; on the full-bleed bar the visible
	   part is the top/bottom rule separating it from the hero and jump menu. */
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	/* Full-bleed to the viewport (matches the header). */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.cbv-info-bar__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 1280px;
	margin-inline: auto;
}

.cbv-info-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px; /* title → value, matches Figma */
	min-width: 0;
	padding: 24px 20px;
	text-align: center;
	border-left: 1px solid var(--wp--preset--color--border);
}

.cbv-info-bar__item:first-child {
	border-left: 0;
}

.cbv-info-bar__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent);
}

.cbv-info-bar__text {
	margin: 0;
	/* Figma Heading/4 is Open Sans Bold — not the Gotham display face. */
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.1667; /* 28/24, matches Figma Heading/4 */
	color: var(--wp--preset--color--white);
}

/* Centre the bar when it holds fewer than the full four items — otherwise the
   `repeat(4, 1fr)` grid left-aligns them and leaves an empty column on the right.
   Quantity queries (`:has()` + `:nth-child(N):last-child`) match an exact item
   count and switch to N fixed 320px columns (the same width 1fr resolves to at
   1280) centred in the bar. Desktop only; the tablet block below stacks to 2×2. */
@media (min-width: 1025px) {
	.cbv-info-bar__inner:has(.cbv-info-bar__item:nth-child(3):last-child) {
		grid-template-columns: repeat(3, 320px);
		justify-content: center;
	}

	.cbv-info-bar__inner:has(.cbv-info-bar__item:nth-child(2):last-child) {
		grid-template-columns: repeat(2, 320px);
		justify-content: center;
	}

	.cbv-info-bar__inner:has(.cbv-info-bar__item:only-child) {
		grid-template-columns: 320px;
		justify-content: center;
	}
}

/* Tablet: 2×2 grid with cross dividers. */
@media (max-width: 1024px) {
	.cbv-info-bar__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.cbv-info-bar__item {
		border-left: 0;
	}

	.cbv-info-bar__item:nth-child(even) {
		border-left: 1px solid var(--wp--preset--color--border);
	}

	.cbv-info-bar__item:nth-child(n + 3) {
		border-top: 1px solid var(--wp--preset--color--border);
	}
}

/* Mobile: single column with horizontal dividers. */
@media (max-width: 600px) {
	.cbv-info-bar__inner {
		grid-template-columns: 1fr;
	}

	.cbv-info-bar__item:nth-child(even) {
		border-left: 0;
	}

	.cbv-info-bar__item {
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.cbv-info-bar__item:first-child {
		border-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Anchor-link "jump menu" beneath the header. On desktop it's a full-width row
   of equal segments; below 782px it collapses into an "On this page" disclosure
   (CSS-only checkbox toggle, no JS). Per-item background is white, light blue,
   or purple (ACF) and is kept in both layouts.
   -------------------------------------------------------------------------- */
.cbv-jump-menu {
	position: relative;
	/* Full-bleed edge-to-edge row (matches Figma), flush under the info bar. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* main.js lifts this out of the header part to a top-level flow block; cancel
	   the block-gap margin WP then applies so it stays flush under the info bar. */
	margin-top: 0;
	/* Flex column so stray whitespace text nodes (re-inserted by wpautop between
	   the sr-only toggle input/label and the list) don't add a line-box gap above
	   the links. */
	display: flex;
	flex-direction: column;
}

/* Desktop: equal segments spanning the full width. */
.cbv-jump-menu__list {
	display: flex;
}

/* Progressive-enhancement fallback: the button is hidden until JS has upgraded
   the nav (adds `.cbv-jump-menu--js`). Without JS the button can't toggle
   anything, and hiding it keeps the list — which is what actually navigates —
   as the sole affordance at every viewport. */
.cbv-jump-menu__toggle {
	display: none;
}

.cbv-jump-menu__item {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px clamp(1rem, 4vw, 80px);
	border: 1px solid var(--cbv-border-light);
	/* Figma Heading/6 — Open Sans Bold, not the Gotham display face. */
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition, 0.2s ease);
}

/* Avoid doubled borders between adjacent items (desktop row). */
.cbv-jump-menu__item + .cbv-jump-menu__item {
	border-left: 0;
}

/* Desktop: link buttons stay within the 1280 content width, while the top and
   bottom rules span the full page width (per design). */
@media (min-width: 782px) {
	.cbv-jump-menu {
		border-block: 1px solid var(--cbv-border-light);
		/* White band across the full width (per design). */
		background-color: var(--wp--preset--color--white);
		/* Stick to the top of the viewport once the user scrolls past the band.
		   The nav isn't sticky, so top: 0 is correct. main.js lifts the menu out
		   of the header template-part so this isn't clipped by that short box. */
		position: sticky;
		top: 0;
		z-index: 30;
	}

	/* Desktop always shows the full-width list. The toggle button is
	   irrelevant here and is kept hidden even after JS has upgraded the nav. */
	.cbv-jump-menu--js .cbv-jump-menu__toggle {
		display: none;
	}

	/* Offset in-page anchor jumps so a target heading lands below the sticky jump
	   bar instead of behind it. --cbv-jump-h is published by the jump-menu script
	   (falls back to a sensible height); scoped to pages that actually have a bar
	   so other pages' anchors aren't affected. */
	html:has( .cbv-jump-menu ) {
		scroll-padding-top: calc( var( --cbv-jump-h, 105px ) + 8px );
	}

	.cbv-jump-menu__list {
		max-width: 1280px;
		margin-inline: auto;
	}

	/* Drop the per-item box border; the band supplies the horizontal rules and
	   only vertical dividers sit between buttons. */
	.cbv-jump-menu__item {
		border: 0;
	}

	.cbv-jump-menu__item + .cbv-jump-menu__item {
		border-left: 1px solid var(--cbv-border-light);
	}
}

/* Mobile: collapse into an "On this page" dropdown when JS is active. Without
   JS the button stays hidden (the fallback higher up) and the list stays a
   visible vertical stack, so the anchors remain reachable. */
@media (max-width: 781px) {
	/* Button styling — only rendered visible once `.cbv-jump-menu--js` is set
	   by main.js. Keeps focus/hover styles consistent with a native button. */
	.cbv-jump-menu--js .cbv-jump-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 20px clamp(1rem, 5vw, 24px);
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--cbv-border-light);
		color: var(--wp--preset--color--navy);
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 700;
		font-size: 1rem;
		line-height: 1.25;
		text-align: left;
		cursor: pointer;
	}

	.cbv-jump-menu__chevron {
		flex: none;
		width: 24px;
		height: 24px;
		transition: transform var(--wp--custom--transition, 0.2s ease);
	}

	.cbv-jump-menu--js .cbv-jump-menu__toggle[aria-expanded="true"] .cbv-jump-menu__chevron {
		transform: rotate(180deg);
	}

	.cbv-jump-menu__toggle:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: -2px;
	}

	/* Mobile default (no-JS fallback): the list is a visible vertical stack.
	   The base rule (`.cbv-jump-menu__list { display: flex }`) targets the
	   desktop row and would cram 5 items into 375px on mobile — override it
	   with a block stack. */
	.cbv-jump-menu__list {
		display: block;
	}

	/* JS-active mode: hide the list until the button is toggled expanded. */
	.cbv-jump-menu--js .cbv-jump-menu__list {
		display: none;
	}

	/* `:has()` on the nav rather than a sibling combinator: the button is nested
	   inside `.cbv-jump-menu__toggle-wrap` (see the shortcode in inc/page-header.php
	   for why that wrapper exists), so it isn't a direct sibling of the list. */
	.cbv-jump-menu--js:has(.cbv-jump-menu__toggle[aria-expanded="true"]) .cbv-jump-menu__list {
		display: block;
	}

	.cbv-jump-menu__item {
		justify-content: flex-start;
		text-align: left;
		padding: 20px clamp(1rem, 5vw, 24px);
	}

	/* Stacked: collapse the top border into the control / previous item. */
	.cbv-jump-menu__item + .cbv-jump-menu__item {
		border-left: 1px solid var(--cbv-border-light);
		border-top: 0;
	}

	.cbv-jump-menu__item:first-child {
		border-top: 0;
	}
}

/* Scroll-spy active anchor — teal underline (inset so it never shifts layout);
   applies over any of the colour variants below. */
.cbv-jump-menu__item.is-active {
	box-shadow: inset 0 -4px 0 0 var(--wp--preset--color--accent);
}

.cbv-jump-menu__item.is-white {
	background-color: var(--wp--preset--color--white);
	color: #000000;
}

.cbv-jump-menu__item.is-white:hover,
.cbv-jump-menu__item.is-white:focus {
	background-color: var(--cbv-surface-muted);
}

.cbv-jump-menu__item.is-light {
	background-color: var(--cbv-surface-teal-light);
	color: #000000;
}

.cbv-jump-menu__item.is-light:hover,
.cbv-jump-menu__item.is-light:focus {
	background-color: var(--cbv-surface-teal-light-hover);
}

/* "Purple" option (ACF value `dark`) — purple surface with the indigo border. */
.cbv-jump-menu__item.is-dark {
	background-color: var(--cbv-surface-navy);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--white);
}

.cbv-jump-menu__item.is-dark:hover,
.cbv-jump-menu__item.is-dark:focus {
	background-color: var(--wp--preset--color--primary);
}

/* Mobile: stack the jump links full-width. */
@media (max-width: 781px) {
	.cbv-jump-menu {
		flex-direction: column;
	}

	.cbv-jump-menu__item + .cbv-jump-menu__item {
		border-left: 1px solid var(--cbv-border-light);
		border-top: 0;
	}

	.cbv-jump-menu__item {
		padding: 20px 1.5rem;
	}
}

/* ==========================================================================
   CTA banner (stepped) — patterns/cta-banner.php
   Full-width dark navy band: eyebrow + teal heading + copy, a numbered step
   list, and a button. Mobile-first; becomes a 3-part row at ≥782px.
   ========================================================================== */

/* True full-bleed navy band, edge-to-edge at every width (matches the
   newsletter / hero / stats bands). The inner content stays at the group's
   constrained 1280 width and centres within the band, giving the Figma's 80px
   inset while the navy reaches the viewport edges. */
.cbv-cta-banner.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Wide width — a contained navy band at the wide (1280) size, centred. In
   classic post content a plain max-width can't grow past the 660 content box,
   so break out and re-centre the same way .alignfull does (640 = half of the
   1280 wide size). Editors switch between the two with the block's align
   control. */
.cbv-cta-banner.alignwide {
	width: min(100vw, 1280px) !important;
	max-width: min(100vw, 1280px) !important;
	margin-left: calc(50% - min(50vw, 640px)) !important;
	margin-right: calc(50% - min(50vw, 640px)) !important;
	/* Inset the content from the contained band edges (full-bleed gets this gap
	   from the viewport gutter instead). */
	padding-inline: clamp(1.5rem, 3vw, 5rem);
}

/* Query container so the inner layout responds to the BAND's own width, not the
   viewport. This is what keeps the button in the right place when the banner
   isn't full width: a narrow band (e.g. the contained/"none" align state) stacks
   like mobile instead of forcing the three-across row into a space it can't fit. */
.cbv-cta-banner {
	container-type: inline-size;
	container-name: cta-banner;
}

/* Layout: stacked full-width when the band is narrow, spread across a row when
   it's wide (see the @container rules below). Higher specificity (parent +
   child) so it beats WP's flex-layout container styles. */
.cbv-cta-banner .cbv-cta-banner__inner {
	align-items: stretch;
	flex-direction: column;
}

.cbv-cta-banner__intro {
	max-width: 568px;
}

.cbv-cta-banner__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--white);
}

.cbv-cta-banner__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	/* 32px on mobile; a fixed 48px on desktop (Figma Display/4) is set in the
	   min-width:782px block — a clamp undershoots 48px on smaller laptops. */
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
}

.cbv-cta-banner__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}

/* Numbered stepper — teal circular badges joined by a teal connector. */
.cbv-cta-banner__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cbv-step;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cbv-cta-banner__steps li {
	position: relative;
	display: flex;
	/* Top-align so the badge stays beside the first line when a step wraps to
	   multiple lines (keeps the connector math below correct). */
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

.cbv-cta-banner__steps li::before {
	counter-increment: cbv-step;
	content: counter(cbv-step);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--accent);
	color: #000000;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

/* Connector: runs from the bottom of this badge (40px) down through the 24px
   flex gap to the top of the next badge. Anchored to the badge edges (not
   50%/fixed-height) so it stays fully connected when a step wraps to multiple
   lines. */
.cbv-cta-banner__steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 40px;
	bottom: -24px;
	transform: translateX(-50%);
	width: 3px;
	background-color: var(--wp--preset--color--accent);
}

/* Teal button, black text (matches the design / theme primary button). */
.cbv-cta-banner__cta .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: #000000;
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.cbv-cta-banner__cta .wp-block-button__link:hover,
.cbv-cta-banner__cta .wp-block-button__link:focus {
	background-color: var(--cbv-accent-hover);
	color: #000000;
}

/* Mobile: button spans full width. */
@media (max-width: 781px) {
	.cbv-cta-banner__actions,
	.cbv-cta-banner__actions .wp-block-button {
		width: 100%;
	}

	.cbv-cta-banner__cta .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Wide band: three parts spread across the row, vertically centred, with the
   button pinned to the right (Figma). Keyed to the band width, so it applies to
   the full-bleed and contained-wide states but NOT the narrow "none" state —
   which keeps the stacked layout above and the button in the correct place. */
@container cta-banner (min-width: 900px) {
	.cbv-cta-banner .cbv-cta-banner__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: clamp(2rem, 4vw, 4rem);
	}

	.cbv-cta-banner__actions {
		flex: none;
	}

	/* Fixed 48px / 56px heading on the wide band (Figma Display/4). */
	.cbv-cta-banner__title {
		font-size: 3rem;
		line-height: 1.1667;
	}
}

/* ==========================================================================
   Steps (dark band) — patterns/steps.php
   Full-width dark navy band with a teal heading and a numbered list of
   single-line steps, joined by the same teal connector as the stepped CTA
   banner. No eyebrow, description, or button — the steps are the content.
   ========================================================================== */

/* True full-bleed navy band, edge-to-edge at every width (matches the hero /
   newsletter / stepped CTA banner bands). Tight 1rem gutters on mobile so the
   step copy isn't cramped once the badge + gap are subtracted; the root
   1.5rem padding-aware gutter can leave the column too narrow on a phone. */
.cbv-steps.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-inline: 1rem;
}

@media (min-width: 782px) {
	.cbv-steps.alignfull {
		padding-inline: clamp(1.5rem, 5vw, 5rem);
	}
}

/* Contained-wide state: a centred 1280 band, same break-out as .alignfull. */
.cbv-steps.alignwide {
	width: min(100vw, 1280px) !important;
	max-width: min(100vw, 1280px) !important;
	margin-left: calc(50% - min(50vw, 640px)) !important;
	margin-right: calc(50% - min(50vw, 640px)) !important;
	padding-inline: clamp(1.5rem, 3vw, 5rem);
}

.cbv-steps__inner {
	max-width: 768px;
}

.cbv-steps__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
}

/* Numbered stepper — teal circular badges joined by a teal connector. Mirrors
   the stepped CTA banner treatment (patterns/cta-banner.php). */
.cbv-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cbv-step;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cbv-steps__list li {
	position: relative;
	display: flex;
	/* Top-align so the badge stays put beside the first line when the copy
	   wraps to multiple lines (a step can run long). */
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	/* Smaller on mobile; bumped to 1.25rem on the wide band below. */
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
}

.cbv-steps__list li::before {
	counter-increment: cbv-step;
	content: counter(cbv-step);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--accent);
	color: #000000;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

/* Teal connector: runs from the bottom of this badge (40px) down through the
   24px flex gap to the top of the next badge. Anchored to the badge edges (not
   50%/fixed-height), so it stays fully connected no matter how many lines the
   step copy wraps to. */
.cbv-steps__list li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 40px;
	bottom: -24px;
	transform: translateX(-50%);
	width: 3px;
	background-color: var(--wp--preset--color--accent);
}

/* Wide band: fixed 48px heading (Figma Display/4, matching the stepped CTA
   banner) and larger step copy. */
@media (min-width: 782px) {
	.cbv-steps__title {
		font-size: 3rem;
		line-height: 1.1667;
	}

	.cbv-steps__list li {
		font-size: 1.25rem;
		line-height: 1.3;
	}
}

/* ==========================================================================
   Call to action — patterns/call-to-action.php
   Full-width navy band with a teal triangle field bleeding in from both
   edges, centered eyebrow + teal heading + copy + button. Mobile-first.
   ========================================================================== */

/* True full-bleed navy band regardless of the (constrained) container it's
   dropped into — same break-out technique as the hero / stepped CTA banner. */
.cbv-call-to-action.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.cbv-call-to-action {
	position: relative;
	overflow: hidden;
}

/* Teal triangle fields (design SVGs) pinned to each edge; each SVG carries its
   own navy gradient that fades it out toward the centre, behind the content. */
.cbv-call-to-action::before,
.cbv-call-to-action::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(392px, 34%);
	background-repeat: no-repeat;
	background-size: auto 100%;
	pointer-events: none;
	z-index: 0;
}

.cbv-call-to-action::before {
	right: 0;
	background-image: url(../images/Ready-to-be-a-CBV-Right.svg);
	background-position: right center;
}

.cbv-call-to-action::after {
	left: 0;
	background-image: url(../images/Ready-to-be-a-CBV-Left.svg);
	background-position: left center;
}

.cbv-call-to-action > * {
	position: relative;
	z-index: 1;
}

/* Centered content column, capped so the copy wraps like the design. */
.cbv-call-to-action .cbv-call-to-action__inner {
	align-items: center;
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.cbv-call-to-action__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--white);
}

.cbv-call-to-action__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	/* 32px (mobile) → 48px (desktop), matching the design. */
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
}

.cbv-call-to-action__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}

/* Button uses the theme's default primary button (teal bg / black text /
   square corners), matching the design's "Create Profile" CTA. */
.cbv-call-to-action__actions .wp-block-button__link {
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* Mobile: hide the triangle arrows, tighten the gutter, full-width button. */
@media (max-width: 781px) {
	.cbv-call-to-action::before,
	.cbv-call-to-action::after {
		display: none;
	}

	.cbv-call-to-action.alignfull {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
		/* Design specifies 48px bottom padding on mobile. */
		padding-bottom: 48px;
	}

	.cbv-call-to-action__actions,
	.cbv-call-to-action__actions .wp-block-button {
		width: 100%;
	}

	.cbv-call-to-action__actions .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ==========================================================================
   Image beside text — patterns/image-text.php
   A core/media-text where the image bleeds to the outer page edge while the
   text stays within the content width. The native "Show media on left/right"
   toggle flips which side bleeds (adds .has-media-on-the-right). On mobile the
   image is hidden and the button is full-width with centred text.
   ========================================================================== */

/* Break out of the (constrained) content container, but cap the banner at the
   design artboard width (1440) and centre it — so the image reaches the
   container edge, not the viewport, and stops growing on very wide screens.
   Below 1440 it fills the viewport. */
.cbv-image-text.alignfull {
	width: min(100vw, 1440px) !important;
	max-width: min(100vw, 1440px) !important;
	margin-left: calc(50% - min(50vw, 720px)) !important;
	margin-right: calc(50% - min(50vw, 720px)) !important;
}

.cbv-image-text {
	align-items: stretch;
	/* Figma row is 700px tall at 1440; scale down on narrower desktops. Mobile
	   resets this to 0 (image hidden, text flows) in the max-width:781px block. */
	min-height: clamp(420px, 49vw, 700px);
}

/* Default breathing room between stacked image-text sections (per the design).
   No !important — the flush rule above now excludes image-text, so an editor's
   own top-margin set via the block's Dimensions control (an inline style, which
   outranks this) overrides the default. */
.wp-block-post-content > .cbv-image-text + .cbv-image-text {
	margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.wp-block-post-content > .cbv-image-text + .cbv-image-text {
		margin-top: var(--wp--preset--spacing--70);
	}
}

/* Mobile: FSE already provides the block-gap between stacked sections, so drop
   the extra top margin here to avoid doubled spacing (per review). */
@media (max-width: 781px) {
	.wp-block-post-content > .cbv-image-text + .cbv-image-text {
		margin-top: 0;
	}
}

.cbv-image-text .wp-block-media-text__media {
	height: 100%;
}

.cbv-image-text .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbv-image-text .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: 2rem;
}

.cbv-image-text__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	/* Figma Text/text-subheadings resolves to #000000 in this light context. */
	color: #000000;
}

.cbv-image-text__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	/* 28px (mobile) → 48px (desktop), the theme display scale. */
	font-size: var(--cbv-fs-display);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--cbv-surface-navy);
}

.cbv-image-text__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cbv-text-muted);
}

.cbv-image-text__cta .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: #000000;
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.cbv-image-text__cta .wp-block-button__link:hover,
.cbv-image-text__cta .wp-block-button__link:focus {
	background-color: var(--cbv-accent-hover);
	color: #000000;
}

/* Desktop: 80px inset each side (matches the design). Because the banner is
   capped at 1440, this keeps the text within the 1280 content width on the
   outer side while leaving a gap from the image on the inner side. */
@media (min-width: 782px) {
	.cbv-image-text .wp-block-media-text__content {
		padding-inline: 80px;
	}
}

/* Mobile: hide the image, stack full-width, full-width centred button. */
@media (max-width: 781px) {
	.wp-block-media-text.cbv-image-text {
		display: block;
		min-height: 0;
	}

	.cbv-image-text .wp-block-media-text__media {
		display: none;
	}

	.cbv-image-text .wp-block-media-text__content {
		padding: 2rem 20px;
	}

	.cbv-image-text__actions,
	.cbv-image-text__actions .wp-block-button {
		width: 100%;
	}

	.cbv-image-text__cta .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ==========================================================================
   Stackable accordion — match the CBV Figma:
   grey surface, chevron caret, and a navy left accent + navy title/caret
   when expanded. Width is set by the container the accordion sits in, so this
   styling is width-agnostic (works on the 750px and 1280px examples alike).
   Scoped + !important to beat Stackable's generated per-block styles.
   ========================================================================== */

/* Let grouped accordions follow the group's width control: when an editor wraps
   accordions in a group and sets it to Wide/Full, the group's constrained layout
   would normally pin the accordions to the 800px reading column. Un-clamp them so
   they fill the widened box — no manual "content width" pixel value needed. */
.entry-content .wp-block-group.alignwide.is-layout-constrained > .wp-block-stackable-accordion,
.entry-content .wp-block-group.alignfull.is-layout-constrained > .wp-block-stackable-accordion {
	max-width: none !important;
}

/* Grey surface across the accordion (override the container background var). */
.entry-content .wp-block-stackable-accordion.is-style-default .stk-container:not(.stk--no-background) {
	--stk-container-background-color: #f0f1f3 !important;
	background-color: #f0f1f3 !important;
}

/* Navy left accent bar — reserved (transparent) when collapsed so the text
   doesn't shift, navy when expanded. */
.entry-content .wp-block-stackable-accordion.is-style-default {
	border-left: 11px solid transparent !important;
	transition: border-color 0.2s ease;
}

.entry-content .wp-block-stackable-accordion.is-style-default[open] {
	border-left-color: #221c58 !important;
}

/* Title: Open Sans Bold (Figma Heading/4 — sub-headings use Open Sans, not the
   Gotham display face the theme applies to every heading). Muted grey collapsed →
   navy when expanded. */
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-heading__text {
	font-family: var( --wp--preset--font-family--body ) !important;
	color: #585e64 !important;
}

.entry-content .wp-block-stackable-accordion.is-style-default[open] .stk-block-heading__text {
	color: #221c58 !important;
}

/* Body copy inside the panel: Figma Text/text-body grey (#585e64), not the
   theme's dark-navy default. */
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content .stk-block-text__text,
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content p {
	color: #585e64 !important;
}

/* Caret: navy (Figma icon/blue #221C58) in both states — only the title shifts
   grey→navy. The chevron path uses fill="currentColor" driven by Stackable's
   --stk-icon-color (a grey), so override the icon-colour variable AND the path
   fill directly. Rotate the chevron up when expanded. */
.entry-content .wp-block-stackable-accordion.is-style-default .wp-block-stackable-icon {
	--stk-icon-color: #221c58 !important;
}

.entry-content .wp-block-stackable-accordion.is-style-default .wp-block-stackable-icon svg,
.entry-content .wp-block-stackable-accordion.is-style-default .wp-block-stackable-icon svg path {
	color: #221c58 !important;
	fill: #221c58 !important;
}

.entry-content .wp-block-stackable-accordion.is-style-default .wp-block-stackable-icon svg {
	transition: transform 0.2s ease;
	transform-origin: center;
}

.entry-content .wp-block-stackable-accordion.is-style-default[open] .wp-block-stackable-icon svg {
	transform: rotate(180deg) !important;
}

/* Tighten the expanded panel and reduce the gap between accordions to match the
   design. Stackable gives every inner block a 24px bottom margin
   (--stk-block-margin-bottom), which stacks an extra gap below the header row
   and body; zero it, then set the spacing explicitly. */
.entry-content .wp-block-stackable-accordion.is-style-default {
	--stk-block-margin-bottom: 0px !important;
	margin-bottom: 12px !important;
}

.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content > .stk-column-wrapper {
	padding-top: 0 !important;
	padding-bottom: 12px !important;
}

/* Zero the accordion columns' own margin/padding so the header and content read
   as one continuous panel (Stackable stacks a column margin + content padding
   on top of the header, opening a large gap when expanded). */
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__heading > .stk-column-wrapper,
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content > .stk-column-wrapper {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__heading {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Grey the whole accordion (the <details>) and the content panel so there's no
   white between/around the header and content — the content column ships with
   .stk--no-background, so it (and the details) stayed transparent. Now the
   expanded accordion reads as one continuous grey panel. */
.entry-content .wp-block-stackable-accordion.is-style-default,
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content,
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content > .stk-column-wrapper {
	background-color: #f0f1f3 !important;
}

/* Content flush to the left border: remove Stackable's default 12px
   column-wrapper inset that offsets the grey/content from the navy border. The
   32px wrapper padding still insets the text. (The accordion's overall width is
   left to Stackable's own "Content Width" control, not forced here.) */
.entry-content .wp-block-stackable-accordion.is-style-default .stk-column-wrapper {
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* Symmetric 24px top/bottom (Figma collapsed py-24). The expanded gap is tightened
	   to 12px by the accordion-gap script setting the header wrapper's bottom padding
	   inline (see below for why JS). */
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

/* Stackable gives the header wrapper a generic `transition: all`, which would
   animate the script's 24px→12px padding switch into a slide (a slight "jump") on
   open. Make the padding change instant. */
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__heading > .stk-column-wrapper {
	transition: none !important;
}

/* CTA button sits 12px below the accordion body copy (Figma). Stackable's block
   margins are zeroed above (--stk-block-margin-bottom), so the gap is set here
   explicitly rather than inherited from the block's default spacing. */
.entry-content .wp-block-stackable-accordion.is-style-default .stk-block-accordion__content .stk-block-button-group {
	margin-top: 12px !important;
}

/* ==========================================================================
   Wide / Full alignment inside page content.
   The page content column is 800px, so a plain wide/full block can't grow past
   it with max-width alone (only the theme's own patterns break out). Enable the
   standard behaviour for any wide/full block an editor adds: break out and
   centre to the wide (1280) / full (viewport) width.

   The `:not([class*="cbv-"])` guard excludes the theme's own patterns (.cbv-hero,
   .cbv-stats, .cbv-video-feature, …), which manage their own full-bleed. Without
   it, this rule's !important margin (loaded later) overrode a pattern's margin
   while its non-important width lost — e.g. the full-bleed .cbv-stats band ended
   up 100vw wide but positioned for a 1280 breakout, shoving it off to the right.
   ========================================================================== */
.entry-content > .alignwide:not([class*="cbv-"]) {
	width: min(100vw, 1280px);
	max-width: min(100vw, 1280px);
	/* !important beats WP's constrained-layout `margin: auto !important`, which
	   can't centre an element wider than its 660 container. */
	margin-left: calc(50% - min(50vw, 640px)) !important;
	margin-right: calc(50% - min(50vw, 640px)) !important;
}

.entry-content > .alignfull:not([class*="cbv-"]) {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* ==========================================================================
   Stackable "Plain" button variation → CBV CTA text-link.
   Matches the Figma "CTA Button": navy bold label with a right chevron, no
   background and no side padding. The chevron is a CSS mask so it inherits the
   navy text colour (incl. on hover).
   ========================================================================== */
.wp-block-stackable-button.is-style-plain .stk-button {
	gap: 8px;
	padding: 8px 0 !important;
	background: transparent !important;
	color: #221c58 !important;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
}

.wp-block-stackable-button.is-style-plain .stk-button__inner-text {
	color: #221c58 !important;
}

/* Chevron on the text span's ::after (Stackable uses the link's ::before/::after
   for its hover overlay, so those are absolutely positioned and unusable here). */
.wp-block-stackable-button.is-style-plain .stk-button__inner-text::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: 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%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Query pagination pager — templates/archive-news_article.html (.cbv-pager)
   Matches the Figma pager: centred row of 40px number cells (medium-grey text),
   the current page in a navy rounded box with white text, flanked by single
   chevron arrows. Reuses the theme's chevron glyph so the arrows stay crisp.
   ========================================================================== */
.cbv-pager.wp-block-query-pagination {
	align-items: center;
	justify-content: center;
	gap: 20px;
}

/* Number strip — 2px between cells (Figma spacing-xxs). */
.cbv-pager .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Each page cell: 40×40, centred, medium-grey body text. */
.cbv-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.4;
	color: #585e64;
	text-decoration: none;
}

/* Current page — navy box, white text (Figma Surface/blue). */
.cbv-pager .page-numbers.current {
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
}

/* Hover/focus on the linked numbers — subtle light-teal fill. */
.cbv-pager a.page-numbers:hover,
.cbv-pager a.page-numbers:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--cbv-surface-navy);
}

/* Ellipsis reads as plain text, no box. */
.cbv-pager .page-numbers.dots {
	background: none;
	color: #585e64;
}

/* Prev/next: keep the "Previous/Next Page" label for screen readers but hide it
   visually, then draw a single chevron in place of the core «/» glyph. */
.cbv-pager .wp-block-query-pagination-previous,
.cbv-pager .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* ≥24px hit area on both axes for WCAG 2.2 SC 2.5.8 Target Size. */
	min-width: 40px;
	height: 40px;
	font-size: 0;
	color: var(--cbv-surface-navy);
}

.cbv-pager .wp-block-query-pagination-previous-arrow,
.cbv-pager .wp-block-query-pagination-next-arrow {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0;
	font-size: 0;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.cbv-pager .wp-block-query-pagination-previous-arrow {
	-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%3Cpolyline points='15 18 9 12 15 6'/%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%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.cbv-pager .wp-block-query-pagination-next-arrow {
	-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%3Cpolyline points='9 18 15 12 9 6'/%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%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   News archive listing — templates/archive-news_article.html (.cbv-news-list)
   Read More styled as the design's tertiary "Button CTA" link (navy bold text,
   no background/underline, a right chevron), and navy title links.
   ========================================================================== */
.cbv-news-list .wp-block-post-title a {
	color: var(--cbv-surface-navy);
	text-decoration: none;
}

.cbv-news-list .wp-block-post-title a:hover,
.cbv-news-list .wp-block-post-title a:focus {
	/* Keep navy (15.27:1 on white); underline is the interaction cue. Teal drops
	   to 1.96:1 on white, failing SC 1.4.3. */
	color: var(--cbv-surface-navy);
	text-decoration: underline;
}

.cbv-news-list .wp-block-post-excerpt__more-text {
	/* A little breathing room between the excerpt and the Read More link. */
	margin: 0.75rem 0 0;
}

/* Tertiary CTA link: label + right chevron, navy, no underline. */
.cbv-news-list .wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cbv-surface-navy);
	text-decoration: none;
}

/* Right chevron drawn from the theme's chevron glyph, tinted via currentColor. */
.cbv-news-list .wp-block-post-excerpt__more-link::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: 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%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cbv-news-list .wp-block-post-excerpt__more-link:hover,
.cbv-news-list .wp-block-post-excerpt__more-link:focus {
	/* Stay navy on white (teal fails 1.4.3 / 1.4.11); underline signals hover. */
	color: var(--cbv-surface-navy);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Two-calendar filter bar — Term/Course/Category dropdowns + Upcoming/Archived
   toggle. Injected into `.mec-search-form` by inc/mec-filters.php via the
   `mec_filter_fields_search_form` hook. See calendar.js → initFilterBar for
   the URL-round-trip that submits selections.
   -------------------------------------------------------------------------- */

/* MEC's sf_search_form() opens `.mec-dropdown-wrap` and other row wrappers
   when it enters the taxonomy-fields block, then closes them on exit —
   disabling every taxonomy filter (as we do on both calendars) leaves the
   wrappers rendered but empty except for whitespace. `:empty` doesn't match
   whitespace-only nodes, so use `:not(:has(*))` (no element children). Any
   wrapper that later gets real content will re-appear automatically.
   `!important` beats the sibling `> div { display: flex }` rule that ties
   on specificity — flex was making one of these empty wrappers visible as
   a zero-content flex box in the row. */
.mec-full-calendar-wrap .mec-search-form form div:not(:has(*)) {
	display: none !important;
}

.mec-full-calendar-wrap .cbv-filter-dropdown {
	position: relative;
	padding: 0;
}

.mec-full-calendar-wrap .cbv-filter-dropdown .cbv-filter-select {
	/* Reset MEC's own select styling — MEC ships a native `<select>` inside
	   `.mec-dropdown-search` and applies a mix of padding/border via its
	   stock CSS. Overwrite with the Figma token set. Square corners
	   (border-radius: 0) to match the search input + toggle chrome.
	   Typography = Figma Body/Medium Bold. */
	appearance: none;
	background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 12px center / 20px 20px no-repeat;
	border: 1px solid var(--Border-default, #B4BBC2);
	border-radius: 0;
	color: #000000;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	font-feature-settings: 'liga' off, 'clig' off;
	height: 48px;
	padding: 0 44px 0 16px;
	min-width: 200px;
}

/* Focus indicator — border darkens to navy + soft semi-transparent
   glow. Matches the Search wrapper so all filter controls share the
   same focus treatment. */
.mec-full-calendar-wrap .cbv-filter-dropdown .cbv-filter-select:focus,
.mec-full-calendar-wrap .cbv-filter-dropdown .cbv-filter-select:focus-visible {
	outline: 0;
	border-color: var(--cbv-surface-navy);
	box-shadow: 0 0 0 3px rgba(34, 28, 88, 0.15);
}

/* Date picker — reuses `.cbv-filter-select` chrome (48px, border, no
   radius, Body/Medium Bold text). Override the native date input's
   built-in chevron/spinner appearance so it sits flush like the
   surrounding dropdowns. */
.mec-full-calendar-wrap .cbv-filter-date input.cbv-filter-select {
	background-image: none;
	padding: 0 16px;
	min-width: 180px;
}

.mec-full-calendar-wrap .cbv-filter-date input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .7;
	margin-left: 8px;
}

/* Hide the date picker in monthly view — it only makes sense with a
   chronological list. Uses :has() to detect the currently-selected
   view; on Educational (list-only) the view toggle span isn't in the
   DOM, so `:has(.monthlyview.selected)` fails and the date input
   stays visible. */
.mec-full-calendar-wrap:has(.mec-totalcal-monthlyview.mec-totalcalview-selected) .cbv-filter-date {
	display: none;
}

/* Inverse case for list view: the hoisted month navigator and the
   Type-of-Event legend chips are monthly-grid furniture. Hide them
   when list is active. The legend CONTAINER stays visible because
   the Reset link is hoisted inside it on General — hiding only
   `.cbv-event-type-chip` keeps Reset rendering.
   `!important` beats the earlier `.cbv-nav-hoisted { display: flex
   !important }` rule that forces the navigator visible when hoisted. */
.mec-full-calendar-wrap:has(.mec-totalcal-listview.mec-totalcalview-selected) .mec-month-navigator,
.mec-full-calendar-wrap:has(.mec-totalcal-listview.mec-totalcalview-selected) .cbv-event-type-legend .cbv-event-type-chip {
	display: none !important;
}

/* Same treatment on mobile: chips hidden regardless of the current
   view (list-only via applyMobileGate anyway). Container stays so the
   Reset link hoisted inside it still renders right-aligned. */
@media ( max-width: 991.98px ) {
	.mec-full-calendar-wrap .cbv-event-type-legend .cbv-event-type-chip {
		display: none !important;
	}
}

/* Note: the Upcoming/Archived segmented toggle was replaced with a
   `.cbv-filter-select` dropdown (All / Upcoming / Archived, All is
   default). See render_scope_dropdown() — no dedicated CSS needed;
   it reuses the taxonomy dropdown chrome. */

/* Reset link — its container. Positioning depends on which calendar:
     - General (has legend): JS hoists this into `.cbv-event-type-legend`
       and adds `--in-legend` modifier — see rule below.
     - Educational (no legend): sits on its own line below the filters,
       right-aligned.
   Educational placement on desktop: the form is `flex-wrap: nowrap` so
   Search + dropdowns stay on one line at intermediate widths, which
   means a `flex-basis: 100%` sibling can no longer wrap to its own row
   and instead compresses everything to its left. Take the reset row
   out of the flex flow via `position: absolute` (parent form has
   `position: relative`) so the filter row lays out cleanly and Reset
   still sits on its own line beneath. Extra bottom-space on the form
   reserves room for it. On mobile the form is `flex-direction: column`
   already, so let the reset row flow naturally there. */
.mec-full-calendar-wrap .mec-search-form form > .cbv-filter-reset-row {
	/* `!important` beats the generic `form > div:not(.mec-full-calendar-search-ends)`
	   rule above (which forces `display: flex` at the same specificity)
	   so `text-align: right` can right-align the inline-level Reset
	   button. The block also lets the mobile `flex-direction: column`
	   rule at line 3960 not affect this row. */
	display: block !important;
	order: 100; /* keeps the row after every other flex item on mobile (form is `flex-direction: column`). Ignored on desktop where the row is `position: absolute`. */
	min-height: 24px;
	margin: 4px 0 0;
	text-align: right;
}
@media ( min-width: 992px ) {
	.mec-full-calendar-wrap .mec-search-form form > .cbv-filter-reset-row {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
	}
	/* Reserve the row's height below the form on desktop so the
	   absolute-positioned reset row doesn't overlap the calendar grid.
	   Scoped to the enabled state — when Reset is disabled the row
	   collapses (line 4487), so the extra space isn't needed. */
	.mec-full-calendar-wrap .mec-search-form.mec-totalcal-box:has(form > .cbv-filter-reset-row .cbv-filter-reset:not([disabled])) {
		margin-bottom: 52px;
	}
}

/* Hoisted into the legend row on General — right-aligned via
   `margin-left: auto`, and the reserved-space rules from above are
   irrelevant here (the legend row's own height is enough). */
.mec-full-calendar-wrap .cbv-event-type-legend .cbv-filter-reset-row {
	margin-left: auto;
	margin-top: 0;
	min-height: 0;
	flex: 0 0 auto;
}

/* MEC's `.mec-wrap button` sweep wins on specificity, so override with
   `!important` (same pattern as .cbv-scope-btn). Styled as a plain
   text link — no button chrome. */
.mec-full-calendar-wrap .cbv-filter-reset {
	appearance: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	color: var(--cbv-surface-navy) !important;
	cursor: pointer;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px !important;
	font-weight: 400;
	height: auto !important;
	line-height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mec-full-calendar-wrap .cbv-filter-reset:not([disabled]):hover {
	color: var(--wp--preset--color--accent, #69C8C7) !important;
}

/* Hidden state keeps the layout reserved — `visibility: hidden` still
   occupies the row's 24px min-height so nothing below shifts when the
   link toggles on/off with filter state. */
.mec-full-calendar-wrap .cbv-filter-reset[disabled] {
	visibility: hidden;
}

.mec-full-calendar-wrap .cbv-filter-reset:focus-visible {
	outline: 2px solid var(--cbv-surface-navy);
	outline-offset: 2px;
}

/* Non-interactive Type-of-Event legend on the General calendar. Sits above
   the shortcode wrapper (prepended via the_content in mec-filters.php).
   WordPress's `.is-layout-constrained` parent applies `max-width:
   content-size` + auto margins to normal-flow children, which would
   cap this at ~660px and center it. Both properties need `!important`
   to override (WP uses `!important` on the margins for the same reason).
   The calendar wrap below is unconstrained, so lifting these caps
   keeps the legend aligned with it. */
.cbv-event-type-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	max-width: none !important;
	margin: 0 0 24px !important;
}

/* Legend item = small color swatch (::before) + text label. The
   `--cbv-cat-color` custom prop is emitted inline per chip in
   render_event_type_legend(), so each swatch picks up its own hex.
   Typography = Figma Body/Large Normal. */
.cbv-event-type-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: #000;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	font-feature-settings: 'liga' off, 'clig' off;
	border-radius: 0;
	padding: 0;
}

.cbv-event-type-chip::before {
	content: '';
	display: block;
	width: 19px;
	height: 19px;
	background: var(--cbv-cat-color);
	border-radius: 2px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Mobile filter drawer.

   On < 992px the taxonomy / date / scope dropdowns move into a bottom-sheet
   opened by a funnel-icon button next to Search. calendar.js →
   initMobileFilterDrawer() handles the DOM re-parenting on media-query
   change so a single set of DOM elements (with their existing change
   handlers) powers both layouts.

   On desktop the trigger and panel disappear entirely (`display: none`),
   and the dropdowns sit inline in the filter row as before.
   -------------------------------------------------------------------------- */

/* Trigger — funnel-icon button. Desktop hidden; mobile visible next to
   Search. Chrome matches the Search input (48px, Border-default, no
   radius, transparent background) so the pair reads as one control. */
.mec-full-calendar-wrap .cbv-filter-drawer-trigger {
	display: none !important;
}

/* Drawer lives on <body> after JS hoist. Desktop: never rendered. */
.cbv-filter-drawer,
.cbv-filter-drawer[hidden] {
	display: none;
}

@media ( max-width: 991.98px ) {
	/* Prevent FOUC — hide the taxonomy / date / scope dropdowns while
	   they're still in their PHP-rendered inline position at the top
	   of the filter row. JS moves them into `.cbv-filter-drawer__body`
	   on DOMContentLoaded; once they're in there, the drawer-scoped
	   rule below re-reveals them (drawer itself is `hidden` until the
	   funnel button is clicked). Prevents the "all filters flash into
	   view then vanish" on reload. */
	.mec-full-calendar-wrap .mec-search-form .cbv-filter-dropdown {
		display: none;
	}
	.cbv-filter-drawer__body .cbv-filter-dropdown {
		display: block;
	}

	/* MEC's `.mec-wrap button:not(...)` sweep applies teal tint + 10/24
	   padding + inline-block; matched (0,10,4) specificity. `!important`
	   on the properties that need to actually win (same pattern as
	   .cbv-scope-btn). */
	.mec-full-calendar-wrap .cbv-filter-drawer-trigger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 48px !important;
		height: 48px !important;
		flex: 0 0 auto;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: 1px solid var(--Border-default, #B4BBC2) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: var(--cbv-surface-navy) !important;
		cursor: pointer;
		position: relative;
	}
	.mec-full-calendar-wrap .cbv-filter-drawer-trigger svg {
		width: 20px;
		height: 20px;
		margin-left: 0 !important;
		display: block;
	}
	.mec-full-calendar-wrap .cbv-filter-drawer-trigger.has-active::after {
		content: '';
		position: absolute;
		top: 6px;
		right: 6px;
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: var(--wp--preset--color--accent, #69C8C7);
	}

	/* Panel — full-screen bottom sheet when open. `hidden` attribute
	   controls visibility; JS toggles it. */
	.cbv-filter-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
	}
	.cbv-filter-drawer[hidden] {
		display: none;
	}
	.cbv-filter-drawer__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(19, 16, 50, .55);
	}
	/* Sheet — square corners to match the search input + selects (all
	   render `border-radius: 0` above). Sits flush against the viewport
	   edge; no drop shadow (the navy backdrop already separates it). */
	.cbv-filter-drawer__sheet {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 90vh;
		display: flex;
		flex-direction: column;
		background: var(--wp--preset--color--white, #fff);
		border-radius: 0;
		overflow: hidden;
	}
	/* Head — navy title left, Reset link + close ✕ on the right. Uses
	   an inset gradient divider (20px inset each side) instead of a
	   full-width border, matching the mobile mega-menu row treatment. */
	.cbv-filter-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 20px;
		background-image: linear-gradient(to right, var(--cbv-divider), var(--cbv-divider));
		background-size: calc(100% - 40px) 1px;
		background-position: 20px bottom;
		background-repeat: no-repeat;
	}
	.cbv-filter-drawer__title {
		margin: 0;
		font-family: 'Open Sans', system-ui, sans-serif;
		font-size: 20px;
		font-weight: 700;
		line-height: 28px;
		color: var(--wp--preset--color--navy);
	}
	/* Close ✕ — 44px hit area (WCAG-friendly). Icon centred at 20px. */
	.cbv-filter-drawer__close {
		appearance: none;
		background: transparent;
		border: 0;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: -10px -10px -10px 0;   /* compensate hit area vs. head padding */
		color: var(--wp--preset--color--navy);
		cursor: pointer;
	}
	.cbv-filter-drawer__close:focus-visible {
		outline: 2px solid var(--wp--preset--color--navy);
		outline-offset: 2px;
	}
	.cbv-filter-drawer__close svg {
		width: 20px;
		height: 20px;
		display: block;
	}
	/* Body — filter dropdowns stacked with inset dividers between them.
	   No inner gaps: each row supplies its own 16px top/bottom padding
	   so the divider sits centred between adjacent rows. */
	.cbv-filter-drawer__body {
		display: flex;
		flex-direction: column;
		padding: 4px 0 20px;
		overflow-y: auto;
	}
	.cbv-filter-drawer__body .cbv-filter-dropdown {
		flex-basis: auto;
		padding: 12px 20px;
		background-image: linear-gradient(to right, var(--cbv-divider), var(--cbv-divider));
		background-size: calc(100% - 40px) 1px;
		background-position: 20px bottom;
		background-repeat: no-repeat;
	}
	.cbv-filter-drawer__body > *:last-child {
		background-image: none;
	}
	/* Uniform sizing for every filter row in the drawer: full-width
	   selects, no min-width variation (the desktop 200px / date 180px
	   caps don't apply in a stacked layout), and no border chrome —
	   the inset dividers between rows do the separation. */
	.cbv-filter-drawer__body .cbv-filter-select,
	.cbv-filter-drawer__body .cbv-filter-date input.cbv-filter-select {
		width: 100%;
		min-width: 0;
		border: 0;
		padding-left: 0;
	}
	/* Native date inputs ignore explicit `height` on WebKit unless we
	   also strip their intrinsic appearance and use box-sizing padding.
	   Match the 48px of the taxonomy/scope selects so all four rows
	   read as the same control. */
	.cbv-filter-drawer__body .cbv-filter-date input.cbv-filter-select {
		-webkit-appearance: none;
		appearance: none;
		box-sizing: border-box;
		height: 48px;
		line-height: 48px;
	}

	/* Freeze page scroll when drawer is open. */
	body.cbv-drawer-open {
		overflow: hidden;
	}

	/* Search + funnel pair on one row. JS moves the funnel INTO
	   `.mec-full-calendar-search-ends` so both live under the same
	   parent, then the parent flexes them side-by-side. Overrides the
	   desktop `display: contents` on search-ends AND the mobile
	   column rule on `> div`. */
	.mec-full-calendar-wrap .mec-search-form form .mec-full-calendar-search-ends {
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch;
		gap: 8px;
		width: 100%;
	}
	.mec-full-calendar-wrap .mec-text-input-search {
		flex: 1 1 auto;
	}
}

/* MEC ships a `margin-top: 10px` on the search input at <480px that
   nudges Search below the funnel when they share a row. Clear it so
   the pair stays vertically aligned. */
@media ( max-width: 480px ) {
	.mec-full-calendar-wrap .mec-search-form .mec-full-calendar-search-ends .mec-text-input-search {
		margin-top: 0;
	}
}

/* ==========================================================================
   Testimonial carousel — patterns/testimonial-carousel.php + testimonial-slide.php
   Full-bleed teal-tinted band. Desktop: photo left, quote + name + CTA right,
   prev/next arrows flanking the content box (vertically centred). Mobile: photo
   hidden, everything in one left-aligned column (quote → name → CTA → arrows).
   Arrows follow the Figma "Surface/blue" navy pill (active) / grey outline
   (disabled). Scoped via :has(.cbv-testimonial) so the shared Carousel block
   keeps its default look on other patterns (e.g. the post carousel).
   ========================================================================== */

/* Inset that aligns the band's content edge (and the arrows) with the 1280 box:
   80px at 1440, collapsing to the side padding below ~1360. */
.cbvinstitute-carousel:has( .cbv-testimonial ) {
	--cbv-ts-inset: max(var(--wp--preset--spacing--50), calc((100vw - 1280px) / 2));
}

/* True full-bleed. The block's own alignfull breakout is overridden by the
   theme's constrained-layout alignfull handling (max-width: calc(100% + pad)),
   which only reaches the content-area edges — not the viewport — when that area
   is narrower than the viewport (mobile). Re-assert 100vw with enough weight. */
.cbvinstitute-carousel:has( .cbv-testimonial ) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Teal band lives on .swiper — the fixed, viewport-width clipping container that
   stays put while the wrapper translates — so it fills the visible area for
   every slide (the wrapper is only one slide wide and scrolls off, so its
   background can't be used). */
.cbvinstitute-carousel:has( .cbv-testimonial ) .swiper {
	background-color: var(--wp--preset--color--surface);
}

/* Equal-height slides: the block runs this carousel with autoHeight off, so the
   track keeps the tallest slide's height and doesn't shift between slides. Keep
   the block's align-items:stretch and let the testimonial fill the slide height
   so the copy stays centred and the photo still bleeds to the base line. */
.cbvinstitute-carousel:has( .cbv-testimonial ) .swiper-slide > .cbv-testimonial {
	height: 100%;
}

.cbvinstitute-carousel:has( .cbv-testimonial ) .cbv-testimonial__row {
	height: 100%;
}

/* Editor preview has no Swiper container — tint the editor track instead. */
.cbvinstitute-carousel__editor-track:has( .cbv-testimonial ) {
	background-color: var(--wp--preset--color--surface);
}

/* Full-bleed band; content stays capped at 1280 via the group's constrained
   layout, with 40px side padding that only bites below 1360px. Vertical padding
   lives here (not inline) so the mobile override can win. */
.cbv-testimonial {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* Content column: quote-mark → quote → name (16px), then 40px to the CTA. The
   flex gap + margin reset override the block-gap margins so spacing is exact. */
.cbv-testimonial__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.cbv-testimonial__content > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Desktop: keep the quote/name/CTA clear of the prev/next arrows, which sit
   absolutely at the content-box edges (2.75rem wide). Without this cap, long
   quote lines run under the right-hand arrow. */
@media (min-width: 782px) {
	.cbv-testimonial__content {
		padding-right: 3.5rem; /* 2.75rem arrow + 0.75rem gap */
	}
}

.cbv-testimonial__actions {
	margin-top: 1.5rem; /* + 16px flex gap = 40px name → CTA (desktop) */
}

/* Quote-mark glyph — fixed 32px, never stretched by the image block. */
.cbv-testimonial__quote-mark {
	margin: 0;
	line-height: 0;
}

.cbv-testimonial__quote-mark img {
	width: 32px;
	height: auto;
}

/* Quote — body font, bold, flat 24px/30 across breakpoints. */
.cbv-testimonial__quote {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Attribution — regular weight. */
.cbv-testimonial__name {
	font-weight: 400;
}

/* Photo fills its column so the only gap to the content is the 40px column gap
   (the placeholder — and the editor's real image — span the full half-width),
   and bleeds flush to the bottom of the band so the cut-out sits on the base
   line. The copy column stays vertically centred. */
.cbv-testimonial__row .cbv-testimonial__media {
	align-self: flex-end;
}

.cbv-testimonial__photo {
	margin: 0;
}

.cbv-testimonial__photo img {
	display: block;
	width: 100%;
	height: auto;
	/* Bleed past the slide's bottom padding to the edge of the teal band. */
	margin-bottom: calc(-1 * var(--wp--preset--spacing--60));
}

/* --- Prev/next arrows (scoped to testimonial carousels) --------------------- */

/* Active arrow: navy pill, white chevron, at the content-box edges. */
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev,
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__next {
	border-color: var(--cbv-surface-navy);
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
}

.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev {
	left: var(--cbv-ts-inset);
}

.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__next {
	right: var(--cbv-ts-inset);
}

/* Draw the chevron as a mask so it inherits the button's `color` (the block's
   background-image approach can't pick up currentColor). */
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev::before,
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__next::before {
	background-image: none;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev::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%3Cpolyline points='15 18 9 12 15 6'/%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%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__next::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%3Cpolyline points='9 18 15 12 9 6'/%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%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Hover — keep navy (override the block's contrast/base swap), slight darken. */
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev:hover,
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__next:hover {
	border-color: #171243;
	background-color: #171243;
	color: var(--wp--preset--color--white);
}

/* Disabled (first/last slide) — transparent, grey outline + grey chevron. */
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev.swiper-button-disabled,
.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__next.swiper-button-disabled {
	opacity: 1;
	border-color: #a8a8a8;
	background-color: transparent;
	color: #a8a8a8;
	pointer-events: none;
}

/* --- Mobile: single left-aligned column, photo hidden, arrows below CTA ----- */
@media (max-width: 781px) {
	/* The teal fill moves to the carousel wrapper so it spans full width AND
	   covers the arrow row (which lives outside the slide in the DOM). */
	.cbvinstitute-carousel:has( .cbv-testimonial ) {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 8px;
		row-gap: 24px;
		padding-bottom: 24px;
		background-color: var(--wp--preset--color--surface);
	}

	.cbvinstitute-carousel:has( .cbv-testimonial ) .swiper {
		flex: 0 0 100%;
	}

	/* Slide: 20px sides, 24px top; row-gap handles the gap down to the arrows. */
	.cbv-testimonial {
		padding: 24px 20px 0;
	}

	.cbv-testimonial__media {
		display: none;
	}

	.cbv-testimonial__actions {
		margin-top: 0.5rem; /* + 16px flex gap = 24px name → CTA (mobile) */
	}

	/* Arrows flow as a left-aligned row (40px), aligned to the 20px content edge. */
	.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev,
	.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__next {
		position: static;
		transform: none;
		top: auto;
		left: auto;
		right: auto;
		width: 2.5rem;
		height: 2.5rem;
	}

	.cbvinstitute-carousel:has( .cbv-testimonial ) .cbvinstitute-carousel__prev {
		margin-left: 20px;
	}
}

/* -----------------------------------------------------------------------------
   Faceted site-search filter bar — [cbv_search_filters], per Figma "Filters Bar".
   Controls are 48px tall, 6px radius, 1px #b4bbc2 border on a #f8f8f9 fill, with
   Open Sans 14/20 text (#585e64 body). Search input ≈472px, each select 200px,
   8px gaps; wraps to full width on narrow screens.
--------------------------------------------------------------------------- */
.cbv-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Centre the filter cluster within the wide container on desktop. */
@media (min-width: 782px) {
	.cbv-search-filters {
		justify-content: center;
	}
}

.cbv-search-filters__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 320px;
	max-width: 472px;
}

.cbv-search-filters__icon {
	position: absolute;
	left: 12px;
	color: #000;
	pointer-events: none;
}

/* Scoped under .cbv-search-filters and matching input[type="search"] so these
   beat the theme's global input[type="search"]/select rule in main.css. */
.cbv-search-filters input[type="search"].cbv-search-filters__input {
	width: 100%;
	height: 48px;
	/* left padding clears the 20px icon inset 12px from the edge */
	padding: 0 12px 0 40px;
	background-color: #f8f8f9;
	border: 1px solid #b4bbc2;
	border-radius: 6px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #000;
	transition: none;
}

.cbv-search-filters input[type="search"].cbv-search-filters__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.cbv-search-filters__input::placeholder {
	color: #585e64;
	opacity: 1;
}

.cbv-search-filters__selects {
	display: flex;
	flex-wrap: wrap;
	/* Horizontal breathing room to the left and right of each facet. */
	gap: 16px;
	align-items: center;
}

.cbv-search-filters__field {
	display: block;
}

.cbv-search-filters__select {
	width: 200px;
	max-width: 100%;
	height: 48px;
	/* right padding clears the chevron */
	padding: 0 40px 0 12px;
	background-color: #f8f8f9;
	border: 1px solid #b4bbc2;
	border-radius: 6px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: #000;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.cbv-search-filters__submit {
	height: 48px;
	padding: 0 24px;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.cbv-search-filters__submit:hover,
.cbv-search-filters__submit:focus-visible {
	background-color: var(--wp--preset--color--navy);
}

@media (max-width: 781px) {
	/* Mobile: search + every facet + button stack full width. */
	.cbv-search-filters__search {
		flex-basis: 100%;
		max-width: none;
	}

	.cbv-search-filters__selects {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	/* flex:none keeps flex-basis off the (now vertical) main axis, so the base
	   height:48px holds instead of collapsing the controls/button to text height. */
	.cbv-search-filters__field,
	.cbv-search-filters__select,
	.cbv-search-filters__submit {
		flex: none;
		width: 100%;
	}

	/* Only 2.5rem (40px) between the page hero and the filter bar on mobile, on
	   both the search and Insights Library templates. Collapses the main's preset
	   top padding/margin and the bar's own top margin into one controlled value. */
	main:has( .cbv-search-filters ) {
		margin-top: 0 !important;
		padding-top: 2.5rem !important;
	}

	main:has( .cbv-search-filters ) .cbv-search-filters {
		margin-top: 0 !important;
	}
}

/* Below the desktop single-row layout, keep the filter bar inside the normal
   padded content on BOTH templates instead of breaking out wide — page.html
   (Insights) full-bleeds alignwide, search.html insets it, which otherwise gives
   inconsistent edges. This lines the bar up with the page content on both. */
@media (max-width: 958px) {
	/* !important overrides the theme's full-bleed alignwide margins inside
	   post-content (page.html / Insights), which otherwise pull the bar off the
	   left edge. search.html doesn't need it but is unaffected. */
	.wp-block-group.alignwide:has( .cbv-search-filters ) {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Tablet: full-width search bar, dropdowns two-up (50%), full-width button. */
@media (min-width: 782px) and (max-width: 958px) {
	.cbv-search-filters__search {
		flex-basis: 100%;
		max-width: none;
	}

	.cbv-search-filters__selects {
		width: 100%;
	}

	/* 50% each, accounting for the 16px gap between the pair. */
	.cbv-search-filters__field {
		flex: 1 1 calc(50% - 8px);
	}

	.cbv-search-filters__select {
		width: 100%;
	}

	.cbv-search-filters__submit {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------
   Insights Library list ([cbv_insights_library]) — image-free rows. Each row:
   format badge + date, linked title, short description, inline term tags, CTA.
--------------------------------------------------------------------------- */
.cbv-insights {
	list-style: none;
	/* The filter bar sits in the wide (1280) container; keep the list itself at a
	   readable column width, centred under the bar, so rows don't stretch. */
	max-width: 820px;
	margin: var(--wp--preset--spacing--60) auto 0;
	padding: 0;
}

.cbv-insights__empty {
	max-width: 820px;
	margin-inline: auto;
}

/* Insights list pagination (paginate_links .page-numbers markup). */
.cbv-insights__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	max-width: 820px;
	margin: var(--wp--preset--spacing--60) auto 0;
}

.cbv-insights__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--cbv-border-light, #b4bbc2);
	border-radius: 6px;
	color: var(--cbv-surface-navy);
	font-weight: 700;
	text-decoration: none;
}

.cbv-insights__pagination .page-numbers.current {
	background-color: var(--cbv-surface-navy);
	border-color: var(--cbv-surface-navy);
	color: #fff;
}

.cbv-insights__pagination a.page-numbers:hover {
	background-color: var(--wp--preset--color--surface, #e9f3f3);
}

/* Video insight triggers read as links but open the modal. */
.cbv-video-trigger {
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Video modal — shared #cbv-video-modal opened by insights-video-modal.js.
--------------------------------------------------------------------------- */
body.cbv-modal-open {
	overflow: hidden;
}

.cbv-video-modal[hidden] {
	display: none;
}

.cbv-video-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cbv-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	border: 0;
}

.cbv-video-modal__dialog {
	position: relative;
	width: min(90vw, 960px);
}

.cbv-video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}

.cbv-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cbv-video-modal__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.cbv-video-modal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 4px;
}

.cbv-insight {
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--cbv-border-light, #b4bbc2);
}

.cbv-insight:first-child {
	border-top: 1px solid var(--cbv-border-light, #b4bbc2);
}

.cbv-insight__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.cbv-insight__format {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 6px;
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface, #e9f3f3);
}

.cbv-insight__format--video {
	color: #fff;
	background-color: var(--wp--preset--color--primary);
}

.cbv-insight__date {
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--muted, #585e64);
}

.cbv-insight__title {
	margin: 0 0 8px;
	font-size: 1.375rem;
	line-height: 1.3;
}

/* Match the news-archive listing: navy title links, underline on interaction. */
.cbv-insight__title a {
	color: var(--cbv-surface-navy);
	text-decoration: none;
}

.cbv-insight__title a:hover,
.cbv-insight__title a:focus-visible {
	color: var(--cbv-surface-navy);
	text-decoration: underline;
}

.cbv-insight__excerpt {
	margin-bottom: 12px;
	color: #3a3f45;
}

.cbv-insight__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.cbv-insight__tag {
	padding: 2px 10px;
	border: 1px solid var(--cbv-border-light, #b4bbc2);
	border-radius: 999px;
	font-size: 12px;
	color: #585e64;
}

/* Tertiary CTA link matching .cbv-news-list: navy bold label + right chevron. */
.cbv-insight__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cbv-surface-navy);
	text-decoration: none;
}

.cbv-insight__cta::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: 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%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cbv-insight__cta:hover,
.cbv-insight__cta:focus-visible {
	color: var(--cbv-surface-navy);
	text-decoration: underline;
}

.cbv-insights__empty {
	margin-top: var(--wp--preset--spacing--60);
}

/* Accordions in an alignwide/alignfull group (un-clamped above to break out of
   the reading column) run full-bleed to the viewport edges below ~1320px, so the
   grey bars hit the sides of the screen. Keep the box off the edges with a side
   gutter across that range. Scoped to the same alignwide/alignfull groups as the
   un-clamp rule above — an unscoped `.wp-block-stackable-accordion` here also hit
   accordions in the normal 800px content column, blowing them out to viewport
   width and overflowing their group to the right. */
@media (max-width: 1320px) {
	.entry-content .wp-block-group.alignwide.is-layout-constrained > .wp-block-stackable-accordion,
	.entry-content .wp-block-group.alignfull.is-layout-constrained > .wp-block-stackable-accordion {
		box-sizing: border-box !important;
		width: calc(100vw - 40px) !important;
		max-width: calc(100vw - 40px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ==========================================================================
   Alert / announcement banner pattern (patterns/alert-banner.php)

   Full-width band editors insert on any page via the block inserter.
   Not part of any template. Not dismissible — always visible. Use for
   time-sensitive alerts (opt-out windows, registration close dates,
   exam-period notices, critical deadlines).

   Design:
     - Full-bleed teal-tinted band (#B3F1F1, set inline on the pattern
       so the color surfaces in the editor colour picker; matches the
       CSS token `--cbv-surface-teal-light`).
     - 8px accent-teal (#69C8C7) stripe along the LEFT edge — a
       visual cue that this is an important notice.
     - Navy contrast text, weight 700, comfortable padding.
   ========================================================================== */

.cbv-alert-banner {
	position: relative;
	border-radius: 0;
	border-left: 8px solid var(--wp--preset--color--accent, #69C8C7);
	color: var(--wp--preset--color--contrast, #131032);
}

/* Escape the `.entry-content` contentSize (800px) so the banner
   matches the calendar / other wide content (1280px). Same
   viewport-anchoring trick as `.mec-full-calendar-wrap`: absolute
   width, then `left: 50% + translateX(-50%)` re-centers on the
   viewport. Capped at wideSize or 100vw-48px, whichever is smaller,
   so it stays sane on mobile.

   `!important` beats main.css's `.has-global-padding > .alignfull`
   (fires ≤1024px, uses `!important` on margins/width) so the banner's
   left/right edges line up with the calendar at every breakpoint
   instead of stretching to the parent padding on tablet/mobile. */
.entry-content .cbv-alert-banner {
	--cbv-alert-width: min(1280px, 100vw - 48px);
	width: var(--cbv-alert-width) !important;
	max-width: none !important;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.cbv-alert-banner .cbv-alert-banner__message,
.cbv-alert-banner p {
	margin: 0;
	color: var(--wp--preset--color--contrast, #131032);
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	font-feature-settings: 'liga' off, 'clig' off;
}
.cbv-alert-banner a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cbv-alert-banner a:hover,
.cbv-alert-banner a:focus-visible {
	text-decoration: none;
}

/* Mobile: keep the accent stripe but let the message wrap naturally.
   The pattern's own padding (spacing|30 / spacing|50) already scales
   via theme.json; nothing further needed here. */

/* ==========================================================================
   Stackable heading / text parity layer

   Patterns use stackable/heading and stackable/text in place of core
   heading/paragraph. Core headings inherit their look from theme.json
   (styles.elements.heading + per-level h1–h6 sizes); core paragraphs inherit
   body defaults. Stackable's own elements don't pick those up, so this layer
   reproduces the same typography on the stk-* classes. Per-instance overrides
   (color, size, spacing that core blocks carried inline) live with each
   pattern's own CSS or via the size/spacing utilities below.
   ========================================================================== */

/* Scoped to .cbv-blk (the marker class the pattern conversions carry) via
   :where(), which contributes no specificity — so these stay the low-priority
   defaults the hero/BEM rules already override, while NOT touching Stackable
   blocks the patterns didn't create (e.g. the styled accordion titles).

   Wrapper carries color/size/alignment (via WP preset classes such as
   has-accent-color / has-small-font-size, or the cbv-* utilities below); the
   inner text inherits, so those all cascade in the same way core blocks
   received them. Heading defaults (font, weight, per-level size, navy) match
   theme.json styles.elements; text defaults match core paragraph. */
:where(.cbv-blk) .stk-block-heading__text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--cbv-surface-navy);
}

/* Per-level sizes — matches theme.json styles.elements.h1–h6 */
:where(.cbv-blk) h1.stk-block-heading__text {
	font-size: var(--wp--preset--font-size--huge);
}

:where(.cbv-blk) h2.stk-block-heading__text {
	font-size: var(--wp--preset--font-size--huge);
}

:where(.cbv-blk) h3.stk-block-heading__text {
	font-size: var(--wp--preset--font-size--x-large);
}

:where(.cbv-blk) h4.stk-block-heading__text {
	font-size: clamp(1.375rem, 1.32rem + 0.23vw, 1.5rem);
}

:where(.cbv-blk) h5.stk-block-heading__text {
	font-size: clamp(1.125rem, 1.07rem + 0.23vw, 1.25rem);
}

:where(.cbv-blk) h6.stk-block-heading__text {
	font-size: 1rem;
}

/* BEM title columns already carry their full type treatment (size, line-height,
   color) on the wrapper class. Let the inner heading inherit it instead of the
   generic navy/per-level defaults above. */
.cbv-call-to-action__title .stk-block-heading__text,
.cbv-cards__title .stk-block-heading__text,
.cbv-card-heading .stk-block-heading__text,
.cbv-cta-banner__title .stk-block-heading__text,
.cbv-image-text__title .stk-block-heading__text,
.cbv-newsletter__title .stk-block-heading__text,
.cbv-steps__title .stk-block-heading__text,
.cbv-video-feature__title .stk-block-heading__text {
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Text — inherits body font + whatever size/color/typography the wrapper sets */
:where(.cbv-blk) .stk-block-text__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Spacing / typography utilities — reproduce the per-instance inline styles the
   core heading/paragraph blocks carried (Stackable blocks in static patterns
   can't emit their own inline styles). Applied as classes on the wrapper. */
.cbv-mt-20 {
	margin-top: var(--wp--preset--spacing--20);
}

.cbv-mt-30 {
	margin-top: var(--wp--preset--spacing--30);
}

.cbv-mb-30 {
	margin-bottom: var(--wp--preset--spacing--30);
}

.cbv-mb-30-medium {
	margin-bottom: var(--wp--preset--spacing--30-medium);
}

.cbv-mb-40 {
	margin-bottom: var(--wp--preset--spacing--40);
}

.cbv-mb-40-large {
	margin-bottom: var(--wp--preset--spacing--40-large);
}

.cbv-mb-50 {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cbv-mb-70 {
	margin-bottom: var(--wp--preset--spacing--70);
}

.cbv-eyebrow-caps {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cbv-eyebrow-caps-tight {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cbv-quote-type {
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   People listing ([cbv_person_grid]) + board-member modal
   ========================================================================== */

/* Widen the listing to the theme's wide size (1280) even though the shortcode
   sits in the 800px constrained content column. The shortcode's wrapper isn't a
   direct child of the constrained container, so the layout's .alignwide rule
   can't reach it — break out and re-center on the column's center (which is the
   page/viewport center, matching other alignwide sections). */
.cbv-people {
	position: relative;
	left: 50%;
	width: min(1280px, 100vw - 3rem);
	transform: translateX(-50%);
}

/* 4-up grid of bordered member cards, mirroring the Find-a-CBV directory. */
.cbv-people__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.cbv-people__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.cbv-people__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.cbv-people__grid {
		grid-template-columns: 1fr;
	}
}

/* Card: 1px border, square corners, white — the footer button sits flush at the
   bottom and .cbv-person-card__content flexes to keep cards equal height. The
   card is position:relative so the CTA's ::after overlay covers it. */
.cbv-person-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cbv-border-light, #b4bbc2);
	transition: box-shadow 0.2s ease;
}

/* Hover/keyboard-focus: lift the card with a soft navy-tinted drop shadow.
   :focus-within covers keyboard users tabbing to the card's CTA. */
.cbv-person-card:hover,
.cbv-person-card:focus-within {
	box-shadow: 0 6px 20px rgba(19, 16, 50, 0.18);
}

/* Circular framed headshot — a 2px contrast-navy ring plus a thin inner white
   ring (::before), mirroring the Find-a-CBV directory avatars. Reused on the
   card, modal and single-person views. */
.cbv-avatar {
	display: inline-block;
	position: relative;
	border: 2px solid var(--wp--preset--color--contrast, #131032);
	border-radius: 50%;
	line-height: 0;
}

.cbv-avatar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	pointer-events: none;
}

.cbv-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	transition: transform 0.2s ease;
}

/* Card headshot, centered near the top of the card. */
.cbv-person-card__media {
	margin: 0;
	padding: 1.5rem 1.5rem 0;
	text-align: center;
}

.cbv-person-card__media .cbv-avatar {
	width: min(160px, 100%);
}

.cbv-person-card__content {
	flex: 1 1 auto;
	padding: 1.5rem;
}

.cbv-person-card__name {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	line-height: 1.17;
	color: var(--cbv-surface-navy, #221c58);
}

/* Credentials sit on their own line below the name, a touch smaller. */
.cbv-person-card__credentials {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--cbv-text-muted, #585e64);
}

/* Board position — bold label below the name, same text color as the name. */
.cbv-person-card__position {
	margin: 0 0 0.25rem;
	font-weight: 700;
	color: var(--cbv-surface-navy, #221c58);
}

.cbv-person-card__role {
	margin: 0;
	color: var(--cbv-text-muted, #585e64);
}

.cbv-person-card__footer {
	padding: 0 1.5rem 1.5rem;
}

/* Full-width navy button, mirroring the directory's "VIEW MORE". */
.cbv-person-cta {
	display: block;
	width: 100%;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 5px;
	background: var(--wp--preset--color--primary, #170f6b);
	color: var(--wp--preset--color--white, #fff);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* Full-card overlay so the image and whole card are clickable, while the CTA
   stays the single control / tab stop. */
.cbv-person-cta::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cbv-person-cta:focus-visible {
	outline: 2px solid var(--cbv-link-hover, #4362cf);
	outline-offset: 3px;
}

/* Hover: lift the headshot slightly and deepen the button. */
.cbv-person-card:hover .cbv-person-card__media img {
	transform: scale(1.03);
}

.cbv-person-card:hover .cbv-person-cta,
.cbv-person-cta:hover {
	background: var(--cbv-surface-navy, #221c58);
}

/* Person header band lines below the name (credentials, board position). They
   share the site's white header text; margin:0 so the only vertical rhythm is
   the tightened .cbv-page-header__content gap below. */
.cbv-page-header__credentials,
.cbv-page-header__position {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--white, #fff);
}

/* Tighten the line spacing for person pages only — the shared header uses a
   16px content gap, which reads too airy for these short stacked lines. */
.cbv-page-header--person .cbv-page-header__content {
	gap: 8px;
}

/* Single-person body — headshot aside + bio, matching the site's two-column
   content rhythm. The .cbv-page-header band (name h1, credentials, role
   description) is rendered by [cbv_person_header] and styled by .cbv-page-header. */
.cbv-person-single {
	align-items: flex-start;
}

/* Single-person headshot: same framed circular avatar as the card/modal. The
   post-featured-image figure is the frame (border + inner-ring ::before). */
.cbv-person-single__image {
	position: relative;
	margin: 0;
	border: 2px solid var(--wp--preset--color--contrast, #131032);
	border-radius: 50%;
	line-height: 0;
}

.cbv-person-single__image::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	pointer-events: none;
}

.cbv-person-single__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

/* Keep the headshot a sensible size and stop the column stretching it on very
   wide viewports. */
.cbv-person-single__aside {
	max-width: 360px;
}

@media (max-width: 781px) {
	/* Core stacks the columns; cap the headshot so it doesn't go full-width. */
	.cbv-person-single__aside {
		max-width: 280px;
	}
}

/* Board-member modal — shared #cbv-person-modal, opened by person-modal.js.
   Mirrors the video modal; body.cbv-modal-open (defined above) locks scroll. */
.cbv-person-modal[hidden] {
	display: none;
}

.cbv-person-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cbv-person-modal__backdrop {
	position: absolute;
	inset: 0;
	/* No scrim — the white dialog reads on its own shadow (per design feedback).
	   Still catches outside clicks to close. */
	background: transparent;
	border: 0;
}

.cbv-person-modal__dialog {
	position: relative;
	width: min(92vw, 720px);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--wp--preset--color--white, #fff);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--50, 2rem);
	box-shadow: 0 10px 40px rgba(19, 16, 50, 0.25);
}

.cbv-person-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--cbv-surface-navy, #221c58);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.cbv-person-modal__close:focus-visible {
	outline: 2px solid var(--cbv-link-hover, #4362cf);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Person detail (inside the modal, and reused for the preloaded markup). */
.cbv-person-detail__image {
	margin: 0 0 1.5rem;
}

.cbv-person-detail__image .cbv-avatar {
	width: 100%;
}

.cbv-person-detail__name {
	margin: 0 0 0.25rem;
	color: var(--cbv-surface-navy, #221c58);
}

.cbv-person-detail__credentials {
	font-weight: 400;
	color: var(--cbv-text-muted, #585e64);
}

.cbv-person-detail__position {
	margin: 0 0 0.25rem;
	font-weight: 700;
	color: var(--cbv-surface-navy, #221c58);
}

.cbv-person-detail__role {
	margin: 0 0 1rem;
	color: var(--cbv-text-muted, #585e64);
}

@media (min-width: 600px) {
	.cbv-person-detail {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 1.5rem;
		align-items: start;
	}

	.cbv-person-detail__image {
		margin-bottom: 0;
	}
}

/* Eyebrow login links: dashboard button for logged-in members. */
.cbv-topbar .cbv-login-links {
	align-items: center;
	display: flex;
	gap: 16px;
	margin: 0;
}

.cbv-topbar .cbv-login-links .cbv-dashboard-link.wp-element-button {
	background-color: var(--wp--preset--color--accent);
	color: #000000;
	font-size: var(--wp--preset--font-size--small);
	padding: 6px 16px;
}

.cbv-topbar .cbv-login-links .cbv-dashboard-link.wp-element-button:hover,
.cbv-topbar .cbv-login-links .cbv-dashboard-link.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}