/*
 * Shared modules - a11y: the settings button and dialog, and a generic effect for every
 * setting (html[data-a11y-<name>]). A template that styles a setting itself names it in
 * html[data-a11y-own] (module option 'own'), which turns the generic rule here off.
 * Position of the button: --mws-fab-bottom, --mws-fab-right (or --mws-fab-left with --mws-fab-right: auto).
 */

/* ---- button ---- */
.mws-fab {
  position: fixed; z-index: 1040; right: var(--mws-fab-right, 16px); left: var(--mws-fab-left, auto); bottom: var(--mws-fab-bottom, 16px);
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: var(--mws-radius-btn);
  border: 2px solid #fff; background: #1f4fd1; color: #fff; cursor: pointer; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .5);
  transition: transform .25s ease, background-color .25s, bottom .5s var(--mws-ease);
}
.mws-fab .mws-icon { width: 26px; height: 26px; }
.mws-fab:hover { background: #173fa8; transform: scale(1.06); }
.mws-fab:focus-visible { outline: 3px solid #1f4fd1; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }

/* ---- dialog ---- */
.mws-a11y { width: min(820px, calc(100vw - 32px)); transform-origin: 100% 100%; }
.mws-a11y:not([open]) { transform: translate(6%, 10%) scale(.82); }
@starting-style { .mws-a11y[open] { transform: translate(6%, 10%) scale(.82); } }
@media (max-width: 640px) {
  .mws-a11y:not([open]) { transform: translateY(100%); }
  @starting-style { .mws-a11y[open] { transform: translateY(100%); } }
}
.mws-group { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.mws-group legend { display: flex; align-items: center; gap: 12px; float: none; width: auto; padding: 0; margin: 0 0 12px; font: 700 1rem/1.4 var(--mws-font); color: inherit; }
.mws-group legend .mws-icon { color: var(--mws-accent-text); }
.mws-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: calc(var(--mws-radius) * .6 + 4px); background: var(--mws-surface); border: 1px solid var(--mws-line); }
.mws-seg label { position: relative; margin: 0; }
.mws-seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.mws-seg span { display: grid; place-items: center; min-height: 44px; padding: 0 8px; border-radius: calc(var(--mws-radius) * .6); font-weight: 650; font-size: .92rem; text-align: center; transition: background-color .2s; }
.mws-seg input:checked + span { background: var(--mws-accent); color: var(--mws-on-accent); }
.mws-seg input:focus-visible + span { outline: 3px solid var(--mws-focus); outline-offset: 2px; }
.mws-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.mws-actions .mws-link { min-height: 44px; }

/* ================= effects (generic) ================= */
/* Text size: rem-based layouts scale from the root font size; a template whose text is in
   px handles 'text' itself. */
html[data-a11y-text="115"]:not([data-a11y-own~="text"]) { font-size: 115%; }
html[data-a11y-text="130"]:not([data-a11y-own~="text"]) { font-size: 130%; }
html[data-a11y-text="150"]:not([data-a11y-own~="text"]) { font-size: 150%; }

/* High contrast: black background, white text, yellow links (photos stay as they are, so
   white text drawn on them still reads) */
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) body,
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) body *:not(img):not(video):not(svg):not(svg *) {
  background-color: #000 !important; color: #fff !important; border-color: #fff !important;
  text-shadow: none !important; box-shadow: none !important;
}
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) body a,
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) body a * { color: #ff0 !important; }
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) body :focus-visible { outline: 3px solid #0ff !important; outline-offset: 2px; }
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) .mws-track { border-color: #fff !important; }
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) .mws-switch input:checked ~ .mws-track,
html[data-a11y-contrast="on"]:not([data-a11y-own~="contrast"]) .mws-seg input:checked + span { background-color: #ff0 !important; color: #000 !important; }

/* Highlight links */
html[data-a11y-links="on"]:not([data-a11y-own~="links"]) a,
html[data-a11y-links="on"]:not([data-a11y-own~="links"]) button { text-decoration: underline !important; text-decoration-thickness: 2px !important; outline: 2px dashed currentColor; outline-offset: 2px; }

/* Readable font (icon fonts and SVG icons are left alone) */
html[data-a11y-font="on"]:not([data-a11y-own~="font"]) body,
html[data-a11y-font="on"]:not([data-a11y-own~="font"]) body *:not(i):not([class*="fa-"]):not(.mws-icon):not(svg *) {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif !important; font-style: normal; text-transform: none !important;
}

/* Text spacing (WCAG 1.4.12 values) */
html[data-a11y-spacing="on"]:not([data-a11y-own~="spacing"]) body *:not(svg):not(svg *) {
  line-height: 1.6 !important; letter-spacing: .08em !important; word-spacing: .16em !important;
}
html[data-a11y-spacing="on"]:not([data-a11y-own~="spacing"]) body p { margin-bottom: 2em !important; }

/* Stop animations (templates also hear MWS.on('a11y') to stop slideshows) */
html[data-a11y-motion="on"]:not([data-a11y-own~="motion"]) *,
html[data-a11y-motion="on"]:not([data-a11y-own~="motion"]) *::before,
html[data-a11y-motion="on"]:not([data-a11y-own~="motion"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Big cursor */
html[data-a11y-cursor="on"]:not([data-a11y-own~="cursor"]),
html[data-a11y-cursor="on"]:not([data-a11y-own~="cursor"]) * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1-3 7z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

/* Grayscale: on the root element fixed bars keep working; dialogs sit above it */
html[data-a11y-gray="on"]:not([data-a11y-own~="gray"]),
html[data-a11y-gray="on"]:not([data-a11y-own~="gray"]) dialog { filter: grayscale(1); }

/* Hide images (opacity, not visibility: alt texts stay readable) */
html[data-a11y-images="on"]:not([data-a11y-own~="images"]) body img,
html[data-a11y-images="on"]:not([data-a11y-own~="images"]) body video,
html[data-a11y-images="on"]:not([data-a11y-own~="images"]) body picture { opacity: 0 !important; }

/* Align text left */
html[data-a11y-align="on"]:not([data-a11y-own~="align"]) body,
html[data-a11y-align="on"]:not([data-a11y-own~="align"]) body * { text-align: left !important; }

@media print { .mws-fab { display: none !important; } }
@media (forced-colors: active) { .mws-fab { border: 2px solid CanvasText; } }