/* Accessibility menu (inc/a11y.php) and the a11y-* display preferences it sets on <html>. */

/* ---------- the menu ---------- */
.a11y-trigger{position:fixed;bottom:16px;inset-inline-start:16px;z-index:60;width:52px;height:52px;display:grid;place-items:center;background:var(--ink);color:var(--ground);border:0;cursor:pointer;transition:transform .2s var(--ease)}
.a11y-trigger:hover{transform:scale(1.06)}
.a11y-trigger:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.a11y-trigger.is-active::after{content:"";position:absolute;top:6px;inset-inline-end:6px;width:8px;height:8px;background:var(--ground)}
.a11y-backdrop{position:fixed;inset:0;z-index:61;background:rgba(0,0,0,.35)}
.a11y-panel{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:62;width:min(380px,100%);overflow-x:hidden;overflow-y:auto;background:var(--ground);color:var(--ink);border-inline-end:1px solid var(--ink);padding:24px 24px 32px;font:400 1rem/1.5 var(--font)}
.a11y-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.a11y-head h2{font:400 1.5rem/1.2 var(--font);letter-spacing:0}
.a11y-close,.a11y-reset{background:none;border:1px solid var(--ink);color:var(--ink);font:400 1rem var(--font);padding:10px 16px;min-height:44px;cursor:pointer}
.a11y-close:hover,.a11y-reset:hover{background:var(--ink);color:var(--ground)}
.a11y-form fieldset{border:0;border-top:1px solid var(--ink-2);margin:0;padding:14px 0 10px;min-width:0;display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.a11y-form legend{font-weight:500;padding:14px 0 6px}
.a11y-form label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.a11y-form input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--ink)}
.a11y-reset{margin-top:12px;width:100%}
.a11y-foot{margin-top:20px;font-size:.875rem;color:var(--ink-2)}
.a11y-foot a{color:inherit}
.a11y-panel :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media print{.a11y-ui{display:none}}

/* ---------- colours: the site is built on tokens, so contrast modes swap them ---------- */
html.a11y-colors-light{--ground:#fff;--step:#f2f2f2;--ink:#000;--ink-2:#000;--muted:#444;--gold:#4d3a14;--err:#9b0000}
html.a11y-colors-dark{--ground:#000;--step:#161616;--ink:#fff;--ink-2:#fff;--muted:#ccc;--gold:#ffd75e;--err:#ff9c8f}
html.a11y-colors-light .btn:hover,html.a11y-colors-light .btn-line:hover{background:var(--gold)}
html.a11y-colors-dark .btn:hover,html.a11y-colors-dark .btn-line:hover{background:var(--gold);color:#000}
html.a11y-colors-dark .campaign .s p,html.a11y-colors-light .campaign .s p{color:var(--ground)}
html.a11y-colors-dark .form input,html.a11y-colors-dark .form textarea,html.a11y-colors-dark .form select{background:var(--step)}
html.a11y-colors-dark .lens::after{border-color:rgba(255,255,255,.3)}
html.a11y-colors-dark a,html.a11y-colors-light a{text-decoration-color:currentColor}
html.a11y-colors-mono body>:not(.a11y-ui){filter:grayscale(1)}

/* ---------- text size and spacing ---------- */
html.a11y-text-115{font-size:115%}
html.a11y-text-130{font-size:130%}
html.a11y-text-150{font-size:150%}
html.a11y-lines-16 body :is(p,li,dd,dt,label,blockquote,span,a){line-height:1.9!important}
html.a11y-lines-20 body :is(p,li,dd,dt,label,blockquote,span,a){line-height:2.3!important}
html.a11y-lines-16 body p,html.a11y-lines-20 body p{letter-spacing:.02em}

/* ---------- switches ---------- */
html.a11y-links a{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:4px!important;outline:2px solid currentColor;outline-offset:2px}
html.a11y-font body,html.a11y-font body :not(svg):not(svg *){font-family:Arial,"Segoe UI",system-ui,sans-serif!important;font-weight:400!important;letter-spacing:0!important}
html.a11y-font body :is(h1,h2,h3,b,strong,legend){font-weight:700!important}
html.a11y-headings :is(h1,h2,h3,h4){outline:2px dashed currentColor;outline-offset:6px}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 20 24'%3E%3Cpath d='M1 1v19l5-5 3.5 7.5 3-1.4L9 13.7h7z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,auto!important}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-motion.js .rise{opacity:1;transform:none}

@media print{
  html[class*="a11y-"]{font-size:100%!important}
  html.a11y-colors-mono body>*{filter:none!important}
}
@media (max-width:600px){.a11y-trigger{width:44px;height:44px;bottom:12px;inset-inline-start:12px}}