/* Aanvullingen op norveo.css die eerder in Webflow-embeds en webflow.js zaten. */

/* Uit de Webflow-embed in de navigatie */
.nav-link {
  color: #5f5f5f !important;
}

/* Mobiel menu: klapt uit onder de navbar (was .w-nav-overlay) */
@media screen and (max-width: 991px) {
  .w-nav-menu[data-nav-menu-open] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    text-align: center;
    z-index: 1000;
  }
  .w-nav-button {
    cursor: pointer;
  }
}

/* Hamburger -> kruisje */
.menu-icon_line-top-2,
.menu-icon_line-middle-2,
.menu-icon_line-bottom-2 {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.w-nav-button.w--open .menu-icon_line-top-2 {
  transform: translateY(8px) rotate(45deg);
}
.w-nav-button.w--open .menu-icon_line-middle-2 {
  opacity: 0;
}
.w-nav-button.w--open .menu-icon_line-bottom-2 {
  transform: translateY(-8px) rotate(-45deg);
}

.w-dropdown-toggle {
  cursor: pointer;
}

/* Scroll-animaties (alleen met JS actief, anders gewoon zichtbaar) */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    filter 0.8s ease;
}
html.js .reveal.service-wrapper {
  transform: translateY(48px);
  filter: blur(3px);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Intro-animatie hero op de homepage */
@keyframes norveo-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.page-home .banner-big-logo {
  animation: norveo-fade-up 1s ease both;
}
.page-home .banner-title {
  animation: norveo-fade-up 1s ease 0.2s both;
}
.page-home .fs-styleguide_row {
  animation: norveo-fade-up 1s ease 0.4s both;
}
.page-home .banner-subtitle {
  animation: norveo-fade-up 1s ease 0.6s both;
}

/* Logo-ticker (was Flowbase Carousel Ticker, 30s per ronde, pauze bij hover) */
@keyframes norveo-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.logo-carousel-content {
  width: max-content;
  grid-column-gap: 0;
  animation: norveo-ticker 30s linear infinite;
}
.logo-carousel-content > .logo-icon-wrapper {
  margin-right: 1.25rem;
}
.logo-carousel-3:hover .logo-carousel-content {
  animation-play-state: paused;
}

/* Contact: mailto- en tel-link in plaats van het formulier */
.contact-direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .banner-big-logo,
  .page-home .banner-title,
  .page-home .fs-styleguide_row,
  .page-home .banner-subtitle,
  .logo-carousel-content {
    animation: none;
  }
  html.js .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}