/* ============================================================================
   LabX Event Theme — Shared stylesheet
   ----------------------------------------------------------------------------
   Block-first theme: token-driven styles come from theme.json; this file
   holds component CSS for block patterns and base utilities.

   Token architecture:
   - Color: var(--wp--preset--color--{brand-primary|brand-dark|brand-tint|
             brand-accent|brand-accent-soft|text-body|text-muted|
             surface-divider|surface-soft|surface-dark|text-on-dark|white})
   - Type:  var(--wp--preset--font-family--{font-display|font-body})
   - Size:  var(--wp--preset--font-size--{xs|sm|base|md|lg|xl|xxl})
   - Custom:var(--wp--custom--{section-padding-block|focus-ring-color|
             footer-link-hover|feature-icon-bg|feature-icon-radius|feature-icon-size})

   All values resolve per child theme's theme.json — no hex values here.
   Loaded on the front end and in the block editor via add_editor_style().
   ============================================================================ */

/* -----------------------------------------------------------
   CSS custom property shortcuts
   Derived from theme.json custom values so they're one level shorter
   to write throughout this file.
   ----------------------------------------------------------- */
:root {
	--focus-ring:           var(--wp--custom--focus-ring-color);
	--section-pad:          var(--wp--custom--section-padding-block, 4.5rem);
	--footer-link-hover:    var(--wp--custom--footer-link-hover);
	--feature-icon-bg:      var(--wp--custom--feature-icon-bg, transparent);
	--feature-icon-radius:  var(--wp--custom--feature-icon-radius, 0);
	--feature-icon-size:    var(--wp--custom--feature-icon-size, 40px);

	/* Semi-transparent overlays derived from brand tokens via color-mix() */
	--border-subtle:  color-mix(in srgb, var(--wp--preset--color--brand-dark) 12%, transparent);
	--border-medium:  color-mix(in srgb, var(--wp--preset--color--brand-dark) 22%, transparent);

	/* Single dial for every section's inner-container cap on narrow/mid
	   viewports — change this one value to loosen or tighten the gutter
	   sitewide instead of hunting down individual contentSize attributes. */
	--container-max-width: 90vw;
}

/* -----------------------------------------------------------
   Inner containers
   Every section pattern follows the same two-level shape: an outer
   full-width <section> (className on the pattern's own wrapper, e.g.
   event-signup) for background/border/padding, wrapping ONE of these two
   centered inner containers for the actual content width. Two tiers only —
   pick whichever a pattern's content already used before this convention
   (1440 for anything that previously used min(1440px, 90vw), 900 for
   anything narrower). Width is a literal set value, not min()/clamp() —
   max-width is a separate, independently-tunable ceiling via
   --container-max-width above, so either can change without touching the
   other. Headings/paragraphs inside should NOT carry their own width/
   contentSize — let the container do that job once. */
.container-1440,
.container-900 {
	margin-inline: auto;
	max-width: var(--container-max-width);
}
.container-1440 { width: 1440px; }
.container-900  { width: 900px; }

/* -----------------------------------------------------------
   Base
   ----------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Skip link — always present, off-screen until focused */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--brand-dark);
	color: #fff;
	padding: 0.75rem 1rem;
	text-decoration: none;
	z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* WCAG 1.4.11 focus indicator — 3px, brand-configurable color */
:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

