/**
 * Séfora — Widget di accessibilità. Adattato da BOINT.
 * Posizione: basso-sinistra (per non sovrapporsi al pulsante esistente a destra).
 */

.a11y-widget {
	--sa-blue: #13388c;
	--sa-blue-d: #0e2a6b;
	--sa-accent: #1aa37a;
	--sa-ink-50: #f7f8fb;
	--sa-ink-100: #eef1f6;
	--sa-ink-150: #e3e6ee;
	--sa-ink-200: #d4d9e4;
	--sa-ink-300: #b9c0cf;
	--sa-ink-500: #6b7384;
	--sa-ink-600: #545b6a;
	--sa-ink-900: #1d2433;
	--sa-tr: .18s ease;

	position: fixed;
	left: 28px;
	right: auto;
	bottom: 28px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	font-family: inherit;
}
.a11y-widget, .a11y-widget *, .a11y-widget *::before, .a11y-widget *::after { box-sizing: border-box; }
.a11y-tile { min-width: 0; }

@media (max-width: 720px) {
	.a11y-widget { left: 14px; bottom: 14px; }
}

/* ---- Trigger (FAB) ---- */
.a11y-widget__trigger {
	width: 58px; height: 58px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sa-blue);
	color: #fff;
	border: 3px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(19, 56, 140, .35);
	transition: background var(--sa-tr), transform var(--sa-tr);
	position: relative;
	flex: none;
}
.a11y-widget__trigger:hover { background: var(--sa-blue-d); }
.a11y-widget__trigger:focus-visible { outline: 3px solid var(--sa-accent); outline-offset: 3px; }

.a11y-widget__badge {
	position: absolute; top: -4px; right: -4px;
	width: 22px; height: 22px;
	color: #18A957; border-radius: 999px;
	display: none; align-items: center; justify-content: center;
	background: #fff; box-shadow: 0 0 0 2px #fff;
}
.a11y-widget__badge svg { width: 22px; height: 22px; }
.a11y-widget--has-changes .a11y-widget__badge { display: inline-flex; }

/* ---- Pannello ---- */
.a11y-widget__panel[hidden] { display: none !important; }
.a11y-widget__panel {
	position: relative;
	width: 344px; max-width: calc(100vw - 40px);
	background: #fff;
	border: 1px solid var(--sa-ink-150);
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(20, 30, 70, .22);
	padding: 18px;
	display: flex; flex-direction: column; gap: 14px;
}
.a11y-widget__panel::after {
	content: ''; position: absolute;
	left: 26px; bottom: -7px;
	width: 14px; height: 14px;
	background: #fff;
	border-right: 1px solid var(--sa-ink-150);
	border-bottom: 1px solid var(--sa-ink-150);
	transform: rotate(45deg);
}

/* ---- Header ---- */
.a11y-widget__header {
	display: flex; align-items: center; gap: 11px;
	padding: 2px 2px 14px;
	border-bottom: 1px solid var(--sa-ink-150);
}
.a11y-widget__header-icon {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: #EEF2FB; color: var(--sa-blue);
	border-radius: 12px; flex: none;
}
.a11y-widget__header-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.a11y-widget__title { font-size: 1.2rem; font-weight: 700; line-height: 1; color: var(--sa-ink-900); margin: 0; }
.a11y-widget__subtitle { font-size: .75rem; color: var(--sa-ink-500); }
.a11y-widget__close {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border: 0;
	background: var(--sa-ink-100); border-radius: 9px;
	cursor: pointer; color: var(--sa-ink-600); flex: none;
	transition: background var(--sa-tr), color var(--sa-tr);
}
.a11y-widget__close:hover { background: var(--sa-ink-150); color: var(--sa-ink-900); }
.a11y-widget__close:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: 2px; }

/* ---- Griglia ---- */
.a11y-widget__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* ---- Tile ---- */
.a11y-tile {
	display: flex; align-items: center; gap: 10px;
	padding: 11px;
	background: var(--sa-ink-50);
	border: 1px solid var(--sa-ink-150);
	border-radius: 14px; cursor: pointer; text-align: left;
	font-family: inherit;
	transition: background var(--sa-tr), border-color var(--sa-tr), box-shadow var(--sa-tr);
}
.a11y-tile:hover { background: var(--sa-ink-100); }
.a11y-tile:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: 2px; }
.a11y-tile__icon {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	background: #fff; color: var(--sa-blue);
	border: 1px solid var(--sa-ink-150); border-radius: 10px; flex: none;
	transition: background var(--sa-tr), color var(--sa-tr), border-color var(--sa-tr);
}
.a11y-tile__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.a11y-tile__title { font-size: .8125rem; font-weight: 700; line-height: 1.15; color: var(--sa-ink-900); transition: color var(--sa-tr); }
.a11y-tile__valuewrap { display: flex; align-items: center; gap: 6px; }
.a11y-tile__value { font-size: .6875rem; font-weight: 700; color: var(--sa-ink-500); transition: color var(--sa-tr); }
.a11y-tile__value--active { color: var(--sa-accent); }
.a11y-tile__sub { font-size: .6875rem; font-weight: 600; color: var(--sa-ink-500); }

