/* Trucioli Pinocchio: stili aggiuntivi a theme.json */

/* --- Tinte (cambiano con la sezione in vista) --- */
:root {
	--tint-bg: #f4efe6;
	--tint-fg: #1b2233;
	--tint-link: #a8331f;
	--btn-bg: #a8331f;
	--btn-fg: #f4efe6;
	--tint-line: rgba(27, 34, 51, 0.2);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-tint="ebano"]     { --tint-bg: #1a1614; --tint-fg: #f4efe6; --tint-link: #f4efe6; --btn-bg: #f4efe6; --btn-fg: #1a1614; --tint-line: rgba(244, 239, 230, 0.28); }
html[data-tint="resina"]    { --tint-bg: #1f3a5f; --tint-fg: #f4efe6; --tint-link: #f4efe6; --btn-bg: #f4efe6; --btn-fg: #1f3a5f; --tint-line: rgba(244, 239, 230, 0.28); }
html[data-tint="tamarindo"] { --tint-bg: #7a4a24; --tint-fg: #f4efe6; --tint-link: #f4efe6; --btn-bg: #f4efe6; --btn-fg: #7a4a24; --tint-line: rgba(244, 239, 230, 0.28); }
html[data-tint="amaranto"]  { --tint-bg: #5b2a4a; --tint-fg: #f4efe6; --tint-link: #f4efe6; --btn-bg: #f4efe6; --btn-fg: #5b2a4a; --tint-line: rgba(244, 239, 230, 0.28); }
html[data-tint="redheart"]  { --tint-bg: #8e2a1e; --tint-fg: #f4efe6; --tint-link: #f4efe6; --btn-bg: #f4efe6; --btn-fg: #8e2a1e; --tint-line: rgba(244, 239, 230, 0.28); }
html[data-tint="paulonia"]  { --tint-bg: #d9c7a3; --tint-fg: #1b2233; --tint-link: #1b2233; --btn-bg: #1b2233; --btn-fg: #d9c7a3; --tint-line: rgba(27, 34, 51, 0.25); }
html[data-tint="fumo-rosa"] { --tint-bg: #e9c9cc; --tint-fg: #1b2233; --tint-link: #1b2233; --btn-bg: #1b2233; --btn-fg: #e9c9cc; --tint-line: rgba(27, 34, 51, 0.25); }

html body {
	background-color: var(--tint-bg);
	color: var(--tint-fg);
}
html.js body {
	transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

/* --- Link, pulsanti, focus --- */
:root a:not(.wp-element-button) {
	color: var(--tint-link);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
:root a:not(.wp-element-button):hover {
	text-decoration-thickness: 2px;
}
:root :focus-visible {
	outline: 2px solid var(--tint-link);
	outline-offset: 3px;
}
:root .wp-block-button .wp-block-button__link {
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-bg);
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
:root .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--tint-fg);
	border-color: currentColor;
}
@media (hover: hover) {
	:root .wp-block-button .wp-block-button__link:hover {
		background-color: var(--tint-fg);
		color: var(--tint-bg);
		border-color: var(--tint-fg);
	}
}

/* --- Header --- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}
.site-header {
	background-color: var(--tint-bg);
	padding: 0.6rem clamp(1rem, 4vw, 2rem);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--tint-line); }
.site-header .site-brand { gap: 0.75rem; }
.site-header .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.25rem; }
.site-header .wp-block-site-title a { color: var(--tint-fg); text-decoration: none; }
/* Se c'è il logo, il titolo resta solo per i lettori di schermo */
.site-brand:has(.wp-block-site-logo img) .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.site-header .wp-block-navigation a { color: var(--tint-fg); text-decoration: none; }
.site-header .wp-block-navigation .wp-block-navigation-item a { min-height: 44px; display: inline-flex; align-items: center; }
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close { min-width: 48px; min-height: 48px; color: var(--tint-fg); }
.wp-block-navigation__responsive-container.is-menu-open { font-size: var(--wp--preset--font-size--large); }
.wp-block-navigation__responsive-container.is-menu-open a { color: #f4efe6; }

/* --- Sezioni --- */
.section {
	padding: var(--wp--preset--spacing--70) clamp(1rem, 4vw, 2rem);
}
.section > * { margin-left: auto; margin-right: auto; }
.measure { max-width: 44rem; }
.section .measure,
.section .mat-pezzi { margin-left: max(0px, calc((100% - 78rem) / 2)); margin-right: auto; }
.site-main { padding: 0; }
.page-wrap { padding: var(--wp--preset--spacing--60) clamp(1rem, 4vw, 2rem); }

/* --- Hero --- */
.hero { padding-top: clamp(2.5rem, 7vw, 5rem); }
.hero-title { max-width: 13ch; margin: 0; }
.hero-lead { margin-top: 0; }
.hero-cols { gap: clamp(1.5rem, 4vw, 4rem); }
.hero-feature .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.hero-feature .wp-block-post-featured-image { margin: 0 0 0.75rem; }
.hero-feature .wp-block-post-title { margin: 0; font-size: 1.125rem; }
.hero-feature .wp-block-post-title a { text-decoration: none; color: inherit; }
.pen-stroke {
	display: block;
	width: min(100%, 32rem);
	height: auto;
	margin: 1rem 0 1.5rem;
	color: #c8412b;
	overflow: visible;
}
.pen-stroke path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js .pen-stroke path { stroke-dashoffset: 1; }
html.js .pen-stroke.is-in path { animation: pen-draw 2.2s var(--ease) 0.15s forwards; }
@keyframes pen-draw { to { stroke-dashoffset: 0; } }

/* --- Comparsa (sicura: se il JS non parte, dopo 3 secondi si vede comunque) --- */
html.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal:not(.is-in) { animation: reveal-fallback 0s linear 3s forwards; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

/* --- Materiali --- */
.materiale { padding-block: clamp(4rem, 14vh, 8rem); }
.mat-pezzi { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; max-width: 44rem; }
.mat-pezzi li { margin: 0; }
.mat-pezzi a { display: block; overflow: hidden; }
.mat-pezzi img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Galleria (griglia a 2 colonne su telefono) --- */
.wp-block-post-template.galleria-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-post-template.galleria-grid > li { margin: 0; }
.galleria-grid .wp-block-post-featured-image { margin: 0 0 0.6rem; overflow: hidden; background-color: var(--tint-line); }
.galleria-grid .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; }
.galleria-grid .wp-block-post-title { margin: 0; font-size: 1.125rem; line-height: 1.25; }
:root .galleria-grid .wp-block-post-title a,
:root .galleria-grid .wp-block-post-terms a { color: inherit; text-decoration: none; }
.galleria-grid .wp-block-post-terms { margin: 0.2rem 0 0; font-size: 1rem; }
@media (min-width: 782px) {
	.wp-block-post-template.galleria-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}
@media (min-width: 1200px) {
	.archivio .wp-block-post-template.galleria-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (hover: hover) {
	.galleria-grid .wp-block-post-featured-image img { transition: transform 0.6s var(--ease); }
	.galleria-grid > li:hover .wp-block-post-featured-image img { transform: scale(1.03); }
}
.filtri-box { margin: 0 0 2.5rem; display: grid; gap: 0.5rem; }
.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin: 0; }
.filtri-label { font-size: 1rem; color: inherit; opacity: 0.75; margin-right: 0.25rem; }
.filtri.filtri-mat a { font-weight: 400; }
.filtri a[aria-current="page"] { text-decoration-thickness: 3px; }
@media (max-width: 781px) {
	.filtri-mat { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem)); padding-inline: clamp(1rem, 4vw, 2rem); }
}
.filtri a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* --- Video (si carica solo al tocco) --- */
.video-facade { background-color: #14110f; color: #f4efe6; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; text-align: center; }
.video-facade iframe { width: 100%; height: 100%; border: 0; }
.video-facade__btn { min-height: 48px; padding: 0.6rem 1.5rem; background: #f4efe6; color: #14110f; border: 0; border-radius: 2px; font: inherit; font-weight: 600; cursor: pointer; }
.video-facade__note { margin: 0; font-size: 1rem; }

/* --- Passi "su misura" --- */
.passi { gap: 2rem; }
.passi h3 { margin-top: 0; }

/* --- Scheda di una realizzazione --- */
.scheda { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.scheda > * { margin: 0; }
@media (min-width: 900px) {
	.scheda { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
	.scheda .scheda-foto { position: sticky; top: 6rem; }
}
.scheda .wp-block-post-featured-image { margin: 0; }
.scheda .wp-block-gallery { margin-top: 2rem; }
.scheda .wp-block-post-terms { margin: 0; font-weight: 600; }

/* --- Dati della scheda --- */
.scheda-dati { list-style: none; padding: 0; margin: 1.5rem 0; border-top: 1px solid var(--tint-line); }
.scheda-dati li { padding: 0.6rem 0; border-bottom: 1px solid var(--tint-line); }
.scheda .wp-block-shortcode, .scheda .wp-block-buttons { margin-top: 2rem; }
.scheda .wp-block-gallery { gap: 0.5rem; }

/* --- News --- */
.wp-block-post-template.news-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; }
.wp-block-post-template.news-lista > li { margin: 0; border-top: 1px solid var(--tint-line); padding-top: 1.25rem; }
@media (min-width: 782px) { .wp-block-post-template.news-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.news-lista .wp-block-post-title { margin: 0.25rem 0 0.5rem; }
:root .news-lista .wp-block-post-title a { color: inherit; text-decoration: none; }

/* --- Paginazione --- */
.wp-block-query-pagination { margin-top: 3rem; gap: 1rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* --- Numeri dei passi --- */
.passo-num { font-family: var(--wp--preset--font-family--fraunces); font-size: 3rem; line-height: 1; margin: 0 0 0.5rem; color: #c8412b; }

/* --- Footer (sempre scuro) --- */
.site-footer {
	background-color: #14110f;
	color: #f4efe6;
	padding: var(--wp--preset--spacing--60) clamp(1rem, 4vw, 2rem);
}
:root .site-footer a:not(.wp-element-button) { color: #f4efe6; }
.site-footer p { margin: 0; }
.site-footer .footer-cols { gap: 2rem; }

/* --- Movimento ridotto --- */
@media (prefers-reduced-motion: reduce) {
	html.js body { transition: none; }
	html.js .reveal { opacity: 1; transform: none; transition: none; animation: none; }
	html.js .pen-stroke path,
	html.js .pen-stroke.is-in path { stroke-dashoffset: 0; animation: none; }
	.galleria-grid .wp-block-post-featured-image img { transition: none; }
	.galleria-grid > li:hover .wp-block-post-featured-image img { transform: none; }
}