/* =========================================================
   Ebony Library — Accessibility widget
   Self-contained. Colours pulled from the site palette:
   navy #14100D · gold #D4A63C · coral #0E6B4C · cream #F4EEE6
   The widget lives OUTSIDE #page-wrap so page filters
   (contrast / saturation) never touch the widget itself.
   ========================================================= */
:root{
  --a11y-ink:#14100D; --a11y-navy2:#16375f; --a11y-gold:#D4A63C;
  --a11y-gold-soft:#E0B44E; --a11y-emerald:#0E6B4C; --a11y-cream:#F4EEE6;
  --a11y-paper:#FAF6EF; --a11y-line:#D8CCBA; --a11y-text:#2A1E15;
}

/* ---------- Launch button ---------- */
#a11y-toggle{
  position:fixed; right:22px; bottom:22px; z-index:2147483000;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--a11y-ink); color:#fff; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px -8px rgba(13,35,64,.55), 0 0 0 3px rgba(217,169,74,.35);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#a11y-toggle:hover{ transform:translateY(-2px) scale(1.04); background:var(--a11y-navy2);
  box-shadow:0 14px 32px -8px rgba(13,35,64,.6), 0 0 0 3px rgba(217,169,74,.55); }
#a11y-toggle:focus-visible{ outline:3px solid var(--a11y-gold); outline-offset:3px; }
#a11y-toggle svg{ width:32px; height:32px; display:block; }
#a11y-toggle svg path, #a11y-toggle svg circle{ fill:currentColor; }

@media (max-width:640px){
  #a11y-toggle{ width:50px; height:50px; right:16px; bottom:16px; }
  #a11y-toggle svg{ width:28px; height:28px; }
}

/* ---------- Panel ---------- */
#a11y-panel{
  position:fixed; right:22px; bottom:88px; z-index:2147483000;
  width:360px; max-width:calc(100vw - 32px); max-height:calc(100vh - 120px);
  overflow-y:auto; background:var(--a11y-paper); color:var(--a11y-text);
  border:1px solid var(--a11y-line); border-radius:16px;
  box-shadow:0 30px 70px -30px rgba(13,35,64,.6);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:14px; line-height:1.5;
  transform:translateY(12px) scale(.98); opacity:0; visibility:hidden;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
#a11y-panel.open{ transform:none; opacity:1; visibility:visible; }
@media (max-width:640px){ #a11y-panel{ right:16px; bottom:78px; } }

#a11y-panel .a11y-head{
  position:sticky; top:0; background:var(--a11y-ink); color:#fff;
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between;
  border-radius:16px 16px 0 0;
}
#a11y-panel .a11y-head h2{ font-family:'Ojuju','Trebuchet MS',sans-serif;
  font-size:18px; font-weight:500; margin:0; display:flex; align-items:center; gap:10px; }
#a11y-panel .a11y-head h2 svg{ width:22px; height:22px; fill:var(--a11y-gold-soft); }
#a11y-panel .a11y-close{ background:transparent; border:none; color:#fff; cursor:pointer;
  width:32px; height:32px; border-radius:8px; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
#a11y-panel .a11y-close:hover{ background:rgba(255,255,255,.12); }
#a11y-panel .a11y-close:focus-visible{ outline:2px solid var(--a11y-gold); outline-offset:2px; }

#a11y-panel .a11y-body{ padding:16px 18px 20px; }

/* Reset bar */
#a11y-panel .a11y-resetbar{ display:flex; gap:8px; margin-bottom:16px; }
#a11y-panel .a11y-resetbar button{ flex:1; padding:10px; border-radius:9px; cursor:pointer;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--a11y-line); background:#fff; color:var(--a11y-ink); }
#a11y-panel .a11y-resetbar button:hover{ border-color:var(--a11y-emerald); color:var(--a11y-emerald); }

#a11y-panel h3.a11y-group{ font-family:'Ojuju','Trebuchet MS',sans-serif;
  font-size:15px; color:var(--a11y-ink); font-weight:600; margin:18px 0 10px;
  padding-bottom:6px; border-bottom:1px solid var(--a11y-line); }

/* Toggle grid of feature tiles */
#a11y-panel .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#a11y-panel .a11y-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  text-align:left; padding:11px 12px; border-radius:11px; cursor:pointer;
  border:1px solid var(--a11y-line); background:#fff; color:var(--a11y-ink);
  font-size:12.5px; font-weight:500; line-height:1.3; min-height:64px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
