/* De lijst met talen */
.top-bar-language-switcher ul.links {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centraal op mobiel */
  list-style: none;
  margin: 0;
  padding: 0;
  
  /* STANDAARD (MOBIEL STAAND): Kleine marge */
  gap: 5px; 
}

/* De linkjes zelf iets minder 'padding' geven op mobiel */
.top-bar-language-switcher ul.links li a {
  text-decoration: none;
  padding: 5px 4px; /* Minder ruimte links/rechts van de tekst */
  font-size: 0.85rem; /* Iets kleiner font voor mobiel zodat 4 talen passen */
}

/* DESKTOP (Vanaf 1440px) */
@media screen and (min-width: 1440px) {
  .top-bar-language-switcher ul.links {
    justify-content: flex-end; /* Rechts uitlijnen op desktop */
    gap: 15px; /* Meer ruimte tussen de talen op groot scherm */
  }
  
  .top-bar-language-switcher ul.links li a {
    padding: 5px 10px;
    font-size: 1rem;
  }
}

/* Zorg dat de links zelf er ook goed uitzien */
.top-bar-language-switcher ul.links li a {
  text-decoration: none;
  padding: 5px 10px;
}

/* Specifiek voor de actieve taal (zoals 'Nederlands' in je screenshot) */
.top-bar-language-switcher ul.links li.is-active a {
  font-weight: bold;
  text-decoration: underline;
}
/* De volledige balk (van links naar rechts op ELK scherm) */
.site-top-bar-component {
  background-color: #000000; /* Pikzwart */
  width: 100%;               /* Altijd volledige breedte */
  margin: 0;
  padding: 5px 0;            /* Iets verticale ruimte */
}

/* De binnenkant die de breedte beperkt op desktop */
.site-top-bar-component .container {
  max-width: 1440px;         /* Maximaal 1440px op desktop */
  margin: 0 auto;            /* Centreer de container */
  padding: 0 15px;           /* Voorkomt dat tekst op mobiel tegen de schermrand plakt */
  display: flex;
  justify-content: flex-end; /* Talen rechts (wordt overschreven op mobiel) */
}

/* De lijst met talen */
.top-bar-language-switcher ul.links {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;                  /* Jouw gewenste kleinere marge tussen de talen */
}

/* De links in de zwarte balk */
.top-bar-language-switcher ul.links li a {
  color: #ffffff;            /* Witte tekst op de zwarte achtergrond */
  text-decoration: none;
  font-size: 0.85rem;
  padding: 8px 5px;
  display: block;
}

/* Mobiel specifiek (staand en liggend tot tablet) */
@media screen and (max-width: 1439px) {
  .site-top-bar-component .container {
    justify-content: center; /* Op mobiel de talen in het midden zetten */
  }
}
/* --- Basis Top Bar (Pikzwart) --- */
.site-top-bar-component {
  background-color: #000000;
  width: 100%;
  margin: 0;
  padding: 8px 0; /* Iets meer ademruimte */
  border-bottom: 1px solid #222222; /* Subtiele scheidingslijn */
}

/* --- Container --- */
.site-top-bar-component .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end; /* Rechts uitlijnen op desktop */
}

/* --- De Knoppen Lijst --- */
.top-bar-language-switcher ul.links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Nooit afbreken op mobiel */
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px; /* Minimale ruimte tussen de knoppen voor mobiel */
}

/* --- De Stijlvolle Knoppen (Links) --- */
.top-bar-language-switcher ul.links li a {
  display: block;
  color: #eeeeee; /* Gebroken wit voor betere leesbaarheid op zwart */
  text-decoration: none;
  text-transform: uppercase; /* Chique hoofdletters */
  font-family: "Georgia", serif; /* Een serieuze, juridische serif font */
  font-size: 0.75rem; /* Compact voor mobiel */
  font-weight: 400;
  letter-spacing: 1px; /* Meer ruimte tussen letters voor chique uitstraling */
  
  /* De knop vorm */
  padding: 6px 10px;
  border: 1px solid transparent; /* Standaard onzichtbare rand */
  transition: all 0.3s ease; /* Zachte interactie effecten */
}

/* --- De Interactie (Hover/Actief) --- */

/* Hover effect: subtiele verandering */
.top-bar-language-switcher ul.links li a:hover,
.top-bar-language-switcher ul.links li a:focus {
  background-color: #111111; /* Heel donkergrijs */
  border-color: #333333; /* Subtiele omlijning */
  color: #ffffff;
}

/* De Actieve Taal (bijv. Nederlands) */
.top-bar-language-switcher ul.links li.is-active a {
  color: #ffffff;
  font-weight: 700;
  border-color: #eeeeee; /* Een dunne witte omlijning voor de actieve taal */
  background-color: transparent;
}

/* --- Responsief gedrag --- */

/* Mobiel Specifiek (alles onder 1440px) */
@media screen and (max-width: 1439px) {
  .site-top-bar-component .container {
    justify-content: center; /* Op mobiel de knoppen in het midden */
  }
}

