/*
 * Shareef section primitives — ported from
 * design/prototype/assets/css/styles.css (l.237-401, 417-426, 484-499),
 * with every value sourced from theme.json presets/custom properties
 * instead of a local :root block. Logical properties only (RTL-first).
 *
 * Board grid column ratios (.board--hero/why/about/closing/deals) already
 * live in wp-content/plugins/shareef-core/src/blocks/board/style.css —
 * not duplicated here.
 */

/* stylelint-disable selector-class-pattern -- class names are ported 1:1 from
   the approved prototype (design/prototype/assets/css/styles.css) and reused
   by patterns/blocks in other lanes; renaming would break parity. */

/* ---------- sections ---------- */

/*
 * `.sec-head`, `.steps`, `.step`, `.branch`, `.actions`, `.p-tag__actions`
 * and `.faq-list` are all `core/group` blocks, so WP's global
 * `:where(.is-layout-flow) > *` rule adds
 * `margin-block-start: var(--wp--preset--spacing--gutter)` to every child on
 * top of the grid/flex `gap` below, which is wrong for all of these (their
 * children are grid/flex items, not flowing prose) — it also inflates a
 * flex row's cross-size, stretching sibling buttons taller than their
 * min-height. `:where()` has zero specificity, so a plain child combinator
 * wins.
 */
.sec-head > *,
.steps > *,
.step > *,
.branch > *,
.actions > *,
.p-tag__actions > *,
.faq-list > * {
	margin-block-start: 0;
}

.section {
	padding-block: clamp(4rem, 3rem + 5vw, 8rem);
}

.section--tight {
	padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

.sec-head {
	display: grid;
	gap: 1rem;
	margin-block-end: clamp(1.75rem, 1rem + 2vw, 3rem);
	max-width: 60rem;
}

.sec-head h2 {
	font-size: var(--wp--preset--font-size--fs-5);
}

.sec-head p {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--fs-2);
	max-width: 62ch;
}

.sec-head--split {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: end;
	justify-content: space-between;
	max-width: none;
}

.sec-head--split > div {
	display: grid;
	gap: 1rem;
	max-width: 46rem;
}

.lede-red {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--red);
	padding: 0 0.35em;
	border-radius: 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

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

/*
 * `.hero` and its `.wrap` are both `core/group` blocks and both are the
 * first/only child of an `is-layout-flow` ancestor (`<main>`, `.hero`
 * itself), so WP's global child-margin rule (see note above) stacks two
 * 40px top margins above the board — the prototype's `.hero` only wants
 * its own padding-block for that gap.
 */
.hero {
	padding-block: clamp(0.75rem, 2vw, 1.5rem) clamp(2rem, 5vw, 4rem);
	margin-block-start: 0;
}

.hero > .wrap {
	margin-block-start: 0;
}

.p-logo {
	display: grid;
	align-content: center;
	gap: 1.25rem;
}

.p-logo img {
	width: min(100%, 360px);
	height: auto;
}

.p-logo h1 {
	font-size: var(--wp--preset--font-size--fs-3);
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

.p-logo h1 .sub {
	display: block;
	color: var(--wp--preset--color--ink-2);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--fs-1);
	margin-block-start: 0.35rem;
}

.p-tag {
	display: grid;
	align-content: end;
	gap: 0.5rem;
}

.p-tag__title {
	font-size: var(--wp--preset--font-size--fs-4);
	font-weight: 800;
	line-height: 1.2;
}

.p-tag__hash {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.p-tag__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
}

/* `.contact-whatsapp`'s default ghost (white outline, base.css) reads fine on
   navy panels; the tagline panel is stone (light), so it needs the navy
   outline instead (prototype `.btn--ghost-navy`). */
.p-tag__actions .contact-whatsapp {
	background: transparent;
	color: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--navy);
}

.p-tag__actions .contact-whatsapp:hover {
	background: rgb(29 53 87 / 0.08);
}

.p-call {
	display: grid;
	align-content: space-between;
	gap: 1rem;
	height: 100%;
	text-decoration: none;
	transition: filter 0.3s var(--wp--custom--ease-out);
}

.p-call:hover {
	filter: brightness(1.08);
}

.p-call small {
	font-size: var(--wp--preset--font-size--fs-1);
	font-weight: 500;
}

