/*
 * a11y-effects.css - what each accessibility setting does to the page.
 * State is read from data-uwa-* attributes on <html> (written by a11y-boot.js / a11y.js; absent = off):
 *   contrast=invert|dark|light, links, text=1-4, spacing=1-3, pause, hideimg, dyslexia,
 *   cursor=big|mask|guide, tooltips, lh=1-3, align=left|right|center|justify, sat=low|high|gray.
 * Never styles the widget (.uwa-fab, .uwa-panel and their content) or the helper elements made by
 * a11y-effects.js (.uwa-mask, .uwa-guide, .uwa-tip, .uwa-alt). :where() keeps specificity flat, so
 * among the !important rules below the later one wins.
 */

/* ===== Helper elements (created by a11y-effects.js) ===== */
.uwa-mask,
.uwa-guide,
.uwa-tip {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
}
.uwa-mask[hidden],
.uwa-guide[hidden],
.uwa-tip[hidden] { display: none !important; }

/* 8. Reading mask: two dark sheets leave a 140px band clear around the pointer */
.uwa-mask {
  right: 0;
  z-index: 150;
  background: rgba(0, 0, 0, .6);
}
.uwa-mask-top { height: 0; }
.uwa-mask-bottom { top: 100%; bottom: 0; }

/* 8. Reading guide: a bar 18px under the pointer, its notch points up at the pointer */
.uwa-guide {
  z-index: 150;
  box-sizing: border-box;
  width: min(560px, 100vw - 24px);
  height: 8px;
  background: #0A0910;
  border: 2px solid #FFE14D;
  border-radius: 6px;
}
.uwa-guide::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--uwa-gx, 50%);
  margin-left: -7px;
  border: solid transparent;
  border-width: 0 7px 7px;
  border-bottom-color: #FFE14D;
}

/* 9. Tooltip bubble */
.uwa-tip {
  z-index: 170;
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, 90vw);
  padding: 10px 14px;
  border-radius: 12px;
  background: #0A0910;
  color: #fff;
  font: 500 14px/20px 'Fira Sans', sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 6. Alt-text label shown in place of a hidden image */
.uwa-alt { display: none; }


