/* ============================================================
   Dropdown navigation — a portable mega-menu.

   A dependency-free port of a React + framer-motion component. The two
   effects worth keeping from it are both shared-layout tricks:

     · one pill that SLIDES between the items the cursor visits,
       instead of a background fading in and out under each one;
     · one panel surface that MORPHS between menus — it grows,
       shrinks and travels to the next menu's size and position
       rather than closing and reopening.

   Both are done here with a single element each (.ddn-pill, .ddn-face)
   whose transform/width/height JS writes; nothing else animates.

   Progressive enhancement is deliberate. Every destination is a real
   anchor in the served HTML, so a crawler and a reader without JS get
   the whole map, and the hover rules below open the panels with no
   script at all. nav.js adds the class `on` to the <nav>, which hands
   the panel's paintwork over to the shared surface and switches on the
   keyboard path and the mobile drawer.

   Portability: this file and nav.js know nothing about Associates.
   They read the markup they are given and use the host page's tokens
   (--ink, --sky-deep, --hairline, --ease…), falling back to literals
   so they still render standalone.
   ============================================================ */

.ddn {
  /* ---------- Palette ----------
     These tokens are the component's whole surface area, and they default
     to an explicit LIGHT palette instead of reading the host page's tokens.

     That is deliberate, and the earlier version had it wrong. It read
     var(--ink), var(--hairline) and friends on the assumption that a
     matching token NAME means a matching token ROLE. It does not. On
     Standard Associates --ink is heading TEXT on a white ground. On
     Standard Longevity --ink (#05080a) is the near-black BACKGROUND,
     --pearl is the text, and --hairline is a pale rule meant to sit on a
     dark ground. Inheriting by name there yields a white panel with an
     invisible border on a dark site — legible by accident, wrong by
     design, and it would have looked like the component "worked".

     LOAD ORDER IS LOAD-BEARING: link this file BEFORE the stylesheet
     that binds it. Both use a .ddn rule of identical specificity, so a
     host binding loaded first is simply overwritten by these defaults
     and the component quietly reverts to light.

     To bind this to a host palette, map it on the page, where the roles
     are actually known:

       .ddn {
         --ddn-surface: var(--panel-solid);
         --ddn-fg:      var(--pearl-dim);
         --ddn-fg-on:   var(--pearl);
         --ddn-accent:  var(--aqua);
         --ddn-line:    var(--hairline);
       }

     Measure the accent against the ground you are mapping onto, not the
     one it was designed for. Longevity's accent on each ground, AA needs
     4.5:1 for this size of text:

         #58f2e6  aqua       on its own ink #05080a   14.59:1  PASS
         #58f2e6  aqua       on white                  1.38:1  FAIL
         #17b8ad  aqua-deep  on white                  2.47:1  FAIL
         #1f72bd  this file's default, on white        5.00:1  PASS

     Note the trap in the third row: "deep" does not mean "safe on
     white". If a light-ground port ever needs that hue it takes a value
     neither site currently defines — #0d7f77 clears it at 4.86:1. On
     Longevity's own dark ground none of this applies.

     The values below are identical to what the Standard light pages
     already resolved to, so nothing renders differently here. */
  --ddn-fg:      #566a80;
  --ddn-fg-on:   #13273c;
  --ddn-accent:  #1f72bd;
  --ddn-line:    rgba(19,39,60,0.10);
  --ddn-line-2:  rgba(19,39,60,0.16);
  --ddn-surface: #ffffff;
  --ddn-tint:    #e8f2fb;
  /* Chrome the light default hardcoded until 2026-08-24. A dark host needs
     every one of these, not just the palette above: a shadow tuned for a
     light ground is invisible on a dark one, and white CTA text on a light
     accent is the same 1.38:1 failure in a different place. */
  --ddn-pill-bg: rgba(31,114,189,0.10);
  --ddn-cta-fg:  #ffffff;
  --ddn-accent-2:#1a66ab;
  --ddn-cta-glow:rgba(31,114,189,0.9);
  --ddn-chrome:  rgba(255,255,255,0.96);
  --ddn-shadow:  0 24px 60px -28px rgba(13,44,73,0.38), 0 2px 10px -6px rgba(13,44,73,0.16);
  --ddn-shadow-lg: 0 30px 70px -30px rgba(13,44,73,0.45);
  --ddn-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ddn-ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ddn-radius:  16px;
  --ddn-gap:     8px;      /* the bridge the cursor crosses to the panel */

  position: relative;
  display: flex; align-items: center; gap: 14px;
}

/* With JS the items stop being the positioning context, so the panels
   and the shared surface are both placed against the <nav> in the same
   coordinate space — that is what lets one surface serve them all. */
.ddn.on .ddn-item { position: static; }

.ddn-bar { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); }
.ddn-list {
  position: relative; display: flex; align-items: center;
  gap: 2px; margin: 0; padding: 0; list-style: none;
}
.ddn-item { position: relative; }

