/*
Theme Name: Apollo Civic Theatre
Theme URI: https://apollocivictheatre.org
Description: GeneratePress child theme for Apollo Civic Theatre. Carries the theatre's existing brand (Apollo marquee red #bf392b, Abril Fatface display + Poppins body) onto a lightweight, secure, fully block-based foundation — replacing the retired WPBakery + Curly "Theatre WP" stack. Global design lives in theme.json.
Author: Apollo Civic Theatre
Template: generatepress
Version: 1.0.0
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: apollo-civic-theatre
*/

/* Component styles are added here as pages are rebuilt. Global tokens (color,
   type, spacing) are defined in theme.json so the block editor and GenerateBlocks
   inherit the Apollo brand automatically. */

/* --- Brand typography (front-end; GeneratePress renders fonts from its own CSS,
       so theme.json alone doesn't reach the front end — enforce it here). --- */
body,
button,
input,
select,
textarea {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2,
.entry-title,
.page-header h1,
.wp-block-cover h1,
.wp-block-cover h2,
.tribe-events-single-event-title {
	font-family: "Abril Fatface", Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.12;
}

/* The logo already carries the theatre name — keep the text title for
   SEO/accessibility but hide it visually. */
.site-branding .main-title {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Header logo sizing. Source is the horizontal lockup (3000×900, ratio ~3.33),
   so we cap the HEIGHT low enough that its width leaves the nav + Tickets/Donate
   room on one row; width stays auto. */
.site-logo img {
	max-height: 74px;
	width: auto;
}


/* Brand the FareHarbor persistent button to Apollo red instead of default orange */
.fh-button,
a.fh-embed-flow[data-fh-button] {
	background-color: var(--wp--preset--color--apollo-red, #bf392b) !important;
}

/* Block buttons in Apollo red. GeneratePress injects its own button color after
   the child stylesheet, so override with specificity + !important. */
.wp-block-button > .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--apollo-red, #bf392b) !important;
	color: #fff !important;
	border-radius: 2px;
	font-weight: 600;
}
.wp-block-button > .wp-block-button__link:not(.has-background):hover,
.wp-block-button > .wp-block-button__link:not(.has-background):focus {
	background-color: var(--wp--preset--color--apollo-red-dark, #8f2a20) !important;
	color: #fff !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	border: 2px solid currentColor;
	color: inherit !important;
}

/* No redundant "Home" page title on the front page */
.home .entry-header,
.home .page-header {
	display: none;
}

/* Red accent text (e.g. the mission line) without a red background box */
.apollo-accent {
	color: var(--wp--preset--color--apollo-red, #bf392b);
}

/* Guard against horizontal page scroll from full-width sections + carousels.
   `clip` (not `hidden`) doesn't create a scroll container, so sticky still works. */
body { overflow-x: clip; }

/* --- Carousel core (shared by hero + cards) --- */
.apollo-carousel { position: relative; }
.apollo-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.apollo-carousel__track::-webkit-scrollbar { display: none; }
.apollo-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
	background: rgba(191, 57, 43, 0.92);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.apollo-carousel__nav:hover { background: #bf392b; }
.apollo-carousel__nav--prev { left: 0.6rem; }
.apollo-carousel__nav--next { right: 0.6rem; }

/* --- Cards carousel ([apollo_upcoming_events]) --- */
.apollo-carousel--cards .apollo-carousel__track {
	gap: 1.25rem;
	padding: 0.5rem 0.25rem 1.5rem;
	margin: 1.5rem 0 0.5rem;
}
.apollo-event-card {
	flex: 0 0 auto;
	width: 236px;
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1919);
	display: flex;
	flex-direction: column;
}
.apollo-event-card__img img {
	width: 236px;
	height: 300px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	box-shadow: 0 2px 10px rgba(26, 25, 25, 0.14);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.apollo-event-card:hover .apollo-event-card__img img { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(26, 25, 25, 0.22); }
.apollo-event-card__date { color: var(--wp--preset--color--apollo-red, #bf392b); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.7rem; }
.apollo-event-card__title { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; margin-top: 0.15rem; }
.apollo-event-card:hover .apollo-event-card__title { color: var(--wp--preset--color--apollo-red, #bf392b); }

/* --- Hero carousel ([apollo_hero]) --- */
.apollo-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-height: 60vh;
	background: #1a1919;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	padding: 2.5rem clamp(2rem, 6vw, 5rem);
	flex-wrap: wrap;
	box-sizing: border-box;
}
.apollo-hero__media { flex: 0 1 auto; line-height: 0; }
.apollo-hero__media img { max-height: 46vh; width: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); }
.apollo-hero__content { flex: 0 1 420px; color: #fff; }
.apollo-hero__eyebrow { display: block; font-family: "Abril Fatface", Georgia, serif; color: var(--wp--preset--color--apollo-red, #bf392b); font-size: 1.15rem; margin-bottom: 0.4rem; }
.apollo-hero__title { margin: 0 0 0.4rem; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.1; }
.apollo-hero__title a { color: #fff; text-decoration: none; }
.apollo-hero__meta { color: #d8d2cb; font-size: 1rem; margin: 0 0 1.3rem; }
.apollo-hero__cta { display: inline-block; background: var(--wp--preset--color--apollo-red, #bf392b); color: #fff; padding: 0.75rem 1.7rem; border-radius: 2px; font-weight: 600; text-decoration: none; }
.apollo-hero__cta:hover { background: var(--wp--preset--color--apollo-red-dark, #8f2a20); }

@media (max-width: 640px) {
	.apollo-hero__slide { min-height: 0; padding: 2rem 1.25rem 2.5rem; gap: 1.5rem; }
	.apollo-hero__media img { max-height: 40vh; }
	.apollo-hero__content { flex-basis: 100%; text-align: center; }
	.apollo-carousel__nav { width: 40px; height: 40px; font-size: 1.4rem; }
}

/* Persistent "Buy Tickets" call-to-action button in the primary nav */
.main-navigation .main-nav ul li.nav-cta > a {
	background-color: var(--wp--preset--color--apollo-red, #bf392b);
	color: #fff;
	margin: 0.35em 0.4em;
	border-radius: 3px;
	font-weight: 600;
}
.main-navigation .main-nav ul li.nav-cta > a:hover,
.main-navigation .main-nav ul li.nav-cta > a:focus {
	background-color: var(--wp--preset--color--apollo-red-dark, #8f2a20);
	color: #fff;
}
/* On mobile the button spans the menu row like other items */
@media (max-width: 768px) {
	.main-navigation .main-nav ul li.nav-cta > a { margin: 0; border-radius: 0; }
}

/* Distinguish the header Donate button from Buy Tickets (outline) */
.main-navigation .main-nav ul li.nav-cta--donate > a {
	background-color: transparent;
	color: var(--wp--preset--color--apollo-red, #bf392b);
	border: 2px solid var(--wp--preset--color--apollo-red, #bf392b);
}
.main-navigation .main-nav ul li.nav-cta--donate > a:hover,
.main-navigation .main-nav ul li.nav-cta--donate > a:focus {
	background-color: var(--wp--preset--color--apollo-red, #bf392b);
	color: #fff;
}

/* Footer social icons */
.apollo-social { display: flex; gap: 1rem; justify-content: center; margin: 0 0 0.75rem; }
.apollo-social a { color: var(--wp--preset--color--ink, #1a1919); display: inline-flex; transition: color 0.15s ease; }
.apollo-social a:hover, .apollo-social a:focus { color: var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-footer-line { margin: 0; }
.apollo-footer-links { margin: 0 0 0.4rem; text-align: center; }
.apollo-footer-links a { color: var(--wp--preset--color--ink, #1a1919); text-decoration: none; font-weight: 500; }
.apollo-footer-links a:hover, .apollo-footer-links a:focus { color: var(--wp--preset--color--apollo-red, #bf392b); text-decoration: underline; }

/* Special Events grid */
.apollo-special-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin: 1.75rem 0; }
.apollo-special-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; }
.apollo-special-card:hover, .apollo-special-card:focus { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.apollo-special-card__img img { display: block; width: 100%; height: 200px; object-fit: cover; }
.apollo-special-card__body { padding: 1rem 1.15rem 1.25rem; }
.apollo-special-card__date { display: block; font-family: 'Poppins', sans-serif; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--apollo-red, #bf392b); font-weight: 600; margin-bottom: .35rem; }
.apollo-special-card__title { display: block; font-family: 'Abril Fatface', Georgia, serif; font-size: 1.25rem; line-height: 1.2; color: var(--wp--preset--color--ink, #1a1919); }

/* Audition form */
.apollo-audition { max-width: 640px; }
.apollo-audition-form label { display: block; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .95rem; margin-bottom: 1rem; }
.apollo-audition-form label span { color: var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-audition-form input[type="text"], .apollo-audition-form input[type="email"], .apollo-audition-form input[type="tel"], .apollo-audition-form textarea, .apollo-audition-form input[type="file"] { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; border: 1px solid rgba(0,0,0,.25); border-radius: 5px; font-size: 1rem; font-weight: 400; font-family: inherit; }
.apollo-audition-form input[type="file"] { padding: .5rem; background: #fafafa; }
.apollo-audition-form textarea { resize: vertical; }
.apollo-audition-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.apollo-audition-consent label { font-weight: 400; font-size: .9rem; display: flex; gap: .5rem; align-items: flex-start; }
.apollo-audition-consent input { margin-top: .2rem; }
.apollo-audition-required { font-size: .85rem; color: #666; }
.apollo-audition-error { background: #fdecea; border-left: 4px solid #bf392b; padding: .7rem 1rem; border-radius: 4px; }
.apollo-audition-thanks { background: #eef7ee; border-left: 4px solid #1a7f37; padding: 1rem 1.25rem; border-radius: 6px; }
.apollo-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 540px) { .apollo-audition-row { grid-template-columns: 1fr; } }

/* Event single: show the poster at a consistent height regardless of the source
   image's size/aspect (some are 400x600, others 2083x2560), centered. TEC wraps
   the featured image in .tribe-events-event-image. */
.tribe-events-event-image { text-align: center; margin-bottom: 1.5rem; }
.tribe-events-event-image img {
	max-height: min(520px, 65vh);
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}

/* Production / actor single: many were seeded from old posts whose body still has
   a full-size poster/banner inline. Keep those inline images at a consistent,
   contained size (posters/galleries appended by the theme are unaffected). */
body.single-production .entry-content > figure.wp-block-image,
body.single-actor .entry-content > figure.wp-block-image { text-align: center; margin-left: auto; margin-right: auto; }
body.single-production .entry-content > figure.wp-block-image img,
body.single-actor .entry-content > figure.wp-block-image img {
	max-height: 460px;
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/* Desktop nav (>=1025px, where the full menu shows). Tightened so the 6 dropdowns
   + Tickets/Donate fit on one row alongside the enlarged 100px logo. Below 1025px
   the hamburger menu takes over (see generate_mobile_menu_media_query filter). */
@media (min-width: 1025px) {
	.main-navigation .main-nav > ul > li > a { padding-left: 7px; padding-right: 7px; font-size: 0.92rem; }
	.main-navigation .main-nav ul li.nav-cta > a { padding: 0.45em 0.8em; margin: 0.3em 0.12em; white-space: nowrap; }
}

/* Mid-desktop / landscape-tablet band: nav + logo are tighter here so Tickets +
   Donate still share one row before the hamburger takes over at 1080px. */
@media (min-width: 1080px) and (max-width: 1249px) {
	.site-logo img { max-height: 64px; }
	.main-navigation .main-nav > ul > li > a { padding-left: 4px; padding-right: 4px; font-size: 0.86rem; }
	.main-navigation .main-nav ul li.nav-cta > a { padding: 0.4em 0.65em; margin: 0.3em 0.1em; }
}

/* --- Playbill: View button, QR, in-browser PDF viewer --- */
.apollo-playbill-btn {
	display: inline-block;
	background: transparent;
	color: var(--wp--preset--color--ink, #1a1919) !important;
	border: 2px solid var(--wp--preset--color--ink, #1a1919);
	padding: 0.7rem 1.6rem;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
	margin-left: 0.5rem;
}
.apollo-playbill-btn:hover, .apollo-playbill-btn:focus { background: var(--wp--preset--color--ink, #1a1919); color: #fff !important; }
.apollo-playbill-extra { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 1.5rem; font-size: 0.95rem; flex-wrap: wrap; }
.apollo-playbill-qr { display: inline-flex; }
.apollo-playbill-qr svg { width: 96px; height: 96px; }
.apollo-playbill-dl { color: var(--wp--preset--color--apollo-red, #bf392b); font-weight: 600; }

.apollo-pb-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(10, 9, 9, 0.9); overflow: auto; padding: 3vh 1rem 6vh; }
.apollo-pb-overlay.is-open { display: block; }
.apollo-pb-modal { max-width: 920px; margin: 0 auto; position: relative; }
.apollo-pb-close { position: sticky; top: 0; margin-left: auto; display: block; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--wp--preset--color--apollo-red, #bf392b); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 2; }
.apollo-pb-pages { margin-top: -44px; padding-top: 10px; }
.apollo-pb-page { display: block; width: 100%; height: auto; max-width: 900px; margin: 0 auto 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); background: #fff; border-radius: 2px; }
.apollo-pb-msg { color: #fff; text-align: center; padding: 2rem; }
.apollo-pb-msg a { color: #fff; text-decoration: underline; }

/* Make the mobile hamburger toggle clearly visible + on-brand */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
	color: var(--wp--preset--color--apollo-red, #bf392b);
	font-weight: 600;
}

/* Hide FareHarbor's fixed/floating shortcut button — we use explicit buttons. */
.fh-fixed--bottom,
.fh-fixed--top,
a[class*="fh-fixed"] {
	display: none !important;
}

/* Per-event "Buy Tickets" button on single event pages */
.apollo-buy-tickets { margin: 0 0 1.5rem; }
.apollo-buy-btn {
	display: inline-block;
	background: var(--wp--preset--color--apollo-red, #bf392b);
	color: #fff !important;
	padding: 0.8rem 2rem;
	border-radius: 3px;
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
}
.apollo-buy-btn:hover,
.apollo-buy-btn:focus { background: var(--wp--preset--color--apollo-red-dark, #8f2a20); color: #fff !important; }

/* ---------------------------------------------------------------------------
 * /live/ — YouTube channel page (live embed + past-broadcast grid)
 * ------------------------------------------------------------------------- */
.apollo-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}
.apollo-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.apollo-embed--live {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.apollo-live-note {
	margin: 0.9rem 0 0;
	color: var(--wp--preset--color--ink, #1a1919);
	opacity: 0.8;
	font-size: 0.95rem;
}
.apollo-live-h2 {
	margin: 2.4rem 0 1.1rem;
}
.apollo-live-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.4rem;
}
.apollo-live-card {
	margin: 0;
}
.apollo-live-play {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
}
.apollo-live-play img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.apollo-live-play:hover img,
.apollo-live-play:focus-visible img {
	transform: scale(1.04);
	opacity: 0.92;
}
.apollo-live-playicon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--apollo-red, #bf392b);
	border-radius: 50%;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.apollo-live-playicon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}
.apollo-live-play:focus-visible {
	outline: 3px solid var(--wp--preset--color--apollo-red, #bf392b);
	outline-offset: 3px;
}
.apollo-live-meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.55rem;
}
.apollo-live-title {
	font-weight: 600;
	line-height: 1.3;
}
.apollo-live-date {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--apollo-red, #bf392b);
	font-weight: 600;
}
.apollo-live-channel {
	margin-top: 1.8rem;
	font-weight: 600;
}
.apollo-live-channel a {
	color: var(--wp--preset--color--apollo-red, #bf392b);
	text-decoration: none;
}
.apollo-live-channel a:hover { text-decoration: underline; }
.apollo-live-h2--first { margin-top: 0.6rem; }

/* ---------------------------------------------------------------------------
 * Actors / Productions — directory grids, headshots, credits (IMDb-style)
 * ------------------------------------------------------------------------- */
.apollo-people-search {
	width: 100%;
	max-width: 420px;
	padding: 0.7rem 1rem;
	margin: 0 0 1.6rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
}
.apollo-people-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1.5rem;
}
.apollo-people-card { margin: 0; }
.apollo-people-card a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.apollo-people-photo {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: #ece9e6;
	border-radius: 6px;
	overflow: hidden;
}
.apollo-people-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}
.apollo-people-card a:hover .apollo-people-photo img,
.apollo-people-card a:focus-visible .apollo-people-photo img { transform: scale(1.05); }

/* Productions are playbill-style posters (~11:17), taller than the 3:4 actor
   headshot box — cover-fit was cropping the top ("APOLLOBILL"). Match the poster
   shape and contain so the whole cover shows. (Actors keep the 3:4 headshot box.) */
.apollo-people--production .apollo-people-photo { aspect-ratio: 11 / 17; }
.apollo-people--production .apollo-people-photo img { object-fit: contain; }

/* Directory pagination + result count */
.apollo-people-count { text-align: center; color: #6f615b; font-size: 0.9rem; margin: 0 0 1.1rem; }
.apollo-people-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 1.6rem 0 0.5rem; }
.apollo-people-pager button { min-width: 42px; padding: 8px 12px; border: 1px solid #e3d9cd; background: #fff; color: #1a1919; border-radius: 6px; font: inherit; font-size: 0.9rem; line-height: 1; cursor: pointer; }
.apollo-people-pager button:hover:not(:disabled):not(.is-current) { background: #fbf6ee; border-color: var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-people-pager button.is-current { background: var(--wp--preset--color--apollo-red, #bf392b); border-color: var(--wp--preset--color--apollo-red, #bf392b); color: #fff; font-weight: 600; cursor: default; }
.apollo-people-pager button.is-ellipsis { border: 0; background: none; min-width: 0; padding: 8px 2px; color: #9a8c82; cursor: default; }
.apollo-people-pager button:disabled { opacity: 0.4; cursor: default; }
.apollo-people-initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display, "Abril Fatface"), serif;
	font-size: 2.6rem;
	color: #fff;
	background: var(--wp--preset--color--apollo-red, #bf392b);
}
.apollo-people-name {
	display: block;
	margin-top: 0.55rem;
	font-weight: 600;
	line-height: 1.25;
	text-transform: capitalize;
}
.apollo-people-card a:hover .apollo-people-name { color: var(--wp--preset--color--apollo-red, #bf392b); }

/* Single actor / production */
.apollo-actor-head,
.apollo-prod-poster { margin: 0 0 1.4rem; }
.apollo-actor-headshot {
	max-width: 300px;
	width: 100%;
	height: auto;
	border-radius: 8px;
	float: right;
	margin: 0 0 1rem 1.6rem;
}
.apollo-prod-posterimg {
	max-width: 340px;
	width: 100%;
	height: auto;
	border-radius: 8px;
	float: right;
	margin: 0 0 1rem 1.6rem;
}
.apollo-credits-block { clear: both; margin-top: 2rem; }
.apollo-credits-block h2 { margin-bottom: 0.6rem; }
.apollo-credit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--wp--preset--color--apollo-red, #bf392b);
}
.apollo-credit-list li {
	padding: 0.55rem 0;
	border-bottom: 1px solid #e5e1dd;
	line-height: 1.4;
}
.apollo-credit-list a {
	color: var(--wp--preset--color--apollo-red, #bf392b);
	font-weight: 600;
	text-decoration: none;
}
.apollo-credit-list a:hover { text-decoration: underline; }
.apollo-credit-rolename { color: var(--wp--preset--color--ink, #1a1919); opacity: 0.85; }

@media (max-width: 480px) {
	.apollo-actor-headshot,
	.apollo-prod-posterimg { float: none; margin: 0 0 1.2rem; max-width: 100%; }
}

/* Consistent actor headshot layout: whether the photo comes from our prepended
   headshot or an inline image in the legacy bio, float it neatly beside the bio. */
.single-actor .entry-content img,
.single-actor .apollo-actor-headshot {
	max-width: 280px;
	width: 100%;
	height: auto;
	float: right;
	margin: 0.2rem 0 1rem 1.8rem;
	border-radius: 8px;
}
.single-actor .entry-content figure { margin: 0; }
@media (max-width: 480px) {
	.single-actor .entry-content img,
	.single-actor .apollo-actor-headshot { float: none; margin: 0 0 1.2rem; max-width: 100%; }
}

/* ---------------------------------------------------------------------------
 * /playbill/ — the playbill wall (magazine-cover grid, opens the PDF.js viewer)
 * ------------------------------------------------------------------------- */
.apollo-playbill-wall {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.7rem;
}
.apollo-playbill-wallitem { margin: 0; }
.apollo-playbill-card {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: center;
	color: inherit;
}
.apollo-playbill-cover {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 11 / 17;
	background: #ece9e6;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.apollo-playbill-card:hover .apollo-playbill-cover,
.apollo-playbill-card:focus-visible .apollo-playbill-cover {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}
.apollo-playbill-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.apollo-playbill-noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display, "Abril Fatface"), serif;
	color: #fff;
	background: var(--wp--preset--color--apollo-red, #bf392b);
	font-size: 1.4rem;
}
.apollo-playbill-cardtitle { display: block; margin-top: 0.6rem; font-weight: 600; line-height: 1.25; }
.apollo-playbill-card:focus-visible { outline: 3px solid var(--wp--preset--color--apollo-red, #bf392b); outline-offset: 3px; }

/* Actor photo history + production photo galleries */
.apollo-gallery-block { clear: both; margin-top: 2rem; }
.apollo-gallery-block h2 { margin-bottom: 0.8rem; }
.apollo-photo-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.9rem;
}
.apollo-photo-grid li { margin: 0; }
.apollo-photo-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	transition: transform 0.2s ease;
}
.apollo-photo-grid a:hover img,
.apollo-photo-grid a:focus-visible img { transform: scale(1.04); }

/* ---------------------------------------------------------------------------
 * Ticketing: "on sale soon" chip + early-access note
 * ------------------------------------------------------------------------- */
.apollo-onsale-soon {
	display: inline-flex;
	align-items: center;
	padding: 0.8rem 2rem;
	border-radius: 3px;
	background: #ece9e6;
	color: #6b6560;
	font-weight: 600;
	font-size: 1.05rem;
	cursor: default;
}
.apollo-free-note {
	display: inline-flex;
	align-items: center;
	padding: 0.8rem 2rem;
	border-radius: 3px;
	background: #eef7ee;
	color: #1a7f37;
	font-weight: 600;
	font-size: 1.05rem;
	cursor: default;
}
.apollo-earlyaccess-note {
	background: #fbf3d9;
	border-left: 4px solid var(--wp--preset--color--apollo-red, #bf392b);
	padding: 0.7rem 1rem;
	border-radius: 4px;
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
}
.apollo-earlyaccess-note strong { color: var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-hero__cta--soon {
	background: rgba(255, 255, 255, 0.16) !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	cursor: default;
}

.apollo-playbill-cardtitle { margin-top: 0.6rem; }
.apollo-playbill-carddate { display: block; margin-top: 0.15rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--apollo-red, #bf392b); font-weight: 600; }

/* Production run dates */
.apollo-prod-dates {
	font-weight: 600;
	color: var(--wp--preset--color--apollo-red, #bf392b);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.92rem;
	margin: 0 0 1.3rem;
}
.apollo-people-date {
	display: block;
	margin-top: 0.12rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--apollo-red, #bf392b);
	font-weight: 600;
}

.apollo-playbill-cta { margin: 0 0 1.5rem; }

/* Event → show record link */
.apollo-show-link { margin-top: 1rem; }
.apollo-show-link a { color: var(--wp--preset--color--apollo-red, #bf392b); font-weight: 600; text-decoration: none; }
.apollo-show-link a:hover { text-decoration: underline; }

/* Playbill ad artwork upload fields (WooCommerce product page) */
.apollo-ad-fields { margin: 0 0 1.3rem; padding: 1rem 1.2rem; background: #f7f5f2; border: 1px solid #e5e1dd; border-radius: 6px; }
.apollo-ad-field { margin: 0 0 0.9rem; }
.apollo-ad-field:last-child { margin-bottom: 0; }
.apollo-ad-field input[type="file"],
.apollo-ad-field textarea { width: 100%; margin-top: 0.35rem; }
.apollo-ad-help { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: #6b6560; line-height: 1.45; }

/* Employment / jobs */
.apollo-jobs-list { list-style: none; margin: 0; padding: 0; }
.apollo-job { padding: 1.3rem 0; border-bottom: 1px solid #e5e1dd; }
.apollo-job:first-child { padding-top: 0.3rem; }
.apollo-job-title { margin: 0 0 0.3rem; }
.apollo-job-title a { color: inherit; text-decoration: none; }
.apollo-job-title a:hover { color: var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-job-more { color: var(--wp--preset--color--apollo-red, #bf392b); font-weight: 600; text-decoration: none; }
.apollo-jobs-none { font-size: 1.05rem; }
.apollo-job-apply { margin-top: 2rem; padding: 1.2rem 1.4rem; background: #f7f5f2; border-left: 4px solid var(--wp--preset--color--apollo-red, #bf392b); border-radius: 4px; }
.apollo-job-apply h2 { margin-top: 0; }

/* Registration lifecycle CTA */
.apollo-reg-status { margin: 0.4rem 0 1rem; padding: 1rem 1.2rem; border-radius: 6px; background: #f7f5f2; }
.apollo-reg-full { border-left: 4px solid var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-reg-past { border-left: 4px solid #999; }
.apollo-reg-closed { border-left: 4px solid #d8a24a; }

/* Membership page (#3214): its "membership card" featured graphic is a 1080px
   square that renders as a full-width hero — cap it to a tasteful, centered preview. */
.page-id-3214 .page-header-image { text-align: center; padding-top: 1.5rem; }
.page-id-3214 .page-header-image img { display: inline-block; width: auto; max-width: 400px; height: auto; }

/* A few pages use a small clip-art ICON as their featured image; now that the
   full-width banner is the page hero, those icons read as broken header bands. Hide
   them (get-involved = LIGHT-ICON, about-the-apollo = Projector-icon). */
.page-id-29 .page-header-image,
.page-id-21 .page-header-image { display: none; }

/* Youth "Our Programs" — a card grid that flows for any number of programs
   (5 across on desktop, wrapping to ~3 on tablet and 1 on mobile). */
.wp-block-columns.apollo-program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem; align-items: start; }
.wp-block-columns.apollo-program-grid > .wp-block-column { flex-basis: auto; margin: 0; }

/* Sponsorship levels table (transcribed from the old brochure insert image) */
.wp-block-table.apollo-sponsor-levels { overflow-x: auto; margin-inline: 0; }
.apollo-sponsor-levels table { border-collapse: collapse; width: 100%; min-width: 520px; }
.apollo-sponsor-levels th, .apollo-sponsor-levels td { border: 1px solid #e7e1d7; padding: 8px 12px; text-align: center; }
.apollo-sponsor-levels thead th { background: #bf392b; color: #fff; font-weight: 600; }
.apollo-sponsor-levels tbody th { text-align: left; background: #f4f1ea; font-weight: 600; white-space: nowrap; }
.apollo-sponsor-levels tbody tr:nth-child(even) td { background: #faf9f7; }

/* Full-width landing-page banner with an overlaid page title */
.apollo-pagebanner { position: relative; width: 100%; min-height: clamp(190px, 24vw, 340px);
	display: flex; align-items: flex-end; background: var(--bg) center / cover no-repeat; background-color: #1a1512; }
.apollo-pagebanner__scrim { position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(12,9,8,0.72), rgba(12,9,8,0.30) 42%, rgba(12,9,8,0.04) 72%, transparent),
		linear-gradient(0deg, rgba(12,9,8,0.55), transparent 58%); }
.apollo-pagebanner__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 30px 26px; }
.apollo-pagebanner__title { margin: 0; color: #fff; font-family: "Abril Fatface", Georgia, "Times New Roman", serif;
	font-weight: 400; line-height: 1.05; font-size: clamp(30px, 5vw, 54px); text-shadow: 0 2px 22px rgba(0,0,0,0.5); }
.apollo-has-banner .entry-header:empty { display: none; }
@media (max-width: 768px) { .apollo-pagebanner__inner { padding: 0 20px 18px; } }

/* Reusable photo slideshow ([apollo_carousel]) — namespaced apart from the
   homepage hero/events .apollo-carousel slider so the two never collide. */
.apollo-slideshow { position: relative; margin: 1.5rem 0; }
.apollo-slideshow__viewport { overflow: hidden; border-radius: 10px; background: #1a1512; box-shadow: 0 6px 24px rgba(0,0,0,0.14); }
.apollo-slideshow__track { display: flex; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); }
.apollo-slideshow.is-single .apollo-slideshow__track { transition: none; }
.apollo-slideshow__slide { flex: 0 0 100%; min-width: 100%; margin: 0; position: relative; }
.apollo-slideshow__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.apollo-slideshow__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.4rem 1rem 0.7rem;
	color: #fff; font-size: 0.9rem; text-align: center;
	background: linear-gradient(0deg, rgba(12,9,8,0.72), transparent); }
.apollo-slideshow__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
	background: rgba(191,57,43,0.92); color: #fff; font-size: 26px; line-height: 1;
	display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; }
.apollo-slideshow__nav:hover { background: #8f2a20; }
.apollo-slideshow__nav:focus-visible { outline: 3px solid #e0a53c; outline-offset: 2px; }
.apollo-slideshow__nav--prev { left: 12px; }
.apollo-slideshow__nav--next { right: 12px; }
.apollo-slideshow__dots { display: flex; justify-content: center; gap: 9px; margin-top: 0.9rem; }
.apollo-slideshow__dot { width: 11px; height: 11px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
	background: #d8d2c8; transition: background 0.15s, transform 0.15s; }
.apollo-slideshow__dot[aria-selected="true"] { background: #bf392b; transform: scale(1.15); }
.apollo-slideshow__dot:focus-visible { outline: 2px solid #e0a53c; outline-offset: 2px; }
@media (max-width: 600px) {
	.apollo-slideshow__img { aspect-ratio: 4 / 3; }
	.apollo-slideshow__nav { width: 38px; height: 38px; font-size: 22px; }
	.apollo-slideshow__nav--prev { left: 6px; } .apollo-slideshow__nav--next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .apollo-slideshow__track { transition: none; } }
.apollo-reg-status p { margin: 0 0 0.5rem; }
.apollo-reg-status p:last-child { margin-bottom: 0; }
.apollo-reg-btn { display: inline-block; background: var(--wp--preset--color--apollo-red, #bf392b); color: #fff !important; padding: 0.7rem 1.5rem; border-radius: 3px; font-weight: 600; text-decoration: none; }
.apollo-reg-btn:hover { background: var(--wp--preset--color--apollo-red-dark, #8f2a20); }
.apollo-reg-link { color: var(--wp--preset--color--apollo-red, #bf392b); font-weight: 600; text-decoration: none; }

/* Past events: hide The Events Calendar "Add to Calendar" subscribe dropdown —
   the event has already happened (body class set in functions.php). */
body.apollo-past-event .tribe-events-c-subscribe-dropdown__container { display: none !important; }

/* Actor headshot carousel (IMDb-style) — sits where the single headshot did and
   the bio wraps it. Scoped with .single-actor so its imgs beat the generic
   ".single-actor .entry-content img" float rule above. */
.single-actor .apollo-headshots { float: right; width: 100%; max-width: 300px; margin: 0.2rem 0 1rem 1.8rem; }
.single-actor .apollo-headshots .apollo-hs-stage { position: relative; overflow: hidden; border-radius: 8px; background: #f4f1ea; aspect-ratio: 4 / 5; }
.single-actor .apollo-headshots .apollo-hs-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform 0.35s ease; }
.single-actor .apollo-headshots .apollo-hs-slide { flex: 0 0 100%; height: 100%; margin: 0; padding: 0; }
.single-actor .apollo-headshots .apollo-hs-img { display: block; float: none; width: 100%; max-width: none; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: center top; }
.single-actor .apollo-headshots .apollo-hs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(18,16,15,0.55); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.single-actor .apollo-headshots .apollo-hs-nav:hover { background: var(--wp--preset--color--apollo-red, #bf392b); }
.single-actor .apollo-headshots .apollo-hs-prev { left: 8px; }
.single-actor .apollo-headshots .apollo-hs-next { right: 8px; }
.single-actor .apollo-headshots .apollo-hs-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.single-actor .apollo-headshots .apollo-hs-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; line-height: 0; }
.single-actor .apollo-headshots .apollo-hs-thumbs button.is-active { border-color: var(--wp--preset--color--apollo-red, #bf392b); }
.single-actor .apollo-headshots .apollo-hs-thumbs img { float: none; width: 46px; height: 46px; max-width: none; object-fit: cover; border-radius: 2px; margin: 0; display: block; }
@media (prefers-reduced-motion: reduce) { .single-actor .apollo-headshots .apollo-hs-track { transition: none; } }
@media (max-width: 480px) { .single-actor .apollo-headshots { float: none; margin: 0 0 1.2rem; max-width: 100%; } }

/* List-view event images are clickable links to the event. */
.apollo-event-image-link { display: block; line-height: 0; }
.apollo-event-image-link img { transition: opacity 0.2s ease; }
.apollo-event-image-link:hover img { opacity: 0.9; }

/* In-page photo lightbox (production galleries) */
.apollo-photo-grid a.apollo-lb { cursor: zoom-in; display: block; }
.apollo-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(18,16,15,0.93); }
.apollo-lightbox[hidden] { display: none; }
.apollo-lb__stage { max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.apollo-lb__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 12px 60px rgba(0,0,0,0.6); }
.apollo-lb__close { position: absolute; top: 14px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.apollo-lb__close:hover { background: var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.apollo-lb__nav:hover { background: var(--wp--preset--color--apollo-red, #bf392b); }
.apollo-lb__prev { left: 16px; } .apollo-lb__next { right: 16px; }
.apollo-lb__count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.9); font-family: "Poppins", sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; }
.apollo-lb__close:focus-visible, .apollo-lb__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .apollo-lb__img { animation: apollo-lb-in 0.22s ease; } @keyframes apollo-lb-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } } }
@media (max-width: 600px) { .apollo-lb__nav { width: 42px; height: 42px; font-size: 1.5rem; } }

/* Youth Workshops — circular program "bubble" photos above each card */
.apollo-program-grid .apollo-bubble { display: flex; justify-content: center; margin: 0 0 .75rem; }
.apollo-program-grid .apollo-bubble img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.apollo-program-grid .wp-block-column > h3 { text-align: center; }

/* Ninja Forms — clearer fields (youth-director feedback: white-on-white inputs
   were hard to distinguish). Applies to all NF forms site-wide. */
.nf-form-cont .nf-field-element input[type="text"],
.nf-form-cont .nf-field-element input[type="email"],
.nf-form-cont .nf-field-element input[type="tel"],
.nf-form-cont .nf-field-element input[type="number"],
.nf-form-cont .nf-field-element select,
.nf-form-cont .nf-field-element textarea {
	border: 2px solid #8a8f98;
	background: #fff;
	border-radius: 6px;
	padding: .55em .75em;
	width: 100%;
	box-sizing: border-box;
}
.nf-form-cont .nf-field-element input:focus,
.nf-form-cont .nf-field-element select:focus,
.nf-form-cont .nf-field-element textarea:focus {
	border-color: #bf392b;
	box-shadow: 0 0 0 3px rgba(191, 57, 43, .15);
	outline: none;
}
.nf-form-cont .nf-field-label label { font-weight: 600; color: #1f2328; }
.nf-form-cont .nf-field-container { margin-bottom: 1.05rem; }

/* Details/accordion blocks: breathing room before the next heading
   (client note 2026-08-26: Your Visit page, Getting Here vs Parking). */
.wp-block-details { margin-bottom: 1.6rem; }