/*
Theme Name: Saponi di Giada
Theme URI: https://saponidigiada.eu/
Description: Tema su misura per il sito di presentazione di Saponi di Giada.
Version: 2.1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: saponi-di-giada
*/

/*
 * Sistema visivo.
 * Funzione: racconto a fasce alternate, griglia a 12 colonne larga 1160px.
 * Percezione: bottega artigiana mantovana. Arco rinascimentale per le immagini, foglie d'olivo
 * come trama, profilo di Mantova come chiusura di ogni pagina.
 * Colore: Sapone e Giada dominanti, Olio e Loto come accenti.
 * Ritmo: multipli di 8px. Raggi: 4px per i controlli, 8px per le schede.
 */

/* ---------- Base ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.has-grande-font-size { line-height: 1.45; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(a, button, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* Fasce scure: titoli e link chiari. */
:is(.has-giada-background-color, .has-inchiostro-background-color) :is(h1, h2, h3, h4) { color: var(--wp--preset--color--sapone); }
:is(.has-giada-background-color, .has-inchiostro-background-color) a:not(.wp-element-button) { color: inherit; }

.sdg-occhiello {
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olio-scuro);
	margin-bottom: .75rem !important;
}
:is(.has-giada-background-color, .has-inchiostro-background-color) .sdg-occhiello { color: var(--wp--preset--color--giada-chiara); }
.sdg-occhiello + * { margin-top: 0 !important; }

/* Dati da inserire: ben visibili, così non vengono pubblicati per errore. */
.sdg-da-completare { background: #F6E9C4; color: #4F3F0B; padding: 0 .25em; border-radius: 4px; font-size: .875em; }

/* ---------- Testata ---------- */
header.wp-block-template-part { display: contents; }
.sdg-avviso-alto { font-size: .9375rem; text-align: center; padding: .5rem 1.25rem; }
.sdg-avviso-alto p { margin: 0; }
.sdg-testata {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
	background: var(--wp--preset--color--sapone);
	box-shadow: 0 1px 0 var(--wp--preset--color--linea);
}
.sdg-logo img { display: block; height: auto; }
.sdg-testata a.wp-block-navigation-item__content { font-size: 1.0625rem; transition: color 150ms ease-out; text-underline-offset: 6px; }
.sdg-testata a.wp-block-navigation-item__content:hover { color: var(--wp--preset--color--giada); text-decoration: underline; }
.sdg-testata .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem); }
.sdg-testata .is-menu-open a.wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--titoli); font-size: 1.75rem; }

/* ---------- Pulsanti e link ---------- */
.wp-element-button { transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
.wp-block-button__link:hover { background-color: var(--wp--preset--color--inchiostro); color: var(--wp--preset--color--sapone); }
.wp-block-button__link.has-sapone-background-color:hover { background-color: var(--wp--preset--color--giada-chiara); color: var(--wp--preset--color--inchiostro); }
.wp-block-buttons { gap: .75rem; margin-top: 2rem; }
.is-style-outline .wp-block-button__link { background: transparent; color: inherit; border: 1px solid currentColor; padding: calc(.65em - 1px) calc(1.25em - 1px); }
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--sapone); color: var(--wp--preset--color--giada); border-color: var(--wp--preset--color--sapone); }
.sdg-freccia a { font-weight: 700; text-decoration: none; }
.sdg-freccia a::after { content: "\2192"; display: inline-block; margin-left: .4em; transition: transform 150ms ease-out; }
.sdg-freccia a:hover { text-decoration: underline; }
.sdg-freccia a:hover::after { transform: translateX(4px); }

/* ---------- Trame e immagini ---------- */
.sdg-motivo { background-image: url("assets/img/motivo-foglie.svg"); background-size: 240px; }

/* L'arco rinascimentale: incornicia illustrazioni e, domani, le foto di Giada. */
.sdg-arco { margin: 0; }
.sdg-arco img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--wp--preset--color--giada-chiara);
	border-radius: 999px 999px 8px 8px;
}
.sdg-arco figcaption { margin-top: .75rem; text-align: left; font-size: .9375rem; }
.has-giada-chiara-background-color .sdg-arco img { background: var(--wp--preset--color--sapone); }

