/* ==========================================================================
   Home page sections (loaded on the front page + in the editor)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   Built on a design-pixel unit --u (1 design px). Desktop: u = width/1920,
   capped at 1px, so the composition is exact at 1920 and scales below.
   Mobile (<1024): text stacks; the pizza/wave/ring "stage" is a crop of the
   desktop scene (x 360–1560, y 430–1310) with u = width/1200.
   1920 spec: kicker 54px cap-top 275 · title 186px Nunito 900 baseline ≈471
   · lead 22/25px at x1359 · pizza 1318.7 at (255, 445.75) · wave band
   y764–1310 · ring 329 at (794, 979), disc 269, flame 99×115 at (909, 1060).
   -------------------------------------------------------------------------- */

.cdc-hero.wp-block-cover {
	container-type: inline-size;
	min-height: 0;
	padding: 0;
	overflow: clip;
	align-items: stretch;
	color: var(--wp--preset--color--white);
}

.cdc-hero > * {
	--u: calc(min(100cqw, 1920px) / 1920);
	--y0: 0;
}

/* Background art covers the full hero (design y 0–1310): stripes, chilli,
   basil, tomatoes, and the top of the chilli that runs into the next section. */
.cdc-hero .wp-block-cover__image-background {
	object-position: 50% 100%;
}

.cdc-hero .wp-block-cover__inner-container {
	box-sizing: border-box;
	position: relative;
	min-height: calc(1310 * var(--u));
	padding-top: calc(265 * var(--u));
	text-align: center;
}

.cdc-hero .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.cdc-hero__kicker,
.cdc-hero__title,
.cdc-hero__lead {
	position: relative;
	z-index: 2;
}

