/*
Theme Name: FSO
Theme URI: https://fredericksburgsymphony.org
Author: Voyager Marketing
Author URI: https://voyager.marketing
Description: Block theme for the Fredericksburg Symphony Orchestra — native WordPress rebuild of the Base44 prototype (PRJ-79).
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fso
*/

/* Anchor deep-links (hero first-timer strip → Plan Your Visit FAQs). The
 * offset keeps a targeted row clear of the top of the viewport. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

:target {
	scroll-margin-top: 6rem;
}

/* Outline button variation, site-wide. Nothing in the theme sets a border width,
 * so core's `border: 2px solid currentColor` applies and reads heavy against the
 * gold. Kept in CSS rather than theme.json's
 * styles.blocks.core/button.variations.outline, which needs WP 6.6+ — this theme
 * declares 6.5. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
}

/* -------------------------------------------------------------------------
 * Inquiry forms (fso-companion → [fso_inquiry_form]) — TK-2089.
 * Token-driven; no hardcoded colors. Light-first to match the theme.
 * ---------------------------------------------------------------------- */
.fso-inquiry-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 1.25rem);
	max-width: 640px;
	margin-inline: auto;
	text-align: left;
}

.fso-inquiry-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.fso-inquiry-field label {
	font-family: var(--wp--preset--font-family--public-sans, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	color: var(--wp--preset--color--midnight, #050A18);
}

.fso-inquiry-field .fso-req {
	color: var(--wp--preset--color--velvet, #8B0000);
}

.fso-inquiry-form input,
.fso-inquiry-form select,
.fso-inquiry-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--wp--preset--color--midnight, #050A18);
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--border, #E5E1D8);
	border-radius: var(--wp--custom--radius, 0.5rem);
}

.fso-inquiry-form input:focus,
.fso-inquiry-form select:focus,
.fso-inquiry-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--gold, #C5A059);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--gold, #C5A059);
}

.fso-inquiry-submit {
	margin: 0.5rem 0 0;
}

.fso-inquiry-form button[type="submit"] {
	display: inline-block;
	padding: 0.85rem 2rem;
	font-family: var(--wp--preset--font-family--public-sans, sans-serif);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--midnight, #050A18);
	background: var(--wp--preset--color--gold, #C5A059);
	border: 0;
	border-radius: var(--wp--custom--radius, 0.5rem);
	cursor: pointer;
	transition: filter 0.2s ease;
}

.fso-inquiry-form button[type="submit"]:hover {
	filter: brightness(1.08);
}

.fso-inquiry-notice {
	max-width: 640px;
	margin: 0 auto var(--wp--preset--spacing--30, 1.25rem);
	padding: 0.85rem 1.1rem;
	border-radius: var(--wp--custom--radius, 0.5rem);
	border-left: 4px solid;
	font-weight: 600;
}

.fso-inquiry-notice--ok {
	color: var(--wp--preset--color--midnight, #050A18);
	background: rgba(197, 160, 89, 0.14);
	border-left-color: var(--wp--preset--color--gold, #C5A059);
}

.fso-inquiry-notice--error {
	color: var(--wp--preset--color--velvet, #8B0000);
	background: rgba(139, 0, 0, 0.08);
	border-left-color: var(--wp--preset--color--velvet, #8B0000);
}

/* -------------------------------------------------------------------------
 * Front-page hero (fso/hero) — Option B, Base44-matched treatment.
 * ---------------------------------------------------------------------- */

/* Directional overlay: darkest on the left (behind the text column), clearing
 * to the right so the conductor/orchestra reads through. Replaces the flat dim. */
.fso-hero .wp-block-cover__background {
	background:
		linear-gradient(to top, rgba(5, 10, 24, 0.55) 0%, rgba(5, 10, 24, 0) 45%),
		linear-gradient(
			90deg,
			rgba(5, 10, 24, 0.92) 0%,
			rgba(5, 10, 24, 0.74) 48%,
			rgba(5, 10, 24, 0.5) 100%
		) !important;
	opacity: 1 !important;
}

/* Hero slideshow (fso/hero): crossfading Ken Burns slides behind the scrim,
 * driven by assets/js/hero-slider.js. Replaces the single cover image with the
 * three Base44 home-hero photos. Sits at z-index 0 so the cover's directional
 * scrim (above) and content read over it. */
.fso-hero .fso-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.fso-hero .fso-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.7s ease;
}

.fso-hero .fso-hero__slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.fso-hero .fso-hero__slide {
		animation: fso-hero-kenburns 12s ease-in-out infinite;
	}
}

@keyframes fso-hero-kenburns {
	0%,
	100% {
		transform: scale(1.04) translate(0, 0);
	}
	50% {
		transform: scale(1.04) translate(-0.6%, -0.4%);
	}
}

/* Dot indicators, bottom-right (Base44). Anchored to the bottom of the first
 * ~viewport (the hero runs taller than 88vh once the first-timer strip and the
 * signup form stack in), so they stay visible rather than sinking to the far
 * bottom of the section. Hidden on mobile, like the source. */
.fso-hero .fso-hero__dots {
	position: absolute;
	top: calc(88vh - 3.25rem);
	bottom: auto;
	right: 2rem;
	z-index: 3;
	display: flex;
	gap: 0.5rem;
}

@media (max-width: 781px) {
	.fso-hero .fso-hero__dots {
		display: none;
	}
}

.fso-hero .fso-hero__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	background: color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent);
	transition: width 0.4s ease, background-color 0.4s ease;
}

.fso-hero .fso-hero__dot.is-active {
	width: 20px;
	background: var(--wp--preset--color--gold);
}

.fso-hero .fso-hero__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Buttons: uppercase, letter-spaced, near-sharp corners — Base44 hero style. */
.fso-hero .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: 2px;
	padding: 0.85rem 1.6rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Headline: Cormorant Garamond italic 600, matching Base44 exactly. */
.fso-hero h1 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Lede under the headline. Sized and coloured here rather than via presets:
   the parchment tint is 80% alpha, which the palette has no token for, and
   preset font-size classes carry !important so CSS could not trim them. */
.fso-hero__lede {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	color: rgba(244, 241, 234, 0.8);
}

/* The manual break is a desktop-only typographic choice; below the two-column
   breakpoint the lede wraps to the measure on its own. */
.fso-hero__lede br {
	display: none;
}

@media (min-width: 992px) {
	.fso-hero__lede br {
		display: inline;
	}
}

/* Gold rule under the headline. */
.fso-hero__rule {
	width: 3.5rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
	margin: 0.75rem 0;
}

/* Keep the three hero CTAs on a single row on desktop; they wrap on narrow. */
@media (min-width: 992px) {
	.fso-hero__ctas {
		flex-wrap: nowrap;
	}

	.fso-hero__ctas .wp-block-button__link {
		white-space: nowrap;
	}
}

/* Stay Connected box (newsletter signup) in the hero left column. */
.fso-stayconnected {
	margin-top: 1.75rem;
	max-width: 420px;
	border: 1px solid rgba(197, 160, 89, 0.4);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	padding: 1rem 1.1rem;
}

.fso-stayconnected__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.fso-stayconnected__icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--wp--preset--color--gold);
	background: rgba(197, 160, 89, 0.12);
	border: 1px solid rgba(197, 160, 89, 0.4);
}

