/**
 * MeChef homepage.
 *
 * Compiled from the website.html design bundle. Every colour, size, radius and
 * timing here is copied verbatim from that design's inline styles — the only
 * substantive additions are the :hover / :focus / :active rules, which the
 * design expressed as style-hover="" / style-focus="" / style-active=""
 * attributes that no browser implements.
 *
 * Scoped under .mch so it cannot leak into Astra's other pages.
 */

.mch {
	--mch-red: #ff0000;
	--mch-red-hover: #e10000;
	--mch-red-active: #c40000;
	--mch-red-tint: #ffedec;
	--mch-red-ring: #fff0ef;
	--mch-ink: #18181b;
	--mch-body: #27272a;
	--mch-muted: #52525b;
	--mch-label: #3f3f46;
	--mch-faint: #71717a;
	--mch-line: #ebedf0;
	--mch-field: #e4e4e7;
	--mch-green: #22a518;

	--mch-display: 'Manrope', Arial, sans-serif;
	--mch-text: 'Helvetica Neue', Arial, sans-serif;
	--mch-system: -apple-system, 'Helvetica Neue', Arial, sans-serif;

	--mch-gutter: clamp(20px, 5vw, 64px);

	font-family: var(--mch-text);
	color: var(--mch-body);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

/* The design set overflow-x:hidden on this wrapper, which silently broke its
   own sticky header: an ancestor with a hidden overflow axis becomes the
   sticky element's scroll container, so .mch-header stuck to the wrapper (which
   never scrolls) instead of the viewport and simply scrolled away. The only
   thing that needed clipping was the hero's decorative blob, and .mch-hero
   already has overflow:hidden of its own — so this stays off .mch and goes on
   the root, where it cannot capture the header. */
html:has(> body.mch-page) {
	overflow-x: hidden;
}

/* The design hides Astra's document margin. Scoped to the template body. */
body.mch-page {
	margin: 0;
}

.mch *,
.mch *::before,
.mch *::after {
	box-sizing: border-box;
}

.mch img,
.mch svg {
	max-width: 100%;
}

/* Inline SVG icons stand in for the Font Awesome webfont. `em` sizing keeps
   them scaling with font-size exactly as the original <i> elements did. */
.mch-i {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	fill: currentColor;
	flex-shrink: 0;
}

.mch-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visible keyboard focus. The design specified none; shipping a page with no
   focus ring is a real accessibility regression, so links and buttons get one. */
.mch a:focus-visible,
.mch button:focus-visible {
	outline: 2px solid var(--mch-red);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- header --- */

.mch-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding: 14px var(--mch-gutter);
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--mch-line);
}

/* The admin bar is fixed at the top for logged-in users and would sit on top
   of the sticky header. */
.admin-bar .mch-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .mch-header {
		top: 46px;
	}
}

.mch-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.mch-brand__mark {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: block;
}

.mch-brand__word {
	font-family: var(--mch-display);
	font-weight: 800;
	font-size: 21px;
	color: var(--mch-red);
	letter-spacing: -0.01em;
}

.mch-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ------------------------------------------------------- store buttons --- */

.mch-store {
	display: flex;
	transition: opacity 0.2s, transform 0.2s;
}

.mch-store:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}

/* The hero's pair lift slightly further than the header's; the footer's fade
   without moving at all. All three per the design's style-hover values. */
.mch-hero__cta .mch-store:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.mch-footer .mch-store:hover {
	opacity: 0.85;
	transform: none;
}

.mch-appstore {
	display: flex;
	align-items: center;
	gap: 7px;
	background: #000;
	color: #fff;
	border-radius: 7px;
	padding: 6px 11px;
}

.mch-appstore__icon {
	font-size: 16px;
	line-height: 1;
}

.mch-appstore__lines {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.mch-appstore__small {
	font-size: 7.5px;
	font-weight: 400;
	font-family: var(--mch-system);
}

.mch-appstore__big {
	font-size: 12.5px;
	font-weight: 600;
	font-family: var(--mch-system);
	letter-spacing: 0.2px;
}

.mch-play {
	height: clamp(30px, 8vw, 38px);
	width: auto;
	display: block;
}

/* Hero-sized variants. */
.mch-hero__cta .mch-appstore {
	gap: 9px;
	border-radius: 10px;
	padding: 10px 16px;
}

.mch-hero__cta .mch-appstore__icon {
	font-size: 24px;
}

.mch-hero__cta .mch-appstore__small {
	font-size: 9.5px;
}

.mch-hero__cta .mch-appstore__big {
	font-size: 16px;
}

.mch-hero__cta .mch-play {
	height: clamp(46px, 9vw, 54px);
}

/* ------------------------------------------------------------------ hero --- */

.mch-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 88px) var(--mch-gutter) clamp(56px, 9vw, 110px);
	background: #fff;
}