.p-call .num {
	font-size: clamp(2.6rem, 1.6rem + 3vw, 4.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
}

.p-call .icon {
	width: 2rem;
	height: 2rem;
}

@media (max-width: 860px) {

	.p-logo {
		padding-block: 1.5rem;
	}

	.p-logo img {
		width: min(70%, 260px);
	}
}

/* ---------- why shareef bento ---------- */

.why-meat {
	padding: 0;
	display: grid;
	align-content: end;
	min-height: 520px;
}

.why-meat .media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.why-meat .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.why-meat .media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--wp--preset--color--navy-deep) 12%, rgb(14 26 43 / 0.35) 55%, rgb(14 26 43 / 0.05));
}

.why-meat .copy {
	padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
	display: grid;
	gap: 0.75rem;
}

.why h3 {
	font-size: var(--wp--preset--font-size--fs-4);
}

.why p {
	font-size: var(--wp--preset--font-size--fs-2);
	max-width: 46ch;
}

.why .panel:not(.panel--white):not(.panel--stone) p {
	color: var(--wp--preset--color--ink-2);
}

.why-style {
	display: grid;
	gap: 0.75rem;
	align-content: center;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.why-style p {
	color: color-mix(in oklab, var(--wp--preset--color--navy) 85%, var(--wp--preset--color--white));
}

.why-sauce,
.why-price {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.why-bread ol {
	display: grid;
	gap: 0.1rem;
	counter-reset: b;
}

.why-bread li {
	font-size: var(--wp--preset--font-size--fs-3);
	font-weight: 700;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.5rem;
	border-block-end: 1px solid rgb(255 255 255 / 0.12);
}

.why-bread li small {
	font-size: var(--wp--preset--font-size--fs-0);
	color: var(--wp--preset--color--ink-2);
	font-weight: 400;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.3rem 1rem;
	border-radius: 99px;
	background: rgb(255 255 255 / 0.1);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
	font-weight: 500;
}

.chip--hot {
	background: var(--wp--preset--color--red-ink);
	box-shadow: none;
	font-weight: 700;
}

.why-price .big {
	font-size: var(--wp--preset--font-size--fs-6);
	font-weight: 800;
	line-height: 1;
}

.why-price .big small {
	font-size: var(--wp--preset--font-size--fs-2);
	font-weight: 700;
	margin-inline-start: 0.35rem;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.why-price p {
	color: var(--wp--preset--color--white) !important;
}

.why-call {
	display: grid;
	align-content: space-between;
	gap: 1rem;
}

/* `shareef/call-button` style "bare": a plain tel: link with no icon/pill
   wrapper, so `.why-call .num` reads as plain text, not a giant red pill. */
.num-cta {
	text-decoration: none;
	color: inherit;
}

.why-call .num {
	font-size: var(--wp--preset--font-size--fs-5);
	font-weight: 800;
	line-height: 1;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.why-call p {
	color: var(--wp--preset--color--navy) !important;
}

.why-simple {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
}

.why-simple strong {
	font-size: var(--wp--preset--font-size--fs-5);
	font-weight: 800;
	line-height: 1.2;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.why-simple p {
	max-width: 52ch;
}

/* ---------- signature dishes ---------- */

.sig-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--seam-w);
	padding: var(--wp--custom--seam-w);
	background: var(--wp--preset--color--seam);
	border-radius: calc(var(--wp--custom--radius) + var(--wp--custom--seam-w));
}

/* prototype breakpoints: 2 columns from tablet down */
@media (max-width: 1100px) {

	.sig-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sig {
	display: grid;
	grid-template-rows: auto 1fr;
	padding: 0;
	text-decoration: none;
	transition: filter 0.35s var(--wp--custom--ease-out);
}

.sig:hover {
	filter: brightness(1.1);
}

.sig figure {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	position: relative;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.sig figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--wp--custom--ease-out);
}

.sig:hover figure img {
	transform: scale(1.05);
}

.sig .body {
	padding: 1.1rem 1.25rem 1.35rem;
	display: grid;
	gap: 0.4rem;
	align-content: start;
}

.sig h3 {
	font-size: var(--wp--preset--font-size--fs-3);
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.sig p {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--fs-0);
}

.sig .price-chip {
	position: absolute;
	inset-block-end: 0.9rem;
	inset-inline-start: 0.9rem;
	background: var(--wp--preset--color--red-ink);
	padding: 0.35rem 0.8rem 0.45rem;
	border-radius: 4px;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--fs-3);
	line-height: 1.1;
}

.sig .price-chip small {
	font-size: 0.8rem;
	font-weight: 700;
	margin-inline-start: 0.25rem;
}

/* ---------- how to order ---------- */

.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--seam-w);
	background: var(--wp--preset--color--seam);
	padding: var(--wp--custom--seam-w);
	border-radius: calc(var(--wp--custom--radius) + var(--wp--custom--seam-w));
	counter-reset: s;
	position: relative;
}