.align-start {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.align-end {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Zero out auto block-gap between front-page sections — each section owns
   its own vertical padding. front-page.html also sets blockGap:0 on the wrapper. */
.event-front-page > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

main { margin-top: 0 !important; }

/* Reversible "comment out" for a block — block HTML files use HTML comments
   as the block delimiter syntax itself, so a real commented-out block isn't
   possible. Append this class alongside any existing className instead. */
.is-hidden { display: none; }

/* -----------------------------------------------------------
   Header
   ----------------------------------------------------------- */
/* .site-header-shell wraps the header bar AND the sub-nav bar below it, so
   both pin to the top together on scroll — avoids having to calculate/track
   the header's own height to offset a second sticky element. The sticky
   position lives on the <header> landmark itself (header.wp-block-
   template-part, the tagName WP renders parts/header.html's template-part
   block as — see templates/*.html), not on .site-header-shell: a sticky
   child sitting inside a plain, non-positioned <header> only pins the child
   div, not the landmark wrapping it. assets/js/event-subnav.js still reads
   .site-header-shell's height for --site-header-shell-h — that's unaffected
   since the div and its <header> parent are the same size (tight wrap, no
   independent padding/margin on <header>). */
header.wp-block-template-part {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--border-subtle);
	padding-block: 0.85rem !important;
}

.site-header__brand {
	gap: 2rem;
	min-width: 0; /* lets event-subnav-info's text truncate/wrap instead of overflowing the flex row */
}

/* Targets WP core's own guaranteed site-logo classes (.wp-block-site-logo,
   .custom-logo-link/.custom-logo), not our "site-logo" className — confirmed
   on this install (WP 7.0.1) that render_block_core_site_logo() silently
   drops both the block's custom className AND its own "is-default-size"
   class, so anything depending on either never matches. Worth a core bug
   report, but the theme shouldn't depend on it working.

   The extra .site-header__inner ancestor isn't just belt-and-suspenders:
   core still ships ".wp-block-site-logo.is-default-size img { width:120px;
   height:auto }" (0,2,1) — if a future WP point release starts applying
   that class again, ".site-header .site-header__inner .wp-block-site-logo
   img" at (0,3,1) keeps winning regardless of stylesheet load order. */
.site-header .site-header__inner .wp-block-site-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.site-header .site-header__inner .wp-block-site-logo .custom-logo-link {
	text-decoration: none;
}
.site-header .site-header__inner .wp-block-site-logo img {
	display: block;
	/* explicit height (per-site via theme.json custom.logoHeight) so SVGs
	   without intrinsic size render correctly */
	height: var(--wp--custom--logo-height, 65px);
	width: auto;
	max-width: 100%;
}
@media (max-width: 540px) {
	.site-header .site-header__inner .wp-block-site-logo img {
		height: var(--wp--custom--logo-height-mobile, 100px);
	}

	/* Nav and CTA are hidden below (site-header__nav, site-header__cta), so
	   .site-header__brand (logo + event-subnav-info) is the only thing left
	   in .site-header__inner — center it as a block, and center its own
	   text/meta row so the date/venue info reads symmetrically under the
	   logo instead of hugging the left edge. */
	.site-header__inner { justify-content: center; }
	.site-header__brand { justify-content: center; }
	.event-subnav__info { text-align: center; }
	.event-subnav__meta { justify-content: center; }
}

/* Primary nav — sits between the logo and the CTA button. Dark text since
   the header surface is a light, translucent (frosted-glass) background,
   unlike the sub-nav bar below it which sits on a dark brand surface. */
.site-header__nav {
	flex-shrink: 0;
}
.site-header__nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
.site-header__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--text-body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--brand-primary);
}
@media (max-width: 540px) {
	.site-header__nav { display: none; }
}

.site-header__cta .wp-block-button__link {
	padding: 0.6rem 1.1rem;
	font-size: var(--wp--preset--font-size--sm);
}
@media (max-width: 540px) { .site-header__cta { display: none; } }

/* -----------------------------------------------------------
   Event sub-nav bar
   Sits directly below the header, inside the same .site-header-shell so it
   stays sticky with the header on scroll (see parts/header.html). Two
   cells: the event-subnav-info dynamic block (date/venue/blurb) on the
   left, a core/navigation block (About/Agenda/Speakers/Sponsors/Register)
   on the right.

   Brand differentiation is token-driven, not a separate stylesheet per
   theme: background/icon/border colors come from brand-dark + brand-accent,
   and the display font from font-display, so LDC (navy/cyan, Exo) and LLS
   (navy/yellow, Jost) read as distinct without any per-theme CSS file.
   ----------------------------------------------------------- */
.event-subnav {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--brand-dark);
	border-bottom: 1px solid var(--wp--preset--color--brand-dark);
	border-top: 1px solid var(--wp--preset--color--brand-dark);
	margin: 0;
}

/* Both patterns/event-subnav-section.php (--section, the movable copy of the
   sitewide menu) and patterns/page-anchor-nav.php (--anchor, independent
   per-page anchor links) sit inline in page content rather than inside
   .site-header-shell, so they need their own sticky top offset — pushed
   below whatever height the header shell is currently rendering at (varies
   by breakpoint and by whether a page's sitewide sub-nav bar is shown), so
   the offset is measured at runtime by assets/js/event-subnav.js rather than
   hardcoded. z-index stays below .site-header-shell's 50 so the main header
   always wins if the two ever briefly overlap (e.g. overscroll bounce). */
:is(.event-subnav--section, .event-subnav--anchor) {
	position: -webkit-sticky;
	position: sticky;
	top: var(--site-header-shell-h, 0px);
	z-index: 40;
}

.event-subnav__row {
	gap: 1.5rem;
	padding-block: 0.65rem;
	justify-content: left;
	&:has(nav:empty) {
		display: none;
	}
}

.event-subnav__info {
	min-width: 0;
	flex-shrink: 1;
}

.event-subnav__eyebrow {
	margin: 0 0 0.15rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--brand-accent);
}

.event-subnav__headline {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--font-display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.3;
}

.event-subnav__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.25rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	opacity: 0.9;
}

.event-subnav__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	white-space: nowrap;
}

