/* =========================================================================
   Accessible IL — ווידג'ט נגישות
   כל הכללים ממופתחים בקידומת ail- כדי לא להתנגש עם ערכת הנושא.
   ========================================================================= */

:root {
	--ail-accent: #1b5cff;
	--ail-icon-size: 56px;
	--ail-panel-bg: #ffffff;
	--ail-panel-fg: #16181d;
	--ail-panel-muted: #5b6270;
	--ail-panel-border: #e4e7ee;
	--ail-panel-tile: #f4f6fb;
	--ail-panel-tile-active: #e7efff;
	--ail-shadow: 0 12px 40px rgba(15, 23, 42, .22);
}

/* ---------- כפתור ההפעלה הצף ---------- */
.ail-toggle {
	position: fixed;
	bottom: 20px;
	z-index: 2147483000;
	width: var(--ail-icon-size);
	height: var(--ail-icon-size);
	border-radius: 50%;
	border: none;
	background: var(--ail-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ail-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
	padding: 0;
}
.ail-toggle:hover { transform: scale(1.06); }
.ail-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--ail-accent), var(--ail-shadow);
}
.ail-toggle svg { width: 58%; height: 58%; }
.ail-pos-bottom-right { right: 20px; }
.ail-pos-bottom-left  { left: 20px; }

/* ---------- הפאנל ---------- */
.ail-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 380px;
	max-width: 92vw;
	background: var(--ail-panel-bg);
	color: var(--ail-panel-fg);
	z-index: 2147483001;
	box-shadow: var(--ail-shadow);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.22,.61,.36,1);
	font-family: -apple-system, "Segoe UI", Rubik, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	direction: rtl;
}
.ail-panel.ail-side-right { right: 0; transform: translateX(100%); }
.ail-panel.ail-side-left  { left: 0;  transform: translateX(-100%); }
.ail-panel.ail-open { transform: translateX(0); }

.ail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	background: var(--ail-accent);
	color: #fff;
}
.ail-header h2 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
.ail-close {
	background: rgba(255,255,255,.18);
	border: none;
	color: #fff;
	width: 34px; height: 34px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.ail-close:hover { background: rgba(255,255,255,.32); }
.ail-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.ail-body { overflow-y: auto; padding: 16px 18px 24px; flex: 1; }

.ail-group-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ail-panel-muted);
	margin: 18px 4px 10px;
}
.ail-group-title:first-child { margin-top: 4px; }

.ail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* אריח כפתור פעולה */
.ail-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 14px 8px;
	background: var(--ail-panel-tile);
	border: 2px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	color: var(--ail-panel-fg);
	font-size: 13.5px;
	font-weight: 600;
	min-height: 92px;
	transition: background .15s, border-color .15s;
}
.ail-tile:hover { background: var(--ail-panel-tile-active); }
.ail-tile:focus-visible { outline: 3px solid var(--ail-accent); outline-offset: 2px; }
.ail-tile svg { width: 26px; height: 26px; color: var(--ail-accent); }
.ail-tile.ail-active {
	border-color: var(--ail-accent);
	background: var(--ail-panel-tile-active);
}
.ail-tile .ail-level {
	font-size: 11px;
	font-weight: 700;
	color: var(--ail-accent);
	min-height: 13px;
}
.ail-tile.ail-active .ail-level::before { content: ""; }

.ail-footer {
	border-top: 1px solid var(--ail-panel-border);
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ail-reset {
	width: 100%;
	padding: 12px;
	border: 2px solid var(--ail-panel-border);
	background: #fff;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	color: var(--ail-panel-fg);
}
.ail-reset:hover { border-color: var(--ail-accent); color: var(--ail-accent); }
.ail-reset:focus-visible { outline: 3px solid var(--ail-accent); outline-offset: 2px; }
.ail-statement-link {
	text-align: center;
	font-size: 13px;
	color: var(--ail-panel-muted);
	text-decoration: underline;
}

/* רקע מעומעם מאחורי הפאנל */
.ail-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .35);
	z-index: 2147483000;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s;
}
.ail-overlay.ail-open { opacity: 1; visibility: visible; }

/* =========================================================================
   התאמות הנגישות עצמן — מופעלות ע"י מחלקות על <html>
   ========================================================================= */

/* --- גודל טקסט (בלי גרירת קינון) --- */
html.ail-fs-1 :where(p,li,a,span,label,td,th,dd,dt,button,input,textarea,figcaption,h1,h2,h3,h4,h5,h6,blockquote) { font-size: 1.12em !important; }
html.ail-fs-2 :where(p,li,a,span,label,td,th,dd,dt,button,input,textarea,figcaption,h1,h2,h3,h4,h5,h6,blockquote) { font-size: 1.24em !important; }
html.ail-fs-3 :where(p,li,a,span,label,td,th,dd,dt,button,input,textarea,figcaption,h1,h2,h3,h4,h5,h6,blockquote) { font-size: 1.4em  !important; }
/* לא נוגעים בווידג'ט עצמו */
html[class*="ail-fs-"] #accessible-il-root :where(p,li,a,span,label,button) { font-size: revert !important; }

/* --- מרווח שורות --- */
html.ail-lh-1 body * { line-height: 1.7 !important; }
html.ail-lh-2 body * { line-height: 2.1 !important; }
html.ail-lh-3 body * { line-height: 2.6 !important; }
html[class*="ail-lh-"] #accessible-il-root * { line-height: normal !important; }

