/**
 * The menu, with a panel under each pillar.
 *
 * The bar itself keeps the look it already had — the hero's navigation is
 * transparent over the film, the property pages' header is solid. Only the
 * panel is new, and it borrows the card materials used everywhere else: white,
 * a hairline, a soft shadow, one radius.
 */

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

.w2e-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .2rem;
}

/* The arrow beside a pillar that has parts. It is a button so it can be
   reached from the keyboard and read as a control, not decoration. */
.w2e-menu__toggle {
  appearance: none;
  border: 0;
  background: none;
  padding: .35rem .1rem;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  opacity: .75;
}

.w2e-menu__toggle::before {
  content: "";
  display: block;
  width: .42rem;
  height: .42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
}

.w2e-menu__item.is-open .w2e-menu__toggle::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.w2e-menu__toggle:hover,
.w2e-menu__toggle:focus-visible {
  opacity: 1;
}

/* The panel. Hidden by attribute rather than by hover alone, so a keyboard
   and a touch screen reach it the same way a mouse does. */
.w2e-menu__panel {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  transform: translateX(-50%) translateY(-.35rem);
  z-index: 80;
  min-width: 14rem;
  padding: .55rem;
  background: #fff;
  border: 1px solid rgba(15, 26, 34, .1);
  border-radius: var(--w2e-r, 4px);
  box-shadow: 0 18px 44px rgba(15, 26, 34, .17);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.w2e-menu__item.is-open .w2e-menu__panel,
.w2e-menu__item:hover .w2e-menu__panel,
.w2e-menu__item:focus-within .w2e-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* A bridge across the gap, so the panel does not close as the pointer
   travels down to it. */
.w2e-menu__item.has-panel::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: .7rem;
}

.w2e-menu__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.w2e-menu__panel a {
  display: block;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--w2e-text, #1c2530) !important;
  padding: .55rem .75rem;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}

.w2e-menu__panel a:hover,
.w2e-menu__panel a:focus-visible {
  background: rgba(0, 51, 90, .06);
  color: var(--w2e-navy, #00335a) !important;
}

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

   On a narrow screen nothing is hidden behind a hover: the pillars and all
   their parts are listed, indented under their pillar.
   -------------------------------------------------------------------------- */

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

.w2e-drawer__sub {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: 0 0 .9rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.w2e-drawer__sub a {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9375rem;
  opacity: .78;
  padding: .3rem 0;
}

.w2e-drawer__sub a:hover,
.w2e-drawer__sub a:focus-visible {
  opacity: 1;
}

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

   It is the page's own element, opened by the page's own script, and it now
   carries the same tree as every other header. Its existing rule gives every
   link a serif face and a rule under it, which is right for a pillar and far
   too heavy for the parts listed under one, so the parts are set back down.
   -------------------------------------------------------------------------- */

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

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

/* Astra underlines every link inside the entry content, which the panel sits
   in. A menu is not prose and should not be ruled through. */
.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;
}

.w2e-mobile-panel .w2e-drawer__top {
  border-bottom: 0;
  padding-bottom: .3rem;
}

.w2e-mobile-panel .w2e-drawer__sub a {
  border-bottom: 0;
  font-size: .9375rem;
  font-weight: 500;
  padding-bottom: .3rem;
}

/* --------------------------------------------------------------------------
   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;
  }
}