.event-subnav__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	stroke: var(--wp--preset--color--brand-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/* Nav — plain text links, white on brand-dark, accent underline on
   hover/focus/current. overlayMenu:"never" on the block (see
   parts/header.html) keeps this a flat list at every width; the mobile
   breakpoint below turns it into a horizontal scroll strip instead of a
   hamburger overlay.

   :is(.event-subnav__nav, .page-anchor-nav) covers both the sitewide sub-nav
   (patterns/event-subnav-section.php, parts/header.html — className matched
   by inc/seed-navigation.php to auto-wire the shared sitewide menu) and the
   independent per-page instance (patterns/page-anchor-nav.php). The two
   classNames must stay distinct: seed-navigation.php's slot_roles() matches
   on the substring "event-subnav__nav", so giving page-anchor-nav that
   substring would silently swap its links for the sitewide menu. */
:is(.event-subnav__nav, .page-anchor-nav) {
	flex-shrink: 0;
}
:is(.event-subnav__nav, .page-anchor-nav) .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	/* flex-wrap: nowrap; */
}
:is(.event-subnav__nav, .page-anchor-nav) .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	padding-block: 0.35rem;
	color: #fff;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	text-transform: uppercase;
}
:is(.event-subnav__nav, .page-anchor-nav) .wp-block-navigation-item__content:hover,
:is(.event-subnav__nav, .page-anchor-nav) .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-underline-position: under;
}
:is(.event-subnav__nav, .page-anchor-nav) .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--brand-accent);
	border-bottom-color: var(--wp--preset--color--brand-accent);
}

@media (max-width: 640px) {
	.event-subnav__row { gap: 0.75rem; padding-block: 0.65rem; flex-wrap: wrap; align-items: center; justify-content: center; }
	.event-subnav__headline { font-size: var(--wp--preset--font-size--sm); }
	.event-subnav__info { text-align: center; }
	.event-subnav__meta { justify-content: center; }

	/* Horizontal scroll strip — full-width row, swipeable, no hamburger. */
	:is(.event-subnav__nav, .page-anchor-nav) { width: 100%; flex-shrink: 1; }
	:is(.event-subnav__nav, .page-anchor-nav) .wp-block-navigation__container {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		gap: 1.25rem;
		padding-block: 0.15rem 0.35rem;
		scrollbar-width: thin;
	}
}

/* -----------------------------------------------------------
   Section base — shared vertical padding
   ----------------------------------------------------------- */
.event-about,
.event-awards,
.event-countdown,
.event-contact,
.event-recap,
.event-signup,
.event-value-prop,
.event-checklist-section,
.event-chip-section,
.event-topics-section,
.event-topic-panels-section,
.event-steps-section,
.event-general,
.event-hero,
.event-questions-band,
.event-cta-banner {
	padding-block: var(--section-pad);
	margin-top: 0 !important;
}

.event-cta-banner { padding-block: 5rem; }

/* Section background colors */
.event-countdown { background-color: var(--wp--preset--color--brand-tint); }
.event-awards    { background-color: var(--wp--preset--color--brand-accent-soft); }
.event-recap     { background-color: var(--wp--preset--color--surface-soft); }
.event-contact   { background-color: var(--wp--preset--color--surface-soft); }

/* -----------------------------------------------------------
   Hero — image or video background with overlay
   ----------------------------------------------------------- */
.event-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--brand-dark);
}
.event-hero .wp-block-cover__image-background,
.event-hero .wp-block-cover__video-background {
	object-fit: cover;
	object-position: center;
}

/* Video hero variant — still-image fallback while buffering, on reduced-motion,
   or when autoplay is blocked. */
.event-hero--video {
	background-size: cover;
	background-position: center;
}
@media (prefers-reduced-motion: reduce) {
	.event-hero--video .wp-block-cover__video-background { display: none; }
}
@media (max-width: 600px) {
	.event-hero--video .wp-block-cover__video-background { display: none; }
}

/* Photo overlay — a translucent still image layered on top of the video
   (in addition to the flat color dim), matching the treatment used on
   labmanager.com hero sections. Set the background-image inline per
   instance; this class only supplies position/sizing/opacity. */
.event-hero__photo-overlay {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.75;
	pointer-events: none;
	background-image: url(/wp-content/themes/lls-2027/assets/img/hero-bg.jpg);
}

.event-hero__inner { position: relative; z-index: 1; }

.event-hero__eyebrow {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--brand-accent);
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 0.75rem !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.event-hero__title {
	font-family: var(--wp--preset--font-family--font-display);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: #fff;
	margin-bottom: 1.25rem;
	text-wrap: balance;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.event-hero__title strong {
	font-weight: 700;
	color: var(--wp--preset--color--brand-accent);
}

.event-hero__subtitle,
.event-hero__tagline {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	color: #fff;
	margin-bottom: 2rem !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.event-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-bottom: 2rem;
	color: #fff;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
}
.event-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.event-hero__meta-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	stroke: var(--wp--preset--color--brand-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/* Button style variants — reusable theme-wide; assume a light background.
   Dark sections (hero, cta-banner, event-general--dark) override below with
   higher-specificity, context-scoped selectors. */
.is-style-primary .wp-block-button__link {
	background: var(--wp--preset--color--brand-primary);
	color: #fff;
}
.is-style-primary .wp-block-button__link:hover,
.is-style-primary .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--brand-dark);
}

.is-style-secondary .wp-block-button__link {
	background: var(--wp--preset--color--brand-dark);
	color: #fff;
}
.is-style-secondary .wp-block-button__link:hover,
.is-style-secondary .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--brand-primary);
}

.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--brand-primary);
	/* inset box-shadow instead of border — a real border adds to the
	   rendered box size, making ghost taller/wider than the other styles */
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand-primary);
}
.is-style-ghost .wp-block-button__link:hover,
.is-style-ghost .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--brand-primary);
	color: #fff;
}

