/*!
Theme Name: Alessandra Spadaro
Theme URI: http://underscores.me/
Author: Luca Vizza
Author URI: http://underscores.me/
Description: Tema custom per il sito di Alessandra Spadaro, biologa nutrizionista.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alessandra-spadaro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Alessandra Spadaro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   1. Font face (auto-ospitati, vedi /fonts)
   ========================================================= */

@font-face {
	font-family: 'Noticia Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/noticia-text-v16-latin-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Noticia Text';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/noticia-text-v16-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/open-sans-v44-latin-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

/* =========================================================
   2. Variabili
   ========================================================= */

:root {
	/* Colori brand, da site-map.md */
	--color-primary-green: #98C647;
	--color-accent-green: #6D9E11;        /* solo titoli grandi: 3.21:1 su bianco */
	--color-accent-green-dark: #577E0E;   /* link e testo piccolo: 4.78:1 su bianco */
	--color-dark: #242323;
	--color-gray-1: #EFF1F2;
	--color-gray-2: #F0F0F0;
	--color-gray-3: #F4F4F4;
	--color-white: #ffffff;
	--color-text: #242323;
	--color-border: #e2e2e2;

	/* Font */
	--font-heading: 'Noticia Text', Georgia, 'Times New Roman', serif;
	--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Layout */
	--container-width: 1180px;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 3.5rem;
	--space-xl: 5.5rem;
	--radius: 8px;

	/* Animazioni */
	--transition-fast: 0.2s ease;
	--transition-slow: 0.6s ease;
}

/* =========================================================
   3. Reset di base
   ========================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
}

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

ul, ol {
	padding-left: 1.25em;
}

a {
	color: var(--color-accent-green-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--color-dark);
}

/* Focus visibile ovunque, mai rimosso senza sostituto (WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-accent-green-dark);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: 1.2;
	margin: 0 0 0.6em;
	color: var(--color-dark);
}

h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }

p {
	margin: 0 0 1.2em;
}

button {
	font-family: inherit;
}

/* =========================================================
   4. Accessibilità: skip-link e screen-reader-text
   ========================================================= */

.skip-link.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--color-white);
	border-radius: var(--radius);
	box-shadow: 0 0 0 2px var(--color-dark);
	clip: auto !important;
	clip-path: none;
	color: var(--color-dark);
	display: block;
	font-weight: 600;
	height: auto;
	left: var(--space-sm);
	line-height: normal;
	padding: 1em 1.5em;
	text-decoration: none;
	top: var(--space-sm);
	width: auto;
	z-index: 100000;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* =========================================================
   5. Layout helpers
   ========================================================= */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-sm);
}

.section {
	padding-block: var(--space-lg);
}

.section--gray-1 { background: var(--color-gray-1); }
.section--gray-2 { background: var(--color-gray-2); }
.section--gray-3 { background: var(--color-gray-3); }
.section--green  { background: var(--color-primary-green); }
.section--dark   { background: var(--color-dark); }

/* Testo su sfondo verde primario: nero/scuro, non bianco (2.00:1 insufficiente) */
.section--green,
.section--green h1,
.section--green h2,
.section--green h3,
.section--green p,
.section--green li {
	color: var(--color-dark);
}

/* Testo su sfondo scuro: bianco (15.7:1, ampiamente conforme) */
.section--dark,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark p {
	color: var(--color-white);
}

.section-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	color: var(--color-accent-green);
	font-size: clamp(1.8rem, 5vw, 3rem);
	margin-bottom: var(--space-md);
}

.section--dark .section-title,
.section--green .section-title {
	color: inherit;
}

.grid {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 700px) {
	.grid--2col {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

@media (min-width: 700px) {
	.grid--3col {
		grid-template-columns: repeat(3, 1fr);
	}
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =========================================================
   6. Pulsanti
   ========================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.85em 1.8em;
	border-radius: var(--radius);
	background: var(--color-accent-green-dark);
	color: var(--color-white);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
	background: var(--color-dark);
	color: var(--color-white);
}

.btn:active {
	transform: translateY(1px);
}

.btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--color-dark);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--color-dark);
	color: var(--color-white);
}

.btn--small {
	padding: 0.5em 1.2em;
	min-height: 38px;
	font-size: 0.9rem;
}

