/* ==========================================================================
   Northfield Theatre — Elevation Layer
   A final pass that tightens type, cards, section rhythm, and buttons
   across the whole site. Loaded AFTER every other stylesheet so each
   rule here overrides earlier declarations.

   Inspiration: National Theatre and Barbican — confident type, generous
   negative space, strong section blocking, editorial cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY — tighter, more confident. Inter is the only typeface; we
   create hierarchy with weight + tracking.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: -0.02em;
	font-feature-settings: "ss01", "cv11";
}

h1 {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.035em;
	font-weight: var(--weight-black);
}

h2 {
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: var(--weight-extrabold);
}

h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* Eyebrow labels — reusable small-caps annotation for section intros. */
.eyebrow,
.seating-hero__eyebrow,
.story-hero__eyebrow,
.contact-hero__eyebrow,
.news-archive__eyebrow,
.story-mission__eyebrow,
.story-timeline__eyebrow,
.story-team__eyebrow,
.contact-form-intro__eyebrow,
.moorside-hero__eyebrow,
.moorside-intro__eyebrow {
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
}

/* Body text tuning — slightly looser default leading for comfort. */
body {
	font-feature-settings: "ss01", "cv02", "cv03", "cv04", "cv11";
	text-rendering: optimizeLegibility;
}

/* Links in prose get a cleaner underline. */
.entry-content a,
.news-post__content a {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: auto;
}

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM — editorial blocking with generous spacing
   -------------------------------------------------------------------------- */