/* Dark-background counterpart to is-style-ghost above — that one assumes a
   light surface (brand-primary border/text reads fine on white, but is
   low-contrast on brand-dark or a dark grey surface). Apply is-style-ghost-
   dark instead on any dark section (event-hero, event-cta-banner,
   event-signup, event-general--dark, or a future one) — it isn't scoped to
   a specific section's className the way the old hero-only override below
   is, so it drops onto a button anywhere a dark background is in play
   without needing a new per-section rule each time.

   text-on-dark is the palette's dedicated "light text for a dark surface"
   token (both LDC and LLS currently define it as white) rather than a
   hardcoded hex — picking up whatever a child theme defines there. Checked
   against both dark background tokens this needs to work on: white text on
   brand-dark (LDC navy) and on surface-dark (grey #414042 on LLS, navy on
   LDC) both land well past the 4.5:1 AA floor. Hover fills with that same
   color and flips text to brand-dark, mirroring the light ghost's own
   invert-on-hover behavior — brand-dark on a near-white fill is the same
   safely-AA pairing already used elsewhere (is-style-accent, above). */
.is-style-ghost-dark .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--text-on-dark);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--text-on-dark) 60%, transparent);
}
.is-style-ghost-dark .wp-block-button__link:hover,
.is-style-ghost-dark .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--text-on-dark);
	color: var(--wp--preset--color--brand-dark);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--text-on-dark);
}

/* brand-accent is decorative-only as a text color (fails AA on white — see
   CLAUDE.md), but works fine here as a background: brand-dark text on top
   measures 6.1:1 (LDC) / 6.4:1 (LLS), both well past the 4.5:1 AA floor.
   White text on brand-accent would only hit ~2:1, so don't swap it. */
.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--brand-dark);
	box-shadow: inset 0 0 0 2px currentColor;
}
.is-style-accent .wp-block-button__link:hover,
.is-style-accent .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--brand-dark);
	color: #fff;
}

/* Safety net: buttons/links carrying a raw palette background color via
   WP's own .has-*-background-color classes — an editor picking a palette
   swatch directly in a block's Color panel, independent of (and not
   mutually exclusive with) the four hand-tuned is-style-* variants above,
   which get their background from our own CSS rather than this mechanism.
   This is what makes new palette colors (settings.color.palette in
   theme.json) safe to use on a button/link the moment they're added — no
   matching CSS to remember to hand-write. Each has-* rule passes the *same*
   preset color WP already used for the background, so background and text
   can't drift out of sync. No separate :hover rule needed — these classes
   don't change background on hover (unlike the is-style-* variants), so the
   text stays valid in both states.

   brand-accent is handled separately, unconditionally, with the exact
   pairing already verified above (is-style-accent comment) rather than left
   to the heuristic below — it's a bright, mid-tone color, and MDN's own
   contrast-color() docs flag mid-tones as a case where WCAG AA can still
   land marginal either way. An editor could apply brand-accent as a raw
   background here without ever touching is-style-accent, so it needs its
   own rule rather than relying on that variant to cover it. */
.has-brand-accent-background-color {
	color: var(--wp--preset--color--brand-dark);
}

:where(.wp-element-button, .wp-block-button__link, a).has-brand-primary-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-brand-dark-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-brand-tint-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-brand-accent-soft-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-text-body-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-text-muted-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-surface-divider-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-surface-soft-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-surface-dark-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-text-on-dark-background-color,
:where(.wp-element-button, .wp-block-button__link, a).has-white-background-color {
	color: #fff;
}
/* contrast-color() is Baseline "Newly available" (Apr 2026) — @supports
   keeps the plain white fallback above for browsers that predate it. */
@supports (color: contrast-color(black)) {
	.has-brand-primary-background-color { color: contrast-color(var(--wp--preset--color--brand-primary)); }
	.has-brand-dark-background-color { color: contrast-color(var(--wp--preset--color--brand-dark)); }
	.has-brand-tint-background-color { color: contrast-color(var(--wp--preset--color--brand-tint)); }
	.has-brand-accent-soft-background-color { color: contrast-color(var(--wp--preset--color--brand-accent-soft)); }
	.has-text-body-background-color { color: contrast-color(var(--wp--preset--color--text-body)); }
	.has-text-muted-background-color { color: contrast-color(var(--wp--preset--color--text-muted)); }
	.has-surface-divider-background-color { color: contrast-color(var(--wp--preset--color--surface-divider)); }
	.has-surface-soft-background-color { color: contrast-color(var(--wp--preset--color--surface-soft)); }
	.has-surface-dark-background-color { color: contrast-color(var(--wp--preset--color--surface-dark)); }
	.has-text-on-dark-background-color { color: contrast-color(var(--wp--preset--color--text-on-dark)); }
	.has-white-background-color { color: contrast-color(var(--wp--preset--color--white)); }
}