.fso-stayconnected__icon svg {
	width: 16px;
	height: 16px;
}

.fso-stayconnected__label {
	color: var(--wp--preset--color--gold);
	font-size: 0.68rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-weight: 600;
}

.fso-stayconnected__text {
	color: rgba(244, 241, 234, 0.72);
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0.75rem 0 0.9rem;
}

.fso-stayconnected__row {
	display: flex;
	gap: 0.5rem;
}

.fso-stayconnected__row input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.8rem;
	font: inherit;
	font-size: 0.85rem;
	color: var(--wp--preset--color--parchment);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(197, 160, 89, 0.25);
	border-radius: 2px;
}

.fso-stayconnected__row input::placeholder {
	color: rgba(244, 241, 234, 0.4);
}

.fso-stayconnected__row input:focus {
	outline: none;
	border-color: rgba(197, 160, 89, 0.6);
}

.fso-stayconnected__row button {
	padding: 0.6rem 1.1rem;
	font: inherit;
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--midnight);
	background: var(--wp--preset--color--gold);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.2s ease;
}

.fso-stayconnected__row button:hover {
	filter: brightness(1.08);
}

/* -------------------------------------------------------------------------
 * Front-page header: transparent, overlaid on the dark hero so it merges with
 * the image (like Base44) instead of a white slab. Interior pages keep the
 * light header (honours the client's "lighten the header" request — this is
 * minimal/airy over the hero, not the heavy dark bar they objected to).
 * ---------------------------------------------------------------------- */
