@font-face {
	font-family: 'Limelight';
	src: url('../fonts/Limelight-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Jost';
	src: url('../fonts/Jost-VariableFont_wght.ttf') format('truetype');
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	font-size: 106.25%;
	--color-page: #12181f;
	--color-surface: #161d24;
	--color-surface-alt: #1c252d;
	--color-border: #ebc96d;
	--color-border-soft: rgba(235, 201, 109, 0.4);
	--color-text: #ebc96d;
	--color-text-muted: #d7c38a;
	--color-link: #f5dfa0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
}

.site-body {
	min-height: 100vh;
	margin: 0;
	background: var(--color-page);
	color: var(--color-text);
	font-family: 'Jost', 'Century Gothic', Futura, sans-serif;
	line-height: 1.6;
}

h1,
h2,
h3 {
	font-family: 'Limelight', serif;
}

.site-header {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.site-header::after {
	content: "";
	position: absolute;
	inset: auto 1.5rem -5px 1.5rem;
	height: 1px;
	background: var(--color-border-soft);
}

.site-title {
	margin: 0;
	font-family: 'Limelight', serif;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
}

.site-title__link {
	color: #AA2734;
	text-decoration: none;
}

.site-main {
	display: grid;
	max-width: 1200px;
	margin: 0 auto;
	gap: var(--space-8);
	padding: var(--space-6);
}

.home-section {
	padding-block: var(--space-8);
}

.hero {
	--hero-image: url('../images/hero.jpg');
	display: grid;
	align-items: end;
	min-height: 70vh;
	/* Image stays clear on top; only the bottom darkens so the text is readable. */
	background:
		linear-gradient(to bottom, transparent 35%, rgba(18, 24, 31, 0.85) 80%, var(--color-page)),
		var(--hero-image) center / cover;
}

/* Same width and padding as .site-main so the text lines up with the page content. */
.hero__content {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1200px + 2 * var(--space-6));
	margin: 0 auto;
	padding: var(--space-8) var(--space-6);
	display: grid;
	justify-items: start;
	gap: var(--space-4);
}

.hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 8vw, 5rem);
}

.hero__tagline {
	margin: 0;
	max-width: 32rem;
	color: var(--color-link);
	font-size: 1.25rem;
}

.hero .cta-button-row {
	justify-content: flex-start;
	margin-top: var(--space-2);
}

.hero--page {
	min-height: 50vh;
}

.hero--movies {
	--hero-image: url('../images/movies-hero.jpeg');
}

.hero--screens {
	--hero-image: url('../images/screens-hero.jpeg');
}

.hero--news {
	--hero-image: url('../images/news-hero.jpeg');
}

.hero--contact {
	--hero-image: url('../images/contact-hero.jpeg');
}

.about {
	display: grid;
	align-items: center;
	gap: var(--space-6);
}

@media (min-width: 64rem) {
	.about {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

.about__image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--color-border);
}

.section-title {
	margin: 0 0 var(--space-4);
	font-size: 1.5rem;
	font-weight: 600;
}

/* Top-level section headings (Tonight's Program, About, News); sub-headings like "Later This Week" stay at the base size. */
.section-title--primary {
	margin-bottom: var(--space-6);
	font-size: 2.25rem;
}

.section-title__brand {
	color: #AA2734;
}

.program-group {
	margin-bottom: 2.5rem;
}

.cta-button-row {
	display: flex;
	justify-content: center;
	margin-top: var(--space-6);
}

.cta-button {
	--ticket-fill: var(--color-border);
	--ticket-text: var(--color-page);
	position: relative;
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: 16rem;
	max-width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	color: var(--ticket-text);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.cta-button__outline {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.cta-button__shape {
	fill: var(--ticket-fill);
	stroke: var(--ticket-fill);
	stroke-width: 4;
}

.cta-button__border {
	fill: none;
	stroke: #AA2734;
	stroke-width: 3;
}

.cta-button__label {
	position: relative;
}

.cta-button:hover,
.cta-button:focus-visible {
	--ticket-fill: var(--color-link);
	--ticket-text: var(--color-page);
}

.cta-button:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

.text-link {
	display: inline-block;
	margin-top: var(--space-4);
	color: var(--color-link);
	font-size: 1rem;
	text-decoration: none;
}

.text-link:hover {
	text-decoration: underline;
}

.empty-message,
.muted-text {
	margin: 0;
	color: var(--color-text-muted);
}

.muted-text {
	font-size: 1.125rem;
	line-height: 1.7;
}

.empty-message {
	font-size: 1rem;
}

.format-badge {
	display: inline-block;
	margin-bottom: var(--space-2);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.format-badge--16mm {
	color: #fbbf24;
}

.format-badge--35mm {
	color: #fcd34d;
}

.format-badge--70mm {
	color: #fde68a;
}

.format-badge--unknown {
	color: #d1d5db;
}

.format-badge--imax {
	color: #93c5fd;
}

.showtime-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: 0.75rem;
}

.showtime-button {
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	color: var(--color-text);
	font-size: 1rem;
	text-decoration: none;
}

.showtime-button:hover {
	background: var(--color-border);
	color: var(--color-page);
}

.base-button {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	border: none;
	border-radius: 0;
	background: var(--color-border);
	color: var(--color-page);
	font: inherit;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
}

.base-button:hover {
	background: var(--color-link);
}

/* Destructive actions (cancel, delete): outlined red, fills in on hover. */
.danger-button {
	padding: var(--space-1) var(--space-2);
	border: 1px solid #AA2734;
	border-radius: 0;
	background: transparent;
	color: #f87171;
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.danger-button:hover {
	background: #AA2734;
	color: var(--color-link);
}

.confirm-dialog {
	max-width: 24rem;
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text);
}

.confirm-dialog::backdrop {
	background: rgba(18, 24, 31, 0.8);
}

.confirm-dialog__message {
	margin: 0 0 var(--space-6);
	font-size: 1.25rem;
}

.confirm-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-4);
}

.confirm-dialog__actions button {
	padding: var(--space-2) var(--space-4);
}

.inline-link {
	color: var(--color-link);
}

.inline-link:hover {
	text-decoration: underline;
}