/* ============================================================
   MENU — daily Mittagstisch / à-la-carte list with Warm/Kalt tabs
   Ported from the prototype's .lp-menu (landing.css). The values are
   the prototype's, not re-derived: sand ground, centred head with the
   date under the title, a rule under the head, then the tab strip and
   the rows.

   Distinct from .db-pricelist, which is the flat variant used for the
   wine list and the equipment examples. When .lp-menu, .er-examples
   and .wc-wines were consolidated into .db-pricelist the date and the
   tabs were dropped; this file restores them.
   ============================================================ */

/* Sand is the DEFAULT, not a universal. It is right on /mittagessen/wochenkarte
   (the prototype's ground for this section) but wrong on the landing page, where
   Figma [368:831 / mobile 368:4698] gives the frame no fill at all — it sits on
   the page cream #EEE8E2. That page carries `db-surface--none`; see surfaces.css
   for why the utility is doubled up. */
.db-menu { background: var(--sand); }

/* The rule under the head is FULL-BLEED [368:831 render: it runs 0 -> 1440,
   not 40 -> 1400]. In Figma it is a stroke on a stretched frame, so it spans the
   section edge to edge while the title stays on the page column.

   The head block therefore carries align:full, which is what makes core's
   constrained layout stop insetting it — and it has to be done that way. A
   negative margin in this file cannot win: core's constrained rule sets
   `margin-left/right: auto !important` through a selector with more specificity
   than a single class, so even `margin-inline: ... !important` here loses. That
   was measured, not assumed — the padding applied and the breakout did not.

   `padding-inline` below puts the title back on the page column. */
.db-menu__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block: 16px;
	padding-inline: var(--wp--style--root--padding-left);
	border-bottom: 1px solid var(--line2);
}
.db-menu__title { font-size: clamp(2.5rem, 12vw, 5rem); text-align: center; line-height: 1.1; }
.db-menu__date { font-size: 16px; line-height: 1.75; text-align: center; color: var(--muted); }

.db-menu__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding-block: 20px 40px;
}

/* gap 76 is authored, not emergent — the divider is a third flex child, so the
   design's 76px sits on BOTH sides of it [368:836 / 368:4703]. */
.db-menu__tabs { display: flex; align-items: flex-end; justify-content: center; gap: 76px; }
.db-menu__tab {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.25;
	color: rgba(37, 32, 30, 0.32);
	transition: color .2s ease;
}
.db-menu__tab.is-active,
.db-menu__tab:hover { color: var(--ink); }
.db-menu__tabsep { width: 1px; height: 22px; background: var(--line2); }

.db-menu__group { display: flex; flex-direction: column; width: 100%; max-width: 900px; }

/* Nothing is hidden until menu-tabs.js opts the section in, so a no-JS
   visitor sees every group in full rather than an empty menu. */
.db-menu.is-filtering .db-menu__group { display: none; }
.db-menu.is-filtering .db-menu__group.is-active { display: flex; }

.db-menu__row { display: flex; align-items: baseline; gap: 20px; padding-bottom: 20px; }
.db-menu__row + .db-menu__row { padding-top: 20px; }
.db-menu__row:not(:last-child) { border-bottom: 1px solid var(--line2); }

.db-menu__info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.db-menu__name { font-size: 1.125rem; line-height: 1.556; }
.db-menu__desc { font-size: 16px; line-height: 1.75; color: var(--muted); }
.db-menu__price {
	flex: 0 0 auto;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 1.125rem;
	line-height: 1.556;
	text-align: right;
	color: var(--ink);
}

@media (min-width: 861px) {
	.db-menu__head { gap: 16px; padding-block: 60px; }
	.db-menu__title { font-size: 5rem; }
	.db-menu__body { gap: 60px; padding-block: 60px 120px; }
	.db-menu__tab { font-size: 20px; line-height: 1.4; }
	.db-menu__row { gap: 8px; padding-bottom: 24px; }
	.db-menu__row + .db-menu__row { padding-top: 24px; }
	.db-menu__name,
	.db-menu__price { font-size: 1.5rem; line-height: 1.333; }
}

/* --- grouped products  (.db-menu__row--sub) --------------------------------
   Feinkost lists several products under one category, each with its own price.
   That is the old site's food-list: a food-title, the descriptions, one price per
   description (RELAUNCH-NOTES §9.91). The category's first row carries the name,
   and each further product is a --sub row with only a description. Inside a group
   the rule is dropped and the rows close up. In a group that has --sub rows, every
   row's price sits on the product line (last baseline), not beside the category
   name. Menus without --sub rows (the Mittagstisch) are untouched. */
.db-menu .db-menu__row:has(+ .db-menu__row--sub) { border-bottom: 0; padding-bottom: 6px; }
.db-menu .db-menu__row.db-menu__row--sub { padding-top: 6px; }
.db-menu .db-menu__group:has(.db-menu__row--sub) .db-menu__row { align-items: last baseline; }

/* Text under the title. Figma's head holds only the date, but the imported menus
   carry an intro ("Liebe Gäste, …", the Feinkost intro). With the head full-bleed
   as designed, so that its rule spans the section, a bare paragraph would run edge
   to edge. It therefore takes the rows' 900px column, centred like the title
   (RELAUNCH-NOTES §9.92). */
.db-menu .db-menu__head.alignfull > p:not(.db-menu__date) {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

/* --- a menu with many categories  (Standardkarte, RELAUNCH-NOTES §9.98) -----
   The tab strip was built for Warm | Kalt: two tabs, 76px apart with a divider
   between them. A price list with nine categories would overflow it, so with
   three or more tabs the strip wraps onto several lines instead, and the
   dividers go, because after a wrap they would dangle at a line end. Two-tab
   menus (Mittagstisch) are untouched. */
.db-menu__tabs:has(> .db-menu__tab:nth-of-type(3)) {
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 40px;
	max-width: 1100px;
}
.db-menu__tabs:has(> .db-menu__tab:nth-of-type(3)) > .db-menu__tabsep { display: none; }

/* Per-category text inside a group, from the old menu: an intro above the rows
   and the price note under them ("Preise pro Stück, zzgl. MwSt. …"). The note
   matters: it is the only place that says whether a price is per piece, per
   portion or per person. A sub-heading splits one category (Hauptgang:
   Vegetarisch & Vegan / Fisch / Fleisch). */
.db-menu .db-menu__intro { margin: 0 0 32px; text-align: center; font-size: 16px; line-height: 1.75; color: var(--muted); }
.db-menu .db-menu__note { margin: 32px 0 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--muted); }
.db-menu .db-menu__cat {
	margin: 0;
	padding: 40px 0 16px;
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 1px solid var(--line2);
}
.db-menu .db-menu__intro + .db-menu__cat { padding-top: 0; }
.db-menu .db-menu__row:has(+ .db-menu__cat) { border-bottom: 0; }
.db-menu .db-menu__cat + .db-menu__row { padding-top: 20px; }
@media (min-width: 861px) {
	.db-menu .db-menu__cat + .db-menu__row { padding-top: 24px; }
}