/* ============ CSS VARIABLES ============ */
:root {
	--acc-primary-start: #dc6c2f;
	--acc-primary-end: #d43061;
	--acc-gradient: linear-gradient(45deg, var(--acc-primary-start), var(--acc-primary-end));
	--acc-bg-light: #e1e1e1;
	--acc-bg-white: #ffffff;
	--acc-text-dark: #000000;
	--acc-text-light: #ffffff;
	--acc-border-radius: 20px;
	--acc-border-radius-sm: 16px;
	--acc-border-radius-xs: 10px;
	--acc-transition: all 0.3s ease;
	--acc-shadow: 0 2px 6px rgba(0,0,0,0.2);
	--acc-shadow-hover: 0 4px 12px rgba(0,0,0,0.3);
}

/* Stili per keyboard shortcuts help */
#accessibility-panel .keyboard-help {
	color: var(--acc-text-light);
	text-align: center;
}

#accessibility-panel kbd {
	background: rgba(255, 255, 255, 0.2);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: monospace;
	font-size: 0.85em;
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	display: inline-block;
	margin: 0 2px;
}

/* Transizioni smooth per tutti gli elementi accessibilità */
#accessibily-widget *,
body *[data-accessibility-original="true"] {
	transition: font-size 0.2s ease, line-height 0.2s ease, background-color 0.3s ease, opacity 0.3s ease;
}

#accessibily-widget #accessibility-toggle {
	display: flex;
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
	border: 1px solid #a3a3a3;
	border-radius: var(--acc-border-radius-xs);
	font-size: 3rem !important;
	box-shadow: var(--acc-shadow);
	background-color: var(--acc-bg-white) !important;
	transform: scale(calc(1 / var(--zoom-level, 1)));
	transform-origin: top right;
	cursor: pointer;
	z-index: 10000;
	transition: var(--acc-transition);
}

#accessibily-widget #accessibility-toggle:hover {
	box-shadow: var(--acc-shadow-hover);
	transform: scale(calc(1.05 / var(--zoom-level, 1)));
}

#accessibily-widget #accessibility-toggle:focus {
	outline: 3px solid var(--acc-primary-start);
	outline-offset: 2px;
}

#accessibily-widget #accessibility-panel{
	position: fixed;
	box-sizing: border-box;
	bottom: 55px;
	left: 10px;
	height: 80%;
	overflow: hidden;
	max-width: 500px;
	width: 100%;
	color: var(--acc-text-dark) !important;
	background-color: var(--acc-bg-light) !important;
	padding: 0;
	border-radius: var(--acc-border-radius);
	z-index: 9999;
	font-size: 1.6rem !important;
	box-shadow: var(--acc-shadow-hover);
	transform: scale(calc(1 / var(--zoom-level, 1)));
	transform-origin: bottom right;
	font-family: 'work sans', sans-serif !important;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#accessibily-widget #accessibility-panel[style*="display: none"] {
	opacity: 0;
	pointer-events: none;
}
#accessibily-widget #accessibility-panel > *{
	font-family: 'work sans', sans-serif !important;
}

#accessibily-widget #accessibility-panel #accessibility-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0px;
	background: var(--acc-gradient);
	color: var(--acc-text-light);
	padding: 10px;
	border-radius: var(--acc-border-radius);
	flex-direction: column;
	text-align: center;
	padding-bottom: 4rem;
}

#accessibily-widget #accessibility-panel #accessibility-header .header-buttons-box {
	display:flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	gap: 8px;
}

#accessibily-widget #accessibility-panel #accessibility-header #close-accessibility-box {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	align-items: flex-end;
}

#accessibily-widget #accessibility-panel #accessibility-header #close-accessibility {
	background: var(--acc-text-dark);
	border: none;
	color: var(--acc-text-light);
	border-radius: 50%;
	width: 28px;
	height: 28px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
	transition: var(--acc-transition);
}

#accessibily-widget #accessibility-panel #accessibility-header #close-accessibility:hover {
	background: #333;
	transform: rotate(90deg);
}

#accessibily-widget #accessibility-panel #accessibility-header .header-button{
	display: flex;
	gap: 1rem;
	background: var(--acc-bg-white);
	color: var(--acc-text-dark);
	padding: 10px;
	border-radius: var(--acc-border-radius);
	text-align: center;
	cursor: pointer;
	transition: var(--acc-transition);
}

