/* ==========================================================================
   SITE HEADER
   --------------------------------------------------------------------------
   neon.com structure (29 Sep): a flat full-width bar — wordmark left, the
   links right beside it, actions pushed right — and a full-width mega
   drawer under Products whose columns line up with the first link.
   Shared by every page; the themes decide the rest (--font-nav, and
   --radius-control: pill on pine/v1, square on ember-light/v2).
   No literal colours: everything resolves to a token.
   ========================================================================== */

/* Three wrappers, as everywhere:

     <div id="navbar-placeholder">          sticky
       <header class="nav site-header">     the bar, full width, drawer anchor
         <div class="padding-global">
           <div class="container nav__inner">

   --nav-logo-w reserves the wordmark's column. The links start right after
   it, and the drawer indents by the same amount, so "Products" and the
   drawer's first column share one left edge. */
:root { --nav-logo-w: 188px; }

#navbar-placeholder {           /* the sticky element is the WRAPPER, not the bar */
  position: sticky; top: 0; z-index: 998;
  min-height: calc(var(--nav-h) + var(--nav-float));
  padding-top: calc(var(--nav-float) + env(safe-area-inset-top, 0px));
  /* Pull the page up under the bar so a full-bleed .scene hero runs beneath
     it. Anything else gets the space back via the sibling rule. */
  margin-bottom: calc(-1 * (var(--nav-h) + var(--nav-float)));
  pointer-events: none;         /* the wrapper never blocks clicks */
}
#navbar-placeholder + :not(.scene) { margin-top: calc(var(--nav-h) + var(--nav-float)); }
html { scroll-padding-top: calc(var(--nav-h) + var(--space-5)); }

.nav {
  position: relative;           /* the drawer's containing block */
  pointer-events: auto;
  --nav-bg: color-mix(in srgb, var(--ground) 88%, transparent);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
}
/* With the drawer open, bar and drawer read as one solid surface. */
.nav:has(.nav-panel:not([hidden])) { background: var(--ground); }
/* (6 Oct) On phones the toolbar resizing the viewport can leave a
   sub-pixel sliver above the sticky bar, showing the page scrolling
   behind it. The bar's own background reaches 4px above its top edge
   so that sliver is always covered. */
.site-header::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 4px;
  background: var(--nav-bg, var(--ground)); pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: color-mix(in srgb, var(--ground) 96%, transparent); }
}

.nav__inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
}

/* Wordmark: the drawn lockup, inlined so fill="currentColor" takes the
   active theme's --heading. One file serves every theme. */
.wordmark {
  flex: 0 0 var(--nav-logo-w);
  display: flex;
  align-items: center;
  color: var(--heading);
  text-decoration: none;
}
.wordmark__logo { display: block; height: 26px; width: auto; }
/* Placeholder until AdPilot has a logo: the mark (a mask of mark.svg, so it
   takes the text colour) beside the name as live text. */
.wordmark { gap: 0.5em; font-family: var(--font-display, inherit); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.wordmark__mark { width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url(../img/brand/mark.svg) center / contain no-repeat; mask: url(../img/brand/mark.svg) center / contain no-repeat; }
.wordmark:hover { opacity: 0.8; }

/* ---------------------------------------------------------------- NAV */

/* Links fill the bar's full height, so the pointer travels from a trigger
   straight into the drawer below without ever leaving its <li>. */
.site-nav { align-self: stretch; }
.site-nav ul {
  display: flex;
  align-items: stretch;
  gap: var(--space-6);
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li { display: flex; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-nav, var(--font-control));
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-base) var(--motion-ease);
}
.nav-link:hover,
.nav-link[aria-expanded="true"] { color: var(--heading); }
.nav-link .caret {
  --icon-size: 14px;
  opacity: 0.7;
  transition: transform var(--motion-base) var(--motion-ease);
}
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ------------------------------------------------------------ DRAWER */

