/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* ===== Banner menu bar ===== */
.wtc-banner-menu-bar {
  padding-right: 70px;
}
/* Fix: Impreza globale li-margin mag niet gelden in ons banner menu */
.wtc-banner-nav .wtc-banner-menu,
.wtc-banner-nav .wtc-banner-menu li {
  margin: 0;
  padding: 0;
}

/* Extra zeker: top-level items */
.wtc-banner-nav .wtc-banner-menu > li {
  margin: 0 !important;     /* alleen nodig als jouw CSS vóór min.style.css laadt */
}
.wtc-banner-menu-bar {
  /* Zorg dat dit vlak boven je banner kan staan als aparte rij/sectie */
  width: 100%;
  position: relative;
  z-index: 50;
}

/* Rechts uitlijnen */
.wtc-banner-nav .wtc-banner-menu {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 28px;
}

/* Links als “gewoon tekst” */
.wtc-banner-nav .wtc-banner-menu > li > a {
  text-decoration: none;
  display: inline-block;
  position: relative;

  /* Belangrijk: padding-bottom bepaalt waar de underline komt */
  padding: 10px 0 18px; /* underline ligt op de “onderrand” van de menubalk */
}

/* Ripple/expanding underline: van het midden naar buiten */
.wtc-banner-nav .wtc-banner-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;           /* 0 = exact op onderrand van de link */
  height: 2px;

  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  background: currentColor;
}

