/* styles.css
	 Clean, modern, mobile-responsive styles.
	 - Vertical pastel gradient background (pink → orange → green).
	 - Desktop-first layout; mobile menu in media query.
	 - Native CSS variables for colors/typography.
*/

/* ---------------------------
	 CSS variables (theme & scale)
	 --------------------------- */
:root{
	/* Pastel gradient stops */
	--bg-top: #ffcae0;     /* light pink */
	--bg-middle: #ffd3a2;  /* light orange */
	--bg-bottom: #b3ffc0;  /* light green */

	/* Typography & contrast */
	--text-color: #111214; /* strong dark for legibility on pastels */
	--muted: #414141;

	/* CTA accents */
	--accent-ticket: #b33b2b; /* ticket (deep coral) */
	--accent-donate: #188b3d; /* donate (deep green) */
	--cta-foreground: #ffffff;

	/* Layout sizing */
	--nav-height: 72px;
	--container-max: 1600px;
	--radius: 12px;

	/* Motion & transitions */
	--transition-fast: 180ms;
	--transition-medium: 260ms;

	/* Surface / UI colors (editable) */
	--surface-foreground: #ffffff; /* used for light surfaces */
	--surface-contrast: rgba(17,17,17,0.04); /* subtle borders */
	--surface-backdrop-start: rgba(255,255,255,0.65); /* header gradient start */
	--surface-backdrop-end: rgba(255,255,255,0.40);   /* header gradient end */
	--surface-panel: rgba(255,255,255,0.50);
	--surface-panel-strong: rgba(255,255,255,0.68);
	--surface-panel-border: rgba(255,255,255,0.62);
	--nav-hover-bg: rgba(17,17,17,0.06);
	--focus-ring: rgba(34,125,255,0.14);
	--skiplink-bg: #111111;
	--skiplink-fg: #ffffff;
	--mobile-nav-bg-start: rgba(255,255,255,0.98);
	--mobile-nav-bg-end: rgba(255,255,255,0.98);
	--boxshadow-ticket: rgba(179,59,43,0.12);
	--boxshadow-donate: rgba(24,139,61,0.12);
	--boxshadow-nav: rgba(17,17,17,0.06);
	--panel-shadow: 0 18px 50px rgba(17,17,17,0.08);
	--button-shadow: 0 10px 24px rgba(17,17,17,0.12);

	/* Header tab font size (nav links) */
	--nav-link-font-size: 1.25rem;

	/* Header tab font weight (used for nav links and header CTAs) */
	--nav-link-font-weight: 600;

	/* Page heading size/weight used on page hero and homepage */
	--page-heading-size: clamp(2rem, 4vw, 3.2rem);
	--page-heading-weight: 700;

	/* Base font size for the site (use rems relative to this) */
	--base-font-size: 16px;

	/* Body/content type scale and color for page paragraphs */
	--body-font-size: 1.25rem;
	--body-font-color: var(--muted);

	/* Preferred maximum measure for page content (matches homepage inner width) */
	--content-max: 1600px;
}

/* ---------------------------
	 Base / Reset
	 --------------------------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{min-height:100%;}
html{ font-size: var(--base-font-size); }
body{
	margin:0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	color:var(--text-color);
	background: linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-middle) 50%, var(--bg-bottom) 100%);
	background-attachment: fixed;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.45;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	height:auto;
}

a{
	color:inherit;
	text-underline-offset:3px;
}

/* Container keeps content centered and constrained */
.container{
	max-width:var(--container-max);
	padding:0 20px;
	margin:0 auto;
}

/* Accessible skip link (visible when focused) */
.skip-link{
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.skip-link:focus{
	left:20px;
	top:20px;
	width:auto;
	height:auto;
	padding:8px 12px;
	background:var(--skiplink-bg);
	color:var(--skiplink-fg);
	z-index:1000;
	border-radius:6px;
	text-decoration:none;
}

/* ---------------------------
	 Header & Navigation
	 --------------------------- */
.site-header{
	position:sticky;
	top:0;
	z-index:40;
	/* subtle translucent backdrop for contrast over gradient */
	background: linear-gradient(to right, rgba(255,255,255,0.74), rgba(255,255,255,0.48));
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--surface-contrast);
	box-shadow:0 8px 28px rgba(17,17,17,0.05);
}
.header-inner{
	display:flex;
	align-items:center;
	gap:18px;
	height:var(--nav-height);
	justify-content:flex-start;
	max-width:none;
	width:100%;
}

