/* Shared header / navigation.
   Markup: partials/nav.html (bar + mobile drawer) and partials/nav-dropdown.html
   (the "Learn" mega-panel). Behaviour: assets/elh-nav.js.

   elh-nav.js writes one attribute, <html data-elh-nav-state="...">, and everything the bar looks
   like in each state is decided here:

     top     at the top of the page: transparent over the hero
     shown   the bar came back on scroll up: neutral dark glass, never blue
     hidden  scrolling down: the bar slides out of view
     open    Learn or the phone drawer is open: solid navy (#001526), the only blue the bar shows

   Client rule: "Hides on scroll down, returns on scroll up. Blue background only when 'Learn' is open." */
:root {
  --gold-nav: #BFA06A;
}

/* ── HEADER BAR ──────────────────────────────────────── */
/* Three columns, 1fr auto 1fr: the logo hugs the left edge, the CTA the right edge, and the links
   sit in the middle column, so they are centred on the page whatever the logo and button widths.
   (A flex row with space-between centred them in the room left between the logo and the button,
   65 to 72px to the left of the page centre.) */
[data-elh-nav] {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  padding: 20px clamp(18px, 2.4vw, 40px);
  /* never a visible line, in any state; the 1px only keeps the bar's height the same as before */
  border-bottom: 1px solid transparent;
  background-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), background-color .3s ease,
              -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
[data-elh-logo] { justify-self: start }
[data-elh-nav] > nav { justify-self: center }
[data-elh-cta], [data-elh-burger] { justify-self: end }
[data-elh-nav] nav a, [data-elh-nav] nav button, [data-elh-cta] { white-space: nowrap }
[data-elh-nav] a { text-decoration: none }
[data-elh-nav] nav a[aria-current="page"] { color: #BFA06A !important } /* beats the links' inline colour */
[data-elh-cta]:hover { background: #BFA06A; color: #001526; border-color: #BFA06A }
[data-elh-drawer] a { text-decoration: none }
/* Current page in the phone menu: gold and underlined, so it shows even where colour does not. */
[data-elh-drawer] a[aria-current="page"] {
  color: #BFA06A !important; text-decoration: underline !important;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* The caret beside "Learn" turns over while the panel is open. !important so a script that wrote an
   inline transform (the homepage's own script does) cannot leave it pointing the wrong way. */
[data-elh-more-caret] { transform: rotate(45deg) translateY(-2px) !important; transition: transform .3s ease }
[data-elh-click="toggleMore"][aria-expanded="true"] [data-elh-more-caret] { transform: rotate(-135deg) translateY(2px) !important }

/* shown: the bar returning on scroll up. A neutral dark bar (#2B2B2B is a brand colour) with a blur,
   no navy tint, so the cream links stay readable over light sections. The pages that open on a light
   background (body[data-elh-nav-solid]: the Stories articles) use it from the first pixel. */
html[data-elh-nav-state="shown"] [data-elh-nav],
body[data-elh-nav-solid] [data-elh-nav] {
  background-color: rgba(43, 43, 43, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* hidden: out of sight, unless focus is inside the bar. elh-nav.js also brings it back on focusin. */
html[data-elh-nav-state="hidden"] [data-elh-nav] { transform: translateY(-100%) }
html[data-elh-nav-state="hidden"] [data-elh-nav]:focus-within { transform: translateY(0) }
/* open: the one state with a blue background. Same navy as the Learn panel, so they read as one shelf. */
html[data-elh-nav-state="open"] [data-elh-nav] {
  background-color: #001526;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: translateY(0);
}

/* Keyboard focus is gold on the dark bar. The article pages switch the site ring to navy for their
   light background (article.css), which would vanish on the dark bar, the panel and the drawer. */
[data-elh-nav] :focus-visible, [data-elh-drawer] :focus-visible, .nav-dd-panel :focus-visible {
  outline-color: #BFA06A !important;
}

/* ── PHONE DRAWER ────────────────────────────────────── */
/* Off screen and out of the tab order until opened (visibility), so Tab never lands on a link nobody can see. */
[data-elh-scrim] {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 310; display: none;
  background: rgba(0, 13, 25, .6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
[data-elh-scrim].is-open { opacity: 1; pointer-events: auto }
[data-elh-drawer] {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 320; display: none;
  flex-direction: column; gap: 28px;
  width: min(84vw, 340px); padding: 26px 28px 40px;
  background: #001526; border-right: 1px solid rgba(191, 160, 106, .3);
  overflow-y: auto;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .45s;
}
[data-elh-drawer].is-open {
  transform: translateX(0); visibility: visible;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

/* ── LEARN PANEL ─────────────────────────────────────── */
.nav-dd-panel {
  /* Sits flush under the header: elh-nav.js sets --elh-nav-h from the bar's measured height
     (on load, on resize and when the bar's box changes). */
  position: fixed; left: 0; right: 0; top: var(--elh-nav-h, 88px);
  background: #001526;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 52px 80px 64px;
  display: grid; grid-template-columns: 300px 1fr; gap: 0 80px;
  z-index: 490;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.nav-dd-panel.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.nav-dd-intro-title {
  font-size: clamp(28px, 3vw, 44px); font-weight: 300; letter-spacing: -0.025em;
  color: rgba(234,229,220,0.95); line-height: 1.08; margin-bottom: 16px;
}
.nav-dd-intro-sub {
  font-size: 15px; line-height: 1.65; color: rgba(234,229,220,0.66); font-weight: 300;
}

.nav-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-content: start; }
.nav-dd-col { display: flex; flex-direction: column; }
.nav-dd-col a {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(15px, 1.75vw, 22px); font-weight: 300; letter-spacing: -0.01em;
  color: rgba(234,229,220,0.82); text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid rgba(234,229,220,0.08);
  transition: color 0.18s;
}
.nav-dd-col a:last-child { border-bottom: none; }
.nav-dd-col a::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--gold-nav); opacity: 0.6;
  transition: opacity 0.18s, background-color 0.18s;
}
.nav-dd-col a:hover { color: #fff; }
.nav-dd-col a[aria-current="page"] { color: var(--gold-nav); }
.nav-dd-col a[aria-current="page"]::before { opacity: 1; background-color: var(--gold-nav); }
.nav-dd-col a:hover::before { opacity: 1; background-color: var(--gold-nav); }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav-dd-panel { padding: 40px 40px 48px; }
}
/* Below this the bar collapses to monogram + burger and the drawer takes over. 899px, not 767px:
   from about 880px down the centred links and the CTA no longer fit side by side. elh-nav.js reads
   whether the burger is displayed, so this query is the only place the number lives. */
@media (max-width: 899px) {
  [data-elh-nav] { grid-template-columns: minmax(0, 1fr) auto }
  [data-elh-nav] nav { display: none !important }
  [data-elh-cta] { display: none !important }
  [data-elh-burger] { display: flex !important }
  [data-elh-scrim] { display: block !important }
  [data-elh-drawer] { display: flex !important }
}
@media (max-width: 600px) {
  .nav-dd-panel { padding: 32px 24px 40px; grid-template-columns: 1fr; }
}

/* Instant toggles for visitors who ask for less motion: the bar, the caret, the panel and the drawer. */
@media (prefers-reduced-motion: reduce) {
  [data-elh-nav], [data-elh-nav] *, [data-elh-more-caret], .nav-dd-panel, .nav-dd-panel *,
  [data-elh-scrim], [data-elh-drawer] { transition: none !important }
}

/* no-italic-accents */
em { font-style: normal; }