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

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

    li { position: relative; }

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

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

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

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

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

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

    /*.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. */
    li:hover > a, li:focus-within > a, .level_2 a, .level_2 li a:hover {
        color: var(--white);
        border-bottom-color: transparent;
    }
    
    li.sibling:hover {
      outline: 1px solid var(--prime);
      border-bottom: 0;
    }

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