/* REATS · Accessibility widget (site-wide) */
/* כחול תואם ל-assets/accessible-icon.png */
.reats-a11y {
  --reats-a11y-blue: #0000ff;
  position: fixed;
  z-index: 9990;
  left: clamp(28px, 6vw, 44px);
  bottom: clamp(30px, 5.5vw, 44px);
}

.reats-a11y__toggle {
  width: 52px;
  height: 52px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--reats-a11y-blue);
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(0, 0, 255, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
}

.reats-a11y__toggle .reats-a11y__icon {
  width: 68%;
  height: 68%;
  display: block;
  object-fit: contain;
  object-position: center 42%;
  border-radius: 0;
  transform: translateY(-2px);
}

.reats-a11y__toggle:hover {
  filter: brightness(1.04);
  box-shadow:
    0 6px 18px rgba(0, 0, 255, 0.38),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

.reats-a11y__toggle:focus-visible {
  outline: 3px solid var(--accent-3, #b4d6a0);
  outline-offset: 3px;
}

.reats-a11y__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(12, 60, 30, 0.14);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(12, 60, 30, 0.18);
  overflow: hidden;
}

.reats-a11y__panel[hidden] {
  display: none !important;
}

.reats-a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--accent-soft, #f1f7e9);
  border-bottom: 1px solid rgba(12, 60, 30, 0.1);
}

.reats-a11y__head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent, #0c3c1e);
}

.reats-a11y__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--accent, #0c3c1e);
}

.reats-a11y__body {
  padding: 14px 16px 16px;
}

.reats-a11y__hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--ink-3, #5a7a64);
  line-height: 1.4;
}

.reats-a11y__group {
  margin-bottom: 14px;
}

.reats-a11y__label {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent, #0c3c1e);
  margin-bottom: 8px;
}

.reats-a11y__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.reats-a11y__row button {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(12, 60, 30, 0.14);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  color: var(--accent, #0c3c1e);
}

.reats-a11y__row button:hover {
  background: var(--accent-soft, #f1f7e9);
}

.reats-a11y__switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--ink-1, #335a44);
}

.reats-a11y__switch input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-2, #2f7d3f);
}

.reats-a11y__reset {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border: 1px dashed rgba(12, 60, 30, 0.25);
  border-radius: 10px;
  background: transparent;
  color: var(--accent, #0c3c1e);
  font-weight: 600;
  cursor: pointer;
}

/* Applied states on html */
html.a11y-font-1 { font-size: 106.25%; }
html.a11y-font-2 { font-size: 112.5%; }
html.a11y-font-3 { font-size: 118.75%; }

html.a11y-contrast body {
  --ink-0: #000;
  --ink-1: #111;
  --ink-2: #222;
  --accent: #000;
  --accent-2: #003300;
}

html.a11y-contrast .site-header,
html.a11y-contrast .exp-event-hero,
html.a11y-contrast .exp-portal {
  background: #fff !important;
}

html.a11y-underline a:not(.btn):not(.reats-a11y__toggle) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

html.a11y-readable body {
  font-family: Arial, Helvetica, sans-serif !important;
}

html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation: none !important;
  transition: none !important;
}

html.a11y-motion .reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 960px) {
  .page-experience .reats-a11y {
    left: clamp(32px, 5vw, 48px);
    bottom: clamp(32px, 4.5vw, 40px);
  }
}

@media (max-width: 520px) {
  .reats-a11y__panel {
    left: auto;
    right: 0;
  }
}