/* =====================================================
   Accessibility CSS — Full fixed file
   - Enforces left: 15px for floating buttons
   - Mobile: buttons are 40x40 with scaled icons
   - Preserves original rules; minimal, targeted fixes
   ===================================================== */

:root{
  --a11y2-accent:#627d3b;            /* UPDATED brand accent */
  --a11y2-primary:#A15E10;           /* heading/highlight color */
  --a11y2-ink:#223127;
  --a11y2-muted:#4D5B52;
  --a11y2-border:#D9E0DA;
  --a11y2-surface:#FFFFFF;
  --a11y2-tile:#F8F9F7;
  --a11y2-focus:#1E6B3C;
  --a11y2-button:var(--a11y2-accent);
  --a11y2-shadow:0 10px 22px rgba(0,0,0,.16),0 3px 8px rgba(0,0,0,.10);
}

/* ---------- page filters apply to content only (not the widget) ---------- */
body.a11y2-contrast-high  > :not(#a11y2-root){ filter:contrast(1.5) brightness(1.08) }
body.a11y2-contrast-desat > :not(#a11y2-root){ filter:grayscale(100%) }
body.a11y2-contrast-invert> :not(#a11y2-root){ filter:invert(100%) hue-rotate(180deg) }
body.a11y2-color-shift    > :not(#a11y2-root){ filter:hue-rotate(25deg) saturate(.9) }
body.a11y2-hide-images    > :not(#a11y2-root) img{ visibility:hidden !important }
body.a11y2-pause > :not(#a11y2-root) *,
body.a11y2-pause > :not(#a11y2-root) *::before,
body.a11y2-pause > :not(#a11y2-root) *::after{ animation-play-state:paused !important; transition:none !important }

/* ---------- launchers (speaker, globe, main) ---------- */
@keyframes a11y2-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@media (prefers-reduced-motion: no-preference){
  #a11y2-root .a11y2-launcher,
  #a11y2-root .a11y2-read,
  #a11y2-root .a11y2-translate { animation:a11y2-bob 3.6s ease-in-out infinite }
}
#a11y2-root .a11y2-launcher:hover,
#a11y2-root .a11y2-read:hover,
#a11y2-root .a11y2-translate:hover{ transform:translateY(-1px) }
#a11y2-root .a11y2-launcher:active,
#a11y2-root .a11y2-read:active,
#a11y2-root .a11y2-translate:active{ transform:translateY(0) }

/* Core floating buttons — left:15px enforced */
#a11y2-root .a11y2-launcher,
#a11y2-root .a11y2-read,
#a11y2-root .a11y2-translate{
  position:fixed;
  left:15px !important;          /* ENFORCED: 15px from left */
  width:56px;
  height:56px;
  background:var(--a11y2-button);
  color:#fff;
  border:1px solid var(--a11y2-button);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  z-index:99 !important;       /* high z so overlays don't reflow layout */
  border: 1px solid #333;
  -webkit-tap-highlight-color: transparent;
}

/* original stacking positions (kept math intact) */
#a11y2-root .a11y2-launcher{  bottom:calc(55px + env(safe-area-inset-bottom)) }
#a11y2-root .a11y2-read{      bottom:calc(17px + env(safe-area-inset-bottom)) }
#a11y2-root .a11y2-translate{ bottom:calc(179px + env(safe-area-inset-bottom)) }

#a11y2-root .a11y2-launcher i{font-size:26px}
#a11y2-root .a11y2-read i{font-size:24px}
#a11y2-root .a11y2-translate i{font-size:22px}

#a11y2-root .a11y2-launcher:focus-visible,
#a11y2-root .a11y2-panel button:focus-visible,
#a11y2-root .a11y2-read:focus-visible,
#a11y2-root .a11y2-translate:focus-visible,
#a11y2-root .a11y2-read-btn:focus-visible{
  outline:3px solid var(--a11y2-focus); outline-offset:2px;
}

/* Tooltips (show only on devices that actually have hover) */
@media (hover: hover){
  #a11y2-root .a11y2-launcher::after,
  #a11y2-root .a11y2-read::after,
  #a11y2-root .a11y2-translate::after{
    content:attr(title); position:absolute; left:calc(100% + 10px); bottom:50%; transform:translateY(50%);
    background:#2f3342; color:#fff; padding:8px 12px; border-radius:10px; white-space:nowrap;
    box-shadow:0 6px 18px rgba(0,0,0,.22); font-size:13px; opacity:0; visibility:hidden; transition:.15s;
  }
  #a11y2-root .a11y2-launcher::before,
  #a11y2-root .a11y2-read::before,
  #a11y2-root .a11y2-translate::before{
    content:""; position:absolute; left:calc(100% + 4px); bottom:50%; transform:translateY(50%);
    border:6px solid transparent; border-right-color:#2f3342; opacity:0; visibility:hidden; transition:.15s;
  }
  #a11y2-root .a11y2-launcher:hover::after, #a11y2-root .a11y2-launcher:focus-visible::after,
  #a11y2-root .a11y2-launcher:hover::before, #a11y2-root .a11y2-launcher:focus-visible::before,
  #a11y2-root .a11y2-read:hover::after, #a11y2-root .a11y2-read:focus-visible::after,
  #a11y2-root .a11y2-read:hover::before, #a11y2-root .a11y2-read:focus-visible::before,
  #a11y2-root .a11y2-translate:hover::after, #a11y2-root .a11y2-translate:focus-visible::after,
  #a11y2-root .a11y2-translate:hover::before, #a11y2-root .a11y2-translate:focus-visible::before{
    opacity:1; visibility:visible;
  }
}

/* ---------- overlay + panel ---------- */
#a11y2-root .a11y2-overlay[hidden]{display:none!important}
#a11y2-root .a11y2-overlay{position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:9998}

#a11y2-root .a11y2-panel{
  right:max(12px, env(safe-area-inset-right));
  left:auto; bottom:calc(96px + env(safe-area-inset-bottom));
  width:min(420px, calc(100vw - 24px));
  max-height:calc(100vh - 160px);
  overflow:auto;
  background:var(--a11y2-surface); color:var(--a11y2-ink);
  border-radius:16px; box-shadow:var(--a11y2-shadow);
  padding:16px; border:1px solid var(--a11y2-border);
  z-index:9999;
}
@media (max-width:640px){
  #a11y2-root .a11y2-panel{ left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); width:auto }
}

/* Header */
#a11y2-root .a11y2-head{display:flex;align-items:center;gap:8px}
#a11y2-root .a11y2-title{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--a11y2-primary);flex:1}
#a11y2-root .a11y2-close{
  background:#fff;color:#333;border:1px solid var(--a11y2-border);
  border-radius:12px;width:44px;height:44px;cursor:pointer;font-size:24px;line-height:1
}

/* Tiles */
#a11y2-root .a11y2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
#a11y2-root .a11y2-tile{
  position:relative;background:var(--a11y2-tile); color:var(--a11y2-ink);
  border:1px solid var(--a11y2-border); border-radius:12px;
  padding:12px 10px; min-height:72px; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer;
}
@media (max-width:540px){
  #a11y2-root .a11y2-grid{ grid-template-columns:repeat(2,1fr) }
  #a11y2-root .a11y2-tile{ min-height:58px; padding:8px }
}
@media (max-width:360px){
  #a11y2-root .a11y2-grid{ grid-template-columns:1fr }
}
#a11y2-root .a11y2-tile[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--a11y2-primary)}
#a11y2-root .a11y2-dots{position:absolute;right:10px;top:10px;display:flex;gap:4px}
#a11y2-root .a11y2-dot{width:6px;height:6px;border-radius:50%;background:#d8dcd7;border:1px solid #b9c2ba}
#a11y2-root .a11y2-dot.on{background:var(--a11y2-primary);border-color:var(--a11y2-primary)}
#a11y2-root .a11y2-actions{display:flex;justify-content:flex-end;margin-top:10px}
#a11y2-root .a11y2-reset{background:#fff;color:#333;border:1px solid var(--a11y2-border);border-radius:10px;padding:8px 12px;cursor:pointer}

