/* ==========================================================================
   FREERUN ACHTERHOEK — ELEMENTOR COMPAT

   ALLEEN NODIG ALS JE DE ELEMENTOR-SJABLONEN GEBRUIKT.
   Plak dit ONDER het hoofdbestand (4-css-eenmalig.css), in dezelfde
   "Extra CSS" van de Customizer. De volgorde is belangrijk.

   WAAROM DIT BESTAAT
   Elementor bouwt om elke widget twee of drie extra divs. Bovendien komen
   je CSS-klassen op de buitenste div terecht en niet op de kop, de knop of
   de lijst zelf. Zonder dit bestand landt de opmaak dus op het verkeerde
   element en ziet de pagina er half uit.

   Wat hieronder gebeurt:
   - overbodige wikkels uit de layout halen met display: contents
   - de opmaak doorgeven aan het element dat er echt toe doet
   - Elementor zijn eigen kop- en knopstijlen laten erven in plaats van
     opleggen
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINERS
   Elementor zet elke container op flex met een eigen gap. Mijn secties
   rekenen op grid. Het gaat hier om structuur, dus !important is terecht:
   anders hangt het af van welk stylesheet toevallig later laadt.
   -------------------------------------------------------------------------- */

.fa-scope .e-con,
.fa-scope .e-con-inner {
  --gap: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* Elementor zet op elke container flex-wrap: wrap met align-content: flex-start.
   Daardoor is een flexregel maar zo breed als zijn inhoud, en heeft
   margin-inline: auto geen ruimte meer om mee te centreren: .fa-container
   plakte links tegen de rand. Met nowrap vult de regel de volle breedte en
   centreert de container weer gewoon. */
.fa-scope .e-con {
  flex-wrap: nowrap;
  align-content: stretch;
}

/* Containers met een eigen layout van mij */
.fa-scope .fa-locations,
.fa-scope .fa-offer,
.fa-scope .fa-stats__grid,
.fa-scope .fa-split,
.fa-scope .fa-rental__grid,
.fa-scope .fa-merch,
.fa-scope .fa-steps {
  display: grid !important;
}

.fa-scope .fa-location,
.fa-scope .fa-split__body,
.fa-scope .fa-offer__item,
.fa-scope .fa-hero__content,
.fa-scope .fa-cta__inner {
  display: flex !important;
  flex-direction: column !important;
}

/* Alleen display forceren is niet genoeg: .e-con zet ook flex-direction op
   column, dus knoppen kwamen onder elkaar te staan. */
.fa-scope .fa-btn-row,
.fa-scope .fa-location__head,
.fa-scope .fa-section-head__top,
.fa-scope .fa-creds {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.fa-scope .fa-hero__inner {
  display: flex !important;
  flex-direction: row !important;
}

/* De container mag nooit zijn eigen breedte begrenzen: dat doet .fa-container */
.fa-scope .e-con > .e-con-inner {
  max-width: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   2. WIDGETWIKKELS
   display: contents laat de wikkel bestaan voor Elementor, maar haalt hem
   uit de layout. Zo werken mijn grids op de echte inhoud.
   -------------------------------------------------------------------------- */

.fa-scope .fa-hero__media .elementor-widget-image,
.fa-scope .fa-hero__media .elementor-widget-image .elementor-widget-container,
.fa-scope .fa-split__media .elementor-widget-image,
.fa-scope .fa-split__media .elementor-widget-image .elementor-widget-container,
.fa-scope .fa-merch .elementor-widget-html,
.fa-scope .fa-merch .elementor-widget-html .elementor-widget-container {
  display: contents;
}

/* Elementor zet standaard marge onder elke widget. Wij regelen ritme zelf. */
.fa-scope .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   3. KOPPEN
   Mijn klasse komt op de buitenste div terecht. Lettertype en kleur erven
   vanzelf door, maar Elementor zet zelf line-height op de kop. Die zetten
   we terug op erven.
   -------------------------------------------------------------------------- */

/* Extra .elementor-widget in de selector, bewust. Elementor zet zijn globale
   kop-kleur en -lettertype met .elementor-widget-heading .elementor-heading-title
   (specificiteit 0,2,0). Bij een gelijke stand wint wie het laatst laadt, en
   daar wil je niet van afhankelijk zijn. Met deze regel (0,3,0) winnen wij altijd. */
.fa-scope .elementor-widget .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   4. TEKSTBLOKKEN
   -------------------------------------------------------------------------- */

.fa-scope .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.fa-scope .elementor-widget-text-editor p + p {
  margin-top: var(--fa-s3);
}

/* --------------------------------------------------------------------------
   5. KNOPPEN
   Dit is het belangrijkste stuk. Elementor stopt de knop in drie divs en
   zet zijn eigen opmaak op de <a>. Wij halen de divs uit de layout en geven
   de <a> mijn knopstijl. De varianten (licht, ghost, outline) werken vanzelf
   mee, omdat die alleen custom properties zetten en die overerven.
   -------------------------------------------------------------------------- */

.fa-scope .elementor-widget-button,
.fa-scope .elementor-widget-button > .elementor-widget-container,
.fa-scope .elementor-widget-button .elementor-button-wrapper {
  display: contents;
}

/* De wikkel draagt ook de klasse .fa-btn, en display: contents haalt wel de
   doos weg maar niet de pseudo-elementen. Zonder dit zweeft er een tweede
   afgesneden hoekje los naast de knop. */
.fa-scope .elementor-widget-button.fa-btn::before,
.fa-scope .elementor-widget-button.fa-btn::after {
  content: none;
}

/* LET OP: hier mogen de --fa-btn-* variabelen NIET opnieuw gezet worden.
   De varianten (outline, light, ghost) zetten ze op de wikkel, en de <a>
   erft ze. Zet je ze hier ook, dan blokkeer je die overerving en wordt
   elke knop zwart. Vandaar var() met een terugvalwaarde. */
.fa-scope .elementor-widget-button .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 1.9em;
  border: 2px solid var(--fa-btn-bd, var(--fa-black));
  border-radius: 0;
  background: var(--fa-btn-bg, var(--fa-black));
  color: var(--fa-btn-fg, var(--fa-white));
  font-family: var(--fa-font-text);
  font-size: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  fill: currentColor;
  transition: background-color 0.22s var(--fa-ease), color 0.22s var(--fa-ease),
    border-color 0.22s var(--fa-ease), transform 0.22s var(--fa-ease);
  overflow: hidden;
}

/* De afgesneden hoek rechtsonder: het merkteken in het klein. */
.fa-scope .elementor-widget-button .elementor-button::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.28;
  transition: width 0.22s var(--fa-ease), height 0.22s var(--fa-ease);
}

.fa-scope .elementor-widget-button .elementor-button:hover,
.fa-scope .elementor-widget-button .elementor-button:focus-visible {
  transform: translateY(-2px);
  background: var(--fa-btn-bg, var(--fa-black));
  color: var(--fa-btn-fg, var(--fa-white));
  border-color: var(--fa-btn-bd, var(--fa-black));
}

.fa-scope .elementor-widget-button .elementor-button:hover::after {
  width: 22px;
  height: 22px;
}

/* De varianten zetten alleen variabelen; die erven door naar de <a>. */
.fa-scope .elementor-widget-button.fa-btn--light:hover {
  --fa-btn-bg: transparent;
  --fa-btn-fg: var(--fa-white);
}

.fa-scope .elementor-widget-button.fa-btn--outline:hover {
  --fa-btn-bg: var(--fa-black);
  --fa-btn-fg: var(--fa-white);
}

.fa-scope .elementor-widget-button.fa-btn--ghost:hover {
  --fa-btn-bg: var(--fa-white);
  --fa-btn-fg: var(--fa-black);
  --fa-btn-bd: var(--fa-white);
}

.fa-scope .elementor-widget-button.fa-btn--sm .elementor-button {
  padding: 0.85em 1.35em;
  font-size: 0.75rem;
}

.fa-scope .elementor-widget-button.fa-btn--block .elementor-button {
  width: 100%;
}

/* De 'lees verder' link in de aanbodkaarten is ook een knopwidget, maar
   moet er als tekstlink uitzien. */
.fa-scope .elementor-widget-button.fa-offer__more .elementor-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fa-white);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  justify-content: flex-start;
  margin-top: auto;
  padding-top: var(--fa-s2);
}