/* Hover + actieve pagina */
.wtc-banner-nav .wtc-banner-menu > li > a:hover::after,
.wtc-banner-nav .wtc-banner-menu > li.current-menu-item > a::after,
.wtc-banner-nav .wtc-banner-menu > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Optioneel: iets rustiger op mobile */
@media (max-width: 768px) {
  .wtc-banner-nav .wtc-banner-menu {
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* Zorg dat dropdown niet afgeknipt wordt */
.wtc-banner-menu-bar,
.wtc-banner-nav,
.wtc-banner-nav .wtc-banner-menu,
.wtc-banner-nav .wtc-banner-menu > li,
.wtc-banner-nav .wtc-banner-menu > li > a {
  overflow: visible !important;
}

/* Hover-tekst uit Title Attribute */
.wtc-banner-nav .wtc-banner-menu > li > a {
  position: relative;
}

/* Niet afknippen */
.wtc-banner-menu-bar,
.wtc-banner-nav,
.wtc-banner-nav .wtc-banner-menu,
.wtc-banner-nav .wtc-banner-menu > li,
.wtc-banner-nav .wtc-banner-link {
  overflow: visible !important;
}

.wtc-banner-nav .wtc-banner-link {
  position: relative;
}

.wtc-menu-hovertext {
    position: absolute;

  /* i.p.v. left:50% ... */
  left: auto;
  right: 0;
  top: 100%;

  /* i.p.v. translateX(-50%) ... */
  transform: translateY(4px) scaleY(0.6);
  transform-origin: top right;

  opacity: 0;
  pointer-events: none;

  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;

  background: rgba(0,0,0,0.55);
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;

  transition: opacity .22s ease, transform .22s ease;
  z-index: 999;
}

.wtc-banner-nav .wtc-banner-menu > li > a:hover .wtc-menu-hovertext,
.wtc-banner-nav .wtc-banner-menu > li > a:focus-visible .wtc-menu-hovertext {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
/* Extra zekerheid: nooit een lege hover-balk tonen */
.wtc-menu-hovertext:empty {
  display: none !important;
}
/* Op mobiel hover verbergen (optioneel) */
@media (max-width: 768px) {
  .wtc-menu-hovertext { display: none; }
}

/* Prevent scroll wanneer menu open is */
body.wtc-menu-open{
  overflow: hidden;
}

/* Hamburger button (default verbergen op desktop) */
.wtc-menu-toggle{
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
}

/* Burger icon */
.wtc-burger{
  display: inline-block;
  width: 26px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.wtc-burger::before,
.wtc-burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 26px;
  height: 2px;
  background: currentColor;
}
.wtc-burger::before{ top: -8px; }
.wtc-burger::after{ top: 8px; }

/* Toggle: tekst "Menu" naast burger */
.wtc-menu-toggle{
  display: none; /* wordt zichtbaar op mobiel via media query */
  background: transparent;
  border: 0;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;

  align-items: center;
  gap: 10px;
}

.wtc-menu-toggle-label{
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Close button (standaard verborgen) */
.wtc-menu-close{
  display: none;
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color: #fff;

  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.wtc-menu-close span{
  display:block;
  transform: translateY(-1px);
}
body.admin-bar .wtc-menu-close{
  top: calc(18px + 32px);
}



/* Mobile gedrag */
@media (max-width: 768px){
  body.admin-bar .wtc-menu-close{
    top: calc(18px + 46px);
  }
  /* Toon hamburger (met label "Menu") */
  .wtc-menu-toggle{
    display: inline-flex;
    align-items: center;
    gap: 10px; /* ruimte tussen Menu en burger */
  }
  .wtc-menu-toggle-label{
    display: inline-block;
  }

  /* Maak nav fullscreen overlay, standaard verborgen */
  .wtc-banner-nav{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;

    /* overlay look */
    background: rgba(0,0,0,.92);
    padding: 90px 24px 28px;

    /* menu centreren */
    align-items: center;
    justify-content: center;
  }

  /* Open state */
  .wtc-banner-menu-bar.is-open .wtc-banner-nav{
    display: flex;
  }

  /* Toon close button alleen wanneer open */
  .wtc-menu-close{
    display: none; /* default dicht */
  }
  .wtc-banner-menu-bar.is-open .wtc-menu-close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Menu items onder elkaar */
  .wtc-banner-nav .wtc-banner-menu{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }

  /* Grotere links */
  .wtc-banner-nav .wtc-banner-menu > li > a{
    padding: 12px 0 14px;
    font-size: 22px;
  }

  /* Belangrijk: verberg beschrijving-hovertekst op mobiel */
  .wtc-menu-hovertext{
    display: none !important;
  }

  /* Onderlijn is minder nuttig op touch, maar mag blijven.
     Als je ze wil verbergen op mobiel: */
  /* .wtc-banner-nav .wtc-banner-menu > li > a::after{ display:none; } */
}




/* Homebanner dots in de banner weergeven */
.homebanner-carousel {
  position: relative;
}

/* Meest voorkomende: Owl Carousel dots */
.homebanner-carousel .owl-dots {
  position: absolute;
  left: 0;
  right: 0;

  /* hoger zetten = grotere waarde */
  bottom: 25px;

  z-index: 20;
  margin: 0 !important;
}

/* Soms gebruikt Impreza andere wrappers voor dots/pagination */
.homebanner-carousel .w-carousel-pagination,
.homebanner-carousel .w-carousel-nav,
.homebanner-carousel .w-slider-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  z-index: 20;
  margin: 0 !important;
}

/* Zorg dat het niet “afgeknipt” wordt */
.homebanner-carousel,
.homebanner-carousel * {
  overflow: visible;
}

/* ===== Dots wit maken (meest voorkomend: Owl Carousel) ===== */
.homebanner-carousel .owl-dots .owl-dot span{
  background: rgba(255,255,255,.55) !important;
}

.homebanner-carousel .owl-dots .owl-dot:hover span,
.homebanner-carousel .owl-dots .owl-dot.active span{
  background: #fff !important;
}

/* ===== Alternatieve Impreza paginatie (als jouw dots geen owl-dot spans zijn) ===== */
.homebanner-carousel .w-slider-pagination a,
.homebanner-carousel .w-carousel-pagination a{
  background: rgba(255,255,255,.55) !important;
}

.homebanner-carousel .w-slider-pagination a:hover,
.homebanner-carousel .w-carousel-pagination a:hover,
.homebanner-carousel .w-slider-pagination a.active,
.homebanner-carousel .w-carousel-pagination a.active{
  background: #fff !important;
}

/* Als het “ringetjes” zijn i.p.v. volle bolletjes */
.homebanner-carousel .w-slider-pagination a,
.homebanner-carousel .w-carousel-pagination a{
  border-color: #fff !important;
}