/* ==========================================================
   Accessibility Toolbar Pro — toolbar.css  v3.0
   by Tech Deployers — https://www.techdeployers.com
   ========================================================== */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --act-primary:    #2563EB;
  --act-primary-dk: #1d4ed8;
  --act-surface:    #ffffff;
  --act-surface2:   #f1f5f9;
  --act-border:     #e2e8f0;
  --act-text:       #1e293b;
  --act-muted:      #64748b;
  --act-radius:     16px;
  --act-shadow:     0 4px 24px rgba(0,0,0,.15), 0 1px 6px rgba(0,0,0,.08);
  --act-speed:      .2s;
  --act-z:          999999;
}

/* ── FONT SCALING — applied directly to html element by JS ─
   We do NOT use body { font-size: calc(1em + X) } because
   that causes compounding: each click re-reads the already-
   scaled em, so the second click jumps by 2× the intended
   step. Instead JS writes an absolute px value to html and
   everything in em/rem inherits from that correctly. ─────── */

/* ── Utility ────────────────────────────────────────────── */
.act-sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Skip link ──────────────────────────────────────────── */
.act-skip-link {
  position:fixed; top:-100px; left:50%; transform:translateX(-50%);
  background:var(--act-primary); color:#fff;
  padding:10px 24px; border-radius:0 0 10px 10px;
  font-weight:700; font-size:15px; text-decoration:none;
  z-index:calc(var(--act-z) + 10); transition:top .2s;
}
.act-skip-link:focus { top:0; }

/* ── Toolbar wrapper ────────────────────────────────────── */
#act-toolbar-wrap {
  position:fixed;
  left:16px;
  bottom:24px;
  z-index:var(--act-z);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transform:none !important;
  top:auto !important;
  /* Prevent Breakdance overrides */
  font-size:16px !important;
}
#act-toolbar-wrap.act-pos-right {
  left:auto;
  right:16px;
  align-items:flex-end;
}

/* ── Round trigger button ───────────────────────────────── */
#act-toggle-btn {
  order:2;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--act-primary);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(37,99,235,.45);
  transition:background var(--act-speed), transform var(--act-speed), box-shadow var(--act-speed);
  flex-shrink:0;
  /* Reset any font-size inheritance from global scaling */
  font-size:16px !important;
}
#act-toggle-btn svg {
  width:26px; height:26px;
  fill:#fff;
  pointer-events:none;
  flex-shrink:0;
}
#act-toggle-btn:hover,
#act-toggle-btn:focus-visible {
  background:var(--act-primary-dk);
  transform:scale(1.08);
  outline:3px solid rgba(255,255,255,.7);
  outline-offset:3px;
}

/* ── Panel ──────────────────────────────────────────────── */
#act-panel {
  order:1;
  background:var(--act-surface);
  border-radius:var(--act-radius);
  box-shadow:var(--act-shadow);
  width:300px;
  max-height:calc(100vh - 130px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  animation:actFadeUp var(--act-speed) ease;
  /* Prevent font-size inheritance from the scaled html element
     so the panel always renders at the designed size */
  font-size:14px !important;
  line-height:1.5 !important;
}
#act-panel[hidden] { display:none !important; }

@keyframes actFadeUp {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}

@media (max-width:380px) {
  #act-toolbar-wrap { left:8px; bottom:16px; }
  #act-toolbar-wrap.act-pos-right { right:8px; left:auto; }
  #act-panel { width:calc(100vw - 28px); }
}

/* ── Panel header ───────────────────────────────────────── */
.act-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--act-border);
  position:sticky; top:0; background:var(--act-surface); z-index:1;
  border-radius:var(--act-radius) var(--act-radius) 0 0;
}
.act-panel-title {
  margin:0; font-size:15px !important; font-weight:700; color:var(--act-text);
  display:flex; align-items:center; gap:7px;
}
.act-panel-title svg { width:18px; height:18px; fill:var(--act-primary); flex-shrink:0; }

#act-close-btn {
  background:var(--act-surface2); border:none; cursor:pointer;
  border-radius:8px; width:30px; height:30px; min-width:30px;
  display:flex; align-items:center; justify-content:center;
  color:var(--act-muted); transition:background var(--act-speed), color var(--act-speed);
}
#act-close-btn svg { width:14px; height:14px; flex-shrink:0; }
#act-close-btn:hover,
#act-close-btn:focus-visible { background:#fecaca; color:#b91c1c; outline:2px solid var(--act-primary); }

/* ── Panel body ─────────────────────────────────────────── */
.act-panel-body { padding:6px 0 2px; }

.act-section {
  padding:10px 14px;
  border-bottom:1px solid var(--act-border);
}
.act-section:last-child { border-bottom:none; }

.act-section-label {
  display:block; font-size:10px !important; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--act-muted); margin-bottom:8px;
}

/* ── Text-size buttons ──────────────────────────────────── */
.act-btn-group { display:flex; gap:6px; }