/* Feedback link */
#a11y2-root .a11y2-feedback-link{ display:block; margin-top:12px; text-decoration:none; font-weight:700; color:var(--a11y2-primary) }
#a11y2-root .a11y2-feedback-link:focus-visible,
#a11y2-root .a11y2-feedback-link:hover{ text-decoration:underline }

/* Site focus & highlights */
.a11y2-focus :where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus,
.a11y2-focus :where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{
  outline:3px solid var(--a11y2-primary)!important; outline-offset:2px!important;
}
.a11y2-hl-1 h1, .a11y2-hl-1 h2, .a11y2-hl-1 h3, .a11y2-hl-1 h4, .a11y2-hl-1 h5, .a11y2-hl-1 h6{background:#FFF3BF}
.a11y2-hl-2 a{ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 2px }
.a11y2-hl-3 button, .a11y2-hl-3 [role="button"], .a11y2-hl-3 .wp-block-button__link{ box-shadow:0 0 0 3px #FFCF66 }
.a11y2-hl-4 a, .a11y2-hl-4 h1, .a11y2-hl-4 h2, .a11y2-hl-4 h3, .a11y2-hl-4 h4, .a11y2-hl-4 h5, .a11y2-hl-4 h6,
.a11y2-hl-4 button, .a11y2-hl-4 [role="button"], .a11y2-hl-4 .wp-block-button__link{ outline:2px dashed #C23; outline-offset:2px }

/* Text & spacing scales */
.a11y2-text-1{ font-size:112.5% } .a11y2-text-2{ font-size:125% } .a11y2-text-3{ font-size:137.5% }
.a11y2-space-1{ line-height:1.6; letter-spacing:.1px; word-spacing:.2px }
.a11y2-space-2{ line-height:1.75; letter-spacing:.2px; word-spacing:.4px }

/* Font toggles – keep icon fonts intact */
.a11y2-font-serif :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,dd,dt,a,small,strong,em,code,pre,label,th,td,figcaption,button,input,textarea,select){
  font-family: Georgia, "Times New Roman", serif !important;
}
.a11y2-font-dys :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,dd,dt,a,small,strong,em,code,pre,label,th,td,figcaption,button,input,textarea,select){
  font-family: "Atkinson Hyperlegible", "OpenDyslexic", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}
.a11y2-font-serif  i[class^="fa"], .a11y2-font-serif  i[class*=" fa-"],
.a11y2-font-dys    i[class^="fa"], .a11y2-font-dys    i[class*=" fa-"]{
  font-family: var(--fa-style-family,"Font Awesome 6 Free"), "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: var(--fa-style, 900);
}
.a11y2-font-serif .dashicons, .a11y2-font-dys .dashicons{ font-family: "dashicons" !important }

/* Reading helpers */
.a11y2-guide{ position:fixed; left:0; width:100%; height:2rem; background:rgba(255,193,7,.28); pointer-events:none; z-index:9997 }
.a11y2-window{
  position:fixed; inset:0; pointer-events:none; z-index:9997;
  background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) calc(50% - 80px),
    rgba(0,0,0,0) calc(50% - 80px), rgba(0,0,0,0) calc(50% + 80px),
    rgba(0,0,0,.45) calc(50% + 80px), rgba(0,0,0,.45) 100%)
}

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