/* Overlay only where the header is a single row. Below 992px the nav buttons
   stack and it grows to ~284px, which buried the top of the hero copy behind
   it; there it stays in normal flow and the hero starts underneath. */
@media (min-width: 992px) {
	.home header.wp-block-template-part {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
	}

	/* Offset the overlay below the WP admin bar when logged in. */
	.admin-bar.home header.wp-block-template-part {
		top: 32px;
	}
}

.home header.wp-block-template-part > .wp-block-group {
	background: transparent !important;
	border-bottom: 0 !important;
	/* The bar's own compact padding (spacing-20) sets its height now; the old
	 * spacing-40 here just doubled it up and made the header too tall. */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.home header .wp-block-site-title a,
.home header .wp-block-navigation a,
.home header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--parchment) !important;
}

.home header .wp-block-site-title a:hover,
.home header .wp-block-navigation a:hover,
.home header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold) !important;
}

/* The header's gold rule + hero fade-out live on .fso-header::after in
 * parts/header.html (they have to be one pseudo-element to stack the rule over
 * the fade). Nothing to add here — the old 1px hairline was replaced by it. */

/* Nav hover → gold across the header (interior + hero). */
header .wp-block-navigation a:hover,
header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold) !important;
}

/* Brand logo lockup (fso/brand) in the header. Navy-field emblem — reads on
 * both the dark home hero and the light interior header. */
.fso-brand {
	margin: 0;
	/* The logo's <a> is inline, so its line-height added ~8px of dead space under
	 * the image — enough to push the fixed bar out of sync with
	 * .fso-header-spacer and let content slip under the header. */
	line-height: 0;
}

.fso-brand a {
	display: block;
}

.fso-brand img {
	height: 44px;
	width: auto;
	display: block;
	border-radius: 3px;
}

@media (min-width: 782px) {
	.fso-brand img {
		height: 52px;
	}
}

/* -------------------------------------------------------------------------
 * Hero: first-timer strip (in the left column) + overlaid "Hear the FSO"
 * audio player, top-right. Mirrors the Base44 home hero.
 * ---------------------------------------------------------------------- */

/* Make the cover's inner container span the full hero width so the audio card
 * anchors to the true right edge; keep the content column left-aligned. */
.fso-hero > .wp-block-cover__inner-container {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

/* The front-page header is an absolute overlay (~137px tall), so the hero
   needs a top inset that clears it. Matching the bottom keeps the content
   optically centred: the content is tall enough to fill the cover, leaving no
   slack for align-self to distribute, so equal padding is what centres it.
   !important because the cover block emits padding as an inline style. */
@media (min-width: 992px) {
	.fso-hero {
		padding-top: 10.5rem !important;
		padding-bottom: 10.5rem !important;
	}
}

/* Desktop: switch the inner container from the stacked column above to a real
   two-column row, so the content and the audio card share a top edge.
   In column mode `justify-content: center` did the vertical centring; in row
   mode that axis flips, so centring moves to align-self on the container
   itself (the cover is a flex row with align-items: center). align-items
   stays flex-start so the two columns keep a shared top edge. */
@media (min-width: 992px) {
	.fso-hero > .wp-block-cover__inner-container {
		align-self: center;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--60);
	}
}

/* Keep in sync with the group's contentSize in patterns/hero.php — this rule
   wins over the block layout CSS, so the two must agree. */