.fa-scope .elementor-widget-button.fa-offer__more .elementor-button::after {
  display: none;
}

.fa-scope .elementor-widget-button.fa-offer__more .elementor-button:hover {
  transform: none;
  gap: 1em;
}

/* --------------------------------------------------------------------------
   6. OPSOMMINGEN
   Elementor's Icon List vervangt mijn eigen lijstopmaak. Elke regel blijft
   los aanpasbaar in het paneel; de chevron tekenen we met CSS onder 45
   graden, zodat er geen icoonbibliotheek bij nodig is.
   -------------------------------------------------------------------------- */

.fa-scope .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.fa-scope .elementor-icon-list-icon {
  display: none;
}

/* Kenmerkenlijst (voor ouders, verhuur) */
.fa-scope .fa-ticks .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.fa-scope .fa-ticks .elementor-icon-list-item:first-child {
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-on-black .fa-ticks .elementor-icon-list-item,
.fa-rental .fa-ticks .elementor-icon-list-item {
  border-color: rgba(255, 255, 255, 0.22);
}

.fa-scope .fa-ticks .elementor-icon-list-text {
  display: block;
  position: relative;
  padding-left: 1.6rem;
  color: inherit;
}

/* De chevron: twee randen onder 45 graden. Wijst vooruit, nooit omlaag. */
.fa-scope .fa-ticks .elementor-icon-list-text::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.fa-scope .fa-ticks .elementor-icon-list-text b {
  font-weight: 700;
  color: var(--fa-black);
}

.fa-on-black .fa-ticks .elementor-icon-list-text b,
.fa-rental .fa-ticks .elementor-icon-list-text b {
  color: var(--fa-white);
}

/* Gegevensregels in de locatiekaart.
   Het losse tekstdeel naast de <b> wordt vanzelf de tweede kolom. */
.fa-scope .fa-location__facts {
  margin-bottom: var(--fa-s3);
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-location__facts .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
}

.fa-scope .fa-location__facts .elementor-icon-list-text {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--fa-s2);
  align-items: baseline;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fa-slate);
  line-height: 1.45;
}

