/* Site-wide accessibility / UX fixes layered on top of the BeTheme export.
   Brand colours are untouched here; only focus, motion, skip link and touch targets. */

/* Skip link: hidden until focused by keyboard. */
.skip-link {
  position: fixed;
  left: 8px;
  top: -60px;
  z-index: 100000;
  padding: 10px 16px;
  background: #1a535c;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: 8px;
}

/* Text for search engines and screen readers that is already visible nearby (e.g. city under the H1). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible keyboard focus on every interactive element (theme removes outlines). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible {
  outline: 2px solid #1a535c !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobile slide-out menu: the current page was white on a light-grey panel (invisible)
   and the other items were slightly under 4.5:1. */
.mfn-header-tmpl-menu-sidebar-wrapper .mfn-header-menu .mfn-menu-link {
  color: #4a4b5e !important;
}
.mfn-header-tmpl-menu-sidebar-wrapper .mfn-header-menu .current-menu-item > .mfn-menu-link,
.mfn-header-tmpl-menu-sidebar-wrapper .mfn-header-menu .current_page_item > .mfn-menu-link {
  color: #e68087 !important;
  font-weight: 700;
}

/* Footer text links were 22px tall: give them a 44px touch target without changing the look. */
#mfn-footer-template li > a {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
  margin-top: -11px;
  margin-bottom: -11px;
}

/* Tappable things should feel tappable. */
a,
button,
[role="button"],
[role="switch"] {
  cursor: pointer;
  touch-action: manipulation;
}

/* Respect users who ask for less motion (theme animations, sliders, hover effects). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}