/* Button icons — composable with any is-style-* variant above via className
   combos, e.g. "is-style-primary has-icon icon-signup" or
   "is-style-ghost has-icon icon-next icon-end". Each icon is its own
   self-hosted SVG file (assets/icons/icon-*.svg) used as a CSS mask and
   painted with background-color so it follows the button's own currentColor
   — no separate icon color to keep in sync across styles/hover states.
   Default position is before the label; add icon-end to place it after. */
.has-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.has-icon .wp-block-button__link::before {
	content: "";
	order: -1;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.has-icon.icon-end .wp-block-button__link::before {
	order: 1;
}

/* Optical balance: an icon + gap on the left reads as more whitespace than
   the same padding on the right, so icon-before buttons get a bit of extra
   trailing space. A fixed-width flex spacer (not a padding-right override)
   so it adds on top of whatever padding a given context already sets,
   instead of needing to duplicate/guess that value here. */
.has-icon:not(.icon-end) .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 0;
}

.icon-signup .wp-block-button__link::before {
	-webkit-mask-image: url("../icons/icon-signup.svg");
	mask-image: url("../icons/icon-signup.svg");
}
.icon-view .wp-block-button__link::before {
	-webkit-mask-image: url("../icons/icon-view.svg");
	mask-image: url("../icons/icon-view.svg");
}
.icon-next .wp-block-button__link::before {
	-webkit-mask-image: url("../icons/icon-next.svg");
	mask-image: url("../icons/icon-next.svg");
}
.icon-date .wp-block-button__link::before {
	-webkit-mask-image: url("../icons/icon-date.svg");
	mask-image: url("../icons/icon-date.svg");
}
.icon-speakers .wp-block-button__link::before {
	-webkit-mask-image: url("../icons/icon-speakers.svg");
	mask-image: url("../icons/icon-speakers.svg");
}
.icon-video .wp-block-button__link::before {
	-webkit-mask-image: url("../icons/icon-video.svg");
	mask-image: url("../icons/icon-video.svg");
}

/* Hero button styles (dark background — overrides the generic variants above) */
.event-hero .is-style-primary .wp-block-button__link {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--brand-dark);
}
.event-hero .is-style-primary .wp-block-button__link:hover,
.event-hero .is-style-primary .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--brand-dark);
}

.event-hero .is-style-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.event-hero .is-style-ghost .wp-block-button__link:hover,
.event-hero .is-style-ghost .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--brand-dark);
	box-shadow: inset 0 0 0 2px #fff;
}

/* Focus ring override inside dark sections */
.event-hero :focus-visible,
.event-signup :focus-visible,
.event-cta-banner :focus-visible,
.event-general--dark :focus-visible,
.event-subnav :focus-visible {
	outline-color: var(--wp--preset--color--brand-accent);
}

/* -----------------------------------------------------------
   Countdown
   ----------------------------------------------------------- */
.event-countdown__eyebrow {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
	margin-bottom: 1rem !important;
}
.event-countdown__title {
	text-align: center;
	font-size: var(--wp--preset--font-size--lg);
	margin-bottom: 2rem !important;
}
.event-countdown__timer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	max-width: 680px;
	margin-inline: auto;
}
.event-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	padding: 1.5rem 1rem;
	box-shadow: 0 2px 0 var(--border-subtle);
}
.event-countdown__num {
	display: block;
	font-family: var(--wp--preset--font-family--font-display);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--brand-dark);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.event-countdown__label {
	display: block;
	margin-top: 0.4rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--text-body);
}
@media (max-width: 480px) {
	.event-countdown__timer { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------
   About / Value Prop
   ----------------------------------------------------------- */
.event-about__eyebrow,
.event-value-prop__eyebrow {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 0.5rem !important;
}

/* Feature cards */
.event-feature {
	padding: 1.5rem;
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	background: #fff;
}
.event-feature h3 { margin-bottom: 0.4rem !important; }

.event-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--feature-icon-size);
	height: var(--feature-icon-size);
	background: var(--feature-icon-bg);
	border-radius: var(--feature-icon-radius);
	margin-bottom: 1rem;
}
.event-feature__icon svg {
	width: 60%;
	height: 60%;
	stroke: var(--wp--preset--color--brand-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}
/* When icon has a background (e.g. LLS circle style), inherit the accent
   color as the stroke to contrast against the dark background. */
.event-feature__icon:not([style*="transparent"]) svg {
	color: var(--wp--preset--color--brand-accent);
	stroke: currentColor;
}

/* -----------------------------------------------------------
   Call for Speakers component library
   Shared by the checklist, chip-list, topics-grid, topic-panels,
   caution-list, credential-callout, note-callout, and step-timeline
   patterns. Token-driven so LDC and LLS render correctly from the
   same markup — only theme.json values differ between sites.
   ----------------------------------------------------------- */
.event-eyebrow {
	display: block; /* was inline-block: auto margins don't center inline-block boxes, which left this flush-left once sections stopped being ambient-clipped */
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 0.5rem !important;
}

/* Checklist */
.event-checklist {
	list-style: none;
	margin: 1.5rem auto 0 !important; /* auto left/right preserves WP's content-width centering when this section is wider than its contentSize */
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem 2rem;
}
.event-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
}
.event-checklist svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 0.15rem;
	stroke: var(--wp--preset--color--brand-primary);
	stroke-width: 2.5;
	fill: none;
}
@media (max-width: 720px) { .event-checklist { grid-template-columns: 1fr; } }

