/*
 * bset-a11y: כללי ההתאמה על העמוד.
 * כל יכולת ברמה n מוסיפה ל-<html> את המחלקה a11y-<יכולת>-<n> (ראו bset-a11y.js).
 * הווידג'ט עצמו יושב ב-shadow DOM של <bset-a11y>, כך שהכללים כאן לא נוגעים בו.
 */

/* ---------- הגדלת טקסט ---------- */
html.a11y-textSize-1 { --a11y-scale: 1.15; }
html.a11y-textSize-2 { --a11y-scale: 1.3; }
html.a11y-textSize-3 { --a11y-scale: 1.5; }
html.a11y-textSize-4 { --a11y-scale: 1.75; }
html[class*="a11y-textSize-"] [data-a11y-fs] {
  font-size: calc(var(--a11y-fs) * var(--a11y-scale, 1)) !important;
}

/* ---------- פילטרים: היפוך צבעים ורוויה (משולבים) ---------- */
html.a11y-contrast-3   { --a11y-f1: invert(1) hue-rotate(180deg); }
html.a11y-saturation-1 { --a11y-f2: saturate(.4); }
html.a11y-saturation-2 { --a11y-f2: saturate(2); }
html.a11y-saturation-3 { --a11y-f2: grayscale(1); }
html.a11y-contrast-3,
html[class*="a11y-saturation-"] {
  filter: var(--a11y-f1, ) var(--a11y-f2, ) !important;
}
/* בהיפוך צבעים, תמונות ווידאו חוזרים לצבעים המקוריים */
html.a11y-contrast-3 img:not(picture img),
html.a11y-contrast-3 picture,
html.a11y-contrast-3 video,
html.a11y-contrast-3 iframe,
html.a11y-contrast-3 canvas,
html.a11y-contrast-3 [data-a11y-bgimg] {
  filter: invert(1) hue-rotate(180deg) !important;
}
html.a11y-contrast-3 { background: #fff !important; }

/* ---------- ניגודיות כהה ---------- */
html.a11y-contrast-1,
html.a11y-contrast-1 body { background: #000 !important; }
html.a11y-contrast-1 body *:not(img):not(video):not(picture):not(canvas):not(iframe):not(svg):not(svg *):not(bset-a11y) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #8a8a8a !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast-1 body a,
html.a11y-contrast-1 body a * { color: #ffe14d !important; }
html.a11y-contrast-1 body :is(button, input, select, textarea, [role="button"]) {
  border: 1px solid #fff !important;
}
html.a11y-contrast-1 body ::placeholder { color: #c8c8c8 !important; opacity: 1 !important; }

/* ---------- ניגודיות בהירה ---------- */
html.a11y-contrast-2,
html.a11y-contrast-2 body { background: #fff !important; }
html.a11y-contrast-2 body *:not(img):not(video):not(picture):not(canvas):not(iframe):not(svg):not(svg *):not(bset-a11y) {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #555 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast-2 body a,
html.a11y-contrast-2 body a * { color: #0b3fb0 !important; }
html.a11y-contrast-2 body :is(button, input, select, textarea, [role="button"]) {
  border: 1px solid #000 !important;
}
html.a11y-contrast-2 body ::placeholder { color: #555 !important; opacity: 1 !important; }

/* בניגודיות כהה/בהירה מבטלים גם גרדיאנטים (רקע צבעוני); תמונות רקע אמיתיות
   מסומנות ב-JS ב-data-a11y-bgimg ונשארות */
html.a11y-contrast-1 body *:not(bset-a11y):not([data-a11y-bgimg]),
html.a11y-contrast-2 body *:not(bset-a11y):not([data-a11y-bgimg]) { background-image: none !important; }

/* ---------- ריווח אותיות ומילים ---------- */
html.a11y-spacing-1 body *:not(bset-a11y) { letter-spacing: .04em !important; word-spacing: .08em !important; }
html.a11y-spacing-2 body *:not(bset-a11y) { letter-spacing: .08em !important; word-spacing: .16em !important; }
html.a11y-spacing-3 body *:not(bset-a11y) { letter-spacing: .12em !important; word-spacing: .24em !important; }

/* ---------- גובה שורה ---------- */
html.a11y-lineHeight-1 body *:not(bset-a11y) { line-height: 1.5 !important; }
html.a11y-lineHeight-2 body *:not(bset-a11y) { line-height: 1.8 !important; }
html.a11y-lineHeight-3 body *:not(bset-a11y) { line-height: 2.1 !important; }

/* ---------- הדגשת קישורים וכותרות ---------- */
html.a11y-links-1 body a[href],
html.a11y-links-1 body [role="link"] {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px solid #e09b00 !important;
  outline-offset: 2px !important;
}
html.a11y-headings-1 body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
  outline: 2px dashed #1d4ed8 !important;
  outline-offset: 4px !important;
}

/* ---------- גופן קריא (אייקוני פונט לא נוגעים) ---------- */
html.a11y-font-1 body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.material-icons):not(.material-symbols-outlined):not(bset-a11y) {
  font-family: Arial, "Arimo", "Heebo", sans-serif !important;
}

/* ---------- עצירת אנימציות ----------
 * לא animation:none — אלמנטים שנכנסים באנימציית fade היו נשארים שקופים.
 * משך אפסי קופץ ישר למצב הסופי. */
html.a11y-animations-1 *,
html.a11y-animations-1 *::before,
html.a11y-animations-1 *::after {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ---------- הסתרת תמונות ---------- */
html.a11y-images-1 body :is(img, picture, video, canvas[data-a11y-gifcanvas]) { visibility: hidden !important; }
html.a11y-images-1 body [data-a11y-bgimg] { background-image: none !important; }

/* ---------- סמן גדול ---------- */
html.a11y-cursor-1 body,
html.a11y-cursor-1 body * {
  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='M8 4v35l9-8.5 6 14 6.5-2.8-6-13.7H36z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.a11y-cursor-2 body,
html.a11y-cursor-2 body * {
  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='M8 4v35l9-8.5 6 14 6.5-2.8-6-13.7H36z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}

/* ---------- ניווט מקלדת: פוקוס בולט ---------- */
html.a11y-focus-1 body :focus {
  outline: 3px solid #ff6a00 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255, 106, 0, .35) !important;
}

/* ---------- יישור טקסט ---------- */
html.a11y-align-1 body *:not(bset-a11y) { text-align: right !important; }
html.a11y-align-2 body *:not(bset-a11y) { text-align: center !important; }
html.a11y-align-3 body *:not(bset-a11y) { text-align: left !important; }

/* ---------- הקראה: מסמן את האלמנט שמוקרא ---------- */
[data-a11y-reading] {
  outline: 3px solid #a62b51 !important;
  outline-offset: 2px !important;
}