#a11y-panel .a11y-tile .ic{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; color:var(--a11y-emerald); }
#a11y-panel .a11y-tile[aria-pressed="true"] .ic{ color:var(--a11y-gold-soft); }
#a11y-panel .a11y-tile .ic svg{ width:20px; height:20px; display:block; }
#a11y-panel .a11y-tile:hover{ border-color:var(--a11y-emerald); }
#a11y-panel .a11y-tile:focus-visible{ outline:2px solid var(--a11y-gold); outline-offset:2px; }
#a11y-panel .a11y-tile[aria-pressed="true"]{
  background:var(--a11y-ink); color:#fff; border-color:var(--a11y-ink);
  box-shadow:inset 0 0 0 2px var(--a11y-gold);
}
#a11y-panel .a11y-tile .state{ font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--a11y-emerald); font-weight:600; }
#a11y-panel .a11y-tile[aria-pressed="true"] .state{ color:var(--a11y-gold-soft); }

/* Stepper rows (font size, spacing, etc.) */
#a11y-panel .a11y-step{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border:1px solid var(--a11y-line); background:#fff;
  border-radius:11px; margin-bottom:8px; }
#a11y-panel .a11y-step .lbl{ font-weight:500; color:var(--a11y-ink); font-size:13px; }
#a11y-panel .a11y-step .ctrls{ display:flex; align-items:center; gap:6px; }
#a11y-panel .a11y-step button{ width:30px; height:30px; border-radius:8px; cursor:pointer;
  border:1px solid var(--a11y-line); background:var(--a11y-cream); color:var(--a11y-ink);
  font-size:17px; font-weight:600; line-height:1; display:flex; align-items:center; justify-content:center; }
#a11y-panel .a11y-step button:hover{ background:var(--a11y-gold-soft); border-color:var(--a11y-gold); }
#a11y-panel .a11y-step button:focus-visible{ outline:2px solid var(--a11y-gold); outline-offset:2px; }
#a11y-panel .a11y-step .val{ min-width:44px; text-align:center; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--a11y-emerald); font-size:13px; }

#a11y-panel .a11y-foot{ margin-top:18px; padding-top:14px; border-top:1px solid var(--a11y-line);
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
#a11y-panel .a11y-foot a{ color:var(--a11y-ink); font-weight:600; text-decoration:underline;
  text-underline-offset:2px; }
#a11y-panel .a11y-foot a:hover{ color:var(--a11y-emerald); }
#a11y-panel .a11y-foot .brand{ color:var(--a11y-text); opacity:.7; }

/* =========================================================
   EFFECT CLASSES — applied to <html> (documentElement)
   Page filters are scoped to #page-wrap so the widget is safe.
   ========================================================= */

/* Contrast / colour (filters on the page wrapper only) */
html.a11y-contrast-dark  #page-wrap{ filter:invert(1) hue-rotate(180deg); background:#000; }
html.a11y-contrast-dark  #page-wrap img,
html.a11y-contrast-dark  #page-wrap video{ filter:invert(1) hue-rotate(180deg); }
html.a11y-contrast-light #page-wrap{ filter:brightness(1.12) contrast(1.05); }
html.a11y-contrast-high  #page-wrap{ filter:contrast(1.35); }
html.a11y-monochrome     #page-wrap{ filter:grayscale(1); }
html.a11y-sat-high       #page-wrap{ filter:saturate(2.4); }
html.a11y-sat-low        #page-wrap{ filter:saturate(.45); }
/* combine gracefully when both a contrast + saturation set (last wins is fine) */

/* Highlight links */
html.a11y-hl-links #page-wrap a{
  text-decoration:underline !important; text-underline-offset:2px !important;
  outline:2px dashed var(--a11y-gold) !important; outline-offset:2px;
  background:rgba(217,169,74,.16) !important;
}
/* Highlight titles / headings */
html.a11y-hl-titles #page-wrap :is(h1,h2,h3,h4,h5,h6){
  outline:2px dashed var(--a11y-emerald) !important; outline-offset:3px;
  background:rgba(198,126,109,.10) !important;
}

