/* Compact JSC accessibility panel. Interface selectors are isolated under the widget root. */
#a11y-widget-root {
  --a11y-navy: #1b3a6b;
  --a11y-navy-dark: #133054;
  --a11y-gold: #c79a3c;
  --a11y-gold-soft: #f5ecd8;
  --a11y-ink: #34383f;
  --a11y-muted: #747981;
  --a11y-line: #e3e5e8;
  --a11y-panel: #fbfbfb;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  color: var(--a11y-ink);
  direction: ltr;
  font: 400 13px/1.35 'Poppins', 'Cairo', system-ui, sans-serif;
  text-align: start;
  letter-spacing: normal;
  word-spacing: normal;
  isolation: isolate;
}

#a11y-widget-root[dir="rtl"] { font-family: 'Cairo', system-ui, sans-serif; }

#a11y-widget-root *,
#a11y-widget-root *::before,
#a11y-widget-root *::after { box-sizing: border-box; }

#a11y-widget-root [hidden] { display: none !important; }
#a11y-widget-root button,
#a11y-widget-root input { font: inherit; }
#a11y-widget-root button { cursor: pointer; }

#a11y-widget-root button:focus-visible,
#a11y-widget-root input:focus-visible {
  outline: 3px solid var(--a11y-gold) !important;
  outline-offset: 3px !important;
}

#a11y-widget-root .a11y-visually-hidden,
#a11y-widget-root .a11y-live {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#a11y-widget-root .a11y-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: rgb(19 48 84 / 3%);
}

#a11y-widget-root .a11y-panel {
  position: fixed;
  /* Anchored above the floating trigger, on the same viewport side as the trigger. */
  top: auto;
  bottom: 140px;
  left: auto;
  right: 12px;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 24px));
  max-height: calc(100vh - 164px);
  /* dvh tracks the collapsing browser chrome on mobile; vh above is the fallback. */
  max-height: calc(100dvh - 164px);
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  color: var(--a11y-ink);
  background: var(--a11y-panel);
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 12px 42px rgb(19 48 84 / 18%);
  animation: a11y-panel-enter 160ms ease-out;
}

/* Arabic: the floating trigger sits bottom-left, so the panel opens above it on the left. */
#a11y-widget-root[dir="rtl"] .a11y-panel {
  right: auto;
  left: 12px;
}

@keyframes a11y-panel-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

#a11y-widget-root .a11y-close {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 7px;
  place-items: center;
  color: var(--a11y-navy-dark);
  background: transparent;
  border: 0;
  border-radius: 6px;
}

#a11y-widget-root .a11y-close:hover { color: #fff; background: var(--a11y-navy); }
#a11y-widget-root .a11y-close svg,
#a11y-widget-root .a11y-reset svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#a11y-widget-root .a11y-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 8px;
  padding-top: 38px;
  padding-bottom: 18px;
}

#a11y-widget-root .a11y-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 88px;
  padding: 7px 4px;
  color: var(--a11y-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

#a11y-widget-root .a11y-feature:hover {
  color: var(--a11y-navy);
  background: #fff;
  border-color: var(--a11y-line);
}

#a11y-widget-root .a11y-feature[aria-pressed="true"] {
  color: var(--a11y-navy-dark);
  background: var(--a11y-gold-soft);
  border-color: var(--a11y-gold);
}

#a11y-widget-root .a11y-feature svg {
  flex: none;
  width: 43px;
  height: 43px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#a11y-widget-root .a11y-feature svg .fill {
  fill: currentColor;
  stroke: currentColor;
}

#a11y-widget-root .a11y-feature span {
  display: block;
  max-width: 100%;
  min-height: 30px;
  color: inherit;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

#a11y-widget-root .a11y-adjustments {
  padding-top: 14px;
  border-top: 1px solid var(--a11y-line);
}

#a11y-widget-root .a11y-control-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

#a11y-widget-root .a11y-control-tabs button {
  min-height: 38px;
  padding: 7px 5px;
  color: var(--a11y-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 11px;
}

#a11y-widget-root[dir="rtl"] .a11y-control-tabs { direction: rtl; }

#a11y-widget-root .a11y-control-tabs button:hover { border-color: var(--a11y-gold); }
#a11y-widget-root .a11y-control-tabs button[aria-pressed="true"] {
  color: #fff;
  background: var(--a11y-gold);
  border-color: var(--a11y-gold);
  font-weight: 700;
}

#a11y-widget-root .a11y-slider-slot { padding: 15px 0 11px; }
#a11y-widget-root .a11y-slider { display: block; }
#a11y-widget-root .a11y-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}

#a11y-widget-root .a11y-slider-row > span {
  flex: none;
  width: 25px;
  color: var(--a11y-navy-dark);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

