.mod_navigation, .mod_navigation.block {
  overflow: visible;
}

.mod_navigation ul,
.mod_navigation li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mod_navigation li {
  position: relative;
}

.mod_navigation > ul.level_1 > li {
  display: inline-block;
}

.mod_navigation a, 
.mod_navigation strong{
  display: block;
  padding: 0.33rem 2rem;
  text-decoration: none;
  border-bottom:none;
}

.mod_navigation li:hover > a,
.mod_navigation li:focus-within > a {
  background-color: var(--black);
}

.mod_navigation .level_2 {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--black);
  min-width: 180px;
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.mod_navigation li:hover > .level_2,
.mod_navigation li:focus-within > .level_2 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mod_navigation .level_2 li a {
  white-space: nowrap;
}

.mod_navigation .level_2 li a:hover {
  background-color: var(--grey-dark);
}

/* CONTRAST ON DARK NAV SURFACES
   The hover/focus states below set a dark background but previously left the
   link colour alone, so text stayed --prime (#001078) on black — about 1.3:1,
   effectively unreadable. Every dark surface now sets its foreground too.

   The focus ring is overridden to white for the same reason: the site-wide
   ring is --prime, which disappears against a black dropdown. */
.mod_navigation li:hover > a,
.mod_navigation li:focus-within > a,
.mod_navigation .level_2 a,
.mod_navigation .level_2 li a:hover {
    color: var(--white);
    border-bottom-color: transparent;
}

.mod_navigation a:focus-visible {
    outline-color: var(--white);
}