/*
Theme Name: Vince Binasco
Theme URI: https://vincebinasco.it
Description: Tema figlio di Twenty Twenty-Five per l'Associazione civica Vince Binasco. Palette, caratteri e stili dal brand kit (IDENTITA_VISIVA_v1_2026-09-04) e dal mockup v6. Caratteri in locale, nessuna risorsa esterna.
Author: Associazione Vince Binasco
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vincebinasco
*/

/* ------------------------------------------------------------------
   Nomi leggibili per i colori del brand.
   In theme.json i colori usano gli slug di Twenty Twenty-Five
   (così il tema padre non si rompe), ma nell'editor compaiono
   con il nome del brand:
     base = Blu Binasco      contrast = Bianco
     accent-1 = Giallo       accent-2 = Blu sezioni (800)
     accent-3 = Blu profondo (900)   accent-4 = Testo tenue
     accent-5 = Blu bordi (600)      accent-6 = Blu tenue (500)
   Regole del brand: mai testo bianco su giallo (1,94:1);
   rosso e ciano solo nel logo.
   ------------------------------------------------------------------ */
:root {
	--vb-blu: var(--wp--preset--color--base);
	--vb-bianco: var(--wp--preset--color--contrast);
	--vb-giallo: var(--wp--preset--color--accent-1);
	--vb-blu-800: var(--wp--preset--color--accent-2);
	--vb-blu-900: var(--wp--preset--color--accent-3);
	--vb-tenue: var(--wp--preset--color--accent-4);
	--vb-blu-600: var(--wp--preset--color--accent-5);
	--vb-blu-500: var(--wp--preset--color--accent-6);
	--vb-display: var(--wp--preset--font-family--display);
	--vb-testo: var(--wp--preset--font-family--testo);
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
body { -webkit-font-smoothing: antialiased; }

/* Focus sempre visibile da tastiera */
:focus-visible { outline: 3px solid var(--vb-giallo); outline-offset: 3px; }

/* Testo solo per lettori di schermo */
.sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* Sopratitolo giallo maiuscolo ("I FONDATORI", occhiello) */
.is-style-sopratitolo {
	font-size: .75rem; letter-spacing: .16em; font-weight: 700;
	color: var(--vb-giallo); text-transform: uppercase;
}

/* Ruolo sotto il nome del fondatore */
.is-style-ruolo {
	font-size: .75rem; letter-spacing: .09em; font-weight: 700;
	color: var(--vb-giallo); text-transform: uppercase;
	margin-block: .4rem .85rem !important;
}

/* Scheda fondatore */
.is-style-scheda {
	background: var(--vb-blu-800); padding: 1.5rem; border-radius: 2px;
	display: flex; flex-direction: column; gap: 0;
}
.is-style-scheda > * { margin-block: 0; }
.is-style-scheda .wp-block-image { margin: 0 0 1.1rem; }
.is-style-scheda .wp-block-image img {
	aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; border-radius: 2px; display: block;
}
.is-style-scheda h3 { font-size: 1.3rem; }

/* Bio con "Leggi tutto": chiusa a 6 righe quando lo script è attivo.
   Senza JavaScript (e nell'editor) la bio resta intera. */
.is-style-bio { font-size: .9375rem; line-height: 1.55; color: var(--vb-tenue); }
.is-style-bio p { margin: 0 0 .7em; }
.is-style-bio p:last-child { margin: 0; }
.js .is-style-bio.chiusa {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.js .is-style-bio.chiusa p { display: inline; }
.js .is-style-bio.chiusa p + p::before { content: " "; }
.leggi {
	display: none; margin-top: 1rem; align-self: flex-start;
	font: 700 .875rem var(--vb-testo); color: var(--vb-giallo);
	background: transparent; border: 2px solid var(--vb-giallo); border-radius: 2px;
	padding: .5rem .95rem; min-height: 44px; cursor: pointer;
}
.js .leggi.serve { display: inline-block; }
.leggi:hover { background: var(--vb-giallo); color: var(--vb-blu); }

/* Elenco del metodo (i sette verbi) */
.is-style-metodo {
	list-style: none; margin: 0; padding: 0 !important; border-top: 2px solid var(--vb-giallo);
}
.is-style-metodo li {
	display: flex; align-items: baseline; gap: 1rem;
	border-bottom: 1px solid var(--vb-blu-600); padding: .62rem 0; margin: 0;
	color: var(--vb-tenue); font-size: 1rem; line-height: 1.4;
}
.is-style-metodo strong {
	font-family: var(--vb-display); font-weight: 500; flex: none;
	font-size: clamp(1.3rem, 3vw, 1.85rem); color: var(--vb-giallo);
}

/* Pulsanti: altezza minima per il tocco */
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ==================================================================
   v1.1 (30/9) — intestazione, piè di pagina, home (Fase 4, mockup v6)
   ================================================================== */

/* Intestazione fissa in alto */
header.vb-header { position: sticky; top: 0; z-index: 50; }
body.admin-bar header.vb-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.vb-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar header.vb-header { top: 0; } }
.vb-testata-riga { gap: 1rem; }
.vb-marchio { min-width: 0; }
.vb-marchio .wp-block-site-logo img { width: 52px; height: auto; }
.vb-titolo-sito { font-family: var(--vb-display); font-size: 1.2rem; line-height: 1.15; font-weight: 500; margin: 0; }
.vb-titolo-sito a { color: var(--vb-bianco); text-decoration: none; }
.vb-motto {
	font-size: .65rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--vb-giallo); margin: 0; line-height: 1.2;
}
.vb-menu { font-size: 1rem; }
.vb-menu .wp-block-navigation-item__content { color: var(--vb-tenue); text-decoration: none; padding-block: .2rem; border-bottom: 2px solid transparent; }
.vb-menu .wp-block-navigation-item__content:hover { color: var(--vb-bianco); border-color: var(--vb-giallo); }
.vb-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--vb-bianco); font-size: 1.25rem; }
.vb-menu .wp-block-navigation__responsive-container-open,
.vb-menu .wp-block-navigation__responsive-container-close {
	border: 1px solid var(--vb-blu-600); border-radius: 2px; width: 44px; height: 44px;
	align-items: center; justify-content: center; color: var(--vb-bianco);
}
@media (max-width: 599px) { .vb-menu .wp-block-navigation__responsive-container-open { display: inline-flex; } }
@media (max-width: 60rem) {
	.vb-marchio .wp-block-site-logo img { width: 42px; }
	.vb-titolo-sito { font-size: .98rem; }
	.vb-motto { font-size: .5rem; letter-spacing: .06em; }
	.vb-testata-azioni { gap: .5rem !important; flex-direction: row-reverse; }
	.vb-aderisci .wp-block-button__link { padding: .5rem .8rem; font-size: .9375rem; }
}