.mch-hero__blob {
	position: absolute;
	top: -160px;
	right: -160px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffd6d1 0%, rgba(255, 214, 209, 0) 70%);
	filter: blur(30px);
	opacity: 0.8;
	animation: mch-blob-pulse 9s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.mch-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(40px, 6vw, 72px);
}

.mch-hero__copy {
	flex: 1 1 460px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mch-hero__title {
	margin: 0;
	font-family: var(--mch-display);
	font-weight: 800;
	font-size: clamp(38px, 5.5vw, 62px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--mch-ink);
}

.mch-hero__accent {
	color: var(--mch-red);
}

.mch-hero__lede {
	margin: 0;
	max-width: 480px;
	font-family: var(--mch-text);
	font-weight: 400;
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.55;
	color: var(--mch-muted);
}

.mch-hero__cta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.mch-hero__trust {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.mch-trust {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mch-text);
	font-size: 13px;
	color: var(--mch-faint);
}

.mch-trust--ok .mch-i {
	color: var(--mch-green);
}

/* ----------------------------------------------------------------- pills --- */

.mch-pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.mch-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: #fff;
	border: 1px solid var(--mch-line);
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mch-pill__icon {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--mch-red-tint);
	color: var(--mch-red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
}

.mch-pill__label {
	font-family: var(--mch-text);
	font-weight: 600;
	font-size: 14px;
	color: var(--mch-body);
}

/* ----------------------------------------------------------------- phone --- */

.mch-hero__visual {
	flex: 1 1 300px;
	display: flex;
	justify-content: center;
}

.mch-phone-wrap {
	position: relative;
	padding: 30px;
}

.mch-phone {
	width: clamp(230px, 58vw, 300px);
	aspect-ratio: 1206 / 2622;
	padding: 14px;
	border-radius: 44px;
	background: linear-gradient(160deg, #2c2c2e, #0b0b0c);
	box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.35),
		0 10px 25px -10px rgba(0, 0, 0, 0.2);
	position: relative;
	animation: mch-phone-float 5.5s ease-in-out infinite alternate;
	margin: 0 auto;
}

.mch-phone__screen {
	width: 100%;
	height: 100%;
	border-radius: 32px;
	overflow: hidden;
	position: relative;
	background: #000;
}

.mch-phone__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.mch-phone__slide.is-active {
	opacity: 1;
}

.mch-phone__notch {
	position: absolute;
	top: 3.2%;
	left: 50%;
	transform: translateX(-50%);
	width: 34%;
	height: 3.4%;
	background: #000;
	border-radius: 999px;
	z-index: 5;
}

.mch-float {
	position: absolute;
	left: -6px;
	bottom: 14%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: 16px;
	padding: 12px 16px;
	box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.2),
		0 2px 8px rgba(0, 0, 0, 0.06);
	max-width: 190px;
}

.mch-float__icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--mch-red-tint);
	color: var(--mch-red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.mch-float__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mch-float__title {
	font-family: var(--mch-text);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--mch-ink);
}

.mch-float__sub {
	font-family: var(--mch-text);
	font-weight: 400;
	font-size: 12px;
	color: var(--mch-faint);
}

/* --------------------------------------------------------------- contact --- */

.mch-contact {
	padding: clamp(64px, 8vw, 120px) var(--mch-gutter);
	background: #fff;
	border-top: 1px solid var(--mch-line);
}

.mch-contact__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(36px, 5vw, 64px);
}

.mch-contact__intro {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mch-eyebrow {
	font-family: var(--mch-text);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mch-red);
}

.mch-h2 {
	margin: 0;
	font-family: var(--mch-display);
	font-weight: 800;
	font-size: clamp(28px, 4vw, 38px);
	color: var(--mch-ink);
}

.mch-contact__lede {
	margin: 0;
	font-family: var(--mch-text);
	font-size: 16px;
	line-height: 1.6;
	color: var(--mch-muted);
	max-width: 380px;
}

.mch-contact__formwrap {
	flex: 1 1 380px;
}