.btn__icon {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	flex-shrink: 0;
}

/* =========================================================
   7. Header
   ========================================================= */

.site-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-white);
}

.site-header__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-sm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex: 1 1 auto;
	min-width: 0;
}

.site-branding img,
.custom-logo {
	height: 64px;
	width: auto;
	border-radius: 50%;
}

.site-branding-text {
	min-width: 0;
}

.site-title {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	margin: 0;
	line-height: 1.25;
}

.site-title a {
	color: var(--color-dark);
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: 0.8rem;
	color: var(--color-accent-green-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-left: auto;
}

.header-search {
	display: none;
}

@media (min-width: 900px) {
	.header-search {
		display: block;
	}
}

.header-search .search-form {
	display: flex;
	align-items: center;
	background: var(--color-gray-3);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding-left: 1.1em;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.header-search .search-form:focus-within {
	border-color: var(--color-accent-green-dark);
	background: var(--color-white);
}

.header-search .search-field {
	border: 0;
	background: transparent;
	min-height: 40px;
	width: 150px;
	padding: 0.5em 0;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text);
	-webkit-appearance: none;
	appearance: none;
}

.header-search .search-field::placeholder {
	color: #8a8a8a;
}

/* Toglie la "x" nativa di Chrome/Safari nei campi search: la sostituiamo
   con un pulsante coerente col resto del sito, non serve doppia UI. */
.header-search .search-field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.header-search .search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: 0.4em;
	border-radius: 50%;
	background: var(--color-accent-green-dark);
	color: var(--color-white);
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--transition-fast);
}

.header-search .search-submit svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.header-search .search-submit:hover,
.header-search .search-submit:focus-visible {
	background: var(--color-dark);
}

.main-navigation {
	width: 100%;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
}

.main-navigation .menu-toggle {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	min-height: 44px;
	background: transparent;
	border: 0;
	color: var(--color-dark);
	font-weight: 600;
	padding: 0.8em var(--space-sm);
	cursor: pointer;
}

@media (min-width: 900px) {
	.main-navigation .menu-toggle {
		display: none;
	}
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}

/* navigation.js aggiunge/rimuove la classe "toggled" sul contenitore
   <nav>, non sull'elenco: il selettore deve puntare lì, non su "ul.toggled-on"
   (che il JS non applica mai). */
.main-navigation.toggled ul {
	display: block;
}

@media (min-width: 900px) {
	.main-navigation ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
}

.main-navigation li {
	border-top: 1px solid rgba(36, 35, 35, 0.12);
}

@media (min-width: 900px) {
	.main-navigation li {
		border-top: 0;
	}
}

.main-navigation a {
	display: block;
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 0.7em var(--space-sm);
	color: var(--color-dark);
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}

.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--color-accent-green-dark);
	background: transparent;
}

/* =========================================================
   8. Home — hero
   ========================================================= */

.hero {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.hero {
		grid-template-columns: 1fr 1fr;
	}
}

.hero__quote {
	background: var(--color-primary-green);
	color: var(--color-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-xl) var(--space-md);
}

.hero__quote blockquote {
	margin: 0 0 var(--space-md);
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	line-height: 1.35;
}

.hero__quote cite {
	display: block;
	margin-top: 0.6em;
	font-style: normal;
	font-family: var(--font-body);
	font-weight: 600;
}

.hero__image {
	min-height: 320px;
	/* Le foto disponibili sono verticali (ritratti): senza un tetto, la riga
	   della grid cresce fino alla loro altezza naturale e trascina con sé
	   la colonna della citazione, che resta piccola in un riquadro enorme. */
	max-height: 620px;
	overflow: hidden;
}

.hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le foto sono ritratti: con un crop centrato di default la testa finiva
	   tagliata quando il riquadro diventa più largo che alto. Ancorare in
	   alto tiene sempre visibile il viso, tagliando dal basso. */
	object-position: center top;
	min-height: 320px;
}

@media (min-width: 700px) {
	/* La foto è verticale: senza "stretch" (default della grid, qui
	   annullato da .grid--2col con align-items:center) il riquadro verde
	   restava centrato in una riga alta quanto la foto, con grandi vuoti
	   sopra e sotto il poco testo che contiene. */
	.short-bio-grid {
		align-items: stretch;
	}
}