.fso-hero > .wp-block-cover__inner-container > .wp-block-group {
	margin: 0 !important;
	max-width: 820px;
	width: 100%;
}

/* First-timer strip */
.fso-firsttimer {
	margin-top: 2.5rem;
	max-width: 720px;
	border: 1px solid rgba(197, 160, 89, 0.3);
	background: rgba(197, 160, 89, 0.04);
}

.fso-firsttimer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 1.1rem;
	border-bottom: 1px solid rgba(197, 160, 89, 0.2);
	text-decoration: none;
}

.fso-firsttimer__eyebrow {
	color: var(--wp--preset--color--gold);
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 600;
}

.fso-firsttimer__link {
	color: var(--wp--preset--color--parchment);
	opacity: 0.75;
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fso-firsttimer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.fso-firsttimer__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1.6rem 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--parchment);
	transition: background-color 0.2s ease;
}

.fso-firsttimer__item + .fso-firsttimer__item {
	border-left: 1px solid rgba(197, 160, 89, 0.15);
}

.fso-firsttimer__item:hover {
	background: rgba(197, 160, 89, 0.08);
}

.fso-firsttimer__item svg {
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--gold);
}

.fso-firsttimer__item span {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
}

/* "Hear the FSO" audio card — inline on mobile, overlaid top-right on desktop. */
.fso-hear {
	margin-top: 2rem;
	width: 100%;
	max-width: 400px;
	background: rgba(5, 10, 24, 0.94);
	border: 1px solid rgba(197, 160, 89, 0.5);
	border-radius: 4px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow: hidden;
}

/* Desktop: lay the hero out as two real columns so the card's top edge and the
   content's top edge are the same flex baseline. Absolute positioning put the
   alignment at the mercy of the cover's centring maths; this cannot drift. */
@media (min-width: 992px) {
	.fso-hear {
		position: static;
		/* The cover's constrained layout sets auto side margins with
		   !important; inside a flex row those eat the free space and shove
		   the card out of line. */
		margin: 0 !important;
		flex: 0 0 400px;
		width: 400px;
		z-index: 6;
	}
}

.fso-hear__head {
	padding: 1.15rem 1.4rem;
	border-bottom: 1px solid rgba(197, 160, 89, 0.25);
}

.fso-hear__title {
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-size: 0.875rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	font-weight: 600;
}

.fso-hear__sub {
	margin: 0.35rem 0 0;
	color: rgba(244, 241, 234, 0.7);
	font-size: 0.8125rem;
}

