/* ==========================================================================
   menu.css — the site navigation.

   Hand-written, self-contained replacement for the Webflow nav: no Webflow
   classes, no `data-w-id`, no interaction runtime, no jQuery. Behaviour lives in
   js/menu.js (~120 lines) and is limited to three things: open/close the
   solutions dropdown, open/close the mobile panel, and add `is-compact` once the
   page is scrolled.

   Colours, fonts, radii and spacing come from the tokens in bindworks.css, with
   literal fallbacks so the menu also renders correctly on its own.

   Markup contract (see any page in the repo for the full block):

     <header class="bw-nav" data-bw-nav>
       <div class="bw-nav__inner">
         <a class="bw-nav__logo">…</a>
         <nav class="bw-nav__menu" id="bw-nav-menu">
           <a class="bw-nav__link">…</a>
           <div class="bw-nav__group" data-bw-nav-group>
             <button class="bw-nav__link bw-nav__toggle" aria-expanded="false">…</button>
             <div class="bw-nav__panel">…</div>
           </div>
           …
         </nav>
         <div class="bw-nav__actions">
           <a class="bw-nav__cta">…</a>
           <button class="bw-nav__burger" aria-expanded="false">…</button>
         </div>
       </div>
     </header>

   Breakpoint: 992px — the same one bindworks.css uses.
   ========================================================================== */

