/*
Theme Name: La Conchiglia d'Oro
Theme URI: https://www.laconchigliadorocorbetta.it
Author: Webyblue
Author URI: https://www.webyblue.it
Description: Tema a blocchi del ristorante e pizzeria La Conchiglia d'Oro di Corbetta. Funziona insieme al plugin "La Conchiglia d'Oro".
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: conchiglia-doro
*/

:root {
	--blu: #22456f;
	--blu-nastro: #24538a;
	--blu-fondo: #1b3859;
	--oro: #b49143;
	--oro-luce: #e2c06b;
	--oro-bruno: #836220;
	--oro-titolo: #9a7a30;
	--crema: #f4f3ea;
	--crema-2: #ebe8d9;
	--inchiostro: #1d3350;
	--testo-2: #4a5d78;
	--crema-su-blu: #d9dcd8;

	--serif: var(--wp--preset--font-family--serif);
	--sans: var(--wp--preset--font-family--sans);

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--gutter: clamp(1rem, 4vw, 3.5rem);
	--max: 78rem;
	--sp-section: clamp(4.5rem, 10vw, 9rem);
	--radius: 0.375rem;
	--header-h: 4.25rem;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
	scrollbar-color: var(--oro) var(--crema-2);
}

body {
	caret-color: var(--oro-bruno);
	-webkit-font-smoothing: antialiased;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
}

::selection { background: var(--oro-luce); color: var(--blu); }

img { max-width: 100%; height: auto; }
a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:focus-visible {
	outline: 2px solid var(--oro);
	outline-offset: 3px;
	border-radius: 2px;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }

.section-title { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); }
.small-title { font-size: 1.6rem; }

.page-title {
	font-size: clamp(2.8rem, 1.5rem + 5.2vw, 5.25rem);
	letter-spacing: -0.02em;
	line-height: 0.98;
}

.lede {
	max-width: 34rem;
	font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
	color: var(--testo-2);
}

/* Le sezioni gestiscono da sole gli spazi: niente margini automatici tra blocchi */
.wp-block-post-content > *,
.wp-site-blocks > * { margin-block: 0; }
section[class*="cdo-"] > *,
.hero-text > *:first-child { margin-block-start: 0; }

/* ---------- Pulsanti ---------- */

.cdo-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 3.1rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font: 600 1rem/1 var(--sans);
	letter-spacing: 0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease, border-color 200ms ease;
	-webkit-tap-highlight-color: transparent;
}
.cdo-btn:active,
.wp-block-button__link:active { transform: scale(0.97); }
.cdo-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

.cdo-btn--solid,
.wp-block-button:not(.is-style-outline):not(.is-style-oro) .wp-block-button__link {
	background: var(--blu);
	color: var(--crema);
	box-shadow: 0 1px 1px rgb(20 40 70 / 0.12), 0 6px 16px -6px rgb(20 40 70 / 0.45);
}
.cdo-btn--line,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--blu);
	border-color: color-mix(in srgb, var(--blu) 45%, transparent);
	padding: 0.8rem 1.4rem;
}
.cdo-btn--gold,
.wp-block-button.is-style-oro .wp-block-button__link {
	background: var(--oro-luce);
	color: var(--blu-fondo);
	box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.5);
}
@media (hover: hover) and (pointer: fine) {
	.cdo-btn--solid:hover,
	.wp-block-button:not(.is-style-outline):not(.is-style-oro) .wp-block-button__link:hover { background: var(--blu-nastro); color: var(--crema); }
	.cdo-btn--line:hover,
	.wp-block-button.is-style-outline .wp-block-button__link:hover { background: color-mix(in srgb, var(--blu) 7%, transparent); color: var(--blu); }
	.cdo-btn--gold:hover,
	.wp-block-button.is-style-oro .wp-block-button__link:hover { background: #ead08a; color: var(--blu-fondo); }
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.actions > * { margin: 0 !important; }
.actions .wp-block-buttons { display: contents; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--blu);
	text-decoration: none;
	background: linear-gradient(var(--oro), var(--oro)) 0 100% / 100% 1px no-repeat;
	padding-bottom: 3px;
}
.link-arrow::after,
.link-arrow .cdo-icon {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	transition: transform 240ms var(--ease-out);
}
a.link-arrow::after {
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cdo-indirizzo a.link-arrow::after { display: none; }
@media (hover: hover) { .link-arrow:hover::after, .link-arrow:hover .cdo-icon { transform: translateX(0.25rem); } }

/* ---------- Testata ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}
.site-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--header-h);
	padding: 0.6rem var(--gutter);
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid transparent;
	transition: border-color 300ms ease;
}
/* la sfocatura sta su un livello a parte: sulla testata impedirebbe al menù mobile di occupare tutto lo schermo */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--crema) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.site-header > * { margin: 0 !important; }
.site-header.is-scrolled { border-bottom-color: color-mix(in srgb, var(--oro) 35%, transparent); }

.cdo-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto !important; }
.cdo-brand img { width: 2.6rem; height: auto; display: block; }
.brand-name {
	display: flex;
	flex-direction: column;
	font-family: var(--serif);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.05;
	color: var(--blu);
}
.brand-name small {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oro-bruno);
}

.site-header .wp-block-navigation { gap: 1.75rem; font-size: 0.97rem; }
.site-header .wp-block-navigation-item__content {
	font-weight: 500;
	text-decoration: none;
	color: var(--inchiostro);
	background: linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) { .site-header .wp-block-navigation-item__content:hover { background-size: 100% 1px; } }
.site-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--blu); background-size: 100% 1px; }

.site-header .wp-block-buttons .wp-block-button__link { min-height: 2.6rem; padding: 0.6rem 1.15rem; font-size: 0.95rem; }