/* Sezioni della home */
.vb-sezione {
	padding-block: clamp(3.5rem, 7vw, 5.5rem) !important;
	border-top: 1px solid var(--vb-blu-600); margin-block: 0 !important;
	scroll-margin-top: 5.5rem;
}
/* Nelle sezioni i testi stretti (titolo, intro) restano allineati a sinistra
   della colonna di 72rem, come nel mockup, invece di centrarsi. */
.vb-sezione > * { margin-left: max(0px, calc((100% - 72rem) / 2)) !important; margin-right: auto !important; }
.vb-apertura { border-top: 0; position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) !important; }
.vb-apertura::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
	background: linear-gradient(90deg, var(--vb-giallo) 0 33%, var(--vb-bianco) 33% 66%, var(--vb-giallo) 66%);
}
.vb-apertura-colonne { align-items: center !important; gap: 3rem !important; }
.vb-stemma img { width: min(150px, 34vw) !important; height: auto; }
@media (min-width: 62rem) { .vb-stemma img { width: 230px !important; } }
.vb-stemma { margin-bottom: 1.4rem !important; }
.vb-claim { max-width: 15ch; }
.vb-sottoclaim { color: var(--vb-tenue); max-width: 40ch; font-size: 1.125rem; margin-top: 1.3rem !important; }
.vb-apertura .wp-block-buttons { margin-top: 2rem !important; }
.vb-titolo { max-width: 20ch; }
.vb-intro { color: var(--vb-tenue); max-width: 60ch; margin-top: 1rem !important; }
.vb-nota { color: var(--vb-tenue); font-size: .875rem; }
.vb-fondatori { margin-top: 2.5rem !important; }
.vb-griglia-fondatori { gap: 1.5rem !important; margin-top: 1rem !important; }
.vb-griglia-fondatori > .wp-block-column { display: flex; }
.vb-griglia-fondatori .is-style-scheda { width: 100%; }

