/*
 * Base — reset minimo, tipografia e componenti comuni.
 * Valori derivati dall'handoff Claude Design; vedi docs/design-system.md.
 */

/*
 * Font del design system, serviti in locale.
 *
 * Solo subset latin: il sito e' in italiano e cirillico/greco sarebbero
 * ~200 KB di peso mai usato. `font-display: swap` fa comparire subito il testo
 * col fallback e lo sostituisce a font caricato: si evita il testo invisibile,
 * al prezzo di un piccolo riflow che i fallback metricamente simili
 * contengono.
 */
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--p21-font-body);
	font-size: var(--p21-text-base);
	line-height: var(--p21-leading-normal);
	color: var(--p21-text);
	background: var(--p21-background);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--p21-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--p21-link-hover); }

/* Il focus deve restare visibile e leggibile su qualsiasi fondo: un anello
   spesso con offset funziona sia su bianco sia sulle sezioni scure. */
:focus-visible {
	outline: var(--p21-focus-ring);
	outline-offset: var(--p21-focus-offset);
	border-radius: var(--p21-radius-xs);
}
.p21-section--dark :focus-visible { outline-color: var(--p21-cyan-300); }

h1, h2, h3, h4 {
	font-family: var(--p21-font-display);
	font-weight: 800;
	line-height: var(--p21-leading-tight);
	letter-spacing: var(--p21-tracking-tight);
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* --- Skip link ----------------------------------------------------------
   Fuori schermo finché non riceve il focus da tastiera. */
.p21-skip {
	position: absolute;
	left: var(--p21-space-4);
	top: var(--p21-space-4);
	z-index: 999;
	transform: translateY(-200%);
	background: var(--p21-white);
	color: var(--p21-cyan-text);
	font-family: var(--p21-font-display);
	font-weight: 700;
	padding: var(--p21-space-3) var(--p21-space-4);
	border-radius: var(--p21-radius-sm);
	box-shadow: var(--p21-shadow-lg);
	text-decoration: none;
}
.p21-skip:focus { transform: translateY(0); }

.p21-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Contenitori --------------------------------------------------------- */
.p21-container {
	max-width: var(--p21-container);
	margin-inline: auto;
	padding-inline: var(--p21-gutter);
	width: 100%;
}

.p21-section { padding-block: var(--p21-section); }
.p21-section--soft { background: var(--p21-grey-50); }
.p21-section--dark { background: var(--p21-ink); color: var(--p21-white); }

/* --- Intestazioni di sezione --------------------------------------------- */
.p21-eyebrow {
	margin: 0 0 12px;
	font-family: var(--p21-font-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: var(--p21-tracking-wide);
	text-transform: uppercase;
	color: var(--p21-green-text);
}
.p21-section--dark .p21-eyebrow { color: var(--p21-cyan-300); }

.p21-h2 {
	margin: 0 0 14px;
	font-size: clamp(1.875rem, 3vw, 2.625rem);
	line-height: 1.1;
	color: var(--p21-cyan-text);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.p21-section--dark .p21-h2 { color: var(--p21-white); }

.p21-lead {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--p21-grey-700);
}
.p21-section--dark .p21-lead { color: var(--p21-grey-300); }

/* --- Pulsanti ------------------------------------------------------------ */
.p21-btn {
	font-family: var(--p21-font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 28px;
	border-radius: var(--p21-radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--p21-touch-target);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--p21-duration-fast) var(--p21-ease),
	            color var(--p21-duration-fast) var(--p21-ease);
}
.p21-btn svg { flex-shrink: 0; }

.p21-btn--green { background: var(--p21-green-text); color: var(--p21-white); }
.p21-btn--green:hover { background: var(--p21-green-dark); color: var(--p21-white); }

.p21-btn--cyan { background: var(--p21-cyan-text); color: var(--p21-white); }
.p21-btn--cyan:hover { background: var(--p21-cyan-dark); color: var(--p21-white); }

.p21-btn--outline {
	background: var(--p21-white);
	color: var(--p21-cyan-text);
	border-color: var(--p21-cyan-text);
	padding: 15px 22px;
	font-size: 0.9375rem;
}
.p21-btn--outline:hover { background: var(--p21-cyan-50); color: var(--p21-cyan-dark); }

.p21-btn--pill {
	border-radius: var(--p21-radius-pill);
	padding: 0 18px;
	font-size: 0.8125rem;
}

/* Link testuale con freccia, usato nelle card. */
.p21-link-arrow {
	font-family: var(--p21-font-display);
	font-weight: 700;
	font-size: 0.90625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--p21-green-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--p21-touch-target);
}
.p21-link-arrow:hover { color: var(--p21-green-dark); }
.p21-link-arrow svg { transition: transform var(--p21-duration-fast) var(--p21-ease); }

/*
 * Compatibilità TheGem — pagine interne (M9).
 *
 * La homepage bypassa il tema padre (front-page.php), ma le pagine interne
 * usano ancora i template di TheGem (§5 del piano di implementazione), che
 * si aspettano un colore o un'immagine di sfondo configurati da Customizer
 * per la barra del titolo pagina (#page-title). Qui non è mai stato
 * configurato: il tema applica comunque un H1 bianco su nessuno sfondo,
 * cioè invisibile. Non si tocca alcun file del tema padre: questa è una
 * regola CSS del child theme che vince per cascata, lo stesso meccanismo
 * per cui esiste un child theme.
 *
 * Sfondo chiaro come le altre sezioni del sito (non lo scuro dell'homepage):
 * un'unica fascia continua, senza bisogno di una linea divisoria tra
 * titolo e breadcrumb.
 */
#page-title,
.p21-bubbles-decor {
	background: var(--p21-grey-50);
	position: relative;
	overflow: hidden;
}
/* Grappolo di pallini ciano/verde, lo stesso motivo del logo, in un angolo
   della barra del titolo — decorativo, dietro al testo. Un unico SVG inline
   invece di un file a parte: undici cerchi non giustificano una richiesta
   HTTP in più.
   .p21-bubbles-decor e' la stessa filigrana riusata fuori da #page-title
   (che esiste solo sulle pagine che passano dal tema padre TheGem): la
   pagina "Area riservata soci" (template-area-soci.php) non ci passa — usa
   header-p21/footer-p21 come la homepage — ed era rimasta l'unica pagina
   interna senza. La homepage non la usa: ha già una propria decorazione
   (home.css, angoli del mosaico), non le serve anche questa. Su richiesta
   del committente (27/08/2026): "vorrei che i layout delle pagine avessero
   anche una filigrana con le bolle". */
#page-title::before,
.p21-bubbles-decor::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -60px;
	width: 340px;
	height: 340px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><circle cx="230" cy="60" r="48" fill="%2382b718" opacity="0.9"/><circle cx="300" cy="90" r="34" fill="%2300a7c6" opacity="0.85"/><circle cx="180" cy="100" r="30" fill="%2300a7c6" opacity="0.8"/><circle cx="270" cy="150" r="52" fill="%2300a7c6" opacity="0.9"/><circle cx="330" cy="180" r="26" fill="%2382b718" opacity="0.85"/><circle cx="200" cy="170" r="24" fill="%2382b718" opacity="0.75"/><circle cx="250" cy="230" r="40" fill="%2382b718" opacity="0.9"/><circle cx="310" cy="260" r="30" fill="%2300a7c6" opacity="0.8"/><circle cx="180" cy="240" r="18" fill="%2300a7c6" opacity="0.7"/><circle cx="240" cy="300" r="22" fill="%2300a7c6" opacity="0.75"/><circle cx="150" cy="60" r="14" fill="%2382b718" opacity="0.6"/></svg>');
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
#page-title .page-title-inner,
#page-title .breadcrumbs-container {
	position: relative;
	z-index: 1;
}
#page-title .page-title-title h1,
#page-title .page-title-title,
#page-title h1 {
	color: var(--p21-ink) !important;
	font-family: var(--p21-font-display);
}
#page-title .breadcrumbs,
#page-title .breadcrumbs a {
	color: var(--p21-grey-600) !important;
}
#page-title .breadcrumbs .current {
	color: var(--p21-ink) !important;
}
#page-title .breadcrumbs a:hover {
	color: var(--p21-cyan-text) !important;
}
/* Sotto i 640px la barra del titolo è più bassa del grappolo di pallini:
   ridotto, non tolto, per non lasciare un angolo improvvisamente spoglio. */
@media (max-width: 640px) {
	#page-title::before,
	.p21-bubbles-decor::before {
		top: -50px;
		right: -50px;
		width: 220px;
		height: 220px;
	}
}
.p21-link-arrow:hover svg { transform: translateX(3px); }