/* Menù su telefono e tablet: pulsante tondo e pannello crema */
.wp-block-navigation__responsive-container-open {
	width: 2.75rem;
	height: 2.75rem;
	justify-content: center;
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--blu) 30%, transparent);
	border-radius: 50%;
	color: var(--blu);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--crema) !important;
	color: var(--blu) !important;
	padding: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem) var(--gutter) 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.8rem 0 !important;
	font-family: var(--serif);
	font-size: 1.75rem;
	background: none;
	border-bottom: 1px solid color-mix(in srgb, var(--blu) 12%, transparent);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: var(--oro-bruno); }
.wp-block-navigation__responsive-container-close { color: var(--blu); }

@media (min-width: 600px) and (max-width: 60rem) {
	/* tra telefono e desktop le voci non ci stanno: si usa il pulsante anche qui */
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
@media (max-width: 60rem) {
	.site-header { gap: 0.75rem; }
	.site-header .wp-block-navigation { order: 3; }
}
@media (max-width: 26rem) {
	.site-header { gap: 0.5rem; }
	.cdo-brand { gap: 0.5rem; }
	.cdo-brand img { width: 2.2rem; }
	.brand-name { font-size: 1rem; white-space: nowrap; }
	.site-header .wp-block-buttons { display: none; }
}

/* ---------- Apertura (home) e testate delle pagine ---------- */

.cdo-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	max-width: var(--max);
	margin-inline: auto !important;
	padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) var(--sp-section);
	box-sizing: content-box;
}
.cdo-hero .hero-text > .lede { margin-top: 1.25rem; }
.cdo-hero .hero-text > .actions { margin-top: 2rem; }
.hero-page .lede { max-width: 32rem; }

.cdo-apertura {
	display: flex;
	flex-direction: column;
	font-size: clamp(3.3rem, 1.4rem + 7.4vw, 6rem);
	line-height: 0.96;
	letter-spacing: -0.02em;
}
.cdo-apertura em { font-style: normal; color: var(--oro-titolo); }
.h1-sub {
	margin-top: 1.4rem;
	font-family: var(--sans);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--oro-bruno);
}

.cdo-countdown { margin-top: 2.2rem !important; }
.cd-grid {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	border-top: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
}
.cd-grid[hidden] { display: none; }
.cd-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0.85rem clamp(1rem, 2.4vw, 1.9rem) 0.8rem 0;
	margin-right: clamp(1rem, 2.4vw, 1.9rem);
	border-right: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
}
.cd-cell:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.cd-num {
	font-family: var(--serif);
	font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1;
	color: var(--blu);
}
.cd-num.tick { animation: tick 420ms var(--ease-out); }
@keyframes tick { from { opacity: 0.25; transform: translateY(-0.18em); filter: blur(2px); } }
.cd-label {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--oro-bruno);
}
.cd-open { margin: 0; font-family: var(--serif); font-size: 2rem; color: var(--blu); }

/* Arco: la firma del sito */
.wp-block-image.is-style-arco,
.arch {
	position: relative;
	overflow: hidden;
	border-radius: 999px 999px var(--radius) var(--radius);
	background: var(--crema-2);
	isolation: isolate;
}
.wp-block-image.is-style-arco img,
.arch img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.wp-block-image.is-style-arco::after,
.arch::after {
	content: "";
	position: absolute;
	inset: 0.7rem;
	border: 1px solid rgb(226 192 107 / 0.75);
	border-radius: 999px 999px 2px 2px;
	pointer-events: none;
	z-index: 2;
}

.hero-arch {
	aspect-ratio: 4 / 5.4;
	max-height: calc(100svh - 7rem);
	width: 100%;
	justify-self: end;
	box-shadow: 0 30px 60px -30px rgb(20 40 70 / 0.5);
	margin: 0 !important;
}
.hero-page .hero-arch { aspect-ratio: 4 / 4.6; }

@media (max-width: 52rem) {
	.cdo-hero { grid-template-columns: 1fr; padding-top: 1.25rem; gap: 2.5rem; box-sizing: border-box; }
	.hero-arch { aspect-ratio: 4 / 4.4; max-height: none; justify-self: stretch; }
	.cd-grid { justify-content: stretch; grid-template-columns: repeat(4, 1fr); }
	.cd-cell { padding-right: 0.5rem; margin-right: 0.75rem; }
	.actions > * { flex: 1 1 15rem; }
	.actions .wp-block-button { flex: 1 1 15rem; display: flex; }
	.actions .wp-block-button__link { width: 100%; }
}

/* Entrata: un solo momento orchestrato */
@media (prefers-reduced-motion: no-preference) {
	.cdo-hero .hero-text > * { animation: rise 900ms var(--ease-out) both; }
	.cdo-hero .hero-text > :nth-child(2) { animation-delay: 420ms; }
	.cdo-hero .hero-text > :nth-child(3) { animation-delay: 500ms; }
	.cdo-hero .hero-text > :nth-child(4) { animation-delay: 580ms; }
	.cdo-hero .hero-text > :nth-child(5) { animation-delay: 660ms; }
	.cdo-apertura { animation: none !important; }
	.cdo-apertura [style*="--i"] { animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 120ms); }
	.cdo-hero .hero-arch { animation: unveil 1300ms var(--ease-in-out) 60ms both; }
	.cdo-hero .hero-arch img { animation: settle 1800ms var(--ease-out) 60ms both; }
	.cdo-intro > *, .prenota-intro > * { animation: rise 900ms var(--ease-out) both; }
	.cdo-intro > :nth-child(2), .prenota-intro > :nth-child(2) { animation-delay: 80ms; }
	.prenota-intro > :nth-child(n+3) { animation-delay: 160ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes unveil {
	from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); }
	to { clip-path: inset(0 0 0 0 round 0); }
}
@keyframes settle { from { transform: scale(1.12); } }

