/*
Theme Name: GAL Logudoro Goceano
Theme URI: https://github.com/GAL-Logudoro-Goceano/gal-website
Author: GAL Logudoro Goceano
Description: Block theme (FSE) del sito istituzionale del GAL Logudoro Goceano. I token grafici derivano dal design system "GAL Logudoro Goceano Design System" su Claude Design e sono mappati in theme.json.
Version: 0.8.14
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gal-logudoro
Tags: full-site-editing, block-patterns, accessibility-ready
*/

/* Il grosso degli stili vive in theme.json. Qui restano solo le regole che
   theme.json non può esprimere: stati di focus, utility e componenti custom. */

/* --- Accessibilità: skip link e focus visibile ---------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--wp--preset--color--verde-bosco);
	color: var(--wp--preset--color--crema);
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--ocra);
	outline-offset: 2px;
}

/* Il brand book sottolinea i link in ocra, non nel colore del testo. */
.wp-site-blocks a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content)) {
	text-decoration-color: var(--wp--preset--color--ocra);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Sui fondi scuri il colore globale dei link (petrolio) è invisibile:
   il testo eredita il colore chiaro del contenitore, l'hover resta ocra. */
.has-petrolio-background-color a:where(:not(.wp-element-button)),
.has-verde-bosco-background-color a:where(:not(.wp-element-button)),
.has-antracite-background-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* --- Kicker: microtitolo ocra, maiuscolo, tracking largo ------------------ */

.gal-kicker {
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: var(--wp--custom--kicker--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--ocra);
	margin-bottom: var(--wp--preset--spacing--10);
}

/* --- Barretta ocra sotto i titoli di sezione ----------------------------- */

.gal-accent-bar::after {
	content: "";
	display: block;
	width: 56px;
	height: var(--wp--custom--accent--bar);
	background: var(--wp--preset--color--ocra);
	margin-top: var(--wp--preset--spacing--20);
}

/* --- Card: nessuna ombra, solo bordo e fondo (brand book sez. 06) -------- */

.gal-card {
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--custom--pad--card);
	background: var(--wp--preset--color--bianco);
}

.has-crema-background-color .gal-card,
.gal-card--on-warm {
	border-color: var(--wp--preset--color--bordo-crema);
	background: var(--wp--preset--color--carta-calda);
}

/* --- Numeri di sintesi (report di impatto) -------------------------------- */

.gal-numero {
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 800;
	line-height: 1.05;
	color: var(--wp--preset--color--verde-bosco);
	margin: 0 0 var(--wp--preset--spacing--10);
}

/* --- Marchio in testata --------------------------------------------------- */

/* Il marchio è un asset del tema e non il logo del sito: `wp:site-logo` legge
   dalla Media Library, dove l'SVG non si carica senza allentare i permessi di
   upload. Così viaggia col rilascio e non dipende dal database. */
.gal-marchio {
	margin: 0;
}

.gal-marchio img {
	display: block;
	width: auto;
}

/* --- Fascia dei loghi di programma, sopra il footer ----------------------- */

/* Banda chiara obbligata: l'emblema europeo non si ricolora e non si mette su
   fondo scuro senza riquadro, e il footer è petrolio (piano §2.3quater). */
.gal-fascia-programma .gal-barra-loghi {
	margin: 0 auto;
	/* La barra 2023-2027 porta sette marchi invece di quattro: a 620px la
	   Repubblica e il CSR diventavano illeggibili.
	   Da 760 a 900px sul desktop: a 760 i sette marchi restavano piccoli
	   rispetto al resto della pagina. Il tetto serve comunque, perché la barra
	   e' un SVG e senza si stirerebbe per tutta la larghezza del contenuto. */
	max-width: 900px;
}

/* La barra a una riga sta in 9,3:1: sotto i ~500px di larghezza resa il claim
   FEASR scende sotto i 7px e non si legge più. Il taglio a due righe (4+3)
   sta in 2,8:1 e tiene i marchi al doppio dell'altezza. Lo scambio lo fa il
   <picture> in parts/footer.html: se cambi la soglia, cambiala anche lì. */
.gal-fascia-programma .gal-barra-loghi picture {
	display: block;
}

.gal-fascia-programma .gal-barra-loghi img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Testo per soli lettori di schermo ------------------------------------ */

/* Usata dai link esterni (avviso «si apre in una nuova finestra») qui e in
   gal-core/inc/trasparenza.php, che la dava per definita altrove. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Kicker con icona ----------------------------------------------------- */

/* L'icona si dimensiona sul testo, non in pixel: a 18px fissi era più alta
   delle maiuscole del kicker, che sono 13px, e con l'interlinea a 1.7 il suo
   centro cadeva sopra quello delle lettere. In em, e con l'interlinea a 1,
   `align-items: center` allinea davvero i due centri ottici. */
.gal-kicker--icona {
	display: flex;
	align-items: center;
	gap: 0.42em;
	line-height: 1;
}

