/*
 * Alpen Grill – site styles. Mobile first.
 * Colour and font tokens come from theme.json (--wp--preset--*); local aliases below keep rules short.
 */

:root {
	/* Alpen Grill palette: petrol blue from the logo, warm stone greys from "TRENTO" and the mountain lines, larch wood as the warm accent; paper/card/rule/ink are tints/shades of it. */
	--petrolio: var(--wp--preset--color--petrolio, #235f79);
	--larice: var(--wp--preset--color--larice, #dda85f);
	--cielo: var(--wp--preset--color--cielo, #5bb3da); /* the logo blue, lightened so it reads on the dark hero */
	--mineral: var(--wp--preset--color--mineral, #8b8680);
	--chiaro: var(--wp--preset--color--chiaro, #b1ada7);
	--medio: var(--wp--preset--color--medio, #6f6a64);
	--profondo: var(--wp--preset--color--profondo, #57534e);
	--ink: var(--wp--preset--color--ink, #11222b);
	--paper: var(--wp--preset--color--paper, #f4f3f0);
	--card: var(--wp--preset--color--card, #fbfaf8);
	--rule: var(--wp--preset--color--rule, #dad7d1);
	--display: var(--wp--preset--font-family--display, "Barlow Condensed", "Arial Narrow", sans-serif);
	--text: var(--wp--preset--font-family--text, "Source Serif 4", Georgia, serif);
	--gutter: clamp(16px, 5vw, 40px);
	--wide: 1160px;
	--header-h: 64px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--text);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--petrolio); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--larice); outline-offset: 2px; }

h1, h2, h3 {
	margin: 0 0 0.4em;
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }

.lead { font-size: 1.1875rem; max-width: 38em; }
.muted { color: var(--profondo); }

.skip-link {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100;
	padding: 8px 14px;
	background: var(--ink);
	color: #fff;
}
.skip-link:focus { top: 8px; }

/* ---------- Buttons ---------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.55em 1.15em;
	font: 600 1.125rem/1 var(--display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--petrolio);
	border: 2px solid var(--petrolio);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.button--book { color: #fff; background: var(--petrolio); border-color: var(--petrolio); }
.button--book:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
/* On the dark hero photo the logo blue is too dark: use its lighter tone with dark text. */
.hero .button--book { color: var(--ink); background: var(--cielo); border-color: var(--cielo); }
.hero .button--book:hover { color: var(--ink); background: #fff; border-color: #fff; }
.button--ghost { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.75); }
.button--ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }
.button--order { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; }
.button--order img { display: block; height: 1.15em; width: auto; }
.button--ghost-dark { color: var(--ink); background: transparent; border-color: var(--ink); }
.button--ghost-dark:hover { color: #fff; }
.button--light { color: var(--ink); background: #fff; border-color: #fff; }
.button--light:hover { color: var(--ink); background: var(--larice); border-color: var(--larice); }

/* ---------- Section label: a small trail-sign plate in petrol blue ---------- */

.sign {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.32em 0.85em 0.28em;
	font: 600 0.9375rem/1.1 var(--display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--petrolio);
	border-radius: 3px;
	outline: 1.5px solid rgba(255, 255, 255, 0.85);
	outline-offset: -4px;
}
.section-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.section-head h2,
.section-head h1 { margin: 0; }
.section-head h1 { font-size: clamp(2.6rem, 8vw, 4.25rem); }

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--wide);
	min-height: var(--header-h);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.site-header__brand { display: block; line-height: 0; }
.site-logo { width: auto; height: 40px; }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font: 600 1.0625rem/1 var(--display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 8px var(--gutter) 24px;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}
.site-nav.is-open { display: block; }
.site-nav ul { margin: 0; padding: 0; list-style: none; }
.site-nav__links a {
	display: block;
	padding: 12px 0;
	font: 600 1.5rem/1 var(--display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}
.site-nav__links a:hover { color: var(--ink); }

.lang-switch { display: flex; gap: 4px; margin: 16px 0 !important; }
.lang-switch a {
	display: inline-block;
	min-width: 44px;
	padding: 10px 8px;
	font: 600 1rem/1 var(--display);
	letter-spacing: 0.08em;
	text-align: center;
	text-decoration: none;
	color: var(--profondo);
	border: 1px solid var(--rule);
	border-radius: 3px;
}
.lang-switch a[aria-current] { color: #fff; background: var(--ink); border-color: var(--ink); }

@media (min-width: 1200px) {
	:root { --header-h: 76px; }
	.site-logo { height: 48px; }
	.nav-toggle { display: none; }
	.site-nav {
		display: flex !important;
		position: static;
		align-items: center;
		gap: 22px;
		padding: 0;
		background: none;
		border: 0;
	}
	.site-nav__links { display: flex; gap: 20px; }
	.site-nav__links a { padding: 6px 0; font-size: 1.125rem; border: 0; white-space: nowrap; }
	.lang-switch { margin: 0 !important; }
	.lang-switch a { min-width: 36px; padding: 7px 6px; font-size: 0.9375rem; }
	.site-nav { gap: 20px; }
}

/* ---------- Header call-to-action buttons: Deliveroo + Prenota ----------
   Mobile menu: stacked, both fully open. Desktop (1200px+): they take turns. One is open (logo + word), the other
   shrinks to its logo; site.js flips data-active every few seconds and freezes it while the pointer or focus is on
   the group (and opens the button under the pointer or keyboard focus), so nobody has to chase a moving button.
   Without JS, or with reduced motion, nothing alternates: Prenota stays open. */
.cta { display: flex; flex-direction: column; gap: 10px; }
.cta__btn { position: relative; justify-content: flex-start; width: 100%; padding: 0 12px; overflow: hidden; } /* the auto margin of .cta__inner centres it when there is room, and pins it to the left edge when the button is narrower than its content */
.cta__inner { display: flex; align-items: center; gap: 9px; flex: none; margin-inline: auto; }
.cta__plate,
.cta__tile { display: block; flex: none; width: 28px; height: 28px; }
.cta__plate { box-sizing: border-box; padding: 3px; background: #fff; border-radius: 6px; } /* white tile: the Plateform blue would vanish on the blue button */
.cta__tile { border-radius: 6px; }
.cta__full { display: block; height: 22px; width: auto; }
.cta__label { white-space: nowrap; }
.button--deliveroo { color: var(--ink); background: #fff; border-color: var(--rule); }
.button--deliveroo:hover { color: var(--ink); background: #fff; border-color: #00ccbc; }
.cta__tile { display: none; }   /* the mobile menu shows the full logo only */

@media (min-width: 1200px) {
	.cta { flex-direction: row; align-items: center; gap: 10px; }
	.cta__btn { flex: none; width: 46px; padding: 0 7px; }
	.cta__tile { display: block; }
	.button--deliveroo .cta__inner { display: grid; }
	.button--deliveroo .cta__tile { grid-area: 1 / 1; justify-self: start; }
	.button--deliveroo .cta__full { grid-area: 1 / 1; justify-self: center; opacity: 0; }
	.cta__label { opacity: 0; }
	/* Open state: the button named by data-active (Prenota when nothing is set). */
	.cta:not([data-active="delivery"]) .button--book,
	.cta[data-active="delivery"] .button--deliveroo { width: 144px; }
	.cta:not([data-active="delivery"]) .button--book .cta__label,
	.cta[data-active="delivery"] .button--deliveroo .cta__full { opacity: 1; }
	.cta[data-active="delivery"] .button--deliveroo .cta__tile { opacity: 0; }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
	/* One slow, symmetrical ease for both widths (so they always add up), and the content follows the box:
	   what is leaving fades out quickly before the box moves much, what is arriving fades in once it has room. */
	/* .cta .cta__btn: must outrank the general ".button" transition rule further down. */
	.cta .cta__btn { transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.18s var(--ease), box-shadow 0.2s; }
	.cta__label,
	.cta__full { transition: opacity 0.2s ease; }
	.cta__tile { transition: opacity 0.45s ease 0.45s; }
	.cta:not([data-active="delivery"]) .button--book .cta__label,
	.cta[data-active="delivery"] .button--deliveroo .cta__full { transition: opacity 0.45s ease 0.4s; }
	.cta[data-active="delivery"] .button--deliveroo .cta__tile { transition: opacity 0.2s ease; }
	/* Attention: the button that just opened gives a little hop and a light sweep, once. */
	.cta__btn::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
		transform: translateX(-130%);
	}
	.cta__btn.is-hot { animation: cta-hop 0.8s ease-out 0.45s; }
	.cta__btn.is-hot::after { animation: cta-sweep 1s ease-out 0.8s; }
}
@keyframes cta-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) scale(1.04); } 65% { transform: none; } }
@keyframes cta-sweep { to { transform: translateX(130%); } }

/* ---------- Hero ---------- */

.hero { position: relative; background: var(--ink); color: #fff; }
.hero__media { margin: 0; }
.hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 55% 70%;
}
.hero__content { max-width: var(--wide); margin: 0 auto; padding: 28px var(--gutter) 40px; }
.hero__eyebrow {
	margin: 0 0 10px;
	font: 600 1rem/1.2 var(--display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--larice);
}
.hero__title {
	margin: 0 0 16px;
	font-size: clamp(3.4rem, 13vw, 7.5rem);
	font-weight: 700;
	line-height: 0.88;
	letter-spacing: 0;
}
.hero__title span { display: block; color: var(--cielo); }
.hero__lead { max-width: 30em; font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

@media (min-width: 960px) {
	.hero { display: grid; min-height: min(88vh, 860px); }
	.hero__media,
	.hero__content { grid-area: 1 / 1; }
	.hero__img { height: 100%; aspect-ratio: auto; object-position: 50% 62%; }
	/* The photo's sky is bright, so the scrim carries the contrast of the white text. */
	.hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(100deg, rgba(17, 34, 43, 0.86) 0%, rgba(17, 34, 43, 0.58) 42%, rgba(17, 34, 43, 0) 74%);
	}
	.hero__content {
		position: relative;
		align-self: start;
		width: 100%;
		padding-top: clamp(48px, 9vh, 110px);
	}
}

/* Hero video: silent loop over the photo (the photo is the poster; the video fades in once it is really playing). */
.hero__media { position: relative; }
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 70%;
	opacity: 0;
	transition: opacity 0.9s ease;
	pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
@media (min-width: 960px) { .hero__video { object-position: 50% 62%; } }
@media print { .hero__video { display: none; } }
/* ---------- Sections ---------- */

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section__inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* Mountain ridge between sections: thin vertical lines whose lengths draw a skyline, as in the logo */
.route-divider {
	height: 48px;
	margin: 0 auto;
	background: url("../img/ridge.svg") center top / auto 48px repeat-x;
	opacity: 0.9;
}
/* ---------- Today's lunch ---------- */

.today__grid { display: grid; gap: 28px; }
.today__date { margin: 0.5rem 0 1rem; font: 500 1.375rem/1.2 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--profondo); }
@media (min-width: 900px) {
	.today__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
	.today__intro { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Printed-card look for menus */
.menu-card {
	padding: clamp(22px, 4vw, 40px);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 2px;
	box-shadow: 0 1px 0 var(--rule), 0 10px 30px -18px rgba(17, 34, 43, 0.35);
}
.menu-card__empty { margin: 0 0 1rem; font-size: 1.125rem; font-style: italic; color: var(--profondo); }
.daily-page__disclaimer { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--larice); background: var(--card); font-size: 0.9375rem; line-height: 1.4; }
.menu-card__more { margin: 1.25rem 0 0; font: 600 1.0625rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.menu-card__more a { text-decoration: none; }

.bg-daily-menu { margin: 0; padding: 0; list-style: none; }
.bg-dish { display: flex; gap: 14px; padding: 0.85rem 0; }
.bg-dish + .bg-dish { border-top: 1px solid var(--rule); }
.bg-dish__image { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.bg-dish__body { flex: 1; min-width: 0; }
.bg-dish__head { display: flex; align-items: baseline; gap: 0.5em; margin: 0; }
.bg-dish__title,
.bg-dish__price,
.bg-dish__desc,
.bg-dish__variants { font-family: var(--display); letter-spacing: 0.035em; text-transform: uppercase; }
.bg-dish__title { font-weight: 600; font-size: 1.3rem; line-height: 1.12; }
.bg-dish__leader { flex: 1; min-width: 1.5em; border-bottom: 2px dotted var(--rule); transform: translateY(-0.3em); }
.bg-dish__price { font-weight: 700; font-size: 1.3rem; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.bg-dish__desc { margin: 0.2em 0 0; font-size: 1.05rem; font-weight: 500; color: var(--profondo); }
.bg-dish__variants { margin: 0.35em 0 0; padding: 0; list-style: none; font-size: 1.05rem; }
.bg-dish__variants li { display: flex; justify-content: space-between; gap: 1em; max-width: 22em; }
.bg-dish__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.45em 0 0; }
.bg-badge {
	padding: 0.2em 0.55em 0.15em;
	font: 600 0.8125rem/1.2 var(--display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--petrolio);
	border: 1.5px solid currentColor;
	border-radius: 2px;
}
.bg-badge--chef { color: var(--ink); background: var(--larice); border-color: var(--larice); }

/* ---------- Menus list ---------- */

.menu-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.menu-list__item { border-bottom: 1px solid var(--rule); }
.menu-list__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 20px;
	align-items: baseline;
	padding: 18px 4px;
	color: var(--ink);
	text-decoration: none;
}
a.menu-list__row { transition: background-color 0.15s; }
a.menu-list__row:hover { color: var(--ink); background: rgba(35, 95, 121, 0.08); }
.menu-list__title { font: 600 clamp(1.5rem, 4vw, 2rem)/1.05 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.menu-list__desc { grid-column: 1; font-style: italic; color: var(--profondo); }
.menu-list__go,
.menu-list__langs { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.menu-list__go { font: 600 1rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--petrolio); white-space: nowrap; }
.menu-list__langs { display: flex; gap: 6px; }
@media (max-width: 759px) {
	/* Three language buttons need their own line on phones. */
	.menu-list__langs { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
}
/* Language buttons: a flag over the code, so people find "their" menu at a glance (the title/aria-label carry the full name). */
.menu-list__langs a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 58px;
	height: 56px;
	font: 600 0.9375rem/1 var(--display);
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 3px;
}
.menu-list__langs .flag { display: block; width: 27px; height: 18px; border-radius: 2px; }
.menu-list__langs a:hover { color: #fff; background: var(--ink); }
@media (min-width: 760px) {
	.menu-list__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 200px; gap: 24px; padding: 22px 8px; }
	.menu-list__go,
	.menu-list__langs { justify-self: end; }
	.menu-list__desc { grid-column: 2; }
	.menu-list__go,
	.menu-list__langs { grid-column: 3; grid-row: 1; }
}

/* ---------- The place ---------- */

.place__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .place__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; } }

/* A22 o- - - a stone's throw - - -● Alpen Grill */
.route-map {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	font: 600 1.0625rem/1.15 var(--display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.route-map__leg { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 10px; }
.route-map__stop { grid-row: 2; }
.route-map__stop--end { text-align: right; color: var(--petrolio); }
.route-map__dot { flex: none; width: 16px; height: 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; }
.route-map__dot--end { background: var(--larice); border-color: var(--petrolio); }
.route-map__line { flex: 1; border-top: 3px dashed var(--petrolio); }
.route-map__time { font-weight: 500; color: var(--profondo); white-space: nowrap; }

.facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.facts li {
	padding: 12px 0;
	font: 500 1.375rem/1.15 var(--display);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--rule);
}

/* ---------- Events ---------- */

.events { color: #fff; background: var(--petrolio); }
.events .sign { background: var(--larice); color: var(--ink); outline-color: rgba(17, 34, 43, 0.55); }
.events .lead { color: rgba(255, 255, 255, 0.88); }
.events__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.events__mail { color: rgba(255, 255, 255, 0.75); }

/* ---------- Hours & contacts ---------- */

.hours__grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .hours__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; } }
.hours__days { margin: 0 0 0.75rem; font: 500 1.375rem/1.2 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--profondo); }
.hours-table { margin: 0; }
.hours__days--next { margin-top: 2rem; }
.hours-table > div { display: flex; align-items: baseline; gap: 0.6em; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.hours-table > div:first-child { border-top: 2px solid var(--ink); }
.hours-table dt { font: 600 1.5rem/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.hours-table dd { margin: 0 0 0 auto; font: 600 1.5rem/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours__contacts address { margin: 0 0 1rem; font-style: normal; font-size: 1.125rem; }
.hours__lines { font-size: 1.125rem; }
.hours__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Menu hub (/choice/) & daily page ---------- */

.hub__inner,
.daily-page__inner { max-width: 820px; }
.hub__book { margin-top: 2rem; }
.hub__book .button { width: 100%; }
.daily-page__head { text-align: left; }
.daily-page__actions { margin-top: 1.5rem; }
.button--block { display: flex; width: 100%; }

/* ---------- Generic content ---------- */

.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.prose h2 { font-size: 1.9rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.4rem; margin-top: 1.4em; }

/* ---------- Footer ---------- */

.site-footer { color: rgba(255, 255, 255, 0.82); background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--larice); }
.site-footer__inner {
	display: grid;
	gap: 28px;
	max-width: var(--wide);
	margin: 0 auto;
	padding: 56px var(--gutter) 32px;
}
@media (min-width: 760px) { .site-footer__inner { grid-template-columns: 2fr 1.4fr 1fr; } }
.site-logo--light { height: 52px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer address { font-style: normal; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { padding: 4px 0; }
.site-footer__social a { font: 600 1.125rem/1.4 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: var(--wide);
	margin: 0 auto;
	padding: 18px var(--gutter) 28px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }

/* ---------- Motion ----------
 * Subtle and purposeful: things settle into place, nothing bounces. Only opacity/transform are animated, and every
 * rule is inside prefers-reduced-motion: no-preference, so visitors who ask for less motion get the plain page.
 * Scroll reveals are added by site.js (the .reveal class), so without JavaScript everything is simply visible. */

@media screen and (prefers-reduced-motion: no-preference) {
	:root { --ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

	@keyframes bg-rise { from { opacity: 0; transform: translateY(16px); } }
	@keyframes bg-settle { from { transform: scale(1.07); } }
	@keyframes bg-drop { from { opacity: 0; transform: translateY(-8px); } }

	/* Soft cross-fade between pages (browsers that support cross-document view transitions; the header stays put). */
	@view-transition { navigation: auto; }
	.site-header { view-transition-name: site-header; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: 0.22s; }

	/* Hero: the photo settles, then the text rises in order. */
	.hero__media { overflow: hidden; }
	.hero__img { animation: bg-settle 1.8s var(--ease) both; }
	.hero__content > * { animation: bg-rise 0.8s var(--ease) backwards; }
	.hero__content > *:nth-child(1) { animation-delay: 150ms; }
	.hero__content > *:nth-child(2) { animation-delay: 240ms; }
	.hero__content > *:nth-child(3) { animation-delay: 330ms; }
	.hero__content > *:nth-child(4) { animation-delay: 420ms; }
	.hero__content > *:nth-child(5) { animation-delay: 510ms; }

	/* /choice/ and /dailysingle/ are opened from QR codes: the content eases in on load. */
	.hub .section-head,
	.daily-page__head { animation: bg-rise 0.7s var(--ease) backwards; }
	.hub .menu-list__item,
	.daily-page .bg-dish { animation: bg-rise 0.6s var(--ease) backwards; animation-delay: 160ms; }
	.hub .menu-list__item:nth-child(1) { animation-delay: 160ms; }
	.hub .menu-list__item:nth-child(2) { animation-delay: 230ms; }
	.hub .menu-list__item:nth-child(3) { animation-delay: 300ms; }
	.hub .menu-list__item:nth-child(4) { animation-delay: 370ms; }
	.hub .menu-list__item:nth-child(5) { animation-delay: 440ms; }
	.hub .menu-list__item:nth-child(6) { animation-delay: 510ms; }
	.hub .menu-list__item:nth-child(7) { animation-delay: 580ms; }
	.hub .menu-list__item:nth-child(8) { animation-delay: 650ms; }
	.daily-page .bg-dish:nth-child(1) { animation-delay: 220ms; }
	.daily-page .bg-dish:nth-child(2) { animation-delay: 275ms; }
	.daily-page .bg-dish:nth-child(3) { animation-delay: 330ms; }
	.daily-page .bg-dish:nth-child(4) { animation-delay: 385ms; }
	.daily-page .bg-dish:nth-child(5) { animation-delay: 440ms; }
	.daily-page .bg-dish:nth-child(6) { animation-delay: 495ms; }
	.daily-page .bg-dish:nth-child(7) { animation-delay: 550ms; }
	.daily-page .bg-dish:nth-child(8) { animation-delay: 605ms; }
	.daily-page .bg-dish:nth-child(9) { animation-delay: 660ms; }
	.daily-page .bg-dish:nth-child(10) { animation-delay: 715ms; }
	.daily-page .bg-dish:nth-child(11) { animation-delay: 770ms; }
	.daily-page .bg-dish:nth-child(12) { animation-delay: 825ms; }
	.hub__book { animation: bg-rise 0.6s var(--ease) 600ms backwards; }

	/* Scroll reveal */
	.reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s var(--ease) var(--d, 0ms), transform 0.6s var(--ease) var(--d, 0ms);
	}
	.reveal.is-in { opacity: 1; transform: none; }

	/* The route on "Il posto" is drawn: first stop, dashed line, time, dashed line, Alpen Grill. */
	.route-map.reveal { opacity: 1; transform: none; }
	.route-map.reveal .route-map__dot { transform: scale(0); transition: transform 0.4s var(--ease); }
	.route-map.reveal .route-map__line { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s var(--ease); }
	.route-map.reveal .route-map__time { opacity: 0; transition: opacity 0.5s ease 0.7s; }
	.route-map.reveal .route-map__stop { opacity: 0; transition: opacity 0.5s ease 0.3s; }
	.route-map.reveal .route-map__line:nth-child(2) { transition-delay: 0.2s; }
	.route-map.reveal .route-map__line:nth-child(4) { transition-delay: 1.1s; }
	.route-map.reveal .route-map__dot--end { transition-delay: 1.8s; }
	.route-map.reveal.is-in .route-map__dot { transform: none; }
	.route-map.reveal.is-in .route-map__line { clip-path: inset(0); }
	.route-map.reveal.is-in .route-map__time,
	.route-map.reveal.is-in .route-map__stop { opacity: 1; }
	.route-map.reveal.is-in .route-map__stop--end { transition-delay: 1.8s; }

	/* Header gets a hairline shadow once the page has scrolled. */
	.site-header { transition: box-shadow 0.25s ease; }
	.site-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(17, 34, 43, 0.5); }

	/* Buttons and links */
	.button { transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.18s var(--ease), box-shadow 0.2s; }
	.button:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(17, 34, 43, 0.6); }
	.button:active { transform: translateY(0); box-shadow: none; transition-duration: 0.05s; }
	.menu-list__langs a { transition: background-color 0.15s, color 0.15s, transform 0.18s var(--ease); }
	.menu-list__langs a:hover { transform: translateY(-2px); }
	.menu-list__go span { display: inline-block; transition: transform 0.2s var(--ease); }
	a.menu-list__row:hover .menu-list__go span { transform: translateX(5px); }
	.lang-switch a { transition: background-color 0.15s, color 0.15s; }
	.site-footer a { transition: color 0.15s; }

	/* Mobile menu slides down; the hamburger already morphs into a cross. */
	@media (max-width: 959px) {
		.site-nav.is-open { animation: bg-drop 0.22s var(--ease); }
	}

	/* Desktop menu: a larch-coloured underline grows under the link. */
	@media (min-width: 960px) {
		.site-nav__links a {
			background: linear-gradient(var(--larice), var(--larice)) 0 100% / 0 3px no-repeat;
			transition: background-size 0.25s var(--ease);
		}
		.site-nav__links a:hover,
		.site-nav__links a:focus-visible { background-size: 100% 3px; }
	}

}

@media print {
	.reveal, .reveal * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Loading screen (first visit of a session; see site.js) ---------- */

.loader { display: none; }
.bg-loading .loader {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the WordPress admin bar */
	display: grid;
	place-items: center;
	background: var(--paper);
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.loader__logo { width: min(240px, 54vw); height: auto; }
.loader__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: var(--larice);
	transform: scaleX(0);
	transform-origin: left;
}
.bg-leaving .loader { opacity: 0; visibility: hidden; }
.bg-leaving .loader__bar { transform: scaleX(1); transition: transform 0.2s ease-out; }

@media screen and (prefers-reduced-motion: no-preference) {
	@keyframes bg-load-bar { to { transform: scaleX(0.9); } }
	@keyframes bg-load-logo { from { opacity: 0; transform: translateY(6px); } }
	.bg-loading .loader__bar { animation: bg-load-bar 2.6s cubic-bezier(0.1, 0.6, 0.3, 1) forwards; }
	.bg-leaving .loader__bar { animation: none; }
	.bg-loading .loader__logo { animation: bg-load-logo 0.5s ease-out backwards; }
	/* The hero entrance waits until the screen has lifted. */
	.bg-loading:not(.bg-leaving) .hero__img,
	.bg-loading:not(.bg-leaving) .hero__content > * { animation-play-state: paused; }
}

@media print { .loader { display: none !important; } }

/* ---------- Print (/dailysingle/ and any page) ---------- */

@media print {
	body { background: #fff; font-size: 10.5pt; }
	.site-header, .site-footer, .skip-link, .no-print, #wpadminbar, .menu-card__more { display: none !important; }
	.section { padding: 0; }
	.menu-card { padding: 0; border: 0; box-shadow: none; }
	.sign { color: #000; background: none; outline: 0; padding: 0; }
	h1 { font-size: 26pt; }
}

/* Printed daily menu (/dailysingle/): same capitals as on screen, sized for one A5 page */
@media print {
	.bg-dish__title,
	.bg-dish__price { font-size: 12pt; }
	.bg-dish__desc,
	.bg-dish__variants { font-size: 9.5pt; }
}