/* Full width: anchored to .nav, not to the <li> that holds it. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: var(--space-7) var(--space-8);
  background: var(--ground);
  border-bottom: var(--border-w) solid var(--line);
  cursor: default;
}

/* Slide-down (desktop only). The drawer is revealed top-to-bottom by a
   clip, while its columns drop in slightly behind it; closing runs the same
   motion back up, faster. `hidden` still drives it: @starting-style gives the
   opening frame, and allow-discrete holds display until the close finishes.
   Browsers without these simply open and close instantly, as before. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .nav-panel {
    clip-path: inset(0 0 0 0);
    transition:
      clip-path 340ms cubic-bezier(0.2, 0.8, 0.2, 1),
      display 340ms allow-discrete;
  }
  .nav-panel[hidden] {
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path 220ms cubic-bezier(0.4, 0, 1, 1),
      display 220ms allow-discrete;
  }
  @starting-style {
    .nav-panel:not([hidden]) { clip-path: inset(0 0 100% 0); }
  }

  .nav-panel .mega > * {
    transition: opacity 300ms ease-out, translate 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .nav-panel .mega > :nth-child(2) { transition-delay: 40ms; }
  .nav-panel .mega > :nth-child(3) { transition-delay: 80ms; }
  .nav-panel[hidden] .mega > * {
    opacity: 0;
    translate: 0 -10px;
    transition-duration: 160ms;
    transition-delay: 0ms;
  }
  @starting-style {
    .nav-panel:not([hidden]) .mega > * { opacity: 0; translate: 0 -10px; }
  }
}

.mega {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--space-7);
  padding-left: var(--nav-logo-w);
}
.mega__col { display: flex; flex-direction: column; gap: var(--space-5); }
.mega__label {
  font-family: var(--font-nav, var(--font-control));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mega__col a {
  display: block;
  text-decoration: none;
  font-family: var(--font-nav, var(--font-control));
}
.mega__col strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.mega__col span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
  transition: color var(--motion-base) var(--motion-ease);
}
/* Hover is an opacity play, not an underline: the item under the pointer
   (or focus) stays solid while its neighbours fall back. */
.mega__col a,
.mega__tile { transition: opacity 200ms var(--motion-ease); }
.mega__col:has(a:hover, a:focus-visible) a:not(:hover, :focus-visible),
.mega--tiles:has(.mega__tile:hover, .mega__tile:focus-visible) .mega__tile:not(:hover, :focus-visible) { opacity: 0.4; }
.mega__col a:hover span { color: var(--ink); }

/* Platform drawer: a 2×2 of neon.com-style cards — title and description
   left, a small icon diagram right in which one to three marks are lit in
   the accent. Descriptions are each destination page's h1 on the live site,
   verbatim. The diagrams are Lucide symbols composed in an inline SVG:
     overview      one layer branching to the four modules
     interfaces    desktop, terminal and chat feeding one work item
     security      a grid of shields, a few of them checked
     integrations  source systems converging on one connector */