.a11y-tile__steps { display: inline-flex; gap: 3px; }
.a11y-tile__step { width: 13px; height: 4px; border-radius: 2px; background: var(--sa-ink-200); transition: background var(--sa-tr); }
.a11y-tile__step.is-on { background: var(--sa-accent); }

.a11y-tile--toggle.is-active {
	background: var(--sa-blue); border-color: var(--sa-blue);
	box-shadow: 0 8px 20px rgba(19, 56, 140, .25);
}
.a11y-tile--toggle.is-active .a11y-tile__icon { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: #fff; }
.a11y-tile--toggle.is-active .a11y-tile__title { color: #fff; }
.a11y-tile--toggle.is-active .a11y-tile__value { color: rgba(255,255,255,.88); }

.a11y-tile--reset { background: #fff; border: 1px dashed var(--sa-ink-300); }
.a11y-tile--reset:hover { background: var(--sa-ink-50); }
.a11y-tile--reset .a11y-tile__icon { background: var(--sa-ink-100); color: var(--sa-ink-600); border-color: transparent; }

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

/* =========================================================
   Stati `a11y-*` applicati a <html> dal bootstrap/JS
   ========================================================= */

/* 1. Nascondi immagini — copre <img>, sfondi Elementor/Jet e inline.
   (preserva loghi del sito e il widget stesso) */

/* 1a. Immagini <img> / picture / figure */
html.a11y-no-images img,
html.a11y-no-images picture,
html.a11y-no-images figure img,
html.a11y-no-images .elementor-widget-image img,
html.a11y-no-images .wp-block-image img { display: none !important; }

/* 1b. Sfondi via CSS (Elementor sezioni/container, overlay, ::before/::after,
   elementi Jet, e inline style="background-image") */
html.a11y-no-images .elementor-element,
html.a11y-no-images .elementor-background-overlay,
html.a11y-no-images .e-con,
html.a11y-no-images .e-con-inner,
html.a11y-no-images [class*="jet-"],
html.a11y-no-images [style*="background-image"],
html.a11y-no-images .elementor-element::before,
html.a11y-no-images .elementor-element::after,
html.a11y-no-images .e-con::before,
html.a11y-no-images .e-con::after,
html.a11y-no-images .elementor-element > .elementor-background-video-container,
html.a11y-no-images .elementor-element > .elementor-background-slideshow {
	background-image: none !important;
}

/* 1c. Ripristina sempre i loghi del sito (il widget usa SVG inline, non serve).
   Il widget non è dentro .elementor-element, quindi i suoi sfondi sono salvi. */
html.a11y-no-images .custom-logo,
html.a11y-no-images .raven-site-logo img,
html.a11y-no-images .jupiterx-logo img { display: revert !important; }

/* 2. Dimensione testo */
html.a11y-font-medium { font-size: 112.5%; }
html.a11y-font-large  { font-size: 125%; }

/* 3. Spaziatura testo (WCAG SC 1.4.12) */
html.a11y-spacing-medium { letter-spacing: .06em; word-spacing: .10em; }
html.a11y-spacing-large  { letter-spacing: .12em; word-spacing: .16em; }

/* 4. Altezza linea (WCAG SC 1.4.12) */
html.a11y-line-medium p, html.a11y-line-medium li { line-height: 1.75 !important; }
html.a11y-line-large  p, html.a11y-line-large  li { line-height: 2.1 !important; }

/* 5. Allineamento testo */
html.a11y-align-left   p, html.a11y-align-left   li, html.a11y-align-left   h1, html.a11y-align-left   h2, html.a11y-align-left   h3, html.a11y-align-left   h4 { text-align: left   !important; }
html.a11y-align-right  p, html.a11y-align-right  li, html.a11y-align-right  h1, html.a11y-align-right  h2, html.a11y-align-right  h3, html.a11y-align-right  h4 { text-align: right  !important; }
html.a11y-align-center p, html.a11y-align-center li, html.a11y-align-center h1, html.a11y-align-center h2, html.a11y-align-center h3, html.a11y-align-center h4 { text-align: center !important; }

/* 6. Evidenzia link */
html.a11y-highlight-links a:not(.a11y-widget__trigger):not(.a11y-widget__close):not(.a11y-tile) {
	background: #FFF59E !important;
	color: #000 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	box-shadow: 0 0 0 2px #FFF59E !important;
	border-radius: 2px;
}

/* 7. Ferma animazioni */
html.a11y-no-animations,
html.a11y-no-animations *,
html.a11y-no-animations *::before,
html.a11y-no-animations *::after {
	animation-duration: .01ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: .01ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}