/* ═══════════════════════════════════════════════════════════════════════════════════════
   The Products dropdown — shared by every page that carries <nav class="nav">.

   This is the one piece of nav that has to be IDENTICAL on every page, so it is the one
   piece that is not copied into each page's <style>. It reads the tokens the nav pages
   already define (index.html's set: --carbon, --line, --line2, --alum, --porcelain, --pad,
   --r-md, --body, --mono) and adds no colour of its own. It is NOT pages.css: that file is
   the older #0B0C10 world and no nav page loads it.

   Two surfaces, one script (nav-products.js):
     .nav-prod-panel    the desktop pop-over, absolute under the bar so it never pushes the page
     .nav-prod-panel-m  the phone disclosure, in flow inside the existing .nav-menu
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* the pop-over hangs from the bar's content box, so its right edge is the CTA's right edge */
.nav-in{position:relative}
/* the button is taller than an unpadded link (watch.html); centre the row rather than let
   the links stretch to it and sit high */
.nav-links{align-items:center}

.nav-prod{display:flex;align-items:center}
.nav-prod-btn{appearance:none;background:none;border:0;padding:9px 2px;margin:0;
  font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;
  white-space:nowrap;transition:color .2s}
.nav-prod-btn:hover,.nav-prod-btn[aria-expanded=true]{color:var(--porcelain)}
/* the chevron is drawn, not a glyph, so it cannot fall back to a different font */
.nav-prod-btn::after{content:"";width:6px;height:6px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-prod-btn[aria-expanded=true]::after{transform:translateY(1px) rotate(225deg)}

/* ---- desktop: the pop-over ---- */
.nav-prod-panel{position:absolute;top:calc(100% + 8px);right:var(--pad);z-index:61;
  width:min(640px,calc(100vw - 2*var(--pad)));
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px;
  padding:22px 24px 20px;background:var(--surface-2,#101319);
  border:1px solid var(--line2);border-radius:var(--r-md,12px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.6)}
/* display:grid would beat the UA's [hidden]{display:none}; say it again here */
.nav-prod-panel[hidden]{display:none}
.nav-prod-h{display:block;margin:0 0 6px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--alum);font-weight:400}
.nav-prod-panel a{display:block;padding:7px 0;color:var(--porcelain);font-size:14.5px;
  line-height:1.3;text-decoration:none;transition:color .2s}
.nav-prod-panel a:hover{color:var(--cobalt-hi,#4C79FF)}
.nav-prod-panel a[aria-current=page]{color:var(--cobalt-hi,#4C79FF)}
.nav-prod-panel .nav-prod-all{grid-column:1/-1;margin-top:2px;padding-top:14px;
  border-top:1px solid var(--line);color:var(--alum);font-size:14px}
.nav-prod-panel .nav-prod-all:hover{color:var(--porcelain)}

/* ---- phone: the disclosure inside .nav-menu ----
   The button takes the row style of the links beside it; the open panel indents its links
   under the group label so the eye reads them as one item's contents. */
.nav-menu .nav-prod{display:block}
.nav-menu .nav-prod-btn{display:flex;width:100%;justify-content:space-between;
  padding:13px 2px;font-size:16px;color:var(--porcelain)}
.nav-menu .nav-prod-btn::after{margin-right:6px}
.nav-prod-panel-m{padding:2px 0 8px;border-top:1px solid var(--line)}
.nav-prod-panel-m[hidden]{display:none}
.nav-prod-panel-m .nav-prod-h{margin:10px 0 2px 2px}
.nav-menu .nav-prod-panel-m a{padding:7px 2px 7px 14px;font-size:15.5px;border-bottom:0}
.nav-menu .nav-prod-panel-m .nav-prod-all{margin-top:8px;padding-left:2px;color:var(--alum);
  font-size:14px}
/* the page's own product is marked in the disclosure as it is in the pop-over; written after
   the two colour rules above so it wins */
.nav-menu .nav-prod-panel-m a[aria-current=page]{color:var(--cobalt-hi,#4C79FF)}
/* a phone menu that grows past the screen must scroll, not clip */
.nav-menu{max-height:calc(100dvh - 60px);overflow-y:auto}

/* index.html carries seven links, and below ~940px its brand was already being squeezed by
   them. This eighth item must not widen that window or push the CTA off the page, so the
   row gaps tighten here rather than the breakpoint moving. */
@media(min-width:821px) and (max-width:1100px){ .nav-links{gap:12px} .nav-in{gap:20px} }
@media(min-width:821px) and (max-width:960px){ .nav-links{gap:8px} .nav-in{gap:14px}
  /* index.html's brand is flex-shrunk under its seven links here and "Studio" was landing on
     top of "Systems"; the wordmark keeps its size and the word goes until the row has room */
  .nav-brand{flex:0 0 auto} .nav-brand span{display:none} }

@media(prefers-reduced-motion:reduce){
  .nav-prod-btn,.nav-prod-btn::after,.nav-prod-panel a{transition:none}
}