/* Left-side grouping so CTAs can sit flush right */
.header-left{
	display:flex;
	align-items:center;
	gap:18px;
	flex:1 1 auto;
	min-width:0;
}

/* Ensure navigation sits with the left group (override previous ordering) */
.header-left .primary-nav{ order:0; }

/* Logo (text-based for speed) */
.logo{
	color:var(--text-color);
	text-decoration:none;
	font-weight:700;
	font-size:1.5rem;
	letter-spacing:0.2px;
	white-space:nowrap;
	transition:opacity var(--transition-fast);
}
.logo:hover,
.logo:focus-visible{
	opacity:0.72;
	outline:none;
}

/* Prevent the logo from pushing nav items too far right — truncate long site titles */
.logo{
	max-width:260px;
	overflow:hidden;
	text-overflow:ellipsis;
	display:inline-block;
}

/* Header controls wrapper */
.header-controls{
	display:none;
	gap:10px;
	align-items:center;
}

/* Right-side CTAs wrapper (align donation/ticket buttons) */
.header-ctas{
	display:flex;
	gap:12px;
	align-items:center;
}

/* Header CTA sizing */
.header-cta{
	padding:8px 14px;
	font-size: var(--nav-link-font-size);
}

/* Nav toggle (hidden by default on desktop) */
.nav-toggle{
	display:none;
	border:0;
	background:transparent;
	cursor:pointer;
	padding:8px;
	border-radius:8px;
}
.nav-toggle svg { fill: var(--text-color); opacity:0.9; }

/* Primary navigation (desktop layout) */
.primary-nav{ order:3; }
.nav-list{
	display:flex;
	align-items:center;
	gap:12px;
	list-style:none;
	margin:0;
	padding:0;
}
.nav-item{
	position:relative;
}
.nav-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--text-color);
	text-decoration:none;
	font-weight:var(--nav-link-font-weight);
	padding:8px 10px;
	border-radius:999px;
	transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
	white-space:nowrap;
	font-size: var(--nav-link-font-size);
	line-height:1;
	min-height:40px;
}
.nav-menu-toggle{
	gap:6px;
	border:0;
	background:transparent;
	font-family:inherit;
	cursor:pointer;
}
.nav-caret{
	flex:0 0 auto;
	transition:transform var(--transition-fast);
}
.nav-item-dropdown.open .nav-caret,
.nav-item-dropdown:focus-within .nav-caret,
.nav-item-dropdown:hover .nav-caret{
	transform:rotate(180deg);
}
.nav-link:hover,
.nav-link:focus-visible{
	background: var(--nav-hover-bg);
	box-shadow: inset 0 0 0 1px rgba(17,17,17,0.04);
	outline:none;
	transform:translateY(-1px);
}
.nav-link.active{
	background: var(--nav-hover-bg);
	box-shadow: inset 0 0 0 1px rgba(17,17,17,0.04);
	outline:none;
	transform:none;
}
.nav-dropdown{
	position:absolute;
	top:calc(100% + 12px);
	left:0;
	min-width:220px;
	list-style:none;
	margin:0;
	padding:8px;
	border:1px solid rgba(255,255,255,0.72);
	border-radius:8px;
	background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82));
	box-shadow:0 18px 42px rgba(17,17,17,0.14);
	backdrop-filter:blur(14px);
	z-index:60;
	opacity:0;
	visibility:hidden;
	transform:translateY(-6px);
	transition:opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.nav-dropdown::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:-12px;
	height:12px;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.open .nav-dropdown{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.nav-dropdown .nav-link{
	display:flex;
	justify-content:flex-start;
	width:100%;
	border-radius:8px;
	padding:9px 12px;
	font-size:1rem;
}
.nav-dropdown .nav-link:hover,
.nav-dropdown .nav-link:focus-visible,
.nav-dropdown .nav-link.active{
	transform:none;
}

/* ---------------------------
	 Hero
	 --------------------------- */
.hero,
.page-hero{
	padding:64px 0 40px;
	text-align:left;
}
.hero-inner,
.page-hero .container,
.hero-inner{
	max-width:var(--content-max);
	margin:0 auto;
}
.hero-inner,
.page-hero .container,
.section .container{
	background:var(--surface-panel);
	border:1px solid var(--surface-panel-border);
	border-radius:var(--radius);
	box-shadow:var(--panel-shadow);
	backdrop-filter: blur(10px);
	padding:clamp(18px, 3vw, 40px);
}
.hero-inner{
	background:linear-gradient(135deg, rgba(255,255,255,0.68), rgba(255,255,255,0.36));
}
.hero-title,
.page-hero h1{
	margin:0 0 14px;
	font-size:var(--page-heading-size);
	font-weight:var(--page-heading-weight);
	line-height:1.08;
	color:var(--text-color);
}
.hero-tagline,
.page-hero p{ /* hero tagline shares page paragraph styling */
	max-width:var(--content-max);
	margin:0;
	color:var(--body-font-color);
	font-size:var(--body-font-size);
}
.page-hero p + p,
.page-hero .btn + p{
	margin-top:22px;
}
.page-hero .btn{
	margin-top:22px;
}
.page-hero a:not(.btn){
	color:var(--text-color);
	font-weight:700;
}
.hero-tagline{
	margin:0 0 22px 0;
	color:var(--body-font-color);
	font-size:var(--body-font-size);
}

.page-hero{ 
	min-height:0;
}

/* CTA buttons */
.hero-ctas{ display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	text-decoration:none;
	cursor:pointer;
	user-select:none;
	font-weight:700;
	padding:14px 20px;
	border-radius:var(--radius);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
	border:0;
	color:var(--cta-foreground);
	font-size:1rem;
	box-shadow:var(--button-shadow);
}
.btn:focus-visible{ outline:4px solid var(--focus-ring); outline-offset:3px; }

/* Primary (ticket) */
.btn-primary{
	background:var(--accent-ticket);
	box-shadow: 0 10px 24px var(--boxshadow-ticket);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(179,59,43,0.22); }

/* Secondary (donate) */
.btn-secondary{
	background:var(--accent-donate);
	box-shadow: 0 10px 24px var(--boxshadow-donate);
}
.btn-secondary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(24,139,61,0.22); }

