/*
Theme Name: Natural Beauty
Theme URI: https://example.com/natural-beauty
Author: Natural Beauty
Author URI: https://example.com
Description: Tema a blocchi (Full Site Editing) per centri estetici e wellness. Estetica minimale ed elegante, molta aria, fotografia protagonista, palette calda neutra con accento teal. Pronto per la traduzione, nessuna dipendenza da page builder o plugin.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: natural-beauty
Domain Path: /languages
Tags: full-site-editing, block-patterns, blog, one-column, two-columns, wide-blocks, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, template-editing, accessibility-ready
*/

/* Tutto il design vive in theme.json. Qui solo cio' che theme.json non copre. */

/* Accordion listino: riga cliccabile in stile editoriale. */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--tertiary);
}

/* Il carattere del titolo dell'accordion sta in theme.json, sul blocco
   core/details: cosi' e' ereditato dal summary e resta modificabile
   dall'editor. Qui solo cio' che riguarda il comportamento. */
.wp-block-details > summary {
	cursor: pointer;
	list-style: none;
	padding-inline-end: 2rem;
	position: relative;
}

/* Il contenuto dell'accordion torna al carattere del corpo testo: senza
   questo erediterebbe serif e maiuscolo dal titolo. Sono regole di classe,
   quindi qualsiasi scelta fatta nell'editor sulla lista ha comunque la
   precedenza. */
.wp-block-details > :not(summary) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: normal;
	line-height: 1.7;
	text-transform: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--accent);
	line-height: inherit;
}

/* Il "+" ruota di 45 gradi diventando una croce: un solo glifo, animabile.
   Senza animazioni (reduced motion) resta comunque uno stato visibile diverso. */
.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Righe listino: nome a sinistra, prezzo a destra, senza markup extra. */
.nb-listino ul {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
}

.nb-listino li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--tertiary);
}

.nb-listino li:last-child {
	border-bottom: 0;
}

/* Il prezzo e' l'ultima parola della riga, marcata con <strong> nel pattern.
   Colore e peso sono impostati qui: per cambiarli su una singola voce basta
   selezionare il testo nell'editor e usare il colore dalla barra strumenti,
   che vince su questa regola. Per cambiarli ovunque, modifica queste righe. */
.nb-listino li strong {
	font-weight: 400;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

/* Link del footer: colori dichiarati qui e non negli attributi del blocco.
   Con style.elements.link nel file della parte di template, l'editor si
   aspetta una classe wp-elements-<hash> che il markup statico non puo' avere,
   e segnala il gruppo come "contenuto inaspettato o non valido". */
footer.wp-block-template-part a:where(:not(.wp-element-button, .wp-social-link-anchor)) {
	color: var(--wp--preset--color--tertiary);
}

footer.wp-block-template-part a:where(:not(.wp-element-button, .wp-social-link-anchor)):hover,
footer.wp-block-template-part a:where(:not(.wp-element-button, .wp-social-link-anchor)):focus {
	color: var(--wp--preset--color--base);
}

/* Card servizi: l'immagine e' contenuta, cosi' lo zoom in hover non deborda. */
.nb-card figure {
	overflow: hidden;
}

/* ============================================================
   Carousel delle aree
   Scorrimento orizzontale nativo con scroll-snap: nessun JavaScript,
   nessuna libreria. Le schede restano blocchi normali, quindi si
   duplicano, riordinano ed eliminano dall'editor come tutto il resto.
   ============================================================ */

.nb-carousel {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	padding-bottom: 1rem;
	/* Le schede non si stringono: e' lo scorrimento a mostrare le altre. */
	align-items: stretch;
	scrollbar-color: var(--wp--preset--color--secondary) transparent;
	scrollbar-width: thin;
}

.nb-carousel > .nb-card {
	flex: 0 0 clamp(15rem, 74vw, 21rem);
	scroll-snap-align: start;
}

/* Nell'editor il contenitore non deve scorrere, altrimenti le schede fuori
   vista sono difficili da selezionare e riordinare. Il doppio selettore copre
   entrambi i modi in cui WordPress inietta questo file nell'editor: cosi'
   com'e', oppure con i selettori prefissati con la classe del wrapper. */
.editor-styles-wrapper .nb-carousel,
body.editor-styles-wrapper .nb-carousel {
	/* Shorthand: con overflow-y a hidden, un overflow-x "visible" da solo
	   verrebbe ricalcolato ad auto e il contenitore continuerebbe a scorrere. */
	overflow: visible;
	flex-wrap: wrap;
}

.editor-styles-wrapper .nb-carousel > .nb-card,
body.editor-styles-wrapper .nb-carousel > .nb-card {
	flex-basis: 16rem;
}

/* Indicatori di posizione generati dal browser (CSS carousel).
   Dove non sono supportati resta la barra di scorrimento, quindi la
   fascia si capisce comunque come scorrevole. */
@supports selector(::scroll-marker-group) {

	.nb-carousel {
		scroll-marker-group: after;
		scrollbar-width: none;
	}

	.nb-carousel::scroll-marker-group {
		display: flex;
		gap: 0.75rem;
		justify-content: center;
		padding-top: var(--wp--preset--spacing--50);
	}

	.nb-carousel > .nb-card::scroll-marker {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border: 1px solid var(--wp--preset--color--secondary);
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
	}

	.nb-carousel > .nb-card::scroll-marker:target-current {
		background: var(--wp--preset--color--accent);
		border-color: var(--wp--preset--color--accent);
	}

	.nb-carousel > .nb-card::scroll-marker:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 3px;
	}
}