.fso-hear__track {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.05rem 1.4rem;
	text-align: left;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(197, 160, 89, 0.18);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.fso-hear__track:last-child {
	border-bottom: 0;
}

.fso-hear__track.is-active {
	background: rgba(197, 160, 89, 0.1);
}

.fso-hear__orb {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fso-hear__orb::before {
	content: "▶";
	color: var(--wp--preset--color--midnight);
	font-size: 0.85rem;
	margin-left: 2px;
}

.fso-hear__track.is-playing .fso-hear__orb {
	background: rgba(197, 160, 89, 0.25);
	border: 1px solid var(--wp--preset--color--gold);
}

.fso-hear__track.is-playing .fso-hear__orb::before {
	content: "❚❚";
	color: var(--wp--preset--color--gold);
	font-size: 0.72rem;
	margin-left: 0;
	letter-spacing: 1px;
}

.fso-hear__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.fso-hear__name {
	color: var(--wp--preset--color--parchment);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}

.fso-hear__track.is-active .fso-hear__name {
	color: var(--wp--preset--color--gold);
}

.fso-hear__artist {
	color: rgba(244, 241, 234, 0.65);
	font-size: 0.8125rem;
	margin-top: 3px;
}

.fso-hear__live {
	color: rgba(244, 241, 234, 0.55);
	font-size: 0.75rem;
	margin-top: 2px;
}

.fso-hear__bars {
	display: none;
	align-items: flex-end;
	gap: 2px;
	height: 18px;
	flex-shrink: 0;
}

.fso-hear__track.is-playing .fso-hear__bars {
	display: flex;
}

.fso-hear__bars i {
	width: 3px;
	height: 40%;
	background: var(--wp--preset--color--gold);
	border-radius: 2px;
}

.fso-hear__bars i:nth-child(1) { animation: fsoBar 0.60s ease-in-out infinite alternate; }
.fso-hear__bars i:nth-child(2) { animation: fsoBar 0.72s ease-in-out infinite alternate; }
.fso-hear__bars i:nth-child(3) { animation: fsoBar 0.84s ease-in-out infinite alternate; }
.fso-hear__bars i:nth-child(4) { animation: fsoBar 0.96s ease-in-out infinite alternate; }

@keyframes fsoBar {
	from { height: 25%; }
	to { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fso-hear__bars i { animation: none; height: 60%; }
}

/* -------------------------------------------------------------------------
 * Home replica sections (fso/home-*) — matches the Base44 home.
 * ---------------------------------------------------------------------- */

/* "Take Your Seats" — ornamental gold frame + corner accents over the image. */
.fso-seats {
	--fso-seats-inset: clamp(1.25rem, 3vw, 2.5rem);
}

/* Sits flush against the hero above and the concert strip below — no seam of
   page background showing through. Doubled class outruns the layout blockGap
   rule, which is printed after the theme stylesheet. */
.fso-seats.fso-seats { margin-block: 0; }
.fso-seats.fso-seats + * { margin-block-start: 0; }

.fso-seats .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Radial vignette instead of a flat dim, so the centre of the frame stays lit. */
.fso-seats > .wp-block-cover__background {
	background: radial-gradient(
		ellipse at center,
		rgba(5, 10, 24, 0.30) 0%,
		rgba(5, 10, 24, 0.85) 70%,
		rgba(5, 10, 24, 0.96) 100%
	);
	opacity: 1;
}

.fso-seats::before {
	content: "";
	position: absolute;
	inset: var(--fso-seats-inset);
	border: 1px solid rgba(197, 160, 89, 0.45);
	box-shadow:
		inset 0 0 90px rgba(5, 10, 24, 0.85),
		0 0 60px rgba(197, 160, 89, 0.15);
	pointer-events: none;
	z-index: 1;
}

/* Four gold corner brackets, drawn as eight gradient strips on one layer. */
.fso-seats::after {
	--fso-corner: var(--wp--preset--color--gold);
	--fso-corner-t: 2px;
	--fso-corner-l: 28px;
	content: "";
	position: absolute;
	inset: calc(var(--fso-seats-inset) - 0.9rem);
	pointer-events: none;
	z-index: 1;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--fso-corner), var(--fso-corner)),
		linear-gradient(var(--fso-corner), var(--fso-corner)),
		linear-gradient(var(--fso-corner), var(--fso-corner)),
		linear-gradient(var(--fso-corner), var(--fso-corner)),
		linear-gradient(var(--fso-corner), var(--fso-corner)),
		linear-gradient(var(--fso-corner), var(--fso-corner)),
		linear-gradient(var(--fso-corner), var(--fso-corner)),
		linear-gradient(var(--fso-corner), var(--fso-corner));
	background-size:
		var(--fso-corner-l) var(--fso-corner-t), var(--fso-corner-t) var(--fso-corner-l),
		var(--fso-corner-l) var(--fso-corner-t), var(--fso-corner-t) var(--fso-corner-l),
		var(--fso-corner-l) var(--fso-corner-t), var(--fso-corner-t) var(--fso-corner-l),
		var(--fso-corner-l) var(--fso-corner-t), var(--fso-corner-t) var(--fso-corner-l);
	background-position:
		0 0, 0 0,
		100% 0, 100% 0,
		0 100%, 0 100%,
		100% 100%, 100% 100%;
}

/* Headline — Cormorant italic 600, oversized, with a slow gold bloom. */
.fso-seats__title {
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-block-end: 0;
	animation: fsoSeatsTitleGlow 3s ease-in-out infinite;
}

@keyframes fsoSeatsTitleGlow {
	0%, 100% {
		text-shadow:
			0 0 30px rgba(197, 160, 89, 0.50),
			0 0 80px rgba(197, 160, 89, 0.25),
			0 0 12px rgba(244, 241, 234, 0.40);
	}
	50% {
		text-shadow:
			0 0 60px rgba(197, 160, 89, 0.85),
			0 0 160px rgba(197, 160, 89, 0.45),
			0 0 24px rgba(244, 241, 234, 0.80);
	}
}

/* Short gold rule that draws itself in under the headline. */
.fso-seats hr.fso-seats__rule {
	width: 80px;
	max-width: 80px;
	height: 1px;
	border: 0;
	background: var(--wp--preset--color--gold);
	opacity: 1;
	margin: var(--wp--preset--spacing--30) auto;
	animation: fsoSeatsRuleGrow 1.2s ease-out both;
}

@keyframes fsoSeatsRuleGrow {
	from { width: 0; }
	to   { width: 80px; }
}

/* CTA — brushed-gold gradient, parchment border, pulsing glow + shine sweep. */
.fso-seats__cta .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.125rem 2.875rem;
	border: 2.5px solid var(--wp--preset--color--parchment);
	border-radius: 2px;
	background-image: linear-gradient(135deg, #8B6A2E 0%, #E8C97A 45%, #F4D88A 55%, #8B6A2E 100%);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.85rem, 1.7vw, 1.1rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	animation: fsoSeatsCtaGlow 2.2s ease-in-out infinite;
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.fso-seats__cta .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.15em;
	line-height: 1;
	letter-spacing: 0;
}

/* Shine sweep — negative z-index keeps it over the gradient but under the label. */
.fso-seats__cta .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: -1;
	width: 60%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
	transform: translateX(-160%) skewX(-18deg);
	pointer-events: none;
	animation: fsoSeatsCtaShine 2.4s ease-in-out infinite;
}