/* Header CTAs (moved from hero) */
.header-ctas{
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:flex-end;
	flex:0 0 auto;
	margin-left:auto;
}

/* Smaller header CTA buttons to fit the navigation bar */
.btn.header-cta{
	padding:8px 12px;
	font-size: var(--nav-link-font-size);
	font-weight: var(--nav-link-font-weight);
	border-radius:999px;
	white-space:nowrap;
}
.btn.header-cta[aria-current="page"]{
	box-shadow:0 0 0 3px rgba(255,255,255,0.44), var(--button-shadow);
}

/* Keep header CTAs visually stable on hover */
.btn.header-cta:hover{ transform:translateY(-1px); }

/* ---------------------------
	 Content sections & footer
	 --------------------------- */
.section{
	padding:20px 0 36px;
}
.site-main{ flex:1 0 auto; }
.section h2{
	margin:0 0 12px 0;
	font-size:clamp(1.5rem, 2vw, 2rem);
}
.section p{
	margin:0 0 1rem;
	color:var(--body-font-color);
	font-size:var(--body-font-size);
	max-width:var(--content-max);
}
.section p:last-child{ margin-bottom:0; }

/* Small muted note used to clarify options under CTAs */
.section-note{
	margin:0;
	color:var(--muted);
	font-size:1rem;
	font-weight:600;
}

/* Donation CTA utilities */
.donate-section .donate-actions{ display:flex; justify-content:flex-start; margin-top:22px; }
.donate-section .donate-cta{ padding:12px 20px; font-size:1.05rem; }

/* Tickets CTA utilities (mirrors donation CTA) */
.tickets-section .ticket-actions{ display:flex; justify-content:flex-start; margin-top:22px; }
.tickets-section .ticket-cta{ padding:12px 20px; font-size:1.05rem; }
.payment-options{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	margin-top:24px;
	padding-top:20px;
	border-top:1px solid rgba(17,17,17,0.08);
}

/* Ticket embed bubble */
.ticket-embed{
	background:
		linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.48)),
		linear-gradient(to bottom, var(--bg-middle), var(--bg-bottom));
	border-radius:14px;
	padding:clamp(18px, 3vw, 32px);
	box-shadow:0 18px 44px rgba(17,17,17,0.08);
	border:1px solid rgba(255,255,255,0.70);
	overflow:hidden;
	position:relative;
	width:100%;
	margin:18px auto 0;
}

/* Zeffy centers its own internal form, so frame it at the service's usable width. */
.ticket-embed div[data-zeffy-embed],
.ticket-embed [data-zeffy-embed-fallback]{
	width:100%;
	max-width:760px;
	margin:0 auto;
	display:block;
}
.ticket-embed [data-zeffy-embed-fallback]{
	display:none;
}

