/* Eigen aanpassingen bovenop het oorspronkelijke design. Dit bestand wordt als laatste geladen. */

/* Bento-grid "Culinaire verwennerij" (over ons): kaarten vulden hun gridvak niet, waardoor de burgerkaart
   (met vaste beeldverhouding) klein bleef. Een rastercel rekt zo'n element niet vanzelf uit, dus expliciet 100%. */
li.card-feature-18__wrapper.brxe-block {
  width: 100%;
}

/* Melding onder het contactformulier na verzenden. */
.form-melding {
  width: 100%;
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-xs);
  background-color: var(--primary);
  color: var(--dark);
}
.form-melding.is-fout {
  background-color: var(--error-20);
}

/* 404-pagina */
.pagina-404__container {
  align-items: center;
  text-align: center;
  row-gap: var(--space-m);
}
.pagina-404__knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
}

/* Header: tien menu-items naast het logo. Logo krimpt nooit; tussen 1200 en 1440px compacter menu,
   daaronder het hamburgermenu. */
.header-5-bot__logo.brxe-logo {
  flex-shrink: 0;
}
.header-5-bot__menu.brxe-nav-menu .bricks-nav-menu > li > a,
.header-5-bot__menu.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * {
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .header-5-bot__menu.brxe-nav-menu {
    display: none;
  }
  .header-5-bot__toggle-menu.brxe-toggle {
    display: flex;
    --brxe-toggle-scale: 1;
    mix-blend-mode: difference;
  }
  .header-5-bot__container.brxe-container {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1200px) and (max-width: 1440px) {
  .header-5-bot__menu.brxe-nav-menu .bricks-nav-menu {
    gap: 1.4rem;
  }
  .header-5-bot__menu.brxe-nav-menu .bricks-nav-menu > li > a,
  .header-5-bot__menu.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * {
    font-size: 1.5rem;
  }
  .header-5-bot__container.brxe-container {
    column-gap: var(--space-s);
  }
}

/* Kopfoto van de pagina's: tekst altijd onder de header (die over de foto ligt).
   --header-hoogte wordt gezet door assets/js/site.js. */
.hero-70__container-info.brxe-block {
  padding-top: calc(var(--header-hoogte, 16rem) + var(--space-l));
}

/* Reserveerknop en hamburgermenu naast elkaar */
.header-5-bot__container.brxe-container > .brxe-div:last-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
}

/* Taalkeuze in de bovenbalk (en in het mobiele menu) */
.taalkeuze {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-left: var(--space-xs);
  padding-left: var(--space-xs);
  border-left: 1px solid var(--light-20);
}
.taalkeuze a {
  font-size: 1.3rem;
  letter-spacing: .06em;
  line-height: 1;
  padding: .4rem .5rem;
  border-radius: var(--radius-xs);
  color: var(--light-70);
  text-decoration: none;
}
.taalkeuze a:hover { color: var(--primary); }
.taalkeuze a[aria-current] { color: var(--dark); background-color: var(--primary); }
.offcanvas-header-5-bot .taalkeuze { border-left-color: var(--dark-20); }
.offcanvas-header-5-bot .taalkeuze a { color: var(--dark-70); }
.offcanvas-header-5-bot .taalkeuze a[aria-current] { color: var(--dark); }

/* Duitse en Engelse menu-items zijn langer: Duits altijd compact en hamburgermenu tot 1700px, Engels hamburgermenu tot 1280px. */
@media (min-width: 0) {
  html[lang="de-DE"] .header-5-bot__menu.brxe-nav-menu .bricks-nav-menu { gap: 1.4rem; }
  html[lang="de-DE"] .header-5-bot__menu.brxe-nav-menu .bricks-nav-menu > li > a,
  html[lang="de-DE"] .header-5-bot__menu.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > * { font-size: 1.5rem; }
}
@media (max-width: 1699px) {
  html[lang="de-DE"] .header-5-bot__menu.brxe-nav-menu { display: none; }
  html[lang="de-DE"] .header-5-bot__toggle-menu.brxe-toggle { display: flex; --brxe-toggle-scale: 1; mix-blend-mode: difference; }
  html[lang="de-DE"] .header-5-bot__container.brxe-container { flex-wrap: nowrap; }
}
@media (max-width: 1279px) {
  html[lang="en-GB"] .header-5-bot__menu.brxe-nav-menu { display: none; }
  html[lang="en-GB"] .header-5-bot__toggle-menu.brxe-toggle { display: flex; --brxe-toggle-scale: 1; mix-blend-mode: difference; }
  html[lang="en-GB"] .header-5-bot__container.brxe-container { flex-wrap: nowrap; }
}

/* Header blijft tijdens het scrollen zichtbaar (geen wegschuiven). Bricks maakt de header dan crème met donkere
   menutekst; de bovenbalk met telefoon, social en taalkeuze blijft zwart zodat de lichte tekst leesbaar is. */
#brx-header.brx-sticky.scrolling > .header-5-top.brxe-section {
  background-color: var(--tertiary);
}
#brx-header.brx-sticky.scrolling > .header-5-bot.brxe-section {
  box-shadow: 0 2px 12px var(--dark-10);
}

/* Zwarte bovenbalk alleen op desktop, laptop en tablet liggend; op telefoons en tablets staand verborgen
   (social-iconen en taalkeuze staan dan in het uitklapmenu). */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1199px), (max-height: 500px) {
  #brx-header > .header-5-top { display: none; }
}