/* Readable font — override typography with a clean legible stack */
html.a11y-readable-font #page-wrap :is(body,p,li,a,span,div,h1,h2,h3,h4,h5,h6,button,input,label,td,th,em,strong){
  font-family:"Segoe UI",Tahoma,Verdana,Arial,sans-serif !important;
  letter-spacing:.01em;
}
/* Dyslexia-friendly font */
html.a11y-dyslexia-font #page-wrap :is(body,p,li,a,span,div,h1,h2,h3,h4,h5,h6,button,input,label,td,th,em,strong){
  font-family:"Comic Sans MS","Trebuchet MS",Verdana,sans-serif !important;
  letter-spacing:.03em; word-spacing:.12em;
}

/* Text alignment overrides */
html.a11y-align-left   #page-wrap :is(p,li,h1,h2,h3,h4,h5,h6){ text-align:left !important; }
html.a11y-align-center #page-wrap :is(p,li,h1,h2,h3,h4,h5,h6){ text-align:center !important; }
html.a11y-align-right  #page-wrap :is(p,li,h1,h2,h3,h4,h5,h6){ text-align:right !important; }

/* Hide images */
html.a11y-hide-images #page-wrap :is(img,picture,svg,video,[style*="background-image"]){
  visibility:hidden !important;
}
html.a11y-hide-images #page-wrap :is(img,picture){ opacity:0 !important; }

/* Stop / pause animations & transitions */
html.a11y-stop-motion #page-wrap *,
html.a11y-stop-motion #page-wrap *::before,
html.a11y-stop-motion #page-wrap *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}

/* Big cursor (applies globally incl. widget — intentional) */
html.a11y-big-cursor,
html.a11y-big-cursor *{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M6 4 L6 40 L16 30 L23 44 L29 41 L22 27 L36 27 Z' fill='%230d2340' stroke='%23ffffff' stroke-width='2'/></svg>") 4 4, auto !important;
}

/* Highlight focus/hover for keyboard users */
html.a11y-focus-highlight #page-wrap a:focus,
html.a11y-focus-highlight #page-wrap button:focus,
html.a11y-focus-highlight #page-wrap input:focus,
html.a11y-focus-highlight #page-wrap select:focus,
html.a11y-focus-highlight #page-wrap textarea:focus,
html.a11y-focus-highlight #page-wrap [tabindex]:focus{
  outline:3px solid var(--a11y-gold) !important; outline-offset:2px !important;
}
html.a11y-focus-highlight #page-wrap a:hover,
html.a11y-focus-highlight #page-wrap button:hover{
  outline:2px solid var(--a11y-emerald) !important; outline-offset:2px;
}

/* Content scaling variables (set inline on <html>) */
#page-wrap :is(p,li,a,span,label,td,th,blockquote,em,strong){
  line-height:var(--a11y-line-height, inherit);
  letter-spacing:var(--a11y-letter-spacing, inherit);
}
html[data-a11y-font-scale] #page-wrap :is(p,li,a,span,label,td,th,blockquote,figcaption,em,strong,button,input){
  font-size:calc(1em * var(--a11y-font-scale, 1)) !important;
}

/* Reading guide (a bar that follows the cursor) */
#a11y-reading-guide{ position:fixed; left:0; width:100%; height:16px; z-index:2147482000;
  background:rgba(217,169,74,.55); border-top:2px solid var(--a11y-ink);
  border-bottom:2px solid var(--a11y-ink); pointer-events:none; display:none; }
html.a11y-reading-guide #a11y-reading-guide{ display:block; }

/* Reading mask (dims everything except a horizontal strip) */
#a11y-reading-mask{ position:fixed; inset:0; z-index:2147481000; pointer-events:none; display:none; }
#a11y-reading-mask .band{ position:absolute; left:0; width:100%; background:rgba(13,35,64,.62); }
#a11y-reading-mask .top{ top:0; } #a11y-reading-mask .bot{ bottom:0; }
html.a11y-reading-mask #a11y-reading-mask{ display:block; }

/* Respect users who already prefer reduced motion — nothing needed, site is light on motion */

/* Skip link (keyboard) */
.a11y-skip{ position:absolute; left:-9999px; top:0; z-index:2147483001;
  background:var(--a11y-ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-size:14px; text-decoration:none; }
.a11y-skip:focus{ left:0; }