.mch-formcard {
	background: #fff;
	border: 1px solid var(--mch-line);
	border-radius: 18px;
	padding: clamp(22px, 4vw, 30px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* WPForms renders the markup; these rules restyle it to the design. Selectors
   are kept inside .mch-formcard so no other form on the site is touched. */
.mch-formcard .wpforms-container,
.mch-formcard .wpforms-container-full {
	margin: 0;
}

.mch-formcard .wpforms-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mch-formcard .wpforms-field {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mch-formcard .wpforms-field-label {
	font-family: var(--mch-text);
	font-weight: 600;
	font-size: 13px;
	color: var(--mch-label);
	margin: 0;
	line-height: 1.3;
}

.mch-formcard input[type='text'],
.mch-formcard input[type='email'],
.mch-formcard input[type='tel'],
.mch-formcard textarea,
.mch-formcard select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mch-field);
	border-radius: 10px;
	font-family: var(--mch-text);
	font-size: 15px;
	color: var(--mch-ink);
	background: #fff;
	outline: none;
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mch-formcard textarea {
	resize: vertical;
	min-height: 108px;
}

.mch-formcard input[type='text']:focus,
.mch-formcard input[type='email']:focus,
.mch-formcard input[type='tel']:focus,
.mch-formcard textarea:focus,
.mch-formcard select:focus {
	border-color: var(--mch-red);
	box-shadow: 0 0 0 3px var(--mch-red-ring);
}

.mch-formcard input::placeholder,
.mch-formcard textarea::placeholder {
	color: #a1a1aa;
}

.mch-formcard .wpforms-submit-container {
	padding: 0;
}

.mch-formcard button[type='submit'],
.mch-formcard .wpforms-submit {
	width: 100%;
	padding: 14px 20px;
	background: var(--mch-red);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-family: var(--mch-text);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s;
}

.mch-formcard button[type='submit']:hover,
.mch-formcard .wpforms-submit:hover {
	background: var(--mch-red-hover);
}

.mch-formcard button[type='submit']:active,
.mch-formcard .wpforms-submit:active {
	background: var(--mch-red-active);
}

.mch-formcard .wpforms-error,
.mch-formcard label.wpforms-error {
	font-family: var(--mch-text);
	font-size: 13px;
	color: var(--mch-red);
}

.mch-formcard .wpforms-confirmation-container-full {
	margin: 0;
	border: none;
	background: transparent;
	padding: 20px 8px;
	text-align: center;
	font-family: var(--mch-text);
	color: var(--mch-ink);
}

/* Shown when no WPForms form has been selected yet. */
.mch-form-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 20px 8px;
}

.mch-form-fallback__icon {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--mch-red-tint);
	color: var(--mch-red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.mch-form-fallback__title {
	font-family: var(--mch-text);
	font-weight: 700;
	font-size: 17px;
	color: var(--mch-ink);
}

.mch-form-fallback p {
	margin: 0;
	font-family: var(--mch-text);
	font-size: 14px;
	color: var(--mch-faint);
}

.mch-form-fallback a {
	font-family: var(--mch-text);
	font-size: 14px;
	font-weight: 600;
	color: var(--mch-red);
}

/* ---------------------------------------------------------------- footer --- */

.mch-footer {
	background: var(--mch-red);
	color: #fff;
	padding: clamp(56px, 7vw, 84px) var(--mch-gutter) clamp(28px, 4vw, 40px);
}

.mch-footer__cta {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.mch-footer__h2 {
	margin: 0;
	font-family: var(--mch-display);
	font-weight: 800;
	font-size: clamp(28px, 4vw, 38px);
	color: #fff;
}

.mch-footer__lede {
	margin: 0;
	font-family: var(--mch-text);
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
}

.mch-footer__stores {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
}

/* On red, both badges sit on a white plate so they keep their contrast. */
.mch-footer .mch-store {
	background: #fff;
	border-radius: 8px;
	padding: 3px 5px;
}

.mch-footer .mch-appstore {
	gap: 8px;
	border-radius: 6px;
	padding: 7px 12px;
}

.mch-footer .mch-appstore__icon {
	font-size: 18px;
}

.mch-footer .mch-appstore__small {
	font-size: 8px;
}

.mch-footer .mch-appstore__big {
	font-size: 13px;
}

.mch-footer .mch-play {
	height: 38px;
}

.mch-footer__bottom {
	max-width: 1160px;
	margin: clamp(32px, 5vw, 48px) auto 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.mch-footer__logo {
	height: 56px;
	width: 56px;
	border-radius: 14px;
	display: block;
}

.mch-footer__links {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-family: var(--mch-text);
	font-size: 14px;
}

.mch-footer__links a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.mch-footer__links a:hover {
	text-decoration: underline;
	color: #fff;
}

.mch-footer__links a:focus-visible,
.mch-footer .mch-store:focus-visible {
	outline-color: #fff;
}

.mch-footer__copy {
	font-family: var(--mch-text);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	text-align: right;
}

/* The footer's three columns stack awkwardly at narrow widths with a right
   aligned copyright; centre everything once they wrap. */
@media (max-width: 720px) {
	.mch-footer__bottom {
		justify-content: center;
		text-align: center;
	}

	.mch-footer__copy {
		text-align: center;
		width: 100%;
	}
}

/* ------------------------------------------------------------ animation --- */

@keyframes mch-phone-float {
	0% {
		transform: rotate(-4deg) translateY(0px);
	}

	100% {
		transform: rotate(-4deg) translateY(-14px);
	}
}

@keyframes mch-blob-pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	50% {
		opacity: 0.9;
		transform: scale(1.05);
	}

	100% {
		opacity: 0.7;
		transform: scale(1);
	}
}

/* The phone keeps its -4deg tilt without the float; the JS also stops
   auto-advancing the screenshots when this matches. */
@media (prefers-reduced-motion: reduce) {
	.mch-phone {
		animation: none;
		transform: rotate(-4deg);
	}

	.mch-hero__blob {
		animation: none;
	}

	.mch-phone__slide {
		transition: none;
	}
}