.fso-seats__cta .wp-block-button__link:hover,
.fso-seats__cta .wp-block-button__link:focus-visible {
	filter: brightness(1.25);
}

/* Narrow screens: the desktop padding + tracking pushes the label past the
   ornamental frame and wraps it onto two lines. Tighten both, keep one line. */
@media (max-width: 600px) {
	.fso-seats__cta .wp-block-button__link {
		max-width: 100%;
		gap: 0.6rem;
		padding: 0.95rem 1.6rem;
		letter-spacing: 0.14em;
	}
}

@keyframes fsoSeatsCtaGlow {
	0%, 100% {
		box-shadow:
			0 0 40px rgba(197, 160, 89, 0.70),
			0 0 90px rgba(197, 160, 89, 0.45),
			0 0 4px rgba(244, 241, 234, 0.80),
			inset 0 0 14px rgba(255, 255, 255, 0.20);
		transform: scale(1);
	}
	50% {
		box-shadow:
			0 0 90px rgba(244, 216, 138, 1),
			0 0 180px rgba(197, 160, 89, 0.70),
			0 0 280px rgba(197, 160, 89, 0.40),
			0 0 10px rgba(244, 241, 234, 1),
			inset 0 0 32px rgba(255, 255, 255, 0.50);
		transform: scale(1.06);
	}
}

