/* Het basis menu-item */
.menu-item {
  position: relative;    /* Nodig om de streep bovenop te positioneren */
  padding-top: 50px;     /* Ruimte tussen de bovenkant en de tekst */
  display: inline-block;
  text-decoration: none;
  color: black;
}

/* De gekleurde streep bij actieve/aangeklikte item */
.menu-item.active::before {
  content: "";           /* Maakt het element zichtbaar */
  position: absolute;
  top: 0;                /* Plakt de streep tegen de bovenkant */
  
  /* Lengte van de lijn: pas deze percentages aan om de lijn korter/langer te maken */
  left: 15%;             
  right: 15%;            
  height: 6px;           /* Dikte van de lijn */
  background-color: #ef7a1b;
  
  /* De vorm: bovenkant breed (0-100%), onderkant smal (5-95%) */
  clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
}

.fxb-col.fxb.fxb-end-x.fxb-center-y.fxb-basis-auto.site-header-main-right-top {
  position: fixed;
  top: 0px;
}

/* --- SPECIFIEK VOOR TABLET LIGGEND --- */
@media only screen and (min-width: 768px) and (max-width: 1180px) {
  .fxb-col.fxb.fxb-end-x.fxb-center-y.fxb-basis-auto.site-header-main-right-top {
    display: flex !important;
    flex-direction: row !important; /* Dwingt items horizontaal */
    flex-wrap: nowrap !important;   /* Voorkomt het verspringen naar 2 rijen */
    justify-content: flex-end !important;
    width: 100% !important;         /* Geeft het menu de volledige ruimte */
    max-width: none !important;
  }

  .menu-item {
    padding-top: 30px;             /* Iets minder ruimte om hoogte te besparen */
    margin-left: 8px !important;    /* Smallere marges tussen items voor tablet */
    margin-right: 8px !important;
  }

  .menu-item a {
    font-size: 14px !important;    /* Iets kleinere letters zodat het past */
    white-space: nowrap !important; /* Voorkomt dat woorden zelf afbreken */
  }
}

/* --- HAMBURGER MENU ITEMS ONDER ELKAAR (Tablet staand & Mobiel) --- */
@media only screen and (max-width: 991px) {
  
  /* Selecteer de container die de items vasthoudt wanneer het menu open is */
  /* We dwingen de richting naar 'column' zodat ze onder elkaar komen */
  .fxb-col.site-header-main-right-top, 
  .site-header-main-right-top .menu, 
  .site-header-main-right-top ul {
    display: flex !important;
    flex-direction: column !important; /* Items onder elkaar */
    align-items: center !important;    /* Centreer de items (optioneel) */
    flex-wrap: nowrap !important;
  }

  .menu-item {
    display: block !important;         /* Zorg dat ze zichtbaar zijn in het menu */
    width: 100%;                       /* Pak de volledige breedte */
    text-align: center;                /* Tekst in het midden */
    padding-top: 15px !important;      /* Minder ruimte boven elk item op mobiel */
    padding-bottom: 15px !important;
  }

  /* Verberg de oranje schuine streep in het mobiele menu (optioneel voor rust) */
  .menu-item.active::before {
    display: none !important;
  }
  
  /* Of geef de actieve tekst alleen een kleurtje in het mobiele menu */
  .menu-item.active a {
    color: #ef7a1b !important;
  }
}

.mijn-custom-button {
    background-image: url('https://nieuw.wninterieurbouw.nl/wp-content/uploads/2025/12/Button_website.png');
    background-size: cover;
    border: none;
    /* Voeg hier meer stijlen toe */
}
.mijn-custom-button:hover {
    opacity: 0.8;
}