/* Fase 2 PWA: override mirati sopra il CSS del tema (includes/pwa-mobile.php, flag kalima_pwa_css).
   Il resto del sito è già fluido a 360 px (giro di 178 pagine: nessuno scroll orizzontale): qui solo ciò che manca. */

/* YouTube: iframe in un contenitore 16/9 a tutta larghezza (il filtro kalima_yt_riscrivi aggiunge il contenitore). */
.kalima-yt {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	background: #1A1A2E;
	border-radius: 10px;
	overflow: hidden;
}
.kalima-yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Immagini dei contenuti mai oltre la colonna. */
:is(.tutor-lesson-wrapper, .tutor-course-details-content, .entry-content) img {
	max-width: 100%;
	height: auto;
}

/* App installata (standalone) con viewport-fit=cover: il contenuto arriva sotto notch e barra di stato. */
@media (display-mode: standalone) {
	body {
		padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
	}
	.kh-header {
		padding-top: env(safe-area-inset-top);
	}
}

/* Il sito non ha un tema scuro: gli esercizi H5P restano chiari anche se il browser scurisce le pagine
   (dentro l'iframe lo stesso vale con kalima-h5p-mobile.css). */
.kl-h5p-wrap iframe,
.h5p-iframe {
	color-scheme: only light;
}

/* Learning area (lezioni e quiz di Tutor) a tutte le larghezze: la freccia «torna su» di Astra copriva «Successivo». */
.single-lesson #ast-scroll-top,
.single-tutor_quiz #ast-scroll-top {
	display: none !important;
}

/* Selettore lingua nell'intestazione di Tutor a tutte le larghezze (js/kalima-lingua-testa.js lo sposta in .tutor-learning-header-inner,
   prima dell'interruttore del tema e del pulsante del menu): e' un elemento della riga flessibile, non sta sopra niente.
   Il titolo prende lo spazio che resta e si tronca con i puntini; l'elenco si apre verso il basso, ancorato al bordo destro del
   selettore (quindi verso sinistra, anche per le lingue RTL: la pagina resta LTR), dentro lo schermo. */
html.kalima-lingua-in-testa .tutor-learning-header .kalima-lingua-angolo {
	position: static !important;
	flex: none;
	order: 1;
	margin-inline: 8px 4px;
	z-index: 30 !important;
}
html.kalima-lingua-in-testa .tutor-learning-header .kt-sw-testa {
	order: 2;
	margin-inline-start: 0;
}
html.kalima-lingua-in-testa .tutor-learning-header .tutor-learning-header-toggle-mobile {
	order: 3;
}
html.kalima-lingua-in-testa .tutor-learning-header .tutor-learning-header-content {
	order: 0;
	flex: 1 1 0;
	width: auto !important;
	min-width: 0;
}
html.kalima-lingua-in-testa .tutor-learning-header-inner {
	flex-wrap: nowrap;
	align-items: center;
	overflow: visible; /* Tutor lo vuole hidden: tagliava l'elenco delle lingue; il titolo si tronca da solo (overflow sul titolo) */
}
.kalima-lingua-in-testa details {
	display: block !important; /* inline-block lasciava 4 px di riga sotto */
}
.kalima-lingua-in-testa summary {
	box-sizing: border-box !important;
	display: flex !important;
	width: fit-content;
	min-height: 36px !important; /* il tema (kalima.css) mette 40 px */
	height: 36px !important;
	padding-block: 0 !important;
}
.kalima-lingua-in-testa details ul {
	top: 100% !important;
	bottom: auto !important;
	left: auto !important;
	right: 0 !important;
}
.kalima-lingua-in-testa summary > span:last-child {
	font-size: 0 !important; /* la freccia ▲ diventa ▼ */
}
.kalima-lingua-in-testa summary > span:last-child::after {
	content: "\25BC";
	font-size: 9px;
}
/* Titoli lunghi: puntini invece del taglio netto sotto il selettore (se kalima-titoli.css e' attivo il titolo va su due righe
   e il troncamento con i puntini e' alla seconda). */
