/*
 * The Drive-In Cinema: component styles.
 * Colours, type and spacing come from theme.json tokens only. No hex values here.
 */

/* Focus: always visible, high contrast on dark and light. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--cream);
	outline-offset: 3px;
	border-radius: 2px;
}

.screen-reader-text:not(:focus) {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Night sky. Solid navy paints first, the image follows (brief 16.6). */
.tdic-sky {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--navy);
	background-repeat: no-repeat;
}

/*
 * Seams (D60): wherever the photo meets solid navy (the header above, the
 * next section or footer below) a short CSS fade blends it into the navy.
 * The images themselves are never recoloured.
 */
.tdic-sky {
	--tdic-fade: 4rem;
	--tdic-fade-top: linear-gradient(180deg, var(--wp--preset--color--navy), transparent);
	--tdic-fade-bottom: linear-gradient(0deg, var(--wp--preset--color--navy), transparent);
}

/*
 * Phones and small tablets: a crop with the top third of sky removed and
 * soft fades at its top and bottom, shown about five screens wide (zoomed
 * out, so it stays sharp) with the city lights partway up the page rather
 * than only at the bottom. The image is 2400 by 900, so at 500% wide it is
 * 187.5vw tall; the third layer has exactly that size and position and
 * blends the image's own edge fades into the page navy. The fourth darkens
 * the lower sky so text stays readable.
 */
.tdic-sky {
	background-image:
		var(--tdic-fade-top),
		var(--tdic-fade-bottom),
		linear-gradient(180deg, var(--wp--preset--color--navy) 0%, transparent 16%, transparent 64%, var(--wp--preset--color--navy) 100%),
		linear-gradient(180deg, transparent 0% 60%, var(--wp--preset--color--navy) 100%),
		image-set(
			url("../images/night-sky-mobile.avif?ver=1") type("image/avif"),
			url("../images/night-sky-mobile.webp?ver=1") type("image/webp")
		);
	background-size: 100% var(--tdic-fade), 100% var(--tdic-fade), 500% 187.5vw, cover, 500% auto;
	background-position: top, bottom, center 62%, center, center 62%;
}

@media (min-width: 801px) {
	.tdic-sky {
		background-size: 100% var(--tdic-fade), 100% var(--tdic-fade), cover, cover;
		background-position: top, bottom, center bottom, center bottom;
		background-image:
			var(--tdic-fade-top),
			var(--tdic-fade-bottom),
			linear-gradient(180deg, transparent 0% 55%, var(--wp--preset--color--navy) 100%),
			image-set(
				url("../images/night-sky-1440.avif?ver=1") type("image/avif"),
				url("../images/night-sky-1440.webp?ver=1") type("image/webp")
			);
	}
}

@media (min-width: 1441px) {
	.tdic-sky {
		background-image:
			var(--tdic-fade-top),
			var(--tdic-fade-bottom),
			linear-gradient(180deg, transparent 0% 55%, var(--wp--preset--color--navy) 100%),
			image-set(
				url("../images/night-sky-1920.avif?ver=1") type("image/avif"),
				url("../images/night-sky-1920.webp?ver=1") type("image/webp")
			);
	}
}

/* Large screens only: a sharper cut from Andrei's 6000px original (D59). */
@media (min-width: 1921px) {
	.tdic-sky {
		background-image:
			var(--tdic-fade-top),
			var(--tdic-fade-bottom),
			linear-gradient(180deg, transparent 0% 55%, var(--wp--preset--color--navy) 100%),
			image-set(
				url("../images/night-sky-2560.avif?ver=1") type("image/avif"),
				url("../images/night-sky-2560.webp?ver=1") type("image/webp")
			);
	}
}

/* The full site's 404 uses the site background from Drive-In settings
   (D81), its bottom edge fading into the navy; the landing page and its 404
   keep the images above. */
.tdic-sky.tdic-sky--site {
	background-image:
		var(--tdic-fade-top),
		linear-gradient(180deg, transparent 0% 55%, var(--wp--preset--color--navy) 100%),
		var(--tdic-sky-phone, image-set(url("../images/night-sky-mobile.avif?ver=1") type("image/avif"), url("../images/night-sky-mobile.webp?ver=1") type("image/webp")));
	background-size: 100% var(--tdic-fade), cover, cover;
	background-position: top, center, center 78%;
}