/* ---------- Griglie ---------- */
:is(.sdg-griglia, .sdg-due, .sdg-anatomia, .sdg-anatomia__lato, .sdg-linea, .sdg-testa-riga, .sdg-cta) > * { margin-block: 0; min-width: 0; }
.sdg-griglia { display: grid; gap: 2.5rem; margin-top: 3rem !important; }
.sdg-griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sdg-griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdg-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 5rem); }
.sdg-due--centro { align-items: center; }
.sdg-due--storia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.sdg-due--faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sdg-due--rovescio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sdg-due--rovescio > :first-child { order: 2; }
.sdg-testa-riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.sdg-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; }
.sdg-cta .wp-block-buttons { margin-top: 0; }
.sdg-centro { display: flex; justify-content: center; }
.sdg-intestazione-centro { text-align: center; }

/* ---------- Home ---------- */
.sdg-hero { position: relative; z-index: 2; overflow: visible; }
.sdg-hero__img { margin: 0; }
.sdg-hero__img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(8, 30, 25, .25)); }

.sdg-nastro { overflow: hidden; padding-block: .75rem; position: relative; z-index: 1; margin-block: 0 !important; }
.sdg-nastro p { margin: 0; display: flex; width: max-content; font-family: var(--wp--preset--font-family--titoli); font-size: 1.25rem; white-space: pre; animation: sdg-nastro 48s linear infinite; }
.sdg-nastro:hover p { animation-play-state: paused; }
@keyframes sdg-nastro { to { transform: translateX(-50%); } }

.sdg-icona { margin: 0 0 1rem; }
.sdg-icona img { width: 64px; height: 64px; display: block; }
.sdg-promessa h3, .sdg-nota h3 { margin-top: 0; margin-bottom: .5rem; }
.sdg-promessa p, .sdg-nota p { margin-top: 0; }
.sdg-nota > * + * { margin-block-start: 0; }
.sdg-nota--filetto { border-top: 1px solid currentColor; padding-top: 1.25rem; }
.has-giada-background-color .sdg-nota--filetto { border-top-color: rgba(238, 240, 223, .45); }

.sdg-citazione {
	font-family: var(--wp--preset--font-family--titoli);
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--giada);
	text-wrap: balance;
}

/* Linea del tempo: tappe vere, in ordine. */
.sdg-linea { counter-reset: tappa; display: grid; gap: 1.5rem; margin-block: 2rem !important; }
.sdg-tappa { counter-increment: tappa; position: relative; padding-left: 3.25rem; }
.sdg-tappa > * { margin-block: 0 .25rem; }
.sdg-tappa h3 { font-size: 1.25rem; }
.sdg-tappa::before {
	content: counter(tappa);
	position: absolute; left: 0; top: 0;
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--giada);
	color: var(--wp--preset--color--sapone);
	font-family: var(--wp--preset--font-family--titoli);
}
.sdg-tappa:not(:last-child)::after {
	content: ""; position: absolute; left: calc(1.125rem - .5px); top: 2.5rem; bottom: -1.25rem;
	width: 1px; background: var(--wp--preset--color--giada);
}

/* Anatomia della saponetta. */
.sdg-anatomia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 2rem !important; }
.sdg-anatomia__lato { display: grid; gap: 2.5rem; }
.sdg-anatomia__img { margin: 0; }
.sdg-anatomia__img img { display: block; width: 100%; height: auto; }
.sdg-anatomia + .sdg-centro { margin-top: 1rem; }
.sdg-centro .wp-block-buttons { margin-top: 0; }

/* Passaggi numerati. */
.sdg-passi { counter-reset: passo; }
.sdg-passo-card { counter-increment: passo; }
.sdg-passo-card > * + * { margin-block-start: 0; }
.sdg-passo-card h3 { margin: 1.25rem 0 .25rem; }
.sdg-passo-card h3::before { content: counter(passo) ". "; color: var(--wp--preset--color--olio-scuro); }
.sdg-passo-card p { margin: 0; }