/* Introduzione delle pagine senza foto */
.cdo-intro {
	max-width: var(--max);
	margin-inline: auto !important;
	padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
	box-sizing: content-box;
}
.cdo-intro > .lede { margin-top: 1.25rem; max-width: 40rem; }
.cdo-intro.is-legal { max-width: 46rem; padding-bottom: var(--sp-section); }

/* ---------- Tre anime (home) ---------- */

.cdo-anime {
	max-width: var(--max);
	margin-inline: auto !important;
	padding: 0 var(--gutter) var(--sp-section);
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	box-sizing: content-box;
}
.anime-list { border-top: 1px solid color-mix(in srgb, var(--blu) 18%, transparent); }
.anime-list > .anima {
	position: relative;
	display: grid;
	grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr) 1.5rem;
	gap: 1.5rem;
	align-items: baseline;
	margin: 0;
	padding: 1.6rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--blu) 18%, transparent);
	transition: padding 300ms var(--ease-out);
}
.anima > * { margin: 0 !important; }
.anima h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; }
.anima h3 a { text-decoration: none; color: inherit; }
.anima h3 a::before { content: ""; position: absolute; inset: 0; } /* tutta la riga è cliccabile */
.anima p { color: var(--testo-2); }
.anima::after {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	align-self: center;
	background: var(--blu);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 260ms var(--ease-out), background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.anime-list > .anima:hover { padding-left: 0.9rem; }
	.anime-list > .anima:hover::after { transform: translateX(0.3rem); background: var(--oro); }
	.anime-list > .anima:hover h3 { color: var(--blu-nastro); }
}
@media (max-width: 52rem) {
	.cdo-anime { grid-template-columns: 1fr; box-sizing: border-box; }
	.anime-list > .anima { grid-template-columns: 1fr 1.5rem; gap: 0.35rem 1rem; padding: 1.25rem 0; }
	.anima p { grid-column: 1; }
	.anima::after { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---------- Menù ---------- */

.cdo-menu-band {
	background: var(--blu);
	color: var(--crema);
	padding: var(--sp-section) var(--gutter);
}
.cdo-menu {
	max-width: var(--max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.cdo-menu .menu-arch {
	aspect-ratio: 4 / 5.2;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + 2rem);
	background: var(--blu-fondo);
	margin: 0;
}
.cdo-menu .menu-photo {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 600ms var(--ease-out), transform 1200ms var(--ease-out);
}
.cdo-menu .menu-photo.is-on { opacity: 1; transform: none; }

.cdo-menu .tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.75rem; }
.cdo-menu .tabs button {
	appearance: none;
	border: 1px solid rgb(226 192 107 / 0.45);
	background: transparent;
	color: var(--crema);
	font: 600 1rem/1 var(--sans);
	padding: 0.75rem 1.2rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.cdo-menu .tabs button:active { transform: scale(0.97); }
.cdo-menu .tabs button[aria-selected="true"] { background: var(--oro-luce); border-color: var(--oro-luce); color: var(--blu-fondo); }
@media (hover: hover) and (pointer: fine) {
	.cdo-menu .tabs button[aria-selected="false"]:hover { background: rgb(226 192 107 / 0.12); }
}
.cdo-menu .tabs button:focus-visible { outline-color: var(--oro-luce); }

.cdo-menu .dishes { list-style: none; margin: 0; padding: 0; view-transition-name: piatti; }
.cdo-menu .dishes li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
	padding: 0.95rem 0;
	border-bottom: 1px solid rgb(244 243 234 / 0.1);
}
.cdo-menu .dish {
	font-family: var(--serif);
	font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
	line-height: 1.3;
	max-width: 70%;
}
.cdo-menu .dish small {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--sans);
	font-size: 0.9rem;
	color: var(--crema-su-blu);
	line-height: 1.4;
}
.cdo-menu .dots {
	flex: 1;
	min-width: 1.5rem;
	border-bottom: 1px dotted rgb(226 192 107 / 0.6);
	transform: translateY(-0.3em);
}
.cdo-menu .price {
	font-family: var(--serif);
	font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--oro-luce);
	white-space: nowrap;
}
.cdo-menu .price small { font-family: var(--sans); font-size: 0.8rem; margin-left: 0.1rem; }
.cdo-menu .allergeni { margin: 1.75rem 0 0; font-size: 0.88rem; color: var(--crema-su-blu); max-width: 40rem; }

::view-transition-old(piatti) { animation: 180ms var(--ease-out) both fade-out; }
::view-transition-new(piatti) { animation: 380ms var(--ease-out) both fade-in; }
@keyframes fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

@media (max-width: 52rem) {
	.cdo-menu { grid-template-columns: 1fr; }
	.cdo-menu .menu-arch { position: relative; top: 0; aspect-ratio: 16 / 11; }
	.cdo-menu .dish { max-width: 78%; }
	.cdo-menu .tabs {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h));
		z-index: 3;
		margin-inline: calc(var(--gutter) * -1);
		padding: 0.75rem var(--gutter);
		background: var(--blu);
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
}

/* ---------- Invito alla prima sera ---------- */

