/* ---------------------------------------------------------------------
   The site menu, for every page that is not the headquarters or the
   entrance.

   Those two get their nav from the Webflow stylesheet. The scenes and
   placeholders are hand-built and never loaded it, so they had no menu at
   all. This restates the same bar natively: fixed to the top, centred,
   lowercase PP Monument, matching the 17.5px the Webflow one computes to.
   --------------------------------------------------------------------- */

:root {
  /* A tint of the brand navy #002365, same 219deg hue. The navy itself is
     20% lightness - invisible as a hover state on a dark scene. This sits
     at 60%, which measures 5.2:1 against the shadow the links carry and
     2.4:1 against the lit ceiling behind the headquarters nav: better than
     the plain white it replaces, which is only 1.6:1 there. */
  --brand-blue: #4780eb;
}

.rs-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px 96px 0;
  /* the bar spans the window, so it must not swallow clicks on the scene
     behind it - only the links themselves take the pointer */
  pointer-events: none;
}

.rs-nav a {
  pointer-events: auto;
  display: block;
  padding: 0 clamp(8px, 1.2vw, 15px);
  font-family: var(--brand, Ppmonumentextended, Impact, sans-serif);
  font-size: clamp(11px, 1.35vw, 17.5px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: lowercase;
  text-decoration: none;
  color: #fff;
  opacity: .82;
  text-shadow: 0 1px 10px rgba(4, 6, 12, .9), 0 0 22px rgba(4, 6, 12, .6);
  transition: opacity .3s ease, color .3s ease;
  white-space: nowrap;
}

.rs-nav a:hover,
.rs-nav a:focus-visible {
  opacity: 1;
  color: var(--brand-blue);
}

.rs-nav a[aria-current="page"] {
  opacity: 1;
}

/* --- divisions dropdown ----------------------------------------------
   Management is a real scene now, so the menu has to reach it. Opens on
   hover, on keyboard focus, and on tap - the tap path matters because a
   hover-only menu cannot be opened on a phone at all.
   --------------------------------------------------------------------- */
.rs-nav__drop {
  position: relative;
  pointer-events: auto;
}

.rs-nav__list {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  margin: 6px 0 0;
  padding: 8px 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  background: rgba(8, 11, 18, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(247, 244, 236, .16);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.rs-nav__drop:hover .rs-nav__list,
.rs-nav__drop:focus-within .rs-nav__list,
.rs-nav__drop.is-open .rs-nav__list {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.rs-nav__list a {
  padding: 7px 18px;
  font-size: clamp(10px, 1.05vw, 13px);
  text-shadow: none;
  opacity: .72;
}

.rs-nav__list a:hover,
.rs-nav__list a:focus-visible {
  opacity: 1;
  color: var(--brand-blue);
}

/* the four divisions are not all built yet - the ones that are not read
   as unavailable rather than pretending to be links */
.rs-nav__list a[href="#"] {
  opacity: .38;
  cursor: default;
}

.rs-nav__list a[href="#"]:hover {
  opacity: .38;
  color: #fff;
}

/* On a phone the bar sits above a scene that fills the screen, so it needs
   its own footing rather than relying on whatever is behind it.

   It also needs targets a thumb can actually hit. The links carry no
   vertical padding, so at the 11px this clamps to on a narrow screen each
   one was a 13px-tall strip - about a third of the 44px a finger needs, and
   the reason divisions and its contents were so hard to open. The padding
   goes on the links and comes off the bar, so the type stays where it was
   and only the hit area grows. */
@media (max-width: 640px) {
  .rs-nav {
    padding: 3px 6px 10px;
    background: linear-gradient(rgba(4, 6, 12, .55), rgba(4, 6, 12, 0));
  }

  .rs-nav a {
    padding: 15px clamp(9px, 2.6vw, 14px);
  }

  .rs-nav__list {
    min-width: 172px;
  }

  /* the submenu sits under a taller link now, so it needs less of its own
     offset, and its rows need the same thumb-sized reach */
  .rs-nav__list {
    margin-top: 0;
  }

  .rs-nav__list a {
    padding: 13px 20px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .rs-nav a,
  .rs-nav__list {
    transition: none;
  }
}