.section {
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.section--cream {
	background-color: var(--color-bg-soft);
}

.section--dark {
	background-color: var(--color-dark);
	color: var(--color-bg);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
	color: var(--color-bg);
}

/* Page-header treatment — more editorial with a hairline accent. */
.page-header {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.page-header__title {
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	letter-spacing: -0.03em;
	line-height: 1;
	font-weight: var(--weight-black);
}

.page-header__subtitle {
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	max-width: 60ch;
	color: var(--color-text-muted);
	margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   3. BUTTONS — heavier presence, flat/square primary
   -------------------------------------------------------------------------- */

.btn {
	border-radius: 2px;
	padding: 0.9em 1.6em;
	letter-spacing: 0.01em;
	font-weight: var(--weight-bold);
}

.btn--primary {
	background-color: var(--color-accent);
	color: var(--color-dark);
	border-color: var(--color-accent);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.btn--primary:hover {
	background-color: var(--color-dark);
	border-color: var(--color-dark);
	color: var(--color-accent);
	transform: translateY(-1px);
}

.btn--secondary {
	background-color: var(--color-dark);
	border-color: var(--color-dark);
	color: var(--color-bg);
}

.btn--secondary:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--outline {
	border-width: 2px;
}

.btn--outline:hover {
	background: var(--color-dark);
	color: var(--color-bg);
	border-color: var(--color-dark);
}

.btn--lg {
	padding: 1.1em 2.25em;
	font-size: var(--text-lg);
}

/* Focus ring — consistent across every button. */
.btn:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. HOMEPAGE HERO — dramatic weight, editorial treatment
   -------------------------------------------------------------------------- */

.hero {
	min-height: clamp(520px, 82vh, 820px);
}

/* Kill the twee vertical "scroll hint" line that pre-dated the Ken Burns
   treatment — the slow zoom is signal enough. */
.hero::after { display: none !important; }

/* Editorial eyebrow above the hero title (replaces the old tagline subtitle
   that sat BELOW the heading and pulled focus). */
.hero__eyebrow {
	font-family: var(--font-body);
	font-size: clamp(0.85rem, 1.2vw, 1rem);
	font-weight: var(--weight-bold);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-lg);
}

.hero__overlay {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.75) 100%),
		linear-gradient(100deg, rgba(27, 77, 62, 0.45) 0%, transparent 50%);
}

.hero__content {
	text-align: left;
	max-width: 960px;
	padding: 0 var(--container-padding);
}

.hero__title {
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	font-weight: var(--weight-black);
	letter-spacing: -0.035em;
	line-height: 0.95;
	margin-bottom: var(--space-lg);
	text-wrap: balance;
}

.hero__title-accent {
	color: var(--color-bg);
	font-style: italic;
	font-weight: var(--weight-black);
	position: relative;
	display: inline-block;
}

.hero__title-accent::after {
	content: '';
	display: block;
	width: 80px;
	height: 6px;
	background: var(--color-accent);
	margin-top: var(--space-md);
}

.hero__cta {
	padding: 1.15em 2.4em;
	font-size: var(--text-base);
	margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   5. THIS-WEEK TABS — editorial rather than widgety
   -------------------------------------------------------------------------- */

.this-week__tabs {
	border-bottom: 1px solid var(--color-border);
	gap: var(--space-md);
	padding-bottom: 0;
	margin-bottom: var(--space-2xl);
}

.this-week__tab {
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	font-weight: var(--weight-bold);
	color: var(--color-text-muted);
	padding: var(--space-sm) 0;
	letter-spacing: -0.01em;
	border-bottom-width: 3px;
}

.this-week__tab--active,
.this-week__tab[aria-selected="true"] {
	color: var(--color-dark);
	border-bottom-color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   6. NOW BOOKING — stronger heading and header bar
   -------------------------------------------------------------------------- */

.now-booking__header {
	align-items: flex-end;
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-2xl);
	border-bottom: 1px solid var(--color-border);
}

.now-booking__title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	letter-spacing: -0.025em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   7. ABOUT HOME — more editorial layout
   -------------------------------------------------------------------------- */

.about-home__grid {
	align-items: center;
}

.about-home__heading {
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	letter-spacing: -0.025em;
	font-weight: var(--weight-black);
	line-height: 1.02;
	margin-bottom: var(--space-md);
}

.about-home__lead {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: var(--weight-medium);
	font-style: italic;
	color: var(--color-dark);
	line-height: 1.35;
	margin-bottom: var(--space-md);
}

.about-home__img {
	border-radius: 0;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.about-home__image-placeholder {
	border-radius: 0;
	aspect-ratio: 4 / 5;
}

/* --------------------------------------------------------------------------
   8. EVENT CARD — editorial, minimal, confident
   -------------------------------------------------------------------------- */

.event-card {
	border-radius: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	transition: transform var(--transition-base);
}

.event-card__link {
	gap: var(--space-md);
}

.event-card__link:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 4px;
	border-radius: 2px;
}

.event-card__image {
	aspect-ratio: 4 / 5;
	border-radius: 0;
	background-color: var(--color-dark);
}

.event-card__image::after {
	height: 30%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.event-card__category {
	top: var(--space-md);
	left: var(--space-md);
	padding: 6px 10px;
	font-size: 10px;
	letter-spacing: 0.2em;
	background: var(--color-bg);
	color: var(--color-dark);
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.event-card__availability {
	top: var(--space-md);
	right: var(--space-md);
	padding: 6px 10px;
	font-size: 10px;
	letter-spacing: 0.2em;
	background: var(--color-dark);
	color: var(--color-bg);
	border-radius: 2px;
}

.event-card__availability.badge--low {
	background: var(--color-warning);
	color: var(--color-bg);
}

.event-card__availability.badge--soldout {
	background: var(--color-danger);
	color: var(--color-bg);
}

.event-card__availability.badge--closing {
	background: #8B1A1A; /* deep red — urgency without matching the "sold out" bright */
	color: var(--color-bg);
}

.event-card__availability.badge--announced {
	background: var(--color-accent);
	color: var(--color-dark);
}

.event-card__body {
	padding: 0;
	gap: var(--space-xs);
}

.event-card__title {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.15;
	font-weight: var(--weight-bold);
	color: var(--color-dark);
}

.event-card__date {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-primary);
	letter-spacing: 0.03em;
	margin-bottom: var(--space-xs);
	order: -1;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.18em;
}

.event-card__summary {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
	-webkit-line-clamp: 2;
	margin-top: var(--space-xs);
}

.event-card__meta {
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-sm);
	gap: var(--space-md);
	justify-content: space-between;
}

.event-card__price {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-dark);
	font-variant-numeric: tabular-nums;
}

.event-card__runtime {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	letter-spacing: 0.05em;
}

/* Hide the old "More info" CTA — the entire card is the link. */
.event-card__cta {
	display: none;
}

/* Hover: subtle image zoom + dark shade lift on title */
.event-card .img-zoom img {
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.event-card__link:hover .img-zoom img,
.event-card__link:focus-visible .img-zoom img {
	transform: scale(1.06);
}

.event-card__link:hover .event-card__title,
.event-card__link:focus-visible .event-card__title {
	color: var(--color-primary);
}

/* Remove old "hover-lift" translate on cards so they stay editorial. */
.event-card.hover-lift:hover {
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   9. NOW BOOKING + EVENT GRID — editorial columns
   -------------------------------------------------------------------------- */

.event-grid {
	gap: var(--space-2xl) var(--space-xl);
}

@media (min-width: 1024px) {
	.event-grid--3 {
		gap: var(--space-3xl) var(--space-xl);
	}
}

/* --------------------------------------------------------------------------
   10. WHAT'S ON — tighter layout
   -------------------------------------------------------------------------- */

.whats-on__view-controls {
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-xl);
}

.whats-on__result-count {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   11. SINGLE EVENT — stronger hero, cleaner tabs
   -------------------------------------------------------------------------- */

.event-hero {
	min-height: clamp(400px, 60vh, 640px);
	position: relative;
}

.event-hero__overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.85) 100%);
}

.event-hero__title {
	font-size: clamp(2.25rem, 6vw, 5rem);
	letter-spacing: -0.03em;
	line-height: 0.98;
	font-weight: var(--weight-black);
	text-wrap: balance;
	max-width: 18ch;
}

.event-hero__meta {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.02em;
	font-size: var(--text-base);
	margin-top: var(--space-lg);
}

.event-hero__meta > span {
	display: inline-block;
	margin-right: var(--space-md);
}