/* Chip / tag list */
.event-chip-list {
	list-style: none;
	margin: 1.5rem auto 0 !important; /* auto left/right preserves WP's content-width centering when this section is wider than its contentSize */
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.event-chip-list li {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--border-medium);
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.5rem 1rem;
	border-radius: 999px;
	margin: 0 !important;
}

/* Topic / feature card grid */
.event-topics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
@media (max-width: 1024px) { .event-topics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .event-topics-grid { grid-template-columns: 1fr; } }
.event-topic-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
}
.event-topic-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--feature-icon-size);
	height: var(--feature-icon-size);
	background: var(--feature-icon-bg);
	border-radius: var(--feature-icon-radius);
	margin-bottom: 1rem;
}
.event-topic-card__icon svg {
	width: 60%;
	height: 60%;
	stroke: var(--wp--preset--color--brand-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}
.event-topic-card__icon:not([style*="transparent"]) svg {
	color: var(--wp--preset--color--brand-accent);
	stroke: currentColor;
}
.event-topic-card h3 { font-size: var(--wp--preset--font-size--md); margin-bottom: 0.4rem !important; }
.event-topic-card p  { font-size: var(--wp--preset--font-size--sm); margin-bottom: 0; }

/* Grouped topic panels */
.event-topic-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 2.5rem;
}
@media (max-width: 780px) { .event-topic-panels { grid-template-columns: 1fr; } }
.event-topic-panel {
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	padding: 1.75rem 2rem;
	background: var(--wp--preset--color--white);
}
.event-topic-panel h3 {
	font-size: var(--wp--preset--font-size--md);
	margin-bottom: 0.9rem !important;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--wp--preset--color--brand-accent-soft);
}
.event-topic-panel ul { margin: 0; padding-left: 1.2rem; }
.event-topic-panel li { margin-bottom: 0.45rem; }

/* Pull quote (used inside checklist/copy sections for a pulled-out sentence) */
.event-pull-quote {
	border-left: 4px solid var(--wp--preset--color--brand-accent);
	padding: 0.25rem 0 0.25rem 1.5rem;
	margin: 2rem 0 0;
	max-width: 60ch;
}
.event-pull-quote p {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--brand-dark);
	font-style: normal;
	margin: 0;
}

/* Caution / discouraged list panel */
.event-caution-panel {
	margin-top: 2rem;
	border: 1px solid var(--border-medium);
	border-radius: 8px;
	padding: 1.75rem 2rem;
	background: var(--wp--preset--color--surface-soft);
}
.event-caution-panel h3 { font-size: var(--wp--preset--font-size--md); margin-bottom: 0.9rem; }
.event-caution-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem 2rem;
}
.event-caution-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--wp--preset--color--text-body);
	font-weight: 600;
}
.event-caution-list svg {
	width: 18px;
	height: 18px;
	margin-top: 0.2rem;
	flex-shrink: 0;
	stroke: var(--wp--preset--color--text-muted);
	stroke-width: 2.5;
	fill: none;
}
@media (max-width: 720px) { .event-caution-list { grid-template-columns: 1fr; } }

/* Credential callout (icon badge) */
.event-credential-callout {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--brand-accent);
	border-radius: 12px;
	padding: 2rem;
	margin-top: 2rem;
}
.event-credential-callout__badge {
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.event-credential-callout__badge svg {
	width: 44px;
	height: 44px;
	stroke: var(--wp--preset--color--brand-dark);
	stroke-width: 1.6;
	fill: none;
}
.event-credential-callout__body { flex: 1; min-width: 240px; }
.event-credential-callout__body h3 { margin-bottom: 0.35rem; }
.event-credential-callout__body p  { margin-bottom: 0; font-size: var(--wp--preset--font-size--sm); }

/* Note / important callout (no icon badge) */
.event-note-callout {
	margin-top: 2rem;
	border: 2px solid var(--wp--preset--color--brand-accent);
	border-radius: 8px;
	padding: 1.5rem 1.75rem;
	background: var(--wp--preset--color--brand-accent-soft);
}
.event-note-callout p {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--sm);
}
.event-note-callout strong {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--xs);
	display: block;
	margin-bottom: 0.35rem;
}

/* Numbered step process */
.event-steps {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
@media (max-width: 860px) { .event-steps { grid-template-columns: 1fr; } }
.event-step {
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	padding: 1.75rem 1.5rem 1.5rem;
}
.event-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-primary);
	color: #fff;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 1rem;
}
.event-step h3 { font-size: var(--wp--preset--font-size--base); margin-bottom: 0.35rem !important; }
.event-step p  { font-size: var(--wp--preset--font-size--sm); margin-bottom: 0; }

/* -----------------------------------------------------------
   Awards
   ----------------------------------------------------------- */