/* Desktop Specifiek (vanaf 1440px) */
@media screen and (min-width: 1440px) {
  .top-bar-language-switcher ul.links {
    gap: 12px; /* Meer ruimte tussen knoppen op desktop */
  }

  .top-bar-language-switcher ul.links li a {
    font-size: 0.8rem; /* Iets groter font op desktop */
    padding: 8px 14px; /* Iets ruimere knoppen op desktop */
  }
}
/* Header algemeen */
.site-header {
  padding: 20px 0 10px 0;
  background-color: #fff;
}

/* Branding centreren */
.site-logo-slogan-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Alles in het midden */
  text-align: center;
}

/* Verwijder standaard marges van Drupal blokken voor de 'strakke' look */
.site-logo-slogan-container .block {
  margin: 0;
  padding: 0;
}

/* Het logo */
.site-logo-slogan-container img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 250px; /* Pas aan naar wens */
}

/* De slogan direct onder het logo */
.site-logo-slogan-container .site-slogan {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 0.9rem;
  color: #444;
  margin-top: -5px; /* Subtiele overlap of strakke aansluiting */
  padding: 5px 0;
}

/* Menu op mobiel */
.site-navigation {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  border-top: 1px solid #eee; /* Subtiele lijn tussen branding en menu */
  padding-top: 10px;
}
/* --- Algemene Header Stijl --- */
.site-header {
  background-color: #ffffff;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}

.header-flex-container {
  display: flex;
  flex-direction: column; /* Dwingt alles onder elkaar op mobiel */
  align-items: center;    /* Alles in het midden */
}

/* --- Logo & Slogan 'strak' onder elkaar --- */
.branding-group {
  text-align: center;
  margin-bottom: 15px;
}

/* Verwijder marges van de Drupal-blokken binnen de branding */
.branding-group .block {
  margin: 0;
  padding: 0;
}

.branding-group img {
  display: block;
  margin: 0 auto;
  max-width: 200px; /* Pas aan naar grootte van je logo */
  height: auto;
}

.site-slogan {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 0.9rem;
  color: #333;
  margin-top: 5px; /* De 'strakke' aansluiting */
}

/* --- Menu: Mobiel (Standaard) --- */
.main-navigation {
  width: 100%;
}

/* De lijst met menu-items */
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* Onder elkaar op mobiel */
  align-items: center;
  gap: 10px;
}

.main-navigation ul li a {
  text-decoration: none;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

/* --- Desktop Instellingen (Vanaf 1440px) --- */
@media screen and (min-width: 1440px) {
  .header-flex-container {
    /* Je kunt hier kiezen: 
       Houd het 'column' voor een gecentreerd klassiek kranten-logo boven het menu, 
       of 'row' voor logo links en menu rechts. */
    flex-direction: column; 
  }

  .main-navigation ul {
    flex-direction: row; /* Naast elkaar op desktop */
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
    width: 100%;
  }
}
/* --- Header Layout --- */
.header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Logo en Slogan strak tegen elkaar */
.site-branding .block {
  margin: 0;
  padding: 0;
}

.site-branding img {
  display: block;
  margin: 0 auto;
  max-width: 220px;
}

.site-slogan {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 2px; /* Strak onder het logo */
  color: #333;
}

/* --- Hamburger Menu (Mobiel) --- */
.menu-toggle {
  display: none; /* Verberg de checkbox */
}

.hamburger-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  gap: 4px;
}

.hamburger-line {
  display: block;
  width: 25px;
  height: 2px;
  background-color: #000;
  transition: 0.3s;
}

.menu-text {
  font-size: 0.6rem;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Verberg menu standaard op mobiel */
.menu-container {
  display: none;
  width: 100%;
}

/* Toon menu als checkbox is aangevinkt */
.menu-toggle:checked ~ .menu-container {
  display: block;
}

/* Stijl van de mobiele menu-items */
.menu-container ul {
  list-style: none;
  padding: 20px 0;
  margin: 0;
  border-top: 1px solid #eee;
}

.menu-container li a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: #000;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Desktop Layout (1440px) --- */
@media screen and (min-width: 1440px) {
  /* Verberg de hamburger */
  .hamburger-label {
    display: none;
  }

  /* Toon het menu altijd */
  .menu-container {
    display: block !important;
    border-top: 1px solid #000; /* Strakke lijn over de breedte */
    margin-top: 20px;
  }

  .menu-container ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 15px 0;
  }

  .menu-container li a {
    padding: 5px 0;
    font-size: 0.85rem;
  }
}
.hamburger-label {
  display: flex !important; /* Dwing zichtbaarheid op mobiel af */
  cursor: pointer;
  z-index: 100;
}

.hamburger-line {
  display: block !important;
  width: 30px !important;
  height: 3px !important;
  background-color: #000000 !important; /* Zorg dat dit zwart is */
  margin-bottom: 4px;
}
/* FORCEER ZICHTBAARHEID OP MOBIEL */
@media screen and (max-width: 1439px) {
  .hamburger-label {
    display: flex !important; /* Dwing het label om te verschijnen */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 20px;
    z-index: 1000;
    position: relative;
    align-items: center;
  }

  .hamburger-line {
    display: block !important;
    width: 30px !important;
    height: 3px !important;
    background-color: #000000 !important; /* Moet zwart zijn op witte achtergrond */
  }

  .menu-text {
    display: block !important;
    color: #000 !important;
    font-size: 10px;
    font-weight: bold;
  }

  /* Zorg dat de menu-inhoud echt verborgen is tot de klik */
  .menu-container {
    display: none;
  }
}
/* --- Zorg dat de Hamburger zichtbaar wordt op mobiel --- */
.hamburger-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  cursor: pointer;
  padding: 20px;
  background-color: #f9f9f9; /* Lichtgrijze achtergrond om de plek te zien */
  border: 1px solid #ddd;
  margin-top: 10px;
}

