/* SAT Header Accessibility Toggle - v1.2.3 */
:root{
  --sat-a11y-z: 99999;
  --sat-a11y-radius: 14px;
  --sat-a11y-shadow: 0 10px 30px rgba(0,0,0,.18);
  --sat-a11y-bg: #ffffff;
  --sat-a11y-text: #111827;
  --sat-a11y-muted: #6b7280;
  --sat-a11y-border: rgba(0,0,0,.12);
  --sat-a11y-accent: #c41e3a; /* your red */
  --sat-a11y-accent2: #7f1d1d;

  /* readability tweaks */
  --sat-a11y-letter-spacing: 0.10em; /* requested */
  --sat-a11y-ruler-height: 54px;

  /* high-contrast (bright) palette */
  --sat-hc-bg: #ffffff;
  --sat-hc-surface: #f3f4f6;    /* light gray panels */
  --sat-hc-text: #000000;
  --sat-hc-border: #000000;
  --sat-hc-link: #0033cc;       /* deep blue */
  --sat-hc-link-visited: #551a8b;
  --sat-hc-accent: #ffeb3b;     /* strong yellow */
}

html{ font-size: calc(100% * var(--sat-a11y-font-scale, 1)); }

/* ===== High contrast (bright, not dark) =====
   White background, black text, heavy borders, yellow accents for controls.
   This is intentionally more visible than a mild contrast tweak. */
html.sat-a11y--contrast body{
  background: var(--sat-hc-bg) !important;
  color: var(--sat-hc-text) !important;
}

html.sat-a11y--contrast body :where(
  header, nav, main, section, article, aside, footer,
  .main, .content, .entry-content, .navbar, .navbar_cont, .ht_inside
){
  background: var(--sat-hc-bg) !important;
  color: var(--sat-hc-text) !important;
  background-image: none !important;
  text-shadow: none !important;
}

/* Give obvious separation to common “boxes” without forcing every div */
html.sat-a11y--contrast body :where(
  .card, .box, .widget, .panel, .post, .page, .entry, .entry-content,
  .navbar, .header_top, .footer, table
){
  border: 2px solid var(--sat-hc-border) !important;
}

/* Text */
html.sat-a11y--contrast body :where(p, li, dt, dd, blockquote, span, strong, em, small, h1, h2, h3, h4, h5, h6){
  color: var(--sat-hc-text) !important;
}

/* Links */
html.sat-a11y--contrast body :where(a){
  color: var(--sat-hc-link) !important;
  text-decoration: underline !important;
  text-underline-offset: .18em;
  text-decoration-thickness: .16em;
}
html.sat-a11y--contrast body :where(a:visited){
  color: var(--sat-hc-link-visited) !important;
}

/* Buttons / controls: yellow accent */
html.sat-a11y--contrast body :where(button, [type="button"], [type="submit"], .button, .btn){
  background: var(--sat-hc-accent) !important;
  color: var(--sat-hc-text) !important;
  border: 2px solid var(--sat-hc-border) !important;
}
html.sat-a11y--contrast body :where(input, select, textarea){
  background: #fff !important;
  color: var(--sat-hc-text) !important;
  border: 2px solid var(--sat-hc-border) !important;
}

/* Table clarity */
html.sat-a11y--contrast body :where(th, td){
  border: 2px solid var(--sat-hc-border) !important;
}
html.sat-a11y--contrast body :where(th){
  background: var(--sat-hc-surface) !important;
}

/* Selection highlight */
html.sat-a11y--contrast ::selection{
  background: var(--sat-hc-accent);
  color: #000;
}

/* ===== Letter spacing ===== */
html.sat-a11y--spacing body :where(p, li, dt, dd, blockquote, .entry-content){
  letter-spacing: var(--sat-a11y-letter-spacing) !important;
}