/* Domande frequenti. */
.sdg-faq > * + * { margin-block-start: 0; }
.wp-block-details { border-top: 1px solid var(--wp--preset--color--linea); padding-block: 1.125rem; }
.wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--linea); }
.wp-block-details summary { cursor: pointer; font-family: var(--wp--preset--font-family--titoli); font-size: 1.375rem; line-height: 1.25; color: var(--wp--preset--color--giada); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; flex: none; transition: transform 150ms ease-out; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details p { margin-top: .75rem; }

/* Pagine illustrate. */
.sdg-pagina-hero__img { margin: 0; }
.sdg-pagina-hero__img img { display: block; width: 100%; height: auto; }
.sdg-pagina-hero .sdg-arco { max-width: 400px; justify-self: end; width: 100%; }
.sdg-avviso { background: var(--wp--preset--color--sapone-scuro); border-radius: 8px; padding: 1.5rem 2rem; }
.sdg-avviso h3 { margin-top: 0; }
.sdg-avviso > * + * { margin-block-start: .5rem; }

/* Pagine di testo, come la privacy. */
.sdg-testo h2 { margin-top: 3rem; }
.sdg-testo h3 { margin-top: 2.5rem; }
.sdg-testo ul.wp-block-list { list-style: none; padding-left: 0; display: grid; gap: .75rem; }
.sdg-testo ul.wp-block-list > li { position: relative; padding-left: 1.5rem; }
.sdg-testo ul.wp-block-list > li::before {
	content: ""; position: absolute; left: 0; top: .45em; width: .625em; height: .8em;
	background: var(--wp--preset--color--giada);
	-webkit-mask: url("assets/img/icona-goccia.svg") center / contain no-repeat;
	mask: url("assets/img/icona-goccia.svg") center / contain no-repeat;
}

/* Tabelle solo con filetti orizzontali. */
.wp-block-table table { border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { text-align: left; vertical-align: top; border-width: 0 0 1px; border-style: solid; border-color: var(--wp--preset--color--linea); padding: .875rem 1rem .875rem 0; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-table thead th { border-bottom: 2px solid var(--wp--preset--color--inchiostro); font-size: 1rem; }
.wp-block-table tbody th { width: 38%; }
.has-giada-chiara-background-color .wp-block-table :is(td, th) { border-color: rgba(22, 48, 42, .3); }

/* ---------- Piè di pagina ---------- */
.sdg-profilo { margin: 0 !important; }
.sdg-profilo img { display: block; width: 100%; height: clamp(180px, 27vw, 430px); object-fit: cover; object-position: center bottom; }
.sdg-piede-griglia { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.sdg-piede-griglia > * { margin-block: 0; min-width: 0; }
.sdg-piede-griglia > * > * + * { margin-block-start: .5rem; }
.sdg-piede-frase { font-family: var(--wp--preset--font-family--titoli); font-size: 1.5rem; line-height: 1.25; margin-top: 1.25rem !important; max-width: 22ch; }
.sdg-piede-titolo { font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--giada-chiara); }
.sdg-piede-legale { border-top: 1px solid rgba(238, 240, 223, .3); padding-top: 1rem; margin-top: 2.5rem !important; }

/* ---------- Movimento ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		:is(.sdg-griglia, .sdg-anatomia, .sdg-linea) > * {
			animation: sdg-sale linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}
	}
}
@keyframes sdg-sale { from { opacity: .2; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
	.sdg-nastro p { animation: none; }
}

/* ---------- Schermi piccoli ---------- */
@media (min-width: 900px) {
	.sdg-hero__img img { transform: translateY(calc(var(--wp--preset--spacing--60) + 1.5rem)); margin-top: calc(-1 * var(--wp--preset--spacing--40)); }
}
@media (max-width: 900px) {
	.sdg-griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sdg-griglia-3, .sdg-due, .sdg-due--storia, .sdg-due--faq, .sdg-due--rovescio { grid-template-columns: minmax(0, 1fr); }
	.sdg-due--rovescio > :first-child { order: 0; }
	.sdg-anatomia { grid-template-columns: minmax(0, 1fr); }
	.sdg-anatomia__img { order: -1; }
	.sdg-due .sdg-arco, .sdg-griglia-3 .sdg-arco { max-width: 340px; justify-self: start; }
	.sdg-pagina-hero .sdg-arco { max-width: 240px; justify-self: start; }
	.sdg-piede-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sdg-piede-griglia > :first-child { grid-column: 1 / -1; }
	.sdg-intestazione-centro { text-align: left; }
	.sdg-centro { justify-content: flex-start; }
}
@media (max-width: 520px) {
	.sdg-griglia-4 { gap: 2rem 1.25rem; }
	.sdg-griglia-4:not(.sdg-passi) { grid-template-columns: minmax(0, 1fr); }
	.wp-block-table td, .wp-block-table th { padding-right: .5rem; }
	.sdg-cta { flex-direction: column; align-items: flex-start; }
	.wp-block-details summary { font-size: 1.25rem; }
}