/**
 * Planner accessibility layer (EAA / WCAG 2.1 AA helpers).
 * Loaded after school custom_css so focus/skip-link rules remain available.
 * Does not restyle Chosen structure — class hooks stay legacy-compatible.
 *
 * Contrast: reinforce defaults that meet WCAG AA (4.5:1 text / 3:1 UI).
 * Do not set colors on `.block` / `.course` / `legend` — school themes
 * (alleroed, vgt, …) set `color` on those containers for light-on-dark chips.
 */

/* Skip target: allow programmatic focus without a visible focus ring flash
   unless the user continues tabbing from main. */
#main-content:focus {
  outline: none;
}

#main-content:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

.cw-skip-link {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 10000;
  padding: 0.5rem 0.75rem;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  text-decoration: underline;
  transform: translateY(-200%);
}

.cw-skip-link:focus,
.cw-skip-link:focus-visible {
  transform: translateY(0);
}

.cw-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;
}

/* Ensure keyboard focus is visible even when school CSS removes outlines.
 * Black ring with a white halo, so it shows on light and dark school themes.
 * Links/buttons are scoped to the planner so an embedded widget does not
 * restyle focus on the school's own page. */
.block select:focus,
.block select:focus-visible,
.chosen-container-single .chosen-single:focus,
.chosen-container-active .chosen-single,
.cw-skip-link:focus-visible,
#main-content a:focus-visible,
#main-content button:focus-visible,
#main-content [tabindex='0']:focus-visible,
#course_wizard_widget a:focus-visible,
#course_wizard_widget button:focus-visible,
#course_wizard_widget [tabindex='0']:focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 7px #fff !important;
}

.chosen-container .chosen-results .highlighted {
  outline: 2px solid #000;
  outline-offset: -2px;
}

/*
 * Chosen placeholder / default text: base frontend.css uses #595959 (≥4.5:1 on
 * white). Reinforce here in case a theme lightens Chosen chrome without setting
 * .chosen-default. Schools that set .chosen-container color still style results.
 */
.chosen-container-single .chosen-default,
.chosen-container-multi .chosen-choices li.search-field .default {
  color: #595959;
}

/* UG link: keep explicit dark text on the light chip (4.5:1+). */
#ug_link a {
  color: #000;
}

/* Icon tooltips: keep Font Awesome look; make focus target clear. */
i.icon-info-sign[tabindex='0'],
i.nb-warning[tabindex='0'],
i.icon-warning-sign[tabindex='0'] {
  cursor: pointer;
}

i.icon-info-sign[tabindex='0']:focus-visible,
i.nb-warning[tabindex='0']:focus-visible,
i.icon-warning-sign[tabindex='0']:focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 7px #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .cw-skip-link {
    transition: none;
  }
}