/* ==========================================================================
   Ordering Status Section (Homepage)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ordering Open Bar
   -------------------------------------------------------------------------- */
.OrderingBar {
	background-color: 	var(--ColorPink);
	box-shadow:			0 10px 20px var(--ColorPurpleLight);

	padding:			18px 40px;
}

.OrderingBarInner {
	max-width: 			var(--MaxWidth);
	margin: 			0 auto;

	align-items: 		baseline;
	justify-content: 	center;
	gap: 				16px;
	flex-wrap: 			wrap;

	display: 			flex;
}

.OrderingBarHeading {
	font-family:		var(--FontHeader);
	font-weight:		800;
	font-size:			26px;

	color:				var(--ColorOffWhite);
}

.OrderingBarSep {
	font-family:		var(--FontHeader);
	font-weight:		700;
	font-size:			23px;

	color:				var(--ColorOffWhite);
	opacity:			0.7;
}

.OrderingBarDates {
	font-family:		var(--FontHeader);
	font-weight:		700;
	font-size:			23px;

	color:				var(--ColorOffWhite);
}

.OrderingBarLabel {
	font-family:		var(--FontBody);
	font-style:			italic;
	font-size:			20px;

	color:				var(--ColorOffWhite);
}

.OrderingBarCountdown {
	font-family:		var(--FontHeader);
	font-weight:		800;
	font-size:			23px;

	color:				var(--ColorOffWhite);
}

/* Forces "closes in ..." onto its own line — only on mobile (see media query) */
.OrderingBarBreak {
	display:			none;
}

/* --------------------------------------------------------------------------
   Ordering Closed - Intro
   -------------------------------------------------------------------------- */
.OrderingClosedIntro {
	background-color:	var(--ColorOffWhite);

	padding:			76px 40px 30px 40px;
}

.OrderingClosedIntroInner {
	max-width: 			var(--MaxWidth);
	margin: 			0 auto;

	text-align:			center;

	flex-direction: 	column;
	align-items:		center;
	gap: 				18px;

	display: 			flex;
}

.OrderingClosedHeading {
	flex-direction: 	column;
	align-items:		center;

	display: 			flex;
}

.OrderingClosedEyebrow {
	font-family:		var(--FontHeader);
	font-weight:		800;
	font-size:			18px;
	letter-spacing:		3px;
	text-transform:		uppercase;

	color:				var(--ColorPink);

	margin:				0 0 6px 0;

	align-items:		center;
	gap:				12px;

	display:			flex;
}

.OrderingClosedEyebrowSwirl {
	width:				24px;
	height:				24px;
}

.OrderingClosedEyebrowSwirlFlipped {
	transform:			scaleX(-1);
}

.OrderingClosedWord {
	font-family:		var(--FontDisplay);
	font-weight:		700;
	font-size:			70px;

	color:				var(--ColorPurpleDark);

	margin:				0;
}

.OrderingClosedUnderline {
	width:				250px;

	margin-top:			8px;
}

.OrderingClosedMessage {
	font-family:		var(--FontBody);
	font-size:			22px;

	color:				var(--ColorDarkGray);

	line-height:		1.25;

	max-width:			700px;
	margin:				0;
}

.OrderingNextWindow {
	font-family:		var(--FontBody);
	font-style:			italic;
	font-size:			20px;

	color:				var(--ColorPurpleDark);

	background-color:	var(--ColorPurpleLight);
	border-radius:		var(--BorderRadius);

	padding:			12px 22px;
	margin:				0;
}

.OrderingNextWindowDates {
	font-family:		var(--FontHeader);
	font-style:			normal;
	font-weight:		800;
	font-size:			22px;

	color:				var(--ColorPurple);
}

.OrderingClosedContact {
	margin-top:			8px;
}

/* --------------------------------------------------------------------------
   Ordering Closed - Gallery ("Here's what you missed")
   -------------------------------------------------------------------------- */