.short-bio-image {
	max-height: 420px;
	overflow: hidden;
	border-radius: var(--radius);
}

.short-bio-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Vedi nota su .hero__image img: stesso ritratto, stesso rischio di
	   tagliare la testa senza ancorare il crop in alto. */
	object-position: center top;
	border-radius: var(--radius);
}

.short-bio-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* =========================================================
   9. Testimonianze / Happy Clients
   ========================================================= */

.testimonials {
	display: grid;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

@media (min-width: 700px) {
	.testimonials {
		grid-template-columns: repeat(3, 1fr);
	}
}

.testimonial {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius);
	padding: var(--space-md);
}

.testimonial p {
	font-style: italic;
}

.testimonial cite {
	display: block;
	margin-top: var(--space-sm);
	font-style: normal;
	font-weight: 600;
	color: var(--color-primary-green);
}

/* =========================================================
   10. Social + CTA finali
   ========================================================= */

.social-links {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
}

.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-accent-green-dark);
	color: var(--color-white);
	text-decoration: none;
}

.social-links a:hover,
.social-links a:focus-visible {
	background: var(--color-dark);
}

.social-links svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.page-cta {
	text-align: center;
	padding-block: var(--space-lg);
}

/* =========================================================
   11. Griglie contenuto (Chi sono, Le visite)
   ========================================================= */

.photo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Posizioni esplicite invece dell'auto-placement: la grid tratta un
	   figlio con riga fissata (.photo-grid__large, row:1/3) come priorità
	   sugli altri, e finiva per metterlo nella PRIMA colonna (sinistra) —
	   il contrario delle 2 foto piccole a sinistra + 1 grande a destra
	   volute (vedi site-map.md). Le aree nominate valgono a ogni
	   larghezza, senza bisogno di un breakpoint dedicato. */
	grid-template-areas:
		"small1 large"
		"small2 large";
	gap: var(--space-sm);
	max-width: 480px;
	/* Centrato: da solo è più stretto della colonna di testo sopra di lui,
	   allinearlo a sinistra lascerebbe un vuoto asimmetrico sulla destra. */
	margin-inline: auto;
}

.photo-grid > img:first-child {
	grid-area: small1;
}

.photo-grid__large {
	grid-area: large;
}

.photo-grid > img:last-child {
	grid-area: small2;
}

.photo-grid img {
	width: 100%;
	height: 100%;
	/* Rapporto fisso: le foto sorgente hanno proporzioni molto diverse tra
	   loro (verticale vs orizzontale) e senza vincolo le righe della grid si
	   dimensionano sulla foto più "alta", gonfiando tutto il collage. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius);
}

.photo-grid__large img {
	/* Questa tile copre le due righe di sinistra: segue quell'altezza
	   invece del proprio rapporto nativo (diverso da foto a foto). */
	aspect-ratio: auto;
}

.content-block {
	max-width: 70ch;
}

/* Su desktop, .content-block spesso condivide il div con .container:
   senza questo adattamento il max-width: 70ch (fisso in caratteri) vince
   sulla cascata e stringe il testo molto sotto i --container-width (1180px),
   lasciando vuoti laterali sproporzionati su schermi larghi. */
@media (min-width: 900px) {
	.content-block {
		max-width: 850px;
	}
}

.content-block--wide {
	max-width: none;
}

.list-check {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.6em;
}

.list-check li {
	padding-left: 1.8em;
	position: relative;
}

.list-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-accent-green-dark);
	font-weight: 700;
}

.visit-step {
	margin-bottom: var(--space-md);
}

.visit-step h3 {
	color: var(--color-accent-green-dark);
}

/* =========================================================
   12. Ricette (archivio + singola)
   ========================================================= */

.recipes-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.recipes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.recipes-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.recipe-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-gray-3);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.recipe-card:hover,
.recipe-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(36, 35, 35, 0.12);
}

.recipe-card__image {
	aspect-ratio: 1 / 1;
	width: 65%;
	max-width: 220px;
	margin: var(--space-sm) auto 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-gray-2);
}

.recipe-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recipe-card__body {
	padding: var(--space-sm);
	text-align: center;
}

.recipe-card__title {
	margin: 0 0 0.3em;
	font-size: 1.05rem;
	color: var(--color-dark);
}