.hamburger-line {
  display: block !important;
  width: 30px !important;
  height: 3px !important;
  background-color: #000000 !important; /* Dwing zwart af */
  margin: 2px 0 !important;
}

.menu-text {
  display: block !important;
  color: #000000 !important;
  font-size: 12px !important;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

/* Verberg het menu totdat er geklikt wordt */
.menu-container {
  display: none;
}

.menu-toggle:checked ~ .menu-container {
  display: block !important;
}
/* --- Basis Navigatie Container --- */
.main-navigation {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Dit zet de hamburger én het uitgeklapte menu in het midden */
  text-align: center;
}

/* --- De Hamburger Knop --- */
.hamburger-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px 0;
}

/* --- De Menu Container (Verstoppen en tonen) --- */
.menu-container {
  display: none; /* Standaard onzichtbaar */
  width: 100%;
}

/* De klik-actie: als checkbox aan is, toon de container */
#menu-toggle:checked ~ .menu-container {
  display: block !important;
}

/* --- De Drupal Lijst centreren --- */
/* Drupal genereert een <ul class="menu">. Deze moeten we centreren. */
.menu-container ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* Zet de links exact onder de hamburger */
}

.menu-container ul li {
  width: 100%;
  border-bottom: 1px solid #f2f2f2; /* Subtiele scheiding */
}

.menu-container ul li a {
  display: block;
  padding: 15px 0;
  color: #000;
  text-decoration: none;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Desktop: Hamburger weg, Menu naast elkaar --- */
@media screen and (min-width: 1440px) {
  .hamburger-label {
    display: none !important;
  }
  
  .menu-container {
    display: block !important;
    border-top: 1px solid #000;
    margin-top: 10px;
  }
  
  .menu-container ul {
    flex-direction: row; /* Naast elkaar op desktop */
    justify-content: center;
    gap: 40px;
  }
  
  .menu-container ul li {
    width: auto;
    border-bottom: none;
  }
}
/* --- Logo herstellen en centreren --- */
.site-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Drupal zet het logo vaak in een <a> of <div>, dit dwingt het naar het midden */
.site-branding a, 
.site-branding div {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.site-branding img {
  max-width: 250px; /* Pas aan naar de gewenste grootte */
  height: auto;
  display: inline-block;
}

/* --- De Hamburger Klik-Logica --- */
.menu-toggle {
  display: none !important; /* Verberg de checkbox zelf */
}

/* Als de checkbox aan staat, MOET de menu-container verschijnen */
#menu-toggle:checked ~ .menu-container {
  display: block !important;
}

/* --- Alles centreren voor Mobiel --- */
.header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-navigation {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-container {
  display: none; /* Standaard uit */
  width: 100%;
}

/* Drupal menu lijst (ul) centreren */
.menu-container ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center; /* Dwingt links naar het midden */
}

.menu-container ul li {
  width: 100%;
  text-align: center;
}

.menu-container ul li a {
  display: block;
  padding: 15px 0;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  border-bottom: 1px solid #f0f0f0;
}
/* --- Volledige Header Centrering --- */
.header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* --- Stijlvolle Hamburger (Juridisch Magazine) --- */
.hamburger-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px 0;
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
}

.hamburger-line {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #000; /* Strak zwart */
  margin: 3px 0;
}

.menu-text {
  font-family: "Georgia", serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
  color: #000;
}

/* --- DE FIX: Menu uit de linkerhoek halen --- */
.menu-container {
  display: none; /* Verberg menu standaard */
  width: 100%;
}

/* De klik-functie */
#menu-toggle:checked ~ .menu-container {
  display: block !important;
}

/* Dwing de Drupal UL naar het midden */
.menu-container ul {
  list-style: none;
  padding: 0 !important; /* VERWIJDERT DE DRUPAL LINKS-PADDING */
  margin: 0 !important;  /* VERWIJDERT DE DRUPAL MARGIN */
  display: flex;
  flex-direction: column;
  align-items: center;    /* ZET DE LINKS IN HET MIDDEN */
  width: 100%;
}

.menu-container li {
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}

.menu-container li a {
  display: block;
  padding: 18px 0;
  color: #000;
  text-decoration: none;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* --- Desktop: Hamburger weg, Menu horizontaal (1440px) --- */
@media screen and (min-width: 1440px) {
  .hamburger-label {
    display: none !important;
  }
  .menu-container {
    display: block !important;
    border-top: 1px solid #000;
    margin-top: 20px;
  }
  .menu-container ul {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }
  .menu-container li {
    width: auto;
    border: none;
  }
}
/* --- Alles in de header centreren --- */
.header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* --- De Hamburger Styling --- */
.hamburger-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  border: 1px solid #000; /* Strakke omlijning voor juridische look */
  width: 100px;
  margin: 10px auto !important;
}

