/* Dentro l'iframe H5P (includes/pwa-mobile.php, azione h5p_alter_library_styles). Solo schermi stretti:
   il media query guarda la larghezza dell'iframe, cioè della colonna della lezione. Nessun contenuto si modifica. */

/* Il sito non ha un tema scuro: l'esercizio resta chiaro anche se il browser scurisce le pagine
   (H5P non ha regole prefers-color-scheme: il nero viene dal browser, che scurisce l'iframe). */
:root {
	color-scheme: only light;
}

/* Piede: «Embed» si spegne dalle opzioni di H5P (h5p_embed = 0). «Reuse» lo vedono solo gli amministratori
   (permesso di copia, non un'opzione del sito): qui si nasconde per tutti. Il logo H5P resta. */
.h5p-actions .h5p-button.h5p-export {
	display: none !important;
}

@media (max-width: 480px) {
	/* Bersagli da almeno 44 px: pulsanti (Verifica, Riprova, Avanti, Indietro), campi, tessere da trascinare. */
	.h5p-theme-button,
	.h5p-theme-nav-button,
	.h5p-joubelui-button {
		min-height: 44px !important;
	}
	.h5p-text-input {
		box-sizing: border-box !important; /* altezza 44 px totale, padding compreso (prima arrivava a 58) */
		min-height: 44px !important;
		height: 44px !important;
		font-size: 16px !important; /* sotto i 16 px iOS ingrandisce la pagina al tocco */
	}
	.h5p-draggable,
	.h5p-dropzone {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}
	/* Tessere lunghe: vanno a capo invece di uscire dal riquadro. */
	.h5p-draggable,
	.h5p-dropzone {
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere;
	}
	.h5p-draggable { touch-action: none; }
	/* Immagini dentro l'esercizio mai oltre il riquadro. */
	.h5p-content img { max-width: 100% !important; height: auto !important; }

	/* ── Margini e padding: il testo usa quasi tutta la larghezza (prima 24+16+24 px per lato) ── */
	.h5p-content .h5p-question-introduction {
		margin-inline: 8px !important;
		font-size: 18px;
		line-height: 1.3;
	}
	.h5p-content .question-container .h5p-question-introduction {
		margin-inline: 0 !important; /* il QuestionSet ha già il padding del riquadro */
	}
	.h5p-content .h5p-question-introduction p,
	.h5p-content .h5p-question-introduction div {
		font-size: inherit;
		line-height: inherit;
	}
	.h5p-content .h5p-navigation,
	.h5p-content .h5p-dialogcards-title-container {
		padding-inline: 8px;
	}
	/* QuestionSet: il riquadro della domanda quasi a filo (testo a ~8 px dall'iframe), contenuto a tutta larghezza. */
	.h5p-content .question-container.h5p-question {
		margin-inline: 0 !important;
		padding-inline: 6px !important;
	}
	/* DragText e Blanks: testo a ~14 px dal bordo dello schermo (iframe a 5 + 8 di padding + 1). */
	.h5p-content .h5p-question-content,
	.h5p-content .h5p-question-evaluation-container {
		padding-inline: 8px;
	}
	/* Dentro il QuestionSet il riquadro ha già il suo padding: qui niente. */
	.h5p-content .question-container .h5p-question-content,
	.h5p-content .question-container .h5p-question-evaluation-container {
		padding-inline: 0 !important;
	}

	/* QuestionSet: risposte a tutta larghezza, 16/1.35; frecce e puntini in una riga. */
	.h5p-content .h5p-answers {
		margin: 0;
		padding: 0;
	}
	.h5p-content .h5p-answer,
	.h5p-content .h5p-alternative-container {
		width: 100%;
		box-sizing: border-box;
	}
	.h5p-content .h5p-alternative-container {
		padding-inline: 12px;
		font-size: 16px;
		line-height: 1.35;
	}
	.h5p-content .h5p-alternative-inner {
		margin-inline: 6px;
		font-size: 16px;
		line-height: 1.35;
	}
	.h5p-content .h5p-navigation {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}
	.h5p-content .h5p-theme-nav-button {
		min-width: 44px;
		font-size: 16px;
		padding-inline: 8px;
	}
	.h5p-content .h5p-progress-dots-container {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
	}

	/* DragText: caselle lontane tra loro, perché il dito copre la zona e sbaglia di qualche pixel.
	   Interlinea 68 px (font invariato), caselle da 44 px con 10 px sopra e sotto (24 px tra una riga e l'altra), 6 px ai
	   lati (almeno 12 px tra due caselle sulla stessa riga). Lo spazio da solo non basta: vedi js/kalima-h5p-mobile.js. */
	.h5p-content .h5p-drag-droppable-words-container {
		padding-inline: 8px;
	}
	.h5p-content .h5p-drag-droppable-words,
	.h5p-content .h5p-drag-droppable-words p {
		line-height: 68px;
	}
	.h5p-content .h5p-dropzone,
	.h5p-content .h5p-dropzone .ui-droppable {
		min-height: 44px !important;
		box-sizing: border-box;
	}
	.h5p-content .h5p-dropzone {
		margin: 10px 6px !important;
	}
	.h5p-content .h5p-dropzone .ui-droppable {
		margin: 0;
	}
	.h5p-content .h5p-draggable {
		margin-block: 4px;
	}
	/* Tocca la parola, poi tocca la casella (H5P lo prevede): la parola scelta si vede, e le caselle che la aspettano. */
	.h5p-content .h5p-draggable[aria-grabbed="true"] {
		outline: 3px solid #1B4B8A;
		outline-offset: 2px;
	}
	.h5p-content .h5p-dropzone [aria-dropeffect="move"] {
		outline: 2px dashed #1B4B8A;
		outline-offset: 2px;
	}
	.h5p-content .h5p-blanks .h5p-question-content p,
	.h5p-content .h5p-question-content > div > p {
		line-height: 1.5;
		margin: 0 0 4px;
	}

	/* Nessun testo sotto 15 px: anche la riga «Incorpora» in fondo all'esercizio (prima 12 px). */
	.h5p-content .h5p-actions,
	.h5p-content .h5p-actions .h5p-button {
		font-size: 15px;
		line-height: 1.4;
	}

	/* Dialogcards: scheda a tutta larghezza utile, testo 18 px. */
	.h5p-content .h5p-dialogcards-cardwrap {
		padding-inline: 5px !important;
	}
	.h5p-content .h5p-dialogcards-card-text-wrapper {
		padding-inline: 4px !important;
	}
	.h5p-content .h5p-dialogcards-card-text-inner,
	.h5p-content .h5p-dialogcards-card-text-inner-content {
		padding-inline: 4px !important;
	}
	.h5p-content .h5p-dialogcards-card-text-area,
	.h5p-content .h5p-dialogcards-card-text-area p {
		font-size: 18px;
		line-height: 1.35;
	}
}