/*
 * Viewpoint accessibility fixes (WCAG 2.2 AA), Oct 2026.
 * Loaded on every page from global_footer_scripts, after the site's own CSS.
 * Goes with assets/js/vp-a11y-2026.js.
 */

/* 2.4.7 Focus Visible: a clear ring on keyboard focus everywhere.
   The site's older CSS removes outlines (outline:none / 0) on links, buttons and radios. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #fff !important;
}
/* Radios and checkboxes inside the answer grids: keep the ring tight to the control */
.questionGroup__table input[type="radio"]:focus-visible,
.question__table input[type="radio"]:focus-visible,
.question__table input[type="checkbox"]:focus-visible {
  outline-offset: 3px !important;
}

/* 1.4.1 Use of Color: links inside running text are underlined, not shown by colour alone */
p a:not(.btn):not(.button):not([role="button"]),
label a,
.callout a:not(.btn):not(.button),
.pageQuestionnaire li a:not(.btn):not(.button) {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* 1.4.3 Contrast + 3.3.1: form error text was 12px #EC5840 (3.3:1). Now 6.6:1 and larger. */
.form-error,
.form-error.is-visible {
  color: #b42318 !important;
  font-size: 1rem !important;
  font-weight: 700;
}

/* 3.3.1 Error Identification: statements still needing an answer.
   Marked with text and an icon as well as colour (1.4.1). */
.vp-missing > th,
.vp-missing > td {
  background: #fdecea !important;
}
.vp-missing > th:first-child {
  box-shadow: inset 4px 0 0 #b42318;
}
.vp-missing-note {
  display: block;
  margin-top: 4px;
  color: #b42318 !important;
  font-size: .875rem;
  font-weight: 700;
}
.vp-missing-note::before {
  content: "\26A0\FE0E  ";
}
.vp-error-summary {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 2px solid #b42318;
  border-radius: 6px;
  background: #fdecea;
  color: #7a1a12;
  font-weight: 700;
}
.vp-error-summary[hidden] {
  display: none !important;
}
.vp-error-summary:focus {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

/* Example questions on the start page, rebuilt as a real table instead of a picture of one (1.1.1, 1.4.5) */
.vp-example {
  width: 100%;
  max-width: 760px;
  margin: 8px 0 16px;
  border-collapse: collapse;
  font-size: .95rem;
}
.vp-example caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 6px;
  color: #3a3c3f;
  font-size: .9rem;
}
.vp-example th,
.vp-example td {
  border: 1px solid #b9c3cc;
  padding: 8px 10px;
}
.vp-example thead th {
  background: #e7edf3;
  text-align: center;
  font-size: .8rem;
}
.vp-example thead th:first-child {
  text-align: left;
  font-weight: 400;
}
.vp-example tbody th {
  text-align: left;
  font-weight: 600;
  background: #f6f8fa;
}
.vp-example tbody td {
  text-align: center;
  width: 3.2em;
}
.vp-example .vp-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid #6b7680;
  border-radius: 50%;
  vertical-align: middle;
}
.vp-example .vp-key strong {
  margin-left: .6em;
}
.vp-example .vp-key strong:first-child {
  margin-left: 0;
}

/* Visually hidden, still read by screen readers */
.vp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Start page consent tick box: the real checkbox is invisible (opacity 0) under a drawn box,
   so show the focus ring on the drawn box instead */
.multiple-choice input[type="checkbox"]:focus-visible + label::before {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

/* Unanswered question set out as a box of options (TDP) */
fieldset.vp-missing {
  border-color: #b42318 !important;
  box-shadow: inset 4px 0 0 #b42318;
  background: #fdecea;
}

/* Two-option example question on the TDP start page */
.vp-example--pair {
  border: 1px solid #b9c3cc;
  border-radius: 6px;
  padding: 12px 14px;
}
.vp-example__cap { margin: 0 0 6px; color: #3a3c3f; font-size: .9rem; }
.vp-example__q { margin: 0 0 8px; font-weight: 600; font-style: italic; }
.vp-example--pair ul { list-style: none; margin: 0; padding: 0; }
.vp-example--pair li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #e3e8ed; }

/* 3.3.2: required field marker on dashboard forms */
.vp-req { font-weight: 400; color: #5b6570; font-size: .9em; }

/* 4.1.3: "candidate added" message on Active Tests */
.vp-status-msg {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 4px solid #1f7a45;
  background: #e8f4ec;
  color: #14532d;
  font-weight: 600;
}
.vp-status-msg:empty { padding: 0; margin: 0; border: 0; }