/*
 * tahericreate/a11y — comfort overlay (full feature set).
 * Self-contained, no external resources. Effects toggled via html.tca11y-*
 * classes + a dynamic <style id="tca11y-dyn"> for level/colour rules.
 * Accent colour + position come from the mount point's data-* attributes.
 *
 * Comfort/display layer — never a substitute for an accessible site.
 */

/* ── Position (base default = bottom-right, so it is NEVER unpositioned) ── */
#tca11y-overlay-root{position:fixed;z-index:2147483000;--tca11y-accent:#1d4ed8;bottom:1rem;right:1rem;top:auto;left:auto;}
#tca11y-overlay-root.pos-bottomright{bottom:1rem;right:1rem;top:auto;left:auto;}
#tca11y-overlay-root.pos-bottomleft{bottom:1rem;left:1rem;top:auto;right:auto;}
#tca11y-overlay-root.pos-topright{top:1rem;right:1rem;bottom:auto;left:auto;}
#tca11y-overlay-root.pos-topleft{top:1rem;left:1rem;bottom:auto;right:auto;}
#tca11y-overlay-root.pos-middleright{top:50%;right:1rem;bottom:auto;left:auto;transform:translateY(-50%);}
#tca11y-overlay-root.pos-middleleft{top:50%;left:1rem;bottom:auto;right:auto;transform:translateY(-50%);}