/*
 * flex, not grid: `align-content: start` can't be overridden by a child's
 * `margin-block-start: auto`, so the `.actions` row never reached the
 * bottom of the card. Flex column + margin-auto on the last child does.
 */
.step {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-height: 260px;
}

.step .n {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--wp--custom--radius);
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--red-ink);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--fs-3);
	line-height: 1;
	align-self: flex-start;
}

.step h3 {
	font-size: var(--wp--preset--font-size--fs-3);
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.step p {
	color: var(--wp--preset--color--ink-2);
}

.step .actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block-start: auto;
}

/* ---------- about ---------- */

.about-copy {
	display: grid;
	gap: 1.25rem;
	align-content: center;
}

.about-copy h2 {
	font-size: var(--wp--preset--font-size--fs-5);
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.about-copy p {
	font-size: var(--wp--preset--font-size--fs-2);
	max-width: 52ch;
	color: color-mix(in oklab, var(--wp--preset--color--navy) 88%, var(--wp--preset--color--white));
}

.about-copy .sign {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--fs-3);
	color: var(--wp--preset--color--red-deep);
}

.about-facts {
	display: grid;
	align-content: center;
	gap: 1rem;
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.about-facts .big {
	font-size: var(--wp--preset--font-size--fs-6);
	font-weight: 800;
	line-height: 1;
}

.about-facts .big span:last-child {
	font-size: var(--wp--preset--font-size--fs-4);
	color: var(--wp--preset--color--ink-2);
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.about-facts p:not(.big) {
	font-size: var(--wp--preset--font-size--fs-2);
	color: var(--wp--preset--color--ink-2);
	max-width: 32ch;
}

.about-facts .cities {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.about-facts .cities li {
	padding: 0.45rem 1rem;
	border-radius: 99px;
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35);
	font-weight: 700;
}

/* ---------- testimonials ---------- */

.quotes {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: var(--wp--custom--seam-w);
	background: var(--wp--preset--color--seam);
	padding: var(--wp--custom--seam-w);
	border-radius: calc(var(--wp--custom--radius) + var(--wp--custom--seam-w));
}

.quote {
	display: grid;
	gap: 1.25rem;
	align-content: space-between;
	min-height: 260px;
}

.quote blockquote {
	margin: 0;
	font-size: var(--wp--preset--font-size--fs-2);
	line-height: 1.75;
}

.quote:first-child blockquote {
	font-size: var(--wp--preset--font-size--fs-3);
	font-weight: 500;
	line-height: 1.6;
}

.quote figcaption {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 700;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.quote figcaption span {
	font-weight: 400;
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--fs-0);
}

.quote .mark {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--red);
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.panel--white.quote figcaption span {
	color: color-mix(in oklab, var(--wp--preset--color--navy) 75%, var(--wp--preset--color--white));
}

/* ---------- branches ---------- */

.branches {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--seam-w);
	background: var(--wp--preset--color--seam);
	padding: var(--wp--custom--seam-w);
	border-radius: calc(var(--wp--custom--radius) + var(--wp--custom--seam-w));
}

.branch {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-height: 340px;
}

.branch .city {
	font-size: var(--wp--preset--font-size--fs-4);
	font-weight: 800;
	line-height: 1.1;
}

.branch .area {
	color: var(--wp--preset--color--ink-2);
	font-weight: 500;
}

.branch dl {
	display: grid;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--fs-0);
}

.branch dl div {
	display: flex;
	gap: 0.6rem;
	align-items: start;
}

.branch dt {
	flex: none;
	color: var(--wp--preset--color--ink-2);
	padding-block-start: 0.2rem;
}

.branch dd a {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--fs-2);
	text-decoration: none;
}

.branch dd a:hover {
	text-decoration: underline;
}

