/*
Theme Name: Covo
Theme URI: https://www.prolococovo.com/
Description: Tema a blocchi per Pro Loco Covo. Palette e font derivati dall'identità esistente: cremisi e ambra dal logo, H3inz come carattere display, Atkinson Hyperlegible per la lettura. Sostituisce l'impianto Hello Elementor + Elementor Pro.
Author: Pro Loco Covo
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: covo
Tags: block-theme, full-site-editing, one-column, accessibility-ready
*/

/* Il grosso degli stili sta in theme.json. Qui solo ciò che theme.json non copre. */

/* Etichetta sopra il titolo: è un'etichetta, non un secondo titolo. */
.covo-eyebrow,
.covo-eyebrow a {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.covo-eyebrow a:hover { text-decoration: underline; }

/* Meta della scheda (data, luogo): tono minore, cifre allineate. */
.covo-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	font-variant-numeric: tabular-nums;
}

/* Immagine in evidenza a tutta larghezza senza spezzare il ritmo verticale. */
.covo-hero img {
	width: 100%;
	height: clamp(15rem, 46vh, 30rem);
	object-fit: cover;
	display: block;
}

/* L'anello di focus serve a chi naviga da tastiera, e va mostrato solo a lui:
   con :focus il riquadro restava anche dopo un clic col mouse. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 0;
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* Le schede della griglia: superficie propria, niente ombre finte. */
.covo-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--muted);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------------------
   Visibilità per dispositivo.
   Riproduce le opzioni "Nascondi su desktop/tablet/mobile" di Elementor, che
   il sito usava in 16 punti — fra cui le due immagini di apertura della home.
   Punti di rottura identici a quelli del sito originale: 767 e 1024.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.covo-hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.covo-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.covo-hide-desktop { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Footer: sfondo verde, quindi tutto il testo e i collegamenti vanno in bianco.
   Senza questa regola i link prenderebbero il rosso di accento e sparirebbero.
   --------------------------------------------------------------------------- */
.wp-block-group.has-primary-background-color a,
.wp-block-group.has-primary-background-color a:visited {
	color: #FFFFFF;
	text-decoration-color: rgba(255, 255, 255, .45);
}
.wp-block-group.has-primary-background-color a:hover {
	color: var(--wp--preset--color--amber);
	text-decoration-color: currentColor;
}
.covo-contatti { list-style: none; padding-left: 0; }
.covo-contatti li { margin-bottom: .35rem; }

/* Il menu resta grande anche sul pannello a scomparsa del mobile. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: clamp(1.75rem, 7vw, 3rem);
}

/* ---------------------------------------------------------------------------
   Menu principale: maiuscolo, con un divisore fra una voce e l'altra.
   Il divisore è decorativo, quindi va in ::after e non nel markup: gli screen
   reader leggono le voci, non le barrette.
   --------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: .02em;
}
.wp-block-navigation:not(.is-vertical) .wp-block-navigation-item {
	position: relative;
}
.wp-block-navigation:not(.is-vertical) .wp-block-navigation-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: calc(var(--wp--style--block-gap, 1.5rem) / -2);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 1.1em;
	background: currentColor;
	opacity: .3;
}
/* Nel pannello a scomparsa le voci stanno una sotto l'altra: niente barrette. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after {
	display: none;
}

/* I titoli del footer stanno in colonne strette: niente a capo. */
.covo-footer-titolo {
	white-space: nowrap;
	letter-spacing: .01em;
	margin-bottom: .6rem;
}

/* ---------------------------------------------------------------------------
   Titolo di pagina: H3inz, verde, centrato — come sul sito.
   Vale solo per le PAGINE: i loro titoli sono otto, curati, e ho verificato
   che nessuno usi i caratteri che a H3inz mancano. I titoli degli articoli
   restano nel carattere di lettura, perché lì gli apostrofi ci sono davvero.
   --------------------------------------------------------------------------- */
.covo-titolo-pagina {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 6vw, 70px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--wp--preset--color--primary);
	text-align: center;
	letter-spacing: 0;
}

/* Titoli di sezione nel verde dell'associazione: è il colore portante del sito
   e dà unità alle pagine senza doverlo ripetere elemento per elemento. */