#a11y-widget-root input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--a11y-gold);
}

#a11y-widget-root .a11y-slider output { display: none; }

#a11y-widget-root .a11y-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  color: #fff;
  background: var(--a11y-navy);
  border: 0;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}

#a11y-widget-root .a11y-reset:hover { background: var(--a11y-gold); }
#a11y-widget-root .a11y-reset svg { width: 18px; height: 18px; }

#a11y-widget-root .a11y-default-trigger {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 12px;
  place-items: center;
  pointer-events: auto;
  color: #fff;
  background: #151515;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
}

#a11y-widget-root .a11y-default-trigger svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

@media (max-width: 600px) {
  #a11y-widget-root .a11y-panel,
  #a11y-widget-root[dir="rtl"] .a11y-panel {
    top: auto;
    /* The trigger (.a11y-fab, in the site stylesheet) shrinks to 68px + bottom:24px at this same
       600px breakpoint — top edge at 92px from the viewport bottom — but this value stayed at
       176px (even bigger than the 140px desktop one, tuned for the 90px trigger), opening an
       ~84px gap between the icon and the panel instead of closing it. 100px leaves a small,
       consistent ~8px gap instead. */
    bottom: 100px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - 116px);
    max-height: calc(100dvh - 116px);
    padding: 14px 12px 12px;
    border-radius: 16px;
  }
  #a11y-widget-root .a11y-close { top: 10px; left: 10px; width: 32px; height: 32px; }
  #a11y-widget-root .a11y-feature-grid { gap: 6px 4px; padding-top: 34px; padding-bottom: 12px; }
  #a11y-widget-root .a11y-feature { min-height: 74px; gap: 5px; padding: 5px 2px; }
  #a11y-widget-root .a11y-feature svg { width: 34px; height: 34px; }
  #a11y-widget-root .a11y-feature span { min-height: 26px; font-size: 10px; }
  #a11y-widget-root .a11y-adjustments { padding-top: 10px; }
  #a11y-widget-root .a11y-control-tabs button { min-height: 34px; font-size: 10px; }
  #a11y-widget-root .a11y-slider-slot { padding: 10px 0 6px; }
  #a11y-widget-root .a11y-reset { min-height: 42px; font-size: 11px; }
}

/* Narrower still: .a11y-fab (site stylesheet) shrinks again to 56px at this width — top edge at
   80px from the viewport bottom — so the panel needs to sit a little lower still. */
@media (max-width: 380px) {
  #a11y-widget-root .a11y-panel,
  #a11y-widget-root[dir="rtl"] .a11y-panel {
    bottom: 88px;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
  }
}

/* Narrow phones: three 34px tiles plus their labels no longer fit on one row. */
@media (max-width: 360px) {
  #a11y-widget-root .a11y-feature svg { width: 30px; height: 30px; }
  #a11y-widget-root .a11y-feature { min-height: 68px; }
  #a11y-widget-root .a11y-feature span { font-size: 9.5px; }
}

@media (max-height: 620px) and (max-width: 600px) {
  #a11y-widget-root .a11y-feature-grid { gap: 4px 3px; padding-top: 32px; padding-bottom: 8px; }
  #a11y-widget-root .a11y-feature { min-height: 62px; gap: 3px; }
  #a11y-widget-root .a11y-feature svg { width: 28px; height: 28px; }
  #a11y-widget-root .a11y-feature span { min-height: 24px; font-size: 9.5px; }
  #a11y-widget-root .a11y-slider-slot { padding: 8px 0 4px; }
}

@media (max-height: 820px) and (min-width: 601px) {
  #a11y-widget-root .a11y-panel {
    top: auto;
    bottom: 140px;
    max-height: calc(100vh - 156px);
    max-height: calc(100dvh - 156px);
  }
  #a11y-widget-root .a11y-feature-grid { gap: 4px 7px; padding-top: 32px; padding-bottom: 9px; }
  #a11y-widget-root .a11y-feature { min-height: 69px; gap: 3px; }
  #a11y-widget-root .a11y-feature svg { width: 34px; height: 34px; }
  #a11y-widget-root .a11y-feature span { min-height: 25px; font-size: 10px; }
  #a11y-widget-root .a11y-adjustments { padding-top: 8px; }
  #a11y-widget-root .a11y-slider-slot { padding: 7px 0 5px; }
}

@media (prefers-reduced-motion: reduce) {
  #a11y-widget-root *,
  #a11y-widget-root *::before,
  #a11y-widget-root *::after { animation: none !important; transition: none !important; }
}

