/* ============================================================
   Circle Accessibility Widget — open source, self-hosted
   Designed for Israeli Standard 5568 / WCAG 2.0 AA compliance
   ============================================================ */

/* ---- Floating launcher button (bottom-right) ---- */
.a11y-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1A6FD9;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 99998;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  --a11y-scale: 1;
  transform: scale(var(--a11y-scale));
  transform-origin: bottom right;
}
.a11y-launcher:hover,
.a11y-launcher:focus-visible {
  transform: scale(calc(var(--a11y-scale) * 1.06));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  outline: none;
}
.a11y-launcher svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* ---- Panel ---- */
.a11y-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  background: #ffffff;
  color: #222126;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  overflow: hidden;
  display: none;
  flex-direction: column;
  font-family: "Rubik", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}
.a11y-panel.is-open {
  display: flex;
}

.a11y-panel-header {
  padding: 16px 20px;
  background: #222126;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a11y-panel-title {
  font-size: 1.067em;
  font-weight: 600;
  margin: 0;
}
/* ---- Language dropdown (top of panel body) ---- */
.a11y-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid #EDEDEE;
  margin-bottom: 8px;
}
.a11y-lang-label {
  font-size: 0.867em;
  font-weight: 600;
  color: #222126;
  flex-shrink: 0;
}
.a11y-lang-select {
  flex: 1;
  font-family: inherit;
  font-size: 0.933em;
  padding: 8px 10px;
  border: 1px solid #EDEDEE;
  border-radius: 8px;
  background: #ffffff;
  color: #222126;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23222126' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.a11y-panel[dir="rtl"] .a11y-lang-select {
  background-position: left 10px center;
  padding-right: 10px;
  padding-left: 30px;
}
.a11y-lang-select:focus-visible {
  outline: none;
  border-color: #1A6FD9;
}
.a11y-panel-close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 1.6em;
  line-height: 1;
}
.a11y-panel-close:hover,
.a11y-panel-close:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}

/* RTL adjustments for the Hebrew panel: text-align starts right, the
   button grid wraps naturally because we're using grid layout. */
.a11y-panel[dir="rtl"] .a11y-group-label {
  text-align: right;
}

.a11y-panel-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.a11y-group-label {
  font-size: 0.733em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B6B6D;
  margin: 8px 4px 6px;
}

.a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.a11y-grid--full {
  grid-template-columns: 1fr;
}

.a11y-btn {
  background: #F4F4F5;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  color: #222126;
  font-size: 0.867em;
  font-weight: 500;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.a11y-btn:hover {
  background: #E8E8EA;
}
.a11y-btn:focus-visible {
  outline: none;
  border-color: #1A6FD9;
}
.a11y-btn[aria-pressed="true"] {
  background: #DCEAFB;
  border-color: #1A6FD9;
  color: #0E4FA0;
}
.a11y-btn-icon {
  font-size: 1.467em;
  line-height: 1;
}

.a11y-reset {
  margin-top: 8px;
  width: 100%;
  background: #222126;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 0.933em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.a11y-reset:hover,
.a11y-reset:focus-visible {
  background: #000;
  outline: none;
}

.a11y-statement {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 0.8em;
  color: #6B6B6D;
  text-decoration: underline;
  border-top: 1px solid #EDEDEE;
}

/* ============================================================
   Body-level accessibility modes — toggled via body classes
   ============================================================ */

/* ---- Font size scaling (root font-size scaling) ---- */
html.a11y-font-110 { font-size: 110%; }
html.a11y-font-125 { font-size: 125%; }
html.a11y-font-150 { font-size: 150%; }

/* The launcher button is sized in px (not rem), so the html percentage
   scaling above doesn't reach it. Scale the launcher proportionally via
   a CSS variable so it grows in lockstep with the text. */
html.a11y-font-110 .a11y-launcher { --a11y-scale: 1.1; }
html.a11y-font-125 .a11y-launcher { --a11y-scale: 1.25; }
html.a11y-font-150 .a11y-launcher { --a11y-scale: 1.5; }

/* Panel keeps its 340px box size, but the root font-size is bumped so
   the text inside (all child sizes are in em) scales accordingly. */
html.a11y-font-110 .a11y-panel { font-size: 16.5px; }
html.a11y-font-125 .a11y-panel { font-size: 18.75px; }
html.a11y-font-150 .a11y-panel { font-size: 22.5px; }

/* ---- High contrast mode ---- */
body.a11y-contrast-high,
body.a11y-contrast-high * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.a11y-contrast-high img,
body.a11y-contrast-high svg,
body.a11y-contrast-high video {
  filter: grayscale(1) contrast(1.1);
}
/* The Circle logo SVG is a black silhouette. The universal grayscale
   filter above overrides the page's `brightness-0 invert` Tailwind
   classes that normally make it readable, leaving black-on-black.
   Force it to a white silhouette so it stays visible on every black
   high-contrast surface (nav, intro splash, footer). */
body.a11y-contrast-high img[src*="circle_logo"] {
  filter: brightness(0) invert(1) !important;
  background-color: transparent !important;
}
/* High-contrast: the widget is intentionally NOT excluded — it gets the
   same black background / white text / white border treatment as the rest
   of the page so the accessibility modes are consistent everywhere.
   But the pressed-state of toggle buttons needs a distinct look or the
   user can't see which options are active. Invert the colors on pressed
   buttons (white bg, black text) — the Windows High Contrast convention. */
body.a11y-contrast-high .a11y-btn[aria-pressed="true"],
body.a11y-contrast-high .a11y-btn[aria-pressed="true"] * {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}
/* Keep the reading-guide strip transparent in high contrast — the
   universal black-bg rule would otherwise fill it in, defeating the
   point of the spotlight. */
body.a11y-contrast-high .a11y-reading-guide-bar {
  background-color: transparent !important;
  border-color: transparent !important;
}
/* The mobile hamburger button's bars are <span>s coloured via Tailwind's
   bg-primary (dark blue). The universal black-bg rule above turns them
   black-on-black, making the icon invisible against the now-black nav.
   Force the bars white so the menu trigger stays discoverable. */
body.a11y-contrast-high #hamburger-btn span {
  background-color: #ffffff !important;
}

/* ---- Monochrome / grayscale ----
   Apply to all body children including launcher and panel. The reading
   guide bar and skip link are excluded because they don't need it; the
   filter on each element doesn't break its own position:fixed (only its
   descendants would be affected, which don't matter here). */
body.a11y-monochrome
  > :not(.a11y-reading-guide-bar):not(.a11y-skip-link):not(script) {
  filter: grayscale(1);
}

/* ---- Readable font (overrides decorative fonts) ---- */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.06em !important;
}

