/*
Theme Name: Santa Fe Railyard Theme
Theme URI: https://railyardsantafe.com/
Author: Mike Bowen
Author URI: https://mikebowen.me/
Description: This base theme is used to build client websites.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.4.26
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ============================================================================
   Ported live (Genesis/Revolution Pro) content styles — sfry-theme
   ----------------------------------------------------------------------------
   Decorative rules that theme.json tokens cannot express, lifted from the live
   railyardsantafe.com CSS and rescoped to FSE block markup. Tokens (fonts,
   colors, sizes, widths, button) live in theme.json; this file is ONLY for the
   hand-written CSS layer. PENDING Mike's coding-style review (CLAUDE.md).

   NOTE (mike-6-15): Mike is dropping in an SCSS system (plain CSS, auto-bundles/attaches,
   no Tailwind). Do NOT over-structure this file now — interim hand-CSS is fine and will be
   migrated into that system when it lands. See docs/decisions.md (2026-06-17).
   ========================================================================== */

html {
	scroll-behavior: smooth; /* must be on html — browsers ignore it on body for page scroll */
}

main {
	overflow-x: hidden;
}

.collapse-on-mobile {
	@media (max-width: 781px) {
		flex-direction: column !important;
	}
}

.collapse-on-mobile > div {
	@media (max-width: 781px) {
		width: 100% !important;
	}
}

