/* Gedeeld op alle pagina's.
   1. Cookiebot als balk onderaan op de telefoon, in plaats van over het hele scherm.
   De tekst en de knoppen blijven van Cookiebot; alleen de plaatsing en de maat
   veranderen. De :not(#a):not(#b) verhoogt de specificiteit boven die van Cookiebot. */
@media (max-width: 767px) {
  #CybotCookiebotDialog:not(#a):not(#b) {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 46vh !important;
    border-radius: 14px 14px 0 0 !important;
  }

  #CybotCookiebotDialog:not(#a):not(#b) #CybotCookiebotDialogHeader {
    padding: 6px 16px !important;
  }

  #CybotCookiebotDialog:not(#a):not(#b) #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
    padding: 10px 0 !important;
  }

  #CybotCookiebotDialog:not(#a):not(#b) #CybotCookiebotDialogBodyContent {
    padding-top: 8px !important;
  }

  #CybotCookiebotDialog:not(#a):not(#b) #CybotCookiebotDialogFooter,
  #CybotCookiebotDialog:not(#a):not(#b) #CybotCookiebotDialogBodyButtons {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  #CybotCookiebotDialog:not(#a):not(#b) button {
    min-height: 44px !important;
    padding: 8px 12px !important;
    margin: 3px 0 !important;
    font-size: 15px !important;
  }

  /* Het kleine cookie-icoon blijft bereikbaar boven de contactbalk. */
  #CookiebotWidget {
    bottom: 84px !important;
  }
}

/* 2. Het uitklapmenu op de telefoon was begrensd op 24rem. Met acht of meer links
   werd de knop "Check datum" afgeknipt. Nu past het menu zich aan het scherm aan. */
#mobileMenu.max-h-96 {
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
}

/* 3. Het volledige menu (negen links en een knop) past vanaf ongeveer 1024 pixels.
   Daaronder viel het logo over drie regels en verdween "Check datum" buiten beeld.
   Tussen 768 en 1024 pixels gebruiken we daarom ook het uitklapmenu. */
#site-header nav > a:first-child { white-space: nowrap; font-size: clamp(1.35rem, 1rem + 1.6vw, 1.875rem); }
@media (min-width: 768px) and (max-width: 1023px) {
  #site-header nav > div.hidden { display: none !important; }
  #mobileMenuBtn { display: block !important; }
  #mobileMenu { display: block !important; }
}
/* open menu: hamburger wordt een kruisje */
#mobileMenuBtn[aria-expanded="true"] .fa-bars::before { content: "\f00d"; }
@media (min-width: 1024px) and (max-width: 1180px) {
  #site-header nav > div.hidden > a { padding-left: 0.55rem; padding-right: 0.55rem; }
}
/* taalknop NL / EN */
#site-header .show-lang { margin-left: 0.25rem; border: 1px solid rgba(212, 175, 55, 0.55); border-radius: 99px; padding: 0.3rem 0.7rem !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.08em; }

/* menulinks breken nooit over twee regels */
#site-header nav > div.hidden > a { white-space: nowrap; }

/* 4. "Boeken voor": de diensten in een uitklapmenu, zodat de menubalk rustig blijft */
#site-header .menu-drop { position: relative; }
#site-header .menu-drop > summary { display: flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; white-space: nowrap; }
#site-header .menu-drop > summary::-webkit-details-marker { display: none; }
#site-header .menu-drop > summary i { font-size: 0.6rem; transition: transform 0.2s ease; }
#site-header .menu-drop[open] > summary { color: #D4AF37; }
#site-header .menu-drop[open] > summary i { transform: rotate(180deg); }
#site-header .menu-drop__panel {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  padding: 0.5rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  background: #0B0F1C;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
#site-header .menu-drop__panel a { display: block; padding: 0.6rem 0.85rem; border-radius: 6px; color: #F4EEE2; font-size: 0.92rem; font-weight: 500; white-space: nowrap; text-decoration: none; }
#site-header .menu-drop__panel a:hover, #site-header .menu-drop__panel a:focus-visible { background: rgba(212, 175, 55, 0.12); color: #D4AF37; }
/* kopjes in het uitklapmenu op de telefoon */
#mobileMenu .menu-group { margin: 0.9rem 0 0.2rem; padding: 0 0.2rem; color: #D4AF37; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
#mobileMenu .menu-group:first-child { margin-top: 0; }