/*
Theme Name: API Trentine
Theme URI:
Author: Blurr
Author URI: https://blurr.it
Description: Tema a blocchi dell'Associazione Apicoltori della Provincia di Trento.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apitrentine
Tags: block-theme, full-site-editing
*/

/* ============================================================
   Base + utilities - trascrizione di base.css e utilities.css
   dell'HTML di riferimento. I font e i valori di colore,
   tipografia e spaziatura stanno in theme.json.
   ============================================================ */

/* ─── Reset ─────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

/* Niente scroll orizzontale della pagina: `clip` e non `hidden`, perché
   `hidden` creerebbe un contenitore di scroll rompendo position: sticky
   e Lenis. */
html,
body {
	overflow-x: clip;
}

/* Scorrimento morbido (assets/js/lenis.min.js + assets/js/smooth-scroll.js):
   stesse regole di base.css del riferimento. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

body {
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
}

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

/* Optical letter-spacing e colore dei titoli sono in theme.json
   (styles.elements.heading). */

/* La sottolineatura c'e' sempre ma trasparente, cosi' l'hover la sfuma
   senza spostare il testo. theme.json imposta text-decoration-line. */
a {
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color var(--wp--custom--transition), text-decoration-color var(--wp--custom--transition);
}

a:hover {
	text-decoration-color: currentColor;
}

/* …tranne i link non testuali. E' lo stesso elenco di base.css del riferimento,
   dove pero' l'elemento escluso e' la card intera, che li' e' un <a>. Con i
   blocchi core il link sta sul titolo dentro la card, quindi va escluso anche
   quello: senza, passando sopra il titolo compare una sottolineatura che nel
   riferimento non c'e'. */
.logo:hover,
.wp-element-button:hover,
.nav-links a:hover,
.footer-social a:hover,
.corso-card:hover,
.corso-card a:hover,
.bando-card:hover,
.bando-card a:hover,
.comm-card:hover,
.comm-card a:hover,
.news-card:hover,
.news-card a:hover,
.concorso-card:hover,
.concorso-card a:hover,
.doc-item:hover,
.doc-item a:hover,
.gallery-item:hover,
.gallery-item a:hover {
	text-decoration-color: transparent;
}

button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

/* ─── Utilities ─────────────────────────────────────── */
/* .container dell'originale: max-width 1140px con padding laterale.
   Il gutter e' quello globale, definito una sola volta in theme.json. */
.container {
	/* Su una riga sola: un minificatore che toglie le andate a capo dentro
	   calc() lascia var(--a)+var(--b), e senza gli spazi attorno al + la
	   dichiarazione e' invalida e il contenitore va a tutta larghezza. */
	max-width: calc(var(--wp--style--global--content-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right);
}

/* I template part header/footer sono struttura: niente blockGap di root,
   che nel riferimento non esiste. */
.wp-site-blocks > header,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ─── Accessibility ─────────────────────────────────── */
/* Visible keyboard focus (only for keyboard users, not mouse clicks) */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
	border-radius: 3px;
}

/* keep anchor/skip targets clear of the fixed navbar */
main[id],
section[id] {
	scroll-margin-top: 84px;
}

/* Global safety net: honour reduced-motion for any animation/transition */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ─── Sezioni ───────────────────────────────────────── */
/* Primitive condivise da tutte le sezioni della pagina: trascrizione di
   .section, .section-header e .section-desc di components.css. Stanno qui e
   non in un file di sezione perche' le useranno anche Servizi, Corsi e Bandi.
   Lo sfondo di .section-alt non e' qui: e' un preset di theme.json applicato
   al blocco, cosi' resta modificabile dall'editor. */

/* Nel riferimento le sezioni di primo livello sono attaccate una all'altra: il
   ritmo verticale lo fa il padding-block di .section, non un margine fra una
   sezione e l'altra. Il layout del contenuto di core interpone invece il
   blockGap globale, 24px, che a ogni sezione sposta in basso tutto il resto
   della pagina. Vale per ogni pagina, non solo per quelle a sezioni piene. */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

.section {
	padding-block: 88px;
}

