/* ============================================
   רכיב הנגישות. נבנה בבית, בלי סקריפט חיצוני.
   נטען אחרי main.css ולכן גובר עליו.

   ארבעה מצבים, כולם על <html>:
     data-a11y-text="lg" / "xl"   הגדלת טקסט
     data-a11y-contrast="high"    ניגודיות גבוהה
     data-a11y-links="on"         הדגשת קישורים
     class="no-motion"            עצירת אנימציות (אותה מחלקה שכבר קיימת ב-main.css)

   הפאנל עצמו מוזרק על ידי js/a11y.js, ולכן אין לו סימון ב-HTML.
   ============================================ */

/* ============ 1. הגדלת טקסט ============ */
/* כל הטיפוגרפיה באתר ב-rem, ולכן שינוי שורש אחד מגדיל את הכל יחד.
   גובה התפריט ב-px ולא גדל לבד, ולכן הוא מוגדל כאן ידנית. */

html[data-a11y-text="lg"] { font-size: 112.5%; }
html[data-a11y-text="xl"] { font-size: 125%; }

html[data-a11y-text="lg"] { --nav-h: 74px; }
html[data-a11y-text="xl"] { --nav-h: 84px; }

/* בטקסט מוגדל הכותרת בפתיח כבר לא חייבת להיכנס למסך אחד.
   עדיף כותרת שלמה על פתיח שנחתך. */
html[data-a11y-text="lg"] .hero h1,
html[data-a11y-text="xl"] .hero h1 { max-width: none; }

/* ============ 2. ניגודיות גבוהה ============ */
/* שחור על לבן בכל האתר. הסקשנים הכהים נשארים כהים והופכים לשחור מלא,
   ולכן הניגוד בהם עולה במקום לרדת. */

html[data-a11y-contrast="high"] {
  --cream: #FFFFFF;
  --cream-deep: #FFFFFF;
  --sage: #FFFFFF;
  --ink: #000000;
  --ink-soft: #000000;
  --ink-12: rgba(0, 0, 0, 0.55);
  --ink-08: rgba(0, 0, 0, 0.35);
  --coral: #A81616;        /* 7.58 על לבן */
  --coral-line: #A81616;
  --coral-text: #A81616;
}

