/*
Theme Name:   Hello Elementor Child
Theme URI:    https://www.orlandoeandc.com/
Description:  Tema figlio di Hello Elementor per il sito di Orlando E&C. Esiste perché le personalizzazioni scritte nel tema padre sparirebbero al suo primo aggiornamento: qui sopravvivono. Va tenuto minimo — tutto ciò che Elementor sa già fare non si scrive qui.
Author:       Nuzzo Dev Studio
Author URI:   https://nuzzo.dev/
Template:     hello-elementor
Version:      1.7.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child
*/

/* ------------------------------------------------------------------
   Menu a schermo intero: restituire la gerarchia che il markup ha già
   OEC-WEBSITE-00013

   Da quando il menu mobile è lo stesso del desktop, le sue 22 voci
   arrivano annidate su tre livelli — verificato nel DOM: sei voci di
   primo livello e sette sottomenu. Il plugin però le rende tutte
   identiche, e un elenco di ventidue voci uguali si legge peggio dei
   sedici di prima.

   Le voci sono centrate, quindi rientrare non funziona: la gerarchia
   si dà con la dimensione e con il peso del testo.
   ------------------------------------------------------------------ */

.content-type-menu .sub-menu > li > a {
	font-size: 0.82em;
	letter-spacing: 0.06em;
	opacity: 0.92;
}

.content-type-menu .sub-menu .sub-menu > li > a {
	font-size: 0.72em;
	letter-spacing: 0.04em;
	opacity: 0.8;
	font-weight: 400;
}

/* Un filo d'aria prima di ogni nuovo gruppo, perché si veda dove
   finisce una sezione e comincia la successiva. */
.content-type-menu > li > a {
	margin-top: 0.6em;
	display: inline-block;
}


/* ------------------------------------------------------------------
   Elenco degli articoli: News & Insights
   OEC-WEBSITE-00020

   Il template del tema stampa gli articoli uno sotto l'altro, a piena
   larghezza, con l'immagine in evidenza alla sua altezza naturale: con
   dieci articoli la pagina diventa un nastro da scorrere per minuti.

   Qui si dà una griglia e si impone un rapporto fisso alle immagini, così
   che le schede abbiano tutte la stessa forma qualunque immagine arrivi
   dalla redazione — che è la cosa che non si può chiedere di garantire a
   mano a ogni pubblicazione.
   ------------------------------------------------------------------ */

.oec-elenco-articoli {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2.5rem 2rem;
	align-items: start;
}

.oec-articolo {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Rapporto fisso: l'immagine riempie lo spazio e viene ritagliata, invece
   di dettare l'altezza della scheda. */
.oec-articolo__immagine img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.oec-articolo .entry-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.3;
}

/* Data e categoria: presenti ma silenziose, non devono competere col titolo. */
.oec-articolo__dati {
	margin: 0;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	opacity: 0.75;
}

.oec-articolo__dati .oec-articolo__categorie::before {
	content: " · ";
}

