/* ═══ ACCESSIBILITY WIDGET ═══════════════════════════════════════════
   A first-party accessibility menu. Deliberately not a third-party overlay:
   the privacy statement names every provider that receives visitor data, and
   this adds none. Everything is stored in the visitor's own browser.
   Sits opposite the attack button so the two never collide.            */

.a11y-fab {
  position: fixed;
  inset-inline-end: 24px; bottom: 24px;
  z-index: 200;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.a11y-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.a11y-fab svg { width: 28px; height: 28px; }

.a11y-panel {
  position: fixed;
  inset-inline-end: 24px; bottom: 92px;
  z-index: 201;
  width: 320px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 140px); overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 20px;
  display: none;
}
.a11y-panel[data-open="true"] { display: block; }

.a11y-panel h2 {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0 0 4px;
}
.a11y-panel .a11y-sub {
  font-size: 13px; color: var(--text-3); margin: 0 0 16px; line-height: 1.6;
}
.a11y-group { margin-bottom: 16px; }
.a11y-group-label {
  font-size: 13px; font-weight: 700; color: var(--text-3);
  margin-bottom: 8px; display: block;
}
.a11y-row { display: flex; gap: 8px; }
.a11y-btn {
  flex: 1 1 auto;
  min-height: 44px; padding: 10px 12px;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--text-2); background: var(--warm-100);
  border: 1px solid var(--gray-200); border-radius: 12px;
  cursor: pointer; text-align: center;
  transition: background .2s, color .2s, border-color .2s;
}
.a11y-btn:hover { color: var(--text); border-color: var(--gray-300); }
.a11y-btn[aria-pressed="true"] {
  background: var(--orange-light); color: var(--orange); border-color: var(--orange);
}
.a11y-toggle { width: 100%; text-align: start; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a11y-toggle .a11y-state { font-size: 13px; font-weight: 700; opacity: .75; }
.a11y-panel .a11y-reset { width: 100%; margin-top: 4px; }
.a11y-panel .a11y-link {
  display: block; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--gray-200);
  font-size: 14px; font-weight: 600; color: var(--orange);
}

/* ── What the options actually do ── */

/* Larger links target: underline every link in running text. */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }

/* A plainer, higher x-height face for people who find the brand font hard. */
html.a11y-readable body,
html.a11y-readable .a11y-panel {
  font-family: Arial, "Arial Hebrew", Helvetica, sans-serif !important;
  letter-spacing: .01em;
  line-height: 1.85;
}
html.a11y-readable h1, html.a11y-readable h2,
html.a11y-readable h3, html.a11y-readable h4 {
  font-family: Arial, "Arial Hebrew", Helvetica, sans-serif !important;
  letter-spacing: 0;
}

/* High contrast: drop the warm tints, push text to near black, firm the edges. */
html.a11y-contrast {
  --bg: #FFFFFF; --bg-alt: #FFFFFF;
  --warm-50: #FFFFFF; --warm-100: #FFFFFF; --warm-200: #F2F2F2; --warm-300: #E0E0E0;
  --surface: #FFFFFF;
  --text: #000000; --text-2: #1A1A1A; --text-3: #333333;
  --orange: #0B4F63; --orange-hover: #083B4A; --orange-light: #E7F1F5;
  --gray-200: #767676; --gray-300: #595959; --hairline: #767676;
}
html.a11y-contrast body { background: #FFFFFF; color: #000000; }
html.a11y-contrast .card,
html.a11y-contrast .section-nav a,
html.a11y-contrast .a11y-btn { border-color: #595959; }
html.a11y-contrast img { filter: contrast(1.08); }

@media (max-width: 600px) {
  .a11y-fab { inset-inline-end: 16px; bottom: 16px; width: 52px; height: 52px; }
  .a11y-panel { inset-inline-end: 16px; bottom: 80px; }
}

/* The widget never animates: it is the thing people reach for when motion hurts. */
.safe-view .a11y-fab { transition: none; }
.safe-view .a11y-fab:hover { transform: none; }

/* ═══ MANEUVER VIDEO CARDS + MODAL ═══════════════════════════════════ */

.card--video { cursor: pointer; }
.card--video:hover { border-color: var(--orange); }
.card-video-btn {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--orange); background: var(--orange-light);
  border: 1px solid var(--orange); border-radius: var(--r-full);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.card-video-btn::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
[dir="rtl"] .card-video-btn::before {
  border-width: 5px 8px 5px 0;
  border-color: transparent currentColor transparent transparent;
}
.card-video-btn:hover { background: var(--orange); color: #fff; }

.mv-modal { position: fixed; inset: 0; z-index: 400; }
.mv-modal[hidden] { display: none; }
.mv-backdrop { position: absolute; inset: 0; background: rgba(30,29,28,.62); }
.mv-box {
  position: relative;
  max-width: 760px; width: calc(100% - 32px);
  margin: 6vh auto 0; max-height: 88vh; overflow-y: auto;
  background: var(--surface);
  border-radius: 24px; padding: 28px;
  box-shadow: var(--shadow-lg);
}
.mv-close {
  position: absolute; inset-inline-end: 16px; top: 14px;
  width: 44px; height: 44px; font-size: 28px; line-height: 1;
  color: var(--text-2); background: none; border: none; cursor: pointer;
  border-radius: 50%;
}
.mv-close:hover { background: var(--warm-100); color: var(--text); }
.mv-title { font-size: 24px; font-weight: 700; margin: 0 40px 18px 0; color: var(--text); }
.mv-stage {
  background: var(--warm-100); border-radius: 16px;
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mv-stage video { width: 100%; height: auto; display: block; border-radius: 16px; }
.mv-soon { margin: 0; padding: 40px 24px; text-align: center; color: var(--text-3); font-size: 16px; }
.mv-note {
  margin: 18px 0 0; font-size: 14px; line-height: 1.75; color: var(--text-2);
  background: var(--yellow-light); border-radius: 14px; padding: 14px 16px;
}
@media (max-width: 600px) {
  .mv-box { margin-top: 4vh; padding: 20px; border-radius: 18px; }
  .mv-title { font-size: 20px; }
}