/* ==========================================================================
   HEADER DROPDOWNS
   ==========================================================================

   The approved design draws one menu that opens: the Specialties mega panel.
   Patient Care and News & Events were given the same caret beside them with
   nothing behind either, so the header promised a menu twice and opened one
   never - an arrow is a promise about behaviour, and two of the three were
   false.

   These are the plain dropdowns those two items needed: a column of links to
   pages that already exist. Not a second mega panel, because eight links to
   patient-information pages are a list, and drawing them as illustrated cards
   would say they are something they are not.

   Everything about how it opens is taken from `.megamenu-panel` in base.css -
   the same offset, the same easing, the same shadow depth and the same navy.
   Two menus in one header that open differently would read as a mistake.

   Global rather than page-scoped, because the header is. Copied to public/ and
   hashed by `npm run sync:design`; see AUTHORED_SHEETS.
   ========================================================================== */

.nav-dropdown-item {
  position: relative;
}

.nav-menu .nav-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 268px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #004e75;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(4, 18, 33, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(15px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}

/*
 * `focus-within` alongside `:hover` is what makes this reachable by keyboard.
 *
 * The design's mega panel opens on hover alone, so tabbing into the header
 * moves focus into a panel that is `visibility: hidden` - the links are in the
 * tab order and invisible. This menu does not repeat that.
 */
.nav-dropdown-item:hover .nav-dropdown,
.nav-dropdown-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/*
 * The gap between the item and the panel is dead space on the way down to it,
 * and the menu closes if the pointer crosses it. This bridges the gap without
 * adding a visible element.
 */
.nav-dropdown-item::after {
  content: '';
  position: absolute;
  top: 100%;
  inset-inline: 0;
  height: 18px;
}

.nav-menu .nav-dropdown li {
  margin: 0;
}

.nav-menu .nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-menu .nav-dropdown a:hover,
.nav-menu .nav-dropdown a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/*
 * The design underlines a header link on hover with an `::after` bar. Inside
 * the panel that bar lands under the padding rather than the text, so it is
 * turned off here and the row's own background is the hover state instead.
 */
.nav-menu .nav-dropdown a::after {
  display: none;
}

/* --------------------------------------------------------------------------
   The mobile drawer
   --------------------------------------------------------------------------

   The drawer is a column, and a hover-revealed absolute panel has nothing to
   hover in it. The links become an indented list that is simply always open:
   an accordion inside a drawer is a second thing to learn for a menu of eight
   entries.
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  .nav-menu .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    min-width: 0;
    width: 100%;
    margin: 6px 0 10px;
    padding: 6px 0 6px 14px;
    background: transparent;
    border: none;
    border-inline-start: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    box-shadow: none;
  }

  .nav-menu .nav-dropdown a {
    padding: 8px 0;
    white-space: normal;
    font-size: 13.5px;
  }

  .nav-dropdown-item::after {
    display: none;
  }
}