/**
 * The menu.
 *
 * Six destinations, no panels. The pillars used to open dropdowns listing every
 * section of every page, which put a hover-only obstacle in front of a link the
 * visitor had already decided to follow, and made the bar read as a filing
 * cabinet rather than a navigation. The sections themselves are still reachable:
 * each activity page opens with its own index of subjects.
 *
 * The bar keeps the look it already had — transparent over the hero, solid on
 * the property pages — because that part was never the problem.
 */

.w2e-menu {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.6rem);
}

.w2e-menu__item {
  display: flex;
  align-items: center;
}

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

   On a narrow screen the same six, stacked.
   -------------------------------------------------------------------------- */

.w2e-drawer__top {
  display: block;
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
  padding: .7rem 0;
}

/* Astra underlines every link inside the entry content. A menu is not prose. */
.entry-content .w2e-mobile-panel a,
.entry-content .w2e-drawer a,
.w2e-mobile-panel a,
.w2e-drawer a {
  text-decoration: none;
}

.entry-content .w2e-mobile-panel a:hover,
.entry-content .w2e-drawer a:hover,
.w2e-mobile-panel a:hover,
.w2e-drawer a:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* --------------------------------------------------------------------------
   The home page's own phone panel

   It is the page's own element, opened by the page's own script, and it carries
   the same six links as every other header.
   -------------------------------------------------------------------------- */

.w2e-mobile-panel.open {
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.w2e-mobile-panel nav {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.w2e-mobile-panel .w2e-drawer__top {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  padding-bottom: .8rem;
}

/* --------------------------------------------------------------------------
   One breakpoint for all four headers

   The home page carries its own stylesheet inside the page, which switched to
   the burger at a different width from the inner pages: between the two, one
   part of the site showed a full menu and another showed a burger. These rules
   are written to outrank that inline sheet — a class more, not !important — so
   every header changes at the same place.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .w2e-nav .w2e-menu,
  .w2e-header .w2e-menu {
    display: none;
  }

  .w2e-nav .w2e-burger,
  .w2e-header .w2e-burger {
    display: inline-flex;
  }
}