.recipe-card__meta {
	font-size: 0.85rem;
	color: var(--color-accent-green-dark);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.recipe-single {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 800px) {
	.recipe-single__header {
		display: grid;
		grid-template-columns: 320px 1fr;
		gap: var(--space-lg);
		align-items: start;
	}
}

.recipe-single__image {
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	max-width: 320px;
}

.recipe-single__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recipe-meta-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-md);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	font-size: 0.9rem;
}

.recipe-meta-list strong {
	color: var(--color-accent-green-dark);
}

.recipe-ingredients-group h3 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-accent-green-dark);
	margin-top: var(--space-sm);
}

.recipe-steps {
	padding-left: 1.4em;
	display: grid;
	gap: 0.8em;
}

.recipe-back-link {
	display: inline-block;
	margin-top: var(--space-md);
}

.recipe-card__no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--color-accent-green-dark);
	font-family: var(--font-heading);
	font-size: 0.9rem;
	text-align: center;
	padding: var(--space-sm);
}

/* =========================================================
   12b. Carosello ricette (marquee automatico, accessibile)
   ========================================================= */

.recipe-carousel {
	position: relative;
}

.recipe-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	margin-bottom: var(--space-md);
}

.recipe-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.9em;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-dark);
	font-size: 1rem;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.recipe-carousel__btn--prev,
.recipe-carousel__btn--next {
	width: 44px;
	padding: 0;
	font-size: 1.2rem;
}

.recipe-carousel__btn:hover,
.recipe-carousel__btn:focus-visible {
	background: var(--color-accent-green-dark);
	border-color: var(--color-accent-green-dark);
	color: var(--color-white);
}

.recipe-carousel__btn[aria-pressed="true"] {
	background: var(--color-dark);
	border-color: var(--color-dark);
	color: var(--color-white);
}

.recipe-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Sul touchpad/mouse la scrollbar resta visibile: è l'unico indizio, a
	   scorrimento fermo, che il contenuto è anche navigabile manualmente. */
}

.recipe-carousel__viewport:focus-visible {
	outline: 3px solid var(--color-accent-green-dark);
	outline-offset: 2px;
}

.recipe-carousel__track {
	display: flex;
	gap: var(--space-md);
	width: max-content;
}

.recipe-carousel__track .recipe-card {
	flex: 0 0 auto;
	width: 260px;
}

.recipe-carousel__track .recipe-card:focus-visible {
	outline: 3px solid var(--color-accent-green-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.recipe-carousel__track {
		animation: recipe-marquee calc(var(--recipe-count, 20) * 4.5s) linear infinite;
	}

	/* Di default il contenuto scorre da solo: niente overflow nativo, per
	   evitare che lo scroll manuale si sommi al movimento automatico. */
	.recipe-carousel__viewport {
		overflow-x: hidden;
	}

	/* Pausa esplicita (pulsante) o messa in pausa persistente (swipe/frecce):
	   qui il contenuto torna scorribile a mano. */
	.recipe-carousel.is-paused .recipe-carousel__viewport {
		overflow-x: auto;
	}

	/* Il focus da tastiera su una card deve sia fermare il movimento sia
	   rendere il contenuto scorribile, altrimenti il browser non può
	   portare in vista un elemento attualmente fuori dallo schermo
	   (requisito WCAG 2.2.2: il movimento deve poter essere fermato anche
	   senza mouse). */
	.recipe-carousel__viewport:focus-within {
		overflow-x: auto;
	}

	.recipe-carousel.is-paused .recipe-carousel__track,
	.recipe-carousel__viewport:hover .recipe-carousel__track,
	.recipe-carousel__track:focus-within {
		animation-play-state: paused;
	}
}

@keyframes recipe-marquee {
	from {
		transform: translateX(0);
	}
	to {
		/* Il track contiene due copie identiche del contenuto: -50% sposta
		   esattamente di una copia, e il loop torna invisibile. */
		transform: translateX(-50%);
	}
}

@media (min-width: 700px) {
	.recipe-carousel__track .recipe-card {
		width: 300px;
	}
}

/* =========================================================
   12c. Home — feed Instagram
   ========================================================= */

.instagram-feed-wrap {
	margin-top: var(--space-md);
}

.instagram-feed-admin-note {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--color-gray-2);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	font-size: 0.9rem;
}