/* Host-page effects. The panel itself is always excluded. */
html.a11y-font-size body > :not(#a11y-widget-root) { zoom: var(--a11y-font-scale, 1); }
html.a11y-line-spacing body :not(#a11y-widget-root, #a11y-widget-root *) { line-height: var(--a11y-line-height, 1.5) !important; }
html.a11y-word-spacing body :not(#a11y-widget-root, #a11y-widget-root *) { word-spacing: var(--a11y-word-spacing, 0) !important; }

html.a11y-contrast { --a11y-page-contrast: 1.45; }
html.a11y-monochrome { --a11y-page-grayscale: 1; }
html.a11y-saturation { --a11y-page-saturation: 1.8; }
html:is(.a11y-contrast, .a11y-monochrome, .a11y-saturation) body > :not(#a11y-widget-root) {
  filter: contrast(var(--a11y-page-contrast, 1)) grayscale(var(--a11y-page-grayscale, 0)) saturate(var(--a11y-page-saturation, 1));
}

html.a11y-big-cursor body :not(#a11y-widget-root, #a11y-widget-root *) {
  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 fill='white' stroke='%23133054' stroke-width='2.5' d='M4 3v31l8-8 7 13 6-3-7-13h13z'/%3E%3C/svg%3E") 4 3, auto !important;
}

html.a11y-stop-animations body :not(#a11y-widget-root, #a11y-widget-root *),
html.a11y-stop-animations body :not(#a11y-widget-root, #a11y-widget-root *)::before,
html.a11y-stop-animations body :not(#a11y-widget-root, #a11y-widget-root *)::after {
  scroll-behavior: auto !important;
  animation-play-state: paused !important;
  transition: none !important;
}

html.a11y-highlight-headings body :where(h1, h2, h3, h4, h5, h6):not(#a11y-widget-root *) {
  color: var(--a11y-navy-dark, #133054) !important;
  background: #f5dc9d !important;
  outline: 2px solid #c79a3c !important;
  outline-offset: 3px !important;
}

html.a11y-highlight-links body a:not(#a11y-widget-root *) {
  color: #031e5e !important;
  background: #f5dc9d !important;
  text-decoration: underline 3px !important;
  text-underline-offset: 3px !important;
}

/* .a11y-fab * is excluded here (not just re-shown afterward) because :not(#a11y-widget-root *)
   embeds an ID selector, which out-specifies any later class-based "show" rule regardless of
   source order. */
html.a11y-hide-images body img:not(#a11y-widget-root *):not(.a11y-fab *) { visibility: hidden !important; }

.a11y-alt-caption[data-a11y-alt-caption] {
  display: block !important;
  padding: 6px 9px !important;
  margin: 4px 0 8px !important;
  color: #fff !important;
  background: #1b3a6b !important;
  border-inline-start: 4px solid #c79a3c !important;
  font: 700 13px/1.4 Arial, Tahoma, sans-serif !important;
}

#a11y-widget-root .a11y-notice {
  margin: 10px 0 0;
  padding: 9px 11px;
  color: var(--a11y-navy-dark);
  background: var(--a11y-gold-soft);
  border: 1px solid var(--a11y-gold);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.5;
}

/* Popup shown when the device has no voice for the language being read. */
#a11y-widget-root .a11y-voice-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgb(19 48 84 / 45%);
  pointer-events: auto;
}

#a11y-widget-root .a11y-voice-modal {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  padding: 26px 22px 20px;
  text-align: center;
  color: var(--a11y-ink);
  background: var(--a11y-panel);
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgb(19 48 84 / 24%);
  animation: a11y-panel-enter 160ms ease-out;
  pointer-events: auto;
}

#a11y-widget-root .a11y-voice-modal-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 28px;
  height: 28px;
  padding: 6px;
  color: var(--a11y-navy-dark);
  background: transparent;
  border: 0;
  border-radius: 6px;
}

#a11y-widget-root .a11y-voice-modal-close:hover { color: #fff; background: var(--a11y-navy); }
#a11y-widget-root .a11y-voice-modal-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

#a11y-widget-root .a11y-voice-modal-title {
  margin: 0;
  color: var(--a11y-navy-dark);
  font-size: 15px;
  font-weight: 800;
}

#a11y-widget-root .a11y-voice-modal-body {
  margin: 0;
  color: var(--a11y-ink);
  font-size: 12.5px;
  line-height: 1.6;
}

#a11y-widget-root .a11y-voice-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  padding: 8px 14px;
  color: #fff;
  background: var(--a11y-navy);
  border: 0;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
}

#a11y-widget-root .a11y-voice-install-btn:hover { background: var(--a11y-gold); }
#a11y-widget-root .a11y-voice-install-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Passage currently being spoken by the page reader. */
.a11y-reading {
  background: rgb(255 214 102 / 45%) !important;
  outline: 2px solid #b8860b !important;
  outline-offset: 2px;
  border-radius: 4px;
  scroll-margin-block: 120px;
}