.event-awards__eyebrow {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--sm);
	width: max-content;
	max-width: 100%;
	margin: 0 auto 0.5rem !important;
}
.event-awards__title   { text-align: center; margin-bottom: 1.5rem; }
.event-awards__lead {
	max-width: 90vw;
	width: 60ch;
	text-align: center;
	font-size: var(--wp--preset--font-size--md);
	margin-inline: auto;
}
.event-awards__status {
	max-width: 56ch;
	background: #fff;
	border: 2px solid var(--wp--preset--color--brand-accent);
	border-radius: 8px;
	padding: 1rem 1.5rem;
	margin: 1.5rem auto;
	text-align: center;
}
.event-awards__status-eyebrow {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0 0 0.25rem;
}
.event-awards__status-text {
	color: var(--wp--preset--color--text-body);
	font-size: var(--wp--preset--font-size--base);
	margin: 0;
}
.event-awards__status-text strong {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
}
.event-awards__note {
	width: 62ch;
	max-width: 90vw;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	margin-inline: auto;
}
.event-awards a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.event-awards a:hover,
.event-awards a:focus-visible { color: var(--wp--preset--color--brand-primary); }

/* -----------------------------------------------------------
   CTA / Highlight Banner — full-width callout
   ----------------------------------------------------------- */
.event-cta-banner {
	position: relative;
	color: #fff;
	text-align: center;
	overflow: hidden;
	background-color: var(--wp--preset--color--brand-dark);
	background-size: cover;
	background-position: center;
}
.event-cta-banner__inner { position: relative; z-index: 1; }
.event-cta-banner__eyebrow {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--brand-accent);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
	margin-bottom: 0.75rem;
}
.event-cta-banner__title {
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-align: center;
	color: #fff;
	margin: 0 0 1rem;
	text-wrap: balance;
}
.event-cta-banner__body {
	width: 56ch;
	max-width: 90vw;
	text-align: center;
	color: #fff;
	font-size: var(--wp--preset--font-size--md);
	margin: 0 auto 1.75rem;
}
.event-cta-banner .is-style-primary .wp-block-button__link {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--brand-dark);
}
.event-cta-banner .is-style-primary .wp-block-button__link:hover,
.event-cta-banner .is-style-primary .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--brand-dark);
}

/* -----------------------------------------------------------
   Past-event Recap teaser
   ----------------------------------------------------------- */
.event-recap__eyebrow {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 0.5rem;
}
.event-recap__image {
	background: linear-gradient(135deg,
		var(--wp--preset--color--brand-dark) 0%,
		color-mix(in srgb, var(--wp--preset--color--brand-dark) 70%, #000) 100%);
	border-radius: 8px;
	aspect-ratio: 4 / 3;
	width: 100%;
	margin: 0;
	overflow: hidden;
}
.event-recap__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.event-recap__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--surface-divider);
}
.event-recap__stat { flex: 1 1 0; min-width: 0; }
.event-recap__stat-num {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--brand-dark);
	line-height: 1;
}
.event-recap__stat-label {
	display: block;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-body);
	margin-top: 0.4rem;
}

/* -----------------------------------------------------------
   General Content Blocks
   Shared by the eight labx-general patterns (image-left, image-right,
   left-aligned copy, centered copy — each in a light and dark variant).
   .event-general handles shared section padding (added to the padding-block
   list above). Layout comes from core/columns; this file only supplies the
   image treatment and the dark color overrides.
   ----------------------------------------------------------- */
.event-general__image {
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.event-general__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Dark variant — mirrors .event-cta-banner / .event-signup: brand-dark
   background with white body text, accent eyebrow, and a button swapped
   to accent-bg/dark-text so it doesn't disappear against the dark surface
   (default button color only carries ~1.2–2.1:1 contrast on brand-dark). */
.event-general--dark {
	background-color: var(--wp--preset--color--brand-dark);
	color: #fff;
}
.event-general--dark h2,
.event-general--dark h3,
.event-general--dark h4 {
	color: #fff;
}
.event-general--dark .event-eyebrow {
	color: var(--wp--preset--color--brand-accent);
}
/* Scoped to prose, not a universal `a` override — see the anchor-as-button
   hover specificity note elsewhere in this file. */
.event-general--dark p a,
.event-general--dark li a {
	color: var(--wp--preset--color--brand-accent);
}
.event-general--dark p a:hover,
.event-general--dark p a:focus-visible,
.event-general--dark li a:hover,
.event-general--dark li a:focus-visible {
	color: #fff;
}
.event-general--dark .is-style-primary .wp-block-button__link {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--brand-dark);
}
.event-general--dark .is-style-primary .wp-block-button__link:hover,
.event-general--dark .is-style-primary .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--brand-dark);
}

/* -----------------------------------------------------------
   Signup / HubSpot embed
   ----------------------------------------------------------- */
.event-signup {
	background-color: var(--wp--preset--color--brand-dark);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.event-signup::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 90%,
			color-mix(in srgb, var(--wp--preset--color--brand-accent) 25%, transparent), transparent 50%),
		radial-gradient(circle at 80% 10%,
			color-mix(in srgb, var(--wp--preset--color--brand-primary) 40%, transparent), transparent 50%);
	pointer-events: none;
	z-index: 0;
}
.event-signup > * { position: relative; z-index: 1; }

