/* ==========================================================
   Special People — Accessibility Toolbar  v1.0.0
   Vanilla CSS — no frameworks — WordPress compatible
   ========================================================== */

/* ── Brand tokens ────────────────────────────────────────── */
:root {
  --sp-teal:        #124145;
  --sp-teal-mid:    #2c7a80;
  --sp-teal-lt:     #4f9a9f;
  --sp-teal-bg:     #e0eeef;
  --sp-teal-50:     #f1f7f7;
  --sp-green-text:  #8b9a2c;
  --sp-coral:       #FF988C;
  --sp-green-dot:   #C4D14F;
  --sp-text-dark:   #0e3437;
  --sp-text-mid:    #353b3d;
  --sp-text-muted:  #6c7174;
  --sp-border:      #e2e3e5;
  --sp-border-mid:  #c7c9cb;
  --sp-surface:     #f0f1f2;
  --sp-shadow:      rgba(18,65,69,.18);
  --sp-shadow-btn:  rgba(18,65,69,.38);
  --sp-focus-ring:  rgba(79,154,159,.35);
  --sp-focus-bdr:   #4f9a9f;
}

/* ── Toolbar reset ───────────────────────────────────────── */
#sp-a11y-wrap,
#sp-a11y-wrap *,
#sp-a11y-wrap *::before,
#sp-a11y-wrap *::after {
  box-sizing: border-box;
}

#sp-a11y-wrap * {
  font-family: inherit;
  line-height: normal;
}

/* ── Toolbar interaction protection ──────────────────────────
   Prevents WordPress theme or plugin CSS from accidentally
   disabling toolbar buttons or blocking pointer events.
   The :disabled rule re-applies reduced opacity only to the
   specific controls that should appear inactive (Play etc.).  */
#sp-a11y-wrap button {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
#sp-a11y-wrap .sp-tog {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
#sp-a11y-wrap .sp-ctrl-btn:disabled {
  opacity: .32 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ── Floating trigger button ─────────────────────────────── */
/* Floating accessibility button — position is always fixed to viewport.
   !important guards against any filter stacking-context side effect.   */
#sp-btn {
  position: fixed !important;
  top: 14px !important;
  right: 80px !important;
  width: 56px;
  height: 56px;
  background: var(--sp-teal);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px var(--sp-shadow-btn);
  z-index: 999999 !important;
  transition: transform .18s ease, box-shadow .18s ease;
  padding: 0;
}

#sp-btn::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 50%;
  pointer-events: none;
}

#sp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--sp-shadow-btn);
}

#sp-btn:focus-visible {
  outline: none;
  box-shadow: 0 8px 28px var(--sp-shadow-btn), 0 0 0 3px var(--sp-focus-ring);
}

#sp-btn[aria-expanded="true"] {
  box-shadow: 0 8px 28px var(--sp-shadow-btn), 0 0 0 4px rgba(196,209,79,.3);
}

.sp-fab__label {
  /* visually hidden but available to screen readers */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Mobile overlay ──────────────────────────────────────── */
#sp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18,65,69,.12);
  z-index: 99989;
  -webkit-tap-highlight-color: transparent;
}

/* ── Panel ───────────────────────────────────────────────── */
#sp-panel {
  position: fixed !important;
  top: 82px !important;
  right: 80px !important;
  width: 360px;
  max-height: calc(100vh - 100px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 48px var(--sp-shadow), 0 4px 12px rgba(18,65,69,.08);
  z-index: 99991;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sp-panel-in .2s ease both;
}

#sp-panel[hidden] { display: none; }

@keyframes sp-panel-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Teal gradient accent */
.sp-panel__bar {
  height: 4px;
  background: linear-gradient(90deg, #124145, #2c7a80 60%, #4f9a9f);
  flex-shrink: 0;
}

/* ── Panel header ────────────────────────────────────────── */
.sp-panel__header {
  padding: 15px 18px 12px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  flex-shrink: 0;
}

.sp-panel__icon {
  width: 40px; height: 40px;
  background: var(--sp-teal-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-panel__heading { flex: 1; min-width: 0; }

.sp-panel__title {
  font-family: 'Baloo 2', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text-dark);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.sp-panel__sub {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 11px;
  color: var(--sp-text-muted);
  margin: 3px 0 0;
  padding: 0;
}

.sp-panel__x {
  width: 30px; height: 30px;
  background: var(--sp-surface);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sp-text-mid);
  padding: 0;
  transition: background .15s;
}

.sp-panel__x:hover { background: var(--sp-border); }

.sp-panel__x:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
  border: 1.5px solid var(--sp-focus-bdr);
}

/* Mobile bottom-sheet drag handle */
.sp-panel__handle {
  display: none;
  width: 36px; height: 4px;
  background: var(--sp-border-mid);
  border-radius: 4px;
  margin: 10px auto 0;
  flex-shrink: 0;
  order: -1; /* sits above header on mobile */
}

/* ── Tab bar ─────────────────────────────────────────────── */
.sp-tabbar {
  padding: 10px 16px 0;
  flex-shrink: 0;
}

.sp-tablist {
  background: var(--sp-surface);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  gap: 3px;
  margin: 0;
}

.sp-tab {
  flex: 1;
  height: 34px;
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--sp-text-muted);
  transition: background .15s, color .15s, box-shadow .15s;
  padding: 0 4px;
  white-space: nowrap;
}

.sp-tab.is-active {
  background: var(--sp-teal);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(18,65,69,.22);
}

.sp-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring), inset 0 0 0 1.5px var(--sp-focus-bdr);
}

/* Divider below tab bar */
.sp-tabdivider {
  height: 1px;
  background: var(--sp-border);
  margin: 10px 0 0;
  flex-shrink: 0;
}

/* ── Scrollable panels container ─────────────────────────── */
.sp-panels {
  flex: 1;
  overflow-y: auto;
  -webkit-mask: linear-gradient(to bottom, black 90%, transparent 100%);
  mask: linear-gradient(to bottom, black 90%, transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--sp-border-mid) transparent;
}

.sp-panels::-webkit-scrollbar { width: 4px; }
.sp-panels::-webkit-scrollbar-thumb {
  background: var(--sp-border-mid);
  border-radius: 4px;
}

/* ── Individual tab panel ────────────────────────────────── */
.sp-tp {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: none;
}

.sp-tp[hidden] { display: none; }

/* ── Section ─────────────────────────────────────────────── */
.sp-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-section-label {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--sp-green-text);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0;
}

.sp-section-sub {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 4px 0 0;
}

/* ── Audio player ─────────────────────────────────────────── */
.sp-player {
  background: #f5f8f8;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-player__status {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 11px;
  color: var(--sp-text-muted);
  text-align: center;
  min-height: 16px;
  margin: 0;
}

.sp-player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sp-ctrl-btn {
  width: 44px; height: 44px;
  background: #fff;
  border: 1.5px solid var(--sp-border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sp-text-muted);
  gap: 2px;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}

.sp-ctrl-btn .sp-ctrl-label {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 8px;
  font-weight: 500;
}

.sp-ctrl-btn--primary {
  width: 52px; height: 52px;
  background: var(--sp-teal);
  border-color: var(--sp-teal);
  color: #fff;
  box-shadow: 0 4px 14px rgba(18,65,69,.28);
}

.sp-ctrl-btn:not(:disabled):hover { border-color: var(--sp-teal-mid); color: var(--sp-teal); }
.sp-ctrl-btn--primary:not(:disabled):hover { background: var(--sp-teal-mid); border-color: var(--sp-teal-mid); color: #fff; }
.sp-ctrl-btn:disabled { opacity: .32; cursor: not-allowed; }

.sp-ctrl-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

/* Speed buttons */
.sp-btn-group { display: flex; gap: 6px; }

.sp-spd {
  flex: 1; height: 34px;
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-border-mid);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px;
  color: var(--sp-text-muted);
  transition: background .15s, border-color .15s, color .15s;
  padding: 0;
}

.sp-spd.is-active {
  background: var(--sp-teal);
  border-color: var(--sp-teal);
  color: #fff;
  font-weight: 600;
}

.sp-spd:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

/* ── Toggle switch ────────────────────────────────────────── */
.sp-tog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.sp-tog-row--card {
  background: #f8f9f9;
  border: 1.5px solid var(--sp-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.sp-tog-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-mid);
  flex: 1;
  min-width: 0;
}

.sp-tog-info svg { color: var(--sp-teal-mid); flex-shrink: 0; }
.sp-tog-info strong { display: block; font-weight: 600; color: var(--sp-text-dark); font-size: 12px; }
.sp-tog-info small { display: block; font-size: 10px; color: var(--sp-text-muted); font-weight: 400; margin-top: 2px; }

