/**
 * Dropdown item hover, TS-5243 item 8.
 *
 * QA asked for the hover colour to match the site theme. It did not, because
 * nothing in the theme had ever set it: `.dropdown-item:hover` was falling
 * through to Bootstrap's own `#e9ecef`, a neutral grey chosen by a framework
 * that has never seen this brand.
 *
 * The only house override was `.dropdown-menu.dropdown-top-area a:hover`,
 * which sets a text colour on one dropdown in the header and leaves the
 * background alone. Every other dropdown in the app was grey.
 *
 * This is the same shape as the btn-secondary, btn-light and btn-outline
 * findings earlier in this pass: a role the theme never defined, so the
 * framework answered for it.
 *
 * --primary-light is the tint the estate already uses for a raised or
 * selected row: form field fills, table header rows, the active-ish surfaces.
 * A hovered menu item is the same idea, so it takes the same value rather
 * than a new one.
 *
 * Contrast: --title #3E2155 on #F2EEF8 measures 11.82:1, comfortably past the
 * 4.5 a label needs, and slightly better than the Bootstrap pairing it
 * replaces at 13.63 on a colour that did not belong here.
 */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--primary-light, #f2eef8);
  color: var(--title, #3e2155);
}

/* Keep the selected item legible when it is also hovered: Bootstrap's
   .active uses the brand fill, and the rule above must not repaint it. */
.dropdown-item.active:hover,
.dropdown-item.active:focus,
.dropdown-item:active {
  background-color: var(--primary-color, #672c72);
  color: #fff;
}