/* צבעים שנכתבו ישירות ב-main.css ואינם עוברים דרך טוקן */
html[data-a11y-contrast="high"] .contact p,
html[data-a11y-contrast="high"] .consent .consent__hint,
html[data-a11y-contrast="high"] .form__note,
html[data-a11y-contrast="high"] .chat__title { color: #FFFFFF; }

/* .contact קיבל גרדיאנט רדיאלי עם צבעים ישירים (main.css), שמנטרל את
   תגובת הטוקן --ink. בניגודיות גבוהה מחזירים שחור מלא. */
html[data-a11y-contrast="high"] .contact { background: #000000; }

/* משיחת המרקר מתחת לשמות הכלים: בניגודיות גבוהה הקורל הופך לאדום כהה,
   וטקסט שחור עליו לא עומד בתקן. במקומה קו תחתון עבה. */
html[data-a11y-contrast="high"] .thesis__tool > span {
  background-image: none;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
}

html[data-a11y-contrast="high"] .spot__quote cite,
html[data-a11y-contrast="high"] .tools-cat__count { color: #000000; }

/* כפתור ראשי: דיו על קורל נופל בניגודיות גבוהה. הופך לשחור עם טקסט לבן */
html[data-a11y-contrast="high"] .btn--primary {
  background: #000000; color: #FFFFFF; border: 2px solid #000000;
}
html[data-a11y-contrast="high"] .btn--primary:hover { background: #FFFFFF; color: #000000; }
html[data-a11y-contrast="high"] .btn--secondary { border-width: 2px; }

/* אלמנטים דקורטיביים שמסתמכים על שקיפות: מוגברים או מוסתרים */
html[data-a11y-contrast="high"] .product__num,
html[data-a11y-contrast="high"] .tools-cat__num { opacity: 0.5 !important; }
html[data-a11y-contrast="high"] .marquee::before,
html[data-a11y-contrast="high"] .marquee::after { display: none; }
html[data-a11y-contrast="high"] .nav { background: #FFFFFF; backdrop-filter: none; }
html[data-a11y-contrast="high"] .product,
html[data-a11y-contrast="high"] .tool,
html[data-a11y-contrast="high"] .flip__front,
html[data-a11y-contrast="high"] .chat { border-width: 2px; }
html[data-a11y-contrast="high"] .field input,
html[data-a11y-contrast="high"] .field textarea { border: 2px solid #000000; }
html[data-a11y-contrast="high"] .consent__box { border-color: #FFFFFF; }
html[data-a11y-contrast="high"] .consent__check input:checked + .consent__box {
  background: #FFFFFF; border-color: #FFFFFF;
}
html[data-a11y-contrast="high"] .consent__check input:checked + .consent__box::after { border-color: #000000; }
html[data-a11y-contrast="high"] .consent__link { color: #FFFFFF; }

/* הספרה בסולם העקרונות מצוירת בקו מתאר. בניגודיות גבוהה היא ממולאת */
html[data-a11y-contrast="high"] .principle__num {
  color: #000000;
  -webkit-text-stroke-width: 0;
}

/* ============ 3. הדגשת קישורים ============ */

html[data-a11y-links="on"] a:not(.btn):not(.logo) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.2em;
}
html[data-a11y-links="on"] .btn { outline: 2px solid currentColor; outline-offset: 3px; }

/* ============ 4. הפאנל עצמו ============ */

.a11y-fab {
  position: fixed; inset-block-end: 1.25rem; left: 1.25rem;
  z-index: 190;
  inline-size: 52px; block-size: 52px;
  border-radius: 50%;
  background: var(--ink); color: var(--cream);
  border: 2px solid var(--cream);
  box-shadow: 0 6px 20px rgba(32, 30, 27, 0.28);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: transform var(--t-hover) var(--ease-spring);
}
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab svg { inline-size: 28px; block-size: 28px; display: block; }
.no-motion .a11y-fab { transition: none; }

.a11y-panel {
  position: fixed; inset-block-end: 5.5rem; left: 1.25rem;
  z-index: 191;
  inline-size: min(320px, calc(100vw - 2.5rem));
  max-block-size: min(72vh, 620px); overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px rgba(32, 30, 27, 0.22);
  padding: var(--s-6);
}
.a11y-panel[hidden] { display: none; }

.a11y-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-block-end: var(--s-4);
}
.a11y-panel__title {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: 1.25rem; margin: 0;
}
.a11y-panel__close {
  inline-size: 40px; block-size: 40px; flex: none;
  border: 1.5px solid var(--ink); border-radius: 50%;
  background: transparent; color: var(--ink);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.a11y-panel__close:hover { background: var(--ink); color: var(--cream); }

.a11y-group { margin-block-end: var(--s-6); }
.a11y-group__label {
  display: block;
  font-size: var(--fs-small); font-weight: var(--w-bold);
  color: var(--ink-soft); margin-block-end: var(--s-2);
}

.a11y-seg { display: flex; gap: var(--s-2); }
.a11y-seg button {
  flex: 1;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--w-bold);
  padding: 0.5rem 0.25rem;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink-12); border-radius: var(--radius);
  cursor: pointer; min-block-size: 44px;
}
.a11y-seg button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.a11y-toggle {
  inline-size: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-body); font-size: 1rem; font-weight: var(--w-med);
  text-align: start;
  padding: 0.625rem var(--s-3); min-block-size: 44px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink-12); border-radius: var(--radius);
  cursor: pointer; margin-block-end: var(--s-2);
}
.a11y-toggle:hover { border-color: var(--ink); }
.a11y-toggle[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* מסומן גם בטקסט ולא רק בצבע, כדי שהמצב יהיה קריא בלי הבחנת צבע */
.a11y-toggle__state { font-size: var(--fs-tag); font-weight: var(--w-bold); opacity: 0.8; flex: none; }

.a11y-panel__reset {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--w-bold);
  background: none; border: none; cursor: pointer; color: var(--coral-text);
  padding: 8px; border-radius: 6px; margin-inline-start: -8px;
}
.a11y-panel__reset:hover { background: var(--ink-08); }

.a11y-panel__foot {
  border-block-start: 1px solid var(--ink-12);
  padding-block-start: var(--s-4); margin-block-start: var(--s-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap;
}
.a11y-panel__foot a { font-size: var(--fs-small); font-weight: var(--w-bold); }

@media (max-width: 560px) {
  .a11y-fab { inset-block-end: 1rem; left: 1rem; inline-size: 48px; block-size: 48px; }
  .a11y-panel { inset-block-end: 4.75rem; left: 1rem; right: 1rem; inline-size: auto; }
}

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