.sp-tog {
  width: 44px; height: 24px;
  background: var(--sp-border-mid);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background .18s ease;
  padding: 0;
}

.sp-tog.is-on { background: var(--sp-teal); }

.sp-tog__thumb {
  display: block;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px; left: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .18s ease;
}

.sp-tog.is-on .sp-tog__thumb { left: 22px; }

.sp-tog:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

/* ── Text size stepper ────────────────────────────────────── */
.sp-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-step {
  width: 38px; height: 38px;
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-border-mid);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 300;
  color: var(--sp-text-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  padding: 0 0 2px;
  transition: background .15s;
}

.sp-step:hover { background: var(--sp-border); }

.sp-step:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

.sp-txt-val {
  flex: 1; height: 38px;
  background: #f5f5f5;
  border: 1.5px solid var(--sp-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-dark);
}

.sp-link-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 11px;
  color: var(--sp-teal-mid);
  text-decoration: underline;
  text-decoration-color: transparent;
  padding: 2px 0;
  text-align: left;
  transition: color .15s, text-decoration-color .15s;
}

.sp-link-btn:hover { color: var(--sp-teal); text-decoration-color: var(--sp-teal); }

.sp-link-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
  border-radius: 3px;
}

/* ── Colour swatches ──────────────────────────────────────── */
.sp-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sp-swatch {
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,.1);
  cursor: pointer;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 6px;
  transition: border-color .15s, transform .1s;
  position: relative;
  overflow: hidden;
}

.sp-swatch:hover { transform: translateY(-1px); }

.sp-swatch.is-active { border: 2px solid var(--sp-teal); }

.sp-swatch.is-active::after {
  content: '\2713';
  position: absolute;
  top: 3px; right: 4px;
  width: 14px; height: 14px;
  background: var(--sp-teal);
  color: #fff;
  border-radius: 50%;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 14px; text-align: center;
}

.sp-sw-aa {
  font-family: 'Baloo 2', 'Segoe UI', Tahoma, sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1;
}

.sp-sw-nm {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 9px; line-height: 1.2; text-align: center;
}

.sp-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

/* ── Content tab links ────────────────────────────────────── */
.sp-link-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  height: 42px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid #88bcc0;
  color: var(--sp-teal);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: background .15s;
  margin-bottom: 7px;
}

.sp-link-row:hover { background: var(--sp-teal-50); }

.sp-link-row--muted {
  border-color: var(--sp-border);
  color: var(--sp-text-muted);
  font-weight: 500;
  margin-bottom: 0;
}

.sp-link-row--muted:hover { background: var(--sp-surface); color: var(--sp-text-mid); }

.sp-link-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

.sp-link-row svg { flex-shrink: 0; color: inherit; }

/* ── Helper note ──────────────────────────────────────────── */
.sp-helper-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sp-teal-50);
  border-radius: 10px;
  border-left: 3px solid #88bcc0;
  margin-top: 4px;
}

.sp-helper-note svg { flex-shrink: 0; color: var(--sp-teal-mid); margin-top: 1px; }

.sp-helper-note p {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 11px; color: var(--sp-text-muted);
  line-height: 1.5; margin: 0; padding: 0;
}

/* ── Panel footer ─────────────────────────────────────────── */
.sp-panel__footer {
  padding: 10px 18px 16px;
  border-top: 1px solid var(--sp-border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
}

.sp-reset-btn {
  flex: 1; height: 40px;
  border-radius: 999px;
  background: var(--sp-teal-50);
  border: 1.5px solid var(--sp-border-mid);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--sp-text-mid);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s;
  padding: 0;
}

.sp-reset-btn:hover { background: var(--sp-border); }

.sp-reset-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
  border-color: var(--sp-focus-bdr);
}

.sp-close-main-btn {
  flex: 1; height: 40px;
  border-radius: 999px;
  background: var(--sp-teal);
  border: none;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
  padding: 0;
}

.sp-close-main-btn:hover { background: var(--sp-teal-mid); }

.sp-close-main-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

/* ── Ruler markings ───────────────────────────────────────── */
/* Subtle vertical tick marks on the reading ruler.
   Only visible when BOTH ruler and markings are on.           */
body.sp-ruler-on.sp-ruler-markings #sp-ruler::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 49px,
      rgba(18,65,69,.25) 49px,
      rgba(18,65,69,.25) 50px
    );
  pointer-events: none;
}

/* ── Reading ruler ────────────────────────────────────────── */
#sp-ruler {
  position: fixed;
  left: 0; right: 0;
  height: 44px;
  background: rgba(196,209,79,.22);
  border-top: 2px solid rgba(196,209,79,.55);
  border-bottom: 2px solid rgba(196,209,79,.55);
  pointer-events: none;
  z-index: 99880;
  display: none;
}

body.sp-ruler-on #sp-ruler { display: block; }

/* ── Vertical screen mask ─────────────────────────────────── */
/* Left and right panels that darken the sides of the screen,
   leaving a vertical column of focus in the centre.           */
.sp-mask-side {
  position: fixed;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.78);
  pointer-events: none;
  z-index: 99880;
  display: none;
}

#sp-mask-l { left: 0;  width: 0; }
#sp-mask-r { right: 0; width: 0; }

body.sp-mask-vertical .sp-mask-side { display: block; }

/* ── Hide images — placeholder ────────────────────────────── */
/* Shown by JS in place of hidden <img> elements.             */
.sp-img-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 16px;
  background: #f0f1f2 !important;
  border: 1.5px dashed #c7c9cb !important;
  border-radius: 8px;
  font-family: 'Poppins', 'Segoe UI', sans-serif !important;
  font-size: 12px !important;
  color: #6c7174 !important;
  text-align: center;
  margin: 4px 0;
  box-sizing: border-box;
  width: 100%;
}

/* Also hide Elementor section background images */
body.sp-hide-images .elementor-section[style*="background-image"],
body.sp-hide-images .e-con[style*="background-image"],
body.sp-hide-images section[style*="background-image"] {
  background-image: none !important;
}

/* ── Screen mask ──────────────────────────────────────────── */
.sp-mask-part {
  position: fixed;
  left: 0; right: 0;
  background: rgba(0,0,0,.78);
  pointer-events: none;
  z-index: 99880;
  display: none;
}

#sp-mask-t { top: 0; }
#sp-mask-b { bottom: 0; }

body.sp-mask-on .sp-mask-part { display: block; }

/* ── Body / html class effects ────────────────────────────── */

/* Dyslexia-friendly font */
body.sp-dyslexia p,
body.sp-dyslexia h1, body.sp-dyslexia h2, body.sp-dyslexia h3,
body.sp-dyslexia h4, body.sp-dyslexia h5, body.sp-dyslexia h6,
body.sp-dyslexia a, body.sp-dyslexia li, body.sp-dyslexia span,
body.sp-dyslexia label, body.sp-dyslexia td, body.sp-dyslexia input,
body.sp-dyslexia textarea {
  font-family: Verdana, Tahoma, 'Trebuchet MS', sans-serif !important;
  letter-spacing: 0.1em !important;
  word-spacing: 0.15em !important;
}

/* Letter & word spacing */
body.sp-spacing p,
body.sp-spacing h1, body.sp-spacing h2, body.sp-spacing h3,
body.sp-spacing li, body.sp-spacing span, body.sp-spacing a,
body.sp-spacing label, body.sp-spacing td {
  letter-spacing: 0.12em !important;
  word-spacing: 0.18em !important;
}

/* Increased line height */
body.sp-lh p,
body.sp-lh h1, body.sp-lh h2, body.sp-lh h3,
body.sp-lh li, body.sp-lh span, body.sp-lh label,
body.sp-lh td {
  line-height: 2.0 !important;
}

/* Dark mode — direct CSS colour override (no filter)
 * ─────────────────────────────────────────────────────────────────────
 * Filter-based dark mode replaced with direct colour overrides because
 * nested Elementor elements caused compounding filter issues on live sites.
 * Direct CSS with !important and Elementor variable overrides works
 * consistently across all containers, inline styles and widgets.
 * position:fixed on #sp-btn is never affected (no filter on html/body).
 */

html.sp-dark { filter: none !important; }

