/* ==========================================================================
   1. LOGO & HEADER CENTREREN EN TRANSPARANT MAKEN
   ========================================================================== */

/* Maak de complete headercontainer transparant */
.container-header {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Centreer het logoblok */
.container-header .navbar-brand {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-right: 0;
}

/* Zorg dat de logo-afbeelding zelf als gecentreerd element functioneert */
.container-header .navbar-brand img {
    margin: 0 auto;
    display: block;
}

/* Zet logo en menu netjes onder elkaar */
.container-header .site-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* ==========================================================================
   2. TOP-A MENU STYLING (HORIZONTALE KNOPPEN)
   ========================================================================== */

/* Verwijdert de standaard template-rand en achtergrond van de module-container in top-a */
.container-top-a .card, 
.container-top-a .mod-menu {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Zorg dat de menulijst in top-a horizontaal naast elkaar en gecentreerd staat */
.container-top-a .mod-menu,
.container-top-a ul.menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding-left: 0 !important;
    list-style: none !important;
    margin: 15px auto !important;
}

/* Forceer de menu-items om horizontaal te blijven */
.container-top-a .mod-menu li,
.container-top-a ul.menu li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Transformeer de menulinks naar echte knoppen */
.container-top-a .mod-menu a,
.container-top-a ul.menu a,
.container-top-a .mod-menu .nav-link,
.container-top-a ul.menu .nav-link {
    display: block !important;
    padding: 10px 20px !important;
    background-color: #f8f9fa !important; /* Lichtgrijze knopkleur */
    color: #333333 !important; /* Donkere tekst */
    border: 1px solid #cccccc !important; /* Subtiel randje */
    border-radius: 4px !important; /* Licht afgeronde hoeken */
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
}

/* Knop effect bij muis-hover */
.container-top-a .mod-menu a:hover,
.container-top-a ul.menu a:hover {
    background-color: #0d6efd !important; /* Blauw bij hover */
    color: #ffffff !important; /* Witte tekst */
    border-color: #0b5ed7 !important;
}

/* Styling voor de knop van de actieve pagina waar de bezoeker nu is */
.container-top-a .mod-menu .active > a,
.container-top-a ul.menu .active > a,
.container-top-a .mod-menu .current > a,
.container-top-a ul.menu .current > a {
    background-color: #212529 !important; /* Donkergrijze actieve knop */
    color: #ffffff !important;
    border-color: #212529 !important;
}


/* ==========================================================================
   3. WEBSITE SITE BACKGROUND
   ========================================================================== */

/* Achtergrondafbeelding die meeschaalt met het scherm */
body.site {
    background-image: url('/images/member_control/page.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
}


/* ==========================================================================
   4. STRUCTUUR, BREEDTE (+20%) EN VERWIJDEREN WITTE BALKEN
   ========================================================================== */

/* Maak de buitenste wrappers volledig transparant zodat de witte zijbalken verdwijnen */
.wrapper-static, 
.body-innerwrapper,
.site-container,
.header {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
}

/* Dwing het interne Joomla-raster (CSS Grid) om 20% breder uit te rekken */
.site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 26rem)) [main-end] minmax(0, 1fr) [full-end] !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Zorg dat de elementen binnen het raster netjes centraal uitlijnen */
.grid-child, 
main#content {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Geef de hoofdinhoud (teksten/artikelen) de juiste kolombreedte en een wit vlak */
.site-grid > main {
    grid-column: main-start / main-end !important;
    width: 100% !important;
    background-color: #ffffff !important; /* De witte kaart waar je tekst op staat */
    padding: 35px !important;  /* Royale ademruimte binnen het bredere vlak */
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}