/*
Theme Name: Sacro Cuore Divi
Description: Tema figlio di Divi per l'Istituto Sacro Cuore di Gesù di Siena. Contiene solo le regole di stile aggiunte a mano: struttura, intestazione, piede di pagina e contenuti si costruiscono nel Divi Builder.
Author: CodyCloud Srls
Author URI: https://www.codycloud.it
Template: Divi
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sacrocuore-divi
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Divi accoda da sé il foglio di stile del genitore e poi questo file:
   non serve alcun wp_enqueue_style in un functions.php del tema figlio.
   Vedi Divi/functions.php, funzione et_divi_enqueue_stylesheet().

   Le regole vanno aggiunte qui solo quando il Divi Builder non offre
   l'impostazione corrispondente. Ogni regola va commentata con il motivo. */

/* Area toccabile dei collegamenti.
 *
 * Il criterio WCAG 2.5.8 chiede bersagli di almeno ventiquattro pixel per lato.
 * Misurati su schermo da 390px, prima dell'intervento: i collegamenti `tel:` e
 * `mailto:` erano alti quindici pixel, le voci del piede di pagina sedici. Su un
 * telefono un bersaglio cosi si manca, e i recapiti sono l'affordance piu utile
 * del sito: un tocco e parte la telefonata.
 *
 * Si ingrandisce l'area, non il carattere: ingrandire il testo sbilancerebbe la
 * fascia dell'intestazione e il piede di pagina.
 *
 * Il Divi Builder non offre l'impostazione, perche agisce sul modulo e non sui
 * collegamenti che il modulo contiene.
 *
 * La regola prende i soli collegamenti che occupano da soli una voce di elenco o
 * un paragrafo: sono quelli che si toccano. I collegamenti dentro una frase
 * restano come sono, ed e corretto — il criterio WCAG 2.5.8 li esenta
 * esplicitamente, e ingrandirli spezzerebbe l'interlinea del testo. */

a[href^="tel:"],
a[href^="mailto:"],
.et_pb_text_inner li > a:only-child,
.et_pb_text_inner p > a:only-child {
	display: inline-block;
	min-height: 24px;
	padding-top: 4px;
	padding-bottom: 4px;
	line-height: 1.5;
}

@media (max-width: 980px) {
	/* Su telefono si concede piu spazio: il pollice e meno preciso del cursore. */
	a[href^="tel:"],
	a[href^="mailto:"],
	.et_pb_text_inner li > a:only-child,
	.et_pb_text_inner p > a:only-child {
		min-height: 32px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* Menu di navigazione su telefono: farlo scorrere dentro di sé.
	 *
	 * Il difetto, riferito dal titolare e riprodotto: «da telefono il menu si
	 * blocca e non scorre». La causa non è un blocco dello scorrimento, ma il
	 * contrario. Il menu ha molte voci — le tre sezioni con i loro sottomenu
	 * arrivano a ventidue righe, oltre 1100px — e Divi lo apre come blocco
	 * `position: absolute` dentro una pagina che, con la griglia delle foto,
	 * supera i 17000px. Trascinando il dito sul menu non si scorre il menu ma
	 * l'intera pagina: il menu, ancorato in alto, sfila via subito e sembra
	 * essersi bloccato.
	 *
	 * Rimedio: si dà al menu uno scorrimento proprio. `overflow-y: auto` lo
	 * rende scorrevole al suo interno; `overscroll-behavior: contain` impedisce
	 * che, arrivati in fondo, il gesto trascini via la pagina sotto.
	 *
	 * L'altezza massima. L'intestazione è un header del Theme Builder, alta e
	 * non fissa: il menu si apre circa 314px sotto il bordo dello schermo. Per
	 * far stare l'intero menu nella pagina visibile si sottrae quello spazio.
	 * Ma su un telefono ruotato in orizzontale lo schermo è alto ~400px, e la
	 * sola sottrazione lascerebbe una fessura — o, sotto i 340px, un valore
	 * negativo che il browser tratta come zero, cioè un menu invisibile. Il
	 * `max()` mette un pavimento: il menu non scende mai sotto il 45% dello
	 * schermo, e il resto si raggiunge scorrendolo.
	 *
	 * `dvh` è l'altezza dinamica del viewport: tiene conto della barra degli
	 * indirizzi che appare e scompare sui telefoni, dove `vh` sbaglierebbe. La
	 * prima riga con `vh` resta come ripiego per i browser che non conoscono
	 * `dvh`.
	 *
	 * Il Divi Builder non offre l'impostazione: governa l'aspetto del menu, non
	 * il suo comportamento quando è più alto dello schermo. */
	.et_mobile_menu {
		max-height: max(45vh, calc(100vh - 340px));
		max-height: max(45dvh, calc(100dvh - 340px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
}