.oec-articolo p:not(.oec-articolo__dati) {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Su telefono la griglia diventa una colonna sola da sé, grazie a
   auto-fill: qui si riduce solo lo spazio fra le schede. */
@media (max-width: 640px) {
	.oec-elenco-articoli {
		gap: 2rem 0;
	}
}


/* ------------------------------------------------------------------
   Il singolo articolo
   OEC-WEBSITE-00021

   Il tema stampa titolo e contenuto a piena larghezza del contenitore.
   Su una pagina costruita in Elementor va bene, perché la larghezza la
   decide il layout; su un articolo, che è testo continuo, righe da
   millecento pixel sono illeggibili — l'occhio perde il capo della riga
   successiva.

   Qui si dà al testo una misura da lettura e un ritmo verticale. Sono
   regole che valgono SOLO per gli articoli: le classi vengono aggiunte
   dal template del child theme dentro `is_singular( 'post' )`.
   ------------------------------------------------------------------ */

.single-post .page-header .entry-title {
	max-width: 44rem;
	margin-inline: auto;
	line-height: 1.2;
}

.single-post .page-header .oec-articolo__dati,
.oec-articolo__corpo,
.oec-articolo__navigazione {
	max-width: 44rem;
	margin-inline: auto;
}

.single-post .oec-articolo__dati {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	opacity: 0.75;
}

.oec-articolo__dati .oec-articolo__categorie::before {
	content: " · ";
}

.oec-articolo__copertina {
	max-width: 60rem;
	margin: 1.8rem auto 2.4rem;
}

.oec-articolo__copertina img {
	display: block;
	width: 100%;
	height: auto;
}

/* Il corpo del testo: interlinea generosa e stacco fra i blocchi. */
.oec-articolo__corpo {
	font-size: 1.05rem;
	line-height: 1.7;
}

.oec-articolo__corpo > * + * {
	margin-top: 1.1em;
}

.oec-articolo__corpo h2,
.oec-articolo__corpo h3 {
	margin-top: 2.2em;
	line-height: 1.25;
}

.oec-articolo__corpo img {
	max-width: 100%;
	height: auto;
}

/* Navigazione in fondo: ritorno all'elenco su una riga, precedente e
   successivo sulla seguente. */
.oec-articolo__navigazione {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.8rem 1.5rem;
	margin-top: 3rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 0.92rem;
}

.oec-articolo__ritorno {
	flex-basis: 100%;
	font-weight: 600;
}

.oec-articolo__poi {
	margin-inline-start: auto;
	text-align: end;
}

@media (max-width: 640px) {
	.oec-articolo__navigazione {
		flex-direction: column;
	}

	.oec-articolo__poi {
		margin-inline-start: 0;
		text-align: start;
	}
}

/* ------------------------------------------------------------------
   L'ultima tendina del menu si apre verso l'interno
   OEC-WEBSITE-00034

   I sottomenu del menu desktop sono posizionati con `left: 0` sulla
   propria voce, quindi si aprono verso destra. Per le voci centrali va
   bene; per l'ultima — che è già al margine — i suoi 220 px finiscono
   oltre il bordo della pagina.

   Restano nascosti finché non ci si passa sopra, ma il browser li conta
   comunque nella larghezza del documento: ogni pagina del sito mostrava
   una barra di scorrimento orizzontale, a tutte le larghezze desktop.
   A 1920 px il documento misurava 2024.

   Si allinea quindi a destra la tendina dell'ultima voce: si apre verso
   l'interno, dove lo spazio c'è.

   Due selettori invece di uno: `.pll-parent-menu-item` è il selettore di
   lingua, che oggi è l'ultima voce ed è il colpevole misurato;
   `:last-child` regge se un domani venisse aggiunta una voce dopo.
   ------------------------------------------------------------------ */

@media (min-width: 1025px) {

	.hfe-nav-menu li.pll-parent-menu-item > ul.sub-menu,
	.hfe-nav-menu > ul > li:last-child > ul.sub-menu,
	.elementor-nav-menu li.pll-parent-menu-item > ul.sub-menu,
	.elementor-nav-menu > ul > li:last-child > ul.sub-menu {
		left: auto;
		right: 0;
	}
}

/* I sottomenu di terzo livello — le norme sotto «Servizi › Certificazioni» —
   si aprono a 220 px alla destra del proprio ramo. Su schermi stretti quel
   ramo è già lontano dal margine e i nipoti escono: 7 px a 1280, quanto basta
   a far ricomparire la barra di scorrimento.

   Sotto i 1367 px si aprono quindi verso l'interno, a sinistra del ramo. Sopra
   restano dove sono, perché lì lo spazio c'è e l'apertura verso destra è il
   verso che chi naviga si aspetta. */

@media (min-width: 1025px) and (max-width: 1366px) {

	/* Il selettore ricalca quello del plugin — `.hfe-nav-menu
	   .menu-item-has-children .menu-item-has-children .sub-menu`, quattro
	   classi — e vi aggiunge il figlio diretto. Con tre classi soltanto la
	   regola c'era e perdeva, e il valore calcolato restava `left: 220px`. */
	.hfe-nav-menu .menu-item-has-children .menu-item-has-children > ul.sub-menu,
	.elementor-nav-menu .menu-item-has-children .menu-item-has-children > ul.sub-menu {
		left: auto;
		right: 100%;
	}
}


/* ------------------------------------------------------------------
   Condivisione dell'articolo
   OEC-WEBSITE-00037

   Etichette di testo, non icone: non dipendono da un font né da SVG
   incorporati, e stanno con la tipografia del sito invece di
   importarne una estranea.

   Stessa misura da lettura del corpo — 44rem — perché la riga dei
   collegamenti resti allineata al testo sopra invece di correre per
   tutta la larghezza del contenitore.
   ------------------------------------------------------------------ */

.oec-condividi {
	max-width: 44rem;
	margin: 2.5rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
	font-size: 0.9rem;
}

.oec-condividi__etichetta {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	font-size: 0.78rem;
}

/* Il collegamento è un bersaglio, non una parola: 44px di lato è la misura
   sotto la quale un dito sbaglia. L'icona dentro resta piccola, è l'area
   attorno a crescere. */
.oec-condividi__rete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px;
	text-decoration: none;
	border-bottom: 0;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.oec-condividi__rete:hover,
.oec-condividi__rete:focus-visible {
	opacity: 1;
}

/* `focus-visible` senza contorno lascerebbe chi naviga da tastiera senza
   sapere dov'è: l'opacità da sola non basta a dirlo. */
.oec-condividi__rete:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
	border-radius: 4px;
}