.event-signup h2 { color: #fff; }

.event-signup__eyebrow {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--brand-accent);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

/* Bullet list variant (LDC-style) */
.event-signup__list {
	list-style: none;
	padding: 0;
	margin: 1.5rem auto 0 !important;
}
.event-signup__list li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}
.event-signup__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--brand-accent);
	border-radius: 4px;
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--brand-dark);
}

.event-form-card {
	background: #fff;
	color: var(--wp--preset--color--text-body);
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4);
}

.event-hubspot-mount:not(:empty) + .event-hubspot-placeholder { display: none; }
.event-hubspot-placeholder {
	margin-top: 1.5rem;
	padding: 2rem 1.5rem;
	border: 2px dashed var(--wp--preset--color--surface-divider);
	border-radius: 8px;
	text-align: center;
	color: var(--wp--preset--color--text-body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	background: repeating-linear-gradient(
		45deg, transparent 0 12px,
		color-mix(in srgb, var(--wp--preset--color--brand-primary) 4%, transparent) 12px 14px);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.event-hubspot-placeholder[hidden] { display: none; }
.event-hubspot-placeholder strong {
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--base);
}
.event-hubspot-placeholder a { color: var(--wp--preset--color--brand-primary); }

.event-form-card__legal {
	text-align: center;
	font-size: var(--wp--preset--font-size--xs);
	margin-top: 1rem !important;
	color: var(--wp--preset--color--text-muted);
}
.event-form-card__legal a { color: var(--wp--preset--color--brand-accent); }

/* HubSpot injected form — inherit our type and color tokens */
.hs-form { font-family: var(--wp--preset--font-family--font-body); }

.hs-form fieldset.form-columns-1 { width: 100% !important; max-width: 100%; }
.hs-form fieldset.form-columns-2 { display: flex; gap: 1rem; max-width: 100%; }
.hs-form-field { max-width: 90vw; }

.hs-form label {
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	font-size: var(--wp--preset--font-size--sm);
	display: block;
	margin-bottom: 0.35rem;
}
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form select,
.hs-form textarea {
	width: 92%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--border-medium);
	border-radius: 6px;
	font: inherit;
	color: var(--wp--preset--color--text-body);
	background: #fff;
}
.hs-form input:focus-visible,
.hs-form select:focus-visible,
.hs-form textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--brand-dark);
}
.hs-form .hs-form-field { margin-bottom: 1rem; }
.hs-form .inputs-list   { padding: 0; margin: 0; list-style-type: none; }
.hs-form label.hs-form-booleancheckbox-display { display: flex; gap: 1rem; }
.hs-form .hs-error-msgs,
.hs-form .hs-error-msg {
	color: #b00020;
	font-size: var(--wp--preset--font-size--xs);
	margin-top: 0.25rem;
}
.hs-form .hs-submit  { margin-top: 1rem; }
.hs-form .hs-button {
	background: var(--wp--preset--color--brand-primary);
	color: #fff;
	border: 0;
	padding: 0.85rem 1.4rem;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--font-body);
	font-weight: 700;
	cursor: pointer;
}
.hs-form .hs-button:hover,
.hs-form .hs-button:focus-visible { background: var(--wp--preset--color--brand-dark); }
.submitted-message {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
}

/* -----------------------------------------------------------
   Contact
   ----------------------------------------------------------- */
.event-contact__detail {
	margin: 0;
	font-style: normal;
	line-height: 1.7;
}
.event-contact__detail dt {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--brand-primary);
	margin-top: 1.5rem;
}
.event-contact__detail dt:first-of-type { margin-top: 0; }
.event-contact__detail dd { margin: 0.25rem 0 0; }

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
footer {
	margin: 0!important;
}
.site-footer {
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--text-on-dark);
	border-top: 1px solid var(--wp--preset--color--surface-divider);
	padding-block: 3rem !important;
	font-size: var(--wp--preset--font-size--sm);
}
.site-footer__grid { gap: 2rem; width: 100%; }

.site-logo--footer img { height: 50px; width: auto; max-width: 100%; }

.footer-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-on-dark);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--text-on-dark) 40%, transparent);
}
.footer-nav .wp-block-navigation-item__content:hover,
.footer-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--footer-link-hover);
	text-decoration-color: var(--footer-link-hover);
}
.copyright {
	font-size: var(--wp--preset--font-size--xs);
	color: color-mix(in srgb, var(--wp--preset--color--text-on-dark) 75%, transparent);
}

/* -----------------------------------------------------------
   Editor — mirror front end inside the block editor
   ----------------------------------------------------------- */
.editor-styles-wrapper .event-hero {
	background-color: var(--wp--preset--color--brand-dark);
	color: #fff;
}
.editor-styles-wrapper .event-signup { background-color: var(--wp--preset--color--brand-dark); }

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 720px) {
	.event-hero__meta    { gap: 0.75rem 1.5rem; }
	.event-hero__title   { font-size: clamp(2rem, 9vw, 3rem); }
	.event-recap__grid   { gap: 2rem; }
	.event-general__grid { gap: 2rem; }
}