/* Read controls */
#a11y2-root .a11y2-read-controls{
  position:fixed; left:110px; bottom:calc(96px + env(safe-area-inset-bottom));
  display:flex; gap:10px; z-index:9999;
  background:#fff; border:1px solid var(--a11y2-border); padding:8px;
  border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.14);
}
#a11y2-root .a11y2-read-btn{
  padding:8px 12px; border:1px solid var(--a11y2-primary);
  background:#fff; color:var(--a11y2-primary);
  border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-weight:600;
}
#a11y2-root .a11y2-read-btn i{ font-size:14px }

/* Icons-only on small screens */
@media (max-width:640px){
  #a11y2-root .a11y2-read-controls{ left:100px; padding:6px; gap:6px }
  #a11y2-root .a11y2-read-btn{ padding:8px; width:40px; height:40px; border-radius:10px }
  #a11y2-root .a11y2-read-btn .a11y2-lbl{ display:none }
}

/* Settings / Translate popovers */
#a11y2-root .a11y2-read-opts,
#a11y2-root .a11y2-translate-opts{
  position:fixed; left:110px;
  background:#fff; color:var(--a11y2-ink);
  border:1px solid var(--a11y2-border); border-radius:12px;
  box-shadow:var(--a11y2-shadow); padding:12px; z-index:10000;
  /* Wider on desktop, still safe on phones (left offset + 140px margin) */
  width:min(600px, calc(100vw - 140px));
  max-width:calc(100vw - 140px);
}

