/* ==========================================================================
   1. BACKGROUND & LAYOUT RESET
   ========================================================================== */
/* Maak de balk gegarandeerd wit en haal de blauwe gradient weg */
header.header.container-header, 
.container-header {
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Sloop de CSS grid van Cassiopeia en dwing flexbox af */
.header, 
header.header.full-width {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Dwingt alles op één regel */
    justify-content: space-between !important;
    align-items: center !important;
}

/* Neutraliseer de geneste div-containers */
.header .container-nav, 
.header .grid-child,
.header .navbar-brand {
    display: flex !important;
    align-items: center !important;
    float: none !important;
}

/* ==========================================================================
   2. LOGO TEMMEN (DE KERN VAN HET PROBLEEM)
   ========================================================================== */
/* We pakken ALLE mogelijke selectors aan waar Cassiopeia het logo groot maakt */
.header a.brand-logo,
.header a.navbar-brand,
.header .logo-module {
    width: 140px !important;       /* Pas dit getal aan naar jouw gewenste breedte */
    max-width: 140px !important;   /* Harde blokkade */
    min-width: 140px !important;
    display: inline-block !important;
}

/* Dwing de daadwerkelijke afbeelding (img/svg) in de behuizing */
.header a.brand-logo img,
.header a.navbar-brand img,
.header .logo-module img,
.header svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 55px !important;  /* Houdt het logo verticaal compact */
    display: block !important;
}

/* ==========================================================================
   3. MENU RUIMTE GEVEN EN RECHTS UITLIJNEN
   ========================================================================== */
.header .mod-menu, 
.header .navbar {
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
    flex-grow: 1 !important;      /* Neemt de rest van de balk in beslag */
}

/* Menulinks donkergrijs maken voor leesbaarheid op wit */
.container-header .mod-menu a {
    color: #1a202c !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    white-space: nowrap !important; /* Voorkomt dat tekst afbreekt */
}

.container-header .mod-menu a:hover {
    color: #2563eb !important;
}