/* ==========================================================================
   Header nav — Host submenu
   ==========================================================================
   Host stopped being one page and became a section: the retail network and the
   out-of-home network are two different offers to two different owners. The top
   nav stays at three tabs and Host carries the two beneath it.

   No JavaScript. The menu opens on :hover and on :focus-within, so it works for
   pointer and keyboard alike. Every page already ships its own inline script for
   the Log In dropdown; adding a second one to 48 pages to do what CSS does here
   would be 48 more places for it to drift.
   ========================================================================== */

.nav-drop {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-drop-caret {
  font-size: 0.72em;
  transition: transform 0.18s ease;
}

.nav-drop:hover > a .nav-drop-caret,
.nav-drop:focus-within > a .nav-drop-caret {
  transform: rotate(180deg);
}

.nav-drop-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  padding: 8px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 3000;
}

/* The menu sits 6px below the tab. Without something filling that gap the
   pointer leaves .nav-drop on the way down and the menu closes under it. */
.nav-drop-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
}

.nav-drop-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  text-decoration: none;
}

/* nav a carries an active underline on some pages; inside the menu it would
   draw across the row. */
.nav-drop-menu a::after {
  display: none;
}

.nav-drop-menu a:hover {
  background: #f1f5fa;
  color: #0070ff;
}

.nav-drop-menu a.active {
  color: #0070ff;
  font-weight: 700;
}

body.dark-mode .nav-drop-menu {
  background: #2c3e50;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode .nav-drop-menu a {
  color: #f1f5fa;
}

body.dark-mode .nav-drop-menu a:hover {
  background: #34495e;
  color: #44aaff;
}

/* ── Mobile overlay ─────────────────────────────────────────────────────────
   There is no hover on a phone, so Host becomes a disclosure instead: tapping it
   opens the same two networks the desktop menu shows. <details> does this
   natively, which keeps the promise at the top of this file — the header's
   behaviour is inlined separately on ~49 pages, and a toggle script would have
   been one more thing to keep in step across all of them. */
.mobile-nav .m-drop {
  width: 100%;
  text-align: center;
}

.mobile-nav .m-drop-t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s ease;
}

/* Safari draws its own triangle; both selectors are needed to remove it. */
.mobile-nav .m-drop-t::-webkit-details-marker {
  display: none;
}

.mobile-nav .m-drop-t::marker {
  content: "";
}

.mobile-nav .m-drop-t:hover {
  color: #0070ff;
}

.mobile-nav .m-drop-caret {
  font-size: 0.55em;
  transition: transform 0.2s ease;
}

.mobile-nav .m-drop[open] .m-drop-caret {
  transform: rotate(180deg);
}

.mobile-nav .m-drop-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

/* Two classes beat `.mobile-nav nav a`, so these stay smaller than the tabs. */
.mobile-nav .m-drop-m a {
  font-size: 1.15rem;
  font-weight: 600;
  opacity: 0.85;
}

.mobile-nav .m-drop-m a.active {
  color: #0070ff;
  opacity: 1;
}

body.dark-mode .mobile-nav .m-drop-t {
  color: #f1f5fa;
}

body.dark-mode .mobile-nav .m-drop-t:hover,
body.dark-mode .mobile-nav .m-drop-m a.active {
  color: #44aaff;
}

/* Below the breakpoint the desktop bar is hidden and the overlay takes over,
   so the hover menu must not linger. */
@media (max-width: 768px) {
  .navbar .nav-drop-menu {
    display: none;
  }
}