/* ===== Reading ruler (still visible) ===== */
.sat-a11y-ruler{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--sat-a11y-ruler-height);
  background: rgba(196, 30, 58, .22);
  border-top: 2px solid rgba(196, 30, 58, .50);
  border-bottom: 2px solid rgba(196, 30, 58, .50);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 2147483647;
  transform: translate3d(0,-200px,0);
  display: none;
}

/* ===== existing features ===== */
html.sat-a11y--grayscale body{ filter: grayscale(1); }
html.sat-a11y--invert body{ filter: invert(1) hue-rotate(180deg); }
html.sat-a11y--invert img,
html.sat-a11y--invert video,
html.sat-a11y--invert iframe,
html.sat-a11y--invert svg,
html.sat-a11y--invert canvas{
  filter: invert(1) hue-rotate(180deg);
}

html.sat-a11y--underline a{
  text-decoration: underline !important;
  text-underline-offset: .15em;
  text-decoration-thickness: .12em;
}

html.sat-a11y--reduce-motion *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Optional force scaling for px-heavy themes */
html.sat-a11y--force-text body :where(
  p, li, dt, dd, blockquote,
  a, span, em, strong, small,
  td, th, figcaption, caption,
  label, input, textarea, select, button
){
  font-size: calc(1em * var(--sat-a11y-font-scale, 1)) !important;
}

/* ===== toolbar UI ===== */
.sat-a11y{
  position: relative;
  display: inline-block;
  z-index: var(--sat-a11y-z);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.2;
}

.sat-a11y__btnInline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 1);
  background: var(--sat-a11y-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.sat-a11y__btnInline:hover{ filter: brightness(1.05); }
.sat-a11y__btnInline:focus-visible{
  outline: 3px solid rgba(196, 30, 58, .25);
  outline-offset: 2px;
}
.sat-a11y__letter{
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  transform: translateY(-.5px);
}

.sat-a11y__panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(340px, calc(100vw - 24px));
  background: var(--sat-a11y-bg);
  color: var(--sat-a11y-text);
  border: 1px solid var(--sat-a11y-border);
  border-radius: var(--sat-a11y-radius);
  box-shadow: var(--sat-a11y-shadow);
  overflow: hidden;
}

.sat-a11y__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--sat-a11y-accent), var(--sat-a11y-accent2));
  color: #fff;
}
.sat-a11y__title{ font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.sat-a11y__close{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
}
.sat-a11y__close:focus-visible{
  outline: 3px solid rgba(255,255,255,.45);
  outline-offset: 2px;
}

.sat-a11y__body{ padding: 12px; }
.sat-a11y__group + .sat-a11y__group{ margin-top: 12px; }
.sat-a11y__label{
  font-size: 12px;
  font-weight: 800;
  color: var(--sat-a11y-muted);
  margin-bottom: 8px;
}
.sat-a11y__row{ display: flex; gap: 8px; }

.sat-a11y__pill{
  appearance: none;
  border: 1px solid var(--sat-a11y-border);
  background: #fff;
  color: var(--sat-a11y-text);
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  flex: 1;
}
.sat-a11y__pill:hover{ border-color: rgba(196, 30, 58, .35); }
.sat-a11y__pill:focus-visible{
  outline: 3px solid rgba(196, 30, 58, .22);
  outline-offset: 2px;
}
.sat-a11y__pill--ghost{
  background: #fff;
  color: var(--sat-a11y-accent);
  border-color: rgba(196, 30, 58, .25);
  width: 100%;
}

.sat-a11y__toggles{ display: grid; gap: 10px; }
.sat-a11y__toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sat-a11y-border);
  border-radius: 12px;
  background: #fff;
}
.sat-a11y__toggle--warn{ border-left: 3px solid rgba(196, 30, 58, .45); }
.sat-a11y__toggle input{ width: 18px; height: 18px; }
.sat-a11y__toggle span{ font-size: 14px; font-weight: 650; }

.sat-a11y__hint{
  margin-top: -4px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--sat-a11y-muted);
}

.sat-a11y__footer{ margin-top: 12px; }

.sat-a11y__sr{
  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;
}