/*
 * Site navigation — solid bar + mobile menu card.
 * Loaded after pointer-by-shakuro.css; overrides the legacy Webflow header styles.
 *
 * THEME: two static themes, and a page picks one on <header> and keeps it.
 *   default        dark bar,  white content   — homepage, FAQs, terms
 *   .navbar-light  white bar, dark content    — clinical validation
 * Nothing changes the colours at runtime: the .light-section IntersectionObserver
 * and the .header-scrolled colour rules that used to repaint the bar mid-scroll
 * were removed from every page. Both themes are defined here and nowhere else —
 * if a page needs the light bar, add the class, don't add CSS.
 */

/* Desktop: no horizontal padding, so the bar is positioned by nothing but its
   .container — the same box the hero headline sits in. That is what puts the
   bar's left edge on the headline's left edge (Figma 1440, node 4039:9193), and
   why this file declares no widths of its own. Below 992px the bar becomes a
   floating card and the padding is its inset (see the media query below). */
.navbar {
  /* Dark theme. Two values drive the whole bar — the background, and a
     foreground that everything else inherits or draws with currentColor
     (wordmark, links, burger lines), so a theme is never more than this pair. */
  --navbar-bg: rgba(34, 34, 34, 0.7);
  --navbar-border: transparent;
  --navbar-fg: var(--_colors---mono-100, #fff);

  padding: 24px 0 0;
  color: var(--navbar-fg);
}

/* Light theme — set on <header class="navbar navbar-light"> */
.navbar.navbar-light {
  --navbar-bg: rgba(255, 255, 255, 0.7);
  --navbar-border: rgba(255, 255, 255, 0.3);
  --navbar-fg: var(--_colors---mono-900, #121219);
}

/* The bar's box is a plain .container: it takes its max-width from
   --container-max (layout.css) like every other block on the page, so it cannot
   drift from the hero. This rule adds stacking only — no sizing. */
.navbar .container.header-container {
  position: relative;
  /* keep the bar (logo / burger / CTA) above the mobile menu overlay (z-index: 90) */
  z-index: 100;
}

/* The bar itself. Translucent: the theme's colour at 70% opacity, blurring
   whatever scrolls underneath via backdrop-filter (Chrome/Edge/Firefox support
   it unprefixed; -webkit- covers Safari). */
.navbar .navbar-wrapper {
  background-color: var(--navbar-bg);
  border: 1px solid var(--navbar-border);
  border-radius: 8px;
  padding: 12px 12px 12px 16px;
  gap: 16px;
  color: inherit;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Brand: full wordmark drawn with currentColor */
.navbar .navbar-brand,
.navbar .navbar-brand.mobile {
  width: auto;
  min-width: 0;
  height: 28px;
  padding: 0;
  color: inherit;
  border-radius: 0;
  display: flex;
  align-items: center;
}

.navbar .navbar-logo {
  height: 28px;
  width: auto;
  display: block;
}

/* Links row (desktop) */
.navbar .navigation-wrapper {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.navbar .nav-menu-wrapper {
  display: flex;
  position: static;
  height: auto;
  background-color: transparent;
  padding: 0;
  float: none;
}

.navbar .nav-menu-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar .nav-link {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  display: block;
  width: auto;
  text-decoration: none;
}

.navbar .link-text {
  color: inherit;
  font-size: 14px;
  line-height: 20px;
  transition: color 0.2s ease;
}

/* Hover: colour change + underline. text-decoration draws outside the box
   model, so neither adds layout shift. */
.navbar .nav-link:hover .link-text,
.navbar .header-nav-item:hover .link-text {
  color: var(--_colors---colors-brand-orange, #ff6000);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.navbar .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar .header-actions .button-filled {
  display: flex;
  padding: 13px 21px;
  max-height: 44px;
  font-size: 14px;
  line-height: 20px;
  color: var(--_colors---mono-100, #fff);
}

/* Keep the CTA legible when it un-fills on hover over a light bar
   (or inside the white mobile menu card) */
.navbar.navbar-light .button-filled:hover,
.navbar .nav-menu-cta:hover {
  color: var(--_colors---colors-brand-orange, #ff6000);
  border-color: var(--_colors---colors-brand-orange, #ff6000);
}

/* The legacy stylesheet sets `a { cursor: default }` below 1000px —
   restore the pointer on everything clickable in the nav */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .menu-button,
.navbar .header-actions .button-filled,
.navbar .nav-menu-cta {
  cursor: pointer;
}

/* Burger icon (two lines, per design) */
.navbar .menu-button {
  display: none;
  width: 44px;
  max-width: 44px;
  height: 44px;
  max-height: 44px;
  padding: 6px;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.navbar .menu-button.w--open {
  background-color: transparent;
}

.navbar .navbar-menu-burger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 25px;
  height: 100%;
  padding: 0;
}

.navbar .navbar-menu-burger-line-up,
.navbar .navbar-menu-burger-line-down {
  height: 2px;
  background-color: currentColor;
  border-radius: 0;
  padding: 0;
  transition: transform 0.3s ease, width 0.3s ease;
}

.navbar .navbar-menu-burger-line-up {
  width: 25px;
}

.navbar .navbar-menu-burger-line-down {
  width: 15px;
}

/* Burger morphs into the design's X when the menu is open.
   !important: a legacy Webflow interaction writes inline transforms
   (translate3d ±2px, tuned for the old 2px-gap burger) that would
   otherwise win over the stylesheet and leave the X arms apart. */
.navbar .menu-button.w--open .navbar-menu-burger-line-up {
  transform: translateY(6px) rotate(45deg) !important;
  width: 22px;
}

.navbar .menu-button.w--open .navbar-menu-burger-line-down {
  transform: translateY(-6px) rotate(-45deg) !important;
  width: 22px;
}

/* Mobile-menu-only blocks are hidden while the menu renders inline (desktop) */
.navbar .nav-menu-footer {
  display: none;
}

/* ---------------------------------------------------------------- */
/* Mobile / tablet (< 992px): links collapse into the hamburger card */
/* ---------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .navbar {
    padding: 8px 8px 0;
  }

  /* Here the bar is not container-aligned: it is a card inset by the padding
     above, the same 8px the open-menu overlay uses so the two share edges when
     the bar melts into the menu card. */
  .navbar .container.header-container {
    max-width: none;
  }

  .navbar .navbar-wrapper {
    padding: 8px 10px;
    gap: 8px;
  }

  .navbar .navbar-brand,
  .navbar .navbar-brand.mobile,
  .navbar .navbar-logo {
    height: 28px;
  }

  .navbar .menu-button {
    display: flex;
  }

  /* Menu open: the bar melts into the white card below it, so it borrows the
     light theme's foreground whichever theme the page is on. This is a state,
     not a second theme — the page's own colours are untouched underneath.
     body.stop-scroll is the same state for browsers without :has(). */
  .navbar:has(.menu-button.w--open),
  body.stop-scroll .navbar {
    --navbar-fg: var(--_colors---mono-900, #121219);
  }

  .navbar:has(.menu-button.w--open) .navbar-wrapper,
  body.stop-scroll .navbar .navbar-wrapper {
    background-color: transparent;
  }

  .navbar:has(.menu-button.w--open) .header-actions .button-filled {
    display: none;
  }

  /* Menu open: the CTA is gone (rule above), leaving just the wordmark
     opposite the close X — bump it up from the closed-state 24px so it
     doesn't read as smaller/lighter than the X it's now balanced against. */
  .navbar:has(.menu-button.w--open) .navbar-brand,
  .navbar:has(.menu-button.w--open) .navbar-logo,
  body.stop-scroll .navbar .navbar-brand,
  body.stop-scroll .navbar .navbar-logo {
    height: 32px;
  }

  /* Full-viewport overlay holding the white card, inset 8px */
  .navbar .w-nav-overlay {
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh;
    padding: 8px;
    z-index: 90;
  }

  .navbar .w-nav-overlay .nav-menu-wrapper {
    width: 100%;
    height: 100%;
    background-color: var(--_colors---mono-100, #fff);
    border-radius: 8px;
    padding: 96px 16px 48px;
    inset: auto;
    overflow-y: auto;
  }

  .navbar .nav-menu-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .navbar .w-nav-overlay .nav-menu-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .navbar .w-nav-overlay .nav-link {
    padding: 8px 0;
  }

  .navbar .w-nav-overlay .link-text {
    color: var(--_colors---mono-900, #121219);
    font-size: 18px;
    line-height: 30px;
  }

  /* Bottom of the card: the full-width CTA (LinkedIn + copyright live in the
     site footer only, not duplicated here). */
  .navbar .nav-menu-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: auto;
    padding-top: 40px;
  }

  .navbar .nav-menu-cta {
    width: 100%;
    max-height: 52px;
    padding: 17px 21px;
    font-size: 16px;
    line-height: 20px;
    color: var(--_colors---mono-100, #fff);
    display: flex;
  }
}