/* Accessibility additions layered over the original site stylesheet. Nothing here changes the
   look of the pages; it only adds keyboard focus rings, the skip link and reduced-motion support. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: #fff;
  color: #1300c1;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid #ff0071;
  outline-offset: 0;
}
main {
  display: block;
}
main:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #8149ff !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* The page title is a real <h1> (it used to be a <p> with role="heading"): same look as the old title paragraph. */
.title h1 {
  padding: 0;
  margin: 0;
  font-size: 300%;
  color: #000;
  line-height: 100%;
  font-weight: 400;
  font-family: "FS Meridian W01 Bold";
}
.hasimage .title h1 {
  color: #fff;
}
@media screen and (max-width: 667px) {
  .title h1 {
    font-size: 280%;
  }
}

/* Contrast fixes (WCAG AA, 4.5:1 for small text). The brand purple is a touch too light on the pale blue panels, and the
   grey date on news stories is too faint on white. */
.content-wrap.lightblue .arrowbutton .purple a,
.content-wrap.lightblue .arrowbutton .purple a:before,
.content-wrap.lightblue .arrowbutton .purple .readmore,
.content-wrap.lightblue .arrowbutton.purple a {
  color: #7035ee;
}
.posttitle p.datetime {
  color: #6b6b6b;
}
/* A link inside a block of text must not rely on colour alone: text pasted from Word keeps a dark blue link colour that is
   barely different from the black text around it, so underline those. */
span[data-ccp-parastyle] a,
span[data-contrast] a,
.content h3 > span > a {
  text-decoration: underline;
}