.cdo-invito {
	background: var(--blu-fondo);
	padding: var(--sp-section) var(--gutter);
	display: grid;
	place-items: center;
	border-top: 1px solid rgb(226 192 107 / 0.25);
}
.invito-card {
	max-width: 34rem;
	text-align: center;
	color: var(--crema);
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
	border: 1px solid rgb(226 192 107 / 0.6);
	outline: 1px solid rgb(226 192 107 / 0.25);
	outline-offset: 6px;
	border-radius: 999px 999px var(--radius) var(--radius);
}
.invito-shell { width: 4.5rem; margin: 0 auto 1.5rem; display: block; }
.cdo-invito h2 { color: var(--crema); font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.invito-date {
	margin: 1.25rem 0 0;
	font-family: var(--serif);
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	color: var(--oro-luce);
}
.invito-date span { display: block; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crema-su-blu); margin-top: 0.4rem; }
.invito-text { margin: 1.25rem auto 2rem; color: var(--crema-su-blu); max-width: 26rem; }

/* ---------- Foto + testo alternati (home) ---------- */

.cdo-split {
	max-width: var(--max);
	margin-inline: auto !important;
	padding: var(--sp-section) var(--gutter) 0;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	box-sizing: content-box;
}
.cdo-split .split-photo { margin: 0; aspect-ratio: 4 / 3; }
.cdo-split .split-photo:not(.is-style-arco) { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -34px rgb(20 40 70 / 0.55); }
.cdo-split .split-photo img { width: 100%; height: 100%; object-fit: cover; }
.split-text > p { color: var(--testo-2); max-width: 32rem; }
.split-flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.7fr); justify-content: center; }
.split-flip .split-photo { order: 2; aspect-ratio: 4 / 4.4; max-width: 26rem; justify-self: start; }
@media (max-width: 52rem) {
	.cdo-split, .split-flip { grid-template-columns: 1fr; box-sizing: border-box; }
	.split-flip .split-photo { order: 0; max-width: none; aspect-ratio: 16 / 12; }
}

/* ---------- Dove, quando, prenota (home) ---------- */

.cdo-info {
	max-width: var(--max);
	margin: var(--sp-section) auto 0 !important;
	padding: 0 var(--gutter) var(--sp-section);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(2rem, 4vw, 4rem);
	box-sizing: content-box;
}
.info-item { border-top: 1px solid var(--oro); padding-top: 1.5rem; }
.info-item > * { margin-block: 0.9rem 0; }
.info-item h2 { font-size: 1.9rem; }
.info-item p, .info-item address { color: var(--testo-2); }
.info-item .cdo-indirizzo address { font-family: var(--sans); font-size: 1rem; color: var(--testo-2); }
@media (max-width: 52rem) { .cdo-info { grid-template-columns: 1fr; box-sizing: border-box; } }

/* ---------- Fascia blu con invito all'azione ---------- */

.cdo-cta {
	background: var(--blu);
	color: var(--crema);
	padding: clamp(4rem, 8vw, 6.5rem) var(--gutter);
	text-align: center;
}
.cdo-cta > * { max-width: 40rem; margin-inline: auto !important; }
.cdo-cta .section-title { color: var(--crema); }
.cdo-cta > p { color: var(--crema-su-blu); margin-top: 1.25rem !important; max-width: 32rem; }
.cdo-cta .actions { justify-content: center; margin-top: 2rem !important; }
.cdo-cta .cdo-btn--line,
.cdo-cta .is-style-outline .wp-block-button__link { color: var(--crema); border-color: rgb(226 192 107 / 0.6); }
@media (hover: hover) and (pointer: fine) {
	.cdo-cta .cdo-btn--line:hover,
	.cdo-cta .is-style-outline .wp-block-button__link:hover { background: rgb(226 192 107 / 0.12); color: var(--crema); }
}
.cdo-menu-band + .cdo-cta { border-top: 1px solid rgb(226 192 107 / 0.3); }

/* ---------- Eventi e passaggi ---------- */

.cdo-occasioni, .cdo-steps {
	max-width: var(--max);
	margin-inline: auto !important;
	padding: 0 var(--gutter) var(--sp-section);
	box-sizing: content-box;
}
.occasioni-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(2rem, 4vw, 3rem) !important;
	border-top: 1px solid color-mix(in srgb, var(--blu) 18%, transparent);
}
.occasioni-grid > .occasione { margin: 0; padding: 1.75rem 2rem 1.75rem 0; border-bottom: 1px solid color-mix(in srgb, var(--blu) 18%, transparent); }
.occasioni-grid > .occasione:nth-child(even) { padding-left: 2rem; border-left: 1px solid color-mix(in srgb, var(--blu) 18%, transparent); }
.occasione h3, .step h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.occasione > p, .step > p { margin-top: 0.6rem; color: var(--testo-2); max-width: 30rem; }
@media (max-width: 52rem) {
	.cdo-occasioni, .cdo-steps { box-sizing: border-box; }
	.occasioni-grid { grid-template-columns: 1fr; }
	.occasioni-grid > .occasione, .occasioni-grid > .occasione:nth-child(even) { padding: 1.4rem 0; border-left: 0; }
}

.steps {
	counter-reset: passo;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem clamp(1.5rem, 3vw, 3rem);
}
.steps > .step { counter-increment: passo; margin: 0; border-top: 1px solid var(--oro); padding-top: 1.25rem; }
.steps > .step::before {
	content: counter(passo);
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--serif);
	font-size: 3.25rem;
	line-height: 1;
	color: var(--oro-titolo);
}
.step a { color: var(--blu); font-weight: 600; }
@media (max-width: 52rem) { .steps { grid-template-columns: 1fr; } }

.cdo-note {
	max-width: var(--max);
	margin: 0 auto var(--sp-section) !important;
	padding: 0 var(--gutter);
	box-sizing: content-box;
}
.cdo-note p { margin: 0; padding: 1.25rem 1.5rem; background: var(--crema-2); border-radius: var(--radius); color: var(--testo-2); }
.cdo-note strong { color: var(--blu); }

/* ---------- Chi siamo ---------- */