/* Manifesto: le quattro parti */
.vb-titoli { margin-top: 2.5rem !important; border-top: 1px solid var(--vb-blu-600); }
.vb-titoli .wp-block-details { border-bottom: 1px solid var(--vb-blu-600); margin: 0 !important; }
.vb-titoli summary {
	cursor: pointer; padding: 1.05rem 0; display: flex; gap: 1.25rem; align-items: baseline;
	font-family: var(--vb-display); font-size: clamp(1.15rem, 2.4vw, 1.5rem); list-style: none;
}
.vb-titoli summary::-webkit-details-marker { display: none; }
.vb-titoli summary::after {
	content: ""; flex: none; align-self: center; margin-left: auto; width: .55rem; height: .55rem;
	border-right: 2px solid var(--vb-giallo); border-bottom: 2px solid var(--vb-giallo);
	transform: rotate(45deg); transition: transform .18s;
}
.vb-titoli details[open] summary::after { transform: rotate(-135deg); }
.vb-titoli summary:hover { color: var(--vb-giallo); }
.vb-titoli summary strong { color: var(--vb-giallo); font-weight: 500; width: 1.6em; flex: none; }
.vb-titoli ol { margin: 0 0 1.4rem; padding-left: 3.1rem; color: var(--vb-tenue); line-height: 1.55; }
.vb-titoli li { margin-bottom: .4rem; }
#manifesto .wp-block-buttons { margin-top: 2rem !important; }

/* Partecipa */
.vb-attesa {
	border: 1px solid var(--vb-blu-600); border-radius: 2px; padding: 1.2rem 1.4rem;
	max-width: 34rem; margin-top: 2rem !important; background: var(--vb-blu-900);
}

/* Piè di pagina */
.vb-piede { font-size: .9375rem; }
.vb-piede-colonne { gap: 2rem !important; }
.vb-piede .is-style-sopratitolo { font-size: .7rem; letter-spacing: .12em; margin-bottom: .8rem; }
.vb-elenco-piede { list-style: none; padding: 0 !important; margin: 0; }
.vb-elenco-piede li { margin-bottom: .1rem; }
.vb-elenco-piede a { color: var(--vb-tenue); text-decoration: none; display: inline-block; padding-block: .4rem; }
.vb-elenco-piede a:hover { color: var(--vb-bianco); text-decoration: underline; }
.vb-legale {
	border-top: 1px solid var(--vb-blu-600); margin-top: 2.5rem !important; padding-top: 1.5rem;
	color: #8FA3C4; font-size: .8125rem;
}
.vb-legale a { color: inherit; }

/* Pagine interne (informativa ecc.) */
.vb-testo-pagina p, .vb-testo-pagina li { color: var(--vb-tenue); }
.vb-testo-pagina h2, .vb-testo-pagina h3 { color: var(--vb-bianco); margin-top: 2rem; }
.vb-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 2rem; }
.vb-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 0; width: 100%; }
.vb-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--vb-blu-600); }
.vb-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding-block: .85rem; border: 0; }