.gal-icona {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

/* --- Schede dei cicli di programmazione ---------------------------------- */

/* Le schede stanno in griglia e sono già alte uguali, ma il pulsante seguiva
   il testo: con descrizioni di lunghezza diversa i due pulsanti finivano a
   quote diverse. In colonna, con il margine automatico, si appoggiano al
   fondo della scheda e si allineano fra loro. */
.gal-scheda-ciclo {
	display: flex;
	flex-direction: column;
}

.gal-scheda-ciclo > .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* --- Striscia immagine in testa ai box delle news ------------------------ */

/* Quando la news non ha immagine di testata il gruppo resta vuoto e si vede
   il fondo: marchio del GAL centrato su crema, mai un buco bianco.
   La percentuale è più bassa di prima perché il marchio ufficiale è quasi
   quadrato, non orizzontale: al 46% sfondava in altezza il riquadro 16:9.
   Il file è un PNG da 186 px di larghezza — è quello che c'è, il marchio
   arriva come raster dentro la striscia istituzionale — quindi la percentuale
   tiene anche il ruolo di limite: oltre, si vede la sgranatura. */
.gal-striscia {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	margin-bottom: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--crema) url("assets/img/logo-gal-ufficiale-sigla.png") no-repeat center / 30% auto;
}

.gal-striscia .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.gal-striscia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Chip / pill di stato ------------------------------------------------ */

.gal-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--wp--custom--radius--chip);
	padding: 4px 12px;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid currentColor;
}

/* --- Velatura sulle foto (55–75% secondo brand book) --------------------- */

.gal-velatura {
	position: relative;
	isolation: isolate;
}

.gal-velatura::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--overlay--verde);
}

.gal-velatura--petrolio::before {
	background: var(--wp--custom--overlay--petrolio);
}

/* --- Kicker sopra le foto: eccezione consapevole -------------------------- */

/* Il kicker resta ocra anche sopra le foto, per scelta della direzione del
   progetto (02/08/2026). Va messo a verbale che li' NON e' conforme:
   sull'ocra #D5A144 con velatura all'80% il contrasto e' ~3,0:1, contro il
   4,5:1 che WCAG 2.2 AA chiede al testo piccolo. Sui fondi pieni fa 5,6:1 ed
   e' in regola: il problema esiste solo sui due blocchi Cover della homepage.
   Non alzare la velatura sperando di rientrare: servirebbe il 95%, cioe'
   rinunciare alla foto. Le due vie che rientrerebbero davvero, se un giorno
   si decide di chiudere il rilievo:
     1. kicker crema sui Cover — 6,4:1, una riga di CSS;
     2. velatura a gradiente, ~92% dove sta il testo e ~55% sul resto, cosi'
        la foto resta leggibile e il contrasto si calcola dove serve.
   Il rilievo va riportato nella dichiarazione di accessibilita' finche' resta. */

/* --- Fasce fotografiche a tutta larghezza --------------------------------- */

/* Le foto del territorio sono strisce 1900x369 (~5:1). A tutta larghezza su
   desktop tornano; su schermo stretto diventerebbero un filo di 70px, quindi
   si ritagliano invece di rimpicciolirsi. */
.gal-fascia {
	margin-block: 0;
}

.gal-fascia img {
	display: block;
	width: 100%;
	height: clamp(140px, 19vw, 369px);
	object-fit: cover;
	object-position: center;
}

/* --- Targa dei loghi istituzionali ---------------------------------------- */

/* La griglia da sola allinea i loghi in alto a sinistra nella cella: hanno
   proporzioni molto diverse fra loro, vanno centrati o la fila sembra storta. */
.gal-loghi {
	align-items: center;
	justify-items: center;
}

.gal-loghi figure {
	margin-block: 0;
}

/* --- Elenco dei soci ------------------------------------------------------ */

/* Cento nomi incolonnati uno sotto l'altro sono un muro. Le colonne CSS si
   moltiplicano da sole quando c'è spazio — niente media query — e lasciano
   intatto l'ordine di lettura, che resta quello del markup. */
.gal-elenco-soci {
	columns: 17rem;
	column-gap: var(--wp--preset--spacing--40);
}

/* Senza questo un nome lungo si spezza fra il fondo di una colonna e la cima
   della successiva. */
.gal-elenco-soci li {
	break-inside: avoid;
	margin-bottom: var(--wp--preset--spacing--10);
}

/* --- Immagine di testata delle notizie ------------------------------------ */

/* Le immagini migrate da Joomla sono spesso loghi piccoli o scansioni:
   mai upscalarle a tutta larghezza, altezza col guinzaglio. */
.gal-featured-notizia img {
	width: auto;
	max-width: 100%;
	max-height: 420px;
	object-fit: contain;
	object-position: left center;
}

/* --- Residui della migrazione da Joomla ---------------------------------- */

/* Sostituisce i pulsanti DropFiles morti (bande grigie): vedi gal-core,
   inc/migrazione.php. Sparisce quando gli allegati saranno migrati. */
