@charset "UTF-8";

/* ==========================================================================
   Stili custom del tema.

   Regola generale: il layout si fa con griglia, componenti e classi di
   utilita' di Bootstrap 5, direttamente nel markup. Qui va SOLO cio' che
   Bootstrap non copre: i design token del progetto, la tipografia, i colori
   dei componenti e le sezioni specifiche delle pagine.

   Indice
   1. Design token
   2. Base e accessibilita'
   3. Larghezza dei contenuti
   4. Tipografia
   5. Pulsanti
   6. Header e menu
   7. Footer
   8. Hero
   9. Invito finale (CTA)
   10. Testo dell'editor
   11. Elenchi di articoli e paginazione
   12. Pagina "In arrivo"
   13. Pagine — una sezione per ogni template page-<slug>.php
   ========================================================================== */


/* ==========================================================================
   1. Design token
   Sono i valori del layout Figma del progetto: colori, font, raggi. Quando
   arriva il layout si cambiano QUI, non nelle regole piu' sotto.

   Contrasto dei colori di partenza (minimo richiesto: 4.5:1 per il testo,
   3:1 per bordi e stati di focus):
     ink su surface ............ 14.76:1
     ink su surface-alt ........ 13.26:1
     muted su surface ..........  6.46:1
     muted su surface-alt ......  5.80:1
     on-brand su brand .........  7.62:1
     brand su surface ..........  7.62:1
     border su surface .........  3.66:1
   Ogni volta che cambi un colore, ricontrolla le coppie in cui e' usato.
   ========================================================================== */
:root {
	/* Colori */
	--color-surface: #FFFFFF;      /* sfondo della pagina */
	--color-surface-alt: #F1F3F5;  /* sfondo delle fasce alternate e delle schede */
	--color-ink: #1F2933;          /* testo */
	--color-muted: #52606D;        /* testo secondario */
	--color-border: #7B8794;       /* bordi di campi e schede */
	--color-brand: #0B5C6B;        /* colore del brand: link, pulsanti, fasce piene */
	--color-brand-strong: #084652; /* brand piu' scuro, per hover e stati attivi */
	--color-on-brand: #FFFFFF;     /* testo sopra il colore del brand */

	/* Font: devono corrispondere a 'font_url' in inc/config.php */
	--font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Forme */
	--radius: 0.75rem;
	--radius-pill: 999px;

	/* I token entrano in Bootstrap attraverso le sue variabili */
	--bs-body-font-family: var(--font-body);
	--bs-body-color: var(--color-ink);
	--bs-body-bg: var(--color-surface);
	--bs-link-color: var(--color-brand);
	--bs-link-color-rgb: 11, 92, 107;        /* = --color-brand in RGB */
	--bs-link-hover-color: var(--color-brand-strong);
	--bs-link-hover-color-rgb: 8, 70, 82;    /* = --color-brand-strong in RGB */
	--bs-border-color: var(--color-border);
}


/* ==========================================================================
   2. Base e accessibilita'
   ========================================================================== */

/*
 * Focus da tastiera sempre visibile, uguale in tutto il sito. Chi naviga
 * con il mouse non lo vede (:focus-visible), chi usa la tastiera si'.
 */
:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: 2px;
}

/* Sulle fasce con sfondo pieno il focus diventa chiaro per restare visibile. */
.site-cta :focus-visible {
	outline-color: var(--color-on-brand);
}

/* Link "Vai al contenuto principale": compare solo quando riceve il focus. */
.site-skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2000;
	padding: 0.75rem 1rem;
	background-color: var(--color-surface);
	color: var(--color-ink);
	border-radius: var(--radius);
}

/* Lo scroll verso un'ancora non finisce sotto il bordo dello schermo. */
:target {
	scroll-margin-top: 1.5rem;
}

/*
 * Icone Material Symbols: allineate al testo e mai selezionabili.
 * Larghezza fissa e overflow nascosto: se il font delle icone non si
 * carica, il nome dell'icona non esce dal suo spazio e non rompe il layout.
 */
.material-symbols-rounded {
	display: inline-block;
	width: 1em;
	height: 1em;
	overflow: hidden;
	line-height: 1;
	vertical-align: middle;
	user-select: none;
}

/*
 * Chi ha chiesto al sistema di ridurre le animazioni non ne vede:
 * transizioni e animazioni diventano istantanee, lo scroll non e' animato.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   3. Larghezza dei contenuti
   .site-wrap si usa insieme a .container-fluid: limita la larghezza dei
   contenuti e da' lo stesso margine laterale a header, sezioni e footer.
   Gli sfondi delle sezioni restano a tutta larghezza.
   ========================================================================== */
