/**
 * SGKEAAWidget — Front-office accessibility effects applied to the HOST page.
 *
 * The widget chrome (button + panel) now lives inside a Shadow DOM and is
 * styled by views/css/widget.css. This stylesheet only contains the effects
 * that must reach the storefront itself: contrast, spacing, readable font,
 * highlights, animation/image control, focus, cursor, reading aids, color
 * tint, brightness, night mode and the text-to-speech caption.
 *
 * The single light-DOM element we add is #sgk-eaa-host (the shadow host); it
 * is excluded from inherited effects so the panel is never recolored or
 * re-fonted by the host page.
 *
 * @author    SwissGeek
 * @copyright 2026 SwissGeek
 * @license   https://opensource.org/licenses/AFL-3.0  Academic Free License 3.0 (AFL-3.0)
 */

/* ----------------------------------------------------- embedded font */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/opendyslexic-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/opendyslexic-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------- shared variables */
:root {
  --sgk-eaa-primary: #1a1a1a;
  --sgk-eaa-secondary: #ffffff;
  --sgk-eaa-auxiliar: #f0f0f0;
  --sgk-eaa-text: #1a1a1a;
  --sgk-eaa-sys: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* shadow host anchor (only light-DOM node we own) */
#sgk-eaa-host { position: fixed; z-index: 2147483645; }

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

/* ============================ content effects ========================= */
/* filtered wrapper (color-vision + contrast invert/sepia/mono + brightness + night) */
#sgk-eaa-canvas { isolation: isolate; }

/* high contrast (dark) — host excluded so the panel keeps its own colors */
html.sgk-eaa-contrast body :is(div, section, article, header, footer, nav, aside, main, p, span, li, ul, ol, dl, dd, dt, td, th, table, h1, h2, h3, h4, h5, h6, form, label, blockquote, figure, figcaption):not(#sgk-eaa-host) {
  background-color: #000 !important; color: #fff !important; border-color: #555 !important;
}
html.sgk-eaa-contrast body a { color: #ffd54a !important; }
html.sgk-eaa-contrast body img,
html.sgk-eaa-contrast body picture { background: #000 !important; }

/* text spacing */
html.sgk-eaa-spacing body :is(p, li, dd, dt, blockquote, h1, h2, h3, h4, h5, h6, a, span, td, th, label, figcaption):not(#sgk-eaa-host) {
  line-height: var(--sgk-eaa-lh, 1.6) !important;
  letter-spacing: var(--sgk-eaa-ls, .02em) !important;
  word-spacing: var(--sgk-eaa-ws, .08em) !important;
}
html.sgk-eaa-spacing body p { margin-bottom: var(--sgk-eaa-ps, 1.4em) !important; }

/* readable font (dyslexia) — host excluded so the panel stays in system font */
html.sgk-eaa-font-dys body :is(p, li, a, span, h1, h2, h3, h4, h5, h6, td, th, label, button, input, select, textarea, div):not(#sgk-eaa-host) {
  font-family: 'OpenDyslexic', var(--sgk-eaa-sys, sans-serif) !important;
}

/* link highlight */
html.sgk-eaa-links a:not(.sgk-eaa-skip) {
  text-decoration: underline !important; text-underline-offset: 2px;
  outline: 2px solid #0a72c4 !important; outline-offset: 1px;
  background: rgba(10, 114, 196, .08) !important;
}

/* heading highlight */
html.sgk-eaa-headings :is(h1, h2, h3, h4, h5, h6) {
  outline: 2px dashed #c0392b !important; outline-offset: 3px;
}

/* stop animations */
html.sgk-eaa-noanim *,
html.sgk-eaa-noanim *::before,
html.sgk-eaa-noanim *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* hide images (skip link kept usable) */
html.sgk-eaa-noimg body :is(img, picture, video, canvas, svg, iframe) { display: none !important; }
html.sgk-eaa-noimg .sgk-eaa-skip { display: inline-flex !important; }

/* stronger focus */
html.sgk-eaa-focus :focus,
html.sgk-eaa-focus :focus-visible {
  outline: 3px solid #0a72c4 !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(10, 114, 196, .35) !important;
}

/* large cursor */
body.sgk-eaa-bigcursor,
body.sgk-eaa-bigcursor * { cursor: var(--sgk-eaa-cursor), auto !important; }

/* color tint overlay (photophobia comfort) */
#sgk-eaa-tint {
  position: fixed; inset: 0; pointer-events: none; z-index: 2147483550;
  mix-blend-mode: multiply; display: none;
}
#sgk-eaa-tint.is-on { display: block; }
#sgk-eaa-tint.tint-warm { background: #ffdca8; }
#sgk-eaa-tint.tint-cool { background: #a9c8ff; }
#sgk-eaa-tint.tint-rose { background: #ffc6d9; }
#sgk-eaa-tint.tint-green { background: #b9e6c4; }

/* night mode — the wrapper filter is set inline; here we re-correct media */
html.sgk-eaa-night #sgk-eaa-canvas :is(img, picture, video, canvas, svg, iframe, [style*="background-image"]) {
  filter: invert(1) hue-rotate(180deg);
}

/* reading guide & mask */
#sgk-eaa-guide {
  position: fixed; left: 0; right: 0; height: 0; top: 0;
  border-top: 3px solid rgba(214, 40, 40, .6);
  background: rgba(214, 40, 40, .06);
  pointer-events: none; z-index: 2147483600; display: none;
}
#sgk-eaa-mask { position: fixed; inset: 0; pointer-events: none; z-index: 2147483600; display: none; }
.sgk-eaa-mask-top { position: absolute; left: 0; right: 0; top: 0; height: 0; background: rgba(0, 0, 0, .55); }
.sgk-eaa-mask-bot { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0, 0, 0, .55); }

/* skip link */
.sgk-eaa-skip {
  position: fixed; top: -64px; left: 8px; z-index: 2147483646;
  padding: 10px 16px; background: var(--sgk-eaa-primary, #111); color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif; border-radius: 0 0 8px 8px; text-decoration: none;
  transition: top .15s ease;
}
.sgk-eaa-skip:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* text-to-speech caption (karaoke) */
#sgk-eaa-caption {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  max-width: min(720px, 92vw); z-index: 2147483560; display: none;
  padding: 12px 18px; border-radius: 12px;
  background: rgba(17, 17, 20, .94); color: #fff;
  font: 500 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45); text-align: center;
}
#sgk-eaa-caption.is-on { display: block; }
#sgk-eaa-caption mark {
  background: #ffd54a; color: #111; border-radius: 4px; padding: 0 2px;
}

/* reduced motion for overlays */
@media (prefers-reduced-motion: reduce) {
  .sgk-eaa-skip { transition: none !important; }
}

/* RTL */
[dir="rtl"] .sgk-eaa-skip { left: auto; right: 8px; }

/* Windows High Contrast Mode / forced-colors — widget-owned page elements */
@media (forced-colors: active) {
  .sgk-eaa-skip { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  #sgk-eaa-caption { background: Canvas; color: CanvasText; border: 1px solid CanvasText; forced-color-adjust: none; }
  #sgk-eaa-caption mark { background: Highlight; color: HighlightText; }
}