@media (min-width: 801px) {
	.tdic-sky.tdic-sky--site {
		background-image:
			var(--tdic-fade-top),
			linear-gradient(180deg, transparent 0% 55%, var(--wp--preset--color--navy) 100%),
			var(--tdic-sky-1440, image-set(url("../images/night-sky-1440.avif?ver=1") type("image/avif"), url("../images/night-sky-1440.webp?ver=1") type("image/webp")));
		background-position: top, center, center bottom;
	}
}

@media (min-width: 1441px) {
	.tdic-sky.tdic-sky--site {
		background-image:
			var(--tdic-fade-top),
			linear-gradient(180deg, transparent 0% 55%, var(--wp--preset--color--navy) 100%),
			var(--tdic-sky-1920, image-set(url("../images/night-sky-1920.avif?ver=1") type("image/avif"), url("../images/night-sky-1920.webp?ver=1") type("image/webp")));
	}
}

@media (min-width: 1921px) {
	.tdic-sky.tdic-sky--site {
		background-image:
			var(--tdic-fade-top),
			linear-gradient(180deg, transparent 0% 55%, var(--wp--preset--color--navy) 100%),
			var(--tdic-sky-2560, image-set(url("../images/night-sky-2560.avif?ver=1") type("image/avif"), url("../images/night-sky-2560.webp?ver=1") type("image/webp")));
	}
}

/* A few yellowish stars that twinkle gently. Still for reduced motion. */
.tdic-sky::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 18%, var(--wp--preset--color--cream), transparent),
		radial-gradient(1px 1px at 34% 9%, var(--wp--preset--color--cream), transparent),
		radial-gradient(1.5px 1.5px at 71% 14%, var(--wp--preset--color--cream), transparent),
		radial-gradient(1px 1px at 86% 27%, var(--wp--preset--color--cream), transparent),
		radial-gradient(1px 1px at 55% 31%, var(--wp--preset--color--cream), transparent);
	animation: tdic-twinkle 6s ease-in-out infinite alternate;
	opacity: 0.8;
}

@keyframes tdic-twinkle {
	from { opacity: 0.35; }
	to { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
	.tdic-sky::before {
		animation: none;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

.tdic-sky--full {
	min-height: 100vh;
	min-height: 100svh;
}

/* Logo. */
.tdic-logo img {
	display: block;
	height: auto;
}

.tdic-logo--header img {
	width: clamp(120px, 18vw, 170px);
}

.tdic-logo--hero img {
	width: min(560px, 82vw);
	margin-inline: auto;
}

/* Buttons used by the site chrome and Home (27.2). Red has a light sweep on
   hover (a light effect, D66); the outline button fills cream on hover. */
.tdic-btn,
.wp-block-button.tdic-cta--red .wp-block-button__link,
.wp-block-button.tdic-cta--line .wp-block-button__link {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-block-size: 52px;
	padding: 0 1.75rem;
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s var(--wp--custom--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}

.tdic-btn:active,
.wp-block-button.tdic-cta--red .wp-block-button__link:active,
.wp-block-button.tdic-cta--line .wp-block-button__link:active {
	transform: scale(0.97);
}

.tdic-btn--red,
.wp-block-button.tdic-cta--red .wp-block-button__link {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--cream);
}

.tdic-btn--red:hover,
.wp-block-button.tdic-cta--red .wp-block-button__link:hover {
	color: var(--wp--preset--color--cream);
	transform: translateY(-2px);
}

.tdic-btn--red::after,
.wp-block-button.tdic-cta--red .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, var(--wp--preset--color--cream) 50%, transparent 70%);
	opacity: 0.35;
	transform: translateX(-120%);
	pointer-events: none;
}

.tdic-btn--red:hover::after,
.wp-block-button.tdic-cta--red .wp-block-button__link:hover::after {
	transform: translateX(120%);
	transition: transform 0.7s var(--wp--custom--ease);
}

.tdic-btn--line,
.wp-block-button.tdic-cta--line .wp-block-button__link {
	border-color: var(--wp--preset--color--cream);
	background: transparent;
	color: var(--wp--preset--color--cream);
}

.tdic-btn--line:hover,
.wp-block-button.tdic-cta--line .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
}