.wp-block-post-content h2:not([class*="covo-"]),
.wp-block-post-content h3:not([class*="covo-"]) {
	color: var(--wp--preset--color--primary);
}

/* La firma sparisce quando non c'è un artista da citare (luoghi, eventi). */
.covo-firma:empty { display: none; }

/* ---------------------------------------------------------------------------
   Titoli di sezione: sono i cardini della pagina, quindi centrati e grandi
   come sul sito. La regola vale solo per i figli diretti del contenuto — i
   titoli dentro le colonne restano allineati al loro testo.
   --------------------------------------------------------------------------- */
.page .wp-block-post-content > h2 {
	/* Solo nelle pagine di sezione: negli articoli i titoli seguono il testo,
	   altrimenti "Programma" sta centrato sopra un paragrafo allineato a
	   sinistra e sembra scollegato. */
	text-align: center;
	font-size: clamp(2rem, 4.4vw, 3rem);
	line-height: 1.08;
	color: var(--wp--preset--color--primary);
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------------
   Barra social fissa sul bordo destro, come sul sito.
   È navigazione secondaria: sta fuori dal flusso e non deve coprire il testo,
   quindi sparisce sotto i 1200px dove lo spazio laterale non c'è.
   --------------------------------------------------------------------------- */
.covo-barra-social {
	position: fixed;
	right: .9rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
}
.covo-barra-social .wp-block-social-link { margin: 0; }
@media (max-width: 1200px) {
	.covo-barra-social { display: none; }
}

/* ---------------------------------------------------------------------------
   I bordi del sito.

   Rilevati nel CSS di Elementor e verificati sul rendering: 62 immagini con
   `3px solid` nel verde dell'associazione, i campi dei moduli uguali, i
   pulsanti a contorno rosso. Raggio zero ovunque: il sito non ha un solo
   angolo arrotondato, ed è parte del suo carattere.

   Le immagini dentro il corpo degli articoli invece NON hanno bordo
   (verificato: `0px none`): il bordo marca le schede, non ogni figura.
   --------------------------------------------------------------------------- */
.covo-riga__foto img,
.covo-tessera__foto img,
.covo-scheda__foto img {
	border: 3px solid var(--wp--preset--color--primary);
	border-radius: 0;
}

/* Campi dei moduli: stesso bordo, fondo bianco, spigolo vivo. */
.ff-el-form-control,
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form input[type="number"],
.frm-fluent-form input[type="date"],
.frm-fluent-form select,
.frm-fluent-form textarea {
	border: 3px solid var(--wp--preset--color--primary) !important;
	border-radius: 0 !important;
	background: #FFFFFF !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: .55rem .8rem !important;
}
.frm-fluent-form .ff-btn-submit {
	border: 3px solid var(--wp--preset--color--accent) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--accent) !important;
	font-weight: 700;
}
.frm-fluent-form .ff-btn-submit:hover {
	background: var(--wp--preset--color--accent) !important;
	color: #FFFFFF !important;
}

/* Nel footer, sul verde, i campi si stagliano col bordo bianco. */
.has-primary-background-color .ff-el-form-control {
	border-color: #FFFFFF !important;
}
.has-primary-background-color .frm-fluent-form .ff-btn-submit {
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}
.has-primary-background-color .frm-fluent-form .ff-btn-submit:hover {
	background: #FFFFFF !important;
	color: var(--wp--preset--color--primary) !important;
}

/* Niente angoli arrotondati da nessuna parte: è la regola del sito. */
.wp-block-button__link,
.wp-block-search__button,
.wp-block-image img { border-radius: 0; }

/* La mappa non ha bordo sul sito: tolgo quello che avevo messo io. */
.covo-mappa__tela { border: 0; }

/* ---------------------------------------------------------------------------
   Le due forme di scheda delle liste.
   .covo-riga     — elenchi di luoghi e opere: foto a sinistra, testo a destra
   .covo-tessera  — griglie di locandine: foto sopra, titolo sotto, così le
                    immagini partono tutte dalla stessa altezza qualunque sia
                    la lunghezza del titolo
   --------------------------------------------------------------------------- */
