/* ── נגישות ופרטיות: מצבי תצוגה, תפריט הנגישות והודעת הפרטיות ──────────────
 *
 * הועתק מ-geniza-explorer והותאם לאתר הזה (docs/A11Y_PRIVACY.md).
 * נטען בכל דף מ-Base.astro. הקובץ מוגש כמו שהוא מ-public/, בלי bundling.
 *
 * שלושה חלקים:
 *   0–1. גודל טקסט ומצבי התצוגה: מחלקות על <html> שהתפריט מדליק ומכבה.
 *   2.   כפתור הנגישות והתפריט.
 *   3.   הודעת הפרטיות.
 *
 * הכלל שקובע את כל השאר: מצבי הצבע מיושמים בדריסת הטוקנים של :root
 * (site/src/styles/global.css), ולא ב-filter על <html>. filter על אלמנט
 * השורש הופך אותו ל-containing block, וכל position:fixed בדף (כפתור
 * הנגישות והודעת הפרטיות) מפסיק להיצמד למסך.
 *
 * לוח הצילום נשאר כהה בכל המצבים, והתמונות של השמש וה-canvas של המעבדה
 * לעולם אינם עוברים filter: הם נתונים מדעיים, וצבעי המסלולים (תכלת וירוק)
 * הם מה שמבדיל בין כתם א' לכתם ב'. ראו DECISIONS.
 *
 * כל var() כאן מגיע עם ערך גיבוי, כדי שהקובץ יעבוד גם בדף בלי global.css.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── 0. גודל טקסט ────────────────────────────────────────────────────────────
 * שלוש מדרגות ב-font-size של השורש, באחוזים: הם מכפילים את גודל הבסיס
 * שהמשתמש בחר בדפדפן במקום לדרוס אותו. עובד רק על מידות ב-rem. */
html              { font-size: 100%; }
html[data-fs="m"] { font-size: 112.5%; }
html[data-fs="l"] { font-size: 125%; }

/* ── 1. מצבי תצוגה ──────────────────────────────────────────────────────── */

/* ---- ניגודיות גבוהה: שחור על לבן, גם כשמערכת ההפעלה במצב כהה ---- */
html.a11y-contrast {
  color-scheme: light;
  --bg:          #ffffff;
  --surface:     #ffffff;
  --surface-2:   #ffffff;
  --text:        #000000;
  --muted:       #1c1c1c;
  --border:      #000000;
  --rule:        #000000;
  --accent:      #7a2a0c;   /* 10.9:1 על לבן */
  --accent-fill: #7a2a0c;
  --accent-soft: #ffffff;
  --focus:       #000000;
  --warn-bg:     #ffffff;
  --warn-text:   #000000;
  --danger:      #7d0000;
  --danger-bg:   #ffffff;
  --chart-1:     #003f7a;
  --chart-2:     #0f4d1a;
  /* לוח הצילום: שחור מלא, טקסט וקווים לבנים */
  --plate:        #000000;
  --plate-text:   #ffffff;
  --plate-muted:  #ffffff;
  --plate-muted-2:#ffffff;
  --plate-line:   #ffffff;
  --plate-line-2: #bdbdbd;
  --plate-active: #000000;
  --plate-accent: #ffffff;
}

/* ---- ניגודיות הפוכה: לבן על שחור ---- */
html.a11y-invert {
  color-scheme: dark;
  --bg:          #000000;
  --surface:     #000000;
  --surface-2:   #121212;
  --text:        #ffffff;
  --muted:       #d6d6d6;
  --border:      #6e6e6e;
  --rule:        #4a4a4a;
  --accent:      #ffb895;   /* 12:1 על שחור */
  --accent-fill: #ffb895;
  --accent-soft: #2b1a12;
  --focus:       #ffb895;
  --warn-bg:     #1f1800;
  --warn-text:   #ffe08a;
  --danger:      #ff9c8c;
  --danger-bg:   #240b07;
  --chart-1:     #7cc0ff;
  --chart-2:     #7fdc8c;
  --plate:        #000000;
  --plate-text:   #ffffff;
  --plate-muted:  #e2e2e2;
  --plate-muted-2:#e2e2e2;
  --plate-line:   #8a8a8a;
  --plate-line-2: #6e6e6e;
  --plate-active: #2b1a12;
  --plate-accent: #ffb895;
}

