/* =============================================================
 * Sotto il — Skin "Giardino"
 * Alternanza di sezioni chiare (carta / crema) e scure (ink), accento salvia,
 * marrone di marca per i dettagli. NIENTE arancio/ambra: è il colore del competitor.
 *
 * Caricato DOPO app.css (vedi functions.php). CSS plain: Tailwind è runtime.
 * I colori devono restare allineati a sottoil_tailwind_config() in functions.php.
 * ============================================================= */

:root {
	--si-ink: #1a1c1c;
	--si-ink-2: #282928;
	--si-paper: #ffffff;
	--si-cream: #f1eee8;
	--si-line: #d6d5ce;
	--si-heading: #343332;
	--si-text: #666253;
	--si-sage: #b7b095;
	--si-sage-deep: #8a8366;
	--si-brown: #5d452b;

	/* Grana "carta" generata in SVG (sostituisce la texture jpg del demo Giardino). */
	--si-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .38 0 0 0 0 .33 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--si-ease: 0.25s cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================
 * 1 · Schemi di sezione (equivalente di scheme_default / scheme_dark di Giardino)
 * Ogni <section> ne usa esattamente uno. I componenti leggono le variabili.
 * ============================================================= */
.si-scheme-paper,
.si-scheme-cream {
	color: var(--si-text);
	--si-h: var(--si-heading);
	--si-eyebrow-c: var(--si-sage-deep);
	--si-rule: var(--si-sage);
	--si-link: var(--si-heading);
	--si-link-h: var(--si-brown);
	--si-btn-bg: var(--si-ink);
	--si-btn-fg: var(--si-cream);
	--si-btn-bg-h: var(--si-brown);
	--si-bd: var(--si-line);
	--si-focus: var(--si-heading);
}
.si-scheme-paper {
	background-color: var(--si-paper);
	background-image: var(--si-noise);
}
.si-scheme-cream {
	background-color: var(--si-cream);
	background-image: var(--si-noise);
}
.si-scheme-ink {
	background-color: var(--si-ink);
	color: var(--si-sage);
	--si-h: #ffffff;
	--si-eyebrow-c: var(--si-sage);
	--si-rule: var(--si-sage);
	--si-link: #ffffff;
	--si-link-h: var(--si-sage);
	--si-btn-bg: var(--si-cream);
	--si-btn-fg: var(--si-ink);
	--si-btn-bg-h: var(--si-sage);
	--si-bd: rgba(255, 255, 255, 0.12);
	--si-focus: var(--si-sage);
}

/* =============================================================
 * 2 · Tipografia
 * ============================================================= */
.si-h {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.005em;
	color: var(--si-h, var(--si-heading));
	text-wrap: balance;
}
.si-text {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.5;
}

/* Occhiello script + doppio filetto (firma di Giardino). Scrivere il testo in minuscolo. */
.si-eyebrow {
	position: relative;
	display: inline-block;
	font-family: 'Sacramento', cursive;
	font-size: clamp(1.9rem, 3vw, 2.55rem);
	line-height: 1.1;
	color: var(--si-eyebrow-c, var(--si-sage-deep));
	padding-bottom: 0.6em;
}
.si-eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4.25rem;
	height: 6px;
	background:
		linear-gradient(var(--si-rule), var(--si-rule)) left top / 100% 2px no-repeat,
		linear-gradient(var(--si-rule), var(--si-rule)) left bottom / 70% 2px no-repeat;
}
.si-eyebrow--center::after {
	left: 50%;
	transform: translateX(-50%);
	background-position: center top, center bottom;
}
.si-eyebrow--rule-top {
	padding-bottom: 0;
	padding-top: 0.7em;
}
.si-eyebrow--rule-top::after {
	top: 0;
	bottom: auto;
}

/* Doppio filetto isolato (sotto titoli di colonna, footer, contatti). */
.si-rule {
	display: block;
	width: 3.2rem;
	height: 6px;
	background:
		linear-gradient(var(--si-rule, var(--si-sage)), var(--si-rule, var(--si-sage))) left top / 100% 2px no-repeat,
		linear-gradient(var(--si-rule, var(--si-sage)), var(--si-rule, var(--si-sage))) left bottom / 70% 2px no-repeat;
}
.si-rule--center {
	margin-left: auto;
	margin-right: auto;
	background-position: center top, center bottom;
}

/* =============================================================
 * 3 · Bottoni e link
 * ============================================================= */