.site-wrap {
	max-width: 80rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

@media (min-width: 576px) {
	.site-wrap { padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 992px) {
	.site-wrap { padding-left: 3rem; padding-right: 3rem; }
}


/* ==========================================================================
   4. Tipografia
   Le classi site-h* danno l'aspetto, non il livello: il livello (h1, h2…)
   si sceglie in base alla struttura della pagina, l'aspetto con la classe.
   Dimensioni in rem: seguono lo zoom e le preferenze del browser.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.site-h1, .site-h2, .site-h3 {
	font-family: var(--font-display);
	font-weight: 700;
}

.site-h1 { font-size: 2.25rem;  line-height: 1.15; }
.site-h2 { font-size: 1.75rem;  line-height: 1.2; }
.site-h3 { font-size: 1.25rem;  line-height: 1.3; }

@media (min-width: 992px) {
	.site-h1 { font-size: 3.25rem; }
	.site-h2 { font-size: 2.25rem; }
	.site-h3 { font-size: 1.375rem; }
}

.site-lead {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.site-eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand);
}

.site-meta {
	font-size: 0.875rem;
	color: var(--color-muted);
}


/* ==========================================================================
   5. Pulsanti
   Varianti del componente .btn di Bootstrap, colorate con le sue variabili.
   Altezza minima 44px: e' la dimensione comoda per il tocco su mobile.
   ========================================================================== */
.btn-site-primary,
.btn-site-outline,
.btn-site-light {
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 0.625rem;
	--bs-btn-font-weight: 700;
	--bs-btn-border-radius: var(--radius-pill);
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Pulsante principale: pieno, colore del brand. */
.btn-site-primary {
	--bs-btn-bg: var(--color-brand);
	--bs-btn-border-color: var(--color-brand);
	--bs-btn-color: var(--color-on-brand);
	--bs-btn-hover-bg: var(--color-brand-strong);
	--bs-btn-hover-border-color: var(--color-brand-strong);
	--bs-btn-hover-color: var(--color-on-brand);
	--bs-btn-active-bg: var(--color-brand-strong);
	--bs-btn-active-border-color: var(--color-brand-strong);
	--bs-btn-active-color: var(--color-on-brand);
}

/* Pulsante secondario: solo bordo. */
.btn-site-outline {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--color-brand);
	--bs-btn-color: var(--color-brand);
	--bs-btn-hover-bg: var(--color-brand);
	--bs-btn-hover-border-color: var(--color-brand);
	--bs-btn-hover-color: var(--color-on-brand);
	--bs-btn-active-bg: var(--color-brand-strong);
	--bs-btn-active-border-color: var(--color-brand-strong);
	--bs-btn-active-color: var(--color-on-brand);
}

/* Pulsante chiaro: per le fasce con sfondo pieno (per esempio la CTA). */
.btn-site-light {
	--bs-btn-bg: var(--color-surface);
	--bs-btn-border-color: var(--color-surface);
	--bs-btn-color: var(--color-ink);
	--bs-btn-hover-bg: var(--color-surface-alt);
	--bs-btn-hover-border-color: var(--color-surface-alt);
	--bs-btn-hover-color: var(--color-ink);
	--bs-btn-active-bg: var(--color-surface-alt);
	--bs-btn-active-border-color: var(--color-surface-alt);
	--bs-btn-active-color: var(--color-ink);
}


/* ==========================================================================
   6. Header e menu
   ========================================================================== */
.site-navbar {
	--bs-navbar-padding-y: 1.25rem;
	--bs-navbar-color: var(--color-ink);
	--bs-navbar-hover-color: var(--color-ink);
	--bs-navbar-active-color: var(--color-ink);
	--bs-navbar-brand-color: var(--color-ink);
	--bs-navbar-brand-hover-color: var(--color-ink);
	--bs-navbar-toggler-border-color: var(--color-border);
	background-color: var(--color-surface);
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-ink);
	text-decoration: none;
}

.site-logo__img {
	height: 2.25rem;
	width: auto;
}

.site-navbar .nav-link {
	font-weight: 500;
}

/*
 * Voce attiva e hover: sottolineatura, non solo un cambio di colore.
 * Un'informazione data solo dal colore sfugge a chi non lo distingue bene.
 */
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus-visible,
.site-navbar .nav-link.active {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.site-offcanvas {
	--bs-offcanvas-bg: var(--color-surface);
	--bs-offcanvas-color: var(--color-ink);
}


/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer {
	background-color: var(--color-surface-alt);
	padding-top: 3.5rem;
	padding-bottom: 2.5rem;
}

.site-footer__tagline {
	max-width: 26rem;
	margin-top: 0.75rem;
	margin-bottom: 0;
	color: var(--color-muted);
}

.site-footer__heading {
	font-size: 1rem;
	margin-bottom: 0.75rem;
}

.site-footer__links li {
	margin-bottom: 0.5rem;
}

.site-footer__links a {
	color: var(--color-ink);
	text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	text-decoration: underline;
}

.site-footer__divider {
	margin: 2.5rem 0 1.5rem;
	border-color: var(--color-border);
	opacity: 1;
}

.site-footer__bottom {
	font-size: 0.875rem;
	color: var(--color-muted);
}


/* ==========================================================================
   8. Hero (partial/hero-minimal.php e partial/hero-secondary.php)
   ========================================================================== */
.site-hero--secondary {
	background-color: var(--color-surface-alt);
}

.site-hero__photo {
	border-radius: var(--radius);
	height: auto;
}


/* ==========================================================================
   9. Invito finale (partial/cta.php)
   ========================================================================== */
.site-cta {
	background-color: var(--color-brand);
	color: var(--color-on-brand);
}

.site-cta .site-lead {
	color: var(--color-on-brand);
}


/* ==========================================================================
   10. Testo dell'editor (.site-prose)
   Per i contenuti scritti nell'editor di WordPress: pagine generiche,
   pagine legali, articoli.
   ========================================================================== */
.site-prose {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.site-prose h2 { font-size: 1.5rem;  margin-top: 2.5rem; margin-bottom: 0.75rem; }
.site-prose h3 { font-size: 1.25rem; margin-top: 2rem;   margin-bottom: 0.5rem; }

.site-prose > :first-child { margin-top: 0; }
.site-prose > :last-child { margin-bottom: 0; }

.site-prose img {
	max-width: 100%;
	height: auto;
}

/* Dentro un testo i link devono essere sottolineati: il colore non basta. */
.site-prose a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* ==========================================================================
   11. Elenchi di articoli e paginazione (index.php, partial/paginazione.php)
   ========================================================================== */
.site-post a {
	color: var(--color-ink);
	text-decoration: none;
}

.site-post a:hover,
.site-post a:focus-visible {
	text-decoration: underline;
}

.site-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	text-decoration: none;
}

.site-pagination a.page-numbers:hover {
	text-decoration: underline;
}

.site-pagination .page-numbers.current {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-on-brand);
	font-weight: 700;
}

.site-pagination .page-numbers.dots {
	border-color: transparent;
}


/* ==========================================================================
   12. Pagina "In arrivo" (page-coming-soon.php)
   ========================================================================== */
.site-coming-soon {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.site-coming-soon__inner {
	max-width: 34rem;
}

.site-coming-soon__logo {
	margin-bottom: 1.5rem;
	font-size: 2rem;
}

.site-coming-soon__logo .site-logo {
	font-size: inherit;
}

.site-coming-soon__logo .site-logo__img {
	height: auto;
	width: 70%;
	max-width: 16rem;
}

.site-coming-soon__badge {
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* ==========================================================================
   13. Pagine
   Una sezione per ogni template page-<slug>.php, con lo stesso nome.
   ========================================================================== */

/* --- Esempio (page-esempio.php) ----------------------------------------- */

/* 2. Punti: schede con icona, titolo e testo */
.site-card {
	padding: 1.75rem;
	background-color: var(--color-surface-alt);
	border-radius: var(--radius);
}

.site-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-brand);
	color: var(--color-on-brand);
}

/* 3. Domande: fisarmonica di Bootstrap, colorata con i token */
.site-accordion {
	--bs-accordion-border-color: var(--color-border);
	--bs-accordion-border-radius: var(--radius);
	--bs-accordion-inner-border-radius: calc(var(--radius) - 1px);
	--bs-accordion-btn-color: var(--color-ink);
	--bs-accordion-active-color: var(--color-ink);
	--bs-accordion-active-bg: var(--color-surface-alt);
	--bs-accordion-btn-focus-box-shadow: none;
}

.site-accordion .accordion-button {
	font-weight: 700;
}

/* Il focus della fisarmonica usa lo stesso contorno del resto del sito. */
.site-accordion .accordion-button:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: -3px;
}