/* Scripps Tweaks: nav-section-dot. Keep the yellow dot on the main nav item for the section being viewed.
   Only the dot: the label's hover colour is untouched. The theme's own "selected" class is driven by the
   dropdown script (it is removed whenever a dropdown opens or closes), so this uses its own class. */
.navItem--section .navItem__dot {
  opacity: 1;
}

/* Never two full-strength dots at once: while another main nav item is hovered, keyboard-focused or has its
   dropdown open, the section dot eases down. It uses the theme's own dot transition (opacity 0.2s ease), so
   the section dot fades out in step with the other dot fading in. Needs :has(); older browsers simply keep
   the dot at full strength. */
@media (hover: hover) {
  .siteHeader__primaryNav:has(.navItem:hover:not(.navItem--section)) .navItem--section .navItem__dot {
    opacity: 0.3;
  }
}

.siteHeader__primaryNav:has(.navItem:focus-visible:not(.navItem--section)) .navItem--section .navItem__dot,
.siteHeader__primaryNav:has(.navItem--selected:not(.navItem--section)) .navItem--section .navItem__dot {
  opacity: 0.3;
}