.cdo-prose {
	max-width: var(--max);
	margin-inline: auto !important;
	padding: 0 var(--gutter) var(--sp-section);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
	box-sizing: content-box;
}
.prose { max-width: 40rem; }
.prose .section-title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.prose > p { color: var(--testo-2); font-size: 1.08rem; }
.prose > p + .section-title { margin-top: 3.5rem; }
.prose-photo { aspect-ratio: 4 / 5.2; margin: 0; }
@media (max-width: 52rem) {
	.cdo-prose { grid-template-columns: 1fr; box-sizing: border-box; }
	.prose-photo { aspect-ratio: 16 / 12; }
}

/* ---------- Dove siamo ---------- */

.cdo-dove {
	max-width: var(--max);
	margin-inline: auto !important;
	padding: 0 var(--gutter) var(--sp-section);
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	box-sizing: content-box;
}
.dove-text > .small-title { margin-top: 2.5rem; }
.cdo-indirizzo address {
	font-style: normal;
	font-family: var(--serif);
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	line-height: 1.3;
	color: var(--blu);
}
.dove-note { color: var(--testo-2); margin: 0.75rem 0 0.75rem; }
.cdo-orari { margin: 0.75rem 0 0; }
.cdo-orari > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--blu) 14%, transparent);
}
.cdo-orari dt { font-weight: 600; }
.cdo-orari dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--testo-2); }
.cdo-orari a { color: var(--blu); }
.cdo-mappa {
	min-height: 30rem;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--crema-2);
	border: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
}
.cdo-mappa iframe { display: block; width: 100%; height: 100%; min-height: 30rem; border: 0; filter: saturate(0.6) sepia(0.12); }
@media (max-width: 52rem) {
	.cdo-dove { grid-template-columns: 1fr; box-sizing: border-box; }
	.cdo-mappa, .cdo-mappa iframe { min-height: 24rem; }
}

/* ---------- Prenota ---------- */

.cdo-prenota-page {
	max-width: var(--max);
	margin-inline: auto !important;
	padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) var(--sp-section);
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 5rem);
	box-sizing: content-box;
}
.prenota-intro > p { color: var(--testo-2); max-width: 28rem; }
.prenota-intro > .prenota-alt { margin-top: 2rem; }
.prenota-intro > .cdo-btn { margin-top: 0.75rem; }
.prenota-intro a:not(.cdo-btn) { color: var(--blu); font-weight: 600; }

.cdo-prenota .form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem 1rem;
	align-content: start;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fbfaf4;
	border: 1px solid color-mix(in srgb, var(--oro) 40%, transparent);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgb(20 40 70 / 0.06), 0 24px 50px -32px rgb(20 40 70 / 0.4);
}
.cdo-prenota .field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.cdo-prenota .field-wide { grid-column: 1 / -1; }
.cdo-prenota label { font-weight: 600; font-size: 0.92rem; color: var(--blu); }
.cdo-prenota .opt { font-weight: 400; color: var(--testo-2); }
.cdo-prenota input, .cdo-prenota select, .cdo-prenota textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.7rem 0.85rem;
	font: 400 1rem/1.4 var(--sans);
	color: var(--inchiostro);
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--blu) 28%, transparent);
	border-radius: var(--radius);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cdo-prenota textarea { resize: vertical; min-height: 4.5rem; }