#a11y2-root .a11y2-read-opts select,
#a11y2-root .a11y2-translate-opts select{
  width:100%; max-width:100%;
}
#a11y2-root .a11y2-disclaimer{
  font-size:.8125rem; opacity:.9;
  white-space:normal; word-break:normal; hyphens:none; text-align:left;
  margin-top:4px;
}
/* In translate panel, make disclaimer span full width of the grid */
#a11y2-root .a11y2-translate-opts .a11y2-disclaimer{ grid-column:1 / -1; }
/* First-load Voice Reader tip bubble */
#a11y2-root .a11y2-read-tip{
  position:fixed; left:96px; bottom:154px; z-index:10000;
  background:#fff; color:var(--a11y2-ink);
  border-radius:12px; padding:10px 12px; box-shadow:var(--a11y2-shadow);
  font-size:.875rem; line-height:1.35;
}
#a11y2-root .a11y2-read-tip .a11y2-tip-close{
  position:absolute; top:4px; right:6px;
  border:0; background:none; font-size:16px; line-height:1; cursor:pointer;
}

#a11y2-root .a11y2-read-opts{ bottom:calc(166px + env(safe-area-inset-bottom)) }
#a11y2-root .a11y2-translate-opts{ bottom:calc(208px + env(safe-area-inset-bottom)) }

#a11y2-root .a11y2-read-opts-row{
  display:grid; grid-template-columns: 110px 1fr auto; align-items:center; gap:8px; margin-bottom:8px;
}
#a11y2-root .a11y2-read-opts-actions{ display:flex; justify-content:flex-end; gap:8px }
#a11y2-root .a11y2-read-opts .a11y2-read-test,
#a11y2-root .a11y2-read-opts .a11y2-read-reset{
  padding:8px 12px; border-radius:10px; cursor:pointer;
  border:1px solid var(--a11y2-primary); background:#fff; color:var(--a11y2-primary); font-weight:700;
}

/* Translate note + layout */
#a11y2-root .a11y2-translate-opts{ display:grid; grid-template-columns: 100px 1fr; gap:8px; align-items:center }
#a11y2-root .a11y2-translate-opts label{ font-weight:700; color:var(--a11y2-muted) }
#a11y2-root .a11y2-translate-note{ grid-column:1 / -1; margin:4px 0 0; font-size:12.5px; color:var(--a11y2-muted) }
#a11y2-root .a11y2-translate-opts[hidden],
#a11y2-root .a11y2-read-opts[hidden]{ display:none !important }

/* Popover close buttons (×) */
#a11y2-root .a11y2-pop-close{
  position:absolute; top: -40px; right:0; width:32px; height:32px;
  border-radius:8px; border:1px solid var(--a11y2-border); background:#fff; cursor:pointer; font-size:20px; line-height:1;
}

