[data-block="header"]{
  position:sticky;
  top:0;
  z-index:100000;
}

header{
  background:white;
  padding:16px 40px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  border-bottom:1px solid #f3f3f3;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
  min-height:72px;
}

header > nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:25px;
}

header > nav a{
  margin-left:25px;
  text-decoration:none;
  color:#333;
  white-space:nowrap;
}

header > nav a.active:not(.btn){
  color:#27963c;
  font-weight:600;
  border-bottom:2px solid #27963c;
  padding-bottom:4px;
}

.logo{
  font-size:24px;
  font-weight:bold;
  flex-shrink:0;
}

.logo-rating{
  display:flex;
  align-items:center;
  gap:20px;
}

.logo .nl{
  font-size:14px;
  font-weight:bold;
  color:#000;
  vertical-align:baseline;
}

.logo .zwart{ color:#000; }
.logo .groen{ color:#27963c; }

.mobile-menu-logo{ display:none; }

header > nav .btn{ color:#fff; }

.logo a{
  text-decoration:none;
  color:inherit;
}

.google-rating{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  flex-shrink:0;
  text-decoration:none;
  color:inherit;
}

.google-stars{
  color:#fbbc04;
  font-size:15px;
  letter-spacing:1px;
  margin-top:1px;
}

.google-score{
  font-weight:700;
  margin-left:2px;
}

.google-count{
  color:#5f6368;
  font-weight:500;
}

.google-logo{
  height:16px;
  display:block;
}

.hamburger{
  display:none;
  font-size:28px;
  cursor:pointer;
}

.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:9998;
}

.menu-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.menu-close{ display:none; }

@media (max-width:1100px){
  header{
    padding:14px 20px;
       grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:12px;
    row-gap:10px;
    min-height:64px;
  }

  .logo{
    font-size:20px;
  }

  .logo .nl{
    font-size:12px;
  }

  .logo-rating{
    grid-column:1;
    grid-row:1;
    align-self:end;
    gap:20px;
  }

    .google-rating{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    margin-top:-4px;
    gap:4px;
    font-size:12px;
  }

  .google-stars{
    font-size:12px;
    letter-spacing:0;
  }

  .google-count{
    font-size:12px;
  }

  .google-logo{
    height:14px;
  }

  header > nav{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    gap:14px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  header > nav a{
    margin-left:0;
    font-size:14px;
    white-space:nowrap;
  }
}

@media (max-width:680px){
  .logo-rating{
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-align:center;
  }

  .mobile-menu-logo{ display:block; }

  .hamburger{
    display:block;
    position:absolute;
    right:20px;
    top:18px;
  }

  .menu-close{
    display:block;
    position:absolute;
    top:20px;
    right:20px;
    font-size:28px;
    cursor:pointer;
  }

  header > nav{
    position:fixed;
    top:0;
    right:-260px;
    width:260px;
    height:100%;
    background:white;
    padding:40px 25px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    box-shadow:-8px 0 20px rgba(0,0,0,0.15);
    transition:right 0.3s ease;
    z-index:9999;
  }

  header > nav.show{ right:0; }

  header > nav a{
    margin:10px 0;
    font-size:18px;
  }

  header{
    grid-template-columns:1fr;
    justify-items:center;
    row-gap:4px;
    padding:15px;
  }

  .logo{
    font-size:24px;
    text-align:center;
    width:100%;
  }

  .google-rating{
    grid-column:1;
    justify-self:center;
    font-size:13px;
  }

  .google-stars{
    font-size:13px;
  }
}

body.menu-open{ overflow:hidden; }
/* Diensten dropdown */
.nav-dropdown{
  position:relative;
  margin-left:25px;
}

.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
  color:#333;
  font:inherit;
  cursor:pointer;
  white-space:nowrap;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.open .nav-dropdown-toggle{
  color:#27963c;
}

.nav-dropdown-toggle:focus-visible{
  outline:2px solid #27963c;
  outline-offset:5px;
  border-radius:2px;
}

.nav-dropdown-arrow{
  font-size:12px;
  line-height:1;
  transition:transform 0.2s ease;
}

.nav-dropdown.open .nav-dropdown-arrow{
  transform:rotate(180deg);
}

.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 2px);
  left:-18px;
  min-width:235px;
  padding:8px;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index:10001;
}

.nav-dropdown-menu a{
  display:block;
  margin:0;
  padding:11px 12px;
  border-radius:6px;
  color:#333;
  font-size:15px;
  line-height:1.3;
  white-space:nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible{
  color:#27963c;
  background:#f4f8f4;
  outline:none;
}

.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

@media (hover:hover) and (pointer:fine) and (min-width:681px){
  .nav-dropdown:hover .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
}

@media (max-width:1100px){
  .nav-dropdown{
    margin-left:0;
  }

  .nav-dropdown-toggle{
    font-size:14px;
  }
}

@media (max-width:680px){
  .nav-dropdown{
    width:100%;
    margin:10px 0 0;
  }

  .nav-dropdown-toggle{
    width:100%;
    justify-content:space-between;
    padding:0;
    font-size:18px;
    text-align:left;
  }

  .nav-dropdown-menu{
    position:static;
    min-width:0;
    width:100%;
    margin-top:8px;
    padding:0 0 0 14px;
    border:0;
    border-left:2px solid #e7eee7;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    display:none;
    transition:none;
  }

  .nav-dropdown.open .nav-dropdown-menu{
    display:block;
  }

  .nav-dropdown-menu a{
    margin:0;
    padding:9px 10px;
    font-size:16px;
    white-space:normal;
  }
}

/* Actieve status wanneer de huidige pagina onder Diensten valt. */
.nav-dropdown.current .nav-dropdown-toggle{
  color:#27963c;
  font-weight:600;
  border-bottom:2px solid #27963c;
  padding-bottom:4px;
}

@media (max-width:680px){
  .nav-dropdown.current .nav-dropdown-toggle{
    border-bottom:0;
    padding-bottom:0;
  }
}


/* Mobiel hoofdmenu: merk, sluitknop en links hebben vaste, leesbare uitlijning. */
@media (max-width:680px){
  #menu{
    box-sizing:border-box;
    width:min(340px, calc(100vw - 28px));
    right:calc(-1 * min(340px, 100vw - 28px) - 12px);
    height:100vh;
    height:100dvh;
    padding:26px 22px 30px;
    overflow-x:hidden;
    overflow-y:auto;
    align-items:stretch;
    gap:0;
    overscroll-behavior:contain;
    border-radius:18px 0 0 18px;
  }
  #menu.show{right:0;}
  #menu .mobile-menu-logo{
    display:block;
    flex:0 0 auto;
    width:100%;
    margin:52px 0 17px;
    padding:0 8px 19px;
    border-bottom:1px solid #e5ebe6;
    text-align:left;
  }
  #menu .mobile-menu-logo a{
    display:inline-block;
    margin:0;
    padding:0;
    color:#101510;
    font-size:clamp(19px, 5.1vw, 23px);
    font-weight:750;
    letter-spacing:-.045em;
    line-height:1.25;
    text-decoration:none;
    white-space:nowrap;
  }
  #menu .mobile-menu-logo .zwart{color:#101510;}
  #menu .mobile-menu-logo .groen{color:#27963c;}
  #menu .mobile-menu-logo .nl{color:#101510;font-size:.6em;letter-spacing:-.02em;}
  #menu .menu-close{
    top:18px;
    right:20px;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid #e1e8e1;
    border-radius:11px;
    background:#f5f9f5;
    color:#243629;
    font-size:23px;
    line-height:1;
    z-index:2;
  }
  #menu > a:not(.btn),
  #menu .nav-dropdown-toggle{
    box-sizing:border-box;
    width:100%;
    min-height:50px;
    margin:0;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:0;
    border-bottom:1px solid #eef1ee;
    border-radius:0;
    color:#243029;
    text-align:left;
    font-size:16px;
    font-weight:550;
    line-height:1.35;
    text-decoration:none;
    background:transparent;
    white-space:normal;
  }
  #menu .nav-dropdown{width:100%;margin:0;padding:0;flex:0 0 auto;}
  #menu .nav-dropdown-toggle{cursor:pointer;}
  #menu .nav-dropdown-menu{
    box-sizing:border-box;
    margin:0 0 8px 12px;
    padding:3px 0 3px 12px;
    width:calc(100% - 12px);
  }
  #menu .nav-dropdown-menu a{
    min-height:42px;
    display:flex;
    align-items:center;
    margin:0;
    padding:10px 9px;
    font-size:14px;
  }
  #menu > a.active:not(.btn){
    color:#27963c;
    border-bottom:1px solid #eef1ee;
    font-weight:700;
  }
  #menu > .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:100%;
    box-sizing:border-box;
    min-height:48px;
    margin:22px 0 0;
    padding:13px;
    font-size:15px;
    font-weight:700;
  }
}