.wp-block-group.alignfull.has-background {
	@media (max-width: 781px) {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
}

@media (max-width: 781px) {
	.has-global-padding {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* Content links — gray underline only (NO highlight/hover-sweep).
   The live Customizer CSS overrides Genesis's default with `.entry-content a { box-shadow:none }`,
   leaving just the `border-bottom:1px solid #ddd`. Scoped to paragraph links so it skips nav,
   social icons, and buttons. */
p a:not( .wp-element-button ) {
	border-bottom: 1px solid #ddd;
}

/* Book-your-event terms checkbox — the label is a link to the policies PDF.
   Same gray underline as content links; theme.json strips text-decoration on anchors. */
.gf-tos-checkbox .gform-field-label--type-inline a {
	border-bottom: 1px solid #ddd;
	text-decoration: none;
}

/* Buttons — subtle inset highlight on hover/focus.
   Live: `.wp-block-button__link:hover { box-shadow:inset 0 0 200px rgba(230,230,230,.25) }` */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	box-shadow: inset 0 0 200px rgba( 230, 230, 230, 0.25 );
}

.template--page .entry-header {
	text-align: center;
}

/* Full-width bands — vertical padding defaults (mike-6-15: section spacing stays OUT of
   pattern markup; these are unprefixed defaults, no `!important`, so the editor Dimensions
   panel still wins). Values are live's RESOLVED px (see docs/capture-workflow.md) — not a
   token guess, and not the live `%` (percentage padding is relative to width, and these bands
   are full-bleed so `%` would over-pad on wide screens). Margin is left to the editor/blockGap. */

/* Social connect bar — matched to live's ~187px band height (its single content row sits in a
   tall band; live pads + spacer-paragraphs get it there, we just use padding). */
.sai-social-connect-bar {
	padding-top: 75px;
	padding-bottom: 75px;
}
/* On mobile the columns stack; center the hashtag (desktop right-aligns it toward the icons). */
@media (max-width: 781px) {
	.sai-social-connect-bar .has-text-align-right { text-align: center; }
}

/* Visitors band (Site 2) — captured from live: ~287px tall, content TOP-anchored (live floats the
   logo right at the top, "Visitors" at top-left, empty space fills the bottom — NOT centered).
   Top padding small (content near the top like live), most of the height is open space below. */
.sfrcc-visitors-band {
	padding-top: 28px;
	padding-bottom: 70px;
}
/* Top-anchor both columns regardless of their block alignment class (live is top, not centered). */
.sfrcc-visitors-band .wp-block-columns .wp-block-column {
	align-self: flex-start;
}
/* On mobile the columns stack; live shows the logo ABOVE "Visitors", so reverse the desktop order. */
@media (max-width: 781px) {
	.sfrcc-visitors-band .wp-block-columns { flex-direction: column-reverse; }
}

/* ============================================================================
   Footer (sai/footer cover) — matched to LIVE computed styles.
   ----------------------------------------------------------------------------
   Keyed off the Mailchimp embed (`#mc_embed_signup`), which is unique to this
   pattern. This deliberately avoids depending on a class we add to the markup
   (a placed pattern is a frozen copy — class edits don't reach it without a
   re-insert), and the extra specificity from the `:has()` cover selector beats
   both the inline <style> the embed ships and Mailchimp's classic stylesheet,
   which both load *after* this file in the page body.
   ========================================================================== */

/* Vertical padding default — NOT baked into the cover's block attributes (mike-6-15:
   section spacing stays out of pattern markup so the editor's Dimensions panel owns it).
   The footer is a template part no page author places, so a plain unprefixed default is the
   sanctioned way to keep its spacing; no `!important`, so a Site-Editor Dimensions edit wins. */
.sai-footer {
	padding-top: var( --wp--preset--spacing--large );
	padding-bottom: var( --wp--preset--spacing--large );
}

/* Center all footer content (headings, contact text, copyright). */
.wp-block-cover:has( #mc_embed_signup ) .wp-block-cover__inner-container {
	text-align: center;
}

/* Footer body text — 16px chrome size (live), not the 18px content default; live line-height
   is a fixed 30px (captured), not the airy global content default. */
.wp-block-cover:has( #mc_embed_signup ) .wp-block-column p {
	font-size: 16px;
	line-height: 30px;
}

/* Footer links stay plain — opt out of the global content-link underline. */
.wp-block-cover:has( #mc_embed_signup ) p a {
	border-bottom: none;
}

/* CONTACT / INFORMATION headings — live: Noto Sans 22px 700 uppercase, 4px amber underline.
   h2 (not live's h4) so the footer doesn't skip heading levels after a page's h2s (WCAG 1.3.1). */
.wp-block-cover:has( #mc_embed_signup ) .wp-block-column h2 {
	display: inline-block;
	font-family: var( --wp--preset--font-family--primary );
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 4px solid var( --wp--preset--color--amber );
	padding-bottom: 1rem;
	margin-bottom: 10px;
}

/* Copyright — live: Poppins 12px uppercase, +0.5px. The `!important` beats WordPress's
   `.has-small-font-size` utility (which ships `!important`). margin-top drops it toward
   the bottom of the cover, like live. */
.wp-block-cover:has( #mc_embed_signup ) p.has-small-font-size {
	margin-top: 3rem;
	font-family: Poppins, sans-serif;
	font-size: 12px !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Mailchimp embed — transparent bg, centered, 300px wide (the embed's own default, like live). */
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup {
	width: 300px;
	max-width: 100%;
	margin: 0 auto;
	background: transparent;
}

/* Neutralize Mailchimp's default backgrounds/borders — the `.helper_text` background is the
   white line that shows under the button (live: `#mc_embed_signup .helper_text{background:none}`). */
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup form,
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup #mce-responses,
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup .helper_text {
	background: none;
	border: none;
}

/* Mailchimp email input — borderless except a black bottom rule, centered (live). */
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup .mc-field-group input.email {
	display: block;
	width: 100%;
	padding: 1rem 0;
	margin-bottom: 1rem;
	border: none;
	border-bottom: 1px solid #000;
	border-radius: 0;
	text-align: center;
	text-transform: uppercase;
}

/* Mailchimp Subscribe button — amber + uppercase (live: padding 1rem, height 3rem). */
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup .button {
	width: 100%;
	height: 3rem;
	padding: 1rem;
	line-height: 1;
	border: 0;
	border-radius: 4px;
	background: var( --wp--preset--color--amber );
	/* Black, not live's white: white on amber is 1.84:1 (WCAG AA needs 4.5:1); black is ~11:1 and
	   matches the site's other amber buttons, which use the dark contrast color. */
	color: #000;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: all 0.23s ease-in-out;
}

/* Subscribe button hover — the live/Mailchimp-classic behavior is a background darken to #222
   (classic-061523.css: `#mc_embed_signup .button:hover{background-color:#222}`). Our resting amber
   rule above is `:has()`-scoped (2 ids) and would otherwise out-specify that classic hover and
   suppress it, so re-assert the darken at matching specificity. */
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup .button:hover,
.wp-block-cover:has( #mc_embed_signup ) #mc_embed_signup .button:focus {
	background: #222;
	color: #fff; /* black text would vanish on the dark hover */
}

/* ============================================================================
   Page hero (sai/page-hero) — photographer-credit caption overlaid on the photo.
   Positioning ported from live (live-additional-css.css `figure.size-large
   figcaption`), but keyed to the pattern's own `.page-hero` class instead of the
   size class — robust to image size and scoped so it can't leak onto other large
   images. White over photo, so not a token.
   ========================================================================== */
.wp-block-image.page-hero {
	position: relative;
	/* Live hero is flush (margin 0); neutralize the Frost theme.json core/image
	   30px block margin for the hero specifically. */
	margin-block: 0;
}
.wp-block-image.page-hero figcaption {
	position: absolute;
	z-index: 1;
	bottom: 0.5rem;
	width: 100%;
	color: #fff;
	font-size: 0.7rem;
	opacity: 0.8;
	text-align: center;
}

/* Utility (live `.bottom-no-margin`) — zero trailing margin/padding; sai/intro-text
   uses it to tighten the heading→tracks-icon gap. */
.bottom-no-margin {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Business directory archive — live .directory / .business card layout (OQ#1). */
.sai-business-directory {
	max-width: 800px;
	margin: 0 auto;
}

/* Archive/tag templates put the directory straight in <main> (no padded wrapper, unlike a
   page's post-content), so it needs its own gutter once the screen is narrower than it.
   Matches the root padding / the 1rem mobile `.has-global-padding` rule above. */
@media (max-width: 860px) {
	.site-content > .sai-business-directory {
		padding-left: var( --wp--style--root--padding-left );
		padding-right: var( --wp--style--root--padding-right );
	}
}
@media (max-width: 781px) {
	.site-content > .sai-business-directory {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.sai-business-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem;
	padding: 0 0 2rem;
	width: 100%;
}

.sai-business-card__content {
	flex: 1 1 65%;
	min-width: 0;
}

.sai-business-card__image {
	flex: 0 0 25%;
	max-width: 25%;
	align-self: center;
}

.sai-business-card__thumbnail {
	display: block;
	width: 100%;
	height: auto;
	padding: 1rem 0 0;
}

.sai-business-card__title {
	margin: 40px 0 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #ddd;
	font-size: 1.5rem;
	text-transform: uppercase;
}

.sai-business-card__title a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	border-bottom: none;
}

.sai-business-card__description {
	margin: 0.75rem 0 0;
}

.sai-business-card__fields {
	margin: 0;
}

.sai-business-card__field {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
	padding: 0.5rem 0;
	border-top: 1px solid #ddd;
}

.sai-business-card__field dt,
.sai-business-card__field dd {
	margin: 0;
}

.sai-business-card__field dd {
	overflow-wrap: anywhere; /* breaks long URLs only — break-all split ordinary words */
}

.sai-business-card__field a {
	color: var(--wp--preset--color--primary, #008080);
	box-shadow: none;
	border-bottom: none;
}

.sai-business-directory__empty {
	padding: 0 1.5rem;
}

/* Alphabetical TOC — live .directory-menu / .letter / .letter-top */
.sai-business-directory__index {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.5rem 0 1.5rem;
}

.sai-business-directory__index-link {
	padding: 0.5rem;
	margin-right: 0.5rem;
	color: var(--wp--preset--color--primary, #008080);
	text-decoration: none;
	box-shadow: none;
	border-bottom: none;
}

.sai-business-directory__index-link:hover,
.sai-business-directory__index-link:focus {
	color: var(--wp--preset--color--primary, #008080);
	box-shadow: none;
	border-bottom: none;
	text-decoration: underline;
}

.sai-business-directory__index-link--inactive {
	color: inherit;
	cursor: default;
	text-decoration: none;
}

.sai-business-directory__index:has( + .sai-business-directory__tags ) {
	padding-bottom: 0;
}

.sai-business-directory__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 0 1.5rem;
}

.sai-business-directory__tag {
	padding: 0.5rem;
	margin-right: 0.5rem;
	color: var(--wp--preset--color--primary, #008080);
	text-decoration: none;
	box-shadow: none;
	border-bottom: none;
}

a.sai-business-directory__tag:hover,
a.sai-business-directory__tag:focus {
	color: var(--wp--preset--color--primary, #008080);
	box-shadow: none;
	border-bottom: none;
	text-decoration: underline;
}

a.sai-business-directory__tag--selected {
	background-color: var(--wp--preset--color--amber, #fcaf16);
	color: #000;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

a.sai-business-directory__tag--selected:hover,
a.sai-business-directory__tag--selected:focus {
	background-color: #222;
	color: #fff;
	text-decoration: none;
}

.sai-business-card--hidden,
.sai-business-directory__group--hidden,
.sai-business-directory__index-link--empty {
	display: none;
}

/* A–Z jump targets land 24px below the fixed header, whose height steps with the
   breakpoints (206 / 147 / 125px — see the header offset rules). */
.sai-business-directory {
	--sai-anchor-offset: 230px;
}
@media (max-width: 1100px) {
	.sai-business-directory {
		--sai-anchor-offset: 171px;
	}
}
@media (max-width: 600px) {
	.sai-business-directory {
		--sai-anchor-offset: 149px;
	}
}

.sai-business-directory__top {
	scroll-margin-top: var( --sai-anchor-offset );
}

.sai-business-directory__letter {
	position: relative;
	width: 100%;
	padding: 0;
	color: var(--wp--preset--color--amber, #fcaf16);
	scroll-margin-top: var( --sai-anchor-offset );
}

.sai-business-directory__letter-heading {
	margin: 40px 0 0;
	padding: 0.25rem 0 0.5rem;
	border-bottom: 1px solid #ddd;
	font-size: 2rem;
	line-height: 1.2;
	color: inherit;
	text-transform: uppercase;
}

.sai-business-directory__letter-top {
	position: absolute;
	right: 0;
	bottom: 0.5rem;
	color: #c71112;
	text-decoration: none;
	box-shadow: none;
	border-bottom: none;
	line-height: 1;
}

.sai-business-directory__letter-top:hover,
.sai-business-directory__letter-top:focus {
	color: #c71112;
	box-shadow: none;
	border-bottom: none;
}

@media (max-width: 768px) {
	.sai-business-card {
		flex-direction: column;
	}

	.sai-business-card__image {
		flex: 0 0 auto;
		max-width: 100%;
		order: -1;
	}

	.sai-business-card__thumbnail {
		padding-top: 0;
	}
}

/* Business single — /business/{slug}/ */
.sai-business-single {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sai-business-single__title {
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #ddd;
	font-size: 2rem;
	text-transform: uppercase;
}

.sai-business-single__image {
	margin: 0 0 1.5rem;
}

.sai-business-single__thumbnail {
	display: block;
	width: 100%;
	height: auto;
}

.sai-business-single__description {
	margin: 0 0 1rem;
}

.sai-business-single__content {
	margin-top: 2rem;
}

/* Staff directory archive — index shows name, title, and image only. */
.sai-staff-directory {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sai-staff-card {
	text-align: center;
}

.sai-staff-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	border-bottom: none;
}

.sai-staff-card__image {
	aspect-ratio: 1;
	margin: 0 0 1rem;
	background: #e6e6e6;
	overflow: hidden;
}

.sai-staff-card__thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sai-staff-card__name {
	margin: 0;
	font-size: 1.25rem;
	text-transform: uppercase;
}

.sai-staff-card__title {
	margin: 0.25rem 0 0;
	font-style: italic;
	color: #555;
}

.sai-staff-directory__empty {
	grid-column: 1 / -1;
	text-align: center;
}

/* Staff single — /staff-members/{slug}/ */
.sai-staff-single {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sai-staff-single__header {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
	margin-bottom: 2rem;
}

.sai-staff-single__image {
	flex: 0 0 30%;
	max-width: 30%;
	margin: 0;
}

.sai-staff-single__thumbnail {
	display: block;
	width: 100%;
	height: auto;
}

.sai-staff-single__heading {
	flex: 1 1 60%;
	min-width: 0;
}

.sai-staff-single__name {
	margin: 0 0 0.5rem;
	font-size: 2rem;
	text-transform: uppercase;
}

.sai-staff-single__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary, #008080);
}

.sai-staff-single__start-date {
	margin: 0;
	font-style: italic;
	color: #555;
}

.sai-staff-single__content {
	margin-top: 1.5rem;
}

@media (max-width: 600px) {
	.sai-staff-single__header {
		flex-direction: column;
	}

	.sai-staff-single__image {
		flex: 0 0 auto;
		max-width: 100%;
	}
}

/* ============================================================================
   Site header (sai/header-default) — ported from live Revolution Pro header.
   ----------------------------------------------------------------------------
   A FIXED full-width bar: [left nav] · [centered logo] · [right nav], with the
   FB/IG icons fixed top-right. Nav is white uppercase Poppins (the header floats
   over hero imagery). On scroll, sticky-header.js adds `sai-shrink` to <body>;
   the bar then gains a dark translucent background and the logo shrinks — matching
   live (`.shrink .site-header`). The header is a template part no page author
   places, so its layout/padding lives here (unprefixed, no `!important`), not in
   the pattern markup (mike-6-15). Live source: revolution-pro-style.css +
   live-additional-css.css "Header Stuff" / "Header Social Icons".
   ========================================================================== */
.sai-site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	/* Live computed: padding-top 16px, padding-bottom 20px (sides 30 from `.wrap`). */
	padding: 16px 30px 20px;
	transition: all 0.2s ease-in-out;
	/* Live computed: the bar is a dark translucent overlay (`rgba(0,0,0,0.8)`) at ALL
	   times, not transparent-over-hero — scrolling only shrinks it. The full-bleed hero
	   still slides under the fixed bar, so its top strip reads darkened, like live. */
	background: rgba( 0, 0, 0, 0.8 );
}

/* Three-column grid: equal side columns force the logo column dead-center,
   independent of how wide each nav is. (flex:1 on the navs fails — the left nav's
   four long items can't shrink below their content width, so they steal space from
   the right and shove the logo ~90px off-axis.) minmax(0,1fr) keeps the side columns
   equal instead of growing to fit content. Capped near the live wide width. */
.sai-site-header__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 260px minmax( 0, 1fr );
	align-items: center;
	max-width: 1280px; /* live `.site-header > .wrap { max-width: 1280px }` */
	margin: 0 auto;
}
/* The group's `is-layout-flow` block-gap rule (`> * + *`) adds a top margin to the
   2nd/3rd children (logo + right nav) but not the first, which dropped the right nav
   ~15px below the left. Grid uses `gap`, not flow margins — zero them so align-items
   centers all three on one line. */
.sai-site-header__inner > * {
	margin-block: 0;
}

/* Make each nav fill its grid column. The navigation block and its menu list are
   content-width by default, so they'd cluster at the column's start and space-evenly
   would only spread items across that narrow content box — leaving a lopsided gap
   before the logo. width:100% lets the list span the full half. */
.sai-site-header .sai-nav,
.sai-site-header .sai-nav .wp-block-navigation__container {
	width: 100%;
}

/* Keep each menu on a SINGLE row — core's `.is-layout-flex` defaults to
   `flex-wrap: wrap`, which made the menus wrap into 3 stacked rows (115px tall) —
   and spread its items EVENLY across the column. Live's `.genesis-nav-menu` is
   `display:flex; justify-content:space-evenly` (revolution-pro-style.css): even
   distribution on both sides keeps the centered logo visually balanced rather than
   one nav packed against the logo and the other against the edge. `gap` is the
   minimum inter-item spacing; space-evenly distributes the slack. */
.sai-site-header .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 16px;
	justify-content: space-evenly;
}

/* Logo: width set here (not on the image block) so the shrink override below doesn't
   need `!important` to beat an inline style. Centered within its grid column (live's
   `.title-area { width:20%; text-align:center }` — a wider center column gives the
   roundel breathing room and tightens the nav columns toward live's proportions). */
.sai-site-header .sai-site-logo {
	margin: 0;
	justify-self: center;
}
.sai-site-header .sai-site-logo img {
	display: block;
	width: 185px; /* sized so the bar ≈ live's 201px (roundel + 16/20 padding) */
	height: auto;
	transition: width 0.2s ease-in-out;
}

/* Top-level nav links — live `.genesis-nav-menu a`: white, uppercase Poppins 12px. */
.sai-site-header .wp-block-navigation .wp-block-navigation-item > a {
	color: #fff;
	font-family: var( --wp--preset--font-family--poppins );
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 1.15; /* live `.genesis-nav-menu { line-height: 1 }` — tight so the
	                      two wrapped lines ("DINE &" / "DRINK") sit close, not spread */
	text-transform: uppercase;
	text-decoration: none;
}
.sai-site-header .wp-block-navigation .wp-block-navigation-item > a:hover,
.sai-site-header .wp-block-navigation .wp-block-navigation-item > a:focus {
	color: #3fc8f4;
}

/* Live's top-level labels wrap to two lines when tight ("DINE &" / "DRINK") — allow
   it (default white-space) and let flex shrink the item so the wrap can occur.
   Dropdown items stay single-line (fixed-width submenu panel). */
.sai-site-header .sai-nav > .wp-block-navigation__responsive-container .wp-block-navigation-item {
	min-width: 0;
}

/* Submenu caret — live's 10px amber "▲" rotated 180° (→ ▼), rotating up on hover/open
   (`.menu-item-has-children:after { content:'▲'; color:#ffc72f; font-size:10px }`).
   Drawn ON the block's submenu toggle button, not as decoration on the <li>: the button is the
   only keyboard way into a hover/click dropdown (Tab to it, Enter/Space opens — WCAG 2.1.1), and
   it sits inline right after its own label instead of at the item's edge (where it read as the
   NEXT item's caret). Desktop navs only; the mobile nav draws its own chevron. */
.sai-site-header .sai-nav-mobile .wp-block-navigation__submenu-icon {
	display: none;
}
.sai-site-header :is( .sai-nav-left, .sai-nav-right ) .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 24×24 tap target (WCAG 2.2 AA 2.5.8). The caret itself is 14×10.
	   Auto block margins center it against a wrapped label. Right margin keeps the extra
	   tap width from pushing the next item; left stays 0 so the button doesn't overlap the label. */
	width: 24px;
	height: 24px;
	flex-shrink: 0; /* the left menu's flex row would otherwise squeeze it below 24px */
	margin-top: auto;
	margin-right: 0;
	margin-bottom: auto;
	margin-left: 0;
	padding: 0;
	background: none;
	border: 0;
	color: #ffc72f;
	cursor: pointer;
}
.sai-site-header :is( .sai-nav-left, .sai-nav-right ) .wp-block-navigation__submenu-icon svg {
	display: none;
}
.sai-site-header :is( .sai-nav-left, .sai-nav-right ) .wp-block-navigation__submenu-icon::after {
	content: "▲";
	font-family: sans-serif;
	font-size: 10px;
	line-height: 10px;
	transform: rotate( 180deg );
	transition: transform 0.1s linear;
}
.sai-site-header :is( .sai-nav-left, .sai-nav-right ) .has-child:hover > .wp-block-navigation__submenu-icon::after,
.sai-site-header :is( .sai-nav-left, .sai-nav-right ) .wp-block-navigation__submenu-icon[aria-expanded="true"]::after {
	transform: rotate( 0deg );
}
.sai-site-header :is( .sai-nav-left, .sai-nav-right ) .wp-block-navigation__submenu-icon:focus-visible {
	outline: 2px solid #ffc72f;
	outline-offset: 2px;
}

/* Dropdowns — live `.sub-menu`: white panel with a 1px #eee rule between items
   (`.sub-menu a { border:1px solid #eee }`), black text, red hover (#c5161d). */
.sai-site-header .wp-block-navigation__submenu-container {
	background-color: #fff;
	border: 1px solid #eee;
	margin: 0 !important;
	min-width: 14rem; /* roomy panel like live (`.sub-menu { width: 180px }` + our padding) */
}
.sai-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	white-space: nowrap;
}
.sai-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:not( :last-child ) {
	border-bottom: 1px solid #eee;
}
/* Black text by default — needs the extra `.wp-block-navigation` class to out-specify the
   top-level `color:#fff` rule (which also matches these submenu items); without it the text
   inherited white and was invisible until hovered. */
.sai-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a.wp-block-navigation-item__content,
.sai-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > button.wp-block-navigation-item__content {
	color: #000;
	font-family: var( --wp--preset--font-family--poppins );
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 1.15;
	text-transform: uppercase; /* live submenu is uppercase too (`.genesis-nav-menu a`) */
	text-decoration: none;
	/* live `.sub-menu a { padding-top:15px; padding-bottom:15px }` + inset. The `__content`
	   class is needed to out-specify WP's tight default submenu padding (6px 12px).
	   The button is a nested submenu label (e.g. Governance); without these declarations it
	   keeps the nav block's 18px Noto Sans instead of the sibling link styles. */
	padding: 15px 24px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}
.sai-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover,
.sai-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a:focus,
.sai-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > button.wp-block-navigation-item__content:hover,
.sai-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > button.wp-block-navigation-item__content:focus {
	color: #c5161d;
}

/* Scrolled (shrunk) state — sticky-header.js toggles body.sai-shrink. The bar's dark
   background is already set on `.sai-site-header` (unchanged on scroll); only the shadow
   and padding change here. */
.sai-shrink .sai-site-header {
	box-shadow: 0 0 20px rgba( 0, 0, 0, 0.05 );
	padding-top: 5px;
	padding-bottom: 5px;
}
.sai-shrink .sai-site-header .sai-site-logo img {
	width: 105px; /* shrinks from 170px on scroll (live `.shrink img` shrink) */
}

/* ----------------------------------------------------------------------------
   Header offset — the bar is `position: fixed` (out of flow), so content would hide
   behind it. The dark translucent bar is always shown (live behavior), so:
     • Page LEADS with a full-bleed hero → hero slides flush under the bar; its top
       strip reads darkened through the 80% black, exactly like live.
     • Any other page → content is pushed below the bar so nothing hides behind it.
   `body:has(.page-hero)` keys off the hero pattern's class — no PHP/template change.
   ---------------------------------------------------------------------------- */
.wp-site-blocks {
	padding-top: 206px; /* measured header height >1100px — clears the fixed bar */
}
@media (max-width: 1100px) {
	.wp-site-blocks {
		padding-top: 147px; /* header with the 135px logo */
	}
}
@media (max-width: 600px) {
	.wp-site-blocks {
		padding-top: 125px; /* header with the 110px logo */
	}
}
/* Hero pages + the home video slide up under the bar — above phone width only; on
   phones live pushes every page below the bar. `body` never carries a `page-hero`
   class (the class is on a block in the content), hence `:has()`. */
@media (min-width: 601px) {
	body:has( .page-hero ) .wp-site-blocks,
	body.home .wp-site-blocks {
		padding-top: 0;
	}
}
/* Full-width hero videos (home, Baca — both 1920×1080) — the video block can't carry width/height,
   so reserve the 16:9 box here; otherwise the page jumps when the poster/video arrive (CLS). */
.wp-block-video.alignfull video {
	aspect-ratio: 16 / 9;
}
/* On a hero page the hero is the top band — drop the post-title band so the photo
   (not a title) sits behind the nav. (The content area's top padding is no longer
   baked into the template, so no `!important` is needed to flush the hero.) */
body:has( .page-hero ) .entry-header {
	display: none;
}
/* With the title band hidden, the entry-content is the article's first child but
   still carries the article block-gap's top margin (30px) — drop it so the hero
   sits flush at the very top instead of 30px down. */
body:has( .page-hero ) .entry-content {
	margin-top: 0;
}
/* Full-bleed bands stack FLUSH (live behavior), not separated by the 30px block-gap.
   The design puts each band's vertical rhythm INSIDE it (its own top/bottom padding),
   so the block-gap margin between stacked full-bleed patterns (hero, map-embed,
   visitors-band, social-connect-bar, watercolor-strip, …) just leaves white strips.
   Zero the block-gap margin on every full-bleed child. This is external CSS, so an
   editor-set inline margin still wins — band spacing stays author-controlled
   (mike-6-15). Inset (wide/constrained) content is untouched, keeping its breathing
   room. */
.entry-content > .alignfull {
	margin-top: 0;
}
/* The FIRST band also needs the entry-content's OWN block-gap margin dropped (the rule
   above only zeros the child), so the opening band sits flush under the fixed bar. */
.entry-content:has( > .alignfull:first-child ) {
	margin-top: 0;
}

/* Social icons — fixed top-right, white glyphs (live `.header-social-wrap` /
   `.header-social-widget`). Sits above the header bar's z-index. */
.sai-header-social.wp-block-social-links {
	position: fixed;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 10000;
	gap: 0.6rem;
}
/* Live `.header-social-widget svg { width: 20px }` — the icon is the link's font-size
   in `is-style-logos-only`. Was 16px (`has-small-icon-size`), too small. */
.sai-header-social.wp-block-social-links .wp-social-link {
	color: #fff;
	font-size: 26px;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.sai-header-social .wp-social-link:hover {
	opacity: 1;
	transform: translateY( -2px );
}

/* ----------------------------------------------------------------------------
   Mobile / tablet menu (≤1100px) — an INLINE accordion matching live's Genesis menu:
   a top-left "≡ MENU" toggle, and a vertical list that drops in BELOW the bar and pushes
   page content down (NOT WordPress's full-screen overlay). The toggle + list pair via JS
   in sticky-header.js, which flips body.sai-menu-open. Markup: `.sai-menu-toggle` (button,
   first header child) + `.sai-nav-mobile` (inline nav, last header child).
   ---------------------------------------------------------------------------- */

/* Toggle button + inline nav are desktop-hidden; the two split navs handle desktop. */
.sai-site-header .sai-menu-toggle,
.sai-site-header .sai-nav-mobile {
	display: none;
}

@media (max-width: 1100px) {
	.sai-site-header .sai-nav-left,
	.sai-site-header .sai-nav-right {
		display: none;
	}
	/* With both side navs removed from the grid, pin the logo to the center column so it
	   stays dead-centered (it would otherwise auto-place into the left track). */
	.sai-site-header__inner > .sai-site-logo {
		grid-column: 2;
		align-self: start;
	}
	.sai-site-header .sai-site-logo img {
		width: 135px;
	}
	.sai-site-header {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* --- Toggle: top-left, "≡ MENU" → "✕ MENU" when open. --- */
	/* Anchored near the TOP, level with the social icons (live places the toggle up there, not
	   centered against the logo). Fixed top from the header top, so it stays put when the header
	   grows tall on open. */
	.sai-site-header .sai-menu-toggle {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		position: absolute;
		top: 40px;
		left: 30px;
		height: max-content;
		padding: 0;
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
		z-index: 10001;
	}
	.sai-menu-toggle__label {
		font-family: var( --wp--preset--font-family--poppins );
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}
	/* Hamburger icon: 3 thin bars (top + bottom border + center gradient line). */
	.sai-menu-toggle__icon {
		position: relative;
		width: 22px;
		height: 14px;
		border-top: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		background: linear-gradient( currentColor, currentColor ) center / 100% 2px no-repeat;
	}
	/* Open: stays white (live's "✕ MENU" is white, not gold); the 3 bars morph into an ✕. */
	body.sai-menu-open .sai-site-header .sai-menu-toggle {
		color: #fff;
	}
	body.sai-menu-open .sai-menu-toggle__icon {
		border-color: transparent;
		background: none;
	}
	body.sai-menu-open .sai-menu-toggle__icon::before,
	body.sai-menu-open .sai-menu-toggle__icon::after {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 2px;
		background: currentColor;
	}
	body.sai-menu-open .sai-menu-toggle__icon::before {
		transform: translateY( -50% ) rotate( 45deg );
	}
	body.sai-menu-open .sai-menu-toggle__icon::after {
		transform: translateY( -50% ) rotate( -45deg );
	}

	/* --- Open: header drops into flow so the list pushes content down (live behavior). --- */
	body.sai-menu-open .sai-site-header {
		position: static;
	}
	body.sai-menu-open .wp-site-blocks {
		padding-top: 0;
	}

	/* --- The inline accordion list — shown only when open. --- */
	body.sai-menu-open .sai-site-header .sai-nav-mobile {
		display: block;
		width: 100%;
		margin-top: 8px;
	}
	.sai-nav-mobile .wp-block-navigation,
	.sai-nav-mobile .wp-block-navigation__container {
		display: block;
		width: 100%;
	}
	/* Top-level rows: full-width with a hairline divider under each.
	   Nested rows (`.mobile-child-dropdown`) are flex in core, which puts the open
	   submenu beside its label. Block them so the child list drops underneath. */
	.sai-nav-mobile .wp-block-navigation__container > .wp-block-navigation-item,
	.sai-nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child {
		display: block;
		width: 100%;
	}
	.sai-nav-mobile .wp-block-navigation__container > .wp-block-navigation-item {
		border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
	}
	/* Top-level label (link or submenu toggle) — white uppercase, label left / chevron right. */
	.sai-nav-mobile .wp-block-navigation__container > .wp-block-navigation-item > a,
	.sai-nav-mobile .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 12px 0;
		color: #fff;
		font-family: var( --wp--preset--font-family--poppins );
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		background: none;
		border: 0;
		text-decoration: none;
		cursor: pointer;
	}
	/* Hide WP's submenu icon; draw the same 12×12 stroke chevron core puts in that button. */
	.sai-nav-mobile .wp-block-navigation__submenu-icon {
		display: none;
	}
	.sai-nav-mobile .wp-block-navigation-submenu__toggle::after {
		content: "";
		display: block;
		flex: none;
		align-self: center;
		width: 12px;
		height: 12px;
		margin-left: 0.25em;
		background-color: currentColor;
		/* path M1.50002 4 L6.00002 8 L10.5 4, stroke-width 1.5 — core's submenu svg. */
		-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.50002 4L6.00002 8L10.5 4' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E" );
		mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.50002 4L6.00002 8L10.5 4' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E" );
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: 12px 12px;
		mask-size: 12px 12px;
		-webkit-mask-mode: alpha;
		mask-mode: alpha;
		transition: transform 0.15s ease;
	}
	.sai-nav-mobile .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
		transform: rotate( 180deg );
	}
	/* Collapse submenus by default; the toggle reveals them. */
	.sai-nav-mobile .wp-block-navigation-submenu__toggle[aria-expanded="false"] + .wp-block-navigation__submenu-container {
		display: none;
	}
	/* Child submenu — force in-flow (core floats it absolute), but keep live's WHITE card look:
	   white bg + 1px rules + black uppercase links, indented from the left. The white background,
	   borders and `color:#000` come from the shared desktop dropdown rules; here we only un-float
	   it (static/full-width) and inset it. `!important` beats core's later-loading nav CSS. */
	.sai-nav-mobile .wp-block-navigation__submenu-container {
		position: static !important;
		inset: auto !important;
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 4px 0 10px 16px; /* indent the white card like live */
		box-shadow: none !important;
	}
	.sai-nav-mobile .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a.wp-block-navigation-item__content,
	.sai-nav-mobile .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > button.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		padding: 12px 18px;
		font-size: 13px;
		font-weight: 400;
	}
}

/* (Mobile overlay bg/text come from the nav block's customOverlay* attributes — dark
   panel + white items — applied by WP with the right specificity.) */

/* Phone — shrink the logo so the bar isn't oversized on small screens. */
@media (max-width: 600px) {
	.sai-site-header .sai-site-logo img {
		width: 110px;
	}
}

/* ============================================================================
   News post list (sai/news-post-list) — ported from a live capture of
   /in-the-news/ (tools/inspect-live.js, viewport 1470, 2026-07-18).
   ----------------------------------------------------------------------------
   Every value below is live's RESOLVED computed px, not an estimate. No section
   margin/padding here (mike-6-15) — the rules are intra-row rhythm and component
   styling, which the Dimensions panel does not own.
   ========================================================================== */

/* Row = flush against its neighbours, divided by a dashed rule. Live puts this border on the
   item itself rather than using a separator element, and the LAST row has none — hence no
   core/separator block in the pattern. */
.sai-news-post-list .wp-block-post-template > li {
	border-bottom: 1px dashed #c7c7c7;
}

.sai-news-post-list .wp-block-post-template > li:last-child {
	border-bottom: none;
}

/* Live's image column: 200px inside an 800px container = 25%, with a 30px gutter. */
.sai-news-post-list .wp-block-columns {
	gap: 30px;
	margin-bottom: 0;
}

/* Title — gill-sans-nova 24px/30px, weight 500. The 22px padding-top is what creates the gap
   between the dashed rule above and the title; live has no padding on the row itself. */
.sai-news-post-list .wp-block-post-title {
	font-family: var( --wp--preset--font-family--heading );
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
	padding-top: 22px;
	margin-top: 0;
	margin-bottom: 16px;
}

.sai-news-post-list .wp-block-post-title a {
	color: #141414;
	border-bottom: 1px solid #ddd;
}

/* Excerpt — Noto Sans 14px/21px, weight 300, #4a4a4a. */
.sai-news-post-list .wp-block-post-excerpt {
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	color: #4a4a4a;
	margin-bottom: 0;
}

.sai-news-post-list .wp-block-post-excerpt p {
	margin: 0;
}

/* READ MORE — core/read-more outputs a bare <a>; the button shape comes from here. Colors are
   set on the block itself (backgroundColor/textColor) so they stay editable in the editor.
   The cyan top/bottom border is live's — see docs/for-mike.md, it may be unintentional. */
.sai-news-post-list .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 100;
	line-height: 22.5px;
	letter-spacing: -0.7px;
	text-transform: uppercase;
	text-decoration: none;
	border-top: 1px solid #009fd4;
	border-bottom: 1px solid #009fd4;
}

.sai-news-post-list .wp-block-read-more:hover,
.sai-news-post-list .wp-block-read-more:focus {
	color: var( --wp--preset--color--base );
	box-shadow: inset 0 0 200px rgba( 230, 230, 230, 0.25 );
}

/* ============================================================================
   Splide slider — sai/section-promo carousels
   ----------------------------------------------------------------------------
   Ported verbatim from docs/reference/live-additional-css.css (lines 159-192).
   This is what constrains each slide to a fixed aspect strip and overlays the
   text panel; without it the full-size images render at natural size. The h2/p
   type sizes were inline in the live block markup and belong here.
   ========================================================================== */
/* The text panel positions absolutely; its section wrapper must be the anchor.
   On live this was genesis-blocks/gb-container (position:relative by default);
   our core/group wrapper isn't positioned, so restore it here. */
.wp-block-group:has(> .splide-text-container) { position: relative; }
.splide__arrow { background: white; opacity: 1; border: 1px solid #ff8049; }
.splide__arrow svg { fill: #ff8049; }
.splide__track { margin-top: 1rem; }
.splide-wide-left .splide__slide,
.splide-wide-right .splide__slide { aspect-ratio: 144 / 95; }
.splide-wide-left .splide__list,
.splide-wide-right .splide__list { height: calc(100vh - 2rem); aspect-ratio: 2/1; }
.splide-wide-right .splide__arrows { position: absolute; right: 6rem; bottom: 4rem; }
.splide-wide-right .splide__track,
.splide-wide-left .splide__track { width: fit-content; }
.splide-wide-right .splide__track { margin-left: -41%; }
@media screen and (min-width: 1280px) { .splide-wide-left .splide__track { margin-left: -5%; } }
@media screen and (min-width: 1918px) { .splide-wide-left .splide__track { margin-left: 5%; } }
.splide-wide-left .splide__arrows { position: absolute; left: 6rem; bottom: 4rem; }
.splide-text-container * { color: white; }
.splide-text-container { width: 100%; padding: 1rem 2rem; height: auto; background: rgba(0,0,0,1); }
.splide-text-container h2 { margin-top: 1rem; font-size: 45px; }
.splide-text-container p { font-size: 16px; }
@media screen and (min-width: 1280px) {
	.splide-text-container {
		position: absolute; display: inline-block; z-index: 9999;
		width: calc((100vw - 75%) - 3rem); background: rgba(0,0,0, 0.5); font-size: 0.8rem;
	}
	.splide-text-container.left { top: 2rem; right: auto; left: 4rem; }
	.splide-text-container.right { top: 2rem; right: 3.25rem; left: auto; }
}
@media screen and (max-width: 768px) {
	.splide-text-container { width: 100vw; padding: 1rem 2rem; text-align: center; }
	.splide-text-container .wp-block-buttons { justify-content: center; }
	.splide-wide-left .splide__track, .splide-wide-right .splide__track { margin: 0; }
	.splide-wide-right .splide__arrows, .splide-wide-left .splide__arrows { left: 3rem; }
	.splide__arrows .splide__arrow.splide__arrow--prev { left: -1rem; }
	.splide__arrows .splide__arrow.splide__arrow--next { left: 2rem; }
	.splide-wide-left .splide__list, .splide-wide-right .splide__list { height: calc(50vh - 2rem); aspect-ratio: 2/1; }
}

/* --------------------------------------------------------------------------
   Scattered Images — sai/entertainment-scatter
   Ported from docs/reference/live-additional-css.css:194-272.
   Desktop (≥1280px) scatters the four event photos around the section; below
   that they collapse into the Splide carousel. Background image dimmed via
   .scattered-images__background-image.
   -------------------------------------------------------------------------- */
.scattered-images { padding: 0; position: relative; margin: 4rem 0; }
@media screen and (max-width: 768px) { .scattered-images { margin: 0; } }
/* FSE zeroes .alignfull margin-top and last-child margin-block-end (specificity 0,2,0),
   wiping the section margin. Restore live's exact values — 4rem, 0 on mobile — at
   specificity 0,3,0 so they survive. The extra room live's overflowing images sit in comes
   from a following 75px spacer + the next section's margin: page composition, not the pattern. */
.wp-block-group.scattered-images.alignfull { margin-top: 4rem; margin-bottom: 4rem; }
@media screen and (max-width: 768px) { .wp-block-group.scattered-images.alignfull { margin-top: 0; margin-bottom: 0; } }
.scattered-images * { color: white; }
@media screen and (min-width: 1280px) {
	/* No width:100% here — it would cap the section at the content width and defeat the
	   alignfull negative-margin breakout, leaving white strips at the sides. */
	.scattered-images { display: flex; padding: 0; height: 100%; min-height: min(60.859375vw,1080px); }
}
.scattered-images__inner { position: relative; z-index: 1; }
@media screen and (min-width: 1280px) {
	.scattered-images__inner { display: flex; flex-direction: column; justify-content: space-between; position: relative; width: 100%; }
}
/* Background layer: live uses a Genesis dim-100 overlay to darken the water tower for
   white text. The source rule was opacity:.7 (from a different page's DOM) which would
   lighten it over the page — replaced with object-fit cover + a dark ::after overlay. */
.scattered-images__background-image { position: absolute; inset: 0; z-index: 0; }
.scattered-images__background-image img { width: 100%; height: 100%; object-fit: cover; }
.scattered-images__background-image::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.scattered-images__content { position: relative; z-index: 1; color: #fafafa; font-size: 16px; line-height: 28px; margin: 0 auto 25px; padding: 0 37px; text-align: center; }
@media screen and (min-width: 768px) { .scattered-images__content { font-size: 18px; line-height: 32px; margin-bottom: 48px; padding: 0; } }
@media screen and (min-width: 1280px) {
	.scattered-images__content { display: flex; flex-direction: column; justify-content: center; margin-bottom: 32px; margin-left: calc(100% - min(67.421875%,1263px)); margin-right: calc(100% - min(59.921875%,1117px)); max-width: 560px; min-height: min(41.171875vw - 98px,617px); }
}
@media screen and (min-width: 1918px) {
	.scattered-images__content { font-size: 18px; line-height: 40px; margin-bottom: 32px; margin-left: calc(100% - min(68%, 100vw)); margin-right: calc(100% - min(60%, 100vw)); max-width: 560px; min-height: min(41.171875vw - 98px, 617px); }
}
.scattered-images__content .links { justify-content: center; }
.scattered-images__content-inner { margin: 0 auto; padding: 0 52px; }
@media screen and (min-width: 768px) { .scattered-images__content-inner { max-width: 750px; } }
@media screen and (min-width: 1280px) { .scattered-images__content-inner { max-width: 410px; } }
.scattered-images__title { color: #fafafa; font-size: 36px; letter-spacing: .03em; line-height: 43px; margin-bottom: 15px; }
@media screen and (min-width: 768px) { .scattered-images__title { font-size: 44px; line-height: 53px; margin-bottom: 32px; } }
@media screen and (min-width: 1918px) { .scattered-images__title { font-size: 61px; line-height: 73px; margin-bottom: 48px; } }
.scattered-images__title.heading--underline:after { margin: 20px auto 0; }
@media screen and (min-width: 768px) { .scattered-images__title.heading--underline:after { margin-top: 27px; } }
@media screen and (min-width: 1918px) { .scattered-images__title.heading--underline:after { margin-top: 23px; } }
.scattered-images__slider-picture { border-radius: 6px; height: 100%; }
@media screen and (min-width: 1280px) {
	.scattered-images__slider-picture { position: absolute; z-index: 1; }
	.scattered-images__slider-picture--1 { height: 35vw; top: -10%; left: min(5%, 100vw); max-height: 700px; width: min(25%, 100vw) !important; }
	.scattered-images__slider-picture--2 { height: 25vw; right: min(65%,100vw); bottom: -2vw; max-height: 500px; width: min(100%,600px); }
	.scattered-images__slider-picture--3 { height: 20vw; top: -75px; left: min(61.5%,100vw); max-height: 380px; width: min(50%,800px) !important; }
	.scattered-images__slider-picture--4 { height: 25vw; bottom: 10%; left: min(70%,100vw); max-height: 500px; max-width: 500px; width: 25% !important; }
	.scattered-images__slider { height: 300px; }
}
@media screen and (min-width: 1692px) {
	.scattered-images__slider-picture--2 { height: 25vw; right: min(65%,100vw); bottom: 0; max-height: 500px; width: min(100%,600px); }
}
@media screen and (min-width: 2220px) { .scattered-images__slider-picture--1 { left: 0; } }
@media screen and (min-width: 1280px) { .scattered-images__slider { height: 0; width: 0; } }
@media screen and (min-width: 1280px) { .scattered-images .splide { position: unset; } }
.scattered-images .splide__arrows { display: flex; justify-content: space-between; padding: 0 14px 0 7px; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; z-index: 1; }
@media screen and (min-width: 500px) { .scattered-images .splide__arrows { padding: 0; } }
@media screen and (min-width: 1280px) { .scattered-images .splide__arrows { display: none; } }
.scattered-images .splide__arrow { margin-top: 0; pointer-events: auto; }
@media screen and (min-width: 500px) {
	.scattered-images .splide__arrow--prev { margin-left: -16px; }
	.scattered-images .splide__arrow--next { margin-right: -16px; }
}
.scattered-images .splide__track { height: 100%; }
@media screen and (min-width: 1280px) {
	.scattered-images .splide__track { overflow: visible; position: absolute; top: 0; left: 0; bottom: 0; width: 100vw; height: 1020px; }
	.scattered-images .splide__track .splide__slide figure,
	.scattered-images .splide__track .splide__slide figure img { position: absolute; width: 100%; height: 100%; }
	.scattered-images .splide__track .splide__slide figure img { object-fit: cover; }
	.scattered-images .splide__list { transform: unset !important; transform-style: unset !important; }
	.scattered-images .splide__slide { position: absolute; }
}
.scattered-images__quote { font-family: "Noto Sans",serif; font-weight: 400; font-style: italic; color: #fafafa; letter-spacing: .02em; line-height: 32px; margin: 15px auto 0; max-width: 634px; padding: 0 37px; text-align: center; }
@media screen and (min-width: 768px) { .scattered-images__quote { line-height: 44px; margin-top: 53px; max-width: 560px; padding: 0; } }
@media screen and (min-width: 1280px) { .scattered-images__quote { margin-left: calc(100% - min(64%,100vw)); max-width: 500px; padding: 24px 0 0 66px; text-align: left; } }
.scattered-images__quote-text { font-size: 24px; margin-bottom: 4px; }
@media screen and (min-width: 768px) { .scattered-images__quote-text { display: inline; font-size: 28px; } }
@media screen and (min-width: 1918px) {
	.scattered-images__quote { margin-left: calc(100% - min(57%,100vw)); max-width: 629px; padding: 24px 0 0 66px; text-align: left; }
	.scattered-images__quote-text { font-size: 33px; }
	.scattered-images__slider-picture--2 { height: 25vw; right: min(60%,100wv); bottom: -200px; width: min(100%,600px); }
	.scattered-images__quote-author { font-size: 16px; margin-bottom: 0; }
}
@media screen and (min-width: 768px) { .scattered-images__quote-author { display: inline; } }
@media screen and (min-width: 1918px) { .scattered-images__quote-author { font-size: 20px; } }
@media screen and (max-width: 768px) {
	.scattered-images .splide__arrows .splide__arrow--prev { left: 1rem; }
	.scattered-images .splide__arrows .splide__arrow--next { left: auto; right: 1rem; }
}

/* Current Events slider — live colored cards (image, Y-m-d, title, venue).
   Section gray #f8f8f8 is the live container; neutral token is #f5f5f5.
   Spacing is the class default (no !important) so the editor Dimensions panel wins. */
.sai-events-slider {
	background-color: #f8f8f8;
	margin-top: 5%;
	margin-bottom: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
}

.sai-events-slider__notice {
	margin: 0;
	text-align: center;
}

.sai-events-slider .splide {
	visibility: visible;
}

.sai-events-slider__carousel .splide__list {
	align-items: stretch;
}

.sai-events-slider .splide:not(.is-initialized) .splide__list {
	gap: 16px;
}

.sai-events-slider .splide:not(.is-initialized) .splide__slide {
	flex: 0 0 calc((100% - 48px) / 4);
}

.sai-events-slider .splide__slide {
	display: flex;
	height: auto;
}

.sai-events-slider__card,
.sai-events-slider__card:hover,
.sai-events-slider__card:focus,
.sai-events-slider__card:visited {
	background: #fff;
	box-shadow: none;
	color: var(--wp--preset--color--base, #fff);
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 100%;
	text-decoration: none;
	width: 100%;
}

.sai-events-slider__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.sai-events-slider__media {
	aspect-ratio: 1 / 1;
	background: #fff;
	display: block;
	overflow: hidden;
}

.sai-events-slider__media img,
.sai-events-slider__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sai-events-slider__details {
	background: var(--wp--preset--color--contrast, #000);
	color: var(--wp--preset--color--base, #fff);
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px 16px 20px;
}

.sai-events-slider__date {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 8px;
}

.sai-events-slider__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.sai-events-slider__card:hover .sai-events-slider__title,
.sai-events-slider__card:focus-visible .sai-events-slider__title {
	text-decoration: underline;
}

.sai-events-slider__venue {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	margin-top: 8px;
}

.sai-events-slider .splide__arrow {
	align-items: center;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: flex;
	height: 2.25rem;
	justify-content: center;
	opacity: 1;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.25rem;
	z-index: 1;
}

.sai-events-slider .splide__arrow svg {
	fill: var(--wp--preset--color--contrast);
	height: 1rem;
	width: 1rem;
}

.sai-events-slider .splide__arrow--prev {
	left: 0.5rem;
}

.sai-events-slider .splide__arrow--prev svg {
	transform: scaleX(-1);
}

.sai-events-slider .splide__arrow--next {
	right: 0.5rem;
}

.sai-events-slider .splide__arrow:disabled {
	opacity: 0.35;
}

.sai-events-slider .splide__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.sai-events-slider .splide:not(.is-overflow) .splide__arrow {
	display: none;
}

.sai-events-slider .splide__track {
	margin-top: 0;
}

@media (max-width: 1024px) {
	.sai-events-slider .splide:not(.is-initialized) .splide__slide {
		flex: 0 0 calc((100% - 32px) / 3);
	}
}

@media (max-width: 600px) {
	.sai-events-slider .splide:not(.is-initialized) .splide__slide {
		flex: 0 0 calc((100% - 16px) / 2);
	}
}

@media (max-width: 480px) {
	.sai-events-slider .splide:not(.is-initialized) .splide__slide {
		flex: 0 0 100%;
	}
}


.tribe-events-sub-nav {
	padding-left: 0;
}