[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;
}

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

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

nav a.active:not(.btn){
  color:#2E7D32;
  font-weight:600;
  border-bottom:2px solid #2E7D32;
  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:#2E7D32; }

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

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;
  }

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

  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;
  }

  nav{
    position:fixed;
    top:0;
    right:-260%;
    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;
  }

  nav.show{ right:0; }

  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; }