/* ============================================================
   BSH NAV — dropdown menus
   Adds grouped <details>-based dropdown navigation. Lives next
   to the existing .n-brand / .n-links / .n-cta nav primitives
   so pages that already use those styles get dropdown support
   without rewiring their inline <style> blocks.
   ============================================================ */

/* Make sure the nav doesn't clip dropdowns. Existing pages set
   overflow:visible by default — guard against accidental hidden. */
nav{overflow:visible}

/* Allow .n-links to grow vertically on mobile when a dropdown
   is open (so the menu lives within the nav row, not floating). */
.n-links{align-items:center}

/* Dropdown wrapper. Replaces native <details> chrome with our
   own custom marker. */
.n-dd{position:relative;display:inline-block;list-style:none}
.n-dd > summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-2);
  transition:color .25s;
  font:inherit; /* inherit nav typography */
  user-select:none;
}
.n-dd > summary::-webkit-details-marker,
.n-dd > summary::marker{display:none}
.n-dd > summary::after{
  content:'';
  width:6px;
  height:6px;
  margin-left:4px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--e-out,cubic-bezier(.22,1,.36,1));
  opacity:.7;
}
.n-dd[open] > summary::after{transform:rotate(-135deg) translateY(0)}
.n-dd > summary:hover{color:var(--ink)}

/* Dropdown panel. Anchored under the trigger. Fades + slides in
   when the <details> is opened. */
.n-dd-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  min-width:300px;
  background:rgba(8,10,16,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-2,#2a3040);
  border-radius:3px;
  padding:8px 0;
  z-index:60;
  box-shadow:0 14px 44px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.3);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s var(--e-out,cubic-bezier(.22,1,.36,1));
}
.n-dd[open] > .n-dd-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Dropdown items. Inherit the mono uppercase nav voice but tighten
   the line height so the menu reads as a compact list. */
.n-dd-menu a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:11px 20px;
  color:var(--ink-2,#c4ccdc);
  font-family:var(--mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s,color .18s;
  border-left:2px solid transparent;
}
.n-dd-menu a:hover,
.n-dd-menu a:focus-visible{
  background:rgba(255,255,255,.04);
  color:var(--ink,#f3f5f8);
  border-left-color:var(--accent,#3d7dff);
  outline:none;
}
.n-dd-menu a .when{
  font-size:.66rem;
  color:var(--ink-3,#8f9ab0);
  letter-spacing:.18em;
  font-weight:500;
  margin-left:auto;
}
.n-dd-menu a:hover .when,
.n-dd-menu a:focus-visible .when{color:var(--ink-2)}
.n-dd-menu a.is-external::after{
  content:'↗';
  margin-left:6px;
  color:var(--accent,#3d7dff);
  font-size:.95em;
}
.n-dd-menu a.is-current{
  color:var(--ink);
  border-left-color:var(--accent-warm,#f4c542);
}

/* Optional section header inside the dropdown — used to badge a group
   (e.g. "Cannes 2026 · May") above its items. */
.n-dd-menu .n-dd-head{
  display:block;
  padding:8px 20px 6px;
  font-family:var(--mono,monospace);
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-3,#8f9ab0);
  font-weight:500;
}
.n-dd-menu .n-dd-divider{
  height:1px;
  background:var(--line,rgba(255,255,255,.06));
  margin:6px 0;
}

/* ============================================================
   MOBILE MENU — hamburger toggle + full-width stacked nav.
   bsh-nav.css loads AFTER each page's inline <style>, and these
   selectors (`nav .n-links`, 0,1,1) outrank the inline
   `.n-links{display:none}` (0,1,0), so we can set ONE consistent
   breakpoint (820px) regardless of whether a page hid the links
   at 760 or 900 in its own media query.
   ============================================================ */

/* Hamburger button — injected by bsh-nav.js. Hidden on desktop. */
.n-menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0 9px;
  border:1px solid var(--line-2,#2a3040);
  border-radius:3px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  flex-shrink:0;
  z-index:61;
}
.n-menu-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:var(--ink,#f3f5f8);
  border-radius:2px;
  transition:transform .28s var(--e-out,cubic-bezier(.22,1,.36,1)),opacity .2s;
}
nav.nav-open .n-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.nav-open .n-menu-toggle span:nth-child(2){opacity:0}
nav.nav-open .n-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Desktop ≥821px — links always visible (overrides any page that
   hid them below 900px), hamburger hidden. */
@media(min-width:821px){
  nav .n-links{display:flex}
  nav .n-menu-toggle{display:none}
}

/* Mobile ≤820px — hamburger shows, links collapse into a
   full-width sheet that drops below the bar when open. */
@media(max-width:820px){
  nav{flex-wrap:wrap}
  .n-menu-toggle{display:flex}

  nav .n-links{
    display:none;
    order:99;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-top:14px;
    padding-top:6px;
    border-top:1px solid var(--line,#1a1f2c);
    max-height:78vh;
    overflow-y:auto;
  }
  nav.nav-open .n-links{display:flex}

  /* Top-level items read as a tappable list */
  nav .n-links > a,
  nav .n-dd > summary{
    padding:15px 4px;
    font-size:.95rem;
    letter-spacing:.16em;
    border-bottom:1px solid var(--line,#1a1f2c);
  }
  nav .n-links > a::after{display:none} /* kill desktop underline animation */

  .n-dd{display:block;width:100%}
  .n-dd > summary::after{margin-left:auto}

  /* Dropdown panels open inline, full-width */
  .n-dd-menu{
    position:static;
    margin:0 0 6px;
    min-width:0;
    width:100%;
    box-shadow:none;
    transform:none;
    border:none;
    background:rgba(255,255,255,.02);
    border-radius:0;
    padding:4px 0 8px;
  }
  .n-dd[open] > .n-dd-menu{transform:none}
  .n-dd-menu a{padding:11px 16px}

  /* In-menu CTA button stretches full width */
  nav .n-links .n-cta{
    display:inline-flex;
    justify-content:center;
    margin-top:14px;
    width:100%;
  }
}