.tdic-btn .tdic-icon {
	inline-size: 1rem;
	block-size: 1rem;
}

.tdic-arrow {
	display: inline-block;
	transition: transform 0.2s var(--wp--custom--ease);
}

.tdic-btn:hover .tdic-arrow,
a:hover > .tdic-arrow {
	transform: translateX(4px);
}

/* Header (brief 27.2 and 28.5, D56, D74). On every page it is fixed to the
 * top: fully clear at the top of the page, it slides away as you scroll down
 * and back as you scroll up, and while it shows below the hero it is navy at
 * 85% with a light blur, the one exception to D66 (Jonny, 12 October).
 * site-nav.js sets is-hidden and is-solid, and --tdic-top so the header sits
 * under the WordPress toolbar for logged-in users without a second push.
 * The desktop menu needs about 1080px; below that it is the logo and a menu
 * button. Media queries cannot read theme.json tokens, so widths are here. */
:root {
	--tdic-header-h: 5rem;
}

.tdic-header--site {
	position: fixed;
	inset: var(--tdic-top, 0px) 0 auto;
	z-index: 100;
	background: transparent;
	transition: transform 0.35s var(--wp--custom--ease), background-color 0.35s var(--wp--custom--ease);
}

body.admin-bar .tdic-header--site {
	--tdic-top: var(--wp-admin--admin-bar--height, 0px);
}

.tdic-header--site.is-hidden:not(:focus-within) {
	transform: translateY(calc(-100% - var(--tdic-top, 0px)));
}

.tdic-header--site.is-solid {
	background: color-mix(in srgb, var(--wp--preset--color--navy) 85%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Without blur support the bar is solid navy, so the links stay readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tdic-header--site.is-solid {
		background: var(--wp--preset--color--navy);
	}
}

/* Logo left, links centred with equal gaps, Book tickets right. */
.tdic-header--site .tdic-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-block-size: var(--tdic-header-h, 5rem);
	padding-block: 0;
}

.tdic-header--site .tdic-header__bar > :first-child {
	justify-self: start;
}

.tdic-header--site .tdic-nav {
	display: contents;
}

.tdic-header--site .tdic-nav__tools {
	grid-column: 3;
	justify-self: end;
}

.tdic-header--site .tdic-logo--header img {
	inline-size: 120px;
}

/* Pages without a hero keep a navy band where the header sits, so the page
 * starts below it; Home runs its hero up behind the clear header. */
.wp-site-blocks > header:has(> .tdic-header--site) {
	block-size: var(--tdic-header-h, 5rem);
	background: var(--wp--preset--color--navy);
}

.tdic-home-page .wp-site-blocks > header:has(> .tdic-header--site) {
	block-size: 0;
}

.tdic-home-page .wp-site-blocks > * {
	margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tdic-header--site {
		transition: none;
	}
}

