/*
Theme Name: KreativeBox
Theme URI: https://kreativebox.com
Author: KreativeBox – Julian Lamko
Author URI: https://kreativebox.com
Description: Tema a blocchi di KreativeBox. Un design system con sei direzioni stilistiche (Galleria, Notte, Carta, Oliva, Solare, Vivace), sezioni pronte, font ospitati in locale e nessuna dipendenza da page builder.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kreativebox
Tags: full-site-editing, block-patterns, block-styles, style-variations, custom-colors, editor-style, wide-blocks
*/

/*
 * Regole di base comuni a tutte le direzioni.
 * Colori, font e misure arrivano dai token di theme.json (--wp--preset--*, --wp--custom--*),
 * quindi cambiano da soli con la variante attiva.
 * Le varianti in /styles aggiungono solo le proprie eccezioni.
 * Questo file viene caricato PRIMA degli stili globali, così le varianti possono sovrascriverlo.
 */

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
p, li, dd { max-width: var(--wp--custom--measure); }
.has-text-align-center p,
p.has-text-align-center { margin-inline: auto; }

a {
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
	transition: color var(--wp--custom--transition);
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

/* ---------- Accessibilità ---------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

img { height: auto; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Stili dei blocchi KreativeBox ---------- */

/* Etichetta: piccola, maiuscola e spaziata (dipende dalla direzione) */
:is(.kb-label, .is-style-kb-label) {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: var(--wp--custom--text-transform--label);
	color: var(--wp--preset--color--muted);
}

/* Display: il titolo gigante dei riferimenti */
:is(.kb-display, .is-style-kb-display) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: var(--wp--custom--font-weight--display);
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
	text-transform: var(--wp--custom--text-transform--display);
}

/* Numero grande */
:is(.kb-number, .is-style-kb-number) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: var(--wp--custom--font-weight--display);
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
}

/* Link con freccia */
:is(.kb-arrow, .is-style-kb-arrow) a,
a:is(.kb-arrow, .is-style-kb-arrow) {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-weight: 500;
	text-decoration: underline;
}
:is(.kb-arrow, .is-style-kb-arrow) a::after,
a:is(.kb-arrow, .is-style-kb-arrow)::after {
	content: "\2192";
	display: inline-grid;
	place-items: center;
	width: 1.9em;
	height: 1.3em;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-size: .8em;
	line-height: 1;
	text-decoration: none;
	transition: transform var(--wp--custom--transition);
}
:is(.kb-arrow, .is-style-kb-arrow) a:hover::after,
a:is(.kb-arrow, .is-style-kb-arrow):hover::after { transform: translateX(.2em); }

/* Pillola */
:is(.kb-tag, .is-style-kb-tag) {
	display: inline-block;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: .35em 1em;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
}

/* Maiolica: motivo decorativo in CSS, nei colori della direzione */
:is(.kb-maiolica, .is-style-kb-maiolica) {
	min-height: 8rem;
	background:
		radial-gradient(circle at 50% 50%, var(--wp--preset--color--highlight, var(--wp--preset--color--muted)) 0 16%, transparent 16.5%),
		radial-gradient(circle at 0 0, var(--wp--preset--color--accent) 0 22%, transparent 22.5%),
		radial-gradient(circle at 100% 0, var(--wp--preset--color--accent) 0 22%, transparent 22.5%),
		radial-gradient(circle at 0 100%, var(--wp--preset--color--accent) 0 22%, transparent 22.5%),
		radial-gradient(circle at 100% 100%, var(--wp--preset--color--accent) 0 22%, transparent 22.5%),
		conic-gradient(from 45deg at 50% 50%, var(--wp--preset--color--base) 0 25%, var(--wp--preset--color--surface) 0 50%, var(--wp--preset--color--base) 0 75%, var(--wp--preset--color--surface) 0);
	background-size: clamp(48px, 8vw, 96px) clamp(48px, 8vw, 96px);
}

/* Foto più bassa su mobile (3:2): il testo arriva prima quando le colonne si impilano */
@media (max-width: 781px) {
	.kb-foto-bassa-mobile img { aspect-ratio: 3 / 2 !important; }
}

/* ---------- Domande frequenti (blocchi Dettagli dentro .kb-faq) ---------- */
.kb-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--30);
	margin: 0;
}
.kb-faq .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.kb-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--l);
	font-weight: var(--wp--custom--font-weight--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	line-height: var(--wp--custom--line-height--heading);
}
.kb-faq summary::-webkit-details-marker { display: none; }
.kb-faq summary::after {
	content: "+";
	flex: none;
	font-weight: 300;
	line-height: 1;
	transition: transform var(--wp--custom--transition);
}
.kb-faq details[open] > summary::after { transform: rotate(45deg); }
.kb-faq .wp-block-details > :not(summary) {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

/* ---------- Galleria (griglia dentro .kb-galleria) ---------- */
/* La prima foto occupa 2 colonne e 2 righe; le altre riempiono la propria cella. */
.kb-galleria .wp-block-image { margin: 0; height: 100%; }
.kb-galleria .wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.kb-galleria .wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
.kb-galleria .wp-block-image:first-child img { aspect-ratio: auto; }

/* ---------- Menu a comparsa su mobile ---------- */
/* Stessi margini laterali delle sezioni, voci allineate a sinistra e grandi come titoli. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	line-height: var(--wp--custom--line-height--heading);
}

/* ---------- Template "Pagina di testo" (privacy, cookie, testi lunghi) ---------- */
/* Titoli interni più piccoli del titolo pagina e più aria prima di ogni titolo. */
.page-template-page-testo .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--xl);
	margin-block-start: var(--wp--preset--spacing--50);
}
.page-template-page-testo .wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--l);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Numeri: colonne che si adattano al numero di voci ---------- */
/* auto-fit invece di auto-fill: con 3 numeri le colonne si allargano, senza una colonna vuota. */
.kb-numeri-griglia.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)) !important;
}

/* ---------- Titolo Display lungo (classe aggiunta da functions.php) ---------- */
/* Oltre 30 caratteri: misura "Titolo 1"; oltre 55: misura "Titolo 2". */
.is-style-kb-display.kb-display-lungo { font-size: var(--wp--preset--font-size--xxxl); }
.is-style-kb-display.kb-display-lunghissimo { font-size: var(--wp--preset--font-size--xxl); }

/* ---------- Come lavoriamo: passaggi numerati in automatico ---------- */
/* Il numero (01, 02…) lo genera il CSS: aggiungendo, togliendo o spostando un passaggio si rinumera da solo. */
.kb-passi { counter-reset: kb-passo; }
.kb-passi.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)) !important;
}
.kb-passi > .wp-block-group { counter-increment: kb-passo; }
.kb-passi > .wp-block-group::before {
	content: counter(kb-passo, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--heading);
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
	color: var(--wp--preset--color--muted);
}