.OrderingGallery {
	background-color:	var(--ColorOffWhite);

	padding:			50px 40px 40px 40px;
}

.OrderingGalleryInner {
	max-width: 			var(--MaxWidth);
	margin: 			0 auto;

	text-align:			center;
}

.OrderingGalleryEyebrow {
	font-family:		var(--FontHeader);
	font-weight:		800;
	font-size:			16px;
	letter-spacing:		3px;
	text-transform:		uppercase;

	color:				var(--ColorPink);

	margin:				0 0 8px 0;
}

.OrderingGalleryTitle {
	font-family:		var(--FontHeader);
	font-weight:		800;
	font-size:			38px;

	color:				var(--ColorPurpleDark);

	margin:				0 0 36px 0;
}

.OrderingGalleryGrid {
	justify-content:	center;
	gap:				36px;
	flex-wrap:			wrap;

	display:			flex;
}

.OrderingGalleryItem {
	flex:				0 1 300px;
}

.OrderingGalleryImage {
	width:				100%;

	border-radius:		var(--BorderRadiusLg);
}

.OrderingGalleryName {
	font-family:		var(--FontHeader);
	font-weight:		700;
	font-size:			clamp(28px, 3.5vw, 36px);

	color:				var(--ColorPurpleDark);

	margin:				20px 0 10px 0;
}

.OrderingGalleryDescription {
	font-family:		var(--FontBody);
	font-size:			22px;

	color:				var(--ColorDarkGray);

	line-height:		1.25;

	margin:				0;
}

/* --------------------------------------------------------------------------
   Ordering Closed - Recipe Card ("How ordering works")
   -------------------------------------------------------------------------- */
.OrderingRecipe {
	background:
		linear-gradient(rgba(70, 22, 103, 0.5), rgba(70, 22, 103, 0.5)),
		url("/Assets/OrderingKitchen.jpg") center / cover no-repeat;

	padding:			76px 40px 84px 40px;
}

.OrderingRecipeCard {
	position:			relative;

	max-width:			780px;
	margin:				0 auto;

	background-color:	var(--ColorWhite);

	border:				2px dashed var(--ColorPink);
	border-radius:		16px;

	box-shadow:			0 12px 26px rgba(70, 22, 103, 0.2);

	transform:			rotate(-1.2deg);

	text-align:			center;

	padding:			40px 54px;
}

/* Tape pieces at the top corners */
.OrderingRecipeCard::before,
.OrderingRecipeCard::after {
	content:			"";
	position:			absolute;
	top:				-14px;

	width:				130px;
	height:				32px;
}

.OrderingRecipeCard::before {
	left:				60px;

	transform:			rotate(8deg);
	background:			rgba(141, 0, 241, 0.24);
}

.OrderingRecipeCard::after {
	right:				60px;

	transform:			rotate(-7deg);
	background:			rgba(208, 48, 121, 0.24);
}

.OrderingRecipeHeader {
	font-family:		var(--FontDisplay);
	font-size:			19px;

	color:				var(--ColorPink);

	margin:				0 0 12px 0;

	align-items:		center;
	justify-content:	center;
	gap:				10px;

	display:			flex;
}

.OrderingRecipeHeaderSwirl {
	width:				20px;
	height:				20px;
}

.OrderingRecipeHeaderSwirlFlipped {
	transform:			scaleX(-1);
}

.OrderingRecipeTitle {
	font-family:		var(--FontDisplay);
	font-weight:		700;
	font-size:			36px;

	color:				var(--ColorPurpleDark);

	margin:				0;
}

.OrderingRecipeUnderline {
	width:				280px;

	margin:				8px auto 0 auto;
}

.OrderingSteps {
	text-align:			left;

	margin-top:			24px;
}

.OrderingStep {
	align-items:		center;
	gap:				18px;

	padding:			22px 0;

	border-bottom:		1.5px dashed var(--ColorPurpleLight);

	display:			flex;
}

