/* ==========================================================================
   1. BASIS & LAYOUT (BODY, CONTAINERS, GRID)
   ========================================================================== */
body {
    background-image: url('../images/jouw-kunst-achtergrond.jpg');
    background-color: #cccccc;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}      

.container-fluid.p-0 {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 10px solid #ff0033;
    box-shadow: 0 0 40px rgba(0,0,0,0.2); 
    min-height: 100vh;

}
.container-fluid.p-0
main {
    min-height: 0 !important;

}
div.joomla-component{
    border-bottom: 30px solid #8497a5;
    border-radius: 4px;
}

.joomla-component, 
.item-page {
    width: 100%;
    margin-bottom: 20px;
    background-color: #ffffff !important; /* Forceert wit voor tekstpagina's */
    padding: 20px;
    border-radius: 4px;
}



 

/* ==========================================================================
   2. TOPBAR (Blauwe balk: Inloggen, Uitloggen en Nieuw Artikel)
   ========================================================================== */
.top-bar-row {
    background-color: #8497a5;
    padding: 10px 0;           
    border-bottom: 8px solid #ff0033;
    height: auto;
}

.topbar {
    display: flex !important;
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px;
    min-height: 40px;
}

/* Gegroepeerde tekststyling voor Login & Nieuw Artikel */
.topbar-login, 
.mod-login, 
.topbar-social__link--login {
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.topbar-login a {
    color: #ffffff;
    text-decoration: none;
}

.topbar-login a:hover {
    text-decoration: underline;
}
/* Styling voor de uitlogknop/link */
.logout-button, 
.mod-login__logout-query button {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    cursor: pointer;
}

.logout-button:hover {
    text-decoration: underline !important;
}
.topbar-left {
display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important; /* Ruimte tussen LOG-UIT en Nieuw artikel vergroot */
}

.topbar-left > div {
    margin-right: 20px;
}
/* ==========================================================================
   2A. SOCIAL MEDIA (Icoontjes rechtsboven: FB & WhatsApp)
   ========================================================================== */

/* 1. Formaat & Kleur van de Icoontjes (Gecombineerde zware selector) */
html body .topbar-social-wrapper .topbar-social__link svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important; /* Gelijk getrokken met width */
    min-height: 32px !important;
    fill: currentColor !important;
    display: inline-block !important;
    transition: transform 0.2s ease-in-out;
}

/* 2. De Link-container (Zorgt voor klikruimte rondom het icoon) */
.topbar-social__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px; /* Iets groter dan het icoon voor een mooie marge */
    height: 48px;
    text-decoration: none;
}

/* 3. Kleuren per Icoon */
.topbar-social__link--facebook  { color: #1877f2 !important; }
.topbar-social__link--email     { color: #00BB00 !important; } /* Ook voor WhatsApp */

/* 4. Interactie (Hover effect) */
.topbar-social__link:hover svg {
    transform: scale(1.1);
}
/* ==========================================================================
   3. NAVIGATIE & MENU (ALGEMEEN)
   ========================================================================== */
.navbar-brand img { 
    height: auto;
    display: block; 
}

.mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod-menu a {
    color: #000000 !important;
    text-decoration: none !important;
    display: block;
}

/* ==========================================================================
   4. CONTENT BLOKKEN (De 6 witte vakken op de voorpagina)
   ========================================================================== */

/* 1. De Grid (De rode tussenruimtes) */
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #ff0033 !important;      /* De kleur tussen de blokken */

    padding: 0 40px 25px 40px !important;             /* Ruimte rondom de blokken */
    gap: 25px !important;                      /* De dikte van de gekleurde lijnen */
}

/* 2. De Kolom-structuur  */
.content-column {
    display: flex;
    flex-direction: column;
}

/* 3. De Witte Blokken (Alle styling op één plek) */
.content-box {
    background-color: #ffffff !important; /* Altijd wit */
    border: 4px solid #ff0033; 
    border-radius: 8px;
    padding: 15px; /* De ideale ruimte tussen tekst en de rode rand */
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05); /* De schaduw behouden voor diepte */
}




/* Styling voor de links in de 6 tekstblokken */
.content-box ul li a {
    color: #000000 !important;    /* Verandert de blauwe kleur naar zwart (of jouw voorkeur) */
    text-decoration: none !important; /* Verwijdert de standaard onderstreping */
    font-weight: normal;
    display: inline-block;
}

.content-box ul li a:hover {
    text-decoration: underline !important; /* Toont onderstreping alleen bij aanwijzen */
    color: #ff0033 !important;             /* Optioneel: link wordt rood bij hover */
}

/* De witruimte tussen de items verkleinen. Tekst en links in de blokken (compact) */ 
.content-box ul {
    margin: 0 !important;
    padding-left: 20px !important; 
}

.content-box li {
    margin-bottom: 2px !important; /* Minimale ruimte tussen de regels */
    line-height: 1.2 !important;
}

.content-box iframe {
    border: none !important;
    outline: none !important;
    margin: 0;
    display: block;
}
/* DE AFBEELDINGEN BINNEN DIE BLOKKEN */