.section-header {
	text-align: center;
	margin-bottom: 56px;
}

/* Su telefono gli 88px sopra e sotto ogni sezione, piu' i 56 sotto ogni
   intestazione, valgono da soli quasi una schermata di vuoto sulla home e piu'
   di una su Associazione. Il riferimento li tiene fissi a ogni larghezza:
   ridurli sotto i 720px e' una divergenza voluta dal proprietario.

   Media query e non clamp: la soglia e' la stessa del resto del tema - menu a
   panino, filtri a tendina, tabella delle zone - e sopra i 720px tutto resta
   identico al riferimento al pixel. */
@media (max-width: 720px) {
	.section {
		padding-block: 48px;
	}

	.section-header {
		margin-bottom: 32px;
	}
}

.section-header h2 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin-bottom: 14px;
	line-height: 1.2;
}

.section-desc {
	color: var(--wp--preset--color--text-muted);
	font-size: 1.05rem;
	max-width: 520px;
	margin-inline: auto;
}

/* Sottotitolo della hero: la versione base, quella che ogni hero ridefinisce
   (hero.css per la home, hero-banner.css per le pagine interne). */
.hero-sub {
	font-size: 1.25rem;
	color: var(--wp--preset--color--text-muted);
	max-width: 540px;
	margin-bottom: 36px;
	line-height: 1.7;
}

/* ─── Entrata allo scroll ───────────────────────────── */
/* Trascrizione di .reveal / .is-visible di utilities.css. La classe .reveal la
   mette assets/js/reveal.js: senza JS non si nasconde nulla, come nel
   riferimento. E' un'animazione e non una transizione, cosi' non litiga con la
   transition propria di un componente (per esempio l'hover di una card). */

.reveal {
	opacity: 0;
}

.reveal.is-visible {
	opacity: 1;
	animation: reveal-in .6s cubic-bezier(.22, .61, .36, 1) backwards;
}

@keyframes reveal-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; }
	.reveal.is-visible { animation: none; }
}

/* ─── Pagina non trovata ─────────────────────────────── */
/* Nel riferimento una 404 non esiste, quindi non c'e' un originale da
   riprodurre: e' costruita con i pezzi che il tema ha gia'.

   Il padding-top e' lo stesso della pagina di dettaglio news, che ha lo stesso
   problema: senza hero, il contenuto partirebbe sotto la navbar fissa e il
   titolo resterebbe nascosto dietro di essa. Sta in style.css e non in un
   foglio suo perche' sono sei righe e la 404 non e' una sezione: e' una
   schermata di sistema, che deve funzionare anche quando tutto il resto no. */
.errore-section {
	padding-top: calc(128px + var(--wp--custom--topbar-height));
}

