/* De Grid: 25% - 50% - 25% */
.footer-main-grid {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr !important;
  width: 100% !important;
  gap: 0 !important;
  align-items: start;
}

/* Linker blok (Naam & Slogan) */
.footer-grid-col:nth-child(1) {
  text-align: left;
}

/* Midden blok (Logo & Copyright) */
.footer-grid-col:nth-child(2) {
  text-align: center;
}

/* Rechter blok (Adres & Telefoon) */
.footer-grid-col:nth-child(3) {
  text-align: left; /* Tekst regels beginnen links */
  margin-left: auto; /* Het hele blok staat aan de rechterkant */
  width: fit-content;
}

@media screen and (max-width: 850px) {
  /* De container die de kolommen vasthoudt */
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Dwingt alle blokken naar de verticale middenas */
    text-align: center !important;
    gap: 30px !important; /* Ruimte tussen de blokken */
    width: 100% !important;
  }

  /* Forceer elk blok (links, midden, rechts) naar het midden */
  .footer-grid > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Lijn inhoud van elk blok midden uit */
    text-align: center !important;
    margin: 0 !important; /* Reset alle eerdere marges */
    justify-self: center !important;
  }

  /* Specifieke reset voor het rechterblok (adres) */
  .footer-grid > div:last-child {
    margin-left: 0 !important;
    align-items: center !important;
  }

  /* Zorg dat alle tekst en links binnen de blokken ook centreren */
  .footer-grid div, 
  .footer-grid p, 
  .footer-grid a, 
  .footer-grid strong {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}

/* Specifiek voor landscape op mobiel/tablet */
@media screen and (orientation: landscape) and (max-width: 950px) {
  
  /* Top-bar, Header en Footer over de hele breedte */
  .top-bar, 
  .site-header, 
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    left: 0 !important;
    position: relative !important;
  }

  /* De binnenste containers die de content vasthouden */
  .top-bar__inner,
  .site-header__inner,
  .site-footer__inner,
  .footer-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;  /* Kleine marge voor de tekst */
    padding-right: 20px !important;
    margin: 0 auto !important;
  }
}

/* Voor landscape op mobiel */
@media screen and (orientation: landscape) and (max-width: 950px) {
  .top-bar, 
  .site-header, 
  .site-footer {
    width: 100% !important;
    max-width: 100vw !important; /* Gebruik de volledige breedte van het scherm */
    margin: 0 !important;
    padding-left: env(safe-area-inset-left) !important;  /* Bescherming tegen de notch */
    padding-right: env(safe-area-inset-right) !important;
  }
}

/* Landscape & Mobiel: Forceer zwarte balken over de volle breedte */
@media screen and (max-width: 950px) {
  .top-bar, 
  .site-header, 
  .site-footer {
    width: 100vw !important; /* 100% van de schermbreedte */
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
}

/* De grijze divider in het middenblok */
.footer-divider-custom, 
div[style*="background-color: #555555"], 
div[style*="background-color:#555555"] {
  max-width: 80% !important; /* Nooit breder dan 80% van het scherm */
  width: 60px !important;    /* Maar bij voorkeur 60px */
  margin: 15px auto !important;
  display: block !important;
  height: 1px !important;
}