/*
 * Header drop-down for menu sections that have children (Structure -> a section
 * nested under another one, e.g. About > Photo Gallery).
 *
 * Kept in its own file on purpose: public/css/style.css is a Laravel Mix build
 * artifact and its sass sources are not part of this repository, so anything
 * added there would be lost the first time someone rebuilds the assets.
 *
 * Colours/'.4s' transition are the header's own: white panel, black labels,
 * #a64686 on hover (same as "a.active, .header .nav a:hover" in style.css),
 * #f5f3f3 hairline (same as the language pill's border).
 */

/*
 * ".header .container" is position:sticky, and sticky creates a stacking
 * context -- the panel can never escape it, so with the container's z-index left
 * at auto the hero artwork (.main-banner img/.icon-arrow-down, z-index 3/4)
 * paints straight over the drop-down. 6 clears everything inside the page.
 * This is all within <main class="cd-main-content"> (z-index 1), while the
 * burger and search modals sit outside it, so those still cover the header.
 */
.header .container {
  z-index: 6;
}

.header .nav li.has-submenu {
  position: relative;
}

/*
 * No caret next to the parent label, deliberately: the nav is floated beside the
 * logo and at >=1770px it needs 1403px of the 1420px left over, so the ~15px an
 * inline caret costs was enough to push the whole nav onto its own line under the
 * logo. Nothing here may add width to a nav item.
 */

.header .nav li.has-submenu > .submenu {
  position: absolute;
  /*
   * top:100% is the bottom of the <li>, and ".nav li" carries 40px of vertical
   * padding, so on its own that leaves a 40px gap under the label. Pulled back up
   * into that padding to sit ~12px below the text; the panel then starts inside
   * the still-hovered <li>, so the pointer never crosses dead space on its way in.
   */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  margin: -28px 0 0;
  padding: 8px 0;
  min-width: 210px;
  list-style: none;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #f5f3f3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.4s;
}

.header .nav li.has-submenu:hover > .submenu,
.header .nav li.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/*
 * The generic ".nav li" rules (inline-block, 40px vertical padding, 25px side
 * margins, the ::after vertical-centering strut) would wreck the panel.
 */
.header .nav li.has-submenu .submenu li {
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 14px;
  background-color: transparent !important;
}

.header .nav li.has-submenu .submenu li::after {
  display: none;
}

.header .nav li.has-submenu .submenu li a {
  display: block;
  padding: 9px 20px;
  color: #000000;
  white-space: nowrap;
  background-color: transparent !important;
  transition: 0.4s;
}

.header .nav li.has-submenu .submenu li a:hover,
.header .nav li.has-submenu .submenu li a.active {
  color: #a64686 !important;
  background-color: #fbfbfb !important;
}

/*
 * Below 768px style.css hides the text items in the header entirely and
 * navigation moves to the burger modal (which already lists children), so the
 * panel must never be able to show up there.
 */
@media screen and (max-width: 768px) {
  .header .nav li.has-submenu > .submenu {
    display: none;
  }
}