.instagram-feed-admin-note p:first-child {
	color: var(--color-accent-green-dark);
	margin-top: 0;
}

.instagram-feed-admin-note ol {
	margin: 0;
	padding-left: 1.2em;
}

.instagram-feed-admin-note li {
	margin-bottom: 0.4em;
}

/* =========================================================
   13. Contatti
   ========================================================= */

.contact-layout {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 800px) {
	.contact-layout {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-sede {
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.contact-sede:last-child {
	border-bottom: 0;
}

.contact-highlight {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	margin-top: var(--space-md);
}

.whatsapp-note {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text);
	opacity: 0.75;
	margin-top: 0.3em;
}

.map-placeholder {
	position: relative;
	background: var(--color-gray-2);
	border-radius: var(--radius);
	min-height: 280px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-sm);
	padding: var(--space-md);
}

/* Contenitore responsive per l'iframe: l'embed di Google My Maps dichiara
   width/height fissi (640x480, rapporto 4:3), qui li ignoriamo e lasciamo
   che sia il contenitore a dettare le dimensioni. */
.map-embed-wrap {
	/* Altezza della barra nera con titolo/icone che Google My Maps disegna
	   sempre in cima all'iframe: non è rimovibile via parametri dell'embed,
	   quindi la tagliamo via facendo scorrere l'iframe verso l'alto di
	   questo valore (vedi regole sotto) dentro un contenitore con
	   overflow:hidden. Misurata a occhio (riga rossa di riferimento) sia su
	   colonna larga (~558px, desktop) sia stretta (~343px, mobile/tablet).
	   "container-type" serve a far dipendere l'offset dalla larghezza REALE
	   della mappa (che cambia in base a dove è inserita: colonna della grid
	   desktop o larghezza piena mobile), non dal breakpoint di pagina. */
	container-type: inline-size;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
}

.map-embed-wrap iframe {
	position: absolute;
	top: -46px;
	left: 0;
	width: 100%;
	/* Compensa lo spostamento verso l'alto: senza questo "+", il fondo
	   della mappa risulterebbe tagliato di altrettanti pixel. */
	height: calc(100% + 46px);
	border: 0;
}

@container (max-width: 480px) {
	/* Sotto questa larghezza la riga "Informazioni" della barra va a capo su
	   una seconda riga (comportamento responsive dell'embed di Google): la
	   barra totale diventa più alta e l'offset "a una riga" lascerebbe una
	   striscia nera residua in basso. */
	.map-embed-wrap iframe {
		top: -70px;
		height: calc(100% + 70px);
	}
}

@media (min-width: 700px) {
	.contact-grid {
		/* .grid--2col di default centra verticalmente le due colonne: qui
		   il modulo di contatto è quasi sempre più alto della mappa (4:3),
		   e centrare lascerebbe vuoti sopra/sotto la mappa. Allineare in
		   alto evita l'effetto "riquadro piccolo perso in uno spazio
		   enorme" già visto nella sezione Short Bio della Home. */
		align-items: start;
	}
}

.contact-form .form-row {
	margin-bottom: var(--space-sm);
}

.contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.7em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 1rem;
}

.contact-form textarea {
	min-height: 130px;
}

.contact-form .consent-row {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	font-size: 0.9rem;
}

.contact-form .consent-row input {
	margin-top: 0.3em;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Contact Form 7: markup nativo del plugin */
.contact-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: var(--space-sm);
}

.contact-form input.wpcf7-form-control,
.contact-form textarea.wpcf7-form-control {
	width: 100%;
	min-height: 44px;
	padding: 0.7em 0.9em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 1rem;
}

.contact-form textarea.wpcf7-form-control {
	min-height: 130px;
}

.contact-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-size: 0.9rem;
	font-weight: 400;
}

.contact-form .wpcf7-list-item {
	margin: 0;
}

.contact-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 0.2em;
}

.contact-form input.wpcf7-submit {
	min-height: 44px;
	padding: 0.85em 1.8em;
	border-radius: var(--radius);
	background: var(--color-accent-green-dark);
	color: var(--color-white);
	font-weight: 600;
	border: 0;
	cursor: pointer;
}

.contact-form input.wpcf7-submit:hover,
.contact-form input.wpcf7-submit:focus-visible {
	background: var(--color-dark);
}