.fa-scope .fa-location__facts .elementor-icon-list-text b {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-scope .fa-location--invert .elementor-icon-list-text,
.fa-scope .fa-location--invert p {
  color: var(--fa-on-dark-soft);
}

/* --------------------------------------------------------------------------
   7. DE ZWARTE LOCATIEKAART
   In de HTML-versie stond dit als losse stijl op het element zelf.
   Als Elementor-container is het een nette klasse.
   -------------------------------------------------------------------------- */

.fa-scope .fa-location--invert {
  background: var(--fa-black);
  border-color: var(--fa-black);
}

.fa-scope .fa-location--invert .fa-location__city {
  color: var(--fa-white);
}

.fa-scope .fa-location--invert::before {
  background: var(--fa-graphite);
}

/* --------------------------------------------------------------------------
   8. KLEINE DINGEN
   -------------------------------------------------------------------------- */

.fa-scope .fa-section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Elementor's afbeeldingswidget zet soms een eigen breedte neer. */
.fa-scope .elementor-widget-image img {
  width: 100%;
  display: block;
}

/* In de editor zelf zijn lege sierelementen onzichtbaar en dus onklikbaar.
   Dit maakt ze zichtbaar zolang je aan het bewerken bent. */
.elementor-editor-active .fa-scope .fa-wedge,
.elementor-editor-active .fa-scope .fa-hero__accent {
  outline: 1px dashed rgba(125, 125, 125, 0.6);
}


/* --------------------------------------------------------------------------
   9. CORRECTIES NA TEST OP DE LIVE PAGINA
   -------------------------------------------------------------------------- */

/* 9a. Hoekvlakken schoten naar links en dekten de titel af.
   Elementor gebruikt ::before van elke container voor zijn eigen
   achtergrond-overlay en zet daar left: 0 op. Mijn hoekvlak gebruikt
   hetzelfde pseudo-element en zet right: 0. Links en rechts tegelijk kan
   niet: de browser laat dan right vallen en plakt het vlak links, dwars
   over "DIDAM" en over "HUUR HET MATERIAAL".
   left: auto zet dat recht. */
.fa-scope .fa-location::before,
.fa-scope .fa-merch-card::before {
  left: auto !important;
  right: 0 !important;
  bottom: auto !important;
  /* Ook de maat forceren. Elementor zet op datzelfde pseudo-element
     width en height op 100%. Nu laadt onze CSS later en winnen we, maar
     daar wil ik niet van afhangen: bij een plugin-update of een andere
     laadvolgorde zou het hoekvlak zo de hele kaart vullen. */
  width: var(--fa-wedge-sm) !important;
  height: var(--fa-wedge-sm) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 0) !important;
}

.fa-scope .fa-rental::before {
  left: auto !important;
  right: 0 !important;
  bottom: auto !important;
  width: var(--fa-wedge) !important;
  height: var(--fa-wedge) !important;
  clip-path: polygon(100% 0, 100% 100%, 0 0) !important;
}