.hamburger-line {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #000;
  margin: 3px 0;
}

.menu-text {
  font-family: "Georgia", serif;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 5px;
}

/* --- DE BELANGRIJKSTE FIX: Het menu centreren --- */
.menu-container {
  display: none; /* Verberg menu standaard */
  width: 100%;
}

/* Toon menu bij klik op checkbox */
#menu-toggle:checked ~ .menu-container {
  display: block !important;
}

/* Dwing de Drupal 'UL' lijst naar het midden */
.menu-container ul {
  list-style: none !important;
  padding: 0 !important;      /* VERWIJDERT DE DRUPAL LINKS-MARGE */
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* DIT ZET DE LINKS IN HET MIDDEN */
}

.menu-container ul li {
  width: 100%;
  margin: 0;
  padding: 0;
}

.menu-container ul li a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  font-family: "Georgia", serif;
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
  font-size: 0.85rem;
}
/* --- 1. Header & Branding --- */
.header-stack {
  display: flex;
  flex-direction: column;
  align-items: center; /* Alles op de centrale as */
  width: 100%;
}

.site-branding {
  margin-bottom: 10px;
}

/* --- 2. De Hamburger (Stijlvol & Gecentreerd) --- */
.hamburger-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border: 1px solid #000; /* Strakke omlijning */
  width: 100px;
  margin: 0 auto !important; /* Forceer in het midden */
}

.hamburger-line {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #000;
  margin: 3px 0;
}

.menu-text {
  font-family: "Georgia", serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* --- 3. DE FIX: Het menu in het midden krijgen --- */
.menu-container {
  display: none; /* Standaard verborgen */
  width: 100%;
}

/* Tonen bij klik */
#menu-toggle:checked ~ .menu-container {
  display: block !important;
}

/* Dwing de Drupal lijst naar het midden */
.menu-container ul {
  list-style: none !important;
  padding: 0 !important;      /* DIT IS DE BELANGRIJKSTE REGEL: weg met de linker padding */
  margin: 20px 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Dwingt de links naar het midden */
  width: 100% !important;
}

.menu-container ul li {
  width: 100%;
  text-align: center !important;
}

.menu-container ul li a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid #f2f2f2;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  font-size: 0.85rem;
}
/* --- 1. De Schakelaar --- */
.nav-trigger { display: none; }

.nav-content {
  display: none; /* Verberg het menu standaard */
  width: 100%;
}

/* De 'Magie': Checkbox checkt sibling div */
.nav-trigger:checked ~ .nav-content {
  display: block !important;
}

/* --- 2. De Hamburger Styling (Gecentreerd) --- */
.nav-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  margin: 0 auto;
}

.nav-label .bar {
  width: 28px;
  height: 2px;
  background: #000;
  margin: 3px 0;
}

.nav-label .label-text {
  font-family: "Georgia", serif;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- 3. DE FINALE CENTRERING FIX --- */
.clean-menu-list {
  list-style: none !important;
  padding: 0 !important; /* Doodt de 40px padding van Drupal */
  margin: 20px 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Dwingt alles naar het midden */
}

.clean-menu-item {
  width: 100%;
  text-align: center;
}

.clean-menu-link {
  display: block;
  padding: 15px 0;
  text-decoration: none;
  color: #000;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  border-bottom: 1px solid #f2f2f2;
}
/* Verberg het menu standaard op mobiel */
.nav-content {
  display: none !important; 
  width: 100%;
  transition: all 0.3s ease;
}

/* Toon het menu pas als de checkbox is aangevinkt */
.nav-trigger:checked ~ .nav-content {
  display: block !important;
}

/* Styling voor de hamburger knop zelf */
.nav-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 20px;
  margin: 0 auto;
}

/* Zorg dat de links nu ONDER de hamburger verschijnen en niet erboven */
.hamburger-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* De volgorde forceren: knop boven, content eronder */
.nav-label { order: 1; }
.nav-content { order: 2; }
/* --- 1. Logo & Branding Herstel --- */
.site-branding {
  display: block !important;
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
}

/* Drupal wikkelt het logo vaak in een link of div, we dwingen de img te tonen */
.site-branding img,
.site-header img {
  display: inline-block !important;
  max-width: 250px !important; /* Pas aan naar je logo-formaat */
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- 2. Hamburger Functionaliteit --- */
.nav-content {
  display: none !important; /* Menu is standaard potdicht */
  width: 100%;
}

/* De 'Magic Click': Alleen als de checkbox aanstaat, toon content */
#nav-trigger:checked ~ .nav-content {
  display: block !important;
}

/* --- 3. Layout & Centrering --- */
.header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hamburger-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.nav-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #000; /* Strakke omlijning */
  margin-bottom: 10px;
}

.nav-label .bar {
  width: 25px;
  height: 2px;
  background: #000;
  margin: 3px 0;
}

