/* Site header navigation, shared by every page with the site header.
   Markup comes from tools/render-nav.mjs; behaviour from nav.js.
   - Wide screens: the links sit in the header, as before.
   - Narrow screens with nav.js: a hamburger button opens a panel under the header.
   - Narrow screens without nav.js: the links wrap under the brand, so they stay reachable. */
.has-site-nav { justify-content: space-between; }
.has-site-nav .nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); margin: 0; padding: 0; }
.has-site-nav .nav-links a { color: #aeb5bc; text-decoration: none; border: 0; font: 600 .8rem/1 "Barlow Condensed", sans-serif; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; transition: color .2s ease; }
.has-site-nav .nav-links a:hover, .has-site-nav .nav-links a:focus-visible, .has-site-nav .nav-links a[aria-current="page"] { color: #33ddff; }
.has-site-nav .nav-links a:focus-visible, .site-nav-toggle:focus-visible { outline: 2px solid #33ddff; outline-offset: 4px; }
.has-site-nav .nav-links .nav-cta { padding: .8rem 1.2rem; border: 1px solid rgba(0, 199, 242, .34); border-radius: 999px; color: #f4f6f7; background: rgba(0, 199, 242, .06); }
.site-nav-toggle, .site-nav-backdrop { display: none; }

/* Jobs page: the "Secure application" label gives way to the links on mid-size screens. */
@media (max-width: 1180px) { .has-site-nav .secure-label { display: none; } }

@media (max-width: 900px) {
  /* Without nav.js: wrap the links under the brand. */
  html:not(.site-nav-js) .has-site-nav { flex-wrap: wrap; height: auto; row-gap: .8rem; padding-block: .9rem; }
  html:not(.site-nav-js) .has-site-nav .nav-links { flex: 1 1 100%; flex-wrap: wrap; gap: .9rem 1.3rem; }

  /* With nav.js: hamburger button and a panel under the sticky header. */
  .site-nav-js .site-nav-header { position: sticky; top: 0; z-index: 100; }
  .site-nav-js .site-nav-toggle { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; margin: 0 0 0 auto; padding: 0; border: 1px solid rgba(203, 208, 213, .2); border-radius: 12px; background: rgba(255, 255, 255, .03); color: #f4f6f7; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .site-nav-js .site-nav-toggle[hidden] { display: none; }
  .site-nav-js .site-nav-toggle[aria-expanded="true"] { border-color: rgba(0, 199, 242, .45); color: #33ddff; }
  .site-nav-toggle-icon { position: relative; display: block; width: 20px; height: 14px; }
  .site-nav-toggle-icon span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
  .site-nav-toggle-icon span:nth-child(1) { top: 0; }
  .site-nav-toggle-icon span:nth-child(2) { top: 6px; }
  .site-nav-toggle-icon span:nth-child(3) { top: 12px; }
  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon span:nth-child(2) { opacity: 0; }
  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .site-nav-js .has-site-nav .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 101;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--site-nav-top, 68px));
    max-height: calc(100dvh - var(--site-nav-top, 68px));
    overflow-y: auto; overscroll-behavior: contain;
    padding: .4rem max(20px, env(safe-area-inset-right)) 1.6rem max(20px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(8, 10, 12, .985); box-shadow: 0 26px 50px rgba(0, 0, 0, .55);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .site-nav-open .has-site-nav .nav-links { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
  .site-nav-js .has-site-nav .nav-links a { display: flex; align-items: center; min-height: 52px; padding: .9rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 1rem; letter-spacing: .12em; }
  .site-nav-js .has-site-nav .nav-links .nav-cta { justify-content: center; margin-top: 1.1rem; padding: .95rem 1.2rem; border: 1px solid rgba(0, 199, 242, .34); }
  .site-nav-js .site-nav-backdrop { display: block; position: fixed; top: var(--site-nav-top, 0); right: 0; bottom: 0; left: 0; z-index: 99; background: rgba(0, 0, 0, .55); }
  .site-nav-js .site-nav-backdrop[hidden] { display: none; }
  .site-nav-open, .site-nav-open body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .has-site-nav .nav-links, .has-site-nav .nav-links a, .site-nav-toggle-icon span { transition: none !important; }
  .site-nav-js .has-site-nav .nav-links { transform: none; }
}