/* 9b. Sierelementen in een HTML-widget positioneerden zich tegen die widget
   in plaats van tegen de sectie. Door de widget uit de positionering te
   halen vallen de diagonalen weer op hun plek. */
.fa-scope .elementor-widget-html:has(.fa-wedge),
.fa-scope .elementor-widget-html:has(.fa-hero__accent) {
  position: static;
}

/* 9c. De "lees verder" link viel weg achter het hover-vlak.
   De knopwikkel staat op display: contents en kan dus geen z-index dragen;
   die moet op de link zelf. */
.fa-scope .elementor-widget-button.fa-offer__more .elementor-button {
  position: relative;
  z-index: 2;
}

/* 9d. Het hover-vlak in de aanbodkaarten was zo groot dat het over de tekst
   viel. Kleiner, en het blijft in de hoek waar het hoort. */
.fa-scope .fa-offer__item:hover::after,
.fa-scope .fa-offer__item:focus-within::after {
  width: var(--fa-wedge-sm);
  height: var(--fa-wedge-sm);
}

/* 9e. De statusvlag stond deels onder het hoekvlak. */
.fa-scope .fa-location__head {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   10. HEADER MET WORDPRESS-MENU
   De menulinks komen uit Weergave -> Menu's, niet uit de code. Elementor
   rendert dat menu met eigen klassen; hieronder krijgen die de huisstijl.

   JIJ HOEFT HIER NIETS AAN TE DOEN om links te wijzigen. Dat doe je in
   WordPress bij Weergave -> Menu's.
   ========================================================================== */

/* --- 10a. De balk zelf ---------------------------------------------------- */

.fa-scope .fa-header .fa-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s3);
  min-height: 78px;
}

/* --- 10b. Het logo -------------------------------------------------------- */

/* HET BLAUW ZAT HIER. Zonder eigen hover-regel pakte de link de
   standaard linkkleur van Elementor (#4054B2, donkerblauw). Alle vier de
   toestanden staan nu vast op wit, dus dat kan niet meer gebeuren. */
.fa-scope .fa-header__logo,
.fa-scope .fa-header__logo:link,
.fa-scope .fa-header__logo:visited,
.fa-scope .fa-header__logo:hover,
.fa-scope .fa-header__logo:focus,
.fa-scope .fa-header__logo:active {
  color: var(--fa-white) !important;
  text-decoration: none;
}

/* De groei-animatie. transform-origin links, anders schuift het logo
   van de rand af. */
.fa-scope .fa-header__logo {
  display: block;
  flex: none;
  width: clamp(150px, 21vw, 208px);
  transform-origin: left center;
  transition: transform 0.28s var(--fa-ease);
  will-change: transform;
}

.fa-scope .fa-header__logo:hover,
.fa-scope .fa-header__logo:focus-visible {
  transform: scale(1.05);
}

.fa-scope .fa-header__logo svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* --- 10c. Het menu, horizontaal op desktop -------------------------------- */

.fa-scope .fa-nav {
  margin-left: auto;
}

.fa-scope .fa-nav .elementor-nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fa-scope .fa-nav .elementor-nav-menu li {
  margin: 0;
  position: relative;
}

.fa-scope .fa-nav .elementor-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5rem 0 !important;
  color: var(--fa-on-dark);
  font-family: var(--fa-font-text);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  fill: currentColor;
  transition: color 0.2s var(--fa-ease);
}

/* Het witte streepje dat vanuit links uitschuift */
.fa-scope .fa-nav .elementor-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--fa-white);
  transition: width 0.24s var(--fa-ease);
}

.fa-scope .fa-nav .elementor-item:hover,
.fa-scope .fa-nav .elementor-item:focus,
.fa-scope .fa-nav .elementor-item.elementor-item-active,
.fa-scope .fa-nav .elementor-item.highlighted {
  color: var(--fa-white);
  background: none;
}

.fa-scope .fa-nav .elementor-item:hover::after,
.fa-scope .fa-nav .elementor-item:focus::after,
.fa-scope .fa-nav .elementor-item.elementor-item-active::after {
  width: 100%;
}

/* --- 10d. Het uitklapmenu onder Diensten ---------------------------------- */