/* 20px: abbastanza da riconoscere un logo, abbastanza poco da non gridare
   in fondo a un articolo. `fill` viene dal markup ed è `currentColor`,
   quindi i loghi seguono il colore del testo. */
.oec-condividi__icona {
	width: 20px;
	height: 20px;
	display: block;
}

/* Sotto i 480px le cinque etichette non stanno su una riga: vanno a capo
   da sole grazie a `flex-wrap`, ma senza questo l'etichetta «Condividi»
   resterebbe appiccicata alla prima rete invece di fare da intestazione. */
@media (max-width: 480px) {

	.oec-condividi {
		gap: 0.5rem 0.9rem;
	}

	.oec-condividi__etichetta {
		flex-basis: 100%;
	}
}


/* ------------------------------------------------------------------
   Una bandierina di troppo nel menu a schermo intero
   OEC-WEBSITE-00036

   Il selettore di lingua è una voce di menu CON sottomenu: la voce
   genitore mostra la lingua corrente, le due figlie sono le lingue
   disponibili. Sul desktop il sottomenu resta chiuso finché non ci si
   passa sopra, quindi si vede una bandierina sola e il conto torna.

   Il menu a schermo intero però mostra tutti i livelli aperti — è lo
   stesso motivo per cui in OEC-WEBSITE-00013 si è dovuta dare una
   gerarchia ai sottomenu. Lì il selettore diventa quindi TRE bandierine
   impilate: il genitore, l'inglese e l'italiano, con il genitore che
   ripete la lingua corrente.

   Si toglie il genitore, che è l'unico dei tre a non portare
   informazione: è una bandierina senza etichetta, e serve solo come
   bersaglio per aprire la tendina — cosa che qui non accade, perché è
   già tutto aperto. Restano le due lingue, con la corrente marcata da
   Polylang come `current-lang`.

   La regola vive dentro `.fsmfe-wrapper`, che esiste solo nel menu a
   schermo intero: il desktop non la vede e continua a funzionare.
   ------------------------------------------------------------------ */

.fsmfe-wrapper li.pll-parent-menu-item > a {
	display: none;
}