/* --- 4. Menu-items Centreren (Clean-menu-list) --- */
.nav-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.nav-content li {
  width: 100%;
  border-bottom: 1px solid #eee;
}

.nav-content li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #000;
  font-family: "Georgia", serif;
  text-transform: uppercase;
}
/* --- Alles in het midden houden --- */
.header-stack, .hamburger-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* --- De 'Verdwijntruc' --- */
.nav-content {
  display: none !important; /* Verberg het menu standaard */
  width: 100%;
  order: 2; /* Dwingt de links om ONDER de knop te verschijnen */
}

/* De 'Verschijntruc': als de checkbox 'checked' is, toon de nav-content */
#nav-trigger:checked ~ .nav-content {
  display: block !important;
}

/* --- De Hamburger Knop Styling --- */
.nav-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc; /* Het vierkante kader uit je screenshot */
  width: 80px;
  order: 1; /* Dwingt de knop om BOVEN de links te staan */
  margin: 10px 0;
}

.nav-label .bar {
  width: 25px;
  height: 2px;
  background: #000;
  margin: 3px 0;
}

/* --- De Links in het midden (Clean-menu-list) --- */
.nav-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.nav-content li {
  width: 100%;
  border-bottom: 1px solid #eee;
}

.nav-content li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #000;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  text-align: center;
}
/* --- Alles Resetten naar het Midden --- */
.header-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* --- De Hamburger Knop --- */
.nav-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  border: 1px solid #000;
  width: 100px;
  margin: 10px auto !important;
  order: 1; /* Knop staat altijd boven het menu */
}

/* --- De Menu Content --- */
.nav-content {
  display: none !important; /* Stand-aard dicht */
  width: 100%;
  order: 2; /* Menu verschijnt altijd ONDER de knop */
}

/* De enige manier waarop het menu open gaat: */
#nav-trigger:checked ~ .nav-content {
  display: block !important;
}

/* --- De Links uit de linkerhoek trekken --- */
.clean-menu-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
}

.clean-menu-link {
  display: block !important;
  padding: 15px 0;
  font-family: "Georgia", serif;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  width: 100%;
}
/* --- Alles centreren --- */
.header-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* --- De Hamburger-Klik Logica --- */
.nav-content {
  display: none !important; /* Menu potdicht */
  width: 100%;
}

/* De 'Magic': Zoek de nav-content direct na de checkbox */
#nav-trigger:checked ~ .nav-content {
  display: block !important;
}

/* --- Styling van de Knop --- */
.nav-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  border: 1px solid #000;
  width: 80px;
  margin: 10px auto !important;
}

