/**
 * Accessibilità — Icona e Preferenze / front-end
 */

.wpai {
	--wpai-bg: #1a4b8c;
	--wpai-fg: #ffffff;
	--wpai-offset: 20px;
	--wpai-surface: #ffffff;
	--wpai-text: #1a1a1a;
	--wpai-border: #c9c9c9;

	position: fixed;
	z-index: 9990;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

.wpai--bottom-left  { bottom: var(--wpai-offset); left: var(--wpai-offset); }
.wpai--bottom-right { bottom: var(--wpai-offset); right: var(--wpai-offset); }
.wpai--top-left     { top: var(--wpai-offset); left: var(--wpai-offset); }
.wpai--top-right    { top: var(--wpai-offset); right: var(--wpai-offset); }

/* ---------- Pulsante ---------- */

.wpai__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border: 0;
	border-radius: 50%;
	background: var(--wpai-bg);
	color: var(--wpai-fg);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
	text-decoration: none;
	transition: transform 0.15s ease;
}

.wpai__btn:hover {
	transform: scale(1.06);
}

.wpai__btn:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Fallback per browser senza :focus-visible. */
.wpai__btn:focus {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.wpai__btn:focus:not(:focus-visible) {
	outline: none;
}

.wpai__icon {
	display: block;
	pointer-events: none;
}

.wpai__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Pannello ---------- */

.wpai__panel {
	position: absolute;
	bottom: 60px;
	left: 0;
	width: 300px;
	max-width: calc(100vw - 2 * var(--wpai-offset));
	max-height: 80vh;
	overflow-y: auto;

	/*
	 * Nulla deve sporgere in orizzontale: con overflow-y:auto l'asse
	 * orizzontale diventa a sua volta "auto" e comparirebbe una seconda
	 * barra di scorrimento. Il layout sotto è costruito per non servirsene,
	 * questo resta come rete di sicurezza per le traduzioni più lunghe.
	 */
	overflow-x: hidden;
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var(--wpai-border);
	border-radius: 8px;
	background: var(--wpai-surface);
	color: var(--wpai-text);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.wpai__panel[hidden] {
	display: none;
}

.wpai--bottom-right .wpai__panel,
.wpai--top-right .wpai__panel {
	left: auto;
	right: 0;
}

.wpai--top-left .wpai__panel,
.wpai--top-right .wpai__panel {
	bottom: auto;
	top: 60px;
}

/*
 * Padding e bordo vanno calcolati dentro la larghezza dichiarata: senza
 * questo le tre colonne dei radio sommano i propri 10px di contorno alla
 * frazione di spazio già assegnata e sfondano il pannello.
 */
.wpai__panel *,
.wpai__panel *::before,
.wpai__panel *::after {
	box-sizing: border-box;
}

.wpai__title {
	margin: 0 0 12px;
	padding: 0 34px 0 0; /* spazio per il pulsante di chiusura */
	font-size: 15px;
	font-weight: 700;
	color: inherit;
}

.wpai__group {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
}

.wpai__group legend {
	padding: 0;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
}

/*
 * Griglia invece di flex: minmax(0, 1fr) lascia le colonne libere di
 * scendere sotto la larghezza del proprio contenuto, così un'etichetta
 * lunga manda a capo il testo invece di allargare il pannello.
 */
.wpai__radios {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.wpai__radio,
.wpai__check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 30px;
	font-size: 14px;
	cursor: pointer;
}

.wpai__radio {
	justify-content: center;
	gap: 5px;
	padding: 6px 3px;
	border: 1px solid var(--wpai-border);
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
}

/* Il testo può andare a capo; non deve mai spingere in orizzontale. */
.wpai__radio span,
.wpai__check span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wpai__radio:focus-within,
.wpai__check:focus-within {
	outline: 2px solid var(--wpai-bg);
	outline-offset: 2px;
}

.wpai__radio input,
.wpai__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
}

.wpai__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--wpai-border);
}

.wpai__reset {
	padding: 8px 12px;
	border: 1px solid var(--wpai-border);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
}

.wpai__reset:hover {
	background: rgba(0, 0, 0, 0.05);
}

.wpai__statement {
	font-size: 14px;
	color: var(--wpai-bg);
	text-decoration: underline;
}

.wpai__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.wpai__close:hover {
	background: rgba(0, 0, 0, 0.08);
}

/* ---------- Preferenze applicate al documento ---------- */

/*
 * Scala del testo: agisce sulla root, quindi funziona sui temi che usano
 * unità relative (rem/em). Sui temi con px fissi l'effetto è parziale:
 * è una scelta deliberata, non usiamo !important sul testo del tema.
 */
html.wpai-scaled {
	font-size: calc(100% * var(--wpai-scale, 1));
}