/* ---- Highlight links ---- */
body.a11y-highlight-links a {
  outline: 2px dashed #1A6FD9 !important;
  outline-offset: 4px !important;
  text-decoration: underline !important;
}

/* ---- Highlight headings ---- */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4,
body.a11y-highlight-headings h5,
body.a11y-highlight-headings h6 {
  outline: 2px dashed #1A6FD9 !important;
  outline-offset: 4px !important;
}

/* ---- Pause animations ---- */
body.a11y-pause-animations *,
body.a11y-pause-animations *::before,
body.a11y-pause-animations *::after {
  animation-play-state: paused !important;
  animation-duration: 0s !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

/* ---- Big cursor ---- */
body.a11y-big-cursor,
body.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5.5 3.21V20.79c0 .45.54.67.85.35l4.86-4.86 2.85 6.92c.13.31.49.46.81.32l1.78-.78c.32-.14.46-.49.32-.81l-2.81-6.83 6.83-.71c.44-.05.65-.58.31-.88l-15-13c-.31-.27-.81-.05-.81.37z'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* ---- Reading guide (spotlight strip following cursor) ----
   The strip itself is transparent; a huge box-shadow with positive spread
   dims everything around it, so only the strip stays readable. */
.a11y-reading-guide-bar {
  position: fixed;
  left: 0;
  right: 0;
  height: 48px;
  background: transparent;
  pointer-events: none;
  z-index: 99997;
  display: none;
  box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.8);
}
body.a11y-reading-guide .a11y-reading-guide-bar {
  display: block;
}

/* ---- Skip link (used in HTML) ---- */
.a11y-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #222126;
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.a11y-skip-link:focus {
  left: 0;
  outline: 3px solid #FFEB3B;
  outline-offset: 0;
}

/* ---- Global focus indicator (WCAG 2.4.7) ---- */
*:focus-visible {
  outline: 2px solid #1A6FD9 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* ---- Screen-reader only utility ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Reduced-motion handling for the widget itself ---- */
@media (prefers-reduced-motion: reduce) {
  .a11y-launcher,
  .a11y-btn {
    transition: none !important;
  }
}

/* ---- Compact layout on phones ----
   Default panel grows from bottom:96px upward with max-height
   100vh - 120px, which on short phones reaches almost to the top of the
   screen. Tighten paddings, gaps, and label margins, and cap the height
   so the panel anchors near the launcher instead of dominating the
   viewport. */
@media (max-width: 480px) {
  .a11y-panel {
    bottom: 88px;
    right: 12px;
    max-height: calc(100vh - 200px);
    font-size: 14px;
  }
  .a11y-panel-header {
    padding: 10px 14px;
  }
  .a11y-panel-body {
    padding: 8px;
  }
  .a11y-lang-row {
    padding: 4px 4px 8px;
    margin-bottom: 4px;
  }
  .a11y-group-label {
    margin: 4px 4px 2px;
  }
  .a11y-grid {
    gap: 6px;
    margin-bottom: 4px;
  }
  .a11y-btn {
    padding: 8px 6px;
    gap: 4px;
  }
  .a11y-btn-icon {
    font-size: 1.2em;
  }
  .a11y-reset {
    margin-top: 6px;
    padding: 10px;
  }
  .a11y-statement {
    padding: 8px;
  }
}