/* Fixes for the accessibility widget modes (classes set on <body> by the widget)
   and keyboard navigation. Loaded after main.css on every page. */

/* Larger text: Tailwind sizes are in rem, so scale the root font size.
   Undo main.css's percentage sizes, which shrank headings. */
html:has(body.a11y-large-text) { font-size: 118.75%; }
body.a11y-large-text { font-size: inherit; }
body.a11y-large-text :is(h1, h2, h3, h4, h5, h6) { font-size: revert-layer; }

/* Readable font must not replace the icon fonts. */
body.a11y-readable-font :is(.fa-solid, .fas, .fa-regular, .far, .fa) { font-family: "Font Awesome 6 Free" !important; }
body.a11y-readable-font :is(.fa-brands, .fab) { font-family: "Font Awesome 6 Brands" !important; }

/* High contrast: white text on black everywhere (main.css only changed colour
   variables, which left white text on the many white cards). */
body.a11y-high-contrast,
body.a11y-high-contrast *:not(img):not(video):not(svg):not(svg *) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.a11y-high-contrast :is(a, a *) { color: #ffeb3b !important; }
body.a11y-high-contrast :is(button, input, select, textarea, .btn) { border: 2px solid #fff !important; }
body.a11y-high-contrast :is(.absolute.inset-0, [class*="bg-gradient"]) {
  background-color: transparent !important;
  background-image: none !important;
}
body.a11y-high-contrast .swiper-pagination-bullet { background-color: #fff !important; opacity: .6; }
body.a11y-high-contrast .swiper-pagination-bullet-active { background-color: #ffeb3b !important; opacity: 1; }
body.a11y-high-contrast ::placeholder { color: #ccc !important; }

/* Clear keyboard focus indicator. */
:focus-visible {
  outline: 3px solid var(--accent-color, #f43f5e) !important;
  outline-offset: 2px !important;
}
body.a11y-high-contrast :focus-visible { outline-color: #ffeb3b !important; }

/* "Skip to main content" link, shown when it receives keyboard focus. */
.skip-link {
  position: fixed;
  top: -100px;
  right: 16px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--primary-color, #0b1d4e);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Readable grey for small text (not brand colours): footer copyright and admin
   link on the navy footer, and the "from" label on light cards. */
footer .text-gray-500 { color: #9ca3af; }
main .text-gray-400 { color: #6b7280; }