.gal-allegato-mancante {
	display: inline-block;
	border: 1px dashed var(--wp--preset--color--bordo);
	border-radius: var(--wp--custom--radius--plate);
	padding: 8px 14px;
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--salvia);
}

/* Gli iframe dei mini-siti ereditati non dichiarano una proporzione. */
.wp-block-post-content iframe {
	max-width: 100%;
}

/* --- Link esterni (usato dall'indice Amministrazione trasparente) -------- */

.gal-external-link__icon {
	width: 0.9em;
	height: 0.9em;
	margin-inline-start: 0.35em;
	vertical-align: -0.08em;
	fill: currentColor;
}

/* --- Riduzione del movimento -------------------------------------------- */

@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;
	}
}

/* --- Schede delle raccolte di cooperazione, in homepage ------------------- */

/* La foto esce dal padding della scheda e va a filo dei tre lati: dentro il
   padding sembrerebbe un'immagine incollata nel testo, non la testata della
   scheda. I margini negativi sono quelli del padding, invertiti. */
.gal-scheda-raccolta__foto {
	margin: calc(-1 * var(--wp--preset--spacing--30)) calc(-1 * var(--wp--preset--spacing--30)) var(--wp--preset--spacing--30);
}

/* Le fasce native sono 1900x369, cioè 5:1: a piena larghezza di scheda
   verrebbero alte una settantina di pixel, una fettina. Il 3:1 le alza senza
   arrivare al francobollo, e `cover` ritaglia al centro. */
.gal-scheda-raccolta__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: 6px 6px 0 0;
}

/* --- Badge del punto locale Eurodesk ------------------------------------- */

/* Il badge e' 1417x354, cioe' 4:1. La misura e' stata cercata a occhio:
   420 (troppo), 210, 150 (troppo poco), 450.
   Vale la pena sapere perche' ci sono voluti quattro giri: il 420 e il 210
   non si sono mai visti in pagina, perche' la cache di Aruba serviva il CSS
   vecchio con `max-age` di un anno. La scelta e' quindi fra 150 e 450, gli
   unici due davvero guardati.
   A 450 il badge e' alto 113px e si legge tutto, compresi i marchi Erasmus+ e
   Corpo Europeo. L'`alt` resta descrittivo comunque: e' un'attestazione, e
   chi non vede l'immagine deve sapere cosa attesta. */
.gal-marchio-eurodesk {
	margin: var(--wp--preset--spacing--30) 0;
}

.gal-marchio-eurodesk img {
	display: block;
	width: 100%;
	max-width: 450px;
	height: auto;
}

/* --- Banner in testa alle pagine interne --------------------------------- */

/* Le pagine interne aprivano tutte allo stesso modo — briciole, titolo,
   testo — e sembravano la stessa pagina con parole diverse. Il banner dà a
   ciascuna un'immagine sua, subito sotto il titolo.
   Il template ha già uno slot per l'immagine in evidenza (`page.html`), ma
   nessuna pagina ne ha una: quello slot chiede di caricare i file in Media
   Library e di assegnarli a mano, questo viaggia col rilascio. Se un giorno
   la redazione vorrà cambiarle da sola, si passa a quello.
   3:1 e non 16:9: le foto disponibili sono fasce da 1900x369, e in 16:9 si
   vedrebbe solo la fetta centrale. */
.gal-banner-pagina {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.gal-banner-pagina img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: var(--wp--custom--radius--card);
}

/* --- Schede dei 34 comuni -------------------------------------------------- */

/* Come sulle schede delle raccolte in homepage: la foto esce dal padding e va
   a filo dei tre lati, altrimenti sembra un'immagine incollata dentro il
   testo e non la testata della scheda. I margini sono quelli del padding,
   invertiti. */
.gal-scheda-comune__foto {
	margin: calc(-1 * var(--wp--preset--spacing--30)) calc(-1 * var(--wp--preset--spacing--30)) var(--wp--preset--spacing--30);
}

/* Le foto native sono 800x400 (2:1) e in griglia vengono larghe fra i 260 e i
   360 px: il 2:1 le tiene alte quanto basta a riconoscere il luogo, senza far
   diventare la pagina una colonna di trentaquattro cartoline. `cover` ritaglia
   al centro le poche che arrivano con proporzioni diverse.
   Il raggio è quello della scheda meno il bordo superiore di 3px. */
.gal-scheda-comune__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: 7px 7px 0 0;
}

/* Cliccabile tutta la scheda, ma il collegamento resta uno solo — quello sul
   nome. Con foto, nome e didascalia linkati separatamente l'elenco dei
   collegamenti di uno screen reader passerebbe da 34 voci a 102. */
.gal-scheda-comune {
	position: relative;
}

.gal-scheda-comune h3 a {
	text-decoration: none;
}

.gal-scheda-comune h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radius--card);
}

.gal-scheda-comune:hover h3 a,
.gal-scheda-comune:focus-within h3 a {
	text-decoration: underline;
}