/* v54: mobiele CTA blijft bereikbaar wanneer Diensten is uitgeklapt. */
@media (max-width:680px){
  #menu > .btn{
    position:sticky;
    bottom:0;
    z-index:3;
    min-height:52px;
    margin:18px 0 0;
    background:#27963c;
    color:#fff;
    border:0;
    box-shadow:0 -10px 18px rgba(255,255,255,.96), 0 4px 12px rgba(0,0,0,.12);
  }
  #menu > .btn:hover,
  #menu > .btn:focus-visible{
    background:#256628;
    color:#fff;
  }
}


/* Taalkeuze compact onder Diensten/Services. */
.nav-language-section{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid #e8e8e8;
}
.nav-language-label{
  padding:5px 12px 3px;
  color:#6b7280;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.nav-dropdown-menu .nav-language-option{
  position:relative;
  padding-right:34px;
}
.nav-dropdown-menu .nav-language-option.is-current{
  color:#27963c;
  font-weight:700;
  background:#f4f8f4;
}
.nav-dropdown-menu .nav-language-option.is-current::after{
  content:'✓';
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:#27963c;
  font-weight:800;
}
@media (max-width:680px){
  .nav-language-section{margin-top:6px;padding-top:8px;}
  .nav-language-label{padding-left:10px;}
}

