/* ===================================================================
   Eigen aanpassingen - Stichting UFO
   -------------------------------------------------------------------
   Dit bestand staat LOS van de WordPress- en Elementor-bestanden en
   wordt als laatste ingeladen, dus wat hier staat wint. Zet al je eigen
   stijlwijzigingen hier neer en laat wp-content/themes/ en
   wp-content/plugins/ met rust.
   =================================================================== */

:root {

  /* ZO VER SCHUIFT HET LOGO MAXIMAAL NAAR LINKS.
     Dit is het enige getal dat je hoeft aan te passen.
       grotere waarde = verder naar links
       0px            = terug naar de oorspronkelijke plek        */
  --ufo-logo-max: 40px;

  /* Hoeveel ruimte er links van het logo beschikbaar is. De header
     staat in een gecentreerde kolom van 1240px met 20px binnenmarge. */
  --ufo-logo-ruimte: calc((100vw - 1240px) / 2 + 20px);

  /* Schuif nooit verder dan er ruimte is, en houd 20px over tot de
     vensterrand. Zonder deze berekening valt het logo bij een venster
     van rond de 1200px half buiten beeld.                          */
  --ufo-logo-shift: clamp(
      0px,
      calc(var(--ufo-logo-ruimte) - 20px),
      var(--ufo-logo-max)
  );
}

/* Alleen op desktop. Op mobiel staat het logo al op 20px van de rand. */
body.ast-desktop .site-header-section-left .site-branding {
  transform: translateX(calc(-1 * var(--ufo-logo-shift)));
}

/* ===================================================================
   Smalle desktop / tablet liggend (922px t/m 1024px)
   -------------------------------------------------------------------
   Astra toont het volledige menu vanaf 922px, maar Elementor maakt de
   bovenste blok al kleiner vanaf 1024px. Het grote logo (248px) valt
   daardoor over de titel heen en het menu springt naar twee regels.
   Hier: logo en menu kleiner, en de titel iets lager. Boven 1024px is
   er genoeg ruimte en verandert er niets.
   =================================================================== */
@media (min-width: 922px) and (max-width: 1024px) {
  body.ast-desktop .site-branding .custom-logo {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }
  body.ast-desktop .main-header-menu > li > .menu-link {
    font-size: 14px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 60px !important;
  }
  body.ast-desktop .elementor-top-section:first-of-type {
    padding-top: 150px !important;
  }
}