#accessibily-widget #accessibility-panel #accessibility-header .header-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#accessibily-widget #accessibility-panel #accessibility-header .header-button:active {
	transform: translateY(0);
}

#accessibily-widget #accessibility-panel .accessibility-body {
	margin-top: -3rem !important;
	width: 90%;
	margin: auto;
	height:100%;
	min-height:100%;
	overflow-y: auto;
	padding-bottom: 150px;
}

#accessibily-widget #accessibility-panel .accessibility-body > div{
	background: var(--acc-bg-white);
	margin-bottom: 20px;
	border-radius: 25px;
	padding: 20px;
	transition: var(--acc-transition);
}

#accessibily-widget #accessibility-panel .focus-icon{
	display:inline-flex;align-items:center;justify-content:center;
}

#accessibily-widget #accessibility-panel span.acc-widget-title {
	margin-top: 0;
	text-transform: uppercase;
	color:#fff !important;
	font-size: 24px !important
}

#accessibily-widget #accessibility-panel .header-button{
	border: none;
	font-size: 16px !important
}

#accessibily-widget #accessibility-panel span.acc-widget-subtitle{
	margin-top: 0;
	color:#000 !important;
	font-size: 19px !important;
	font-weight: normal;
	margin-bottom: 0.7rem !important;
	display: inline-block;
}

#accessibility-panel .accessibility-body > div {
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
}

#accessibility-panel .accessibility-body .grid-content {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
	width: 100%;
	box-sizing: border-box;
}

#accessibility-panel .accessibility-body .grid-content2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	width: 100%;
	box-sizing: border-box;
}

#accessibility-panel .accessibility-body .grid-content > label,
#accessibility-panel .accessibility-body .grid-content2 > label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	background: var(--acc-bg-light);
	padding: 10px;
	text-align: center;
	white-space: normal;
	word-break: break-word;
	border-radius: var(--acc-border-radius-sm);
	height: 110px;
	transition: var(--acc-transition);
	border: 2px solid transparent;
}

#accessibility-panel .accessibility-body .grid-content > label:hover,
#accessibility-panel .accessibility-body .grid-content2 > label:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#accessibility-panel label:has(input[type="checkbox"]:checked) {
	background: var(--acc-gradient);
	border-color: transparent;
	color: var(--acc-text-light);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.08) inset;
	transform: scale(1.02);
}

#accessibility-panel label:has(input[type="checkbox"]:checked) > .focus-icon svg path {
	fill: var(--acc-text-light) !important;
	transition: fill 0.3s ease;
}

#accessibility-panel .access-range {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	height: 10px;
	background: var(--acc-bg-white);
	border-radius: var(--acc-border-radius-xs);
	border: 1px solid #b5b1b1;
	transition: var(--acc-transition);
}

#accessibility-panel .access-range:focus {
	outline: 2px solid var(--acc-primary-start);
	outline-offset: 2px;
}

/* Chrome, Edge, Safari */
#accessibility-panel .access-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--acc-gradient);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#accessibility-panel .access-range::-webkit-slider-thumb:hover {
	transform: scale(1.2);
	box-shadow: 0 0 8px rgba(220, 108, 47, 0.5);
}

/* Firefox */
#accessibility-panel .access-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--acc-gradient);
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#accessibility-panel .access-range::-moz-range-thumb:hover {
	transform: scale(1.2);
	box-shadow: 0 0 8px rgba(220, 108, 47, 0.5);
}

#accessibility-panel .large-text {
	font-size: 1.25em;
}

#accessibility-title,
#features-title,
#note-title,
#feedback-title {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 10px;
	line-height:1.1;
}

#approach-title{
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 10px;
	line-height:1.1;
}
/* end stili widget accessibilità */

.declaration-dialog {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10001;
	border-radius: 20px;
	overflow: hidden;
}

.declaration-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	border-radius: 15px;
	width: 95%;
	max-width: 475px;
	max-height: 95%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	font-size: 1rem;
}

.declaration-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--acc-gradient);
	color: var(--acc-text-light);
	padding: 15px 20px;
	border-radius: 15px 15px 0 0;
}

.declaration-header h2 {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 600;
}

.declaration-header button {
	background: #000;
	border: none;
	color: white;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
}