.fa-scope .fa-nav .elementor-nav-menu--dropdown {
  background: var(--fa-black);
  border: 1px solid var(--fa-hairline);
  border-radius: 0;
  min-width: 15rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.fa-scope .fa-nav .sub-menu {
  display: block;
  gap: 0;
  padding: 0.35rem 0;
}

.fa-scope .fa-nav .elementor-sub-item {
  display: block;
  padding: 0.7rem 1.1rem !important;
  color: var(--fa-on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: border-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease),
    padding-left 0.2s var(--fa-ease);
}

.fa-scope .fa-nav .elementor-sub-item:hover,
.fa-scope .fa-nav .elementor-sub-item:focus,
.fa-scope .fa-nav .elementor-sub-item.elementor-item-active {
  color: var(--fa-white);
  background: none;
  border-left-color: var(--fa-white);
  padding-left: 1.4rem !important;
}

/* --- 10e. Hamburger en mobiel paneel -------------------------------------- */

.fa-scope .elementor-menu-toggle {
  background: transparent !important;
  color: var(--fa-white) !important;
  border: 0;
  padding: 0.6rem;
  margin-inline-start: auto;
}

.fa-scope .elementor-menu-toggle svg,
.fa-scope .elementor-menu-toggle i {
  fill: var(--fa-white);
  color: var(--fa-white);
  font-size: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
}

/* LET OP: Elementor gebruikt de klasse .elementor-nav-menu--dropdown voor
   TWEE dingen: het uitklapmenu onder Diensten op desktop, en het hele
   mobiele paneel. Zonder media query kreeg het desktop-uitklapmenu de
   mobiele opmaak: Staatliches, veel te groot en te hoog.
   Alles hieronder geldt daarom alleen onder 1025 px, en richt zich op de
   losse <nav> die Elementor voor mobiel neerzet. */
@media (max-width: 1024px) {
  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown {
    background: var(--fa-black);
    border: 0;
    border-top: 1px solid var(--fa-hairline);
    box-shadow: none;
    margin-top: 0;
    min-width: 0;
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-nav-menu {
    display: block;
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-item,
  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-sub-item {
    display: block;
    padding: 1rem var(--fa-gutter) !important;
    border-bottom: 1px solid var(--fa-hairline);
    border-left: 0;
    font-family: var(--fa-font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--fa-white);
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-item::after {
    display: none;
  }

  .fa-scope .fa-nav nav.elementor-nav-menu--dropdown .elementor-sub-item {
    font-family: var(--fa-font-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding-left: calc(var(--fa-gutter) + 1.25rem) !important;
    color: var(--fa-on-dark-soft);
  }

  /* De Proefles-knop hoort op mobiel niet naast de hamburger te staan. */
  .fa-scope .fa-header__cta {
    display: none;
  }
}

/* Boven 1025 px is het uitklapmenu compact en in Montserrat. */
@media (min-width: 1025px) {
  .fa-scope .fa-nav ul.elementor-nav-menu--dropdown {
    padding: 0.35rem 0;
  }
}

/* --- 10f. Ankerlinks onder de plakkende header ---------------------------- */

/* Klikte je "Bekijk de locaties", dan schoof de titel achter de balk.
   Deze regel houdt er ruimte voor vrij. Pas het getal aan als je de
   header hoger of lager maakt. */
.fa-scope [id]:not(body) {
  scroll-margin-top: 96px;
}


/* --- 10g. Botsing met de oude header opruimen ------------------------------

   De basis-CSS bevat nog regels van de eerste, handgebouwde header. Daarin
   was .fa-nav het menu dat op mobiel verborgen moest worden. Nu is .fa-nav
   de hele Elementor-widget, en die bevat OOK de hamburger. Het gevolg was
   een mobiele balk met alleen een logo en geen enkele manier om het menu te
   openen. Elementor regelt zijn eigen responsive gedrag, dus wij moeten die
   oude regel hier terugdraaien.
   -------------------------------------------------------------------------- */

.fa-scope .fa-nav {
  display: block !important;
  margin-left: auto;
}

/* De Proefles-knop hoort vanaf 1025 px weer zichtbaar te zijn. De oude
   basisregel zette dat breekpunt op 1060 px, waardoor de knop tussen
   1025 en 1059 px onterecht verdween terwijl het menu al horizontaal stond. */
@media (min-width: 1025px) {
  .fa-scope .fa-header__cta {
    display: inline-flex !important;
  }
}

/* Op mobiel staan logo en hamburger tegenover elkaar. */
@media (max-width: 1024px) {
  .fa-scope .fa-nav .elementor-menu-toggle {
    display: flex !important;
    margin-left: auto;
  }
}