.mega--tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.mega__tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  min-height: 176px;
  padding: 20px 24px;
  border: var(--border-w) solid var(--line);
  background: var(--ground-2);
  text-decoration: none;
  font-family: var(--font-nav, var(--font-control));
}
.mega__tile strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--heading);
}
.mega__tile span {
  display: block;
  max-width: 28ch;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.pviz { display: block; width: 170px; height: 120px; overflow: visible; }
.pviz use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.pviz .dim  { color: color-mix(in srgb, var(--heading) 26%, var(--ground-2)); }
.pviz .base { color: color-mix(in srgb, var(--heading) 70%, var(--ground-2)); }
.pviz .lit  { color: var(--accent); }
.pviz .wire { fill: none; stroke: color-mix(in srgb, var(--heading) 24%, var(--ground-2)); stroke-width: 1.25; }
.pviz .frame { fill: none; stroke: color-mix(in srgb, var(--heading) 45%, var(--ground-2)); stroke-width: 1.25; }
.pviz .frame.lit { stroke: var(--accent); }

/* Feature card: a dot field that fades out toward the copy (bottom-left),
   so the text always sits on plain --ground-2. */
.mega__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--space-6);
  overflow: hidden;
  background: var(--ground-2);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-nav, var(--font-control));
}
.mega__card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--mega-dot, var(--line)) 1.1px, transparent 1.7px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(to bottom left, black 0%, transparent 72%);
          mask-image: linear-gradient(to bottom left, black 0%, transparent 72%);
  transition: opacity var(--motion-base) var(--motion-ease);
}
.mega__card:hover::before { opacity: 0.7; }
.mega__card strong,
.mega__card span { position: relative; }
.mega__card strong {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.mega__card span {
  margin-top: var(--space-2);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- ACTIONS */

.site-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Header controls: compact, set in the nav face. Shape comes from the
   theme's --radius-control (pill on pine, square on ember-light). */
.site-actions .btn {
  min-height: 38px;
  padding-inline: 18px;
  gap: 0;
  font-family: var(--font-nav, var(--font-control));
  font-size: var(--btn-size, 16px);
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* Secondary: a filled block one step lighter than the ground, no border —
   the white primary's quieter partner (reference: "Book a Demo" grey fill). */
.site-actions .btn:not(.btn--brand) {
  background: color-mix(in srgb, var(--heading) 12%, var(--ground));
  color: var(--heading);
  border-color: transparent;
}
.site-actions .btn:not(.btn--brand):hover {
  background: color-mix(in srgb, var(--heading) 20%, var(--ground));
}

/* The shortcut chip. Still used by page buttons; header buttons dropped
   theirs for the cleaner bar, but their data-shortcut keys still work. */
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: calc(var(--radius-control) * 0.5);
  background: var(--badge-shade);
  font-family: var(--font-control);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: inherit;
}

/* ---------------------------------------------------------------- MOBILE */

.nav-toggle { display: none; }

@media (max-width: 991px) {
  .site-nav, .site-actions { display: none; }
  .wordmark { flex-basis: auto; margin-right: auto; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    padding-inline: 0;
    background: none;
    border: var(--border-w) solid color-mix(in srgb, var(--heading) 34%, transparent);
    border-radius: var(--radius-control);
    font-family: var(--font-nav, var(--font-control));
    font-size: 15px;
    color: var(--heading);
    cursor: pointer;
  }

  /* Hamburger (6 Oct): three bars that fold into a close mark when open. */
  .nav-toggle__bars { position: relative; display: block; width: 18px; height: 12px; }
  .nav-toggle__bars i {
    position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor;
    transition: top 200ms var(--motion-ease, ease), rotate 200ms var(--motion-ease, ease), opacity 150ms;
  }
  .nav-toggle__bars i:nth-child(1) { top: 0; }
  .nav-toggle__bars i:nth-child(2) { top: 5.25px; }
  .nav-toggle__bars i:nth-child(3) { top: 10.5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { top: 5.25px; rotate: 45deg; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { top: 5.25px; rotate: -45deg; }

  .site-header.is-open { background: var(--ground); }
  .site-header.is-open .nav__inner {
    height: auto;
    min-height: var(--nav-h);
    flex-wrap: wrap;
    align-items: center;
    padding-block: 12px var(--space-5);
    row-gap: var(--space-4);
  }
  /* The toggle comes last in the markup; order keeps it beside the
     wordmark once the menu wraps open beneath them. */
  .nav-toggle { order: 1; }
  .site-header.is-open .site-nav,
  .site-header.is-open .site-actions {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
  }
  .site-header.is-open .site-nav ul { flex-direction: column; height: auto; gap: 0; }
  .site-header.is-open .site-nav li { flex-direction: column; }
  .site-header.is-open .nav-link { padding-block: var(--space-3); font-size: 17px; }

  /* The drawer folds into the stacked menu; the feature card is dropped. */
  .site-header.is-open .nav-panel {
    position: static;
    padding: var(--space-2) 0 var(--space-4);
    background: none;
    border: 0;
  }
  .site-header.is-open .nav-panel .padding-global { padding-inline: 0; }
  .mega { grid-template-columns: 1fr; padding-left: 0; gap: var(--space-6); }
  .mega--tiles { grid-template-columns: 1fr; gap: 0; }
  .mega__tile { display: block; min-height: 0; padding: var(--space-3) 0; border: 0; background: none; }
  .mega__tile strong { font-size: 17px; }
  .mega__tile span { margin-top: 2px; font-size: 14px; }
  .pviz { display: none; }
  .mega__card { display: none; }
  .site-header.is-open .site-actions .btn { justify-content: center; }
}