/* ==========================================================
   Accessibility widget - אנרזול
   ========================================================== */

/* Trigger button */
#a11y-toggle {
	position: fixed;
	right: 18px;
	bottom: 21px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 0;
	background: #1d6fb8;
	color: #fff;
	cursor: pointer;
	z-index: 16000170;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s, transform .2s;
}
#a11y-toggle:hover,
#a11y-toggle:focus {
	background: #0f4f87;
	transform: scale(1.06);
	outline: 3px solid #fff;
	outline-offset: 2px;
}
#a11y-toggle svg {
	width: 32px;
	height: 32px;
	fill: #fff;
}

/* Panel */
#a11y-panel {
	position: fixed;
	right: 18px;
	bottom: 85px;
	width: 300px;
	max-width: calc(100vw - 36px);
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	background: #fff;
	color: #222;
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.3);
	z-index: 16000171;
	direction: rtl;
	text-align: right;
	font-family: 'Heebo', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	display: none;
}
#a11y-panel[aria-hidden="false"] {
	display: block;
}
#a11y-panel * {
	direction: rtl;
	box-sizing: border-box;
}
#a11y-panel .a11y-head {
	background: #1d6fb8;
	color: #fff;
	padding: 12px 16px;
	border-radius: 12px 12px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#a11y-panel .a11y-head h2 {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	color: #fff;
}
#a11y-panel .a11y-close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
}
#a11y-panel .a11y-close:hover,
#a11y-panel .a11y-close:focus {
	outline: 2px solid #fff;
	border-radius: 4px;
}
#a11y-panel .a11y-body {
	padding: 12px;
}
#a11y-panel .a11y-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
#a11y-panel .a11y-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #f3f6f9;
	border: 2px solid #dde4ec;
	border-radius: 8px;
	padding: 10px 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: #222;
	cursor: pointer;
	text-align: center;
	min-height: 70px;
	font-family: inherit;
	transition: background .15s, border-color .15s;
}
#a11y-panel .a11y-btn:hover,
#a11y-panel .a11y-btn:focus {
	background: #e3edf7;
	border-color: #1d6fb8;
	outline: none;
}
#a11y-panel .a11y-btn:focus-visible {
	outline: 3px solid #1d6fb8;
	outline-offset: 1px;
}
#a11y-panel .a11y-btn[aria-pressed="true"] {
	background: #1d6fb8;
	border-color: #1d6fb8;
	color: #fff;
}
#a11y-panel .a11y-btn svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}
#a11y-panel .a11y-font-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f3f6f9;
	border: 2px solid #dde4ec;
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 8px;
}
#a11y-panel .a11y-font-row span {
	font-weight: 500;
	font-size: 13.5px;
}
#a11y-panel .a11y-font-row .a11y-font-ctrl {
	display: flex;
	align-items: center;
	gap: 6px;
}
#a11y-panel .a11y-font-row button {
	width: 34px;
	height: 34px;
	border-radius: 6px;
	border: 2px solid #1d6fb8;
	background: #fff;
	color: #1d6fb8;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}
#a11y-panel .a11y-font-row button:hover,
#a11y-panel .a11y-font-row button:focus {
	background: #1d6fb8;
	color: #fff;
}
#a11y-panel .a11y-font-row output {
	min-width: 44px;
	text-align: center;
	font-weight: 700;
}
#a11y-panel .a11y-foot {
	padding: 10px 12px 12px;
	border-top: 1px solid #e5e5e5;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#a11y-panel .a11y-reset {
	background: #e1271a;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
}
#a11y-panel .a11y-reset:hover,
#a11y-panel .a11y-reset:focus {
	background: #b81d12;
	outline: 2px solid #222;
}
#a11y-panel .a11y-statement {
	text-align: center;
	color: #1d6fb8;
	text-decoration: underline;
	font-size: 14px;
}

@media (max-width: 400px) {
	#a11y-panel {
		right: 10px;
		bottom: 80px;
	}
	#a11y-toggle {
		right: 12px;
	}
}

/* ==========================================================
   Body state classes
   ========================================================== */