/* --- DE BELANGRIJKSTE FIX VOOR DE LINKS --- */
/* We pakken de UL die we in menu--main.html.twig hebben gemaakt */
.clean-menu-list {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.clean-menu-item {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #f2f2f2;
}

.clean-menu-link {
  display: block !important;
  padding: 15px 0 !important;
  font-family: "Georgia", serif;
  text-transform: uppercase;
}
/* Alles in het midden */
.header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Verberg het menu standaard */
.nav-content {
  display: none !important;
}

/* Toon het menu als JS de class 'open' toevoegt */
.nav-content.open {
  display: block !important;
  width: 100%;
}

/* De knop styling */
.nav-label {
  background: none;
  border: 1px solid #000;
  cursor: pointer;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-label .bar {
  width: 25px;
  height: 2px;
  background: #000;
  margin: 3px 0;
}

/* De links centreren */
.nav-content ul {
  list-style: none;
  padding: 0 !important;
  margin: 20px 0;
  text-align: center;
}
/* --- De Wrapper die alles bij elkaar houdt --- */
.mobile-navigation-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* --- De Hamburger Knop --- */
.hamburger-menu-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border: 1px solid #000;
  width: 90px;
  margin: 10px auto;
}

.hamburger-menu-btn .line {
  width: 25px;
  height: 2px;
  background: #000;
  margin: 3px 0;
}

/* --- De Content: Verbergen en Tonen --- */
.nav-expandable-content {
  display: none !important;
  width: 100%;
}

/* DE KLIK: Alleen als de toggler 'checked' is, toon de content die direct daarna komt */
.nav-toggler:checked ~ .nav-expandable-content {
  display: block !important;
}

/* --- DE BELANGRIJKSTE FIX: De Drupal Lijst --- */
/* Drupal genereert altijd een <ul> binnen de regio. We dwingen deze naar het midden. */
.nav-expandable-content ul {
  list-style: none !important;
  padding: 0 !important; /* Doodt de 40px inspringing van Drupal */
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Alles op de centrale as */
}

.nav-expandable-content li {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #f2f2f2;
}

.nav-expandable-content li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #000;
  font-family: "Georgia", serif;
  text-transform: uppercase;
}
/* --- Desktop Instellingen --- */
@media screen and (min-width: 1024px) {
  
  /* 1. Verberg de Hamburger en de checkbox volledig */
  .nav-toggler, 
  .hamburger-menu-btn {
    display: none !important;
  }

  /* 2. Dwing het menu om ALTIJD zichtbaar te zijn op desktop */
  .nav-expandable-content {
    display: block !important;
    width: auto;
  }

  /* 3. Zet de links naast elkaar (Horizontaal) */
  .nav-expandable-content ul {
    flex-direction: row !important; /* Naast elkaar ipv onder elkaar */
    justify-content: center;
    gap: 30px; /* Ruimte tussen de knoppen */
    border-top: 1px solid #000; /* Stijlvolle lijn over de hele breedte */
    border-bottom: 1px solid #000;
    padding: 15px 0 !important;
    margin-top: 20px !important;
  }

  /* 4. Maak de links 'stijlvolle knoppen' */
  .nav-expandable-content li {
    width: auto !important;
    border: none !important;
  }

  .nav-expandable-content li a {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }

  /* Hover effect voor die professionele touch */
  .nav-expandable-content li a:hover {
    background-color: #000;
    color: #fff !important;
  }
}
@media screen and (min-width: 1024px) {

  /* 1. De Header Container: Logo links, Menu rechts */
  .header-stack {
    flex-direction: row !important; /* Zet ze naast elkaar */
    justify-content: space-between; /* Duwt ze naar de uiterste hoeken */
    align-items: center !important; /* Houdt ze verticaal uitgelijnd */
    max-width: 1200px; /* Of de breedte van je container */
    margin: 0 auto;
    padding: 20px 0;
  }

  /* 2. Zorg dat de branding (logo) niet meer centreert */
  .site-branding {
    text-align: left !important;
    margin-bottom: 0 !important;
    width: auto !important;
  }

  .site-branding img {
    margin: 0 !important; /* Logo strak links */
  }

  /* 3. Het Menu aan de rechterkant */
  .nav-expandable-content {
    display: block !important;
    width: auto !important;
  }

  .nav-expandable-content ul {
    flex-direction: row !important;
    gap: 25px; /* Ruimte tussen de menu-items */
    border: none !important; /* Verwijder de lijnen van de mobiele versie */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. Professionele styling voor de links */
  .clean-menu-link {
    border-bottom: none !important; /* Geen lijntjes onder de tekst op desktop */
    font-size: 0.95rem !important;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 15px !important;
    transition: color 0.3s ease;
  }

  .clean-menu-link:hover {
    color: #555 !important; /* Subtiele verandering bij hover */
  }
}
@media screen and (min-width: 1024px) {

  /* 1. De Hoofdcontainer: Logo/Slogan groep links, Menu rechts */
  .header-stack {
    display: flex !important;
    flex-direction: row !important; /* Naast elkaar */
    justify-content: space-between !important; /* Maximale ruimte ertussen */
    align-items: center !important; /* Verticaal in evenwicht */
    max-width: 100% !important; 
    padding: 20px 40px !important; /* De gewenste kleine marge aan de zijkanten */
    box-sizing: border-box;
  }

  /* 2. Branding Groep: Logo en Slogan samen links */
  .site-branding {
    display: flex !important;
    flex-direction: column !important; /* Slogan onder logo */
    align-items: center !important; /* Slogan gecentreerd onder het logo */
    text-align: center !important;
    margin: 0 !important; /* Geen auto-margins die het naar het midden duwen */
    width: auto !important;
  }

  .site-branding img {
    max-width: 280px !important; /* Pas aan naar smaak */
    height: auto;
    margin-bottom: 5px !important;
  }

  /* De Slogan (Beschouwingen...) */
  .site-branding .site-slogan, 
  .site-branding div:last-child {
    font-size: 0.9rem !important;
    margin: 0 !important;
    white-space: nowrap; /* Voorkomt dat de slogan onnodig afbreekt */
  }

  /* 3. Het Menu: Helemaal naar rechts */
  .nav-expandable-content {
    display: block !important;
    margin-left: auto !important; /* Extra duw naar rechts */
  }

  .clean-menu-list {
    flex-direction: row !important;
    gap: 30px !important; /* Ruimte tussen de knoppen */
    border: none !important;
    padding: 0 !important;
  }

  .clean-menu-link {
    font-size: 0.85rem !important;
    letter-spacing: 1.5px;
    border: none !important;
    padding: 5px 10px !important;
    transition: opacity 0.3s;
  }

  .clean-menu-link:hover {
    opacity: 0.6;
    text-decoration: underline;
  }
}
/* 1. Maak de goudgele letters/labels zwart */
.user-login-form label, 
.user-form label,
.user-register-form label,
.user-pass label {
    color: #000000 !important;
    font-weight: bold;
    font-family: "Georgia", serif; /* Passend bij je magazine stijl */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* 2. Maak de blauwe inlogknop zwart */
.user-login-form input[type="submit"],
.user-form input[type="submit"],
#edit-submit {
    background-color: #000000 !important;
    background-image: none !important; /* Verwijdert eventuele Drupal-gradients */
    border: 1px solid #000000 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    font-family: "Georgia", serif;
    padding: 12px 20px !important;
    width: 100%; /* Maakt de knop even breed als de velden */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 3. Hover effect voor de knop (donkergrijs) */
.user-login-form input[type="submit"]:hover,
#edit-submit:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
}

/* 4. Verfijning van de invoervelden */
.user-login-form input[type="text"],
.user-login-form input[type="password"],
.user-form input.form-control {
    border: 1px solid #ccc !important;
    padding: 10px !important;
    border-radius: 0 !important; /* Strakke hoeken voor een professionele look */
}
/* --- Footer Basis --- */
.site-footer {
  background-color: #1a1a1a; /* Donkergrijs/zwart zoals screenshot */
  color: #ffffff;
  padding: 0;
  width: 100%;
}

/* De gele streep bovenaan */
.footer-top-border {
  height: 4px;
  background-color: #fccb05; /* De goudgele kleur van je logo */
  width: 100%;
}

/* De drie kolommen */
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 5%; /* Beperkte hoogte */
  max-width: 100%;
}