.cdo-prenota ::placeholder { color: #5f6d82; }
.cdo-prenota input:focus, .cdo-prenota select:focus, .cdo-prenota textarea:focus {
	outline: none;
	border-color: var(--blu);
	box-shadow: 0 0 0 3px rgb(180 145 67 / 0.35);
}
.cdo-prenota select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2322456f' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 0.75rem;
	padding-right: 2.4rem;
}
.cdo-prenota .err { display: none; margin: 0; font-size: 0.85rem; color: #a0281f; }
.cdo-prenota .field.has-err input, .cdo-prenota .field.has-err select, .cdo-prenota .field.has-err textarea { border-color: #a0281f; }
.cdo-prenota .field.has-err .err { display: block; }
.cdo-prenota .btn-submit { grid-column: 1 / -1; justify-self: start; margin-top: 0.4rem; }

@media (max-width: 52rem) {
	.cdo-prenota-page { grid-template-columns: 1fr; box-sizing: border-box; }
	.cdo-prenota .form { grid-template-columns: 1fr 1fr; }
	.cdo-prenota .field-half { grid-column: 1 / -1; }
	.cdo-prenota .field[data-per="tavolo evento"]:last-of-type { grid-column: auto; }
	.cdo-prenota .btn-submit { justify-self: stretch; }
}
.cdo-prenota-page + .cdo-invito { border-top: 0; }

/* ---------- Piede ---------- */

.site-footer {
	background: var(--crema-2);
	border-top: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
	padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
}
.site-footer > * { margin-block: 0; }
.footer-inner {
	max-width: var(--max);
	margin: 0 auto !important;
	display: grid;
	grid-template-columns: auto repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.footer-inner > * { margin: 0 !important; }
.cdo-brand--footer img { width: 8.5rem; display: block; }
.footer-col > * { margin-block: 0.75rem 0; }
.footer-col > :first-child { margin-top: 0; }
.footer-col h2 { font-size: 1.35rem; }
.footer-col p { color: var(--testo-2); font-size: 0.95rem; }
.footer-col a { color: var(--blu); }
.footer-col .cdo-orari > div { padding: 0.45rem 0; font-size: 0.92rem; }
.footer-col ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-col ul a { text-decoration: none; font-weight: 500; }
@media (hover: hover) { .footer-col ul a:hover { text-decoration: underline; } }
.site-footer .legal {
	max-width: var(--max);
	margin: 3rem auto 0 !important;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--blu) 12%, transparent);
	font-size: 0.85rem;
	color: var(--testo-2);
}
.site-footer .legal a { color: var(--blu); }
@media (max-width: 60rem) {
	.footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-inner > .cdo-brand { grid-column: 1 / -1; }
}
@media (max-width: 34rem) { .footer-inner { grid-template-columns: 1fr; } }

/* modulo contatti: tipo di richiesta, privacy, esito */
.cdo-prenota { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.cdo-prenota .form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cdo-prenota .field { grid-column: span 2; }
.cdo-prenota .field-half { grid-column: span 3; }
.cdo-prenota .field-wide { grid-column: 1 / -1; }
.cdo-prenota .form[data-tipo="evento"] .field[data-per="tavolo evento"] { grid-column: span 3; }
.cdo-prenota [data-per][hidden] { display: none !important; }
.cdo-prenota .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cdo-prenota .tipi { border: 0; margin: 0; padding: 0; min-width: 0; }
.cdo-prenota .tipi legend { padding: 0; margin-bottom: 0.55rem; font-weight: 600; font-size: 0.92rem; color: var(--blu); }
.cdo-prenota .tipi-scelte { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cdo-prenota .tipo { position: relative; font-weight: 500; cursor: pointer; }
.cdo-prenota .tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.cdo-prenota .tipo span {
	display: inline-flex;
	align-items: center;
	min-height: 2.6rem;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--blu) 28%, transparent);
	background: #fff;
	color: var(--blu);
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out);
}
.cdo-prenota .tipo:active span { transform: scale(0.97); }
.cdo-prenota .tipo input:checked + span { background: var(--blu); border-color: var(--blu); color: var(--crema); }
.cdo-prenota .tipo input:focus-visible + span { box-shadow: 0 0 0 3px rgb(180 145 67 / 0.45); }
@media (hover: hover) { .cdo-prenota .tipo:hover input:not(:checked) + span { border-color: var(--blu); } }
.cdo-prenota .field-check .check { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; font-size: 0.92rem; line-height: 1.5; color: var(--testo-2); cursor: pointer; }
.cdo-prenota .field-check input { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; margin: 0.12rem 0 0; flex: none; accent-color: var(--blu); }
.cdo-prenota .field-check a { color: var(--blu); font-weight: 600; }
.cdo-prenota .field.has-err .check { color: #a0281f; }
.cdo-prenota .form-esito { grid-column: 1 / -1; margin: 0; font-size: 0.95rem; color: var(--blu); }
.cdo-prenota .form-esito:empty { display: none; }
.cdo-prenota .form-esito.is-err { color: #a0281f; }
.cdo-prenota .btn-submit[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.cdo-prenota .form-grazie {
	padding: clamp(2rem, 4vw, 3rem);
	text-align: center;
	background: #fbfaf4;
	border: 1px solid color-mix(in srgb, var(--oro) 40%, transparent);
	border-radius: var(--radius);
	outline: none;
	animation: cdo-grazie 420ms var(--ease-out);
}
.cdo-prenota .form-grazie img { width: 4.5rem; height: auto; margin: 0 auto 1rem; }
.cdo-prenota .form-grazie h2 { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); color: var(--blu); }
.cdo-prenota .form-grazie p { margin: 0 auto; max-width: 28rem; color: var(--testo-2); }
@keyframes cdo-grazie { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 52rem) {
	.cdo-prenota .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cdo-prenota .field { grid-column: span 1; }
	.cdo-prenota .field-half, .cdo-prenota .field-wide { grid-column: 1 / -1; }
	.cdo-prenota .form[data-tipo="evento"] .field[data-per="tavolo evento"] { grid-column: span 1; }
}

/* ---------- Widget WhatsApp (computer; sul telefono c'è la barra in basso) ---------- */

.cdo-wa-widget {
	position: fixed;
	right: clamp(1rem, 2.5vw, 1.75rem);
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	z-index: 40;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 10px 28px -8px rgb(10 25 45 / 0.45);
	transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.cdo-wa-widget .cdo-icon { width: 1.9rem; height: 1.9rem; }
.cdo-wa-widget:active { transform: scale(0.95); }
.cdo-wa-widget:focus-visible { outline: 3px solid var(--oro-luce); outline-offset: 3px; }
.cdo-wa-widget__tip {
	position: absolute;
	right: calc(100% + 0.7rem);
	white-space: nowrap;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	background: var(--blu-fondo);
	color: var(--crema);
	font: 600 0.88rem/1 var(--sans);
	opacity: 0;
	transform: translateX(4px);
	pointer-events: none;
	transition: opacity 160ms ease, transform 200ms var(--ease-out);
}
@media (hover: hover) {
	.cdo-wa-widget:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgb(10 25 45 / 0.5); }
	.cdo-wa-widget:hover .cdo-wa-widget__tip { opacity: 1; transform: none; }
}
@media (max-width: 52rem) { .cdo-wa-widget { display: none; } }

/* ---------- Barra contatti mobile ---------- */

.cdo-dock { display: none; }
@media (max-width: 52rem) {
	.site-footer { padding-bottom: 6.5rem; }
	.cdo-dock {
		position: fixed;
		left: 0.6rem;
		right: 0.6rem;
		bottom: calc(0.6rem + env(safe-area-inset-bottom));
		z-index: 30;
		display: grid;
		grid-template-columns: 1fr 1fr 1.25fr;
		gap: 0.35rem;
		margin: 0 !important;
		padding: 0.35rem;
		background: var(--blu-fondo);
		border-radius: 999px;
		box-shadow: 0 12px 30px -10px rgb(10 25 45 / 0.6);
		transition: transform 320ms var(--ease-out);
	}
	.cdo-dock.is-hidden { transform: translateY(calc(100% + 1.5rem)); }
	.cdo-dock a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		min-height: 3rem;
		border-radius: 999px;
		color: var(--crema);
		font-weight: 600;
		font-size: 0.95rem;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: transform 140ms var(--ease-out);
	}
	.cdo-dock a:active { transform: scale(0.96); }
	.cdo-dock .cdo-icon { width: 1.15rem; height: 1.15rem; }
	.cdo-dock .dock-main { background: var(--oro-luce); color: var(--blu-fondo); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---------- Editor ---------- */

.editor-styles-wrapper .cdo-editor-preview { pointer-events: none; }
.editor-styles-wrapper .cdo-dock { position: static; display: grid; }

/* ---------- Selettore della lingua ---------- */

.cdo-lingua {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	font: 600 0.82rem/1 var(--sans);
	letter-spacing: 0.08em;
}
.cdo-lingua > * {
	display: inline-grid;
	place-items: center;
	min-width: 2.2rem;
	min-height: 2.2rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--testo-2);
}
.cdo-lingua .is-current { color: var(--blu); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 70%, transparent); }
@media (hover: hover) { .cdo-lingua a:hover { color: var(--blu); background: color-mix(in srgb, var(--blu) 7%, transparent); } }
@media (max-width: 60rem) { .site-header .cdo-lingua { order: 2; } }

/* ---------- Banner dei cookie ---------- */

.cdo-consenso {
	position: fixed;
	/* misurato sui bordi dello schermo, non su 100vw (che in alcuni browser comprende la barra di scorrimento) */
	left: 0.6rem;
	right: 0.6rem;
	bottom: calc(0.6rem + env(safe-area-inset-bottom));
	z-index: 100000;
	width: auto;
	max-width: 30rem;
	box-sizing: border-box;
	max-height: calc(100svh - 2rem);
	overflow-y: auto;
	padding: 1.5rem 1.5rem 1.25rem;
	background: #fbfaf4;
	color: var(--inchiostro);
	border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
	border-radius: 1rem;
	box-shadow: 0 2px 4px rgb(20 40 70 / 0.08), 0 30px 60px -20px rgb(20 40 70 / 0.45);
	font-size: 0.95rem;
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out);
}
.cdo-consenso.is-open { opacity: 1; transform: none; }
.cdo-consenso[hidden] { display: none; }
.cdo-consenso h2 { font-size: 1.6rem; padding-right: 2rem; }
.cdo-consenso p { margin: 0.6rem 0 0; color: var(--testo-2); line-height: 1.55; }
.cdo-consenso p a { color: var(--blu); font-weight: 600; }
.consenso-chiudi {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--blu);
	cursor: pointer;
}
@media (hover: hover) { .consenso-chiudi:hover { background: color-mix(in srgb, var(--blu) 8%, transparent); } }
.consenso-preferenze { margin-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--blu) 12%, transparent); }
.consenso-preferenze[hidden] { display: none; }
.consenso-voce {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.85rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--blu) 12%, transparent);
}
.consenso-voce input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--blu); flex: none; }
.consenso-voce label { line-height: 1.4; }
.consenso-voce label strong { color: var(--blu); }
.consenso-voce label span { display: block; color: var(--testo-2); font-size: 0.88rem; margin-top: 0.15rem; }
.consenso-azioni {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-top: 1.25rem;
}
.consenso-azioni .cdo-btn { min-height: 2.9rem; width: 100%; }
.consenso-azioni [hidden] { display: none; }
.consenso-link,
.consenso-salva { grid-column: 1 / -1; }
.consenso-link {
	justify-self: center;
	padding: 0.4rem 0.6rem;
	border: 0;
	background: none;
	font: 600 0.9rem/1 var(--sans);
	color: var(--blu);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	cursor: pointer;
}
body.consenso-aperto .cdo-dock { transform: translateY(calc(100% + 1.5rem)); }