.bw-nav {
  --bw-nav-height: 80px;
  /* same height as the top state — scrolling changes the shape, not the size,
     which is how the original bar behaved */
  --bw-nav-height-compact: 80px;
  --bw-nav-bg: var(--white, #fff);
  --bw-nav-fg: var(--main-color-theme--blue-dark, #0e1345);
  --bw-nav-accent: var(--main-blue, #2559f6);
  --bw-nav-accent-hover: var(--blue-hover, #1c41b1);
  --bw-nav-accent-soft: var(--main-color-theme--blue-light, #e4ebfe);
  --bw-nav-line: var(--outline, #0e13451f);
  --bw-nav-radius: var(--_spacings---roundings--medium, 16px);
  --bw-nav-font: var(--_typografie---body, Manrope, sans-serif);
  --bw-nav-shadow: none;

  /* the scrolled pill, and how far it sits from the top of the window */
  --bw-nav-compact-width: 960px;
  --bw-nav-compact-offset: 10px;
  /* how long one half of the slide takes (out, then in) */
  --bw-nav-swap: 260ms;

  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  font-family: var(--bw-nav-font);
  color: var(--bw-nav-fg);
}

.bw-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--bw-nav-height);
  padding: 0 40px;
  background-color: var(--bw-nav-bg);
  border-bottom: 1px solid var(--bw-nav-line);
  transition: height 0.25s ease;
}

/* scrolled state: the bar lifts off into a floating pill */
.bw-nav.is-compact .bw-nav__inner {
  height: var(--bw-nav-height-compact);
  max-width: var(--bw-nav-compact-width);
  margin: var(--bw-nav-compact-offset) auto;
  padding: 0 40px;
  border: 1px solid var(--bw-nav-line);
  border-radius: 999px;
  box-shadow: var(--bw-nav-shadow);
}

/* --- crossing the scroll threshold -------------------------------------- */

/*
  The two bars swap the way the original did: the one on screen slides up and out,
  the other slides down into its place. There is only one bar in the markup, so it
  does both — it leaves the screen, changes shape while it is out of sight above the
  viewport, and comes back down in its new form. The shape change is a hard cut at
  the midpoint of the keyframes (both keyframes of each half hold the same values,
  so nothing interpolates), which is why it is never visible.

  js/menu.js adds `is-swapping` only when the state actually changes, so there is no
  animation on load, and re-adds it to restart the animation on a fast scroll back.
*/
@media screen and (prefers-reduced-motion: no-preference) {
  .bw-nav.is-swapping.is-compact .bw-nav__inner {
    animation: bw-nav-swap-to-pill calc(var(--bw-nav-swap) * 2) both;
  }
  .bw-nav.is-swapping:not(.is-compact) .bw-nav__inner {
    animation: bw-nav-swap-to-bar calc(var(--bw-nav-swap) * 2) both;
  }
}

/* full-width bar -> pill */
@keyframes bw-nav-swap-to-pill {
  0% {
    transform: translateY(0);
    max-width: none;
    margin: 0;
    border-radius: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1); /* accelerate out */
  }
  49.9% {
    transform: translateY(calc(-100% - 24px));
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
  50% {
    transform: translateY(calc(-100% - 24px));
    max-width: var(--bw-nav-compact-width);
    margin: var(--bw-nav-compact-offset) auto;
    border-radius: 999px;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* settle in */
  }
  100% {
    transform: translateY(0);
    max-width: var(--bw-nav-compact-width);
    margin: var(--bw-nav-compact-offset) auto;
    border-radius: 999px;
  }
}

/* pill -> full-width bar */
@keyframes bw-nav-swap-to-bar {
  0% {
    transform: translateY(0);
    max-width: var(--bw-nav-compact-width);
    margin: var(--bw-nav-compact-offset) auto;
    border-radius: 999px;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  49.9% {
    transform: translateY(calc(-100% - 24px));
    max-width: var(--bw-nav-compact-width);
    margin: var(--bw-nav-compact-offset) auto;
    border-radius: 999px;
  }
  50% {
    transform: translateY(calc(-100% - 24px));
    max-width: none;
    margin: 0;
    border-radius: 0;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    transform: translateY(0);
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
}

/* --- logo --------------------------------------------------------------- */

.bw-nav__logo {
  display: flex;
  align-items: center;
  flex: none;
}
.bw-nav__logo img {
  /* bindworks.css sets img { width:100%; height:100%; object-fit:cover } */
  width: 130px;
  height: 35px;
  object-fit: contain;
}

/* --- menu --------------------------------------------------------------- */

.bw-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* height, padding and radius match the original .menu-link */
.bw-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.bw-nav__link:hover,
.bw-nav__link:focus-visible {
  background-color: var(--bw-nav-accent-soft);
  color: var(--bw-nav-accent);
}
.bw-nav__link[aria-current="page"] {
  background-color: var(--bw-nav-accent-soft);
  color: var(--bw-nav-accent);
  font-weight: 600;
}
.bw-nav__link .material-symbol,
.bw-nav__cta .material-symbol {
  font-size: 18px;
}

/* the language switch is deliberately quieter than the other items: a grey
   outlined pill rather than a plain link (same as the original .lang-switch) */
.bw-nav__link--lang {
  gap: 4px;
  height: 36px;
  margin-left: 8px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--bw-nav-line);
  border-radius: 18px;
  background-color: transparent;
  color: #0e134599;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bw-nav__link--lang:hover,
.bw-nav__link--lang:focus-visible {
  border-color: transparent;
  background-color: var(--bw-nav-accent-soft);
  color: var(--bw-nav-accent);
}

/* --- dropdown ----------------------------------------------------------- */

.bw-nav__group {
  position: relative;
}
.bw-nav__toggle .bw-nav__chevron {
  transition: transform 0.2s ease;
}
.bw-nav__group[data-open="true"] .bw-nav__toggle {
  background-color: var(--bw-nav-accent-soft);
  color: var(--bw-nav-accent);
}
.bw-nav__group[data-open="true"] .bw-nav__chevron {
  transform: rotate(180deg);
}

/* card, rows and radii match the original .dropdown-links-wrap / .dropdown-link */
.bw-nav__panel-card {
  border: 1px solid var(--bw-nav-line);
  border-radius: 32px;
  background-color: var(--bw-nav-bg);
  box-shadow: var(--bw-nav-shadow);
  padding: 6px;
}

.bw-nav__panel-links {
  display: grid;
}

.bw-nav__card {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 26px;
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.16s ease;
}
.bw-nav__card:hover,
.bw-nav__card:focus-visible {
  background-color: var(--bw-nav-accent-soft);
}
.bw-nav__card .material-symbol {
  font-size: 20px;
  color: var(--bw-nav-accent);
}
.bw-nav__card-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  color: var(--bw-nav-accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.16s ease;
}
.bw-nav__card-more .material-symbol {
  font-size: 16px;
}
.bw-nav__card:hover .bw-nav__card-more,
.bw-nav__card:focus-visible .bw-nav__card-more {
  opacity: 1;
}

.bw-nav__help {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
  border-top: 1px solid var(--bw-nav-line);
  color: inherit;
  font-size: 16px;
  text-decoration: none;
}
.bw-nav__help:hover {
  color: var(--bw-nav-accent);
}
.bw-nav__help .material-symbol {
  font-size: 20px;
  color: var(--bw-nav-accent);
}

/* --- call to action ----------------------------------------------------- */

.bw-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  /* on mobile the menu is taken out of flow, so this keeps the burger on the right */
  margin-left: auto;
}

.bw-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--bw-nav-radius);
  background-color: var(--bw-nav-accent);
  color: var(--white, #fff);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.bw-nav__cta:hover,
.bw-nav__cta:focus-visible {
  background-color: var(--bw-nav-accent-hover);
  color: var(--white, #fff);
}
/* the phone CTA only exists inside the mobile panel */
.bw-nav__cta--phone {
  display: none;
}

/* --- burger ------------------------------------------------------------- */

.bw-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--bw-nav-line);
  border-radius: var(--bw-nav-radius);
  background: none;
  color: inherit;
  cursor: pointer;
}
.bw-nav__burger .material-symbol {
  font-size: 24px;
}
.bw-nav__burger-close,
.bw-nav.is-open .bw-nav__burger-open {
  display: none;
}
.bw-nav.is-open .bw-nav__burger-close {
  display: flex;
}

/* --- desktop ------------------------------------------------------------ */

@media screen and (min-width: 992px) {
  /* logo left, menu centred, actions right — as in the original design */
  .bw-nav__menu {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  .bw-nav__panel {
    position: absolute;
    top: 100%;
    left: 50%;
    /* the padding is a hover bridge: the pointer never leaves the group on its
       way from the button down to the card, so the panel cannot flicker shut.
       28px puts the card's top edge exactly where the original one sat. */
    padding-top: 28px;
    width: 610px;
    transform: translateX(-50%) translateY(-6px);
    opacity: 0;
    visibility: hidden;
    /* visibility flips at the *end* of the fade-out, and immediately on the way in,
       so the panel is clickable the moment it opens */
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s linear 0.18s;
  }
  .bw-nav__group[data-open="true"] .bw-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s;
  }
  /* keyboard users, and the no-JS fallback: hovering the group opens it */
  .bw-nav__group:focus-within .bw-nav__panel,
  .bw-nav:not(.bw-nav--ready) .bw-nav__group:hover .bw-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* --- mobile / tablet ---------------------------------------------------- */

@media screen and (max-width: 991px) {
  .bw-nav {
    --bw-nav-height: 64px;
    --bw-nav-height-compact: 64px;
  }
  .bw-nav__inner {
    gap: 12px;
    padding: 0 20px;
  }
  /* no floating pill on small screens: the panel hangs off the bottom of the bar,
     so the bar has to stay put. Scrolling only adds the shadow. */
  .bw-nav.is-compact .bw-nav__inner {
    max-width: none;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-bottom: 1px solid var(--bw-nav-line);
    border-radius: 0;
    box-shadow: var(--bw-nav-shadow);
  }

  .bw-nav__burger {
    display: inline-flex;
  }
  /* the header CTA moves into the panel, where there is room for it */
  .bw-nav__actions .bw-nav__cta {
    display: none;
  }

  .bw-nav__menu {
    position: fixed;
    top: var(--bw-nav-height);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--bw-nav-height));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 20px 32px;
    background-color: var(--bw-nav-bg);
    border-bottom: 1px solid var(--bw-nav-line);
    box-shadow: var(--bw-nav-shadow);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0s linear 0.2s;
  }
  .bw-nav.is-open .bw-nav__menu {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0s;
  }

  .bw-nav__link {
    justify-content: space-between;
    height: auto;
    padding: 14px 12px;
    border-radius: var(--bw-nav-radius);
    font-size: 18px;
  }
  .bw-nav__toggle {
    width: 100%;
  }

  /* dropdown becomes an accordion */
  .bw-nav__panel {
    display: none;
    padding: 0 0 8px;
  }
  .bw-nav__group[data-open="true"] .bw-nav__panel {
    display: block;
  }
  .bw-nav__panel-card {
    border: 0;
    box-shadow: none;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--bw-nav-accent-soft);
    border-radius: 0;
  }
  .bw-nav__card {
    grid-template-columns: 24px 1fr;
    padding: 12px;
    font-size: 16px;
  }
  .bw-nav__card-more {
    display: none;
  }

  .bw-nav__cta--phone {
    display: inline-flex;
    justify-content: center;
    height: 52px;
    margin-top: 12px;
  }
  .bw-nav__link--lang {
    align-self: flex-start;
    justify-content: flex-start;
    gap: 6px;
    height: 40px;
    margin: 12px 0 0;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 15px;
  }

  /* when the panel is open the page behind it must not scroll */
  html.bw-nav-locked,
  html.bw-nav-locked body {
    overflow: hidden;
  }
}

/* --- motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bw-nav__inner,
  .bw-nav__panel,
  .bw-nav__menu,
  .bw-nav__chevron,
  .bw-nav__card-more {
    transition: none;
  }
}