/* Accessibility helpers shared by every page (WCAG 2.2 AA). See docs/design.md, "Accessibility". */

/* Skip link: hidden until a keyboard user tabs to it, then shown top left. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100000; /* above any fixed header */
  display: inline-block;
  width: auto; /* some page embeds set a { width: 100% } */
  padding: 12px 16px;
  background: #ffffff;
  color: #1a1a1a;
  font: 600 16px/1.2 Montserrat, Arial, sans-serif;
  border: 2px solid #3358EF;
  border-radius: 6px;
  text-decoration: underline;
}
.skip-link:focus {
  top: 8px;
}

/* Text for screen readers only. */
.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;
}

/* Long words and URLs wrap instead of pushing the page sideways (WCAG 1.4.10, 1.4.12). */
body {
  overflow-wrap: break-word;
}

/* The main landmark wrapper must not change layout. */
main#main {
  display: block;
}
main#main:focus {
  outline: none;
}

/* One keyboard focus ring for every link and button, on any background: a white ring
   (5.6:1 on brand blue) inside a near-black ring (17:1 on white, 3.1:1 on blue). Mouse clicks do not show it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input[type="submit"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.autocomplete-items [role="option"]:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px #1A1A1E !important;
}

/* Webflow account checkbox was 13px; 24px meets the minimum target size (WCAG 2.5.8). */
#wf-user-account-accept-communications,
#wf-sign-up-accept-privacy,
#wf-sign-up-accept-communications {
  width: 24px;
  height: 24px;
}

/* Address suggestions: the option picked with the arrow keys looks like the hovered one. */
.autocomplete-items [aria-selected="true"] {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Visitors who ask their system for less motion get no smooth scrolling or long transitions. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Address lookup errors: a status line under the field, in the page flow, so it never covers the next field. */
.address-lookup-status {
  margin: 4px 0 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #1A1A1E;
}
.address-lookup-status:empty {
  display: none;
}