/* Ensure the fallback container and iframe fill the area */
.zeffy-fallback-frame{
	position:relative;
	overflow:hidden;
	width:100%;
	min-height:820px;
	padding:0;
}
.ticket-embed iframe{
	display:block;
	width:100% !important;
	max-width:none !important;
	min-height:820px;
	border:0;
	border-radius:14px;
	background:transparent;
}

.ticket-embed div[data-zeffy-embed]{
	min-height:820px;
}

/* Calendar block: keep the schedule close to the classes intro */
.classes-page .page-hero{
	padding-bottom:28px;
	min-height:auto;
}

/* Footer */
.site-footer{
	position:relative;
	z-index:1;
	flex-shrink:0;
	padding:32px 0;
	border-top:1px solid rgba(17,17,17,0.06);
	background: linear-gradient(to top, rgba(255,255,255,0.48), rgba(255,255,255,0.18));
	backdrop-filter: blur(12px);
	box-shadow: 0 -6px 20px rgba(17,17,17,0.03);
}
.footer-inner{
	display:flex;
	gap:18px;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	color:var(--muted);
	font-size:0.95rem;
	row-gap:10px;
}

/* Footer regions */
.footer-left{ display:flex; flex-direction:column; gap:6px; }
.footer-copy{ margin:0; color:var(--muted); font-size:0.95rem; }
.footer-contact{ margin:0; color:var(--muted); font-weight:600; }
.footer-nav{ display:flex; gap:12px; align-items:center; }
.footer-nav a{ color:var(--text-color); text-decoration:none; padding:6px 10px; border-radius:8px; background:transparent; transition: background var(--transition-fast), transform var(--transition-fast); font-weight:600; font-size:0.95rem; }
.footer-nav a:hover, .footer-nav a:focus{ background:var(--nav-hover-bg); transform:translateY(-1px); outline:none; }

/* ---------------------------
	 Responsive (mobile-first is not used — desktop-first approach)
	 --------------------------- */
@media (max-width:880px){
	/* Show mobile nav toggle, hide inline nav */
	.header-controls{ display:flex; }
	.nav-toggle{ display:inline-flex; }
	.primary-nav{
		position:fixed;
		left:0;
		right:0;
		top:var(--nav-height);
		background: linear-gradient(to bottom, var(--mobile-nav-bg-start), var(--mobile-nav-bg-end));
		transform: translateY(-120%);
		transition: transform var(--transition-medium) ease;
		z-index:45;
		box-shadow: 0 12px 30px var(--boxshadow-nav);
		border-bottom: 1px solid var(--surface-contrast);
	}
	.primary-nav.open{ transform: translateY(0); }

	.nav-list{
		flex-direction:column;
		padding:20px;
		gap:8px;
	}
	.nav-link{
		display:flex;
		justify-content:flex-start;
		font-size:1.05rem;
	}
	.nav-menu-toggle{
		display:flex;
		width:100%;
		justify-content:space-between;
		text-align:left;
	}
	.nav-dropdown{
		position:static;
		min-width:0;
		width:100%;
		margin:4px 0 2px;
		padding:0 0 0 14px;
		border:0;
		border-left:2px solid rgba(17,17,17,0.10);
		border-radius:0;
		background:transparent;
		box-shadow:none;
		backdrop-filter:none;
		display:none;
		opacity:1;
		visibility:visible;
		transform:none;
		transition:none;
	}
	.nav-dropdown::before{
		display:none;
	}
	.nav-item-dropdown.open .nav-dropdown,
	.nav-item-dropdown:focus-within .nav-dropdown{
		display:block;
	}
	.nav-item-dropdown:hover .nav-dropdown{
		display:none;
	}
	.nav-item-dropdown.open:hover .nav-dropdown,
	.nav-item-dropdown:focus-within:hover .nav-dropdown{
		display:block;
	}
	.nav-dropdown .nav-link{
		font-size:0.98rem;
		padding:8px 10px;
	}
	.header-ctas{
		gap:8px;
	}
	.btn.header-cta{
		font-size:0.95rem;
		padding:8px 10px;
	}

	/* Ensure hero has space when header is sticky */
	.hero,
	.page-hero{ padding-top: calc(var(--nav-height) + 28px); padding-bottom:24px; }
	.header-inner{ padding:0 8px; }
	.hero-inner,
	.page-hero .container,
	.section .container{
		padding:24px;
	}
	.logo{
		font-size:1.1rem;
	}
	.footer-inner{
		align-items:flex-start;
		flex-direction:column;
	}
	.payment-options{
		align-items:flex-start;
		flex-direction:column;
	}
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
	.btn, .nav-list, .primary-nav{ transition:none; animation:none; }
}