.cdc-hero__kicker {
	font-size: calc(54 * var(--u));
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.cdc-hero__title {
	margin-top: calc(-12 * var(--u)) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: calc(183 * var(--u)); /* ink-matched to the PDF (span reports 186) */
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.005em;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
}

/* Highlight a word (Text colour → any colour) to get the outlined style.
   Front end: SVG filter #cdc-outline (outside stroke). Editor: text-stroke. */
.cdc-hero__title mark {
	display: inline-block;
	line-height: 1;
	background: none !important;
	color: transparent !important;
	-webkit-text-stroke: 0.0296em var(--wp--preset--color--white);
}

.cdc-svg-filters .cdc-hero__title mark {
	color: var(--wp--preset--color--white) !important;
	-webkit-text-stroke: 0;
	filter: url(#cdc-outline);
}

.cdc-hero__lead {
	width: min(max(calc(382 * var(--u)), 300px), calc(50% - 399 * var(--u) - 16px));
	margin-top: calc(5 * var(--u)) !important;
	margin-left: calc(50% + 399 * var(--u)) !important;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
	line-height: 1.1364;
	text-align: left;
}

/* Stage: pizza, wave, ring. Positions are design px relative to centre. */
.cdc-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0 !important;
	pointer-events: none;
}

.cdc-hero__stage > * {
	position: absolute;
	margin: 0 !important;
}

.cdc-hero__pizza {
	left: calc(50% - 705 * var(--u));
	top: calc((445.75 - var(--y0)) * var(--u));
	width: calc(1318.7 * var(--u));
	aspect-ratio: 1;
}

/* The pizza ends at the wave's lower edge (design): mask with the same curve. */
.cdc-hero__pizza {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='255 445.75 1318.7 1318.7' preserveAspectRatio='none'%3E%3Cpath d='M-600 0H2500V1005.9C2156.4 1005.9 1947.6 1076 1720 1152.2 1493 1228.3 1248.2 1310.1 926.9 1307.5 616.8 1304.9 395.1 1222.5 185.5 1147.9-22.4 1074-222.6 1005.9-512.9 1005.9H-600Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='255 445.75 1318.7 1318.7' preserveAspectRatio='none'%3E%3Cpath d='M-600 0H2500V1005.9C2156.4 1005.9 1947.6 1076 1720 1152.2 1493 1228.3 1248.2 1310.1 926.9 1307.5 616.8 1304.9 395.1 1222.5 185.5 1147.9-22.4 1074-222.6 1005.9-512.9 1005.9H-600Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.cdc-hero__pizza img {
	display: block;
	width: 100%;
	height: 100%;
}

.cdc-hero__wave {
	left: calc(50% - 960 * var(--u));
	top: calc((760 - var(--y0)) * var(--u));
	width: calc(1920 * var(--u));
	height: calc(552 * var(--u)) !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 760 1920 552' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M-512.9 763.9C-179 763.9 53.8 844.2 266.6 919.9 477.5 995 664.1 1063.3 928.9 1065.5 1205.8 1067.7 1416.5 998.7 1643.2 922.8 1869.3 847 2112.4 763.9 2429.7 763.9V1005.9C2156.4 1005.9 1947.6 1076 1720 1152.2 1493 1228.3 1248.2 1310.1 926.9 1307.5 616.8 1304.9 395.1 1222.5 185.5 1147.9-22.4 1074-222.6 1005.9-512.9 1005.9Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* "Order Now" ring: 329 outer, 30 gradient ring, white disc. */
.cdc-hero__order {
	left: calc(50% - 166 * var(--u));
	top: calc((979 - var(--y0)) * var(--u));
	width: calc(329 * var(--u));
	height: calc(329 * var(--u));
	border-radius: 50%;
	background: linear-gradient(180deg, #8d241f 0%, #983221 25%, #af4f28 50%, #d27b32 76%, #f6a93c 100%);
	pointer-events: auto;
}

.cdc-hero__order::before {
	content: "";
	position: absolute;
	inset: calc(30 * var(--u));
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

.cdc-hero__order > * {
	position: absolute;
	margin: 0 !important;
}

.cdc-hero__flame {
	left: calc(115 * var(--u));
	top: calc(81 * var(--u));
	width: calc(99 * var(--u));
}

.cdc-hero__flame img {
	display: block;
	width: 100%;
	height: auto;
}

.cdc-hero__order-link {
	left: 0;
	right: 0;
	top: calc(204.5 * var(--u));
	font-family: var(--wp--preset--font-family--heading);
	font-size: max(calc(36 * var(--u)), 13px);
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.cdc-hero__order-link a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.cdc-hero__order-link a:hover,
.cdc-hero__order-link a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Whole ring is the click target. */
.cdc-hero__order-link a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-204.5 * var(--u));
	height: calc(329 * var(--u));
	border-radius: 50%;
}

/* Mobile / tablet */
@media (max-width: 1023.98px) {
	.cdc-hero > * {
		--u: calc(100cqw / 1200);
	}

	.cdc-hero .wp-block-cover__inner-container {
		min-height: 0;
		padding: calc(var(--cdc-header-h) + 8px) 0 0;
	}

	.cdc-hero .wp-block-cover__inner-container > :not(.cdc-hero__stage) {
		padding-inline: 16px;
	}

	.cdc-hero__kicker {
		font-size: clamp(18px, 4.6vw, 36px);
	}

	.cdc-hero__title {
		margin-top: 6px !important;
		font-size: clamp(44px, 15vw, 124px);
		line-height: 1.02;
	}

	.cdc-hero__title mark {
		display: table;
		margin-inline: auto;
	}

	.cdc-hero__lead {
		width: auto;
		max-width: 34em;
		margin: 16px auto 0 !important;
		text-align: center;
	}

	.cdc-hero__stage {
		--y0: 430;
		position: relative;
		inset: auto;
		height: calc(880 * var(--u));
		margin-top: 8px !important;
		overflow: clip;
	}
}

/* Pizza spins clockwise, continuously. Hero content fades in on load. */
@keyframes cdc-spin {
	to { transform: rotate(360deg); }
}

@keyframes cdc-pizza-in {
	from { opacity: 0; transform: translateY(60px) scale(0.94); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.cdc-hero__pizza img {
		animation: cdc-spin 40s linear infinite;
	}

	.cdc-hero__kicker,
	.cdc-hero__title,
	.cdc-hero__lead,
	.cdc-hero__order {
		animation: cdc-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	}

	.cdc-hero__title { animation-delay: 0.1s; }
	.cdc-hero__lead { animation-delay: 0.25s; }
	.cdc-hero__order { animation-delay: 0.4s; }

	.cdc-hero__pizza {
		animation: cdc-pizza-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s backwards;
	}
}