/* DocFoody — widget "Menu Dieta" (base condivisa con Panoramica). Restyle FEDELE v0.2.1.
 * I valori fedeli (claude design, palette azzurra) sono i FALLBACK nelle var(); i controlli Style
 * scrivono su {{WRAPPER}} <selettore> (specificità superiore) e restano OVERRIDE. Il foglio non
 * supera (0,2,0) e non usa !important. Accento: override editor -> categoria -> default brand. */

.df-menu-dieta {
	--df-accent: var( --df-accent-override, var( --df-accent-cat, #45A6BA ) );
	--df-font-head: 'Poppins', Montserrat, Arial, sans-serif;
	--df-font-body: 'Open Sans', Roboto, Helvetica, sans-serif;
	/* Card per riga di DEFAULT, responsive: 3 desktop / 1 mobile. Il controllo "Card per riga"
	 * setta --df-cards su {{WRAPPER}} (override). Consumato come fallback in .df-card. */
	--df-cards-default: 3;
	font-family: var( --df-font-body );
	color: #061F2A;
	/* Kill del flash colorato al tap su mobile (eredita sui discendenti). */
	-webkit-tap-highlight-color: transparent;
}

/* Testata dieta (titolo + descrizione) centrata. Default anti-CLS 6.5rem sull'INTRO (un solo
 * meccanismo, K2): il controllo "Altezza minima testata" scrive min-height sull'intro e fa OVERRIDE
 * di questo default. Nessun min-height sulla sola descrizione. */
.df-menu-dieta__intro {
	min-height: 6.5rem;
	text-align: center;
}

.df-menu-dieta__title {
	margin: 0 0 0.4em;
	font-family: var( --df-font-head );
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 1.2;
	color: var( --df-accent, #45A6BA );
}

.df-menu-dieta__desc {
	margin: 0 auto 1.2em;
	max-width: 70ch;
	color: #061F2A;
}

/* Heading "Menu …:" sopra il selettore: centrato, semibold, colore testo. */
.df-menu-dieta__menus-heading {
	margin: 0 0 0.8em;
	font-family: var( --df-font-head );
	font-weight: 600;
	font-size: 1.55rem;
	text-align: center;
	color: #061F2A;
}

/* Selettore menu: 4-up equi-larghezza, ultima riga incompleta CENTRATA. Il controllo "Colonne"
 * su {{WRAPPER}} (display:grid) sovrascrive. */
.df-menu-dieta__selector {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 1.2em;
}

.df-menu-btn {
	display: flex;
	/* base 25% (4-up), no grow: l'ultima riga incompleta resta centrata senza stirare le card. */
	flex: 0 1 calc( 25% - 8px );
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 12px 20px;
	/* FIX contrasto: card inattive con sfondo/bordo/testo a sufficiente contrasto (era #F1F5FB). */
	border: 1px solid var( --df-menu-border, #A6B9CB );
	border-radius: 0.5rem;
	background: var( --df-btn-inactive-bg, #BCCAD8 );
	color: var( --df-btn-text, #212529 );
	cursor: pointer;
	font-family: var( --df-font-head );
	font-weight: 600;
	text-align: left;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.df-menu-btn:hover {
	background: var( --df-accent );
	border-color: var( --df-accent );
	color: #fff;
}

.df-menu-btn.is-active {
	background: var( --df-btn-active-bg, var( --df-accent ) );
	border-color: var( --df-btn-active-bg, var( --df-accent ) );
	color: #fff;
}

.df-menu-btn__name {
	font-weight: 600;
}

.df-menu-btn__sub {
	font-size: 0.95rem;
	font-weight: 400;
	opacity: 0.85;
}

/* Pannelli menu */
.df-menu-panel {
	display: none;
	position: relative;
}

.df-menu-panel.is-active {
	display: block;
}

/* Carosello — CONTENUTO nel widget (niente full-bleed 100vw) */
.df-carousel {
	overflow: hidden;
}

.df-carousel__track {
	display: flex;
	gap: var( --df-gap, 16px );
	list-style: none;
	margin: 0;
	/* inset orizzontale simmetrico 6px; scroll-padding pari così lo snap NON mangia il lato sinistro */
	padding: 4px 6px;
	scroll-padding-inline: 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.df-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Card con overlay gradiente (label + nome sopra l'immagine) */
.df-card {
	/* N card piene per riga; default responsive via --df-cards-default (3 desktop / 1 mobile),
	 * il controllo --df-cards su {{WRAPPER}} ha la precedenza. Niente card tagliata (scroll-snap). */
	flex: 0 0 calc( ( 100% - ( var( --df-cards, var( --df-cards-default, 3 ) ) - 1 ) * var( --df-gap, 16px ) ) / var( --df-cards, var( --df-cards-default, 3 ) ) );
	scroll-snap-align: start;
}

/* Card cliccabile (M15): l'<a> avvolge il media, NON sostituisce nessun elemento — tutti i
 * selettori dei controlli Style usano il discendente (spazio) e non il figlio diretto, quindi
 * continuano a colpire lo stesso pezzo (verificato uno per uno su CSS e trait dei controlli).
 *
 * `display:block` serve: da inline, il .df-card__media con aspect-ratio non si dimensiona.
 * Colore e sottolineatura del tema si neutralizzano con la SPECIFICITÀ (0,2,0 batte lo `.elementor a`
 * a 0,1,1), mai con !important — è la stessa lezione di `.elementor img { height:auto }` che batteva
 * `.df-card__img`. */
.df-card .df-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Focus VISIBILE: una card cliccabile raggiungibile solo col mouse sarebbe un regresso rispetto a
 * una card non cliccabile. `:focus-visible` non disturba chi usa il puntatore.
 *
 * L'offset è NEGATIVO — il ring si disegna DENTRO il box del link — e la ragione è strutturale, non
 * una misura da far tornare: un ring esterno è ink overflow, e sopra la card ci sono DUE contenitori
 * che ritagliano (`.df-carousel { overflow:hidden }` e `.df-carousel__track { overflow-x:auto }`,
 * che per specifica rende `auto` anche l'asse Y). Con `outline-offset: 3px` servirebbero 6px di
 * spazio verticale e il track ne ha 4: due tagliati sopra e sotto.
 *
 * Tenerlo esterno significherebbe riservare ≥6px reali su ogni lato e sperare che nessuno ritocchi
 * più padding, gap o snap. Un ring interno non può essere ritagliato da nessun antenato, comunque
 * evolvano. Il vincolo è verificato da un assert che legge questi valori dal CSS: se qualcuno
 * rimette un offset positivo o riduce il padding del track, il test diventa rosso.
 *
 * `border-radius` allineato a quello del media, così il ring segue l'angolo dell'immagine. */
.df-card .df-card__link:focus-visible {
	outline: 3px solid var( --df-accent, #45A6BA );
	outline-offset: -3px;
	border-radius: var( --df-radius, 10px );
}

.df-card__media {
	position: relative;
	/* Default PORTRAIT 4/5 (meno estremo di 7/10 → meno crop laterale delle foto 600×400, K7);
	 * resta overridabile dal controllo "Proporzioni". */
	aspect-ratio: var( --df-card-aspect, 4 / 5 );
	background: #F1F5FB;
	border-radius: var( --df-radius, 10px );
	overflow: hidden;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.1 );
	transition: box-shadow 0.3s, transform 0.3s;
}

/* Selettore a 2 classi (0,2,0): DEVE battere la base Elementor `.elementor img { height:auto;
 * max-width:100% }` (0,1,1), altrimenti height diventa `auto` e l'img (replaced element) resta alla
 * sua altezza intrinseca landscape lasciando una fascia scura morta sotto. Niente !important (vietato).
 * Riempie il box .df-card__media (parent position:relative + aspect-ratio); cover+center croppano la
 * foto centrata; l'overlay (inset:0, DOPO l'img nel DOM) resta sopra. */
.df-card__media .df-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center; /* crop centrato delle foto landscape su card portrait (K7) */
	transition: transform 0.3s; /* zoom hover: scala SOLO l'immagine (la card resta fissa) */
}

.df-card__img.is-broken {
	visibility: hidden;
}

.df-card__overlay {
	position: absolute;
	inset: 0;
	display: var( --df-overlay-display, flex ); /* "nascondi etichette" => none */
	flex-direction: column;
	justify-content: flex-end;
	padding: 14px;
	/* Foto LIMPIDA in alto (~60%), fascia scura solo in basso dove c'è il testo (giorno/pasto + nome).
	 * --df-overlay resta lo stop scuro finale (100%) → il controllo "Colore overlay" pilota la darkness
	 * della fascia (override intatto, semantica var invariata). */
	background: linear-gradient( to bottom, transparent 0%, transparent 58%, rgba( 0, 0, 0, 0.45 ) 78%, var( --df-overlay, rgba( 0, 0, 0, 0.85 ) ) 100% );
	color: var( --df-card-text, #fff );
}

.df-card__slot {
	font-family: var( --df-font-head );
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.9;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 ); /* leggibilità anche su foto chiare */
}

.df-card__name {
	margin-top: 2px;
	font-family: var( --df-font-head );
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
	/* clamp 3 righe (nomi piatto lunghi non sforano l'overlay) */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Frecce carosello: nav-row centrata SOTTO la track (statiche, visibili anche su mobile) */
.df-carousel__nav-row {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 2rem;
}

.df-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	/* cerchio ~48px garantito: contenuto 1em (= icona via font-size) + padding (= anello). I controlli
	 * "Dimensione icona" (font-size) e "Padding (cerchio)" restano override. */
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: 14px;
	border: none;
	border-radius: 50%;
	background: var( --df-arrow-bg, var( --df-accent ) );
	color: #fff;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: background 0.3s;
}

/* Hover: azzurro chiaro (override col controllo "Frecce › Hover › Sfondo"). */
.df-carousel__nav:hover {
	background: #8FCAD7;
}

/* Wrapper glifo/icona freccia: centra e consente il nudge orizzontale (translateX) */
.df-nav-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translate( var( --df-nav-ix, 0 ), var( --df-nav-iy, 0 ) );
}

/* Icone freccia: glifo/eicon ereditano il font-size; l'SVG scala con esso (1em) */
.df-carousel__nav svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Riga CTA: centrata di default (override col controllo "CTA › Allineamento gruppo"). */
.df-cta-row {
	text-align: center;
}

/* CTA scura (blu brand), rettangolare 8px */
.df-menu-cta {
	display: inline-block;
	margin-top: 1.2em;
	padding: 12px 24px;
	border-radius: 8px;
	background: var( --df-cta-bg, #061F2A );
	color: var( --df-cta-text, #fff );
	font-family: var( --df-font-head );
	font-weight: 600;
	text-decoration: none;
	transition: background 0.3s;
}

.df-menu-cta:hover {
	background: #0D3140;
}

/* Notice (editor) */
.df-menu-notice {
	padding: 12px 16px;
	border: 1px dashed #bbb;
	border-radius: var( --df-radius, 10px );
	background: #F1F5FB;
	color: #666;
}

/* Focus da tastiera (a11y): anello blu brand. */
/* Il tema (reset.css di Hello Elementor) impone `button:focus { background-color:#c36 }` — un
 * magenta che al focus da tastiera copriva l'azzurro delle frecce. La nostra regola :focus-visible
 * qui sotto disegna l'outline ma NON toccava lo sfondo, quindi quella del tema restava.
 * Specificità 0,2,0 contro 0,1,1: vince senza !important. Vale su :focus e non solo su
 * :focus-visible, perché è :focus che il tema colpisce. */
.df-carousel__nav:focus,
.df-carousel__nav:focus-visible {
	background: var( --df-nav-bg, var( --df-accent, #45A6BA ) );
	color: #fff;
}

.df-menu-btn:focus-visible,
.df-carousel__nav:focus-visible,
.df-menu-cta:focus-visible {
	outline: 2px solid #061F2A;
	outline-offset: 3px;
}

/* Soppressione anello di focus-da-MOUSE (click): :focus-visible (tastiera) resta intatto sopra. */
.df-menu-btn:focus:not( :focus-visible ),
.df-carousel__nav:focus:not( :focus-visible ),
.df-menu-cta:focus:not( :focus-visible ) {
	outline: none;
}

/* Mobile: 1 card piatto per riga di default (peek dei vicini); selettore menu a 2 colonne.
 * Le frecce restano visibili (nav-row sotto la track). */
@media ( max-width: 767px ) {
	.df-menu-dieta {
		--df-cards-default: 1;
	}

	.df-menu-btn {
		flex-basis: calc( 50% - 5px );
	}
}

/* ------------------------------------------------------------------ *
 * Contorni della dieta (M15) — GRIGLIA, non carosello.
 *
 * I contorni di una dieta sono 6-11 e non hanno un ordine temporale: lo stesso contorno torna in
 * più pasti, quindi non c'è un giorno da mostrare né una sequenza da scorrere. Una griglia li
 * mostra tutti insieme e non ha bisogno di JS — nessuno script in più su ogni pagina dieta.
 *
 * Riusa .df-card e le SUE variabili (--df-cards, --df-gap): così i controlli "Card per riga" e
 * "Spazio tra le card" valgono identici nei due widget. Il `flex` dichiarato su .df-card viene
 * ignorato dentro un grid container — è grid-template-columns a decidere — quindi la card non va
 * duplicata né sovrascritta.
 * ------------------------------------------------------------------ */
.df-contorni__grid {
	display: grid;
	grid-template-columns: repeat( var( --df-cards, var( --df-cards-default, 3 ) ), minmax( 0, 1fr ) );
	gap: var( --df-gap, 16px );
	list-style: none;
	margin: 0;
	/* Stesso inset del track del carosello: l'anello di focus interno alle card ha bisogno dello
	 * stesso respiro, e due valori diversi darebbero due allineamenti diversi a parità di controlli. */
	padding: 4px 6px;
}

.df-contorni__heading {
	margin: 0 0 12px;
}

/* Mobile: DUE colonne, non una. A differenza del carosello — dove una card piena per volta è il
 * senso stesso dello scorrimento — qui una sola colonna produrrebbe una lista verticale lunga
 * quanto tutta la pagina, e i contorni sono un repertorio da scorrere con l'occhio, non un percorso. */
@media ( max-width: 767px ) {
	.df-contorni {
		--df-cards-default: 2;
	}
}