/* 2026-10-01 v89: robuust mobiel menu bij opengeklapte Diensten. */
@media (max-width:680px){
  #menu{
    width:min(340px, calc(100vw - 24px));
    right:calc(-1 * min(340px, calc(100vw - 24px)) - 12px);
    padding:20px 18px 24px;
    overflow-y:auto;
    overflow-x:hidden;
    align-items:stretch;
  }

  #menu .mobile-menu-logo{
    margin:44px 0 14px;
    padding:0 6px 16px;
  }

  #menu .nav-dropdown,
  #menu .nav-dropdown-menu,
  #menu > a,
  #menu > .btn{
    max-width:100%;
    box-sizing:border-box;
  }

  #menu .nav-dropdown-menu{
    width:100%;
    margin:0 0 8px;
    padding:4px 0 4px 12px;
  }

  #menu > .btn{
    position:static;
    width:100%;
    margin:18px 0 0;
    flex:0 0 auto;
  }
}

/* 2026-10-01 v90: mobiel menu blijft altijd één verticale kolom.
   Zonder deze override erfde het menu flex-wrap:wrap van de tablet-layout,
   waardoor Contact en Boek montage bij open Diensten rechts buiten beeld kwamen. */
@media (max-width:680px){
  #menu{
    flex-wrap:nowrap;
    flex-direction:column;
    align-content:stretch;
    overflow-y:auto;
    overflow-x:hidden;
  }

  #menu > *,
  #menu .nav-dropdown,
  #menu .nav-dropdown-menu{
    flex-shrink:0;
    max-width:100%;
  }
}

/* MeubelsLatenMonteren.nl: langere merknaam */
@media(max-width:680px){.mobile-menu-logo .zwart,.mobile-menu-logo .groen{font-size:18px}.mobile-menu-logo .nl{font-size:10px}header>nav{overflow-y:auto;overflow-x:hidden;flex-wrap:nowrap}}