/* ===== 1 + 12. Colour filters (screen only, so a print-out is never inverted) ===== */
@media screen {
  html[data-uwa-contrast="invert"] { --uwa-f-inv: invert(1) hue-rotate(180deg); }
  html[data-uwa-sat="low"] { --uwa-f-sat: saturate(.5); }
  html[data-uwa-sat="high"] { --uwa-f-sat: saturate(2); }
  html[data-uwa-sat="gray"] { --uwa-f-sat: grayscale(1); }

  html:is([data-uwa-contrast="invert"], [data-uwa-sat="low"], [data-uwa-sat="high"], [data-uwa-sat="gray"]) {
    filter: var(--uwa-f-inv,) var(--uwa-f-sat,) !important;
  }

  /* The top layer (modal dialogs, open popovers, fullscreen) is painted outside <html>, so the filter
     above does not reach it. Site dialogs get the same filter; a fullscreen image or video gets only
     the saturation part. The widget panel (a showModal() dialog) gets neither: it keeps its colours. */
  html:is([data-uwa-contrast="invert"], [data-uwa-sat="low"], [data-uwa-sat="high"], [data-uwa-sat="gray"]) :where(:modal, :popover-open):not(.uwa-panel) {
    filter: var(--uwa-f-inv,) var(--uwa-f-sat,) !important;
  }
  html:is([data-uwa-contrast="invert"], [data-uwa-sat="low"], [data-uwa-sat="high"], [data-uwa-sat="gray"]) :is(img, picture, video, iframe, svg.art, [data-uwa-img]):where(:modal, :popover-open) {
    filter: var(--uwa-f-sat,) !important;
  }

  /* Invert: turn photos, videos, maps, line art, the widget button and our helpers back, so they keep
     their colours. Only the outermost one (an <img> inside <picture> is turned back once, by the picture).
     Not the panel: it is in the top layer, outside the html filter, so turning it back would invert it. */
  html[data-uwa-contrast="invert"] :is(img, picture, video, iframe, svg.art, [data-uwa-img], .uwa-fab, .uwa-mask, .uwa-guide, .uwa-tip, .uwa-alt):not(:is(picture, [data-uwa-img], .uwa-fab, .uwa-panel) *):not(:where(:modal, :popover-open)) {
    filter: invert(1) hue-rotate(180deg) !important;
  }


  /* ===== 1. Dark and light contrast ===== */
  html[data-uwa-contrast="dark"] {
    --uwa-fx-bg: #000;
    --uwa-fx-fg: #fff;
    --uwa-fx-link: #FFE14D;
    --uwa-fx-line: #fff;
    --uwa-fx-focus: #FFE14D;
    --uwa-fx-art: brightness(0) invert(1);
    color-scheme: dark;
  }
  html[data-uwa-contrast="light"] {
    --uwa-fx-bg: #fff;
    --uwa-fx-fg: #000;
    --uwa-fx-link: #0000B3;
    --uwa-fx-line: #000;
    --uwa-fx-focus: #0000B3;
    --uwa-fx-art: brightness(0);
    color-scheme: light;
  }
  /* color-scheme is inherited: keep the widget's native controls (its radio buttons) as designed. */
  :where(html[data-uwa-contrast]) :where(.uwa-fab, .uwa-panel) { color-scheme: light; }

  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]),
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body {
    background: var(--uwa-fx-bg) !important;
    color: var(--uwa-fx-fg) !important;
  }

  /* Every element in the page: no fills, no shadows, one text colour, one border colour.
     Images and the like are left untouched. */
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(:not(.uwa-fab, .uwa-fab *, .uwa-panel, .uwa-panel *, .uwa-tip, .uwa-tip *, .uwa-mask, .uwa-guide, .uwa-alt, img, picture, picture *, video, video *, iframe, canvas, object, embed, svg *, [data-uwa-img], input[type="checkbox"], input[type="radio"])) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-color: var(--uwa-fx-line) !important;
    color: var(--uwa-fx-fg) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(:not(.uwa-fab, .uwa-fab *, .uwa-panel, .uwa-panel *, .uwa-tip, .uwa-tip *, .uwa-mask, .uwa-guide, .uwa-alt, svg *))::before,
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(:not(.uwa-fab, .uwa-fab *, .uwa-panel, .uwa-panel *, .uwa-tip, .uwa-tip *, .uwa-mask, .uwa-guide, .uwa-alt, svg *))::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(li, summary):where(:not(.uwa-panel *))::marker {
    color: inherit !important;
  }

  /* Links and link-like buttons (once their fills are gone, buttons read as links): link colour + underline. */
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(a[href], [role="link"], button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]):where(:not(.uwa-fab, .uwa-panel, .uwa-panel *)) {
    color: var(--uwa-fx-link) !important;
    text-decoration-line: underline !important;
    text-decoration-color: currentColor !important;
  }
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(a[href], [role="link"], button, [role="button"]):where(:not(.uwa-fab, .uwa-panel, .uwa-panel *)) :where(:not(img, picture, picture *, video, iframe, canvas, svg *, .uwa-alt)) {
    color: var(--uwa-fx-link) !important;
  }

  /* Form fields: page colour inside, text colour, a visible frame. */
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="file"]), select, textarea, option, optgroup):where(:not(.uwa-panel *)) {
    background-color: var(--uwa-fx-bg) !important;
    color: var(--uwa-fx-fg) !important;
    -webkit-text-fill-color: var(--uwa-fx-fg) !important;
  }
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="file"]), select, textarea):where(:not(.uwa-panel *)) {
    border: 1px solid var(--uwa-fx-line) !important;
  }
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(input[type="checkbox"], input[type="radio"]):where(:not(.uwa-panel *)) {
    accent-color: var(--uwa-fx-link);
  }
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(:not(.uwa-panel *))::placeholder {
    color: var(--uwa-fx-fg) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: .7 !important;
  }

  /* Floating layers (sticky header, menus, drawer, dialogs, dock, banners) stay opaque and framed. */
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body [data-uwa-float]:where(:not(.uwa-fab, .uwa-panel)) {
    background-color: var(--uwa-fx-bg) !important;
    border: 1px solid var(--uwa-fx-line) !important;
  }

  /* Icons (svg.i) already follow currentColor; line art is redrawn in the text colour. */
  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body svg.art:where(:not(.uwa-fab *, .uwa-panel *)) {
    filter: var(--uwa-fx-art) !important;
  }

  html:is([data-uwa-contrast="dark"], [data-uwa-contrast="light"]) body :where(:not(.uwa-fab, .uwa-panel, .uwa-panel *)):focus-visible {
    outline: 2px solid var(--uwa-fx-focus) !important;
    outline-offset: 2px !important;
  }
}