html.kalima-lingua-in-testa .tutor-learning-header-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Testata di Tutor (titolo, selettore lingua, menu) sempre raggiungibile sotto 1024 px, per gli utenti connessi (gli anonimi
   non cambiano).
   Tutor la fa sticky fino a 768 px e fixed da 769 px, ma lo sticky salta ogni volta che <html> prende overflow:hidden
   (menu del curriculum aperto, modali e tour di Tutor, che bloccano lo scorrimento): allora body{overflow-x:hidden} del tema
   non si propaga piu' alla finestra, body diventa un contenitore di scorrimento suo e la testata scorre via con la pagina.
   overflow-x:clip non crea contenitori di scorrimento: la testata resta agganciata alla finestra in ogni stato.
   Altezza compatta: padding verticale da 8 a 4 px (controlli e titolo invariati). Sopra 1024 px niente cambia. */
@media (max-width: 1023.98px) {
	body.logged-in.single-lesson,
	body.logged-in.single-tutor_quiz {
		overflow-x: clip;
	}
	body.logged-in.single-lesson .tutor-learning-area .tutor-learning-header,
	body.logged-in.single-tutor_quiz .tutor-learning-area .tutor-learning-header {
		top: 0;
		padding-block: 4px;
	}
	/* Un'ancora (#...) non deve fermarsi sotto la testata. */
	body.logged-in.single-lesson .tutor-learning-area-content [id],
	body.logged-in.single-tutor_quiz .tutor-learning-area-content [id] {
		scroll-margin-top: 64px;
	}
}

/* Riserva di ripiego: se lo script non ha spostato il selettore, resta fuori dai pulsanti: a destra, sopra la barra di Tutor
   (il pulsante Dizionario sta a sinistra). */
html:not(.kalima-lingua-in-testa) .single-lesson .kalima-lingua-angolo,
html:not(.kalima-lingua-in-testa) .single-tutor_quiz .kalima-lingua-angolo {
	left: auto !important;
	right: 12px !important;
	bottom: var(--kd-bt, 93px) !important;
}

/* Fondo della lezione, dove c'e' il dizionario: l'ultima parola deve poter scorrere sopra il pannello.
   Padding = altezza massima del pannello + altezza della barra di Tutor + 16 px. L'altezza del pannello e' quella di
   kalima-traduzioni.css (46vh; da 768 px anche min(46vh, 100vh - distanza dal basso - 76 px)); --kd-barra la scrive
   kalima-dizionario.js. Il padding sta sul testo della lezione (.tutor-lesson-wrapper), non sul contenitore: da 481 px la barra
   Precedente/Successivo sta in coda al contenuto (sticky), e un padding sotto di lei la staccherebbe dal bordo dello schermo
   in fondo alla pagina. */
html.kd-attivo:not(.kd-spento) .tutor-lesson-wrapper {
	padding-bottom: calc(46vh + var(--kd-barra, 81px) + 16px);
}
@media (min-width: 768px) {
	html.kd-attivo:not(.kd-spento) .tutor-lesson-wrapper {
		padding-bottom: calc(min(46vh, 100vh - var(--kd-barra, 81px) - 88px) + var(--kd-barra, 81px) + 16px);
	}
}

/* Learning area (lezioni e quiz di Tutor) sotto 480 px: più spazio agli H5P e barra in basso libera.
   Solo con le classi del body di lezione/quiz; misure e screenshot in docs/h5p-mobile-2026-11-04/. */
@media (max-width: 480px) {
	/* Contenitori esterni: l'iframe H5P parte a ~5 px dal bordo; dentro il testo parte a 12-16 px (il resto
	   della lezione resta con i suoi margini: solo il riquadro dell'esercizio esce di 6 px dal tab). */
	.tutor-learning-area .tutor-learning-area-container {
		padding-inline: 10px;
	}
	.tutor-learning-area .tutor-lesson-content {
		margin-inline: -10px;
	}
	.tutor-learning-area .tutor-lesson-content-tab {
		padding-inline: 8px;
	}
	/* A destra Tutor lascia 8 px in più (padding-right di .tutor-learning-area-content): -11 pareggia il margine a sinistra. */
	.tutor-learning-area .kl-h5p-wrap {
		margin-inline: -6px -11px;
		padding: 0 !important;
		border-left-width: 3px;
	}
	.tutor-learning-area .kl-h5p-label {
		padding-inline: 8px;
	}
	/* Fondo del contenuto: altezza della barra fissa di Tutor (≈ 81) + un po' d'aria. Con il dizionario la barra e' gia' nel
	   padding del testo della lezione (regola sopra). */
	.single-lesson .tutor-learning-area-container,
	.single-tutor_quiz .tutor-learning-area-container {
		padding-bottom: 96px;
	}
	html.kd-attivo:not(.kd-spento) .single-lesson .tutor-learning-area-container {
		padding-bottom: 0;
	}
}