/* ==========================================================================
   GoAccessibility — Autobotix override layer
   --------------------------------------------------------------------------
   Restyles the third-party go-accessibility.com widget (go-accessibility.com/
   widget/goa-widget.min.js) to match the site's palette, typography, radii,
   focus treatment, and light/dark theming.

   The widget injects #goa-widget-styles at runtime with class-based rules
   (max specificity .goa-main .goa-content .goa-modes-list ul li button .text).
   Every selector here is scoped under the #goa-popup id, so it outranks those
   rules on specificity alone — no !important and no source-order dependency.
   All colours come from the site's CSS custom properties, so the widget
   themes automatically with html[data-theme="dark"].
   ========================================================================== */

/* Shell — match site typography (font already inherits, set defensively) */
#goa-popup,
#goa-popup .goa-content {
  font-family: var(--font);
}

/* Floating toggle tab — mirrors .btn-primary */
#goa-popup .goa-toggle button,
#accessibility-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--accent);
  color: #fff;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

/* Left-edge tab in Hebrew / RTL */
html[dir="rtl"] #goa-popup .goa-toggle button,
#goa-popup.goa-rtl .goa-toggle button {
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Flush bookmark tab — docked to the viewport edge (widget default is margin:10px) */
#goa-popup.goa-main {
  margin: 0 !important;
  border-radius: 0;
}

/* English — right edge; Hebrew — left edge */
html[dir="ltr"] #goa-popup.goa-main,
html[dir="ltr"] #goa-popup.goa-ltr {
  right: 0 !important;
  left: auto !important;
}

html[dir="rtl"] #goa-popup.goa-main,
html[dir="rtl"] #goa-popup.goa-rtl {
  left: 0 !important;
  right: auto !important;
}

/* Replace the widget's thin line-art glyph with the universal accessibility
   symbol, drawn as a currentColor mask so it stays crisp and white on the
   accent tab in both themes. */
#goa-popup .goa-toggle button svg {
  display: none;
}

#goa-popup .goa-toggle button::before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#goa-popup .goa-toggle button:hover,
#accessibility-toggle:hover {
  filter: brightness(1.08);
}

#goa-popup .goa-toggle button:focus-visible,
#accessibility-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Options panel — mirrors .card surface, floats as a popover */
#goa-popup .goa-modes-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:
    0 18px 50px -24px color-mix(in srgb, var(--text) 38%, transparent),
    0 2px 8px -4px color-mix(in srgb, var(--text) 16%, transparent);
}

/* Option rows */
#goa-popup .goa-modes-list ul li button,
#goa-popup .goa-modes-list ul li a {
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#goa-popup .goa-modes-list ul li button .text,
#goa-popup .goa-modes-list ul li a .text {
  color: var(--text);
}

#goa-popup .goa-modes-list ul li button:hover,
#goa-popup .goa-modes-list ul li a:hover {
  background-color: var(--accent-dim);
  border-color: var(--border);
}

#goa-popup .goa-modes-list ul li button:focus-visible,
#goa-popup .goa-modes-list ul li a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Active / enabled mode — accent fill like a pressed primary control */
#goa-popup .goa-modes-list .active-mode {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#goa-popup .goa-modes-list .active-mode .text {
  color: #fff;
}

/* Icons — recolour from hardcoded #1C274C / #000000 to currentColor so they
   follow the surrounding text colour in both themes and on the accent fill.
   Stroke-drawn icons are restroked; the few fill-drawn glyphs (readable font,
   reset) are refilled, while fill="none" backplates are left untouched. */
#goa-popup svg path,
#goa-popup svg circle,
#goa-popup svg rect,
#goa-popup svg line {
  stroke: currentColor;
}

#goa-popup svg path[fill]:not([fill="none"]) {
  fill: currentColor;
}

#goa-popup .goa-modes-list .active-mode svg {
  color: #fff;
}

/* Powered-by footer */
#goa-popup .powered-by,
#goa-popup #goa-powered-by {
  color: var(--text-muted);
}

#goa-popup .powered-by a {
  color: var(--accent);
  text-decoration: none;
}

#goa-popup .powered-by a:hover {
  text-decoration: underline;
}