.footer-column {
  flex: 1;
}

/* Specifieke kolom uitlijning */
.footer-left { text-align: left; }
.footer-center { text-align: center; }
.footer-right { text-align: right; }

/* Typografie in de footer */
.footer-column h3, .footer-column .block-title {
  color: #fccb05; /* Gele namen */
  font-family: "Georgia", serif;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.footer-column p, .footer-column div {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #cccccc;
}

/* Het SVG Logo in het midden */
.footer-center svg {
  width: 50px;
  height: auto;
  fill: #888888; /* Grijs zoals screenshot */
  margin-top: 10px;
}

/* Bottom bar */
.footer-bottom {
  text-align: center;
  padding: 15px 0;
  border-top: 1px solid #333;
  font-size: 0.75rem;
  color: #666;
}
/* Footer Container */
.site-footer {
  background-color: #1a1a1a;
  color: #ffffff;
  width: 100%;
  font-family: "Georgia", serif;
}

/* De gele streep (kleur van je header logo) */
.footer-top-accent {
  height: 3px;
  background-color: #ffdb58; /* Goudgeel uit je SVG */
  width: 100%;
}

/* Grid instellingen: Standaard gestapeld (Mobiel/iPhone) */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 25px;
  text-align: center;
}

/* Desktop layout (Vanaf 1024px) */
@media screen and (min-width: 1024px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 5%;
    text-align: left;
  }
  
  .footer-block-right {
    text-align: right;
  }
}

/* Tekst styling: Geen witruimte tussen regels */
.footer-block-left div, 
.footer-block-right div {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  font-size: 0.85rem;
}

.f-title, .footer-block-right div:first-child {
  color: #ffdb58; /* Gele namen */
  font-weight: bold;
  margin-bottom: 2px !important;
}

.f-slogan {
  font-style: italic;
  color: #cccccc;
}

/* Copyright Bar */
.footer-copyright {
  border-top: 1px solid #333;
  padding: 15px 0;
  text-align: center;
  font-size: 0.75rem;
  color: #777;
}
/* Dwing de centrale kolom tot een verticale as */
.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centreert alles horizontaal */
    justify-content: flex-end; /* Duwt alles naar de onderkant, net boven de copyright bar */
    flex: 1;
}

.footer-block-center svg {
    display: block;
    margin: 0 auto 15px auto; /* Centreert de SVG en geeft ruimte tot de onderste lijn */
    fill: #888888 !important; /* Forceert de grijze kleur */
}

/* De copyright bar moet direct aansluiten */
.footer-copyright {
    clear: both;
    width: 100%;
    text-align: center;
    border-top: 1px solid #333;
    padding: 15px 0;
    margin-top: 10px;
}
/* --- Algemeen --- */
.site-footer {
  background-color: #1a1a1a;
  color: #ffffff;
  width: 100%;
}

.footer-top-accent {
  height: 3px;
  background-color: #fccb05; /* Gele kleur logo */
  width: 100%;
}

/* --- Desktop Layout --- */
@media screen and (min-width: 1024px) {
  .footer-inner-grid {
    display: flex;
    justify-content: space-between;
    padding: 20px 5% 0 5%;
  }

  .footer-col-left { text-align: left; }
  .footer-col-right { text-align: right; }

  .footer-bottom-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -15px; /* Trekt logo iets omhoog voor compactheid */
  }

  .footer-logo-middle svg {
    fill: #888888 !important; /* Grijs logo */
    width: 45px;
    height: auto;
    margin-bottom: 10px;
  }
}

/* --- iPhone Stapeling (Staand & Liggend) --- */
@media screen and (max-width: 1023px) {
  .footer-inner-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    gap: 15px;
  }
  
  .footer-bottom-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
  }
}

/* Copyright Bar */
.footer-copyright-row {
  border-top: 1px solid #333;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  font-size: 0.75rem;
  color: #666;
}
/* De Websitenaam (Titel) */
.footer-col-left .f-title, 
.footer-left .f-title {
    font-size: 1.6rem !important; /* Maakt de naam aanzienlijk groter */
    font-weight: 800 !important;   /* Extra dik voor autoriteit */
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
    display: block;
    color: #fccb05 !important;    /* De goudgele kleur */
}

/* De Slogan */
.footer-col-left .f-slogan, 
.footer-left .f-slogan {
    font-size: 0.95rem !important; /* Subtiel kleiner dan de naam */
    font-style: italic !important;
    color: #cccccc !important;     /* Lichtgrijs voor minder contrast */
    line-height: 1.3 !important;
    display: block;
}
/* Het linkerblok als een verticale kolom instellen */
.footer-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Dit centreert de slogan onder de naam */
    text-align: center !important;
    flex: 1;
}