.si-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.8rem 1.9rem;
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--si-ease), color var(--si-ease), border-color var(--si-ease);
}
.si-btn--solid {
	background-color: var(--si-btn-bg);
	color: var(--si-btn-fg);
}
.si-btn--solid:hover {
	background-color: var(--si-btn-bg-h);
	color: var(--si-btn-fg);
}
.si-btn--outline {
	background-color: transparent;
	color: var(--si-link);
	border-color: currentColor;
}
.si-btn--outline:hover {
	background-color: var(--si-btn-bg);
	border-color: var(--si-btn-bg);
	color: var(--si-btn-fg);
}
.si-btn--sm {
	min-height: 44px;
	padding: 0.55rem 1.4rem;
	font-size: 1.1rem;
}

/* Link sottolineato "alla Giardino" (Book A Table, More Events, Details). */
.si-link {
	display: inline-block;
	padding-bottom: 0.3em;
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--si-link);
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	transition: color var(--si-ease);
}
.si-link:hover,
.si-card:hover .si-link {
	color: var(--si-link-h);
}
.si-card:hover .si-h {
	color: var(--si-link-h);
	transition: color var(--si-ease);
}

.si-btn:focus-visible,
.si-link:focus-visible,
.si-social:focus-visible,
.menu-tab:focus-visible,
.si-nav-link:focus-visible {
	outline: 2px solid var(--si-focus, var(--si-heading));
	outline-offset: 3px;
}

/* Cerchi social (salvia, glifo scuro). */
.si-social {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background-color: var(--si-sage);
	color: var(--si-ink);
	transition: background-color var(--si-ease);
}
.si-social:hover {
	background-color: var(--si-cream);
}

/* =============================================================
 * 4 · Header / navigazione
 * ============================================================= */
.si-nav-link,
#navbar .menu-item > a {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 600;
	font-size: 1.3rem;
	color: rgba(241, 238, 232, 0.85);
	white-space: nowrap;
	padding-bottom: 0.15em;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: color var(--si-ease), background-size var(--si-ease);
}
.si-nav-link:hover,
.si-nav-link.is-active,
#navbar .menu-item > a:hover,
#navbar .current-menu-item > a {
	color: #ffffff;
	background-size: 100% 1px;
}
@media (max-width: 1279px) {
	.si-nav-link,
	#navbar .menu-item > a { font-size: 1.15rem; }
}
#navbar.is-scrolled {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}

/* =============================================================
 * 5 · Hero (fascia scura sopra, crema sotto: cornice "alla Giardino" su desktop)
 * ============================================================= */
.si-hero {
	background: linear-gradient(to bottom, var(--si-ink) 0 45%, var(--si-cream) 45% 100%);
}
@media (prefers-reduced-motion: reduce) {
	.si-hero video { display: none; }
}
/* Telefono in orizzontale: hero alta quanto lo schermo, CTA visibili senza scorrere. */
@media (orientation: landscape) and (max-height: 500px) {
	.si-hero .si-hero__frame {
		height: calc(100svh - var(--si-nav-h, 84px));
		min-height: 0;
	}
	.si-hero .si-hero__title { font-size: 3.25rem; }
	.si-hero .si-eyebrow { margin-top: 0.5rem; }
	.si-hero .si-hero__ctas { margin-top: 1rem; }
}

/* =============================================================
 * 6 · Menu (tab sottolineate + voce con foto rettangolare)
 * ============================================================= */
.menu-tab {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--si-text);
	background: none;
	min-height: 44px; /* area di tocco minima */
	padding: 0.6rem 0 0.35rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--si-ease), border-color var(--si-ease);
}
.menu-tab:hover {
	color: var(--si-heading);
}
.menu-tab.is-active {
	color: var(--si-heading);
	border-bottom-color: var(--si-heading);
}
/* --si-nav-h è l'altezza corrente dell'header sticky, aggiornata da app.js. */
#menu-tabs {
	top: var(--si-nav-h, 76px);
	border-bottom: 1px solid var(--si-line);
}