.branch .actions {
	margin-block-start: auto;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.branch--main {
	background: radial-gradient(130% 95% at 50% -10%, var(--wp--preset--color--red), var(--wp--preset--color--red-ink) 45%, var(--wp--preset--color--red-deep));
}

.branch--main .area,
.branch--main dt,
.branch--main .soon {
	color: rgb(255 255 255 / 0.88);
}

/* ---------- faq ---------- */

.faq {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.faq .sec-head {
	position: sticky;
	top: calc(var(--wp--custom--header-h) + 2rem);
}

/* prototype styles.css responsive block: single column, heading not sticky */
@media (max-width: 860px) {

	.faq {
		grid-template-columns: minmax(0, 1fr);
	}

	.faq .sec-head {
		position: static;
	}
}

.faq-list {
	display: grid;
	gap: var(--wp--custom--seam-w);
	background: var(--wp--preset--color--seam);
	padding: var(--wp--custom--seam-w);
	border-radius: calc(var(--wp--custom--radius) + var(--wp--custom--seam-w));
}

.faq-list details {
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--navy);
}

.faq-list summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: 1.25rem;
	padding-inline: 1.5rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--fs-2);
	min-height: 64px;
	border-radius: var(--wp--custom--radius);
}

.faq-list summary:hover {
	background: var(--wp--preset--color--navy-lit);
}

.faq-list summary .plus {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	transition: transform 0.35s var(--wp--custom--ease-out);
}

.faq-list details[open] summary .plus {
	transform: rotate(45deg);
}

.faq-list details[open] summary {
	color: var(--wp--preset--color--white);
}

.faq-list details > div {
	padding-block: 0 1.4rem;
	padding-inline: 1.5rem;
	color: var(--wp--preset--color--ink-2);
	max-width: 65ch;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.faq-list details > div a {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

/* ---------- closing call ---------- */

.close-call {
	display: grid;
	gap: 1.25rem;
	align-content: center;
	min-height: 380px;
	text-decoration: none;
}

.close-call h2 {
	font-size: var(--wp--preset--font-size--fs-4);
}

.close-call .num {
	font-size: clamp(4rem, 2rem + 10vw, 10rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

/* `shareef/call-button` style "close": the bare huge number plus a small
   white pill, wrapped in its own link inside the `.close-call` panel. */
.close-call-cta {
	display: grid;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
}

/* the pill keeps its own width, like the prototype's small "call now" button */
.close-call-cta .btn {
	justify-self: start;
}

.close-side {
	display: grid;
	gap: 1rem;
	align-content: center;
}

/* the closing panel's WhatsApp link sits on a navy panel and is solid white
   in the prototype (not the default ghost outline used elsewhere). */
/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping panels (.close-side vs .p-tag__actions), not a cascade bug. */
.close-side .contact-whatsapp {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	box-shadow: none;
}

.close-side .contact-whatsapp:hover {
	background: var(--wp--preset--color--stone-soft);
}

/* ---------- menu page hero ---------- */

.menu-hero {
	padding-block: clamp(2rem, 5vw, 4rem) 1.5rem;
	display: grid;
	gap: 1rem;
}

.menu-hero h1 {
	font-size: var(--wp--preset--font-size--fs-6);
	line-height: 1.05;
}

/* stylelint-disable-next-line no-descending-specificity -- distinct, non-overlapping elements, not a cascade bug. */
.menu-hero p {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--fs-2);
	max-width: 60ch;
}

/* why board breakpoints (prototype styles.css responsive block). The panels'
   desktop spans are inline `grid-column` styles from the block attributes, so
   the narrow-screen spans need !important to win over them. */
@media (max-width: 1100px) {

	.why-meat {
		grid-column: span 12 !important;
		grid-row: auto !important;
		min-height: 420px;
	}

	.why-style {
		grid-column: span 12 !important;
	}

	.why-bread,
	.why-sauce {
		grid-column: span 6 !important;
	}

	.why-price {
		grid-column: span 7 !important;
	}

	.why-call {
		grid-column: span 5 !important;
	}
}

@media (max-width: 860px) {

	.why-bread,
	.why-sauce,
	.why-price,
	.why-call {
		grid-column: span 12 !important;
	}
}

/* prototype breakpoints: steps and quotes stack on mobile */
@media (max-width: 860px) {

	.steps,
	.quotes {
		grid-template-columns: minmax(0, 1fr);
	}

	.step,
	.quote {
		min-height: 0;
	}
}