.contact-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 0.85rem;
	margin-top: 0.3em;
	display: block;
}

.contact-form .wpcf7-response-output {
	margin-top: var(--space-sm);
	padding: 0.8em 1em;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
}

.contact-form-invalid .wpcf7-response-output {
	border-color: #b3261e;
	color: #b3261e;
}

.contact-form-sent .wpcf7-response-output {
	border-color: var(--color-accent-green-dark);
	color: var(--color-accent-green-dark);
}

/* =========================================================
   14. Footer
   ========================================================= */

.site-footer {
	background: var(--color-dark);
	color: var(--color-white);
	padding-block: var(--space-lg) var(--space-md);
}

.site-footer a {
	color: var(--color-white);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--color-primary-green);
}

.footer-columns {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 700px) {
	.footer-columns {
		grid-template-columns: repeat(3, 1fr);
	}
}

.footer-columns h2 {
	color: var(--color-white);
	font-size: 1.1rem;
	text-transform: uppercase;
}

.site-info {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-sm);
	margin-top: var(--space-lg);
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.8rem;
	opacity: 0.8;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: center;
}

.site-info a {
	text-decoration: underline;
}

.credit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	margin-left: auto;
}

.credit-link img {
	height: 28px;
	width: auto;
	display: block;
}

.credit-link:hover,
.credit-link:focus-visible {
	text-decoration: underline;
}

/* =========================================================
   15. Animazioni leggere allo scroll (solo se l'utente non
   ha chiesto di ridurle da sistema operativo)
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity var(--transition-slow), transform var(--transition-slow);
	}
	.reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================================
   16. Cookie banner
   ========================================================= */

.cookie-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--color-white);
	border-top: 3px solid var(--color-accent-green-dark);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
	padding: var(--space-md) var(--space-sm);
}

.cookie-banner[hidden] {
	display: none;
}

.cookie-banner__inner {
	max-width: var(--container-width);
	margin-inline: auto;
}

.cookie-banner p {
	margin: 0 0 var(--space-sm);
}

.cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.cookie-banner__actions .btn {
	flex: 1 1 auto;
}

.cookie-categories {
	display: grid;
	gap: var(--space-sm);
	margin: var(--space-sm) 0;
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

.cookie-categories[hidden] {
	display: none;
}

.cookie-category {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-sm);
}

.cookie-category__text strong {
	display: block;
}

.cookie-category__text span {
	font-size: 0.85rem;
	opacity: 0.8;
}

.cookie-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
	flex-shrink: 0;
}

.cookie-switch input {
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	position: absolute;
	cursor: pointer;
}

.cookie-switch__track {
	position: absolute;
	inset: 0;
	background: var(--color-border);
	border-radius: 999px;
	transition: background var(--transition-fast);
	pointer-events: none;
}

.cookie-switch__track::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	left: 3px;
	top: 3px;
	background: var(--color-white);
	border-radius: 50%;
	transition: transform var(--transition-fast);
}

.cookie-switch input:checked + .cookie-switch__track {
	background: var(--color-accent-green-dark);
}

.cookie-switch input:checked + .cookie-switch__track::before {
	transform: translateX(20px);
}

.cookie-switch input:focus-visible + .cookie-switch__track {
	outline: 3px solid var(--color-accent-green-dark);
	outline-offset: 2px;
}

.cookie-switch input:disabled + .cookie-switch__track {
	opacity: 0.6;
}

.cookie-preferences-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--color-white);
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.8rem;
	min-height: 44px;
}

/* =========================================================
   17. Utility WordPress core (allineamenti immagini/gallerie)
   ========================================================= */

.alignwide { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.alignfull { width: 100%; max-width: none; }
.alignleft { float: left; margin-right: var(--space-sm); }
.alignright { float: right; margin-left: var(--space-sm); }
.aligncenter { display: block; margin-inline: auto; }

.wp-caption-text,
figcaption {
	font-size: 0.85rem;
	color: var(--color-text);
	opacity: 0.75;
}

/* =========================================================
   18. Print (nascondi elementi non utili in stampa)
   ========================================================= */

@media print {
	.site-header,
	.site-footer,
	.cookie-banner,
	.skip-link {
		display: none;
	}
}