.declaration-body {
	padding: 20px;
	overflow-y: auto;
	color: #333;
	line-height: 1.6;
}

.declaration-body p {
	margin-bottom: 15px;
}

.declaration-body strong {
	display: block;
	margin-top: 10px;
	margin-bottom: 5px;
	color: #000;
}

/* sito in alto contrasto */
html.high-contrast,
html.high-contrast :not(#accessibility-panel):not(#accessibility-panel *):not(#accessibility-toggle) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}

html.high-contrast a:not(#accessibility-panel a) {
	color: #0ff !important;
}

html.high-contrast button:not(#accessibility-toggle):not(#accessibility-panel button) {
	background-color: #111 !important;
	color: #fff !important;
	border-color: #fff !important;
}

/* sito in scala di grigio */
html.grayscale {
	position: relative;
}

html.grayscale::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999999;
	backdrop-filter: grayscale(100%);
}

html.inverse {
	filter: invert(1) brightness(1.1);
}

.large-text,
.large-text * {
	font-size: 1.15em !important;
	line-height: 1.5 !important;
}

body.focus-visible button:focus,
body.focus-visible input:focus,
body.focus-visible select:focus,
body.focus-visible textarea:focus,
body.focus-visible a:focus,
body.focus-visible a:focus img {
	outline: none !important;

	box-shadow: 0 0 6px 3px #ffff00, 0 0 2px #333 inset !important;
	border: 2px solid #000 !important;
	position: relative;
	z-index: 10000;
}

body button:focus,
body input:focus,
body select:focus,
body textarea:focus,
body a:focus,
body a:focus img {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
	border-radius: 4px;
	z-index: 1000;
}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

.hover-highlight :hover:not(#accessibility-panel):not(#accessibility-panel *):not(#accessibility-toggle):not(#accessibility-toggle *) {
	outline: none !important;
	box-shadow: 0 0 0 3px var(--acc-primary-start) !important;
	border-radius: 3px;
	position: relative;
	transition: box-shadow 0.2s ease;
}

/* Wrapper per zoom contenuto pagina (escluso widget) */
#page-content-zoom-wrapper {
	transform-origin: top left;
	width: 100%;
	transition: transform 0.3s ease, zoom 0.3s ease;
}

/* Gestione overflow quando la pagina è zoomata */
body.page-zoomed {
	overflow-x: auto;
}

body.big-cursor {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0,0 L0,40 L10,30 L20,48 L24,46 L14,28 L26,28 Z" fill="black" stroke="black" stroke-width="2"/></svg>') 0 0, auto !important;
}