.act-tool-btn {
  flex:1;
  background:var(--act-surface2);
  border:2px solid var(--act-border);
  border-radius:10px;
  padding:10px 4px;
  font-weight:700;
  cursor:pointer;
  color:var(--act-text);
  transition:background var(--act-speed), border-color var(--act-speed), color var(--act-speed);
  line-height:1;
  user-select:none;
  pointer-events:auto;
}
#act-btn-decrease { font-size:13px !important; }
#act-btn-reset    { font-size:16px !important; }
#act-btn-increase { font-size:20px !important; }

.act-tool-btn:hover,
.act-tool-btn:focus-visible {
  background:var(--act-primary); color:#fff; border-color:var(--act-primary);
  outline:2px solid var(--act-primary); outline-offset:2px;
}
.act-tool-btn:disabled { opacity:.4; cursor:not-allowed; }
.act-size-active {
  background:var(--act-primary) !important;
  color:#fff !important;
  border-color:var(--act-primary) !important;
}

/* ── Colour mode grid ───────────────────────────────────── */
.act-color-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }

.act-color-btn {
  background:var(--act-surface2);
  border:1.5px solid var(--act-border);
  border-radius:8px; padding:7px 4px;
  font-size:11px !important; font-weight:600;
  cursor:pointer; color:var(--act-text);
  transition:all var(--act-speed);
  pointer-events:auto;
}
.act-color-btn:hover,
.act-color-btn:focus-visible {
  border-color:var(--act-primary); background:#eff6ff;
  outline:2px solid var(--act-primary); outline-offset:2px;
}
.act-color-btn[aria-pressed="true"] {
  background:var(--act-primary); color:#fff; border-color:var(--act-primary);
}

/* ── Feature toggles ────────────────────────────────────── */
.act-toggles { display:flex; flex-direction:column; gap:2px; }

.act-toggle {
  display:flex; align-items:center; gap:9px;
  width:100%; background:none;
  border:1.5px solid transparent; border-radius:10px;
  padding:8px 8px; cursor:pointer;
  color:var(--act-text); text-align:left;
  transition:background var(--act-speed), border-color var(--act-speed);
  pointer-events:auto;
}
.act-toggle:hover,
.act-toggle:focus-visible {
  background:var(--act-surface2); border-color:var(--act-border);
  outline:2px solid var(--act-primary); outline-offset:1px;
}
.act-toggle[aria-pressed="true"] {
  background:#eff6ff; border-color:var(--act-primary);
}
.act-toggle-icon {
  flex-shrink:0; width:28px; height:28px;
  background:var(--act-surface2); border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:var(--act-muted); transition:background var(--act-speed), color var(--act-speed);
}
.act-toggle-icon svg { width:14px; height:14px; }
.act-toggle[aria-pressed="true"] .act-toggle-icon {
  background:var(--act-primary); color:#fff;
}
.act-toggle-text {
  flex:1; font-size:12px !important; font-weight:600;
  display:flex; flex-direction:column; gap:1px;
  line-height:1.4;
}
small.act-tts-hint {
  font-size:10px !important; font-weight:400; color:var(--act-muted);
}