/* Mappa in attesa del consenso */
.cdo-mappa { display: grid; }
.mappa-attesa {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	padding: 2rem;
	text-align: center;
	background: var(--crema-2);
}
.mappa-attesa p { margin: 0; max-width: 24rem; color: var(--testo-2); }
.mappa-attesa .link-arrow { font-size: 0.92rem; }

/* ---------- Testi legali ---------- */

.legal-text { margin-top: 2.5rem !important; max-width: 42rem; }
.legal-text > * { margin-block: 1rem 0; }
.legal-text h2 { margin-top: 2.75rem; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); }
.legal-text p, .legal-text li { color: var(--testo-2); line-height: 1.65; }
.legal-text ul { padding-left: 1.2rem; }
.legal-text li + li { margin-top: 0.6rem; }
.legal-text li::marker { color: var(--oro); }
.legal-text strong { color: var(--inchiostro); }
.legal-text a { color: var(--blu); font-weight: 600; }
.cdo-intro.is-legal > .lede { font-size: 0.95rem; }

/* ---------- Slider nell'arco (home) ---------- */

.cdo-slider {
	display: grid;
	gap: 1rem;
	margin: 0 !important;
	box-shadow: none;
	aspect-ratio: auto;
	max-height: none;
}
.cdo-slider .slider-arch {
	aspect-ratio: 4 / 4.9;
	max-height: calc(100svh - 11rem);
	width: 100%;
	box-shadow: 0 30px 60px -30px rgb(20 40 70 / 0.5);
}
.cdo-slider .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 900ms var(--ease-out), transform 6s linear;
}
.cdo-slider .slide.is-on { opacity: 1; transform: scale(1); }
.slider-voci {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
	gap: 1rem;
}
.slider-voci .voce {
	display: grid;
	gap: 0.55rem;
	padding: 0.25rem 0 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.voce-nome {
	font-family: var(--serif);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
	color: var(--testo-2);
	transition: color 200ms ease;
}
.voce.is-on .voce-nome { color: var(--blu); }
.voce-barra {
	position: relative;
	height: 2px;
	background: color-mix(in srgb, var(--oro) 30%, transparent);
	overflow: hidden;
}
.voce-barra::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--oro);
	transform: scaleX(0);
	transform-origin: left;
}
.voce.is-on .voce-barra::after { animation: avanza var(--durata, 5s) linear both; }
.cdo-slider.is-paused .voce.is-on .voce-barra::after { animation-play-state: paused; }
@keyframes avanza { to { transform: scaleX(1); } }
@media (hover: hover) { .voce:hover .voce-nome { color: var(--blu); } }
.slider-link { justify-self: start; font-size: 0.95rem; }