@media (max-width: 1079px) {
	:root {
		--tdic-header-h: 4rem;
	}

	.tdic-header--site .tdic-header__bar {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tdic-header--site .tdic-nav__tools {
		grid-column: 2;
	}

	.tdic-header--site .tdic-logo--header img {
		inline-size: 104px;
	}
}

.tdic-header--overlay {
	border-bottom: 0;
	background: transparent;
}

.tdic-nav {
	display: flex;
	align-items: center;
	gap: 1.625rem;
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 600;
}

.tdic-nav a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

.tdic-nav__main {
	display: none;
}

.tdic-nav__main ul {
	display: flex;
	gap: 1.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdic-nav__main a {
	position: relative;
	display: inline-block;
	padding-block: 0.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* A red underline grows from the left on hover, and marks the current page. */
.tdic-nav__main a::after {
	content: "";
	position: absolute;
	inset: auto 0 2px;
	block-size: 2px;
	background: var(--wp--preset--color--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--wp--custom--ease);
}

.tdic-nav__main a:hover::after,
.tdic-nav__main a[aria-current="page"]::after {
	transform: scaleX(1);
}

.tdic-nav__tools {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.tdic-nav__book {
	min-block-size: 44px;
	padding: 0 1.25rem;
	font-size: 0.8125rem;
}

.tdic-nav__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-inline-size: var(--wp--custom--tap-target);
	min-block-size: var(--wp--custom--tap-target);
	padding: 0 0.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background: transparent;
	color: var(--wp--preset--color--cream);
	font: inherit;
	cursor: pointer;
}

.tdic-nav__icon:hover {
	color: var(--wp--preset--color--red);
}

.tdic-nav__toggle {
	border: 1.5px solid var(--wp--preset--color--cream);
}

.tdic-nav__toggle:hover {
	border-color: var(--wp--preset--color--red);
}

.tdic-nav__icon .tdic-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.tdic-nav__bag {
	position: relative;
	display: inline-flex;
}

.tdic-nav__count {
	position: absolute;
	inset-block-start: -0.55rem;
	inset-inline-end: -0.7rem;
	min-inline-size: 1.25rem;
	padding: 0 0.3rem;
	border-radius: var(--wp--custom--radius-pill);
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--cream);
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: center;
}

/* Basket with an active hold: the time left sits beside the icon. */
.tdic-nav__basket.is-held,
.tdic-nav__basket.is-expired {
	padding-inline-end: 0.75rem;
	border: 1px solid var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius-pill);
}

.tdic-nav__timer {
	margin-inline-start: 0.6rem;
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--small);
}

.tdic-nav__basket.is-warning,
.tdic-nav__basket.is-expired {
	border-color: var(--wp--preset--color--red);
}

@media (max-width: 599px) {
	.tdic-nav__book {
		display: none;
	}
}

@media (min-width: 1080px) {
	.tdic-nav__main {
		display: block;
	}

	.tdic-nav__main .is-menu-only,
	.tdic-nav__toggle {
		display: none;
	}
}

/* Menu panel: full screen on the night sky. */
.tdic-menu {
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--gradient--night-sky);
	color: var(--wp--preset--color--cream);
}

.tdic-menu::backdrop {
	background: var(--wp--preset--color--navy);
}

.tdic-menu[open] {
	animation: tdic-menu-in var(--wp--custom--duration--base) ease-out;
}

@keyframes tdic-menu-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdic-menu[open] {
		animation: none;
	}
}

.tdic-menu__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-block-size: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	box-sizing: border-box;
}

.tdic-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: 3.5rem;
}

.tdic-menu a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

.tdic-menu__home {
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--small);
}

.tdic-menu__links,
.tdic-menu__more {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdic-menu__links a {
	display: block;
	padding-block: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	text-transform: uppercase;
}

.tdic-menu__links a[aria-current="page"] {
	color: var(--wp--preset--color--red);
}

.tdic-menu__more {
	display: grid;
	gap: 0.25rem;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--custom--color--line);
}

.tdic-menu__more a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-block-size: var(--wp--custom--tap-target);
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 600;
}

.tdic-menu__more .tdic-icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.tdic-menu__cta {
	margin-block-start: auto;
	text-align: center;
}

html.tdic-menu-open {
	overflow: hidden;
}

/* "Book now" fixed to the bottom on phones and small tablets (28.5). */
.tdic-book-bar {
	position: sticky;
	inset-block-end: 0;
	z-index: 40;
	padding: 0.75rem var(--wp--preset--spacing--30) calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--navy);
	border-block-start: 1px solid var(--wp--preset--color--cream);
}

.tdic-book-bar__button {
	inline-size: 100%;
}

@media (min-width: 900px) {
	.tdic-book-bar {
		display: none;
	}
}

/* Home's ticket bar (27.2, section 11): 820px and narrower, it slides up once
   the hero has gone and away while the booking card or the sign-up form is on
   screen. The page gets bottom padding so it never covers the footer. */
.tdic-book-bar--home {
	position: fixed;
	inset: auto 12px calc(12px + env(safe-area-inset-bottom));
	display: flex;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--wp--preset--color--cream);
	border-radius: 14px;
	visibility: hidden;
	transform: translateY(140%);
	transition: transform 0.45s var(--wp--custom--ease), visibility 0s linear 0.45s;
}

