/*
 Theme Name:   Twenty Twenty-Five Child
 Theme URI:    https://setdev.net/
 Description:  Child theme for Springs Ensemble Theatre
 Author:       Springs Ensemble Theatre
 Template:     twentytwentyfive
 Version:      1.1.0
*/

/* ==========================================================================
   1. Global Foundations
   All design tokens (colors, card overlays) now live in theme.json and are
   referenced here via var(--wp--preset--*) / var(--wp--custom--*). No
   literal hex/rgba values or locally-defined :root variables remain below
   except the two status colors already covered by theme.json tokens.
   ========================================================================== */

body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
}

/* Mobile nav overlay — WordPress's Navigation block overlay dialog doesn't
   reliably inherit body font-family in all cases; declaring it explicitly
   here guarantees Oswald renders in the mobile menu regardless of cause. */
.wp-block-navigation__responsive-dialog,
.wp-block-navigation-overlay,
.wp-block-navigation__responsive-container {
	font-family: var(--wp--preset--font-family--oswald);
}

/* Header ticket button — keep "Buy Tickets" on one line at all widths. */
.site-header__ticket-button .wp-block-button__link {
	white-space: nowrap;
}

/* Focus Rings — kept !important intentionally: focus visibility must never
   lose to another rule, regardless of specificity or load order. */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
.past-seasons__link:focus-visible,
.production-gallery__link:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 4px !important;
}

/* Sitewide Main Body Links
   !important removed here: WordPress's global-styles link element rule is
   wrapped in :where(), which carries zero specificity by design — this
   selector already wins without forcing it. Verify visually after deploy;
   restore !important on text-decoration-line if anything regresses. */
main a:not(.wp-element-button):not(.wp-block-button__link):not(.production-gallery__link):not(.past-seasons__link) {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
	transition: color 150ms ease, text-decoration-thickness 150ms ease;
}

main a:not(.wp-element-button):not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--accent-gray);
	text-decoration-thickness: 0.12em;
}


/* ==========================================================================
   2. Unified Production Card Component (Equal-Height Enforced)
   ========================================================================== */
.tickets-page__featured-production-card,
.home-production-card,
.venue-production-card {
	position: relative;
	/* display/flex kept !important: overriding block "layout" support
	   classes (.is-layout-*) that WordPress generates with real class
	   specificity, not :where()-wrapped. */
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	width: 100%;
	height: 100%;
	min-height: 480px;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Image Backgrounds — kept !important: WordPress core's own cover-block
   stylesheet sets object-fit/position on .wp-block-cover__image-background
   with !important, so matching it is required, not optional, to win. */
.tickets-page__featured-image,
.home-production-card__image,
.venue-production-card .wp-block-cover__image-background {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* Card Overlays — gradients now sourced from theme.json settings.custom,
   so they're editable in one place and available to any future component
   that needs the same treatment, not just this one. */
.tickets-page__featured-overlay,
.home-production-card__overlay {
	position: absolute !important;
	inset: 0;
	z-index: 1;
	background: var(--wp--custom--card--overlay--linear);
}

.tickets-page__featured-production-card .tickets-page__featured-overlay {
	background: var(--wp--custom--card--overlay--hero);
}

/* Card Inner Content */
.tickets-page__featured-content,
.home-production-card__content,
.venue-production-card__content {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	margin-top: auto;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	color: var(--wp--preset--color--contrast);
	text-align: left;
}

/* Titles & Responsive Text Protection */
.tickets-page__featured-title,
.home-production-card__title,
.venue-production-card__title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(1.75rem, 4vw, 3.5rem);
	line-height: 0.95;
	text-transform: uppercase;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

/* Kept !important throughout this block: overriding link color/decoration
   set by the core/post-title element style (theme.json "elements.link"),
   which shares equal class-level specificity here. */
.tickets-page__featured-title a,
.home-production-card__title a,
.venue-production-card__title a {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 0.06em !important;
	text-underline-offset: 0.12em !important;
	transition: color 150ms ease;
}

.tickets-page__featured-title a:hover,
.home-production-card__title a:hover,
.venue-production-card__title a:hover {
	color: var(--wp--preset--color--accent-gray) !important;
}

/* Metadata Sublines */
.production-playwright {
	margin: 0.4rem 0 0;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 500;
}

.production-date-range {
	margin: 0.35rem 0 0;
	font-size: clamp(1.15rem, 2vw, 1.65rem);
	font-weight: 700;
	line-height: 1.1;
}

.tickets-page__featured-director,
.home-production-card__director {
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
	opacity: 0.9;
}


/* ==========================================================================
   3. Status Badges
   ========================================================================== */
.production-status {
	display: inline-block;
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.production-status--now-playing { color: var(--wp--preset--color--status-now-playing); }
.production-status--up-next { color: var(--wp--preset--color--accent-orange); }
.production-status--coming-soon { color: var(--wp--preset--color--status-coming-soon); }
.production-status-card:empty { display: none; }


/* ==========================================================================
   4. Production Grids, Gallery & Patron Info
   ========================================================================== */
.home-production-grid,
.venue-productions__grid {
	/* display/grid-template-columns kept !important: same reasoning as the
	   card component above — overriding real-class block layout support. */
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: stretch;
}

/* Patron Information Grid */
.patron-information {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid currentColor;
	border-radius: 0.5rem;
}
.patron-information h2 { margin-top: 0; }
.patron-information__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 2rem;
}

/* Gallery Section */
.production-gallery { margin-block: clamp(2rem, 5vw, 4rem); }
.production-gallery h2 { margin-top: 0; margin-bottom: 1.25rem; }
.production-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.production-gallery__item { margin: 0; }
.production-gallery__link {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 0.25rem;
}
.production-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 200ms ease;
}
.production-gallery__link:hover .production-gallery__image { transform: scale(1.03); }

/* Video Embeds */
.production-video__embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.production-video__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ==========================================================================
   5. People Directory & Profiles
   ========================================================================== */
.people-archive__grid .wp-block-post { display: flex; }

.person-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-top: 1rem;
	border-top: 1px solid currentColor;
	text-align: left;
}

.person-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.person-card__title {
	margin: 0;
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	text-transform: uppercase;
}


/* ==========================================================================
   6. Season Directory Navigation
   ========================================================================== */
.past-seasons__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.past-seasons__link {
	display: flex;
	flex-direction: column;
	min-width: 10rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast) !important;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease;
}

.past-seasons__link:hover,
.past-seasons__item--active .past-seasons__link {
	border-color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
}


/* ==========================================================================
   7. Header, Footer & Integrations
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

.home-page__newsletter-widget,
.plan-visit-page__closing {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
	padding: 1rem;
	border-radius: 4px;
}

.site-footer {
	width: 100%;
	margin-block-start: 0;
}


/* ==========================================================================
   8. Responsive Media Queries
   ========================================================================== */
@media (max-width: 900px) {
	.home-production-grid,
	.venue-productions__grid,
	.people-archive__grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.home-production-grid,
	.venue-productions__grid,
	.patron-information__grid,
	.venue-information,
	.people-archive__grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.tickets-page__featured-production-card,
	.home-production-card,
	.venue-production-card {
		min-height: 420px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, ::before, ::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}