/* WCAG 2.2 AA fixes (2026-10). Loaded after build/style.css on prod + staging.
   Kept as a separate file because style.css differs between environments. */

/* Utility */
.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;
}

/* 2.4.1 Bypass Blocks: skip link, visible on focus */
.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 10000;
  padding: 12px 18px;
  background: #fff;
  color: #0F1516;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #0F1516;
  border-radius: 4px;
}
.skip-link:focus { top: 16px; }
main:focus, main h1[tabindex="-1"]:focus { outline: none; }

/* 2.4.11 Focus Not Obscured: keep focused items clear of the sticky nav */
html { scroll-padding-top: 120px; }
@media screen and (max-width: 1100px) { html { scroll-padding-top: 90px; } }

/* 2.1.1 Contact form submit is now a <button>; keep the blue-arrow link look */
/* Only strip the browser's button chrome; font size, padding and the underline border
   come from the theme's `.contact_form div.bottom .blue-arrow` rules. */
.contact_form div.bottom button.blue-arrow {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background-color: transparent;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  min-height: 24px;
}

/* 2.1.1 / 4.1.2 Back-to-top is now a <button> */
button#scroll_progress {
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
}
button#scroll_progress:not(.active) { visibility: hidden; }
button#scroll_progress:focus-visible { outline: 3px solid #146EF5; outline-offset: 4px; }

/* 2.5.8 Target Size: 24x24 hit area for carousel dots, dot stays 9px visually */
.swiper-container .swiper-pagination-bullet {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  background: transparent !important;
  border: 0;
  opacity: 1;
}
.swiper-container .swiper-pagination-bullet::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: .5px solid #000;
  border-radius: 50%;
  box-sizing: border-box;
}
.swiper-container .swiper-pagination-bullet-active::after { background: #000; }
.swiper-container .swiper-pagination-bullet:focus-visible { outline: 2px solid #146EF5; outline-offset: -2px; }

/* 1.4.3 Contrast: service-page hero CTA (inline style in ACF content set #D5D8C7 on #146EF5 = 3.16:1).
   White on #146EF5 = 4.59:1. */
html body .t1 .hero-cta-row a.hero-cta { color: #fff !important; }

/* 2.2.2 Pause, Stop, Hide: the hero video's play/pause indicator also shows while focused */
.video video.front:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* ---- 2026-10-09 full-site sweep (108 unique pages) ---- */

/* 1.4.3: brand purple links on #F5F5F1 were 4.36:1 (32 pages). #8B3DFF = 4.58:1, visually the same */
:root { --color-purple: #8B3DFF; }

/* 1.4.3: grey role/title text (team, journal author, awards) #6E7E8F = 3.8:1 -> #627080 = 4.64:1 */
#people a .title,
#author .person_info .title,
#awards_carousel .carousel .inner .page > div .text .info { color: #627080; }

/* 1.4.3: "(required)" marker on form labels, #888 = 3.27:1 -> #6B6B6B = 4.89:1 */
.contact_form div label.label .required { color: #6B6B6B; }

/* 1.4.3: quote attribution where page content restyles the quote panel dark with a #146EF5 title
   (4.01:1). a11y.js adds .a11y-dark-quote only in that case; default purple quotes keep white titles. */
html body .quote.a11y-dark-quote .title { color: #4A8DF8; }   /* 5.6:1 on #0F1516 */

/* 1.4.3: service-page content styles (inline <style> in ACF fields), raised specificity to win */
html body .wf-steps li span { opacity: 1; color: #4B5050; }          /* was 70% opacity: links 2.8:1 */
html body .wf-steps li:before { color: #0F5BD0; }                      /* step numbers 4.19:1 -> 5.6:1 */
html body a.wf-btn, html body a.sup-btn { color: #fff !important; }    /* #D5D8C7 on blue 3.16-3.29:1 -> 4.6-4.8:1 */
html body .t2 div[style*="color:#146EF5"] { color: #0F5BD0 !important; }  /* website design step numbers */
html body div[style*="color:#6b7280"] { color: #5F6672 !important; }      /* small print 4.42:1 -> 5.3:1 */
html body .wf-soon .soon { opacity: 1; color: var(--color-black-4); }  /* "coming soon" badge: 72% opacity inside a 70% parent = 2.9:1; now ~7:1 */

/* 1.4.3: Get Help story tags (11.5px bold) */
.gh-story[style*="1f9e8f"] .gh-tag { color: #167A6E; }  /* 3.3:1 -> 5.2:1 */
.gh-story[style*="c77d2e"] .gh-tag { color: #A35F1C; }  /* 3.28:1 -> 5.0:1 */

/* About awards carousel: chevrons are now focusable buttons */
#awards_carousel .controls img[role="button"] { cursor: pointer; }
#awards_carousel .controls img[role="button"]:focus-visible,
#awards_carousel .carousel:focus-visible { outline: 3px solid #146EF5; outline-offset: 3px; }