/* ===== 2. Highlight links ===== */
html[data-uwa-links] body :where(a):where(:not(.uwa-fab *, .uwa-panel *)) {
  color: #000 !important;
  -webkit-text-fill-color: currentColor !important;
  background-color: #FFE14D !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}
html[data-uwa-links] body :where(a):where(:not(.uwa-fab *, .uwa-panel *)) :where(:not(img, picture, picture *, video, iframe, canvas, svg *, .uwa-alt)) {
  color: #000 !important;
  -webkit-text-fill-color: currentColor !important;
}


/* ===== 3. Bigger text (every size on the site is in rem) ===== */
html[data-uwa-text="1"] { font-size: 112.5% !important; }
html[data-uwa-text="2"] { font-size: 125% !important; }
html[data-uwa-text="3"] { font-size: 137.5% !important; }
html[data-uwa-text="4"] { font-size: 150% !important; }


/* ===== 4. Text spacing ===== */
html[data-uwa-spacing="1"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6, a, span, strong, em, small, button):where(:not(.uwa-fab, .uwa-fab *, .uwa-panel, .uwa-panel *, .uwa-tip, .uwa-tip *, .uwa-alt)) {
  letter-spacing: .04em !important;
  word-spacing: .08em !important;
}
html[data-uwa-spacing="2"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6, a, span, strong, em, small, button):where(:not(.uwa-fab, .uwa-fab *, .uwa-panel, .uwa-panel *, .uwa-tip, .uwa-tip *, .uwa-alt)) {
  letter-spacing: .08em !important;
  word-spacing: .16em !important;
}
html[data-uwa-spacing="3"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6, a, span, strong, em, small, button):where(:not(.uwa-fab, .uwa-fab *, .uwa-panel, .uwa-panel *, .uwa-tip, .uwa-tip *, .uwa-alt)) {
  letter-spacing: .12em !important;
  word-spacing: .24em !important;
}
/* svg <text> would inherit the spacing */
html[data-uwa-spacing] body svg,
html[data-uwa-spacing] body svg * {
  letter-spacing: normal !important;
  word-spacing: normal !important;
}


/* ===== 5. Pause animations (videos are paused by a11y-effects.js) ===== */
html[data-uwa-pause],
html[data-uwa-pause] *,
html[data-uwa-pause] *::before,
html[data-uwa-pause] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-uwa-pause] { scroll-behavior: auto !important; }
html[data-uwa-pause]::view-transition-group(*),
html[data-uwa-pause]::view-transition-old(*),
html[data-uwa-pause]::view-transition-new(*) {
  animation: none !important;
}


/* ===== 6. Hide images (the box keeps its size; a11y-effects.js puts the alt text in it) ===== */
html[data-uwa-hideimg] :where(img, picture, video, svg.art, [data-uwa-img]):where(:not(.uwa-fab *, .uwa-panel *)) {
  visibility: hidden !important;
}
html[data-uwa-hideimg] .uwa-alt-rel { position: relative !important; }
html[data-uwa-hideimg] .uwa-alt {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  text-align: center;
  font: 600 14px/1.35 'Fira Sans', sans-serif;
  letter-spacing: normal;
  color: #1D2B2A;
  background: #F4EEE7;
  border: 2px dashed #8E4F55;
  border-radius: inherit;
  overflow: hidden;
  overflow-wrap: anywhere;
  visibility: visible !important;
}


/* ===== 7. Dyslexia-friendly font ===== */
html[data-uwa-dyslexia] body,
html[data-uwa-dyslexia] body :where(:not(svg *, code, code *, pre, pre *, kbd, kbd *, .uwa-fab, .uwa-fab *, .uwa-panel, .uwa-panel *, .uwa-tip, .uwa-tip *, .uwa-alt)) {
  font-family: 'Lexend', 'Fira Sans', system-ui, sans-serif !important;
}


/* ===== 8. Big cursor (the mask and the guide are drawn by a11y-effects.js) ===== */
html[data-uwa-cursor="big"],
html[data-uwa-cursor="big"] * {
  cursor: url('/assets/img/a11y/cursor.svg') 4 2, auto !important;
}
html[data-uwa-cursor="big"] :is(a, button, [role="button"], label, summary, select, input[type="checkbox"], input[type="radio"], input[type="button"], input[type="submit"], input[type="reset"]),
html[data-uwa-cursor="big"] :is(a, button, [role="button"], label, summary) * {
  cursor: url('/assets/img/a11y/cursor-hand.svg') 16 4, pointer !important;
}
html[data-uwa-cursor="big"] :is(textarea, input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="file"]), [contenteditable]:not([contenteditable="false"])) {
  cursor: text !important;
}


/* ===== 10. Line height ===== */
html[data-uwa-lh="1"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6):where(:not(.uwa-panel *)) { line-height: 1.5 !important; }
html[data-uwa-lh="2"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6):where(:not(.uwa-panel *)) { line-height: 1.75 !important; }
html[data-uwa-lh="3"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6):where(:not(.uwa-panel *)) { line-height: 2 !important; }


/* ===== 11. Text alignment ===== */
html[data-uwa-align="left"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6):where(:not(.uwa-panel *)) { text-align: left !important; }
html[data-uwa-align="right"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6):where(:not(.uwa-panel *)) { text-align: right !important; }
html[data-uwa-align="center"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6):where(:not(.uwa-panel *)) { text-align: center !important; }
html[data-uwa-align="justify"] body :where(p, li, dt, dd, td, th, blockquote, figcaption, label, summary, h1, h2, h3, h4, h5, h6):where(:not(.uwa-panel *)) { text-align: justify !important; }