/* ============================================================
   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; }
}