html, body{
  width: 100%;
  overflow-x: hidden;
}

/* =========================
   TOPBAR
========================= */

.mp-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: #90DBF4;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
}

/* grid voor brand (links/center) en CTA (rechts) */
.mp-topbar__inner{
  position: relative; /* nodig voor absolute centered dock */
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  min-height: var(--topbar-h);
}

.mp-topbar__inner > *{
  align-self: center;
}

.mp-brand{
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: #fff;
  text-decoration: none;
  transition: 500ms cubic-bezier(.2,.9,.2,1);
  line-height: 1;
  padding-block: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/* CTA right */
.mp-cta{
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Dock: altijd exact in het midden van de topbar */
.mp-navDock{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

/* Captured state */
body.mp-captured .mp-brand{
  grid-column: 1;
  justify-self: start;
}

body.mp-captured .mp-navDock{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   HERO
========================= */

.mp-hero{
  height: 100vh;
  min-height: 100svh;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Optional overlay */
.mp-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}
.mp-hero > *{
  position: relative;
  z-index: 1;
}

.mp-heroNavWrap{
  position: absolute;
  left: 0; right: 0;
  bottom: 28px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* =========================
   NAV (shared: hero + dock)
========================= */

#mpFloatingNav{
  transition: transform 250ms ease, opacity 250ms ease;
}

.mp-heroNav{
  pointer-events: auto;
  list-style: none;
  display: flex;
  gap: 56px;

  margin: 0;
  padding: 0;
  align-items: center;
}

.mp-heroNav a{
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mp-heroNav a:hover{
  opacity: 1;
}

/* Knewave/h5 reset (voorkomt baseline/margin shifts) */
.mp-heroNav h5{
  margin: 0;
  line-height: 1;
}

/* Near capture effect */
body.mp-nearCapture #mpFloatingNav{
  opacity: 0.85;
  transform: translateY(-6px);
}

.mp-heroNav a.is-active{
  opacity: 1;
  color: #ECD57B;
  text-underline-offset: 8px;
}

/* static/css/main.css (add these bits if you want the flags layout) */

.mp-right{
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-flags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 12px;
}

.mp-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}

.mp-flag__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-flag.is-active {
  outline: 2px solid currentColor; /* of je eigen kleur */
  outline-offset: 2px;
}

/* -------------------------
   MOBILE TOPBAR LAYOUT
-------------------------- */
@media (max-width: 767.98px){
  .mp-topbar__inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left | center | right */
    align-items: center;
    min-height: var(--topbar-h);
  }

  .mp-brand{
    grid-column: 1;
    justify-self: start;
  }

  .mp-cta--mobile{
    grid-column: 2;
    justify-self: center;
  }
}

/* -------------------------
   BURGER BUTTON
-------------------------- */
.mp-burger{
  grid-column: 3;
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px;
}

.mp-burger span{
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 99px;
  background: #fff;
  transition: transform 220ms ease, opacity 220ms ease;
}

body.mp-menuOpen .mp-burger span:nth-child(1){
  transform: translateY(9px) rotate(45deg);
}
body.mp-menuOpen .mp-burger span:nth-child(2){
  opacity: 0;
}
body.mp-menuOpen .mp-burger span:nth-child(3){
  transform: translateY(-9px) rotate(-45deg);
}

/* -------------------------
   FULLSCREEN MOBILE MENU
-------------------------- */
.mp-mobileMenu{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(144, 219, 244, 0.98); /* matches topbar */
  backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

body.mp-menuOpen .mp-mobileMenu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mp-mobileMenu__inner{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* center vertically */
  text-align: center;
  gap: 18px;
  padding: 28px 24px;
}

.mp-mobileMenu__brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 6px;
}

/* Use your existing nav styles but stack vertically */
.mp-mobileMenu__nav .mp-heroNav{
  flex-direction: column;
  gap: 18px;
}

.mp-mobileMenu__nav .mp-heroNav a{
  font-size: 20px;
}

.mp-mobileMenu__cta{
  margin-top: 6px;
}

/* flags in a row on mobile (nicer than column) */
.mp-mobileMenu__flags{
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* prevent background scroll when menu open */
body.mp-menuOpen{
  overflow: hidden;
}

/* Zorg dat topbar en burger boven het fullscreen menu blijven */
.mp-topbar{
  z-index: 4000; /* was 2000 */
}

.mp-burger{
  position: relative;
  z-index: 5000;
}

.mp-mobileMenu{
  position: fixed;
  inset: 0;
  z-index: 3000;

  /* maak menu zelf transparant, overlay doen we apart */
  background: transparent;
  backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Donkere overlay laag */
.mp-mobileMenu::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.30); /* zwart 30% */
}

/* Zorg dat de inhoud boven de overlay komt */
.mp-mobileMenu__inner{
  position: relative;
  z-index: 1;
}

body.mp-menuOpen .mp-mobileMenu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Overlay + blur over de hele site wanneer menu open is */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);        /* dim */
  backdrop-filter: blur(8px);          /* blur */
  -webkit-backdrop-filter: blur(8px);  /* Safari */
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 2500; /* onder menu, boven content */
}

body.mp-menuOpen::before{
  opacity: 1;
  pointer-events: auto;
}

/* Menu boven overlay */
.mp-mobileMenu{ z-index: 3000; }

/* Topbar/burger boven menu zodat je X zichtbaar blijft */
.mp-topbar{ z-index: 4000; }
.mp-burger{ position: relative; z-index: 5000; }

/* Mobile menu: closed = completely inert */
#mpMobileMenu[aria-hidden="true"]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* <-- belangrijkste */
}

#mpMobileMenu[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}