body.big-cursor a,
body.big-cursor button,
body.big-cursor [role="button"],
body.big-cursor input[type="submit"],
body.big-cursor input[type="button"] {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="45" viewBox="1003.04 -508.97 1435.76 1841.82" fill="black"><path d="M 1485.67 590.407 C 1500.7 589.503 1508.31 581.987 1508.45 567.859 C 1509.57 477.719 1510.09 423.984 1510.01 406.654 C 1508.85 114.109 1507.57 -97.041 1510.19 -357.64 C 1510.51 -386.26 1512.49 -406.67 1516.16 -418.86 C 1528.17 -458.85 1554.63 -490.61 1596.98 -497.73 C 1663.84 -508.97 1713.74 -468.84 1723.51 -403.48 C 1725.91 -387.42 1727.04 -368.85 1726.92 -347.81 C 1725.52 -106.55 1725.16 102.029 1725.83 277.919 C 1725.86 287.629 1728.28 294.509 1733.12 298.559 C 1746.44 309.799 1767.32 300.659 1767.25 282.679 C 1766.65 143.159 1766.52 59.239 1766.86 30.939 C 1767.52 -28.031 1808.62 -75.141 1869.29 -76.461 C 1885.69 -76.801 1897.01 -76.491 1903.23 -75.571 C 1935.28 -70.791 1959.43 -53.971 1975.68 -25.091 C 1991.6 3.199 1990.87 26.439 1990.94 64.639 C 1991.1 138.869 1990.63 223.469 1989.55 318.439 C 1989.42 330.369 1990.39 337.989 1992.45 341.299 C 2002.99 358.149 2029.99 351.369 2030.11 329.129 C 2030.83 205.259 2031.58 137.189 2032.36 124.919 C 2034.57 90.129 2055.14 54.879 2088.69 41.439 C 2110.81 32.599 2145.52 32.489 2167.57 37.559 C 2202.67 45.699 2227.5 74.789 2236.22 109.579 C 2238.23 117.539 2239.19 131.729 2239.08 152.159 C 2238.52 275.069 2238.22 354.549 2238.19 390.576 C 2238.19 401.088 2239.69 408.126 2242.69 411.69 C 2252.18 422.887 2271.67 419.826 2277.44 405.143 C 2278.14 403.361 2278.51 396.581 2278.53 384.803 C 2278.63 345.799 2278.43 302.219 2277.94 254.049 C 2277.8 237.679 2278.8 225.899 2280.97 218.719 C 2288.99 191.989 2309.44 172.579 2337.96 171.069 C 2387.05 168.469 2423.88 196.249 2434.89 243.399 C 2436.73 251.269 2437.57 264.639 2437.4 283.489 C 2436.74 362.299 2436.87 439.533 2437.83 515.209 C 2438.8 593.519 2437.62 652.174 2434.34 691.174 C 2420.68 854.148 2378.62 1008.88 2308.16 1155.37 C 2288.89 1195.38 2265.44 1234.28 2237.81 1272.06 C 2228.4 1284.92 2218.77 1293.72 2208.9 1298.45 C 2202.99 1301.26 2190.35 1304.92 2170.98 1309.41 C 2153.96 1313.36 2138.29 1316.01 2123.98 1317.35 C 1958.98 1332.85 1793.44 1329.9 1627.89 1301.93 C 1607.29 1298.45 1593.27 1295.89 1579.36 1279.66 C 1553.59 1249.59 1536.15 1214.88 1517.8 1175.52 C 1484.79 1104.8 1449.74 1031.82 1412.68 956.556 C 1396.46 923.651 1379.85 892.49 1362.83 863.072 C 1307.44 767.225 1249.74 678.544 1189.74 597.032 C 1173.94 575.543 1155.74 553.021 1135.24 529.466 C 1086.44 473.367 1052.85 434.703 1034.35 413.472 C 1011.25 386.779 1003.04 355.899 1025.94 326.499 C 1100.24 231.189 1231.05 307.439 1290.85 376.823 C 1345.06 439.817 1404.65 507.731 1469.63 580.566 C 1472.99 584.337 1477.11 587.372 1481.95 589.671 C 1483.1 590.23 1484.38 590.483 1485.67 590.407 Z"/></svg>') 0 0, pointer !important;
}

body.line-height-adjusted {
	--custom-line-height: 1.5;
}

body.line-height-adjusted * {
	line-height: var(--custom-line-height) !important;
}

@media only screen and (max-width: 767px) {
	#accessibily-widget #accessibility-panel {
		max-width: 90% !important;
		width: 90% !important;
		left: 50% !important;
		transform: translateX(-50%) scale(calc(1 / var(--zoom-level, 1))) !important;
		transform-origin: center bottom !important;
		bottom: 10px !important;
		height: 70vh !important;
	}

	#accessibily-widget #accessibility-toggle {
		bottom: 5px !important;
		left: 5px !important;
		transform: scale(calc(1 / var(--zoom-level, 1))) !important;
		transform-origin: bottom left !important;
	}

	/* Header più compatto su mobile */
	#accessibily-widget #accessibility-panel #accessibility-header {
		padding-bottom: 4rem !important;
	}

	/* Bottoni header più piccoli su mobile */
	#accessibily-widget #accessibility-panel #accessibility-header .header-button {
		padding: 6px 8px !important;
		font-size: 16px !important;
	}

	/* Griglie più compatte su mobile */
	#accessibility-panel .accessibility-body .grid-content {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	#accessibility-panel .accessibility-body .grid-content2 {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	/* Font size più piccolo su mobile */
	#accessibily-widget #accessibility-panel {
		font-size: 1.4rem !important;
	}
	#accessibily-widget #accessibility-panel span.acc-widget-title {
		margin-top: 0;
		text-transform: uppercase;
		color: #fff !important;
		font-size: 18px !important;
	}
		.declaration-content {
		width: 95%;
		max-height: 85%;
	}

	.declaration-header h2 {
		font-size: 1.6rem;
	}

	.declaration-body {
		padding: 15px;
		font-size: 1.4rem;
	}
}