/* ============================================================
   Header che resta in vista
   position: sticky nativo, nessun JavaScript. La barra si assottiglia
   quando si scorre, dove il browser supporta le timeline di scroll.
   ============================================================ */

/* La regola va sul contenitore della parte di template, non sul gruppo
   interno: un elemento sticky puo' muoversi solo dentro il proprio genitore,
   e il genitore del gruppo e' alto quanto il gruppo stesso, quindi
   scorrerebbe via insieme alla pagina senza mai agganciarsi. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* Con la barra di amministrazione visibile l'header va abbassato, altrimenti
   ci finisce sotto. */
body.admin-bar header.wp-block-template-part {
	top: 32px;
}

/* Fra 601 e 782px la barra e' ancora fissa, ma alta 46px invece di 32. */
@media (max-width: 782px) {

	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* Sotto i 600px WordPress smette di tenere fissa la barra: scorre via con la
   pagina. Lasciare qui uno scostamento significherebbe un header agganciato
   46px sotto il bordo, con il contenuto che scorre nella fessura. */
@media (max-width: 600px) {

	body.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

/* Header su schermi stretti: marchio e pulsante del menu devono stare sulla
   stessa riga. Con il titolo del sito a 1.5rem piu' il monogramma a 56px un
   nome lungo supera la larghezza disponibile e manda il pulsante a capo. */
@media (max-width: 600px) {

	.nb-header .wp-block-site-title {
		font-size: 1.05rem;
		letter-spacing: 0.12em;
	}
}

/* ============================================================
   Menu a comparsa su mobile
   Senza indicazioni il pannello di WordPress e' bianco e appoggia le voci
   sul bordo destro, ereditato dall'allineamento della barra desktop.
   ============================================================ */

/* Le voci ereditano l'allineamento a destra della barra desktop, che nel
   pannello a tutta pagina le ammucchia su un bordo. WordPress legge la
   posizione da questa variabile: va riscritta sia sul pannello, dove arriva
   per ereditarieta', sia sulla lista, dove la classe items-justified-right
   la imposta sull'elemento stesso e vincerebbe sull'ereditarieta'. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: center;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.125rem;
}

/* Nell'editor un header appiccicato copre i controlli del canvas. */
.editor-styles-wrapper header.wp-block-template-part,
body.editor-styles-wrapper header.wp-block-template-part {
	position: static;
}

/* ============================================================
   Indicatore di apertura
   Prodotto dallo shortcode [natural_beauty_apertura].
   ============================================================ */

.nb-apertura {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
}

.nb-apertura__pallino {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.nb-apertura.is-aperto {
	color: var(--wp--preset--color--accent);
}

.nb-apertura.is-chiuso {
	color: var(--wp--preset--color--secondary);
}

/* ============================================================
   Recensioni e galleria prima/dopo
   ============================================================ */

.nb-recensione p:first-child {
	text-wrap: pretty;
}

.nb-confronto__lato figure {
	overflow: hidden;
}

/* Le due immagini del confronto restano affiancate anche su schermo
   stretto: separarle su due righe renderebbe impossibile il paragone. */
.nb-confronto .wp-block-columns {
	flex-wrap: nowrap;
}

.nb-confronto .wp-block-column {
	flex-basis: 50%;
}

/* Focus visibile ovunque (accessibilita'). */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ============================================================
   Movimento
   Tutto in CSS, nessun JavaScript. Ogni animazione sta dentro
   prefers-reduced-motion: no-preference, quindi chi ha chiesto meno
   movimento vede il sito completamente statico. Le animazioni allo
   scroll sono dentro @supports: dove animation-timeline non esiste,
   il contenuto resta semplicemente visibile e fermo.
   Le regole sono escluse dall'editor (body.editor-styles-wrapper)
   per non far sembrare "rotto" il Site Editor durante le modifiche.
   ============================================================ */

:root {
	--nb-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--nb-dur-fast: 180ms;
	--nb-dur: 320ms;
	--nb-dur-slow: 700ms;
}

@media (prefers-reduced-motion: no-preference) {

	/* Stati: colore e sfondo cambiano con una rampa, non a scatto. */
	a,
	.wp-element-button,
	.wp-block-button__link {
		transition: background-color var(--nb-dur) var(--nb-ease), color var(--nb-dur) var(--nb-ease), border-color var(--nb-dur) var(--nb-ease);
	}

	/* Navigazione: filetto che cresce da sinistra. */
	.wp-block-navigation .wp-block-navigation-item__content {
		background-image: linear-gradient(currentColor, currentColor);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0 1px;
		transition: background-size var(--nb-dur) var(--nb-ease);
	}

	.wp-block-navigation .wp-block-navigation-item__content:hover,
	.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
		background-size: 100% 1px;
		text-decoration: none;
	}

	/* Carousel: il salto da una scheda all'altra e' morbido. */
	.nb-carousel {
		scroll-behavior: smooth;
	}

	/* Card servizi: l'immagine si avvicina appena al passaggio del mouse. */
	.nb-card figure img {
		transition: transform var(--nb-dur-slow) var(--nb-ease), opacity var(--nb-dur) var(--nb-ease);
	}

	.nb-card:hover figure img,
	.nb-card:focus-within figure img {
		transform: scale(1.04);
		opacity: 0.94;
	}

	/* Accordion del listino: il "+" ruota in croce invece di saltare. */
	.wp-block-details > summary::after {
		transition: transform var(--nb-dur) var(--nb-ease);
	}

	/* Header: si assottiglia scorrendo, con la timeline di scroll nativa.
	   Dove non e' supportata resta semplicemente fisso, senza salti. */
	@supports (animation-timeline: scroll()) {

		body:not(.editor-styles-wrapper) .nb-header {
			animation: nb-header-compatta linear both;
			animation-timeline: scroll();
			animation-range: 0 180px;
		}
	}

	/* Hero: avvicinamento lentissimo, percepibile solo dopo qualche secondo. */
	body:not(.editor-styles-wrapper) .wp-block-cover:first-of-type .wp-block-cover__image-background {
		animation: nb-hero-zoom 24s var(--nb-ease) forwards;
	}

	/* Comparsa delle sezioni allo scroll, con timeline nativa del browser. */
	@supports (animation-timeline: view()) {

		body:not(.editor-styles-wrapper) main > *:not(:first-child) {
			animation: nb-reveal linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 65%;
		}
	}

	/* Apertura fluida dell'accordion. Solo dove il browser sa animare
	   verso una dimensione automatica: altrove apre di scatto, come sempre. */
	@supports (interpolate-size: allow-keywords) {

		:root {
			interpolate-size: allow-keywords;
		}

		.wp-block-details::details-content {
			block-size: 0;
			overflow: hidden;
			transition: block-size var(--nb-dur) var(--nb-ease), content-visibility var(--nb-dur) var(--nb-ease) allow-discrete;
		}

		.wp-block-details[open]::details-content {
			block-size: auto;
		}
	}
}

@keyframes nb-header-compatta {

	from {
		padding-top: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--40);
		box-shadow: 0 0 0 rgba(20, 25, 26, 0);
	}

	to {
		padding-top: var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--30);
		box-shadow: 0 1px 12px rgba(20, 25, 26, 0.08);
	}
}

@keyframes nb-hero-zoom {

	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.06);
	}
}

@keyframes nb-reveal {

	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}