body.sp-dark-mode {
  --sp-dark-bg:      #0f1115;
  --sp-dark-surface: #171a21;
  --sp-dark-card:    #1e222c;
  --sp-dark-text:    #f5f5f5;
  --sp-dark-muted:   #a0a8b8;
  --sp-dark-link:    #9fd3ff;
  --sp-dark-border:  #4a4f58;
  --sp-dark-input:   #1e222c;
  background-color: var(--sp-dark-bg) !important;
  color: var(--sp-dark-text) !important;
  --e-global-color-primary:   #f5f5f5;
  --e-global-color-secondary: #a0a8b8;
  --e-global-color-text:      #f5f5f5;
  --e-global-color-accent:    #9fd3ff;
}

body.sp-dark-mode main, body.sp-dark-mode .site, body.sp-dark-mode .site-content,
body.sp-dark-mode .site-main, body.sp-dark-mode .page,
body.sp-dark-mode .entry-content, body.sp-dark-mode .post-content,
body.sp-dark-mode article, body.sp-dark-mode section,
body.sp-dark-mode header, body.sp-dark-mode footer,
body.sp-dark-mode nav, body.sp-dark-mode aside,
body.sp-dark-mode .elementor, body.sp-dark-mode .elementor-section,
body.sp-dark-mode .elementor-container, body.sp-dark-mode .elementor-column,
body.sp-dark-mode .elementor-widget, body.sp-dark-mode .elementor-widget-container,
body.sp-dark-mode .e-con, body.sp-dark-mode .e-con-inner,
body.sp-dark-mode .elementor-inner-section, body.sp-dark-mode .elementor-top-section {
  background-color: var(--sp-dark-bg) !important;
  color: var(--sp-dark-text) !important;
}

body.sp-dark-mode .elementor-section[style], body.sp-dark-mode .e-con[style],
body.sp-dark-mode section[style], body.sp-dark-mode header[style],
body.sp-dark-mode footer[style], body.sp-dark-mode div[style*="background-color"],
body.sp-dark-mode div[style*="background:"] {
  background-color: var(--sp-dark-surface) !important;
  background-image: none !important;
}

body.sp-dark-mode [style*="color:"],
body.sp-dark-mode [style*="color: "] { color: var(--sp-dark-text) !important; }

body.sp-dark-mode h1, body.sp-dark-mode h2, body.sp-dark-mode h3,
body.sp-dark-mode h4, body.sp-dark-mode h5, body.sp-dark-mode h6,
body.sp-dark-mode .elementor-heading-title,
body.sp-dark-mode .elementor-icon-box-title,
body.sp-dark-mode .elementor-image-box-title { color: var(--sp-dark-text) !important; }

body.sp-dark-mode p, body.sp-dark-mode li, body.sp-dark-mode span,
body.sp-dark-mode label, body.sp-dark-mode td, body.sp-dark-mode th,
body.sp-dark-mode blockquote,
body.sp-dark-mode .elementor-widget-text-editor, body.sp-dark-mode .elementor-widget-text-editor *,
body.sp-dark-mode .elementor-icon-box-description, body.sp-dark-mode .elementor-text-editor,
body.sp-dark-mode .elementor-text-editor * { color: var(--sp-dark-text) !important; }

body.sp-dark-mode a:not(#sp-a11y-wrap a):not(#sp-pdf-reader a) {
  color: var(--sp-dark-link) !important; text-decoration: underline !important; }

