/*
 * The small-screen navigation, shared by every page.
 *
 * Every page used to set `.nav__links { display: none }` below its own
 * breakpoint — 760px on two pages, 860px on the other two — with nothing
 * behind it. On a phone the only way to reach Product, Company or What is
 * Demand Engineering was the footer, and between 760 and 860 one page showed
 * its links while the next did not.
 *
 * This replaces all of that: one breakpoint, and a disclosure that puts the
 * same links in a panel under the bar. No JavaScript — the checkbox is the
 * state, which also means it works before any script has run.
 */

/* ---- the bar itself ----------------------------------------------------
 * One definition for every page. Four of them used to carry their own copy
 * and had drifted apart: the home page sat the logo at 26px with 40px gaps
 * and a hairline that only appeared once you scrolled, the other three at
 * 21px with 34px gaps and a permanent one, so the mark changed size and the
 * links moved the moment you left home. The three that agreed win.
 *
 * A page that needs a different bar (the company hero inverts over a photo)
 * overrides from its own stylesheet, which loads after this one.
 */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgb(255 255 255 / 0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}
.nav__in { position: relative; height: 68px; display: flex; align-items: center; gap: 34px; }
.nav__logo img { height: 21px; display: block; }
.nav__links { display: flex; gap: 26px; }
.nav__links a { font-size: 14.5px; font-weight: 500; color: var(--charcoal); }
.nav__links a:hover { color: var(--blue); }
.nav__links a[aria-current='page'] { color: var(--blue); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav__right > a:first-child { font-size: 14.5px; font-weight: 600; }

/* Visually gone but still focusable and still announced: `display: none`
   took it out of the tab order entirely, which left the menu unreachable
   by keyboard and made the focus ring below dead code. */
.nav__toggle {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}

.nav__burger {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--divider); border-radius: 9px;
  background: #fff; cursor: pointer; color: var(--black);
}
.nav__burger:hover { border-color: var(--stroke-blue); color: var(--blue); }
.nav__toggle:focus-visible + .nav__burger { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav__burger span {
  position: relative;
  display: block; width: 17px; height: 1.5px; background: currentColor;
}
.nav__burger span::before,
.nav__burger span::after {
  content: ''; position: absolute; left: 0;
  width: 17px; height: 1.5px; background: currentColor;
}
.nav__burger span::before { top: -5.5px; }
.nav__burger span::after { top: 5.5px; }

@media (max-width: 900px) {
  .nav__burger { display: flex; }

  /* The bar keeps only the logo and the burger; everything else moves into
     the panel, so the row cannot overflow however long the labels get.
     Scoped through the parent because each page declares its own
     `.nav__right { display: flex }` in a stylesheet that loads after this
     one, and at equal specificity the later rule wins. */
  .nav__in > .nav__links,
  .nav__in > .nav__right { display: none; }

  .nav__panel {
    position: absolute; top: 100%; left: 0; right: 0;
    display: grid; gap: 2px;
    padding: 10px 24px 18px;
    /* Opaque, not translucent: the page behind it is dense type and a .97
       white plus a backdrop blur still let the headline read through. */
    background: #fff;
    border-bottom: 1px solid var(--divider);
    box-shadow: 0 18px 30px -22px rgb(6 65 111 / .35);
    /* Closed by default, and closed means zero height rather than hidden, so
       nothing inside it is focusable while it is shut. */
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .22s ease, visibility 0s linear .22s;
  }
  .nav__toggle:checked ~ .nav__panel {
    max-height: 60vh; visibility: visible;
    transition: max-height .26s ease, visibility 0s;
  }
  .nav__panel a {
    padding: 13px 2px;
    font-size: 16px; font-weight: 500; color: var(--black);
    border-bottom: 1px solid var(--frost);
  }
  .nav__panel a:last-of-type { border-bottom: 0; }
  .nav__panel a[aria-current='page'] { color: var(--blue); }
  .nav__panel .btn { margin-top: 12px; justify-content: center; }
}

@media (min-width: 901px) {
  .nav__panel { display: none; }
  .nav__toggle { display: none; }
}

/* ---- large screens ----
   The bar is a fixed 68px everywhere else, which reads as a thin strip once the
   viewport is twice the width it was drawn for. */
@media (min-width: 1600px) {
  .nav__in { height: 78px; gap: 40px; }
  .nav__logo img { height: 23px; }
  .nav__links a, .nav__right > a:first-child { font-size: 15.5px; }
}

@media (min-width: 2100px) {
  .nav__in { height: 86px; gap: 46px; }
  .nav__logo img { height: 25px; }
  .nav__links a, .nav__right > a:first-child { font-size: 16.5px; }
}