/* ── Widget chrome ─────────────────────────────────────────────── */
.tca11y-btn{
  width:52px;height:52px;border-radius:50%;border:2px solid #fff;background:var(--tca11y-accent);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
}
.tca11y-btn:focus-visible,.tca11y-panel button:focus-visible,.tca11y-panel select:focus-visible{outline:3px solid #ffbf47;outline-offset:2px;}
.tca11y-panel{
  position:absolute;width:340px;max-width:90vw;max-height:calc(100vh - 96px);overflow-y:auto;
  bottom:64px;right:0;
  background:#fff;color:#111;border:1px solid #888;border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.32);padding:14px;font:15px/1.4 system-ui,Arial,sans-serif;
}
.pos-bottomright .tca11y-panel,.pos-bottomleft .tca11y-panel{bottom:64px;top:auto;}
.pos-topright .tca11y-panel,.pos-topleft .tca11y-panel{top:64px;bottom:auto;}
.pos-bottomright .tca11y-panel,.pos-topright .tca11y-panel{right:0;left:auto;}
.pos-bottomleft .tca11y-panel,.pos-topleft .tca11y-panel{left:0;right:auto;}
/* middle: open to the SIDE of the button, vertically centred (never downward) */
.pos-middleright .tca11y-panel{right:64px;left:auto;top:50%;bottom:auto;transform:translateY(-50%);}
.pos-middleleft .tca11y-panel{left:64px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);}
.tca11y-panel[hidden]{display:none;}
.tca11y-panel h2{margin:0 0 2px;font-size:1.1rem;}
.tca11y-note{margin:0 0 10px;font-size:.78rem;color:#555;}
.tca11y-group{margin:10px 0 4px;font-size:.85rem;font-weight:700;color:var(--tca11y-accent);border-top:1px solid #eee;padding-top:8px;}
.tca11y-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;}
.tca11y-row > span{flex:1;}
.tca11y-panel button{font:inherit;cursor:pointer;}
.tca11y-step button,.tca11y-align button{padding:6px 10px;border:1px solid var(--tca11y-accent);background:#fff;color:var(--tca11y-accent);border-radius:6px;}
.tca11y-align button[aria-pressed="true"]{background:var(--tca11y-accent);color:#fff;}
.tca11y-step,.tca11y-align{display:flex;align-items:center;gap:6px;}
.tca11y-step output{min-width:64px;text-align:center;font-weight:700;}

/* toggle switch */
.tca11y-switch{position:relative;width:48px;height:26px;border-radius:13px;border:none;background:#c4c4c4;padding:0;flex:0 0 auto;transition:background .15s;}
.tca11y-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .15s;}
.tca11y-switch[aria-pressed="true"]{background:var(--tca11y-accent);}
.tca11y-switch[aria-pressed="true"]::after{left:25px;}

.tca11y-swatches{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0;}
.tca11y-swatch{width:24px;height:24px;border-radius:50%;border:1px solid #999;cursor:pointer;padding:0;}
.tca11y-swatch.tca11y-clear{background:#fff;color:#333;border-style:dashed;width:auto;border-radius:6px;padding:2px 8px;}
.tca11y-panel select{font:inherit;max-width:170px;padding:5px;border:1px solid #888;border-radius:6px;}
.tca11y-reset{width:100%;margin-top:12px;padding:8px;border:1px solid #888;background:#fff;color:#333;border-radius:6px;}
#tca11y-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2147483002;background:#111;color:#fff;padding:10px 16px;border-radius:8px;font:14px sans-serif;max-width:90vw;}

/* ── Reading magnifier + guide ─────────────────────────────────── */
#tca11y-magnifier{position:fixed;z-index:2147483001;pointer-events:none;max-width:60ch;
  background:#fffde7;color:#111;border:2px solid var(--tca11y-accent);border-radius:6px;padding:8px 12px;
  font-size:24px;line-height:1.4;box-shadow:0 4px 16px rgba(0,0,0,.3);display:none;}
#tca11y-guide{position:fixed;z-index:2147483001;left:0;right:0;height:2.4em;pointer-events:none;
  background:rgba(255,235,59,.18);border-top:2px solid rgba(0,0,0,.55);border-bottom:2px solid rgba(0,0,0,.55);display:none;}

/* ── Effects ───────────────────────────────────────────────────── */
html.tca11y-readfont body,html.tca11y-readfont p,html.tca11y-readfont li,html.tca11y-readfont a,
html.tca11y-readfont span,html.tca11y-readfont td,html.tca11y-readfont h1,html.tca11y-readfont h2,
html.tca11y-readfont h3,html.tca11y-readfont h4,html.tca11y-readfont h5,html.tca11y-readfont h6,
html.tca11y-readfont label,html.tca11y-readfont button,html.tca11y-readfont input,html.tca11y-readfont textarea{
  font-family:Verdana,Tahoma,"Segoe UI",sans-serif !important;
}
html.tca11y-dysfont body,html.tca11y-dysfont p,html.tca11y-dysfont li,html.tca11y-dysfont a,
html.tca11y-dysfont span,html.tca11y-dysfont td,html.tca11y-dysfont h1,html.tca11y-dysfont h2,
html.tca11y-dysfont h3,html.tca11y-dysfont h4,html.tca11y-dysfont h5,html.tca11y-dysfont h6,
html.tca11y-dysfont label,html.tca11y-dysfont button{
  font-family:"OpenDyslexic","Comic Sans MS",Verdana,sans-serif !important;letter-spacing:.03em !important;
}
/* restore icon fonts (Material/FontAwesome ligatures + icon elements) */
html.tca11y-readfont i,html.tca11y-readfont .fa,html.tca11y-readfont [class*="icon"],
html.tca11y-readfont [class*="fa-"],html.tca11y-readfont [class*="material-icons"],
html.tca11y-dysfont i,html.tca11y-dysfont .fa,html.tca11y-dysfont [class*="icon"],
html.tca11y-dysfont [class*="fa-"],html.tca11y-dysfont [class*="material-icons"]{font-family:revert !important;letter-spacing:normal !important;}

html.tca11y-hltitles h1,html.tca11y-hltitles h2,html.tca11y-hltitles h3,
html.tca11y-hltitles h4,html.tca11y-hltitles h5,html.tca11y-hltitles h6{
  outline:2px dashed var(--tca11y-accent) !important;outline-offset:2px;background:rgba(29,78,216,.06) !important;
}
html.tca11y-hllinks a{text-decoration:underline !important;outline:1px solid var(--tca11y-accent) !important;outline-offset:1px;}

/* filters go on BODY, not html — the widget lives under <html> (outside body),
   so a filter containing-block on body never traps/​tints the widget. */
html.tca11y-highcontrast body{filter:contrast(1.3);}
html.tca11y-mono body{filter:grayscale(1);}
html.tca11y-mono.tca11y-highcontrast body{filter:grayscale(1) contrast(1.3);}

/* dark = invert the page (body), then counter-invert media */
html.tca11y-dark body{background:#fff !important;filter:invert(1) hue-rotate(180deg);}
html.tca11y-dark img,html.tca11y-dark video,html.tca11y-dark picture,html.tca11y-dark iframe,
html.tca11y-dark [style*="background-image"]{filter:invert(1) hue-rotate(180deg);}

/* light = bright, high-readability: white page, black text */
html.tca11y-light body{background:#fff !important;}
html.tca11y-light body,html.tca11y-light p,html.tca11y-light li,html.tca11y-light span,html.tca11y-light td,
html.tca11y-light h1,html.tca11y-light h2,html.tca11y-light h3,html.tca11y-light h4,html.tca11y-light h5,html.tca11y-light h6,
html.tca11y-light label,html.tca11y-light dd,html.tca11y-light dt{color:#000 !important;}
html.tca11y-light a{color:#0036c7 !important;}
html.tca11y-light #tca11y-overlay-root,html.tca11y-light #tca11y-overlay-root *{color:revert;}

html.tca11y-stopanim *,html.tca11y-stopanim *::before,html.tca11y-stopanim *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important;
}
html.tca11y-hideimg img,html.tca11y-hideimg picture,html.tca11y-hideimg video{visibility:hidden !important;}
html.tca11y-hideimg body{background-image:none !important;}
html.tca11y-hideimg main,html.tca11y-hideimg section,html.tca11y-hideimg header,html.tca11y-hideimg div,
html.tca11y-hideimg a,html.tca11y-hideimg span,html.tca11y-hideimg li{background-image:none !important;}

html.tca11y-bigcursor,html.tca11y-bigcursor *{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M4 2l16 9-7 1 4 8-3 1-4-8-6 4z" fill="black" stroke="white" stroke-width="1.2"/></svg>') 2 2,auto !important;
}

html.tca11y-focus :focus,html.tca11y-focus :focus-visible{outline:3px solid #e74c3c !important;outline-offset:2px !important;box-shadow:0 0 0 3px rgba(231,76,60,.4) !important;}

html.tca11y-align-left body,html.tca11y-align-left p,html.tca11y-align-left li,html.tca11y-align-left td,
html.tca11y-align-left h1,html.tca11y-align-left h2,html.tca11y-align-left h3,html.tca11y-align-left h4,html.tca11y-align-left h5,html.tca11y-align-left h6{text-align:left !important;}
html.tca11y-align-center body,html.tca11y-align-center p,html.tca11y-align-center li,html.tca11y-align-center td,
html.tca11y-align-center h1,html.tca11y-align-center h2,html.tca11y-align-center h3,html.tca11y-align-center h4,html.tca11y-align-center h5,html.tca11y-align-center h6{text-align:center !important;}
html.tca11y-align-right body,html.tca11y-align-right p,html.tca11y-align-right li,html.tca11y-align-right td,
html.tca11y-align-right h1,html.tca11y-align-right h2,html.tca11y-align-right h3,html.tca11y-align-right h4,html.tca11y-align-right h5,html.tca11y-align-right h6{text-align:right !important;}

html.tca11y-hoverhighlight .tca11y-hovered{outline:3px solid #ffbf47 !important;outline-offset:1px;}
.tca11y-bionic-b{font-weight:700;}