/*1. De Container (Zorgt voor gecentreerde afbeeldingen die even breed zijn als de tekst */
.column-image {
    display: flex;
    justify-content: center; /* Centreert de afbeelding horizontaal */
    margin-bottom: 15px;
    width: 100%;
}

/* 2. De Afbeelding zelf (Eén duidelijke set regels) */
.column-image img {
    width: 100% !important;  /* Zorgt dat de foto de tekstbreedte volgt */
    max-width: 100%;         /* Voorkomt dat de foto buiten het witte vlak komt */
    height: 180px; 
    object-fit: cover; 
    border: 4px solid #ff0033; /* De rode rand blijft behouden */
    border-radius: 8px;
    display: block;
}
/* Afbeeldingen in content boxen */
.column-image img, 
.content-box img {
    max-width: 100%;

}
.section-title {
    font-size: 1.3rem;
    color: #ffffff;
    margin: 15px 0 10px 0;
    font-weight: bold;
    text-transform: uppercase;
    border-left: 5px solid #ffffff; 
    padding-left: 15px;
    display: block;
}


/* 1. Verwijder de ruimte onder de header afbeelding */eader-full-width, 
.header-full-width img {
    width: 100%;
    margin-bottom: 0 !important;
    display: block; /* Essentieel: haalt de 'onzichtbare' witruimte onder een foto weg */
}

/* 2. Zorg dat het grid strak tegen de header aan komt */
div.content-grid.mt-4 {
    margin-top: 0 !important;
    padding-top: 0 !important; /* Verwijdert interne witruimte aan de bovenkant */
}



/* ==========================================================================
   5. ARTIKELEN & FOTO'S (KRANTEN)
   ========================================================================== */
.kranten-foto {
    float: left;
    width: 40%;
    margin: 0 20px 10px 0;
    border: 1px solid #ccc;
    padding: 5px;
    background: #fff;
}

.content-box .kranten-foto {
    float: none;
    width: 100%;
    margin: 0 0 15px 0;
}
/*========================================*/

/* 1. Verwijder margin van paragrafen in de header en direct boven het grid */
.header-full-width p, 
.joomla-component p:first-child {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0; /* Voorkomt witruimte door de regelhoogte bij afbeeldingen */
}

/* 2. Zorg dat de afbeelding in de paragraaf de hele ruimte vult */
.header-full-width p img {
    display: block;
    margin: 0;
}

/*======================================*/
/* ==========================================================================
   6. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

/* Desktop styling */
@media (min-width: 992px) {
    .content-grid, .grid-row-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
    }

    .joomla-component, .grid-row-3 {
        grid-column: 1 / span 3;
    }

    .navbar {
        padding: 0 !important;
        height: 100px;
        display: flex;
        align-items: center;
    }

    .navbar-brand img {
        max-height: 100px;
        max-width: 150px;
    }

    .menu-desktop .mod-menu {
        display: flex !important;
        height: 100%;
        align-items: stretch;
    }

    .menu-desktop .mod-menu > li {
        position: relative;
        display: flex;
        align-items: center;
    }

    .menu-desktop .mod-menu > li > a {
        padding: 0 25px !important;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 1.2rem;
    }

    .menu-desktop .mod-menu li ul {
        display: none !important;
        position: absolute;
        top: 100%; 
        left: 0;
        min-width: 260px;
        background: #ffffff;
        border: 1px solid #cccccc;
        z-index: 9999;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .menu-desktop .mod-menu li:hover > ul {
        display: block !important;
    }
}

/* Mobiel styling */
@media (max-width: 991px) {
    .navbar-brand img {
        width: 80px !important;
        max-width: 80px !important;
    }

    .menu-mobiel.collapse { 
        display: none !important; 
    }

    .menu-mobiel.collapse.show {
        display: block !important;
        position: absolute !important;   
        top: 100% !important;               
        right: 5% !important;             
        width: 270px !important; 
        max-width: 320px;            
        background-color: #dce8ea !important;
        border: 4px solid #ff0033 !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        z-index: 10000 !important;
        padding: 10px;
    }

    .menu-mobiel .mod-menu {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Submenu styling (Rode lijn) */
    .menu-mobiel .mod-menu li ul {
        display: block !important;
        position: static !important;
        margin-top: 0 !important; 
        margin-left: 35px !important;
        border-left: 3px solid #ff0033 !important;
        padding-left: 15px !important; 
        padding-top: 0 !important;
    }

    .menu-mobiel .mod-menu li ul li a {
        padding: 2px 0 5px 0 !important;
        font-size: 0.95rem !important;
        color: #333 !important;
        margin-bottom: 0 !important;
    }
}

/* Tablet/Mobiel Krantenfoto's */
@media (max-width: 768px) {
    .kranten-foto {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }
}

/* ==========================================================================
   7. FOOTER & OVERIG
   ========================================================================== */
footer {
    padding: 20px;
    background: #212529; 
    color: white;
    text-align: center;
    width: 100%;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

/* ==========================================================================
   NIET NODIG (CODE OM LATER TE CONTROLEREN OF VERWIJDEREN)
   ========================================================================== */