/* --- ריווח אותיות --- */
html.ail-ls-1 body * { letter-spacing: .06em !important; word-spacing: .1em !important; }
html.ail-ls-2 body * { letter-spacing: .12em !important; word-spacing: .2em !important; }
html.ail-ls-3 body * { letter-spacing: .2em  !important; word-spacing: .32em !important; }
html[class*="ail-ls-"] #accessible-il-root * { letter-spacing: normal !important; word-spacing: normal !important; }

/* --- גופן קריא --- */
html.ail-readable body :where(p,li,a,span,label,td,th,dd,dt,h1,h2,h3,h4,h5,h6,blockquote,div) {
	font-family: Verdana, Tahoma, Arial, "Open Sans", sans-serif !important;
}
html.ail-readable #accessible-il-root * { font-family: inherit !important; }

/* --- הדגשת קישורים --- */
html.ail-links a {
	outline: 2px solid #ffb300 !important;
	outline-offset: 1px !important;
	background: #fff6d6 !important;
	color: #000 !important;
	text-decoration: underline !important;
}
html.ail-links #accessible-il-root a { outline: none !important; background: none !important; }

/* --- הדגשת כותרות --- */
html.ail-headings :where(h1,h2,h3,h4,h5,h6) {
	outline: 2px dashed var(--ail-accent) !important;
	outline-offset: 2px !important;
	background: rgba(27,92,255,.06) !important;
}

/* --- יישור טקסט --- */
html.ail-align-right body :where(p,li,h1,h2,h3,h4,h5,h6) { text-align: right !important; }
html.ail-align-center body :where(p,li,h1,h2,h3,h4,h5,h6) { text-align: center !important; }
html.ail-align-left body :where(p,li,h1,h2,h3,h4,h5,h6) { text-align: left !important; }
html[class*="ail-align-"] #accessible-il-root * { text-align: start !important; }

/* --- ניגודיות וצבע (על <html>, פרט לווידג'ט) --- */
html.ail-contrast-dark body { background: #0b0d12 !important; }
html.ail-contrast-dark body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,td,th,label,div,blockquote,figcaption):not(#accessible-il-root *) { color: #f2f4f8 !important; }
html.ail-contrast-dark body :where(section,article,aside,main,header,footer,div):not(#accessible-il-root):not(#accessible-il-root *) { background-color: transparent !important; }

html.ail-contrast-light body { background: #ffffff !important; }
html.ail-contrast-light body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,td,th,label,div,blockquote):not(#accessible-il-root *) { color: #16181d !important; }

html.ail-contrast-high body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,td,th,label,blockquote):not(#accessible-il-root *) {
	color: #ffff00 !important;
	background-color: #000 !important;
}
html.ail-contrast-high body { background: #000 !important; }

/* --- אפקטי צבע: מוחלים על מיכל התוכן (#ail-content) ולא על body,
   כדי לא לשבור את המיקום הקבוע של הווידג'ט ולא לצבוע אותו. --- */
html.ail-invert #ail-content { filter: invert(1) hue-rotate(180deg) !important; }

html.ail-grayscale #ail-content { filter: grayscale(1) !important; }

html.ail-saturation-low #ail-content  { filter: saturate(.5) !important; }
html.ail-saturation-high #ail-content { filter: saturate(1.7) !important; }

/* --- הסתרת תמונות --- */
html.ail-hide-images body img:not(#accessible-il-root img),
html.ail-hide-images body picture:not(#accessible-il-root *),
html.ail-hide-images body video { visibility: hidden !important; }

/* --- עצירת אנימציות --- */
html.ail-stop-motion *:not(#accessible-il-root):not(#accessible-il-root *) {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* --- סמן גדול --- */
html.ail-big-cursor,
html.ail-big-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2l30 18-13 3 8 15-6 3-8-15-11 9z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 6 2, auto !important;
}

/* --- הדגשת פוקוס במקלדת --- */
html.ail-focus *:focus {
	outline: 3px solid var(--ail-accent) !important;
	outline-offset: 2px !important;
}

/* --- מדריך קריאה (סרגל אופקי) --- */
.ail-reading-guide {
	position: fixed;
	inset-inline: 0;
	height: 44px;
	background: rgba(27,92,255,.14);
	border-top: 2px solid var(--ail-accent);
	border-bottom: 2px solid var(--ail-accent);
	pointer-events: none;
	z-index: 2147483002;
	display: none;
}
html.ail-guide .ail-reading-guide { display: block; }

/* --- מסכת קריאה (מחשיכה מסביב) --- */
.ail-reading-mask-top,
.ail-reading-mask-bottom {
	position: fixed;
	inset-inline: 0;
	background: rgba(0,0,0,.75);
	pointer-events: none;
	z-index: 2147483002;
	display: none;
}
html.ail-mask .ail-reading-mask-top,
html.ail-mask .ail-reading-mask-bottom { display: block; }

/* מובייל */
@media (max-width: 480px) {
	.ail-panel { width: 100%; max-width: 100%; }
}

/* כיבוד העדפת תנועה מופחתת */
@media (prefers-reduced-motion: reduce) {
	.ail-panel, .ail-toggle, .ail-overlay { transition: none !important; }
}