.si-menu-item {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--si-bd, var(--si-line));
}
.si-menu-item__thumb {
	flex: 0 0 auto;
	width: 120px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.si-menu-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.si-menu-item:hover .si-menu-item__thumb img {
	transform: scale(1.06);
}
.si-menu-item__body {
	flex: 1;
	min-width: 0;
}
.si-menu-item__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}
.si-menu-item__name {
	position: relative;
	margin-bottom: 0.5rem;
	padding-bottom: 0.45rem;
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--si-h, var(--si-heading));
}
.si-menu-item__name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.75rem;
	height: 2px;
	background: var(--si-rule, var(--si-sage));
}
.si-menu-item__price {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--si-h, var(--si-heading));
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}
.si-menu-item__desc {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.45;
}
.si-menu-item__note {
	margin-top: 0.5rem;
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.5;
}
@media (max-width: 480px) {
	.si-menu-item { gap: 1rem; }
	.si-menu-item__thumb { width: 88px; }
}

/* =============================================================
 * 7 · Contenuti editoriali (the_content) e blocchi Gutenberg
 * ============================================================= */
.si-content {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.6;
}
.si-content > * + * { margin-top: 1.1em; }
.si-content h2,
.si-content h3,
.si-content h4 {
	margin-top: 1.6em;
	font-weight: 700;
	line-height: 1.15;
	color: var(--si-h, var(--si-heading));
}
.si-content h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.si-content h3 { font-size: 1.6rem; }
/* Esclude i bottoni Gutenberg, che hanno colori propri. */
.si-content a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--si-link-h, var(--si-brown));
	text-decoration: underline;
	text-underline-offset: 3px;
}
.si-content ul { list-style: disc; padding-left: 1.25em; }
.si-content ol { list-style: decimal; padding-left: 1.25em; }
.si-content blockquote {
	border-left: 2px solid var(--si-rule, var(--si-sage));
	padding-left: 1.25em;
	font-style: italic;
	color: var(--si-h, var(--si-heading));
}
.si-content img { height: auto; }

h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading {
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 700;
	line-height: 1.08;
	color: var(--si-h, var(--si-heading));
	text-wrap: balance;
}
h1.wp-block-heading { font-size: clamp(40px, 5vw, 64px); }
h2.wp-block-heading { font-size: clamp(32px, 4vw, 56px); }
h3.wp-block-heading { font-size: clamp(24px, 2.4vw, 30px); }
/* Dentro un Cover (foto scura) il titolo eredita il colore chiaro del blocco. */
.wp-block-cover .wp-block-heading { color: inherit; }
/* Un blocco con colore del testo scelto in editor (es. Group su fondo scuro) lo passa a titoli e link. */
.has-text-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.has-text-color a:not(.wp-block-button__link):not(.wp-element-button):not(.has-text-color) {
	color: inherit;
}

/* =============================================================
 * 8 · Form (Contact Form 7, commenti, ricerca, contenuti) — testo scuro su fondo chiaro
 * Limitato ai contenitori del sito: i widget di terzi (GTranslate, WhatsApp) restano com'erano.
 * ============================================================= */
:where(.wpcf7, .si-content, .comment-form, .search-form) :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="date"],
	input[type="number"],
	input[type="search"],
	select,
	textarea
) {
	width: 100%;
	font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	font-size: 16px; /* evita lo zoom automatico su iOS */
	color: var(--si-heading);
	background-color: #ffffff;
	border: 1px solid var(--si-line);
	border-radius: 0;
	padding: 14px 16px;
	transition: border-color var(--si-ease), box-shadow var(--si-ease);
}
:where(.wpcf7, .si-content, .comment-form, .search-form) :is(input, textarea)::placeholder {
	color: var(--si-text);
	opacity: 0.8;
}
:where(.wpcf7, .si-content, .comment-form, .search-form) :is(input:not([type="submit"], [type="checkbox"], [type="radio"]), select, textarea):focus {
	outline: none;
	border-color: var(--si-heading);
	box-shadow: 0 0 0 3px rgba(183, 176, 149, 0.35);
}
:where(.wpcf7, .si-content, .comment-form, .search-form) input[type="submit"],
.wpcf7-submit {
	width: auto;
	min-height: 48px;
	padding: 0.8rem 1.9rem;
	font-family: 'Cormorant', ui-serif, Georgia, serif;
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--si-cream);
	background-color: var(--si-ink);
	border: 0;
	cursor: pointer;
	transition: background-color var(--si-ease);
}
:where(.wpcf7, .si-content, .comment-form, .search-form) input[type="submit"]:hover,
.wpcf7-submit:hover { background-color: var(--si-brown); }

/* Icone su fondo chiaro (classe storica, ora marrone di marca). */
.color-sottoil { color: var(--si-brown); }