@keyframes fsoSeatsCtaShine {
	0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
	10%  { opacity: 1; }
	45%  { transform: translateX(280%) skewX(-18deg); opacity: 1; }
	46%  { opacity: 0; }
	100% { transform: translateX(280%) skewX(-18deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fso-seats__title,
	.fso-seats hr.fso-seats__rule,
	.fso-seats__cta .wp-block-button__link,
	.fso-seats__cta .wp-block-button__link::before {
		animation: none;
	}
	.fso-seats__cta .wp-block-button__link::before { opacity: 0; }
}

/* Next Concert — Base44 NextConcertStrip. Hairlines are gold at low alpha
   (Base44 uses #C5A05930 / #C5A05940), not the full-strength preset. */
.fso-nextconcert {
	border-top: 1px solid rgba(197, 160, 89, 0.19);
	border-bottom: 1px solid rgba(197, 160, 89, 0.19);
}

/* 16:10 frame instead of a fixed 260px box — this is what makes the strip
   read as tall as the Base44 original. */
.fso-nextconcert__img {
	min-height: 0;
	aspect-ratio: 16 / 10;
	border: 1px solid rgba(197, 160, 89, 0.25);
}

/* Date badge pinned to the image bottom, over a foot gradient. */
.fso-nextconcert__img .wp-block-cover__inner-container {
	align-self: flex-end;
	width: 100%;
}
.fso-nextconcert__img > .wp-block-cover__background {
	background: linear-gradient(to top, rgba(5, 10, 24, 0.75) 0%, transparent 55%);
	opacity: 1;
}
.fso-nextconcert__date { margin: 0; }

.fso-nextconcert__caption {
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 18px rgba(197, 160, 89, 0.25);
}

/* Base44 caps the brief at 540px; the wider measure was flattening the strip. */
.fso-nextconcert__brief,
.fso-nextconcert__onsale {
	max-width: 540px;
}

/* CTAs: square, uppercase, letter-spaced — no theme button radius here. */
.fso-nextconcert__ctas .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0;
	padding: 0.875rem 1.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.fso-nextconcert__ctas .wp-block-button__link:hover,
.fso-nextconcert__ctas .wp-block-button__link:focus-visible {
	filter: brightness(1.1);
	box-shadow: 0 0 25px rgba(197, 160, 89, 0.5);
}

.fso-nextconcert__promo .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.1em;
	line-height: 1;
	letter-spacing: 0;
}

/* Shared highlight sections (Vibe / Community Echoes / Social Proof). */
.fso-hl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 2.75rem);
	max-width: 900px;
	margin: var(--wp--preset--spacing--50) auto 0;
}
.fso-hl-card {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: min(78vw, 260px);
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid rgba(197, 160, 89, 0.25);
	text-decoration: none;
}
.fso-hl-card--portrait { aspect-ratio: 9 / 16; width: min(70vw, 230px); }
.fso-hl-card--square { aspect-ratio: 4 / 5; }
.fso-hl-card--wide { aspect-ratio: 5 / 4; width: min(80vw, 300px); }
.fso-hl-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fso-hl-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 10, 24, 0.8) 0%, transparent 55%);
}
.fso-hl-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(197, 160, 89, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 0 30px rgba(197, 160, 89, 0.5);
}
.fso-hl-play svg { width: 22px; height: 22px; color: var(--wp--preset--color--midnight); margin-left: 3px; }
.fso-hl-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--parchment);
	font-size: 0.72rem;
	font-weight: 600;
}
.fso-hl-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--midnight);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem;
	font-weight: 700;
}
.fso-hl-caption {
	position: absolute;
	bottom: 0.75rem;
	left: 0.85rem;
	right: 0.85rem;
	z-index: 2;
	color: rgba(244, 241, 234, 0.92);
	font-size: 0.8rem;
	line-height: 1.35;
	font-style: italic;
}
.fso-hl-text { flex: 1; min-width: 260px; max-width: 420px; text-align: left; }
.fso-hl-quote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.35;
	color: rgba(244, 241, 234, 0.85);
	margin: 0 0 1.25rem;
}
.fso-hl-tag { color: var(--wp--preset--color--gold); }
.fso-hl-cta {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--midnight);
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
	transition: filter 0.2s ease;
}
.fso-hl-cta:hover { filter: brightness(1.08); }

/* -------------------------------------------------------------------------
 * Season schedule (fso/season-schedule) — concert cards.
 * ---------------------------------------------------------------------- */
.fso-concert__img img {
	width: 100%;
	border-radius: 4px;
	display: block;
}

.fso-program {
	margin-top: 0.5rem;
	border-top: 1px solid rgba(197, 160, 89, 0.25);
	padding-top: 0.75rem;
}

.fso-program summary {
	cursor: pointer;
	color: var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	list-style: none;
}

.fso-program summary::-webkit-details-marker { display: none; }
.fso-program summary::after { content: " ▾"; }
.fso-program[open] summary::after { content: " ▴"; }

.fso-listen { background: rgba(197, 160, 89, 0.06); }