.cdo-hero .cdo-slider img { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
	.cdo-hero .cdo-slider { animation: rise 900ms var(--ease-out) 300ms both; }
	.cdo-hero .cdo-slider .slider-arch { animation: unveil 1300ms var(--ease-in-out) 60ms both; }
}
@media (prefers-reduced-motion: reduce) {
	.voce.is-on .voce-barra::after { transform: scaleX(1); }
}
@media (max-width: 52rem) {
	.cdo-slider .slider-arch { aspect-ratio: 4 / 4.2; max-height: none; }
}

.cdo-menu .menu-fisso {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgb(226 192 107 / 0.5);
	border-radius: var(--radius);
}
.menu-fisso span { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.menu-fisso strong { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); color: var(--oro-luce); font-variant-numeric: lining-nums; }

/* Titolo della home senza data di apertura: il logo intero */
.cdo-apertura--logo { display: block; line-height: 0; }
.cdo-apertura--logo img {
	display: block;
	width: clamp(10rem, 17vw, 14rem);
	height: auto;
}
.cdo-hero .hero-text > .cdo-apertura--logo + .lede { margin-top: 1.75rem; }
@media (max-width: 52rem) {
	.cdo-apertura--logo img { width: min(12rem, 55vw); margin-inline: auto; }
}

/* ---------- Telefono: la testata deve stare sempre in una riga ---------- */

/* niente può allargare la pagina oltre lo schermo (clip non rompe le parti fisse in alto) */
html, body { overflow-x: clip; }
.site-header { min-width: 0; }
.cdo-brand { min-width: 0; flex-shrink: 1; }
.brand-name { white-space: nowrap; }

@media (max-width: 52rem) {
	/* "Prenota" c'è già nella barra in basso */
	.site-header .wp-block-buttons { display: none; }
	.site-header { gap: 0.6rem; }
	.brand-name { font-size: 1.1rem; }
}
@media (max-width: 30rem) {
	.site-header { padding-inline: 1rem; gap: 0.4rem; }
	.cdo-brand { gap: 0.5rem; }
	.cdo-brand img { width: 2.25rem; }
	.brand-name { font-size: 1rem; }
	.brand-name small { font-size: 0.66rem; letter-spacing: 0.14em; }
	/* della lingua si vede solo quella da scegliere */
	.cdo-lingua .is-current { display: none; }
	.cdo-lingua a { min-width: 2.5rem; min-height: 2.5rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 70%, transparent); }
	.wp-block-navigation__responsive-container-open { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 22.5rem) {
	.cdo-brand img { width: 2rem; }
	.brand-name { font-size: 0.92rem; }
}

/* le schede del menù scorrono di lato invece di allargare la colonna */
.cdo-menu > * { min-width: 0; }
@media (max-width: 52rem) {
	.cdo-menu { grid-template-columns: minmax(0, 1fr); }
}

/* colonne che non devono mai superare lo schermo */
.cdo-dove > *, .cdo-prenota-page > *, .cdo-prose > *, .cdo-split > *, .cdo-hero > *, .cdo-info > *, .footer-inner > * { min-width: 0; }
.cdo-orari dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
	/* contatti: etichetta sopra e valore sotto, l'email lunga va a capo */
	.cdo-contatti > div { flex-direction: column; gap: 0.15rem; }
	.cdo-contatti dd { text-align: left; }
}
@media (min-width: 40rem) {
	.cdo-consenso { left: 1.5rem; right: auto; width: 30rem; bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 30rem) {
	.cdo-consenso { padding: 1.25rem 1.1rem 1rem; }
	.cdo-consenso h2 { font-size: 1.4rem; }
	.consenso-azioni { gap: 0.5rem; }
}

/* ---------- Menù completo: gruppi, allergeni, legenda ---------- */

.cdo-menu .menu-gruppo {
	margin: 2.5rem 0 0.5rem;
	color: var(--oro-luce);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}
.cdo-menu .menu-panel > .menu-gruppo:first-child { margin-top: 0; }
.cdo-menu .dish { flex: 0 1 auto; min-width: 0; }
.cdo-menu .dish .allerg {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--crema-su-blu);
}
.cdo-menu .dots { flex-shrink: 1; }
.cdo-menu .price { flex: none; }
.allergeni-legenda {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(226 192 107 / 0.35);
	font-size: 0.88rem;
	color: var(--crema-su-blu);
}
.allergeni-legenda h2 { color: var(--crema); font-size: 1.25rem; }
.allergeni-legenda ul {
	list-style: none;
	margin: 0.9rem 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0.3rem 1rem;
}
.allergeni-legenda li { margin: 0; }
.allergeni-legenda strong { color: var(--oro-luce); font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.4em; }
.allergeni-legenda p { margin: 0.5rem 0 0; max-width: 40rem; }
.cdo-menu .tabs button { white-space: nowrap; flex: none; }