/* Toggle switch pill */
.act-toggle-switch {
  width:32px; height:18px; background:#cbd5e1; flex-shrink:0;
  border-radius:999px; position:relative;
  transition:background var(--act-speed);
}
.act-toggle-switch::after {
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; background:#fff; border-radius:50%;
  transition:transform var(--act-speed);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.act-toggle[aria-pressed="true"] .act-toggle-switch { background:var(--act-primary); }
.act-toggle[aria-pressed="true"] .act-toggle-switch::after { transform:translateX(14px); }

/* ── TTS controls ───────────────────────────────────────── */
.act-tts-controls {
  display:flex; gap:7px;
  padding:4px 14px 8px;
  pointer-events:auto;
}
.act-speak-btn, .act-stop-btn {
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:5px; padding:8px; border:none; border-radius:8px;
  font-size:12px !important; font-weight:600; cursor:pointer;
  transition:background var(--act-speed); pointer-events:auto;
  white-space:nowrap;
}
.act-speak-btn { background:var(--act-primary); color:#fff; }
.act-speak-btn:hover,
.act-speak-btn:focus-visible { background:var(--act-primary-dk); outline:2px solid var(--act-primary); outline-offset:2px; }
.act-speak-btn svg { width:12px; height:12px; flex-shrink:0; }
.act-stop-btn { background:var(--act-surface2); color:var(--act-text); border:1.5px solid var(--act-border); }
.act-stop-btn:hover,
.act-stop-btn:focus-visible { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
.act-stop-btn svg { width:12px; height:12px; flex-shrink:0; }

.act-tts-controls.act-speaking .act-speak-btn {
  animation:actPulse 1.4s ease-in-out infinite;
}
@keyframes actPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(37,99,235,.45); }
  50%      { box-shadow:0 0 0 8px rgba(37,99,235,0); }
}

/* ── Panel footer ───────────────────────────────────────── */
.act-panel-footer {
  padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:1px solid var(--act-border);
  background:var(--act-surface2);
}
.act-reset-btn {
  background:none; border:1.5px solid var(--act-border);
  border-radius:7px; padding:5px 12px;
  font-size:11px !important; font-weight:600; cursor:pointer;
  color:var(--act-muted); transition:all var(--act-speed); pointer-events:auto;
  white-space:nowrap;
}
.act-reset-btn:hover,
.act-reset-btn:focus-visible { border-color:#f87171; color:#b91c1c; background:#fee2e2; }

.act-statement-link {
  font-size:11px !important; color:var(--act-primary);
  text-decoration:none; white-space:nowrap;
}
.act-statement-link:hover { text-decoration:underline; }

/* ── Plugin credit ──────────────────────────────────────── */
.act-credit {
  text-align:center;
  font-size:10px !important;
  color:var(--act-muted);
  padding:6px 14px 10px;
  border-top:1px solid var(--act-border);
}
.act-credit a { color:var(--act-primary); text-decoration:none; font-weight:600; }
.act-credit a:hover { text-decoration:underline; }

/* ── Reading guide ──────────────────────────────────────── */
#act-reading-guide {
  position:fixed; left:0; right:0; height:28px;
  background:rgba(255,255,0,.28);
  border-top:2px solid rgba(160,140,0,.4);
  border-bottom:2px solid rgba(160,140,0,.4);
  pointer-events:none;
  z-index:calc(var(--act-z) - 1);
  top:50%;
}

/* ── Panel scrollbar ────────────────────────────────────── */
#act-panel::-webkit-scrollbar { width:4px; }
#act-panel::-webkit-scrollbar-track { background:transparent; }
#act-panel::-webkit-scrollbar-thumb { background:var(--act-border); border-radius:3px; }

/* ════════════════════════════════════════════════════════
   Global accessibility overrides — applied to <html>
   All use !important to override theme/builder styles.
   ════════════════════════════════════════════════════════ */

/* High Contrast */
html.act-high-contrast,
html.act-high-contrast body,
html.act-high-contrast *:not(#act-toolbar-wrap):not(#act-toolbar-wrap *) {
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}
html.act-high-contrast a  { color:#ffff00 !important; }
html.act-high-contrast img { filter:grayscale(100%) contrast(150%); }
/* Keep toolbar readable */
html.act-high-contrast #act-toolbar-wrap { filter:none; }

/* Dark Mode */
html.act-dark-mode { filter:invert(1) hue-rotate(180deg); }
html.act-dark-mode img,
html.act-dark-mode video,
html.act-dark-mode iframe { filter:invert(1) hue-rotate(180deg); }
html.act-dark-mode #act-toolbar-wrap { filter:invert(1) hue-rotate(180deg); }

/* Yellow on Black */
html.act-yellow-on-black,
html.act-yellow-on-black body,
html.act-yellow-on-black *:not(#act-toolbar-wrap):not(#act-toolbar-wrap *) {
  background:#000 !important;
  color:#ffff00 !important;
  border-color:#ffff00 !important;
}
html.act-yellow-on-black #act-toolbar-wrap { filter:none; }

/* Dyslexia font */
html.act-dyslexia-font,
html.act-dyslexia-font * {
  font-family:Arial, Helvetica, sans-serif !important;
  letter-spacing:.08em !important;
  word-spacing:.2em !important;
  line-height:1.8 !important;
}

/* Highlight links */
html.act-highlight-links a {
  background:#ffff00 !important;
  color:#000 !important;
  text-decoration:underline !important;
  padding:0 2px !important;
  border-radius:2px !important;
}

/* Large cursor */
html.act-large-cursor,
html.act-large-cursor * {
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpolygon points='4,4 4,34 13,25 18,36 22,34 17,23 28,23' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Pause animations */
html.act-pause-animations,
html.act-pause-animations * {
  animation:none !important;
  transition:none !important;
}
/* But keep the toolbar's own transitions */
html.act-pause-animations #act-toolbar-wrap,
html.act-pause-animations #act-toolbar-wrap * {
  animation:revert;
  transition:revert;
}

/* TTS active — blue text selection */
html.act-tts-active ::selection {
  background:#bfdbfe;
  color:#1e3a8a;
}

/* ── Breakdance z-index guard ───────────────────────────── */
.bde-section, .bde-container,
[data-element-type], .breakdance-builder-canvas { z-index:auto; }
#act-toolbar-wrap { z-index:999999 !important; }

/* ── Statement page ─────────────────────────────────────── */
.act-statement { max-width:720px; line-height:1.7; }
.act-statement h1 { font-size:1.8em; margin-bottom:.5em; }
.act-statement h2 { font-size:1.2em; margin-top:1.5em; border-bottom:1px solid #e2e8f0; padding-bottom:.3em; }