/* Sitewide accessibility fixes (Section 508 / WCAG 2.1 AA).
   Loaded on every page after style.css. */

/* style.css removes focus outlines on everything (a:focus, button:focus, *:focus).
   Restore a visible keyboard focus indicator that works on light and dark backgrounds. */
:focus-visible {
  outline: 3px solid #1b6488 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fff;
}
.rd-navbar :focus-visible,
.context-dark :focus-visible,
.ui-to-top:focus-visible {
  outline-color: #88ceec !important;
  box-shadow: 0 0 0 5px #151515;
}

/* Skip link: hidden until it receives keyboard focus. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  background: #fff;
  color: #1b6488;
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

/* White text on the sky (#88ceec) button fill is 1.7:1. Use ink text (11.3:1). */
.button-primary,
.button-primary:focus {
  color: #151515;
}
.ui-to-top,
.ui-to-top:focus {
  color: #151515;
}

/* Collapsed mobile menu is only translated off screen, so its links stayed in the
   tab order while invisible. Hide it from keyboard and screen readers until opened. */
.rd-navbar-fixed .rd-navbar-nav-wrap {
  visibility: hidden;
}
.rd-navbar-fixed .rd-navbar-nav-wrap.active {
  visibility: visible;
}

/* Contracts dropdown: the parent item is a <button> (it has no page of its own),
   so it needs the nav link look without the browser button chrome. */
/* Low specificity on purpose: the theme's .rd-navbar-static/.rd-navbar-fixed .rd-nav-link
   rules still set the size, weight, colour and padding. */
.rd-nav-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.rd-navbar .rd-nav-button::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: 0.15em;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s;
}
.rd-navbar .rd-nav-button[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.rd-navbar-fixed .rd-nav-button {
  width: 100%;
}
/* style.css fades dropdowns in with "transition: all", which also delays visibility,
   so a keyboard user tabbing straight after opening skipped the first item.
   Show it at once and keep the fade. */
.rd-navbar-static .rd-navbar-submenu.opened > .rd-menu,
.rd-navbar-static .rd-navbar-submenu.focus > .rd-menu {
  transition-property: opacity, transform;
}
.rd-navbar-static .rd-navbar-submenu.opened > .rd-menu a,
.rd-navbar-static .rd-navbar-submenu.focus > .rd-menu a {
  transition-property: color, left, padding;
}

/* Mobile menu (#151515 panel): highlighted items are white on sky (1.7:1) and dropdown
   links are #5b5b5b (2.8:1). Use ink on sky and white on the panel. */
.rd-navbar-fixed .rd-nav-item:hover .rd-nav-link,
.rd-navbar-fixed .rd-nav-item.focus .rd-nav-link,
.rd-navbar-fixed .rd-nav-item.active .rd-nav-link,
.rd-navbar-fixed .rd-nav-item.opened .rd-nav-link,
.rd-navbar-fixed .rd-navbar-dropdown > li:hover > a,
.rd-navbar-fixed .rd-navbar-dropdown > li.focus > a,
.rd-navbar-fixed .rd-navbar-dropdown > li.active > a,
.rd-navbar-fixed .rd-navbar-dropdown > li.opened > a {
  color: #151515;
  text-shadow: none; /* style.css .strokeme outline smears ink text on sky */
}
.rd-navbar-fixed .rd-navbar-dropdown > li > a {
  color: #fff;
}
/* The theme leaves list bullets on the nav items; they show in the mobile menu and the
   dropdown. The top-level desktop items show none. */
.rd-navbar-nav,
.rd-navbar-nav ul {
  list-style: none;
}
/* Dropdown links use the same type as the top-level items (style.css makes them 18px
   grey, mixed case). Desktop: the panel is #151515, as on the stuck navbar, so the links
   can be white like the top level (18.3:1), with sky on hover, focus and the current page
   (10.5:1). Mobile: 14px like the top level; colors are set above. */
.rd-navbar-static .rd-navbar-dropdown {
  background: #151515;
  border-color: #151515;
}
.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-link {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-transform: uppercase;
}
.rd-navbar-static .rd-navbar-dropdown li > a,
.rd-navbar-static .rd-navbar-dropdown li > a:focus,
.rd-navbar-static .rd-navbar-dropdown li > a:active {
  color: #fff;
}
.rd-navbar-static .rd-navbar-dropdown li > a:hover,
.rd-navbar-static .rd-dropdown-item.focus .rd-dropdown-link,
.rd-navbar-static .rd-dropdown-item.opened .rd-dropdown-link,
.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-link[aria-current="page"] {
  color: #88ceec;
}
/* style.css draws a FontAwesome chevron (a::before) beside a hovered or focused dropdown
   link and indents the link 14px to make room. It reads as a bullet; the top-level items
   have neither. */
.rd-navbar-static .rd-navbar-dropdown li > a::before {
  content: none;
}
.rd-navbar-static .rd-navbar-dropdown li > a,
.rd-navbar-static .rd-navbar-dropdown li.focus > a,
.rd-navbar-static .rd-navbar-dropdown li.opened > a,
.rd-navbar-static .rd-navbar-dropdown li > a:hover {
  left: 0;
  padding-left: 0;
  padding-right: 0;
}
.rd-navbar-fixed .rd-navbar-dropdown > li > .rd-dropdown-link {
  font-size: 14px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.rd-navbar-fixed .rd-navbar-dropdown .rd-dropdown-link[aria-current="page"] {
  color: #151515;
  background: #88ceec;
  text-shadow: none;
}
/* Google renders the reCAPTCHA checkbox at a fixed 304px; with the column padding it overflowed
   a 320px screen and made the page scroll sideways (WCAG 1.4.10 reflow). Scale it on narrow screens. */
@media (max-width: 359px) {
  .rd-mailform .recaptcha {
    transform: scale(0.85);
    transform-origin: left top;
  }
}