/* ==========================================================================
   The YOFI Deli page (/yofi/deli/): what the page itself needs around the order form.

   The order form is the bnjc/deli-order block. It draws itself and carries its own stylesheet
   (plugins/bnjc-core/blocks/deli-order/style.css), so nothing about the form lives here. The band
   around it is an ordinary YOFI band (.bnjc-y-band, area-yofi.css); this file only gives the form
   room under the band's words and keeps "Place an order" from sliding under the header when the
   hero's "Start your order" link jumps to it.
   ========================================================================== */

.bnjc-deli-order {
	scroll-margin-block-start: calc(var(--header-h, 76px) + 8px);
}

.bnjc-deli-order .wp-block-bnjc-deli-order {
	margin-block-start: clamp(16px, 2.4vw, 28px);
}

/* ==========================================================================
   UX and UI pass (2 Nov 2026). Layout only: no rule, price, product or switch is touched here. The shop itself (aisle tiles,
   product cards, the aisle bar, the order that stays in view) is drawn by the block's own stylesheet.
   ========================================================================== */

/* ---- How it works -------------------------------------------------------------------------- */

/* The three steps sit side by side from 800px. area-yofi.css asks for this with a rule that
   `ol.wp-block-list.bnjc-y-steps` (one column) out-ranks, so on a wide screen they were stacked
   as three thin full-width rows. */
@media (min-width: 800px) {

	.bnjc-y-how ol.wp-block-list.bnjc-y-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(20px, 3vw, 40px);
	}
}

/* On a phone the number sits beside the words, not above them: each step is about half as tall. */
@media (max-width: 799px) {

	.bnjc-y-how ol.wp-block-list.bnjc-y-steps {
		gap: 0;
		margin-block: 16px;
	}

	.bnjc-y-how .bnjc-y-steps li {
		position: relative;
		padding: 14px 0 14px 3.25rem;
		border-block-start-width: 1px;
	}

	.bnjc-y-how .bnjc-y-steps li:first-child {
		border-block-start-width: 2px;
	}

	.bnjc-y-how .bnjc-y-steps li::before {
		position: absolute;
		inset-block-start: 10px;
		inset-inline-start: 0;
		inline-size: 2.5rem;
		margin: 0;
		font-size: var(--wp--preset--font-size--heading-l);
	}
}

/* "Pickup only. There is no delivery." is the one thing a guest must not miss: a framed note, not a trailing line. */
.bnjc-y-how > p:last-child {
	max-inline-size: 62rem;
	margin-block-start: 20px;
	padding: 14px 18px;
	background: var(--wp--preset--color--white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 22%, transparent);
	border-inline-start: 4px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--xs, 2px);
}

/* ---- Place an order: words above the form ----------------------------------------------------- */

/* The request-form paragraph is the small print to the standfirst's headline, so it reads as such. */
.bnjc-deli-order > .is-style-standfirst + p {
	max-inline-size: 62ch;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Your details and send ---------------------------------------------------------------------- */

/* The tick box is drawn so it is plain to see on cream and white: a navy frame, filled when ticked. */
.bnjc-deli-order .bnjc-deli__check input {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-content: center;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--xs, 2px);
}

.bnjc-deli-order .bnjc-deli__check input::before {
	content: "";
	inline-size: 12px;
	block-size: 12px;
	background: var(--wp--preset--color--white);
	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
	transform: scale(0);
}

.bnjc-deli-order .bnjc-deli__check input:checked {
	background: var(--wp--preset--color--navy);
}

.bnjc-deli-order .bnjc-deli__check input:checked::before {
	transform: scale(1);
}

/* On a phone the one button that matters is the width of the form. */
@media (max-width: 559px) {

	.bnjc-deli-order .bnjc-deli .bnjc-deli__submit,
	.bnjc-deli-order .bnjc-deli .bnjc-deli__again {
		inline-size: 100%;
	}
}