/* High contrast */
body.a11y-contrast,
body.a11y-contrast * {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
body.a11y-contrast a,
body.a11y-contrast a * {
	color: #ffff00 !important;
}
body.a11y-contrast input,
body.a11y-contrast button,
body.a11y-contrast .btn {
	background-color: #000 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
}
body.a11y-contrast img,
body.a11y-contrast svg {
	filter: brightness(1.1) contrast(1.2);
}
body.a11y-contrast #a11y-panel,
body.a11y-contrast #a11y-panel * {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}
body.a11y-contrast #a11y-panel .a11y-btn[aria-pressed="true"] {
	background-color: #ffff00 !important;
	color: #000 !important;
}
body.a11y-contrast #a11y-panel .a11y-btn[aria-pressed="true"] * {
	color: #000 !important;
}
body.a11y-contrast #a11y-toggle {
	background: #ffff00 !important;
}
body.a11y-contrast #a11y-toggle svg {
	fill: #000 !important;
}

/* Inverted colors */
body.a11y-invert {
	filter: invert(1) hue-rotate(180deg);
	background: #fff;
}
body.a11y-invert img,
body.a11y-invert video,
body.a11y-invert .jumbotron,
body.a11y-invert .sec-3-bg {
	filter: invert(1) hue-rotate(180deg);
}

/* Grayscale */
body.a11y-grayscale {
	filter: grayscale(1);
}
body.a11y-invert.a11y-grayscale {
	filter: invert(1) hue-rotate(180deg) grayscale(1);
}

/* Highlight links */
body.a11y-links a {
	text-decoration: underline !important;
	outline: 2px solid #e1271a !important;
	outline-offset: 2px;
	background-color: #fff6a0 !important;
	color: #000 !important;
}
body.a11y-links a * {
	color: #000 !important;
}

/* Highlight headings */
body.a11y-headings h1,
body.a11y-headings h2,
body.a11y-headings h3,
body.a11y-headings h4,
body.a11y-headings h5,
body.a11y-headings h6 {
	outline: 2px dashed #1d6fb8 !important;
	outline-offset: 3px;
	background-color: rgba(29,111,184,0.08) !important;
}

/* Readable font */
body.a11y-font,
body.a11y-font * {
	font-family: Arial, Helvetica, 'Segoe UI', sans-serif !important;
}

/* Text spacing */
body.a11y-spacing,
body.a11y-spacing p,
body.a11y-spacing li,
body.a11y-spacing h1,
body.a11y-spacing h2,
body.a11y-spacing h3,
body.a11y-spacing h4,
body.a11y-spacing a,
body.a11y-spacing span {
	line-height: 1.9 !important;
	letter-spacing: 0.08em !important;
	word-spacing: 0.2em !important;
}

/* Big cursor */
body.a11y-cursor,
body.a11y-cursor * {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M4 2 L4 20 L9 15 L12.5 22 L15.5 20.5 L12 13.5 L19 13.5 Z' fill='%23000' stroke='%23fff' stroke-width='1.2'/></svg>") 4 2, auto !important;
}
body.a11y-cursor a,
body.a11y-cursor button,
body.a11y-cursor input[type="submit"],
body.a11y-cursor [role="button"] {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M9 2 C8 2 7.5 2.7 7.5 3.5 L7.5 12 L6 10.5 C5.3 9.8 4.2 9.8 3.5 10.5 C2.9 11.1 2.9 12 3.4 12.7 L8 19 C8.6 20 9.7 21 11 21 L15.5 21 C17.4 21 19 19.4 19 17.5 L19 10.5 C19 9.7 18.3 9 17.5 9 C17.2 9 16.9 9.1 16.7 9.2 C16.6 8.5 16 8 15.3 8 C14.9 8 14.6 8.1 14.3 8.3 C14.1 7.6 13.5 7 12.8 7 C12.4 7 12.1 7.1 11.8 7.3 L11.8 3.5 C11.8 2.7 11 2 10.1 2 Z' fill='%23000' stroke='%23fff' stroke-width='1.2'/></svg>") 12 2, pointer !important;
}

/* Stop animations */
body.a11y-noanim *,
body.a11y-noanim *::before,
body.a11y-noanim *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Strong focus indicator everywhere */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body [tabindex]:focus-visible {
	outline: 3px solid #1d6fb8 !important;
	outline-offset: 2px !important;
}