.errore-box {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

/* Il codice grande sopra il titolo. Trasparente ma non decorativo: e' il
   numero dell'errore, quindi resta testo vero e uno screen reader lo legge.

   Il margine negativo recupera il vuoto che l'interlinea lascia sotto le
   cifre, cosi' il titolo comincia dove finisce il tratto invece che a mezza
   altezza. Il valore non e' a occhio: misurato sul carattere, l'inchiostro di
   "404" finisce a 0,862em dall'alto del riquadro, quindi ne avanzano 0,138.
   In em e non in px, cosi' regge la scala fluida del corpo. */
.errore-codice {
	margin: 0 0 -0.14em;
	font-size: clamp(7rem, 22vw, 14rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: calc(-0.06em + 0.8px);
	color: var(--wp--preset--color--secondary);
	opacity: .1;
	user-select: none;
}

.errore-testo {
	margin-top: 16px;
	margin-bottom: 32px;
	color: var(--wp--preset--color--text-muted);
}

/* ─── Link "Scopri di piu' / Vedi tutti" ────────────── */
/* Trascrizione di .news-link di components.css. Sta qui perche' e' condiviso
   fra piu' sezioni. Nel carosello news i suoi valori sono ripetuti a maggiore
   specificita' dentro news.css: li' e' un <p> e non uno <span> come nel
   riferimento, quindi .corso-card p lo batterebbe. */
.news-link {
	font-size: .88rem;
	font-weight: 600;
	color: var(--wp--preset--color--amber);
}

.news-link:hover {
	text-decoration: underline;
}

/* Come i link del footer: l'ancora "Vedi tutti" e' alta 19px, il padding la
   porta a 25 e il margine negativo tiene fermo il layout. Non tocca i .news-link
   delle card, che sono paragrafi e non link. */
a.news-link {
	display: inline-block;
	padding-block: 3px;
	margin-block: -3px;
}

/* Stessa ragione, per le famiglie di link che stanno sotto i 24px in altezza:
   recapiti, link di ritorno. Sono elementi in linea, e su quelli il padding
   verticale allarga la scatola senza toccare l'altezza della riga: l'area
   cliccabile cresce e il layout resta identico.

   FUORI da questo elenco i titoli di .corso-card e .bando-card, per due
   ragioni. La prima: da quando le card vengono dall'archivio, il titolo e' un
   core/post-title e la sua ancora e' inline-block, non in linea - li' il
   padding verticale ALZA davvero la scatola, e le card diventano 8px piu'
   alte del riferimento. La seconda: non serve, perche' quelle ancore hanno
   gia' un ::after con inset: 0 che rende cliccabile l'intera card, cioe'
   un'area molto piu' grande dei 24px che questa regola insegue. */
.cl-value a,
.cl-body a,
.info-box-contact a,
.zone-note a,
.step-item a,
.checkbox-label a,
.ff-el-form-check-label a,
.comm-card :is(h2, h3) a,
.article-back a,
.article-body p a {
	padding-block: 4px;
}

/* Il filtro "UE" e' largo 22,84px: la parola e' corta. Allargare il pulsante
   sposterebbe la barra rispetto al riferimento, quindi l'area da toccare la
   allarga un riquadro trasparente sopra di esso, che non occupa spazio. Il
   pulsante e' gia' position: relative per la riga dello stato attivo, e i 28px
   di gap fra i filtri restano piu' che sufficienti perche' due aree non si
   sovrappongano. */
.filter-btn::before {
	content: '';
	position: absolute;
	inset: -8px -10px;
}

/* ─── Pulsanti ──────────────────────────────────────── */
/* Trascrizione di .btn / .btn-primary di components.css. Colore, raggio,
   spaziatura, corpo e peso stanno in theme.json (styles.elements.button), che
   li rende modificabili dall'editor: qui restano solo le proprieta' che
   theme.json non sa esprimere. */
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	transition: var(--wp--custom--transition);
}

/* .btn-outline, .btn-sm e .btn.is-disabled del riferimento.
   Valgono sull'elemento perche' i pulsanti delle card corsi non sono
   core/button ma <a class="wp-element-button"> generati da render.php; la
   variante contornata copre anche lo stile "Contorno" che core registra su
   core/button, che senza queste righe perderebbe contro il verde pieno di
   theme.json (le regole di core stanno dentro :where(), specificita' zero). */
.wp-element-button.btn-outline,
.wp-block-button.is-style-outline .wp-element-button {
	border: 2px solid var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary);
	background: transparent;
}

/* Lo stile "Contorno" di core, oltre al bordo, riscrive anche il padding a
   .667em 1.333em, e quella regola non sta dentro :where(): batte theme.json e
   fa un pulsante 4px piu' basso degli altri. Nel riferimento .btn-outline
   eredita il padding di .btn, quindi va rimesso quello di theme.json. Tre
   classi per non dipendere dall'ordine di caricamento. */
.wp-block-button.is-style-outline > .wp-element-button.wp-block-button__link {
	padding: 12px 28px;
}

.wp-element-button.btn-outline:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.wp-element-button.btn-sm {
	padding: 8px 20px;
	font-size: .875rem;
}

/* Il pulsante c'e' ma non porta da nessuna parte. Senza href l'ancora non e'
   raggiungibile da tastiera, quindi aria-disabled e tabindex dell'originale
   qui non servono. */
.wp-element-button.is-disabled {
	opacity: .45;
	pointer-events: none;
	cursor: not-allowed;
}