.event-tabs__list {
	border-bottom: 1px solid var(--color-border);
	gap: var(--space-xl);
}

.event-tabs__tab {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	padding: var(--space-md) 0;
	border-bottom: 3px solid transparent;
	color: var(--color-text-muted);
}

.event-tabs__tab[aria-selected="true"],
.event-tabs__tab--active {
	color: var(--color-dark);
	border-bottom-color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   0. DEMO BANNER — fixed portfolio-disclosure bar at the bottom
   -------------------------------------------------------------------------- */

.demo-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-toast);
	background: var(--color-dark);
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.02em;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.demo-banner__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 8px var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
	text-align: center;
	line-height: 1.3;
}
.demo-banner__label {
	font-weight: var(--weight-bold);
	color: var(--color-accent);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 11px;
}
.demo-banner__sep {
	color: rgba(255, 255, 255, 0.4);
}
.demo-banner__body {
	color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 639px) {
	.demo-banner__sep { display: none; }
	.demo-banner__inner { flex-direction: column; gap: 2px; padding: 6px var(--container-padding); }
}

/* Reserve space for the fixed demo banner inside the footer's own dark
   block so the reserved area inherits the footer background colour.
   Using body padding here would expose the body's white bg as a strip. */
.footer-bottom { padding-bottom: calc(var(--space-md) + 44px); }
@media (max-width: 639px) {
	.footer-bottom { padding-bottom: calc(var(--space-md) + 58px); }
}

/* Cookie consent banner shares the bottom-fixed position — push it up
   so it stacks on top of the demo banner rather than hiding it. */
.cookie-consent { bottom: 44px; }
@media (max-width: 639px) { .cookie-consent { bottom: 58px; } }

/* --------------------------------------------------------------------------
   11a. HEADER SEARCH AUTOCOMPLETE — dropdown under the top-bar search
   -------------------------------------------------------------------------- */

.top-bar__search { position: relative; }

.search-autocomplete {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	max-height: 420px;
	overflow-y: auto;
	z-index: var(--z-dropdown);
}
.search-autocomplete[hidden] { display: none; }

.search-autocomplete__item {
	display: flex;
	flex-direction: column;
	padding: var(--space-sm) var(--space-md);
	color: var(--color-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
	transition: background-color var(--transition-fast);
}
.search-autocomplete__item:last-child { border-bottom: 0; }
.search-autocomplete__item.is-active,
.search-autocomplete__item:hover {
	background: var(--color-bg-soft);
}
.search-autocomplete__item:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: -3px;
}
.search-autocomplete__title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-dark);
	line-height: 1.2;
}
.search-autocomplete__meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	letter-spacing: 0.03em;
	margin-top: 2px;
}
.search-autocomplete__empty {
	padding: var(--space-md);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   11b. SUPPORT CTA — distinct pill in the top bar
   -------------------------------------------------------------------------- */

.top-bar__support {
	display: inline-flex;
	align-items: center;
	padding: 0.6em 1.1em;
	background: var(--color-accent);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
	white-space: nowrap;
}
.top-bar__support:hover,
.top-bar__support:focus-visible {
	background: var(--color-dark);
	color: var(--color-accent);
	transform: translateY(-1px);
}
@media (max-width: 1023px) {
	.top-bar__support { display: none; }
}

.mobile-nav__action-link--support {
	background: var(--color-accent);
	color: var(--color-dark) !important;
	padding: 0.9em 1.25em;
	border-radius: 999px;
	font-weight: var(--weight-bold);
	text-align: center;
	justify-content: center;
	display: flex;
}

/* --------------------------------------------------------------------------
   12. HEADER — tighter, more editorial
   -------------------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--color-border);
}

.top-bar__logo-text {
	font-family: var(--font-heading);
	font-weight: var(--weight-black);
	letter-spacing: -0.02em;
}

.primary-nav__link {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.01em;
	transition: color var(--transition-base);
}

.primary-nav__link:hover,
.primary-nav__link[aria-current="page"] {
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   13. NEWSLETTER FOOTER — more visual weight
   -------------------------------------------------------------------------- */

.footer-newsletter {
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.footer-newsletter__heading {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	letter-spacing: -0.02em;
	font-weight: var(--weight-extrabold);
	line-height: 1.05;
}

.footer-newsletter__input {
	border-radius: 2px;
	padding: 0.95em 1.1em;
	border-width: 2px;
}

/* --------------------------------------------------------------------------
   14. ALERT BANNER
   -------------------------------------------------------------------------- */

.alert-banner {
	background: var(--color-dark);
	color: var(--color-bg);
}

.alert-banner__message {
	font-weight: var(--weight-semibold);
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   15. BADGES — more emphatic
   -------------------------------------------------------------------------- */

.badge {
	padding: 0.35em 0.75em;
	border-radius: 2px;
	letter-spacing: 0.15em;
	font-size: 10px;
}

.badge--category {
	background: var(--color-dark);
}

/* --------------------------------------------------------------------------
   16. REDUCED MOTION polish
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	.event-card:hover .event-card__image img,
	.news-card:hover {
		transform: none !important;
	}
}