/* De Websitenaam (Titel) */
.f-title {
    font-size: 1.8rem !important; /* Iets groter voor betere verhouding */
    font-weight: 800 !important;
    color: #fccb05 !important;
    margin-bottom: 2px !important;
    line-height: 1.1;
    white-space: nowrap; /* Voorkomt dat de naam afbreekt */
}

/* De Slogan */
.f-slogan {
    font-size: 0.9rem !important;
    font-style: italic !important;
    color: #cccccc !important;
    margin-top: 0 !important;
    line-height: 1.2;
    max-width: 300px; /* Zorgt dat een lange slogan netjes breekt indien nodig */
}
/* 1. De linker container: strak in de hoek blijven */
.footer-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Houdt het hele pakketje LINKS */
    flex: 1;
}

/* 2. Het tekstblok: interne centrering */
.footer-block-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centreert slogan t.o.v. de naam */
    text-align: center !important;  /* Zorgt dat tekstregels zelf gecentreerd zijn */
    width: fit-content;             /* Blok is niet breder dan de tekst */
}

/* 3. De Websitenaam (Groot & Dominant) */
.f-title {
    font-size: 2.2rem !important; 
    font-weight: 900 !important;
    color: #fccb05 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    letter-spacing: -0.5px;
}

/* 4. De Slogan (Kleiner & Compact) */
.f-slogan {
    font-size: 0.8rem !important;   /* Kleiner gemaakt voor beter contrast */
    max-width: 220px !important;    /* Beperkt de breedte zodat hij 'onder' de naam past */
    font-style: italic !important;
    color: #cccccc !important;
    line-height: 1.2 !important;
    margin: 0 auto !important;
}

/* Zorg dat het rechterblok (Hans Bügel) strak rechts blijft */
@media screen and (min-width: 1024px) {
    .footer-col-right {
        text-align: right !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }
}
/* Container links in de hoek houden */
.footer-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Interne centrering van het tekstpakketje */
.footer-block-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    text-align: center !important;
    width: fit-content;
}

/* De Naam: Nu geforceerd goudgeel op ELKE pagina */
.f-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #fccb05 !important; /* De goudgele kleur */
    line-height: 1.1;
    margin-bottom: 2px !important;
    display: block !important;
}

/* De Slogan: Klein en bescheiden onder de naam */
.f-slogan {
    font-size: 0.8rem !important;
    max-width: 180px !important;
    color: #cccccc !important;
    font-style: italic;
    line-height: 1.2;
    margin: 4px auto 0 auto !important;
    display: block !important;
}
/* Container links in de hoek houden */
.footer-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Interne centrering van het tekstpakketje */
.footer-block-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    text-align: center !important;
    width: fit-content;
}

/* De Naam: Forceer goudgeel op ELKE pagina/taal */
.f-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #fccb05 !important; /* De goudgele kleur uit je logo */
    line-height: 1.1;
    margin-bottom: 2px !important;
    display: block !important;
}

/* De Slogan: Klein en gecentreerd onder de naam */
.f-slogan {
    font-size: 0.8rem !important; /* Kleiner voor betere hiërarchie */
    max-width: 180px !important;
    color: #cccccc !important;
    font-style: italic;
    line-height: 1.2;
    margin: 4px auto 0 auto !important;
    display: block !important;
}
/* Container links in de hoek houden */
.footer-col-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Interne centrering van het tekstpakketje binnen de kolom */
.footer-block-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    text-align: center !important;
    width: fit-content;
}

/* De Naam: Nu geforceerd goudgeel op ELKE pagina/taal */
.f-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #fccb05 !important; /* Goudgele kleur uit logoVI.txt */
    line-height: 1.1;
    margin-bottom: 2px !important;
    display: block !important;
}

/* De Slogan: Klein en gecentreerd onder de naam */
.f-slogan {
    font-size: 0.8rem !important;
    max-width: 180px !important;
    color: #cccccc !important;
    font-style: italic !important;
    line-height: 1.2 !important;
    margin: 4px auto 0 auto !important;
    display: block !important;
}
/* Dwing de kleur af voor ELKE taal en ELK blok binnen de footer regio */
[class*="footer"] .f-title,
.footer-col-left .f-title,
.footer-block-left .f-title {
    color: #fccb05 !important; /* De goudgele kleur */
    fill: #fccb05 !important;  /* Voor het geval het een SVG is */
    display: block !important;
    -webkit-text-fill-color: #fccb05 !important; /* Forceert kleur in sommige browsers */
}

/* De slogan moet juist grijs blijven voor het contrast */
.f-slogan {
    color: #cccccc !important;
    font-size: 0.8rem !important;
}
/* Zoek de eerste div in het linker footer-blok en maak die ALTIJD geel */
.footer-col-left .footer-block-left div:first-child,
.footer-col-left .f-title {
    color: #ffdb58 !important; /* De goudgele kleur van je logo */
    font-size: 2.2rem !important;
    font-weight: 900 !important;
}