/* ---------- Triggers ---------- */
.ddn-trigger, .ddn-flat {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; padding: 7px 14px; border: 0; background: none;
  font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.2;
  color: var(--ddn-fg); cursor: pointer; border-radius: 999px;
  transition: color .25s var(--ddn-ease);
  -webkit-tap-highlight-color: transparent;
}
.ddn-trigger:hover, .ddn-flat:hover,
.ddn-trigger[aria-expanded="true"] { color: var(--ddn-fg-on); }
.ddn-trigger:focus-visible, .ddn-flat:focus-visible, .ddn-link:focus-visible,
.ddn-cta:focus-visible, .ddn-burger:focus-visible {
  outline: 2px solid var(--ddn-accent); outline-offset: 3px;
}

.ddn-chev {
  width: 15px; height: 15px; flex: none; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ddn-ease);
}
.ddn-trigger:hover .ddn-chev,
.ddn-trigger[aria-expanded="true"] .ddn-chev { transform: rotate(180deg); }

/* ---------- The pill that follows the cursor ---------- */
.ddn-pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  height: 34px; width: 0; border-radius: 999px;
  background: var(--ddn-pill-bg);
  opacity: 0; pointer-events: none;
  transition: transform .3s var(--ddn-ease-out),
              width .3s var(--ddn-ease-out),
              height .3s var(--ddn-ease-out),
              opacity .2s var(--ddn-ease);
}
.ddn-pill.on { opacity: 1; }

/* ---------- The panel ---------- */
.ddn-drop {
  position: absolute; left: 0; top: 100%;
  padding-top: var(--ddn-gap);          /* the bridge, not a visible gap */
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .18s var(--ddn-ease), transform .22s var(--ddn-ease-out);
  z-index: 2;
}

/* No-JS / no-hover-intent fallback: the panel carries its own paintwork
   and opens on hover alone. The last menu right-aligns so a wide panel
   cannot push a right-hand nav off the viewport. */
.ddn:not(.on) .ddn-cols {
  background: var(--ddn-surface); border: 1px solid var(--ddn-line);
  border-radius: var(--ddn-radius);
  box-shadow: var(--ddn-shadow);
}
.ddn:not(.on) .ddn-item:hover > .ddn-drop,
.ddn:not(.on) .ddn-drop:focus-within {
  opacity: 1; pointer-events: auto; transform: none;
}
.ddn:not(.on) .ddn-item:last-child > .ddn-drop { left: auto; right: 0; }

/* With JS: the shared surface paints, the panel only holds content. */
.ddn.on .ddn-item.open > .ddn-drop { opacity: 1; pointer-events: auto; transform: none; }

.ddn-face {
  position: absolute; left: 0; top: 100%;
  margin-top: var(--ddn-gap);
  width: 0; height: 0; border-radius: var(--ddn-radius);
  background: var(--ddn-surface);
  border: 1px solid var(--ddn-line);
  box-shadow: var(--ddn-shadow);
  opacity: 0; pointer-events: none; z-index: 1;
  transition: transform .34s var(--ddn-ease-out),
              width .34s var(--ddn-ease-out),
              height .34s var(--ddn-ease-out),
              opacity .18s var(--ddn-ease);
}
.ddn-face.on { opacity: 1; }
.ddn:not(.on) .ddn-face { display: none; }

/* ---------- Panel contents ---------- */
.ddn-cols {
  display: flex; align-items: flex-start; gap: clamp(24px, 3vw, 40px);
  padding: 20px 22px; width: max-content;
  transition: opacity .16s var(--ddn-ease);
}
.ddn.on .ddn-cols { opacity: 0; }
.ddn.on .ddn-item.open > .ddn-drop .ddn-cols { opacity: 1; transition-duration: .22s; transition-delay: .04s; }

.ddn-col-title {
  margin: 0 0 14px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ddn-fg);
}
.ddn-col-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }

.ddn-link {
  display: flex; align-items: flex-start; gap: 12px;
  color: inherit; text-decoration: none; border-radius: 12px;
}
.ddn-ico {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  border: 1px solid var(--ddn-line-2); color: var(--ddn-fg-on);
  transition: background .25s var(--ddn-ease), color .25s var(--ddn-ease),
              border-color .25s var(--ddn-ease);
}
.ddn-ico svg {
  width: 19px; height: 19px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ddn-link:hover .ddn-ico, .ddn-link:focus-visible .ddn-ico {
  background: var(--ddn-tint); border-color: transparent; color: var(--ddn-accent);
}
.ddn-body { display: block; line-height: 1.35; }
.ddn-name { display: block; font-size: 14px; font-weight: 600; color: var(--ddn-fg-on); }
.ddn-desc {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--ddn-fg);
  max-width: 27ch; transition: color .25s var(--ddn-ease);
}
.ddn-link:hover .ddn-desc, .ddn-link:focus-visible .ddn-desc { color: var(--ddn-fg-on); }

