/* ==========================================================================
   נגישות — סרגל ההגדרות והמצבים שהוא מפעיל
   --------------------------------------------------------------------------
   הכיתובים והמרווחים נגזרים ממשתני העיצוב, כך שהמצבים משפיעים על
   כל האתר ולא רק על חלקים ממנו.
   ========================================================================== */

/* ---------- כפתור הפתיחה ---------- */

.a11y-toggle {
  position: fixed;
  bottom: var(--sp-5);
  inset-inline-start: var(--sp-5);
  z-index: 130;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #000000;              /* כחול הנגישות המקובל */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.a11y-toggle:hover { background: #2b2b2b; }
.a11y-toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

/* ---------- הפאנל ---------- */

.a11y-panel {
  position: fixed;
  bottom: calc(var(--sp-5) + 58px);
  inset-inline-start: var(--sp-5);
  z-index: 131;
  width: min(290px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: #fff;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 6px;
  box-shadow: 0 16px 44px rgba(0,0,0,.3);
  padding: 14px;
}
.a11y-panel[hidden] { display: none; }

.a11y-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 1rem;
}
.a11y-close {
  width: 30px; height: 30px;
  border: 0; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: #444;
}
.a11y-close:hover { color: #000; }

.a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.a11y-option {
  padding: 10px 8px;
  min-height: 46px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #f4f4f4;
  color: #000000;
  font: inherit; font-size: .8rem; font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.a11y-option:hover { background: #ebebeb; }
.a11y-option.is-on { background: #000000; border-color: #000000; color: #fff; }
.a11y-option:focus-visible,
.a11y-reset:focus-visible,
.a11y-close:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.a11y-reset {
  width: 100%; margin-top: 10px; padding: 9px;
  border: 1px solid #d6d6d6; border-radius: 4px;
  background: #fff; color: #000000;
  font: inherit; font-size: .8rem; cursor: pointer;
}
.a11y-reset:hover { background: #f0f0f0; }

.a11y-note { margin: 10px 0 0; font-size: .74rem; color: #555; }
.a11y-note a { color: #000000; text-decoration: underline; }

/* ==========================================================================
   המצבים
   ========================================================================== */

/* ---------- הגדלת טקסט ---------- */
html.a11y-font-1 { font-size: 112%; }
html.a11y-font-2 { font-size: 125%; }
html.a11y-font-3 { font-size: 140%; }

/* הכפתור עצמו אינו גדל, כדי שלא יבלע את המסך */
html[class*="a11y-font"] .a11y-panel,
html[class*="a11y-font"] .a11y-toggle { font-size: 16px; }

/* ---------- ניגודיות גבוהה ---------- */
html.a11y-contrast body {
  background: #000 !important;
  color: #fff !important;
}
html.a11y-contrast :is(p, span, li, td, th, dt, dd, label, h1, h2, h3, h4, strong, em, time, .muted, .field-hint) {
  color: #fff !important;
}
html.a11y-contrast a { color: #ffe14d !important; text-decoration: underline !important; }
html.a11y-contrast :is(.panel, .site-header, .site-footer, .cart-summary, .checkout-summary,
                       .product-card-media, .category-tile, .hero, .cta-band, .bg-2) {
  background: #000 !important;
  border-color: #fff !important;
}
html.a11y-contrast :is(.btn, .input, .select, textarea, input) {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html.a11y-contrast .btn-primary { background: #ffe14d !important; color: #000 !important; border-color: #ffe14d !important; }
html.a11y-contrast .badge { background: #ffe14d !important; color: #000 !important; }
html.a11y-contrast img { filter: grayscale(.25) contrast(1.15); }

/* ---------- היפוך צבעים ---------- */
html.a11y-invert { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert .a11y-toggle,
html.a11y-invert .a11y-panel { filter: invert(1) hue-rotate(180deg); }

/* ---------- הדגשת קישורים ---------- */
html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}
html.a11y-links :is(button, [role="button"]) { outline: 1px dashed currentColor; outline-offset: 2px; }

/* ---------- גופן קריא ---------- */
html.a11y-readable,
html.a11y-readable :is(body, h1, h2, h3, h4, p, a, span, li, td, th, label, button, input, select, textarea) {
  font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
  letter-spacing: normal !important;
  font-weight: 400;
}
html.a11y-readable :is(h1, h2, h3, h4, strong, .btn) { font-weight: 700; }

/* ---------- ריווח שורות ---------- */
html.a11y-spacing :is(body, p, li, td, dd, .chat-text) {
  line-height: 2 !important;
  letter-spacing: .04em !important;
  word-spacing: .12em !important;
}
html.a11y-spacing p { margin-bottom: 1.4em !important; }

/* ---------- עצירת אנימציות ---------- */
html.a11y-nomotion *,
html.a11y-nomotion *::before,
html.a11y-nomotion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ---------- סמן גדול ---------- */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M6 2l28 15-12 3-4 13z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}

/*
 * טבעת המיקוד נשארת צהובה בכוונה.
 * הפלטה היא לבן-שחור-ירוק, אבל סימון מיקוד חייב להיראות מעל כל
 * רקע שהוא עלול לנחות עליו — כולל כפתור שחור וכפתור ירוק. טבעת
 * שחורה על כפתור שחור פשוט נעלמת, וזו בדיוק הנגישות שנדרשה.
 */

/* ---------- מיקוד מקלדת בולט בכל האתר ---------- */
:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px;
  border-radius: 2px;
}
html.a11y-contrast :focus-visible { outline-color: #ffe14d !important; }

@media (max-width: 760px) {
  .a11y-toggle { bottom: calc(62px + var(--sp-3)); inset-inline-start: var(--sp-3); width: 44px; height: 44px; }
  .a11y-panel  { bottom: calc(62px + var(--sp-3) + 52px); inset-inline-start: var(--sp-3); }
}

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

/* ==========================================================================
   תיקון ניגודיות: עוטפים שקיבלו רקע משלהם נשארו בהירים
   --------------------------------------------------------------------------
   רשימת מחלקות מפורשת תמיד תחמיץ רכיב כלשהו. לכן במצב ניגודיות
   מאפסים את הרקע של כל העוטפים, ומחזירים רקע רק למה שצריך אותו.
   ========================================================================== */

html.a11y-contrast :is(header, nav, main, section, aside, footer, div, form, ul, ol, li, table, tr, td, th) {
  background-color: #000 !important;
  border-color: #fff !important;
}

html.a11y-contrast :is(.a11y-panel, .a11y-panel *) {
  background-color: #fff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
html.a11y-contrast .a11y-option.is-on {
  background-color: #000000 !important;
  color: #fff !important;
}
html.a11y-contrast .a11y-toggle {
  background-color: #000000 !important;
  color: #fff !important;
}

/* מצע התמונה נשאר מובחן, אחרת כרטיס המוצר נעלם */
html.a11y-contrast .product-card-media { background-color: #1a1a1a !important; }