/* ═══════════════════════════════════════════════════════════════
   DPP Accessibility Toolbar — theme + font-size controls
   Shared across all 21 entry points. Safe to load on every page:
   uses its own --dp-a11y-* namespace so it never collides with a
   module's own --accent / --al / --a2 variables.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --dp-a11y-bg:#ffffff;
  --dp-a11y-text:#1e2040;
  --dp-a11y-border:#d8dcf0;
  --dp-a11y-accent:#4F81BD;
  --dp-a11y-shadow:0 8px 28px rgba(20,20,50,.18);
}

/* ---------- Font-size scaling ---------------------------------
   zoom is used (not rem overrides) because module content is
   authored in fixed px across many hand-built templates; zoom
   scales the whole page — text, spacing, images — proportionally
   without needing to touch each module's own CSS.
   Supported in Chrome, Edge, Safari; Firefox 126+. ---------------- */
html.dp-font-lg{ zoom:1.15; }
html.dp-font-xl{ zoom:1.3; }

/* ---------- Dark mode -------------------------------------------
   Filter-invert approach: works uniformly across every module's
   bespoke color scheme without rewriting each one's CSS. Media is
   re-inverted so photos/icons/video don't look like photo negatives. */
html.dp-dark{
  background:#111 !important;
  filter:invert(1) hue-rotate(180deg);
}
html.dp-dark img,
html.dp-dark video,
html.dp-dark svg,
html.dp-dark iframe,
html.dp-dark picture{
  filter:invert(1) hue-rotate(180deg);
}
/* Keep the toolbar itself right-side-up in dark mode */
html.dp-dark #dpA11yWidget{
  filter:invert(1) hue-rotate(180deg);
}

/* ---------- Toggle widget --------------------------------------- */
#dpA11yWidget{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9999;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#dpA11yToggle{
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background:var(--dp-a11y-accent);
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--dp-a11y-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease;
}
#dpA11yToggle:hover{ transform:scale(1.06); }
#dpA11yToggle:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

#dpA11yPanel{
  position:absolute;
  left:0;
  bottom:58px;
  width:250px;
  max-height:min(70vh,560px);
  overflow-y:auto;
  background:var(--dp-a11y-bg);
  color:var(--dp-a11y-text);
  border:1px solid var(--dp-a11y-border);
  border-radius:14px;
  box-shadow:var(--dp-a11y-shadow);
  padding:14px;
  display:none;
  animation:dpA11yIn .12s ease-out;
}
#dpA11yPanel.open{ display:block; }

@keyframes dpA11yIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.dpA11yLabel{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#6b7099;
  margin:0 0 6px;
}
.dpA11yLabel:not(:first-child){ margin-top:14px; }

.dpA11yRow{
  display:flex;
  gap:6px;
}
.dpA11yBtn{
  flex:1;
  border:1px solid var(--dp-a11y-border);
  background:#f5f6fc;
  color:var(--dp-a11y-text);
  border-radius:8px;
  padding:8px 4px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.dpA11yBtn:hover{ background:#eceefb; }
.dpA11yBtn.active{
  background:var(--dp-a11y-accent);
  border-color:var(--dp-a11y-accent);
  color:#fff;
}
.dpA11yBtn:focus-visible{ outline:2px solid var(--dp-a11y-accent); outline-offset:1px; }

.dpA11yDarkRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f5f6fc;
  border:1px solid var(--dp-a11y-border);
  border-radius:8px;
  padding:8px 10px;
}
.dpA11ySwitch{
  width:38px;
  height:22px;
  border-radius:20px;
  background:#c7cbe6;
  border:none;
  position:relative;
  cursor:pointer;
  flex-shrink:0;
}
.dpA11ySwitch::before{
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  transition:left .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.dpA11ySwitch.on{ background:var(--dp-a11y-accent); }
.dpA11ySwitch.on::before{ left:18px; }

@media (max-width:480px){
  #dpA11yWidget{ left:12px; bottom:12px; }
  #dpA11yPanel{ width:210px; max-height:65vh; }
}

/* ═══════════════════════════════════════════════════════════════
   Reading & motion toggles (DPP-A11Y-EXT)
   Each is independent and stackable with font-size/dark mode.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Reduce motion --------------------------------------- */
html.dp-reduce-motion *,
html.dp-reduce-motion *::before,
html.dp-reduce-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* ---------- Underline links --------------------------------------- */
html.dp-underline-links a{
  text-decoration:underline !important;
  text-underline-offset:2px;
}

/* ---------- Readability spacing --------------------------------------- */
html.dp-readable-spacing body,
html.dp-readable-spacing p,
html.dp-readable-spacing li,
html.dp-readable-spacing td,
html.dp-readable-spacing th{
  line-height:1.8 !important;
  letter-spacing:.02em !important;
  word-spacing:.08em !important;
}
html.dp-readable-spacing p,
html.dp-readable-spacing li{
  margin-bottom:1.1em !important;
}

/* ---------- Highlight headings --------------------------------------- */
html.dp-highlight-headings h1,
html.dp-highlight-headings h2,
html.dp-highlight-headings h3,
html.dp-highlight-headings h4,
html.dp-highlight-headings h5,
html.dp-highlight-headings h6{
  background:#fff6c8 !important;
  color:#1e2040 !important;
  padding:.15em .45em !important;
  border-left:4px solid var(--dp-a11y-accent) !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---------- Dyslexia-friendly font ---------------------------------------
   No custom webfont is hosted on the platform, so this swaps to a system
   font with more distinguishable letterforms (rounder, less symmetrical
   b/d/p/q) rather than pulling in an external OpenDyslexic file. -------- */
html.dp-dyslexia-font body,
html.dp-dyslexia-font p,
html.dp-dyslexia-font li,
html.dp-dyslexia-font span,
html.dp-dyslexia-font div,
html.dp-dyslexia-font h1,
html.dp-dyslexia-font h2,
html.dp-dyslexia-font h3,
html.dp-dyslexia-font h4,
html.dp-dyslexia-font h5,
html.dp-dyslexia-font h6,
html.dp-dyslexia-font label,
html.dp-dyslexia-font input,
html.dp-dyslexia-font select,
html.dp-dyslexia-font textarea,
html.dp-dyslexia-font button{
  font-family:'Comic Sans MS','Comic Sans',Verdana,sans-serif !important;
  letter-spacing:.01em !important;
}

/* ---------- Stronger focus outline --------------------------------------- */
html.dp-strong-focus *:focus-visible{
  outline:4px solid #ff5f1f !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 6px rgba(255,95,31,.35) !important;
  border-radius:2px;
}