.covo-riga {
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--muted);
	padding-bottom: var(--wp--preset--spacing--30);
}
.covo-lista > li:last-child .covo-riga { border-bottom: 0; }
.covo-riga__foto { flex: 0 0 clamp(240px, 38%, 420px); margin: 0; }
.covo-riga__foto img,
.covo-tessera__foto img {
	width: 100%;
	height: auto;
	display: block;
	border: 3px solid var(--wp--preset--color--primary);
}
.covo-riga__testo { flex: 1 1 auto; min-width: 0; }

.covo-tessera { height: 100%; }
.covo-tessera__foto { margin: 0 0 .2rem; }

.covo-scheda__titolo { margin: 0; }

.covo-scheda__titolo a { color: var(--wp--preset--color--primary); text-decoration: none; }
.covo-scheda__titolo a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.covo-riga { flex-wrap: wrap; }
	.covo-riga__foto { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   Scheda singola: la banda di colore è a tutta larghezza, il banner dentro
   resta alla misura del contenuto. Prima l'immagine correva da bordo a bordo
   e si sgranava.
   --------------------------------------------------------------------------- */
.covo-banner { margin: 0; }
.covo-banner img {
	/* Le locandine sono verticali: a piena larghezza il banner diventava alto
	   1700px, due schermi. Limito l'altezza e lascio che l'immagine trovi la
	   sua larghezza, centrata nella banda. Niente ritaglio: la locandina si
	   legge tutta. */
	max-height: min(62vh, 34rem);
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
}

/* Precedente / successivo: due voci in riga, separate da un filetto sopra,
   non più due blocchi larghi quanto la pagina. */
.covo-nav-post { border-top: 1px solid var(--wp--preset--color--muted); }
.covo-nav-post .wp-block-post-navigation-link {
	max-width: 46%;
	font-weight: 600;
}
.covo-nav-post__succ { text-align: right; }
.covo-nav-post a { color: var(--wp--preset--color--primary); text-decoration: none; }
.covo-nav-post a:hover { text-decoration: underline; }
@media (max-width: 640px) {
	.covo-nav-post .wp-block-post-navigation-link { max-width: 100%; }
	.covo-nav-post__succ { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Immagini dentro le sezioni affiancate: una foto verticale molto alta
   sbilancia la riga e supera il testo che le sta accanto. La limito e la
   ritaglio dal centro, così le due colonne restano appaiate.
   --------------------------------------------------------------------------- */
.wp-block-column .wp-block-image img {
	max-height: 34rem;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* Il banner delle pagine sta alla misura del contenuto, senza bordo. */
.covo-hero img {
	width: 100%;
	height: clamp(15rem, 46vh, 30rem);
	object-fit: cover;
	display: block;
	border: 0;
}

/* Il video segue il contenitore come ogni altro blocco: la larghezza la
   decide il layout vincolato, non io. Qui imposto solo le proporzioni, che
   altrimenti l'iframe di YouTube tiene quelle fisse dell'oEmbed. */
.wp-block-post-content .wp-block-embed.is-type-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
}

/* Carrello nella testata: verde come il menu, non nero. */
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__quantity-badge,
.wc-block-mini-cart__button svg {
	color: var(--wp--preset--color--primary);
	fill: currentColor;
}
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent);
	color: #FFFFFF;
	border-color: var(--wp--preset--color--accent);
}

/* Il core impone `color: inherit` sulle voci di menu con una specificità che
   batte theme.json, quindi il verde va dichiarato qui. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item {
	/* !important perché il core dichiara `color: inherit` sulle voci di menu e
	   la cascata, in questo punto, non si lascia battere dalla specificità. */
	color: var(--wp--preset--color--primary) !important;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent) !important;
}

/* La riga di elenco è allineata in alto e la foto pesa quanto il testo:
   con il sunto accanto, il centrato lasciava la colonna destra sospesa. */
.covo-riga { align-items: flex-start; }
.covo-riga__foto { flex: 0 0 clamp(260px, 42%, 520px); }
.covo-scheda__sunto {
	margin: .5rem 0 .6rem;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	max-width: 62ch;
}
.covo-riga__testo .covo-freccia { margin-top: .2rem; }

/* ---------------------------------------------------------------------------
   Barra social fissa sul bordo destro.
   Icone e logo restano nelle misure di prima. L'unica aggiunta è il disco
   bianco dietro le icone: erano verdi e sparivano quando sotto scorreva la
   banda verde del banner.
   --------------------------------------------------------------------------- */