.OrderingStep:last-child {
	border-bottom:		none;
}

.OrderingStepBadge {
	width:				48px;
	height:				48px;

	font-family:		var(--FontDisplay);
	font-weight:		700;
	font-size:			26px;
	line-height:		1;

	color:				var(--ColorWhite);

	border-radius:		50%;

	flex-shrink:		0;

	align-items:		center;
	justify-content:	center;

	display:			flex;
}

.OrderingStepBadgePink {
	background-color:	var(--ColorPink);
	transform:			rotate(-4deg);
}

.OrderingStepBadgePurple {
	background-color:	var(--ColorPurple);
	transform:			rotate(4deg);
}

.OrderingStepBadgeRed {
	background-color:	var(--ColorRed);
	transform:			rotate(-4deg);
}

.OrderingStepIcon {
	width:				24px;
	height:				24px;

	flex-shrink:		0;
}

.OrderingStepTitle {
	font-family:		var(--FontHeader);
	font-weight:		700;
	font-size:			21px;

	color:				var(--ColorPurpleDark);

	margin:				0 0 6px 0;
}

.OrderingStepDescription {
	font-family:		var(--FontBody);
	font-size:			18px;

	color:				var(--ColorGray);

	line-height:		1.25;

	margin:				0;
}

.OrderingRecipeFooter {
	font-family:		var(--FontDisplay);
	font-size:			17px;

	color:				var(--ColorPink);

	margin:				26px 0 0 0;
}

@media (max-width: 900px) {

	.OrderingBar {
		padding:		18px 30px;
	}

	.OrderingClosedIntro {
		padding:		60px 30px 30px 30px;
	}

	.OrderingGallery {
		padding:		50px 30px 40px 30px;
	}

	.OrderingGalleryGrid {
		gap:			24px;
	}

	.OrderingRecipe {
		padding:		60px 30px 70px 30px;
	}

}

@media (max-width: 768px) {

	.OrderingGalleryGrid {
		flex-direction:	column;
		align-items:	center;
		gap:			40px;
	}

	.OrderingGalleryItem {
		flex:			0 1 auto;
		width:			100%;
		max-width:		500px;
	}

}

@media (max-width: 600px) {

	.OrderingBar {
		padding:		12px 20px;
	}

	.OrderingBarInner {
		gap:			4px 12px;
	}

	/* Keep the heading·dates dot; drop the one that lands at the line wrap */
	.OrderingBarSepMid {
		display:		none;
	}

	/* Force "closes in <countdown>" onto its own second line */
	.OrderingBarBreak {
		display:		block;
		flex-basis:		100%;
		height:			0;
	}

	.OrderingBarHeading {
		font-size:		22px;
	}

	.OrderingBarDates {
		font-size:		20px;
	}

	.OrderingBarLabel {
		font-size:		17px;
	}

	.OrderingBarCountdown {
		font-size:		20px;
	}

	.OrderingClosedIntro {
		padding:		50px 20px 30px 20px;
	}

	.OrderingClosedWord {
		font-size:		52px;
	}

	.OrderingClosedUnderline {
		width:			200px;
	}

	.OrderingClosedMessage {
		font-size:		18px;
	}

	.OrderingGallery {
		padding:		40px 20px 30px 20px;
	}

	.OrderingGalleryTitle {
		font-size:		30px;
	}

	.OrderingRecipe {
		padding:		50px 20px 60px 20px;
	}

	.OrderingRecipeCard {
		transform:		none;

		padding:		30px 24px;
	}

	.OrderingRecipeCard::before,
	.OrderingRecipeCard::after {
		display:		none;
	}

	.OrderingRecipeTitle {
		font-size:		30px;
	}

	.OrderingStep {
		gap:			14px;
	}

	.OrderingStepBadge {
		width:			40px;
		height:			40px;

		font-size:		22px;
	}

	.OrderingStepIcon {
		width:			20px;
		height:			20px;
	}

}