.tdic-book-bar--home.is-shown {
	visibility: visible;
	transform: none;
	transition: transform 0.45s var(--wp--custom--ease), visibility 0s;
}

.tdic-book-bar--home .tdic-btn--red {
	flex: 1;
}

/* The pair never spills out of the bar: side by side when they fit, one
   above the other when they do not (enlarged text, the narrowest phones). */
.tdic-book-bar--home {
	flex-wrap: wrap;
}

.tdic-book-bar--home .tdic-btn {
	flex: 1 1 auto;
	min-inline-size: 0;
	max-inline-size: 100%;
	white-space: normal;
}

@media (max-width: 820px) {
	body.tdic-home-page {
		/* 84px at normal text size, more when the text is enlarged. */
		padding-block-end: calc(4.5rem + 12px);
	}
}

/* The narrowest phones stack the pair, so the bar is taller. */
@media (max-width: 359px) {
	body.tdic-home-page {
		padding-block-end: calc(9rem + 8px);
	}
}

@media (min-width: 821px) {
	.tdic-book-bar--home {
		display: none;
	}
}

/* Reviewer preview bar (D55): one fixed line at the very top, with the
   header and the page moved down by its height so it covers nothing
   (D95). Reviewers only; visitors never see it. */
body.tdic-has-preview {
	--tdic-preview-h: 2.5rem;
	padding-block-start: var(--tdic-preview-h);
}

body.tdic-has-preview .tdic-header--site {
	--tdic-top: var(--tdic-preview-h);
}

.tdic-preview-bar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 102;
	block-size: var(--tdic-preview-h, 2.5rem);
	overflow-x: auto;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.tdic-preview-bar p {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: center;
	min-inline-size: max-content;
	block-size: 100%;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--30);
}

@media (max-width: 599px) {
	.tdic-preview-bar__note {
		display: none;
	}
}

.tdic-preview-bar a {
	color: var(--wp--preset--color--black);
}

/* Script accent text. */
.tdic-accent,
.has-accent-font-family {
	text-transform: none;
	letter-spacing: 0;
}

/* Kicker above a heading. */
.tdic-kicker {
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--cream);
}

/* A raised band on the navy page (home page sections). */
.tdic-band {
	background: var(--wp--preset--color--navy);
	border-block: 1px solid var(--wp--preset--color--cream);
}

/* Red on a raised panel measures 2.90:1, below the 3:1 large text minimum,
   so headings on raised panels are cream (D58). */
.tdic-band :is(h1, h2, h3, h4),
.tdic-card :is(h1, h2, h3, h4),
.tdic-footer-signup :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--cream);
}

/* Cards and panels. */
.tdic-card {
	background: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius);
}

/* Red headings fail contrast on raised panels, so headings there are cream. */
.tdic-card :where(h2, h3, h4) {
	color: var(--wp--preset--color--cream);
}

/* How it works steps. */
.tdic-steps {
	counter-reset: tdic-step;
}

.tdic-howto-step {
	counter-increment: tdic-step;
	position: relative;
}

.tdic-howto-step > :first-child::before {
	content: counter(tdic-step);
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	vertical-align: middle;
}

/* FAQ accordion (core/details). */
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	list-style-position: outside;
	padding-block: 0.25rem;
}

.wp-block-details[open] > summary {
	margin-bottom: 0.75rem;
}

/* Page title band. */
.tdic-page-hero {
	background: var(--wp--preset--color--navy);
}

.tdic-breadcrumbs,
.tdic-breadcrumbs a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--cream);
}

/* Long reads on a light background (policies, FAQ). Headings black on white. */
.tdic-light {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.tdic-light :where(h1, h2, h3, h4, h5, h6),
.tdic-light .wp-block-details summary {
	color: var(--wp--preset--color--black);
}

.tdic-light a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--black);
}

.tdic-light a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--red);
}

.tdic-light .wp-block-details {
	border-bottom-color: var(--wp--preset--color--cream);
}

/* Mailing list band above the footer on every page except Home (28.5). */
.tdic-footer-signup {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--cream);
	background: var(--wp--preset--color--navy);
	text-align: center;
}