.covo-barra-social .wp-block-social-links {
	gap: .55rem;
}
.covo-barra-social .wp-block-social-link {
	/* appena piu' grande dell'icona: 3px di bianco per staccarla dal fondo */
	width: 40px;
	height: 40px;
	background: #FFFFFF;
	border-radius: 50%;
}
.covo-barra-social .wp-block-social-link-anchor {
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.covo-barra-social .wp-block-social-link svg {
	width: 34px;
	height: 34px;
	fill: var(--wp--preset--color--primary);
	transition: fill .16s ease, transform .16s ease;
}
.covo-barra-social .wp-block-social-link:hover svg {
	fill: var(--wp--preset--color--accent);
	transform: scale(1.08);
}
.covo-barra-social img { width: 60px !important; height: auto; }

/* ---------------------------------------------------------------------------
   Menu a tendina "Scopri Covo".
   Le sezioni da visitare sono sette e in fila non ci stavano: con otto voci
   il menu andava a capo già a 1440px. Il pannello segue le regole del sito —
   spigolo vivo, bordo verde da 3px, testo verde.
   --------------------------------------------------------------------------- */
.wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 3px solid var(--wp--preset--color--primary) !important;
	border-radius: 0 !important;
	padding: .35rem 0;
	min-width: 15rem;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .5rem 1.1rem;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--secondary);
}
/* Le voci del sottomenu non portano il divisore verticale. */
.wp-block-navigation__submenu-container .wp-block-navigation-item::after { display: none; }

/* La freccetta del sottomenu prende il colore del testo. */
.wp-block-navigation__submenu-icon { fill: currentColor; }

/* Nel pannello a scomparsa del mobile il sottomenu è già aperto in verticale. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	padding-left: 1rem;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   Il collegamento della scheda: parola più freccia cerchiata, come sul sito.
   La freccia da sola non basterebbe — uno screen reader leggerebbe "freccia"
   e nient'altro — quindi la parola resta e l'icona l'accompagna.
   È applicata come maschera, così prende il colore del testo anche in hover.
   --------------------------------------------------------------------------- */
.covo-freccia {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	line-height: 1;
}
.covo-freccia::after {
	content: "";
	width: 1.9em;
	height: 2em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url('assets/img/freccia-maschera.svg') no-repeat center / contain;
	mask: url('assets/img/freccia-maschera.svg') no-repeat center / contain;
	transition: transform .18s ease;
}
.covo-freccia:hover { color: var(--wp--preset--color--primary); }
.covo-freccia:hover::after { transform: translateX(.18em); }

/* ---------------------------------------------------------------------------
   Schede senza fotografia.

   Metà dei contenuti nuovi non ha ancora un'immagine, e senza un segnaposto
   l'elenco si spezza in due: righe di solo testo in alto, righe con foto
   sotto. Sembra un errore, non una scelta.

   Il riquadro con lo stemma tiene la griglia allineata e dice a chi guarda
   che lì una foto ci andrà. Sparisce da solo appena la foto viene caricata.
   --------------------------------------------------------------------------- */
.covo-riga:not(:has(.covo-riga__foto))::before,
.covo-tessera:not(:has(.covo-tessera__foto))::before {
	content: "";
	flex: 0 0 clamp(260px, 42%, 520px);
	aspect-ratio: 3 / 2;
	border: 3px solid var(--wp--preset--color--primary);
	background:
		url('assets/img/stemma.png') no-repeat center / auto 46%,
		var(--wp--preset--color--secondary);
	opacity: .55;
}
.covo-tessera:not(:has(.covo-tessera__foto))::before {
	flex: none;
	width: 100%;
	aspect-ratio: 4 / 5;
}

/* Il testo della riga non deve allargarsi a dismisura accanto alla foto. */
.covo-riga__testo { max-width: 62ch; }
.covo-scheda__sunto { max-width: 58ch; }

/* Separazione fra le righe un po' più netta. */
.covo-riga {
	border-bottom: 1px solid var(--wp--preset--color--muted);
	padding-bottom: var(--wp--preset--spacing--30);
}