html.wpai-spacing p,
html.wpai-spacing li,
html.wpai-spacing dd,
html.wpai-spacing blockquote {
	line-height: 1.9;
}

html.wpai-hl-links :is(main, article, .entry-content, .site-content) a:not(.wpai__btn) {
	text-decoration: underline;
	text-underline-offset: 2px;
	outline: 1px dotted currentColor;
	outline-offset: 2px;
}

/*
 * Contrasto elevato: palette nero / bianco / giallo, lo schema che gli utenti
 * di questa funzione si aspettano. Qui !important e il selettore universale
 * sono inevitabili, perché devono prevalere su qualunque regola del tema.
 * Conseguenza nota e accettata: spariscono le immagini di sfondo.
 */
html.wpai-contrast,
html.wpai-contrast *,
html.wpai-contrast *::before,
html.wpai-contrast *::after {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html.wpai-contrast a,
html.wpai-contrast a * {
	color: #ff0 !important;
	text-decoration: underline !important;
}

html.wpai-contrast input,
html.wpai-contrast textarea,
html.wpai-contrast select,
html.wpai-contrast button {
	border: 1px solid #fff !important;
}

html.wpai-contrast ::placeholder {
	color: #ccc !important;
	opacity: 1 !important;
}

html.wpai-contrast :focus-visible {
	outline: 3px solid #ff0 !important;
	outline-offset: 2px !important;
}

/* Il widget deve restare distinguibile ora che ogni sfondo è nero. */
html.wpai-contrast .wpai__btn,
html.wpai-contrast .wpai__panel {
	border: 2px solid #fff !important;
}

/*
 * Scala di grigi: il filtro va sull'elemento radice, che per specifica è
 * esente dalla creazione di un containing block. Su body romperebbe il
 * position:fixed del pulsante.
 */
html.wpai-grayscale {
	filter: grayscale(1);
}

/*
 * Font ad alta leggibilità: solo font di sistema, nessun download esterno.
 * Si agisce su un elenco di elementi testuali invece che su *, per non
 * trasformare in lettere le icone dei temi che usano font iconici.
 */
html.wpai-font body,
html.wpai-font p,
html.wpai-font li,
html.wpai-font dt,
html.wpai-font dd,
html.wpai-font h1,
html.wpai-font h2,
html.wpai-font h3,
html.wpai-font h4,
html.wpai-font h5,
html.wpai-font h6,
html.wpai-font a,
html.wpai-font blockquote,
html.wpai-font figcaption,
html.wpai-font label,
html.wpai-font th,
html.wpai-font td,
html.wpai-font input,
html.wpai-font textarea,
html.wpai-font select,
html.wpai-font button {
	font-family: Verdana, Tahoma, "DejaVu Sans", "Segoe UI", sans-serif !important;
	letter-spacing: 0.01em;
}

/*
 * Cursore ingrandito: SVG inline, nessuna richiesta di rete. I campi di
 * testo mantengono il cursore a I, che resta l'indicazione corretta.
 */
html.wpai-cursor,
html.wpai-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2l16 12-6.6 1.2 4.2 8.2-3.4 1.7-4.2-8.2L3 22z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto !important;
}

html.wpai-cursor a,
html.wpai-cursor button,
html.wpai-cursor label,
html.wpai-cursor select,
html.wpai-cursor summary,
html.wpai-cursor [role="button"],
html.wpai-cursor input[type="submit"],
html.wpai-cursor input[type="button"],
html.wpai-cursor input[type="checkbox"],
html.wpai-cursor input[type="radio"] {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M10 3a2 2 0 0 1 4 0v10h1.5V8.5a2 2 0 0 1 4 0V13H21v-2a2 2 0 0 1 4 0v9c0 4.4-3.1 8-7 8h-3c-2 0-3.6-1-4.6-2.6l-4.3-7c-.7-1.2-.3-2.5.9-3.1 1-.6 2.2-.3 2.9.6l.1.2z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 12 1, pointer !important;
}

html.wpai-cursor input[type="text"],
html.wpai-cursor input[type="email"],
html.wpai-cursor input[type="url"],
html.wpai-cursor input[type="search"],
html.wpai-cursor input[type="tel"],
html.wpai-cursor input[type="password"],
html.wpai-cursor input[type="number"],
html.wpai-cursor textarea {
	cursor: text !important;
}

/*
 * Riduzione delle animazioni: qui !important è necessario, perché deve
 * prevalere su qualunque regola del tema. Stesso pattern raccomandato
 * per prefers-reduced-motion.
 */
html.wpai-no-motion *,
html.wpai-no-motion *::before,
html.wpai-no-motion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
	.wpai__btn {
		transition: none;
	}

	.wpai__btn:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.wpai__btn,
	.wpai__panel {
		border: 1px solid CanvasText;
	}
}