/* The accessibility menu (a11y.js) and the settings it turns on. Its own
   colours, since the home page and the inner pages have different tokens. */

.a11y-menu { position: fixed; bottom: 1.2rem; inset-inline-start: 1.2rem; z-index: 50;
             font: 500 1rem/1.4 "Rubik", system-ui, sans-serif; }
/* Beside the WhatsApp button where there is one (home, about). */
body:has(.wa) .a11y-menu { inset-inline-start: calc(1.2rem + 60px + .8rem); }

/* The same size as the WhatsApp button beside it. */
.a11y-open { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #fff;
             background: #0b3d40; color: #fff; display: grid; place-items: center; cursor: pointer;
             box-shadow: 0 10px 24px rgb(16 47 54 / .25); }
.a11y-open svg { width: 34px; height: 34px; fill: currentColor; }
.a11y-open:focus-visible, .a11y-btn:focus-visible, .a11y-statement:focus-visible {
  outline: 3px solid #E8A815; outline-offset: 3px; }

.a11y-panel { position: absolute; bottom: calc(100% + .6rem); inset-inline-start: 0;
              width: min(17rem, calc(100vw - 2.4rem)); max-height: calc(100vh - 7rem); overflow-y: auto;
              background: #fff; color: #102F36; border: 2px solid #0b3d40; border-radius: 1rem;
              padding: .9rem; box-shadow: 0 16px 40px rgb(16 47 54 / .3);
              display: flex; flex-direction: column; gap: .45rem; }
.a11y-panel[hidden] { display: none; }
.a11y-title { margin: 0 0 .2rem; font: 700 1.1rem/1.3 "Rubik", system-ui, sans-serif; color: #0b3d40; }
.a11y-title:focus { outline: none; }

.a11y-btn { font: inherit; text-align: start; padding: .55rem .8rem; min-height: 2.75rem; cursor: pointer;
            border: 1px solid #9fc4c8; border-radius: .6rem; background: #fff; color: #102F36; }
.a11y-btn:disabled { opacity: .45; cursor: default; }
.a11y-toggle[aria-pressed="true"] { background: #0b3d40; border-color: #0b3d40; color: #fff; }
.a11y-toggle[aria-pressed="true"]::before { content: "✓ "; }
.a11y-size { display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem; align-items: center; }
.a11y-size .a11y-btn { text-align: center; padding-inline: .4rem; }
.a11y-now { font-weight: 700; min-width: 3.2rem; text-align: center; }
.a11y-reset { text-align: center; }
.a11y-statement { color: #0a6e75; text-align: center; padding: .3rem; }

/* The settings. */
html.a11y-zoom body { zoom: var(--a11y-zoom); }

html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-still { scroll-behavior: auto !important; }

html.a11y-links a { text-decoration: underline !important; text-underline-offset: .2em;
                    text-decoration-thickness: 2px !important; }
html.a11y-links a:hover, html.a11y-links a:focus { background: #FFE7A8; color: #000 !important; }

/* Rubik for everything, including the handwritten headings. */
html.a11y-font *:not(svg):not(svg *) { font-family: "Rubik", system-ui, sans-serif !important; }

/* Darker text and accents on both the home page's and the inner pages' tokens.
   --gold only on the inner pages: there it is text, on the home page it is a
   background under dark text. */
html.a11y-contrast { --ink: #000; --ink-soft: #102F36; --teal: #064a50;
                     --text: #000; --dim: #1d2b2a; --line: #6f8784; }
html.a11y-contrast:has(link[href="/sign.css"]) { --gold: #5c4005; }
html.a11y-contrast body { color: #000; }

/* The home page title is drawn lettering (title.svg); with the readable font
   the same words show as plain text, in the title's two colors. */
.title-text { display: none; }
html.a11y-font .title img { display: none; }
html.a11y-font .title-text { display: block; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800;
                             line-height: 1.15; color: #fff; }
html.a11y-font .title-text span { display: block; color: #7fe0e6; }