/* ---- גווני אפור ----
 * דריסת טוקנים ולא filter על התוכן: filter על אב אי אפשר לבטל בצאצא, וכך
 * גם תמונת השמש וה-canvas של המעבדה היו מאבדים את הצבע. הממשק הופך אפור;
 * התצלומים של השמש וצבעי המסלולים עליהם נשארים (ראו הערת הפתיחה). שני
 * צבעי הגרפים הופכים לשני גוונים שונים מאוד בבהירות, ובגרפים הם נבדלים
 * גם בקו (רציף, מקווקו). */
html.a11y-mono {
  --bg:          #f2f2f2;
  --surface:     #ffffff;
  --surface-2:   #f7f7f7;
  --text:        #1e1e1e;
  --muted:       #666666;
  --border:      #e0e0e0;
  --rule:        #ebebeb;
  --accent:      #3d3d3d;
  --accent-fill: #555555;
  --accent-soft: #ececec;
  --focus:       #333333;
  --warn-bg:     #efefef;
  --warn-text:   #333333;
  --danger:      #333333;
  --danger-bg:   #ececec;
  --chart-1:     #1f1f1f;
  --chart-2:     #8a8a8a;
  --plate-active: #333333;
  --plate-accent: #d0d0d0;
}
@media (prefers-color-scheme: dark) {
  html.a11y-mono {
    --bg:          #1b1b1b;
    --surface:     #232323;
    --surface-2:   #2b2b2b;
    --text:        #f3f3f3;
    --muted:       #a9a9a9;
    --border:      #363636;
    --rule:        #2a2a2a;
    --accent:      #d6d6d6;
    --accent-fill: #bdbdbd;
    --accent-soft: #333333;
    --focus:       #d6d6d6;
    --warn-bg:     #2e2e2e;
    --warn-text:   #e6e6e6;
    --danger:      #e6e6e6;
    --danger-bg:   #2e2e2e;
    --chart-1:     #e6e6e6;
    --chart-2:     #8f8f8f;
  }
}
html.a11y-mono input { accent-color: var(--accent, #3d3d3d); }
/* מה שאינו תצלום של השמש: ציורי גלילאו (.drawing) וסמל האתר */
html.a11y-mono .drawing img,
html.a11y-mono .site-header .mark { filter: grayscale(1); }

/* ---- דריסות נקודתיות ----
 * מה שהטוקנים לא מכסים: צבעים קבועים שכתובים ישירות בדפים. */
html.a11y-contrast .skip-link,
html.a11y-contrast .skip-link:focus { background: #000 !important; color: #fff !important; }
html.a11y-invert .skip-link,
html.a11y-invert .skip-link:focus { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.a11y-contrast .banner-warn,
html.a11y-contrast .chart-tip { border: 2px solid #000; }
html.a11y-contrast .chart-tip,
html.a11y-invert .chart-tip { box-shadow: none; }
html.a11y-invert .chart-tip { border-color: #fff; }
/* הכפתור הלחוץ על לוח הצילום: במצב ניגודיות הוא שחור עם מסגרת לבנה עבה,
   כדי שלא ייקרא מהצבע לבדו */
html.a11y-contrast .plate button[aria-pressed="true"] { border-width: 2px; }
/* פסי ההסתברות בעמוד הבית: המסילה צבועה ב---rule, שהופך לשחור במצב הזה */
html.a11y-contrast .bar-track { background: #fff; box-shadow: inset 0 0 0 1px #000; }
html.a11y-contrast .bar-fill { background: #000; }
/* ציורי גלילאו: הנייר הבהיר לא מבהיק מול רקע שחור. תצלומי השמש לא נוגעים. */
html.a11y-invert .drawing img { filter: brightness(.85); }

/* ---- הדגשת קישורים ---- */
html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px !important;
  font-weight: 600;
}
html.a11y-links a:hover,
html.a11y-links a:focus-visible { background: #fff3a8; color: #000; }
html.a11y-invert.a11y-links a:hover,
html.a11y-invert.a11y-links a:focus-visible { background: #4a3d00; color: #fff; }

/* ---- פונט קריא ----
 * גופן מערכת אחיד במקום Heebo. הנוסחאות (pre, code) נשארות בגופן
 * monospace, אחרת היישור שלהן נשבר. */
html.a11y-readable body,
html.a11y-readable body *:not(pre):not(code):not(pre *) {
  font-family: Arial, 'Segoe UI', system-ui, sans-serif !important;
  font-variant-ligatures: none !important;
}

/* ---- ריווח מוגדל: הערכים של קריטריון 1.4.12 ---- */
html.a11y-spacing body,
html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing dd,
html.a11y-spacing dt,
html.a11y-spacing td,
html.a11y-spacing blockquote {
  line-height: 1.9 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}
html.a11y-spacing p { margin-bottom: 2em !important; }
html.a11y-spacing .a11y-panel *,
html.a11y-spacing pre { letter-spacing: normal !important; word-spacing: normal !important; }

/* ---- עצירת אנימציות ----
 * אותו כלל כמו prefers-reduced-motion ב-global.css, מופעל ידנית. */
html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ---- סמן גדול (SVG מוטבע: עובד גם בלי רשת) ----
 * ה-canvas של המעבדה שומר על סמן הכוונת: הוא מסמן נקודה, ובחץ גדול
 * הנקודה המדויקת לא ברורה. */
html.a11y-cursor,
html.a11y-cursor *:not(#sun-canvas) {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'><path d='M6 2l0 24 6-6 4 9 5-2-4-9 9 0z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor label,
html.a11y-cursor summary,
html.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 32 32'><path d='M12 2c-1.7 0-3 1.3-3 3v11l-2-2c-1.2-1.2-3-1.2-4 0-1 1.2-1 2.8 0 4l7 10h14l2-13c.2-1.6-1-3-2.6-3-1 0-1.9.6-2.3 1.4-.2-1.3-1.3-2.4-2.7-2.4-1 0-1.9.6-2.4 1.4V5c0-1.7-1.3-3-3-3z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/></svg>") 10 2, pointer !important;
}

/* ---- הדגשת מיקוד ----
 * טבעת כפולה, צהוב-כתום על שחור: הטבעת השחורה מבטיחה ניגודיות על כל רקע,
 * כולל לוח הצילום. */
html.a11y-focus :focus,
html.a11y-focus :focus-visible {
  outline: 4px solid #ffb300 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #000 !important;
}

/* ── 2. כפתור הנגישות והתפריט ────────────────────────────────────────────
 * הצבעים מהטוקנים של האתר, ולכן התפריט מתחלף יחד עם מצב כהה ועם מצבי
 * התצוגה בלי כלל נפרד לכל מצב. הצורות לפי global.css: כרטיס ברדיוס 16px,
 * כפתורי גלולה. כל selector כאן מתחיל ב-.a11y-panel או ב-.a11y-fab, כדי
 * לגבור על כללי ה-button הכלליים של global.css בלי קשר לסדר הטעינה. */

:root { --a11y-consent-h: 0px; }

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

button.a11y-fab {
  position: fixed; z-index: 2147483000;
  inset-inline-start: 12px;
  bottom: calc(var(--a11y-consent-h) + 12px);
  width: 48px; height: 48px; min-height: 0; border-radius: 50%;
  background: var(--accent, #a8502f); color: var(--surface, #fff);
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  transition: bottom .15s ease, transform .15s ease;
}
.a11y-fab svg { width: 26px; height: 26px; fill: currentColor; }
button.a11y-fab:hover,
button.a11y-fab[aria-expanded="true"] { border-color: var(--surface, #fff); transform: scale(1.06); }
button.a11y-fab:focus-visible { outline: 3px solid var(--focus, #c96442); outline-offset: 3px; }

.a11y-panel {
  position: fixed; z-index: 2147483001;
  inset-inline-start: 12px;
  bottom: calc(var(--a11y-consent-h) + 68px);
  width: min(21rem, calc(100vw - 24px));
  max-height: min(40rem, calc(100vh - var(--a11y-consent-h) - 96px));
  max-height: min(40rem, calc(100dvh - var(--a11y-consent-h) - 96px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface, #fff); color: var(--text, #1f1e1d);
  border: 1px solid var(--border, #e6e3d9); border-radius: var(--radius, 16px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
  padding: 1rem 1rem 1.1rem;
  font-family: var(--font-body, system-ui), Arial, sans-serif;
  font-size: 1rem; line-height: 1.5;
  text-align: start;
}
.a11y-panel[hidden] { display: none; }

.a11y-panel .a11y-hd {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border-bottom: 1px solid var(--rule, #efece3); padding-bottom: .6rem; margin-bottom: .75rem;
}
.a11y-panel .a11y-hd h2 { font-size: 1.15rem; line-height: 1.3; margin: 0; font-family: inherit; letter-spacing: 0; }
.a11y-panel button.a11y-x {
  background: transparent; border: 1px solid var(--border, #e6e3d9); border-radius: 50%;
  width: 40px; height: 40px; min-height: 0; padding: 0; line-height: 1;
  font-size: 1.1rem; color: var(--text, #1f1e1d);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer;
}
.a11y-panel button.a11y-x:hover { border-color: var(--accent, #a8502f); }

.a11y-panel .a11y-grp { margin-bottom: .9rem; }
.a11y-panel .a11y-grp > h3 {
  font-size: .8rem; letter-spacing: .04em; line-height: 1.4;
  color: var(--muted, #6e6c66); font-weight: 500; margin: 0 0 .4rem;
}

.a11y-panel .a11y-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.a11y-panel .a11y-seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a11y-panel .a11y-seg button {
  background: var(--surface-2, #faf9f5); border: 1px solid var(--border, #e6e3d9);
  border-radius: var(--radius-sm, 11px);
  padding: .5rem .25rem; font-weight: 500; color: var(--text, #1f1e1d);
  min-height: 44px; line-height: 1.25; cursor: pointer; font-family: inherit;
  font-size: 13px;   /* a11y-allow-px: סרגל בחירת הגודל עצמו נשאר יציב */
}
.a11y-panel .a11y-seg button:hover { border-color: var(--accent, #a8502f); }
.a11y-panel .a11y-seg button[aria-pressed="true"] {
  background: var(--accent, #a8502f); color: var(--surface, #fff);
  border-color: var(--accent, #a8502f); font-weight: 700;
}
.a11y-panel .a11y-seg .sz-s { font-size: 12px; }    /* a11y-allow-px */
.a11y-panel .a11y-seg .sz-m { font-size: 15px; }    /* a11y-allow-px */
.a11y-panel .a11y-seg .sz-l { font-size: 18px; }    /* a11y-allow-px */

/* המתג מזוהה גם כשהוא כבוי (1.4.11, 3:1 לרכיבי ממשק): המסגרת והידית
 * בצבע --muted. מלבד הצבע גם מיקום הידית משתנה (1.4.1). */
.a11y-panel button.a11y-tog {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--rule, #efece3);
  padding: .55rem .1rem; text-align: start; font-size: .95rem; font-weight: 400;
  color: var(--text, #1f1e1d);
  min-height: 44px; cursor: pointer; font-family: inherit;
}
.a11y-panel button.a11y-tog:last-child { border-bottom: 0; }
.a11y-panel button.a11y-tog:hover { color: var(--accent, #a8502f); }
.a11y-panel button.a11y-tog[aria-pressed="true"] { background: transparent; color: var(--text, #1f1e1d); }
.a11y-tog .sw {
  flex: 0 0 auto; width: 40px; height: 24px; border-radius: 999px;
  background: var(--surface-2, #faf9f5); border: 1.5px solid var(--muted, #6e6c66); position: relative;
  transition: background .15s ease;
}
.a11y-tog .sw::after {
  content: ''; position: absolute; top: 2.5px; inset-inline-start: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--muted, #6e6c66);
  transition: transform .15s ease, background .15s ease;
}
.a11y-tog[aria-pressed="true"] .sw {
  background: var(--accent, #a8502f); border-color: var(--accent, #a8502f);
}
.a11y-tog[aria-pressed="true"] .sw::after {
  background: var(--surface, #fff); transform: translateX(-15px);
}
html[dir="ltr"] .a11y-tog[aria-pressed="true"] .sw::after { transform: translateX(15px); }

.a11y-panel .a11y-foot { border-top: 1px solid var(--rule, #efece3); padding-top: .75rem; margin-top: .25rem; }
.a11y-panel button.a11y-reset {
  width: 100%; background: transparent; border: 1.5px solid var(--text, #1f1e1d);
  border-radius: 999px; padding: .5rem 1rem; font-size: .9rem; font-weight: 700;
  color: var(--text, #1f1e1d); min-height: 44px; cursor: pointer; font-family: inherit;
}
.a11y-panel button.a11y-reset:hover { background: var(--text, #1f1e1d); color: var(--surface, #fff); }
.a11y-panel .a11y-links-row { margin: .6rem 0 0; font-size: .85rem; line-height: 1.7; color: var(--muted, #6e6c66); }
.a11y-panel .a11y-links-row a { color: var(--accent, #a8502f); text-decoration: underline; text-underline-offset: 2px; }
.a11y-panel .a11y-kbd { margin: .4rem 0 0; font-size: .8rem; color: var(--muted, #6e6c66); line-height: 1.6; }
.a11y-panel :focus-visible { outline: 3px solid var(--focus, #c96442); outline-offset: 2px; }

@media print { .a11y-fab, .a11y-panel, .consent { display: none !important; } }

/* ── 3. הודעת הפרטיות ──────────────────────────────────────────────────── */

.consent {
  position: fixed; z-index: 2147482999; inset-inline: 0; bottom: 0;
  background: var(--surface, #fff); color: var(--text, #1f1e1d);
  border-top: 3px solid var(--accent-fill, #c96442);
  padding: .9rem 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
  font-family: var(--font-body, system-ui), Arial, sans-serif;
  line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent .wrap {
  max-width: var(--maxw, 1180px); margin: 0 auto; padding: 0 var(--gutter, 16px);
  display: flex; gap: .9rem; align-items: center; flex-wrap: wrap;
}
.consent-txt { flex: 1 1 18rem; min-width: 0; }
.consent-txt b { display: block; font-size: 1rem; margin-bottom: .2rem; }
.consent-txt p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muted, #6e6c66); max-width: 80ch; }
.consent-txt p b { display: inline; font-size: inherit; color: var(--text, #1f1e1d); }
.consent-txt a { color: var(--accent, #a8502f); text-decoration: underline; text-underline-offset: 2px; }
.consent-act { display: flex; gap: .5rem; flex: 0 0 auto; flex-wrap: wrap; align-items: center; }
.consent .consent-act button {
  border-radius: 999px; padding: .5rem 1.1rem; font-size: .9rem; font-weight: 700;
  min-height: 44px; border: 1.5px solid; cursor: pointer; font-family: inherit;
}
.consent .consent-ok { background: var(--accent, #a8502f); border-color: var(--accent, #a8502f); color: var(--surface, #fff); }
.consent .consent-ok:hover { border-color: var(--text, #1f1e1d); }
.consent .consent-no { background: transparent; border-color: var(--text, #1f1e1d); color: var(--text, #1f1e1d); }
.consent .consent-no:hover { background: var(--accent-soft, #faede7); }
.consent :focus-visible { outline: 3px solid var(--focus, #c96442); outline-offset: 2px; }
@media (max-width: 520px) {
  .consent-act { width: 100%; }
  .consent-act button { flex: 1 1 auto; }
}