/* ---------- Sign-in ---------- */
.ddn-cta {
  display: inline-flex; align-items: center; flex: none;
  padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  color: var(--ddn-cta-fg); background: var(--ddn-accent); text-decoration: none;
  box-shadow: 0 8px 22px -12px var(--ddn-cta-glow);
  transition: transform .25s var(--ddn-ease), box-shadow .25s var(--ddn-ease),
              background .25s var(--ddn-ease);
}
.ddn-cta:hover, .ddn-cta:focus-visible {
  background: var(--ddn-accent-2); transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px var(--ddn-cta-glow);
}

/* ---------- Burger (mobile only) ---------- */
.ddn-burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--ddn-line-2);
  border-radius: 12px; background: var(--ddn-chrome); color: var(--ddn-fg-on);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ddn-burger-bars, .ddn-burger-bars::before, .ddn-burger-bars::after {
  content: ""; display: block; width: 17px; height: 1.6px; border-radius: 2px;
  background: currentColor; transition: transform .3s var(--ddn-ease-out), opacity .2s var(--ddn-ease);
}
.ddn-burger-bars { position: relative; }
.ddn-burger-bars::before { position: absolute; top: -5.5px; }
.ddn-burger-bars::after  { position: absolute; top:  5.5px; }
.ddn-burger[aria-expanded="true"] .ddn-burger-bars { background: transparent; }
.ddn-burger[aria-expanded="true"] .ddn-burger-bars::before { transform: translateY(5.5px) rotate(45deg); }
.ddn-burger[aria-expanded="true"] .ddn-burger-bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   Small screens.

   The old bar hid every link but "Rep sign in" below 767px, so a phone
   could reach the portal and nothing else. Here the same markup becomes
   a drawer: the triggers turn into accordion headers and the panels
   stack in flow. The shared surface and the pill are desktop-only —
   there is no cursor to follow.
   ============================================================ */
@media (max-width: 900px) {
  .ddn-burger { display: inline-flex; }
  .ddn-face, .ddn-pill { display: none !important; }

  .ddn-bar {
    position: absolute; right: 0; top: calc(100% + 12px);
    width: min(340px, calc(100vw - 32px));
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px; border-radius: 18px;
    background: var(--ddn-chrome);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    border: 1px solid var(--ddn-line);
    box-shadow: var(--ddn-shadow-lg);
    max-height: min(76vh, 640px); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity .22s var(--ddn-ease), transform .28s var(--ddn-ease-out),
                visibility 0s linear .28s;
  }
  .ddn.menu-open .ddn-bar {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }

  .ddn-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .ddn-item { position: static; }
  .ddn-trigger, .ddn-flat {
    width: 100%; justify-content: space-between; padding: 12px 12px;
    font-size: 15.5px; color: var(--ddn-fg-on); border-radius: 12px;
  }
  .ddn-trigger:hover, .ddn-flat:hover { background: var(--ddn-tint); }

  /* In flow, and opened by height rather than by opacity. */
  .ddn-drop {
    position: static; padding-top: 0; opacity: 1; pointer-events: auto;
    transform: none; height: 0; overflow: hidden;
    transition: height .3s var(--ddn-ease-out);
  }
  .ddn:not(.on) .ddn-item:hover > .ddn-drop { height: auto; }
  .ddn:not(.on) .ddn-cols { background: none; border: 0; box-shadow: none; border-radius: 0; }
  .ddn.on .ddn-cols, .ddn.on .ddn-item.open > .ddn-drop .ddn-cols { opacity: 1; transition: none; }
  .ddn-cols {
    flex-direction: column; gap: 20px; width: auto;
    padding: 6px 12px 16px;
  }
  .ddn-col-title { margin-bottom: 11px; }
  .ddn-col-list { gap: 15px; }
  .ddn-desc { max-width: none; }
  .ddn-cta { justify-content: center; margin-top: 8px; }
}

/* The drawer is the only nav below 900px, so the bar must not be
   reachable while it is closed. */
@media (max-width: 900px) {
  .ddn-bar[hidden] { display: flex; }   /* JS uses classes, not [hidden] */
}

@media (prefers-reduced-motion: reduce) {
  .ddn-pill, .ddn-face, .ddn-drop, .ddn-cols, .ddn-chev,
  .ddn-ico, .ddn-cta, .ddn-bar, .ddn-burger-bars,
  .ddn-burger-bars::before, .ddn-burger-bars::after {
    transition-duration: .01ms !important;
  }
  .ddn-cta:hover { transform: none; }
}

/* ---------- Current page ----------
   The old bar carried aria-current with nothing to show for it. */
.ddn-item.current > .ddn-trigger, .ddn-flat[aria-current="page"] { color: var(--ddn-fg-on); }
.ddn-link[aria-current="page"] .ddn-name { color: var(--ddn-accent); }
.ddn-link[aria-current="page"] .ddn-ico {
  background: var(--ddn-tint); border-color: transparent; color: var(--ddn-accent);
}

/* ---------- Application mode ----------
   A marketing nav is made of links; an application's is made of buttons
   that switch a view without navigating. Same component, so the button
   has to be stripped back to behave like the anchor it replaces. */
button.ddn-link, button.ddn-flat {
  width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
button.ddn-flat { width: auto; padding: 7px 14px; }