.tdic-footer-signup__title {
	margin-block-end: 0;
}

/* With text enlarged to 200% the field and button shrink to the screen
   instead of pushing the page sideways (WCAG 1.4.10). */
.tdic-footer-signup .tdic-signup__input {
	min-inline-size: 0;
}

.tdic-footer-signup .tdic-signup__button {
	max-inline-size: 100%;
	white-space: normal;
}

.tdic-footer {
	border-top: 1px solid var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--small);
}

/* Site footer (27.2 and 28.5): centred logo, links, the small print, the
   address (identical everywhere, 16.5), the copyright line (D59) and the
   company line UK law requires. */
.tdic-footer--site {
	display: grid;
	/* One column no wider than the screen, so with text enlarged to 200% the
	   link rows wrap instead of pushing the page sideways (WCAG 1.4.10). */
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	overflow-wrap: anywhere;
	gap: 1.25rem;
	padding: 2.5rem var(--wp--preset--spacing--30) 3rem;
	background: var(--wp--preset--color--navy);
	text-align: center;
}

.tdic-footer--site .tdic-logo--footer img {
	inline-size: 140px;
}

.tdic-foot-links ul,
.tdic-foot-small ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: the footer links in two neat columns, or one when the text is
   enlarged and two would not fit, so they never run off the screen. */
@media (max-width: 600px) {
	.tdic-foot-links {
		inline-size: 100%;
	}

	.tdic-foot-links ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11em), 1fr));
		gap: 0.25rem 1rem;
	}
}

.tdic-foot-links a {
	display: inline-block;
	padding-block: 0.6rem;
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--cream);
}

.tdic-foot-links a:hover {
	text-decoration: underline;
}

.tdic-foot-small a,
.tdic-linklike {
	display: inline-block;
	padding-block: 0.6rem;
	color: var(--wp--preset--color--cream);
}

.tdic-linklike {
	padding-inline: 0;
	border: 0;
	background: none;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.tdic-footer--site .tdic-venue {
	font-style: normal;
}

.tdic-footer--site .tdic-venue br {
	display: none;
}

.tdic-footer--site .tdic-venue__name::after,
.tdic-footer--site .tdic-venue__line:not(:last-child)::after {
	content: ", ";
}

/* The address line is set in capitals (Jonny, 12 October). */
.tdic-footer--site .tdic-venue__name,
.tdic-footer--site .tdic-venue__address {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tdic-company-line {
	max-inline-size: 60ch;
	margin: 0;
	font-size: 0.8125rem;
}

.tdic-by-cinepark {
	font-family: var(--wp--preset--font-family--subheading);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Space above section headings in long content. */
.wp-block-post-content > :where(h2, .wp-block-heading):not(:first-child) {
	margin-top: var(--wp--preset--spacing--50);
}

/* Forms on the sky sit on a dark panel so text stays readable over the city lights. */
.tdic-sky .tdic-signup {
	max-width: 36rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--cream);
}

/*
 * Landing page and the pre-launch 404 (Andrei's revisions, D59). The sky
 * fills the screen; the footer is a solid navy band across the full width
 * at the bottom, and a navy gradient rises from it behind the closing lines
 * so the cream text stands clear of the city lights.
 */
.tdic-landing {
	display: flex;
	flex-direction: column;
	overflow-x: clip;
}

.tdic-landing__main {
	flex: 1 0 auto;
	inline-size: 100%;
	box-sizing: border-box;
}

.tdic-landing::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: -1;
	block-size: var(--tdic-scrim, 22rem);
	pointer-events: none;
	background: linear-gradient(0deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy) 30%, transparent 100%);
}