/* Hide Google banner/UI */
#goog-gt-tt, .goog-te-banner-frame, .goog-te-gadget-icon, .goog-te-spinner-pos { display:none !important }
body { top: 0 !important }
.goog-logo-link { display:none !important }
.goog-te-gadget { color: transparent !important }


/* Kill layout shifts from Google Translate banner */
#goog-gt-tt, .goog-te-banner-frame { display:none !important; }
html.translated-ltr body,
html.translated-rtl body,
body { top: 0 !important; }               /* GT sometimes sets body{top:40px} */
body { position: static !important; }     /* prevents relative top offsets from persisting */

/* Cookie banner frameworks sometimes reserve space at the bottom */
body[class*="cli-"], html[class*="cli-"],
body[class*="cky-"], html[class*="cky-"] {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Inline button (NOT full width) added by your pdf-outloud.js */
.pdf-read-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 16px;
  background: #007acc;
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  width: auto !important;          /* ensure no block/full-width */
  max-width: none !important;
  align-self: start;               /* if parent is flex/grid */
}
.pdf-read-btn i { line-height: 1; }
.pdf-read-btn:hover { background: #0064b0; }
.pdf-read-btn:focus-visible {
  outline: 2px solid #ffbf47;      /* accessible focus */
  outline-offset: 2px;
}

/* Inline controls that appear next to/under the PDF button */
.pdf-read-controls {
  display: none;                   /* shown by JS while speaking */
  margin-top: .5rem;
  gap: .5rem;
}
.pdf-read-ctrl {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 6px 10px;
  background: #e9eef5;
  color: #222;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
}
.pdf-read-ctrl:hover { filter: brightness(0.97); }
.pdf-read-ctrl:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Nice spacing when auto-injected above Gutenberg File blocks */
.wp-block-file + .pdf-read-controls,
.pdf-read-btn + .pdf-read-controls {
  display: inline-flex;
}

/* Keep icons aligned in controls */
.pdf-read-ctrl i,
.pdf-read-btn i {
  display: inline-block;
  width: 1em;
  text-align: center;
}

/* ----------------------------
   Targeted mobile overrides
   - Force 40x40 buttons
   - Ensure left:15px remains enforced
   ---------------------------- */
@media (max-width:640px){
  /* Buttons */
  #a11y2-root .a11y2-launcher,
  #a11y2-root .a11y2-read,
  #a11y2-root .a11y2-translate{
    width:40px !important;
    height:40px !important;
    left:2px !important;          /* re-enforce mobile left */
    border-radius:10px !important;
    padding:0 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
  }

  /* Adjust stacked positions to use 40px unit height */
  #a11y2-root .a11y2-launcher{ bottom: calc(30px + env(safe-area-inset-bottom)) !important; }
  #a11y2-root .a11y2-read{ bottom: calc(30px + env(safe-area-inset-bottom) + (40px + 10px) * 1) !important; }
  #a11y2-root .a11y2-translate{ bottom: calc(30px + env(safe-area-inset-bottom) + (40px + 10px) * 2) !important; }

  /* Icon sizes */
  #a11y2-root .a11y2-launcher i{ font-size:18px !important }
  #a11y2-root .a11y2-read i{ font-size:16px !important }
  #a11y2-root .a11y2-translate i{ font-size:14px !important }

  /* Read-controls compact */
  #a11y2-root .a11y2-read-controls{ left: calc(15px + 40px + 6px); padding:6px; gap:6px }
  #a11y2-root .a11y2-read-btn{ padding:8px; width:40px; height:40px; border-radius:10px }
  #a11y2-root .a11y2-read-btn .a11y2-lbl{ display:none }
}

/* Hide tooltips on touch devices to avoid accidental overlays */
@media (hover: none){
  #a11y2-root .a11y2-launcher::after,
  #a11y2-root .a11y2-read::after,
  #a11y2-root .a11y2-translate::after,
  #a11y2-root .a11y2-launcher::before,
  #a11y2-root .a11y2-read::before,
  #a11y2-root .a11y2-translate::before{ display:none !important }
}