body.sp-dark-mode button:not(#sp-a11y-wrap button):not(#sp-pdf-reader button),
body.sp-dark-mode .elementor-button,
body.sp-dark-mode .elementor-button-wrapper .elementor-button,
body.sp-dark-mode .wp-block-button__link {
  background-color: #2a3a5e !important; color: #ffffff !important;
  border-color: var(--sp-dark-border) !important; }
body.sp-dark-mode .elementor-button-text { color: #ffffff !important; }

body.sp-dark-mode .elementor-card, body.sp-dark-mode .card,
body.sp-dark-mode .elementor-icon-box-wrapper,
body.sp-dark-mode .elementor-image-box-wrapper {
  background-color: var(--sp-dark-card) !important;
  border-color: var(--sp-dark-border) !important; }

body.sp-dark-mode input:not(#sp-a11y-wrap input):not(#sp-pdf-reader input),
body.sp-dark-mode textarea:not(#sp-a11y-wrap textarea):not(#sp-pdf-reader textarea),
body.sp-dark-mode select:not(#sp-a11y-wrap select):not(#sp-pdf-reader select) {
  background-color: var(--sp-dark-input) !important;
  color: var(--sp-dark-text) !important; border: 1px solid var(--sp-dark-border) !important; }

body.sp-dark-mode #sp-a11y-wrap, body.sp-dark-mode #sp-a11y-wrap * { filter: none !important; }
body.sp-dark-mode #sp-pdf-reader, body.sp-dark-mode #sp-pdf-reader * { filter: none !important; }
body.sp-dark-mode #wpadminbar, body.sp-dark-mode #wpadminbar * {
  background-color: revert !important; color: revert !important; }
body.sp-dark-mode #sp-ruler, body.sp-dark-mode .sp-mask-part { filter: none !important; }

/* ── Greyscale — same targeted approach ──────────────────────────── */
html.sp-grey { filter: none !important; } /* neutralise html-level filter */

body.sp-greyscale main, body.sp-greyscale .site-content,
body.sp-greyscale .entry-content, body.sp-greyscale .post-content,
body.sp-greyscale article, body.sp-greyscale section,
body.sp-greyscale header, body.sp-greyscale footer,
body.sp-greyscale nav, body.sp-greyscale aside,
body.sp-greyscale .elementor:not(main .elementor) { filter: grayscale(100%); }

body.sp-greyscale #sp-a11y-wrap,
body.sp-greyscale #sp-a11y-wrap * { filter: none !important; }
body.sp-greyscale #sp-pdf-reader,
body.sp-greyscale #sp-pdf-reader * { filter: none !important; }

/* ── Toolbar & button — always filter-free ───────────────────────── */
body.sp-dark-mode #sp-a11y-wrap,
body.sp-dark-mode #sp-a11y-wrap * { filter: none !important; }
body.sp-dark-mode #sp-pdf-reader,
body.sp-dark-mode #sp-pdf-reader * { filter: none !important; }
body.sp-dark-mode #sp-ruler,
body.sp-dark-mode .sp-mask-part { filter: none !important; }

/* Greyscale */
html.sp-grey { filter: grayscale(100%); }

html.sp-grey #sp-a11y-wrap { filter: none; }

/* Pause animations */
body.sp-noanim *,
body.sp-noanim *::before,
body.sp-noanim *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ── Colour schemes ───────────────────────────────────────── */

/* High contrast */
html[data-sp-scheme="high-contrast"] body {
  background: #000 !important;
  color: #fff !important;
}
html[data-sp-scheme="high-contrast"] p,
html[data-sp-scheme="high-contrast"] h1,
html[data-sp-scheme="high-contrast"] h2,
html[data-sp-scheme="high-contrast"] h3,
html[data-sp-scheme="high-contrast"] h4,
html[data-sp-scheme="high-contrast"] h5,
html[data-sp-scheme="high-contrast"] h6,
html[data-sp-scheme="high-contrast"] li,
html[data-sp-scheme="high-contrast"] span,
html[data-sp-scheme="high-contrast"] label,
html[data-sp-scheme="high-contrast"] td,
html[data-sp-scheme="high-contrast"] th { color: #fff !important; }
html[data-sp-scheme="high-contrast"] a { color: #ffff00 !important; }
html[data-sp-scheme="high-contrast"] header,
html[data-sp-scheme="high-contrast"] main,
html[data-sp-scheme="high-contrast"] section,
html[data-sp-scheme="high-contrast"] article,
html[data-sp-scheme="high-contrast"] footer,
html[data-sp-scheme="high-contrast"] nav,
html[data-sp-scheme="high-contrast"] aside { background: #000 !important; }

/* Yellow & Black */
html[data-sp-scheme="yellow-black"] body { background: #f5d400 !important; color: #000 !important; }
html[data-sp-scheme="yellow-black"] p,
html[data-sp-scheme="yellow-black"] h1, html[data-sp-scheme="yellow-black"] h2,
html[data-sp-scheme="yellow-black"] h3, html[data-sp-scheme="yellow-black"] li,
html[data-sp-scheme="yellow-black"] span, html[data-sp-scheme="yellow-black"] a,
html[data-sp-scheme="yellow-black"] label, html[data-sp-scheme="yellow-black"] td { color: #000 !important; }
html[data-sp-scheme="yellow-black"] header,
html[data-sp-scheme="yellow-black"] main,
html[data-sp-scheme="yellow-black"] section,
html[data-sp-scheme="yellow-black"] nav,
html[data-sp-scheme="yellow-black"] footer { background: #f5d400 !important; }

/* Soft cream */
html[data-sp-scheme="cream"] body { background: #f5f0e6 !important; color: #2a1a0e !important; }
html[data-sp-scheme="cream"] p, html[data-sp-scheme="cream"] h1,
html[data-sp-scheme="cream"] h2, html[data-sp-scheme="cream"] h3,
html[data-sp-scheme="cream"] li, html[data-sp-scheme="cream"] span,
html[data-sp-scheme="cream"] label { color: #2a1a0e !important; }
html[data-sp-scheme="cream"] a { color: #4a2a0e !important; }
html[data-sp-scheme="cream"] header, html[data-sp-scheme="cream"] main,
html[data-sp-scheme="cream"] section, html[data-sp-scheme="cream"] nav,
html[data-sp-scheme="cream"] footer { background: #f5f0e6 !important; }

/* Blue & White */
html[data-sp-scheme="blue-white"] body { background: #1a4a9a !important; color: #fff !important; }
html[data-sp-scheme="blue-white"] p, html[data-sp-scheme="blue-white"] h1,
html[data-sp-scheme="blue-white"] h2, html[data-sp-scheme="blue-white"] h3,
html[data-sp-scheme="blue-white"] li, html[data-sp-scheme="blue-white"] span,
html[data-sp-scheme="blue-white"] label { color: #fff !important; }
html[data-sp-scheme="blue-white"] a { color: #c8e8ff !important; }
html[data-sp-scheme="blue-white"] header, html[data-sp-scheme="blue-white"] main,
html[data-sp-scheme="blue-white"] section, html[data-sp-scheme="blue-white"] nav,
html[data-sp-scheme="blue-white"] footer { background: #1a4a9a !important; }

/* Green tint */
html[data-sp-scheme="green-tint"] body { background: #e2f0e4 !important; color: #1a3a20 !important; }
html[data-sp-scheme="green-tint"] p, html[data-sp-scheme="green-tint"] h1,
html[data-sp-scheme="green-tint"] h2, html[data-sp-scheme="green-tint"] h3,
html[data-sp-scheme="green-tint"] li, html[data-sp-scheme="green-tint"] span,
html[data-sp-scheme="green-tint"] label { color: #1a3a20 !important; }
html[data-sp-scheme="green-tint"] a { color: #0a2010 !important; }
html[data-sp-scheme="green-tint"] header, html[data-sp-scheme="green-tint"] main,
html[data-sp-scheme="green-tint"] section, html[data-sp-scheme="green-tint"] nav,
html[data-sp-scheme="green-tint"] footer { background: #e2f0e4 !important; }

/* ── Restore toolbar in all colour schemes ─────────────────── */
html[data-sp-scheme] #sp-panel { background: #fff !important; }
html[data-sp-scheme] #sp-btn { background: var(--sp-teal) !important; color: #fff !important; }
html[data-sp-scheme] .sp-panel__title { color: var(--sp-text-dark) !important; }
html[data-sp-scheme] .sp-panel__sub { color: var(--sp-text-muted) !important; }
html[data-sp-scheme] .sp-section-label { color: var(--sp-green-text) !important; }
html[data-sp-scheme] .sp-tab { color: var(--sp-text-muted) !important; background: transparent !important; }
html[data-sp-scheme] .sp-tab.is-active { background: var(--sp-teal) !important; color: #fff !important; }
html[data-sp-scheme] .sp-tablist { background: var(--sp-surface) !important; }
html[data-sp-scheme] .sp-tog { background: var(--sp-border-mid) !important; }
html[data-sp-scheme] .sp-tog.is-on { background: var(--sp-teal) !important; }
html[data-sp-scheme] .sp-tog__thumb { background: #fff !important; }
html[data-sp-scheme] .sp-tog-info { color: var(--sp-text-mid) !important; }
html[data-sp-scheme] .sp-player { background: #f5f8f8 !important; }
html[data-sp-scheme] .sp-player__status { color: var(--sp-text-muted) !important; }
html[data-sp-scheme] .sp-ctrl-btn { background: #fff !important; color: var(--sp-text-muted) !important; border-color: var(--sp-border) !important; }
html[data-sp-scheme] .sp-ctrl-btn--primary { background: var(--sp-teal) !important; color: #fff !important; border-color: var(--sp-teal) !important; }
html[data-sp-scheme] .sp-spd { background: var(--sp-surface) !important; color: var(--sp-text-muted) !important; border-color: var(--sp-border-mid) !important; }
html[data-sp-scheme] .sp-spd.is-active { background: var(--sp-teal) !important; color: #fff !important; border-color: var(--sp-teal) !important; }
html[data-sp-scheme] .sp-step { background: var(--sp-surface) !important; color: var(--sp-text-mid) !important; border-color: var(--sp-border-mid) !important; }
html[data-sp-scheme] .sp-txt-val { background: #f5f5f5 !important; color: var(--sp-text-dark) !important; border-color: var(--sp-border) !important; }
html[data-sp-scheme] .sp-swatch.is-active { border-color: var(--sp-teal) !important; }
html[data-sp-scheme] .sp-link-row { border-color: #88bcc0 !important; color: var(--sp-teal) !important; }
html[data-sp-scheme] .sp-link-row--muted { border-color: var(--sp-border) !important; color: var(--sp-text-muted) !important; }
html[data-sp-scheme] .sp-helper-note { background: var(--sp-teal-50) !important; border-color: #88bcc0 !important; }
html[data-sp-scheme] .sp-helper-note p { color: var(--sp-text-muted) !important; }
html[data-sp-scheme] .sp-panel__footer { background: #fff !important; border-color: var(--sp-border) !important; }
html[data-sp-scheme] .sp-reset-btn { background: var(--sp-teal-50) !important; color: var(--sp-text-mid) !important; border-color: var(--sp-border-mid) !important; }
html[data-sp-scheme] .sp-close-main-btn { background: var(--sp-teal) !important; color: #fff !important; }
html[data-sp-scheme] .sp-section-sub { color: var(--sp-text-muted) !important; }
html[data-sp-scheme] .sp-panel__x { background: var(--sp-surface) !important; color: var(--sp-text-mid) !important; }
html[data-sp-scheme] .sp-panel__bar { background: linear-gradient(90deg,#124145,#2c7a80 60%,#4f9a9f) !important; }
html[data-sp-scheme] .sp-tabdivider { background: var(--sp-border) !important; }
html[data-sp-scheme] .sp-tog-row--card { background: #f8f9f9 !important; border-color: var(--sp-border) !important; }
html[data-sp-scheme] .sp-panel__icon { background: var(--sp-teal-bg) !important; }

/* ── Mobile — bottom sheet ────────────────────────────────── */
@media (max-width: 640px) {
  #sp-btn {
    top: 14px;
    right: 16px;
    width: 52px;
    height: 52px;
  }

  #sp-panel {
    bottom: 0; right: 0; left: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
    /* override desktop bottom/right */
  }

  .sp-panel__handle { display: block; }
  .sp-panel__bar { display: none; }

  .sp-ctrl-btn { width: 48px; height: 48px; }
  .sp-ctrl-btn--primary { width: 56px; height: 56px; }

  .sp-spd { height: 42px; font-size: 13px; }

  .sp-tog-row { min-height: 46px; }

  .sp-link-row { height: 48px; font-size: 13px; }

  .sp-reset-btn,
  .sp-close-main-btn { height: 46px; font-size: 13px; }

  .sp-tab { font-size: 10px; gap: 3px; }
}

/* ══════════════════════════════════════════════════════════
   PDF READER
   Full-screen overlay activated when a .pdf link is clicked.
   Header + nav chrome is immune to colour-scheme / dark mode.
   Content area DOES respond to all toolbar settings.
   ══════════════════════════════════════════════════════════ */

/* Prevent body scrolling while reader is open */
body.sp-pdf-active { overflow: hidden; }

/* ── Reader shell ─────────────────────────────────────────── */
#sp-pdf-reader {
  position: fixed;
  inset: 0;
  z-index: 99992; /* above the toolbar (99991) */
  display: flex;
  flex-direction: column;
  background: #f4f6f6;
  animation: sp-panel-in .18s ease both;
}

#sp-pdf-reader[hidden] { display: none; }

/* ── Reader header ────────────────────────────────────────── */
.sp-pdf-hdr {
  background: #124145 !important;
  color: #fff !important;
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(18,65,69,.22);
}

.sp-pdf-back {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 0 16px;
  height: 36px;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .15s;
}

.sp-pdf-back:hover { background: rgba(255,255,255,.22) !important; }

.sp-pdf-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring) !important;
}

.sp-pdf-doc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-family: 'Baloo 2', 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-pdf-hdr-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 0 14px;
  height: 36px;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}

.sp-pdf-hdr-btn:hover { background: rgba(255,255,255,.22) !important; }

.sp-pdf-hdr-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring) !important;
}

/* ── Page nav bar ─────────────────────────────────────────── */
.sp-pdf-nav {
  background: #fff !important;
  border-bottom: 1px solid #e2e3e5 !important;
  height: 48px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.sp-pdf-nav-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--sp-teal-50) !important;
  border: 1.5px solid var(--sp-border-mid) !important;
  color: var(--sp-teal) !important;
  border-radius: 999px;
  padding: 0 14px;
  height: 32px;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.sp-pdf-nav-btn:hover:not(:disabled) { background: var(--sp-teal-bg) !important; }
.sp-pdf-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

/* <a> tags used as nav buttons */
a.sp-pdf-nav-btn {
  display: inline-flex;
  text-decoration: none;
}

.sp-pdf-nav-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring) !important;
}

.sp-pdf-pageinfo {
  font-family: 'Poppins', 'Segoe UI', sans-serif !important;
  font-size: 12px !important;
  color: var(--sp-text-muted) !important;
  flex: 1;
  text-align: center;
}

/* ── Scrollable body ──────────────────────────────────────── */
.sp-pdf-body {
  flex: 1;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--sp-border-mid) transparent;
}

.sp-pdf-body::-webkit-scrollbar { width: 6px; }
.sp-pdf-body::-webkit-scrollbar-thumb {
  background: var(--sp-border-mid);
  border-radius: 4px;
}

/* ── Loading spinner ──────────────────────────────────────── */
#sp-pdf-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #f4f6f6 !important;
  z-index: 2;
}

#sp-pdf-loader p {
  font-family: 'Poppins', 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  color: var(--sp-text-muted) !important;
}

.sp-pdf-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(18,65,69,.12);
  border-top-color: #124145;
  border-radius: 50%;
  animation: sp-spin 0.7s linear infinite;
}

@keyframes sp-spin { to { transform: rotate(360deg); } }

/* ── PDF text content ─────────────────────────────────────── */
/* All toolbar features (text size, font, colour scheme, dark mode) apply here */
#sp-pdf-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 32px 60px;
  background: #fff !important;
  min-height: 100%;
  box-shadow: 0 0 40px rgba(18,65,69,.06);
  transition: opacity .18s ease;
  outline: none;
}

#sp-pdf-content h2 {
  font-family: 'Baloo 2', 'Segoe UI', Tahoma, sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  color: #0e3437;
  margin: 1.4em 0 0.5em;
  line-height: 1.2;
}

#sp-pdf-content h3 {
  font-family: 'Baloo 2', 'Segoe UI', Tahoma, sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  color: #124145;
  margin: 1.2em 0 0.4em;
  line-height: 1.25;
}

#sp-pdf-content p {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 15px;
  color: #353b3d;
  line-height: 1.75;
  margin: 0.6em 0;
}

#sp-pdf-content h2:first-child,
#sp-pdf-content h3:first-child { margin-top: 0; }

/* Notices / errors inside content */
.sp-pdf-notice,
.sp-pdf-error {
  background: #f1f7f7 !important;
  border: 1.5px solid #88bcc0;
  border-radius: 12px;
  padding: 20px 24px;
  font-family: 'Poppins', 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  color: #4f5557 !important;
  line-height: 1.65;
}

.sp-pdf-error {
  background: #fff8f7 !important;
  border-color: #ff988c;
}

.sp-pdf-error p { margin: 0 0 8px; }
.sp-pdf-error p:last-child { margin-bottom: 0; }

/* ── Reader footer ────────────────────────────────────────── */
.sp-pdf-footer {
  background: var(--sp-teal-50) !important;
  border-top: 1px solid var(--sp-border) !important;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sp-pdf-footer svg { color: var(--sp-teal-mid) !important; flex-shrink: 0; }

.sp-pdf-footer span {
  font-family: 'Poppins', 'Segoe UI', sans-serif !important;
  font-size: 11px !important;
  color: var(--sp-text-muted) !important;
  line-height: 1.5;
}

/* ── Protect reader chrome from colour-scheme / dark-mode ─── */
html.sp-dark #sp-pdf-reader .sp-pdf-hdr,
html.sp-dark #sp-pdf-reader .sp-pdf-nav,
html.sp-dark #sp-pdf-reader .sp-pdf-footer,
html.sp-dark #sp-pdf-reader #sp-pdf-loader { filter: none; }

html.sp-grey #sp-pdf-reader .sp-pdf-hdr,
html.sp-grey #sp-pdf-reader .sp-pdf-nav { filter: none; }

html[data-sp-scheme] #sp-pdf-reader .sp-pdf-hdr { background: #124145 !important; }
html[data-sp-scheme] #sp-pdf-reader .sp-pdf-nav { background: #fff !important; }
html[data-sp-scheme] #sp-pdf-reader .sp-pdf-nav-btn {
  background: var(--sp-teal-50) !important;
  color: var(--sp-teal) !important;
}
html[data-sp-scheme] #sp-pdf-reader .sp-pdf-footer {
  background: var(--sp-teal-50) !important;
}

/* ── Mobile PDF reader ────────────────────────────────────── */
@media (max-width: 640px) {
  .sp-pdf-hdr { padding: 0 14px; gap: 10px; }
  .sp-pdf-doc-title { font-size: 13px !important; }
  .sp-pdf-back { padding: 0 12px; font-size: 12px; }
  .sp-pdf-hdr-btn { display: none; } /* hide Read aloud in header on mobile — use toolbar instead */

  #sp-pdf-content { padding: 24px 18px 48px; }
  #sp-pdf-content p { font-size: 15px; }

  .sp-pdf-nav { padding: 0 12px; gap: 8px; }
  .sp-pdf-nav-btn { padding: 0 10px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   COLOUR SCHEMES — ELEMENTOR-COMPATIBLE OVERRIDES
   Uses body.sp-scheme-* classes set by the JS.
   Comes after the legacy html[data-sp-scheme] rules so it wins the
   cascade without needing to touch the old rules.
   Overrides Elementor inline styles with !important.
   Overrides Elementor global CSS variables on :root / body.
   The toolbar (#sp-a11y-wrap, #sp-pdf-reader) is always restored.
   ════════════════════════════════════════════════════════════════════ */

/*
 * ── Shared Elementor content selectors ──────────────────────────────
 * All five schemes target the same set of Elementor containers.
 * Defined once as a comment here; repeated per scheme below.
 *
 * .elementor .elementor-section .elementor-container .elementor-column
 * .elementor-widget .elementor-widget-container
 * .e-con .e-con-inner .elementor-inner-section .elementor-top-section
 * .elementor-heading-title .elementor-widget-text-editor
 * .elementor-icon-box-title .elementor-icon-box-description
 * .elementor-image-box-title .elementor-image-box-description
 * .elementor-button .elementor-button-text
 * main .site-content .entry-content .post-content article section
 */

/* ══ HIGH CONTRAST ·  body.sp-scheme-hc ══════════════════════════════
   Black background · White text · Yellow links
   ══════════════════════════════════════════════════════════════════ */
body.sp-scheme-hc {
  background-color: #000000 !important;
  color: #ffffff !important;
  /* Elementor global colour variables */
  --e-global-color-primary:   #ffffff;
  --e-global-color-secondary: #ffffff;
  --e-global-color-text:      #ffffff;
  --e-global-color-accent:    #ffff00;
  /* WordPress core colour presets */
  --wp--preset--color--black: #ffffff;
  --wp--preset--color--white: #000000;
}
body.sp-scheme-hc main, body.sp-scheme-hc .site-content,
body.sp-scheme-hc .entry-content, body.sp-scheme-hc .post-content,
body.sp-scheme-hc article, body.sp-scheme-hc section, body.sp-scheme-hc header,
body.sp-scheme-hc footer, body.sp-scheme-hc aside,
body.sp-scheme-hc .elementor, body.sp-scheme-hc .elementor-section,
body.sp-scheme-hc .elementor-container, body.sp-scheme-hc .elementor-column,
body.sp-scheme-hc .elementor-widget, body.sp-scheme-hc .elementor-widget-container,
body.sp-scheme-hc .e-con, body.sp-scheme-hc .e-con-inner,
body.sp-scheme-hc .elementor-inner-section, body.sp-scheme-hc .elementor-top-section {
  background-color: #000000 !important;
  color: #ffffff !important;
}
/* Catch sections where Elementor set an inline background-color/image */
body.sp-scheme-hc .elementor-section[style], body.sp-scheme-hc .e-con[style],
body.sp-scheme-hc section[style], body.sp-scheme-hc header[style],
body.sp-scheme-hc footer[style] {
  background-color: #000000 !important;
  background-image: none !important;
}
/* Catch arbitrary elements with inline colour set by Elementor */
body.sp-scheme-hc [style*="color:"], body.sp-scheme-hc [style*="color: "] {
  color: #ffffff !important;
}
/* Headings */
body.sp-scheme-hc h1, body.sp-scheme-hc h2, body.sp-scheme-hc h3,
body.sp-scheme-hc h4, body.sp-scheme-hc h5, body.sp-scheme-hc h6,
body.sp-scheme-hc .elementor-heading-title,
body.sp-scheme-hc .elementor-icon-box-title,
body.sp-scheme-hc .elementor-image-box-title { color: #ffffff !important; }
/* Body text */
body.sp-scheme-hc p, body.sp-scheme-hc li, body.sp-scheme-hc span,
body.sp-scheme-hc label, body.sp-scheme-hc td, body.sp-scheme-hc th,
body.sp-scheme-hc blockquote, body.sp-scheme-hc dt, body.sp-scheme-hc dd,
body.sp-scheme-hc .elementor-widget-text-editor, body.sp-scheme-hc .elementor-widget-text-editor *,
body.sp-scheme-hc .elementor-icon-box-description, body.sp-scheme-hc .elementor-image-box-description,
body.sp-scheme-hc .elementor-text-editor, body.sp-scheme-hc .elementor-text-editor * { color: #ffffff !important; }
/* Links */
body.sp-scheme-hc a:not(#sp-a11y-wrap a):not(#sp-pdf-reader a) {
  color: #ffff00 !important; text-decoration: underline !important; }
/* Buttons */
body.sp-scheme-hc button:not(#sp-a11y-wrap button):not(#sp-pdf-reader button),
body.sp-scheme-hc .elementor-button,
body.sp-scheme-hc .elementor-button-wrapper .elementor-button,
body.sp-scheme-hc .wp-block-button__link {
  background-color: #ffffff !important; color: #000000 !important;
  border-color: #ffffff !important; }
body.sp-scheme-hc .elementor-button-text { color: #000000 !important; }
/* Forms */
body.sp-scheme-hc input:not(#sp-a11y-wrap input):not(#sp-pdf-reader input),
body.sp-scheme-hc textarea:not(#sp-a11y-wrap textarea):not(#sp-pdf-reader textarea),
body.sp-scheme-hc select:not(#sp-a11y-wrap select):not(#sp-pdf-reader select) {
  background-color: #111111 !important; color: #ffffff !important;
  border: 1.5px solid #ffffff !important; }
/* Cards */
body.sp-scheme-hc .elementor-card, body.sp-scheme-hc .elementor-icon-box-wrapper,
body.sp-scheme-hc .elementor-image-box-wrapper {
  background-color: #111111 !important; border-color: #ffffff !important; }

/* ══ YELLOW & BLACK ·  body.sp-scheme-yb ═════════════════════════════
   Yellow background · Black text
   ══════════════════════════════════════════════════════════════════ */
body.sp-scheme-yb {
  background-color: #f5d400 !important; color: #000000 !important;
  --e-global-color-primary: #000000; --e-global-color-secondary: #000000;
  --e-global-color-text: #000000;  --e-global-color-accent: #000000;
}
body.sp-scheme-yb main, body.sp-scheme-yb .site-content,
body.sp-scheme-yb .entry-content, body.sp-scheme-yb .post-content,
body.sp-scheme-yb article, body.sp-scheme-yb section,
body.sp-scheme-yb header, body.sp-scheme-yb footer, body.sp-scheme-yb aside,
body.sp-scheme-yb .elementor, body.sp-scheme-yb .elementor-section,
body.sp-scheme-yb .elementor-container, body.sp-scheme-yb .elementor-column,
body.sp-scheme-yb .elementor-widget, body.sp-scheme-yb .elementor-widget-container,
body.sp-scheme-yb .e-con, body.sp-scheme-yb .e-con-inner,
body.sp-scheme-yb .elementor-inner-section, body.sp-scheme-yb .elementor-top-section {
  background-color: #f5d400 !important; color: #000000 !important; }
body.sp-scheme-yb .elementor-section[style], body.sp-scheme-yb .e-con[style],
body.sp-scheme-yb section[style], body.sp-scheme-yb header[style] {
  background-color: #f5d400 !important; background-image: none !important; }
body.sp-scheme-yb [style*="color:"], body.sp-scheme-yb [style*="color: "] { color: #000000 !important; }
body.sp-scheme-yb h1, body.sp-scheme-yb h2, body.sp-scheme-yb h3,
body.sp-scheme-yb h4, body.sp-scheme-yb h5, body.sp-scheme-yb h6,
body.sp-scheme-yb .elementor-heading-title, body.sp-scheme-yb .elementor-icon-box-title { color: #000000 !important; }
body.sp-scheme-yb p, body.sp-scheme-yb li, body.sp-scheme-yb span,
body.sp-scheme-yb label, body.sp-scheme-yb td, body.sp-scheme-yb th,
body.sp-scheme-yb .elementor-widget-text-editor, body.sp-scheme-yb .elementor-widget-text-editor *,
body.sp-scheme-yb .elementor-icon-box-description,
body.sp-scheme-yb .elementor-text-editor, body.sp-scheme-yb .elementor-text-editor * { color: #000000 !important; }
body.sp-scheme-yb a:not(#sp-a11y-wrap a):not(#sp-pdf-reader a) {
  color: #000000 !important; font-weight: 700 !important; text-decoration: underline !important; }
body.sp-scheme-yb button:not(#sp-a11y-wrap button):not(#sp-pdf-reader button),
body.sp-scheme-yb .elementor-button,
body.sp-scheme-yb .wp-block-button__link {
  background-color: #000000 !important; color: #f5d400 !important; border-color: #000000 !important; }
body.sp-scheme-yb .elementor-button-text { color: #f5d400 !important; }
body.sp-scheme-yb input:not(#sp-a11y-wrap input):not(#sp-pdf-reader input),
body.sp-scheme-yb textarea:not(#sp-a11y-wrap textarea):not(#sp-pdf-reader textarea),
body.sp-scheme-yb select:not(#sp-a11y-wrap select):not(#sp-pdf-reader select) {
  background-color: #fff8b0 !important; color: #000000 !important;
  border: 1.5px solid #000000 !important; }

/* ══ SOFT CREAM ·  body.sp-scheme-cream ══════════════════════════════
   Warm cream background · Dark brown text
   ══════════════════════════════════════════════════════════════════ */
body.sp-scheme-cream {
  background-color: #f5f0e6 !important; color: #2a1a0e !important;
  --e-global-color-primary: #2a1a0e; --e-global-color-secondary: #5a3a1a;
  --e-global-color-text: #2a1a0e;  --e-global-color-accent: #8a5c2a;
}
body.sp-scheme-cream main, body.sp-scheme-cream .site-content,
body.sp-scheme-cream .entry-content, body.sp-scheme-cream .post-content,
body.sp-scheme-cream article, body.sp-scheme-cream section,
body.sp-scheme-cream header, body.sp-scheme-cream footer, body.sp-scheme-cream aside,
body.sp-scheme-cream .elementor, body.sp-scheme-cream .elementor-section,
body.sp-scheme-cream .elementor-container, body.sp-scheme-cream .elementor-column,
body.sp-scheme-cream .elementor-widget, body.sp-scheme-cream .elementor-widget-container,
body.sp-scheme-cream .e-con, body.sp-scheme-cream .e-con-inner,
body.sp-scheme-cream .elementor-inner-section, body.sp-scheme-cream .elementor-top-section {
  background-color: #f5f0e6 !important; color: #2a1a0e !important; }
body.sp-scheme-cream .elementor-section[style], body.sp-scheme-cream .e-con[style],
body.sp-scheme-cream section[style], body.sp-scheme-cream header[style] {
  background-color: #f5f0e6 !important; background-image: none !important; }
body.sp-scheme-cream [style*="color:"], body.sp-scheme-cream [style*="color: "] { color: #2a1a0e !important; }
body.sp-scheme-cream h1, body.sp-scheme-cream h2, body.sp-scheme-cream h3,
body.sp-scheme-cream h4, body.sp-scheme-cream h5, body.sp-scheme-cream h6,
body.sp-scheme-cream .elementor-heading-title, body.sp-scheme-cream .elementor-icon-box-title { color: #2a1a0e !important; }
body.sp-scheme-cream p, body.sp-scheme-cream li, body.sp-scheme-cream span,
body.sp-scheme-cream label, body.sp-scheme-cream td, body.sp-scheme-cream th,
body.sp-scheme-cream .elementor-widget-text-editor, body.sp-scheme-cream .elementor-widget-text-editor *,
body.sp-scheme-cream .elementor-icon-box-description,
body.sp-scheme-cream .elementor-text-editor, body.sp-scheme-cream .elementor-text-editor * { color: #2a1a0e !important; }
body.sp-scheme-cream a:not(#sp-a11y-wrap a):not(#sp-pdf-reader a) {
  color: #5a3010 !important; text-decoration: underline !important; }
body.sp-scheme-cream button:not(#sp-a11y-wrap button):not(#sp-pdf-reader button),
body.sp-scheme-cream .elementor-button,
body.sp-scheme-cream .wp-block-button__link {
  background-color: #5a3010 !important; color: #f5f0e6 !important; border-color: #5a3010 !important; }
body.sp-scheme-cream .elementor-button-text { color: #f5f0e6 !important; }
body.sp-scheme-cream input:not(#sp-a11y-wrap input):not(#sp-pdf-reader input),
body.sp-scheme-cream textarea:not(#sp-a11y-wrap textarea):not(#sp-pdf-reader textarea),
body.sp-scheme-cream select:not(#sp-a11y-wrap select):not(#sp-pdf-reader select) {
  background-color: #ede7d8 !important; color: #2a1a0e !important;
  border: 1.5px solid #8a6a4a !important; }

/* ══ BLUE & WHITE ·  body.sp-scheme-bw ══════════════════════════════
   Deep blue background · White text · Light blue links
   ══════════════════════════════════════════════════════════════════ */
body.sp-scheme-bw {
  background-color: #1a4a9a !important; color: #ffffff !important;
  --e-global-color-primary: #ffffff; --e-global-color-secondary: #c8e8ff;
  --e-global-color-text: #ffffff;  --e-global-color-accent: #90d0ff;
}
body.sp-scheme-bw main, body.sp-scheme-bw .site-content,
body.sp-scheme-bw .entry-content, body.sp-scheme-bw .post-content,
body.sp-scheme-bw article, body.sp-scheme-bw section,
body.sp-scheme-bw header, body.sp-scheme-bw footer, body.sp-scheme-bw aside,
body.sp-scheme-bw .elementor, body.sp-scheme-bw .elementor-section,
body.sp-scheme-bw .elementor-container, body.sp-scheme-bw .elementor-column,
body.sp-scheme-bw .elementor-widget, body.sp-scheme-bw .elementor-widget-container,
body.sp-scheme-bw .e-con, body.sp-scheme-bw .e-con-inner,
body.sp-scheme-bw .elementor-inner-section, body.sp-scheme-bw .elementor-top-section {
  background-color: #1a4a9a !important; color: #ffffff !important; }
body.sp-scheme-bw .elementor-section[style], body.sp-scheme-bw .e-con[style],
body.sp-scheme-bw section[style], body.sp-scheme-bw header[style] {
  background-color: #1a4a9a !important; background-image: none !important; }
body.sp-scheme-bw [style*="color:"], body.sp-scheme-bw [style*="color: "] { color: #ffffff !important; }
body.sp-scheme-bw h1, body.sp-scheme-bw h2, body.sp-scheme-bw h3,
body.sp-scheme-bw h4, body.sp-scheme-bw h5, body.sp-scheme-bw h6,
body.sp-scheme-bw .elementor-heading-title, body.sp-scheme-bw .elementor-icon-box-title { color: #ffffff !important; }
body.sp-scheme-bw p, body.sp-scheme-bw li, body.sp-scheme-bw span,
body.sp-scheme-bw label, body.sp-scheme-bw td, body.sp-scheme-bw th,
body.sp-scheme-bw .elementor-widget-text-editor, body.sp-scheme-bw .elementor-widget-text-editor *,
body.sp-scheme-bw .elementor-icon-box-description,
body.sp-scheme-bw .elementor-text-editor, body.sp-scheme-bw .elementor-text-editor * { color: #ffffff !important; }
body.sp-scheme-bw a:not(#sp-a11y-wrap a):not(#sp-pdf-reader a) {
  color: #c8e8ff !important; text-decoration: underline !important; }
body.sp-scheme-bw button:not(#sp-a11y-wrap button):not(#sp-pdf-reader button),
body.sp-scheme-bw .elementor-button,
body.sp-scheme-bw .wp-block-button__link {
  background-color: #ffffff !important; color: #1a4a9a !important; border-color: #ffffff !important; }
body.sp-scheme-bw .elementor-button-text { color: #1a4a9a !important; }
body.sp-scheme-bw input:not(#sp-a11y-wrap input):not(#sp-pdf-reader input),
body.sp-scheme-bw textarea:not(#sp-a11y-wrap textarea):not(#sp-pdf-reader textarea),
body.sp-scheme-bw select:not(#sp-a11y-wrap select):not(#sp-pdf-reader select) {
  background-color: #0d3a7a !important; color: #ffffff !important;
  border: 1.5px solid #c8e8ff !important; }

/* ══ GREEN TINT ·  body.sp-scheme-green ══════════════════════════════
   Soft green background · Dark green text
   ══════════════════════════════════════════════════════════════════ */
body.sp-scheme-green {
  background-color: #e2f0e4 !important; color: #1a3a20 !important;
  --e-global-color-primary: #1a3a20; --e-global-color-secondary: #2e5e34;
  --e-global-color-text: #1a3a20;  --e-global-color-accent: #2e5e34;
}
body.sp-scheme-green main, body.sp-scheme-green .site-content,
body.sp-scheme-green .entry-content, body.sp-scheme-green .post-content,
body.sp-scheme-green article, body.sp-scheme-green section,
body.sp-scheme-green header, body.sp-scheme-green footer, body.sp-scheme-green aside,
body.sp-scheme-green .elementor, body.sp-scheme-green .elementor-section,
body.sp-scheme-green .elementor-container, body.sp-scheme-green .elementor-column,
body.sp-scheme-green .elementor-widget, body.sp-scheme-green .elementor-widget-container,
body.sp-scheme-green .e-con, body.sp-scheme-green .e-con-inner,
body.sp-scheme-green .elementor-inner-section, body.sp-scheme-green .elementor-top-section {
  background-color: #e2f0e4 !important; color: #1a3a20 !important; }
body.sp-scheme-green .elementor-section[style], body.sp-scheme-green .e-con[style],
body.sp-scheme-green section[style], body.sp-scheme-green header[style] {
  background-color: #e2f0e4 !important; background-image: none !important; }
body.sp-scheme-green [style*="color:"], body.sp-scheme-green [style*="color: "] { color: #1a3a20 !important; }
body.sp-scheme-green h1, body.sp-scheme-green h2, body.sp-scheme-green h3,
body.sp-scheme-green h4, body.sp-scheme-green h5, body.sp-scheme-green h6,
body.sp-scheme-green .elementor-heading-title, body.sp-scheme-green .elementor-icon-box-title { color: #1a3a20 !important; }
body.sp-scheme-green p, body.sp-scheme-green li, body.sp-scheme-green span,
body.sp-scheme-green label, body.sp-scheme-green td, body.sp-scheme-green th,
body.sp-scheme-green .elementor-widget-text-editor, body.sp-scheme-green .elementor-widget-text-editor *,
body.sp-scheme-green .elementor-icon-box-description,
body.sp-scheme-green .elementor-text-editor, body.sp-scheme-green .elementor-text-editor * { color: #1a3a20 !important; }
body.sp-scheme-green a:not(#sp-a11y-wrap a):not(#sp-pdf-reader a) {
  color: #0a2010 !important; text-decoration: underline !important; }
body.sp-scheme-green button:not(#sp-a11y-wrap button):not(#sp-pdf-reader button),
body.sp-scheme-green .elementor-button,
body.sp-scheme-green .wp-block-button__link {
  background-color: #2e5e34 !important; color: #ffffff !important; border-color: #2e5e34 !important; }
body.sp-scheme-green .elementor-button-text { color: #ffffff !important; }
body.sp-scheme-green input:not(#sp-a11y-wrap input):not(#sp-pdf-reader input),
body.sp-scheme-green textarea:not(#sp-a11y-wrap textarea):not(#sp-pdf-reader textarea),
body.sp-scheme-green select:not(#sp-a11y-wrap select):not(#sp-pdf-reader select) {
  background-color: #d0e8d4 !important; color: #1a3a20 !important;
  border: 1.5px solid #2e5e34 !important; }

/* ══ TOOLBAR PROTECTION — all body.sp-scheme-* ═══════════════════════
   Always restores the toolbar & PDF reader to their own colours,
   regardless of which scheme is active.
   ══════════════════════════════════════════════════════════════════ */
body[class*="sp-scheme-"] #sp-a11y-wrap,
body[class*="sp-scheme-"] #sp-pdf-reader { background: transparent !important; }

body[class*="sp-scheme-"] #sp-panel { background: #ffffff !important; }
body[class*="sp-scheme-"] #sp-btn { background: #124145 !important; color: #ffffff !important; }
body[class*="sp-scheme-"] .sp-panel__title { color: #0e3437 !important; }
body[class*="sp-scheme-"] .sp-panel__sub { color: #6c7174 !important; }
body[class*="sp-scheme-"] .sp-section-label { color: #8b9a2c !important; }
body[class*="sp-scheme-"] .sp-section-sub { color: #6c7174 !important; }
body[class*="sp-scheme-"] .sp-tablist { background: #f0f1f2 !important; }
body[class*="sp-scheme-"] .sp-tab { color: #6c7174 !important; background: transparent !important; }
body[class*="sp-scheme-"] .sp-tab.is-active { background: #124145 !important; color: #ffffff !important; }
body[class*="sp-scheme-"] .sp-tabdivider { background: #e2e3e5 !important; }
body[class*="sp-scheme-"] .sp-tog { background: #c7c9cb !important; }
body[class*="sp-scheme-"] .sp-tog.is-on { background: #124145 !important; }
body[class*="sp-scheme-"] .sp-tog__thumb { background: #ffffff !important; }
body[class*="sp-scheme-"] .sp-tog-info { color: #353b3d !important; }
body[class*="sp-scheme-"] .sp-tog-row--card { background: #f8f9f9 !important; border-color: #e2e3e5 !important; }
body[class*="sp-scheme-"] .sp-player { background: #f5f8f8 !important; }
body[class*="sp-scheme-"] .sp-player__status { color: #6c7174 !important; }
body[class*="sp-scheme-"] .sp-ctrl-btn { background: #ffffff !important; color: #6c7174 !important; border-color: #e2e3e5 !important; }
body[class*="sp-scheme-"] .sp-ctrl-btn--primary { background: #124145 !important; color: #ffffff !important; border-color: #124145 !important; }
body[class*="sp-scheme-"] .sp-spd { background: #f0f1f2 !important; color: #6c7174 !important; border-color: #c7c9cb !important; }
body[class*="sp-scheme-"] .sp-spd.is-active { background: #124145 !important; color: #ffffff !important; }
body[class*="sp-scheme-"] .sp-step { background: #f0f1f2 !important; color: #353b3d !important; border-color: #c7c9cb !important; }
body[class*="sp-scheme-"] .sp-txt-val { background: #f5f5f5 !important; color: #0e3437 !important; border-color: #e2e3e5 !important; }
body[class*="sp-scheme-"] .sp-swatch.is-active { border-color: #124145 !important; }
body[class*="sp-scheme-"] .sp-link-row { border-color: #88bcc0 !important; color: #124145 !important; background: transparent !important; }
body[class*="sp-scheme-"] .sp-link-row--muted { border-color: #e2e3e5 !important; color: #6c7174 !important; }
body[class*="sp-scheme-"] .sp-helper-note { background: #f1f7f7 !important; border-color: #88bcc0 !important; }
body[class*="sp-scheme-"] .sp-helper-note p { color: #4f5557 !important; }
body[class*="sp-scheme-"] .sp-panel__footer { background: #ffffff !important; border-color: #e2e3e5 !important; }
body[class*="sp-scheme-"] .sp-reset-btn { background: #f1f7f7 !important; color: #353b3d !important; border-color: #c7c9cb !important; }
body[class*="sp-scheme-"] .sp-close-main-btn { background: #124145 !important; color: #ffffff !important; }
body[class*="sp-scheme-"] .sp-panel__icon { background: #e0eeef !important; }
body[class*="sp-scheme-"] .sp-panel__bar { background: linear-gradient(90deg,#124145,#2c7a80 60%,#4f9a9f) !important; }
body[class*="sp-scheme-"] .sp-panel__x { background: #f0f1f2 !important; color: #353b3d !important; }
/* PDF reader chrome */
body[class*="sp-scheme-"] .sp-pdf-hdr { background: #124145 !important; }
body[class*="sp-scheme-"] .sp-pdf-nav { background: #ffffff !important; }
body[class*="sp-scheme-"] .sp-pdf-nav-btn { background: #f1f7f7 !important; color: #124145 !important; }
body[class*="sp-scheme-"] .sp-pdf-footer { background: #f1f7f7 !important; }
body[class*="sp-scheme-"] #sp-pdf-content { background: #ffffff !important; }
body[class*="sp-scheme-"] #sp-pdf-content h2 { color: #0e3437 !important; }
body[class*="sp-scheme-"] #sp-pdf-content h3 { color: #124145 !important; }
body[class*="sp-scheme-"] #sp-pdf-content p { color: #353b3d !important; }

/* ── Cursor option buttons ────────────────────────────────────── */
.sp-cur-opt {
  height: 32px;
  padding: 0 10px;
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-border-mid);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-text-muted);
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.sp-cur-opt.is-active {
  background: var(--sp-teal);
  border-color: var(--sp-teal);
  color: #ffffff;
  font-weight: 600;
}

.sp-cur-opt:hover:not(.is-active) {
  background: var(--sp-teal-bg);
  border-color: var(--sp-teal-mid);
  color: var(--sp-teal);
}

.sp-cur-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sp-focus-ring);
}

/* Hide cursor options on touch / pointer:coarse devices (no mouse cursor) */
@media (hover: none), (pointer: coarse) {
  #sp-cursor-section { display: none !important; }
}

/* ── Read Aloud — active reading state ────────────────────── */

/*
 * When speech is playing, readable elements get a pointer cursor
 * and a dashed hover outline so users know they can click to jump.
 */
body.sp-reading-active p,
body.sp-reading-active h1, body.sp-reading-active h2,
body.sp-reading-active h3, body.sp-reading-active h4,
body.sp-reading-active h5, body.sp-reading-active h6,
body.sp-reading-active li, body.sp-reading-active blockquote,
body.sp-reading-active td, body.sp-reading-active th,
body.sp-reading-active .elementor-heading-title {
  cursor: pointer !important;
}

body.sp-reading-active p:hover,
body.sp-reading-active h1:hover, body.sp-reading-active h2:hover,
body.sp-reading-active h3:hover, body.sp-reading-active h4:hover,
body.sp-reading-active h5:hover, body.sp-reading-active h6:hover,
body.sp-reading-active li:hover,
body.sp-reading-active .elementor-heading-title:hover {
  outline: 2px dashed rgba(18,65,69,.32) !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
}

/*
 * Brief teal highlight shown when a user clicks a section
 * while speech is idle — confirms "I will start from here".
 */
[data-sp-reading-from] {
  outline: 2.5px solid #124145 !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
  background-color: rgba(18,65,69,.05) !important;
}

/* ── Reading mode — hover visual indicator ───────────────── */
/*
 * When Reading mode is on, a faint dashed outline highlights the
 * element under the pointer so the user knows what will be read.
 * Interactive elements keep their normal pointer cursor.
 * Matches the body class added by apply() → bodyMap.
 */
body.sp-reading-mode-on p:hover,
body.sp-reading-mode-on h1:hover,
body.sp-reading-mode-on h2:hover,
body.sp-reading-mode-on h3:hover,
body.sp-reading-mode-on h4:hover,
body.sp-reading-mode-on h5:hover,
body.sp-reading-mode-on h6:hover,
body.sp-reading-mode-on li:hover,
body.sp-reading-mode-on .elementor-heading-title:hover,
body.sp-reading-mode-on .elementor-widget-text-editor:hover {
  outline: 1.5px dashed rgba(18,65,69,.28) !important;
  outline-offset: 4px !important;
  border-radius: 3px !important;
  cursor: default !important;
}

/* Links and buttons in reading mode keep their pointer cursor */
body.sp-reading-mode-on a:hover,
body.sp-reading-mode-on button:hover,
body.sp-reading-mode-on [role="button"]:hover,
body.sp-reading-mode-on .elementor-button:hover {
  outline: 1.5px dashed rgba(18,65,69,.28) !important;
  outline-offset: 4px !important;
  border-radius: 3px !important;
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  #sp-a11y-wrap, #sp-pdf-reader, #sp-ruler, .sp-mask-part { display: none !important; }
}