.tdic-landing__title {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tdic-landing__countdown,
.tdic-landing__signup {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tdic-landing__closing {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Footer band: landing, policy pages and the pre-launch 404. */
.tdic-footer--band {
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-top: 0;
	background: var(--wp--preset--color--navy);
}

/* Copyright line, in capitals. It needs about 1074px on one line; on anything
   narrower each group takes its own line, so it only ever breaks at a
   separator. */
.tdic-copyright {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.35rem 0.6rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--subheading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--cream);
}

.tdic-copyright__group {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 0.6rem;
}

.tdic-copyright__item {
	white-space: nowrap;
}

/* In the site footer an item may break inside itself only when it cannot fit
   on its own line, which happens with text enlarged to 200% on a phone. */
.tdic-footer--site .tdic-copyright__item {
	white-space: normal;
}

.tdic-copyright a {
	color: var(--wp--preset--color--cream);
}

@media (max-width: 1119px) {
	.tdic-copyright {
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
	}

	.tdic-copyright > .tdic-copyright__sep,
	.tdic-copyright__group:not(:last-child) > .tdic-copyright__sep {
		display: none;
	}

	.tdic-copyright__group:not(:last-child) {
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
	}
}


/* Policy pages before launch: the logo sits in the middle on every screen. */
.tdic-header--centred {
	text-align: center;
}

.tdic-header--centred .tdic-logo {
	display: inline-block;
}

/*
 * Tablet and desktop landing (Andrei, 10 October). One column, as wide as
 * the headline: the logo's lettering spans it, and the sign-up panel lines
 * up with it. Phones keep their approved layout.
 */
@media (min-width: 600px) {
	.tdic-landing {
		--tdic-landing-col: calc(var(--wp--preset--font-size--title) * 14.6);
		--tdic-panel-gap: 1.75rem;
	}

	.tdic-landing .tdic-logo--hero img {
		inline-size: min(calc(var(--tdic-landing-col) * 1.04), 92vw);
	}

	.tdic-landing__title {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	.tdic-landing__signup {
		margin-block-start: var(--wp--preset--spacing--50);
	}

	.tdic-landing .tdic-signup {
		display: grid;
		gap: var(--tdic-panel-gap);
		max-inline-size: var(--tdic-landing-col);
		padding: var(--tdic-panel-gap);
		box-sizing: border-box;
	}

	.tdic-landing .tdic-signup > p {
		margin: 0;
	}

	.tdic-landing .tdic-signup__row {
		gap: var(--tdic-panel-gap) 1rem;
	}

	.tdic-landing .tdic-signup__label {
		margin: 0;
	}

	/* The tick box stays close under the email box. */
	.tdic-landing .tdic-signup__optin {
		margin-block-start: calc(0.75rem - var(--tdic-panel-gap));
	}

	.tdic-landing .tdic-signup__status:empty,
	.tdic-landing .tdic-signup__error[hidden] {
		display: none;
	}

	/* The focus ring sits inside the box so both side margins stay even. */
	.tdic-landing .tdic-signup__input:focus-visible {
		outline-offset: -5px;
	}
}

/* Landing title: one line on wider screens. On phones it stacks as
   "Belfast's / drive-in cinema / is coming" so it can be set larger. */
.tdic-landing__title {
	font-size: var(--wp--preset--font-size--title);
}

@media (max-width: 599px) {
	.tdic-landing__title {
		font-size: var(--wp--preset--font-size--title-stacked);
	}

	.tdic-landing__title span {
		display: block;
	}
}

/* The landing footer is one row, so its social links sit inline. */
.tdic-landing .tdic-social {
	display: flex;
	gap: 1rem;
}

/* Copy below the sign-up sits over the city lights: a soft shadow keeps it readable. */
.tdic-landing p {
	text-shadow: 0 1px 4px var(--wp--preset--color--navy), 0 0 12px var(--wp--preset--color--navy);
}

/* Landing headings in the sign-up panel and the intro match the on-sale line. */
.tdic-landing .tdic-signup__label,
.tdic-landing .tdic-signup__done-text,
.tdic-landing .tdic-landing__intro {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--cream);
}

.tdic-landing .tdic-signup__label {
	text-align: center;
	font-size: var(--wp--preset--font-size--landing-label);
}

.tdic-landing .tdic-signup__done-text {
	font-size: var(--wp--preset--font-size--landing-text);
}

.tdic-landing .tdic-signup__consent,
.tdic-landing .tdic-signup__status {
	text-align: center;
}

/* Embedded media facades. */
.wp-block-embed iframe,
.tdic-map iframe {
	max-width: 100%;
}