/*

- Custom CSS voor Joomla 6 KUKU CASA Cassiopeia
- Optimalisatie voor Bootstrap 5  
 */

:root {
    --kc-primary: #D21734; 
    --kc-primary-rgb: rgba(210, 23, 52, 0);
    --kc-secondary: #D22A23; 
    --kc-dark: #000; 
    --kc-light: #fff; 
    --kc-buttons: #D22A23; 
    --kc-links: #ff5733; 
    --kc-links-hover: #FD9871;
    --bs-menu-links: #fff; 
    --bs-border-radius: 0.5rem;
    --kc-header-bg: #000;
    --kc-header-bg-hover: #000;
}

body{
background-color: color-mix(in srgb, var(--kc-primary) 10%, transparent);
}

a{
color: var(--kc-secondary);
}

a:hover{
color: var(--kc-links-hover);
}

/* Stap 1: Haal de 'grid/flex' dwang van de leading container af */
.items-leading {
    display: block !important;
}

/* Stap 2: Target het individuele artikel binnen de leading set */
.items-leading article, 
.items-leading .com-content-category-blog__item {
    display: block !important;
    clear: both; /* Zorgt dat artikelen niet naast elkaar gaan zweven */
    margin-bottom: 3rem; /* Ruimte tussen de grote artikelen */
    overflow: hidden; /* Zorgt dat de container de gefloate afbeelding 'omarmt' */
}

/* Stap 3: Forceer de afbeelding binnen de leading artikelen naar links */
.items-leading .item-image {
    float: left !important;
    max-width: 35% !important; /* Pas dit percentage aan voor de gewenste grootte */
    margin-right: 2rem !important;
    margin-bottom: 1rem !important;
}

/* Stap 4: Zorg dat de tekst (intro) er direct naast aansluit */
.items-leading .item-content {
    display: inline; /* Voorkom dat de tekst als een nieuw blok eronder begint */
}



/* Intro afbeelding (Blog overzicht) */
/* Zorg dat de container van de afbeelding meewerkt met de float */
.item-image, .items-leading .item-image {
    display: block;
    float: left; /* Dit dwingt de container naar links */
    width: auto; /* Voorkom dat de container 100% breedte pakt */
    max-width: 40%; /* Pas dit percentage aan naar wens voor de grootte */
    margin-right: 1.5rem; /* Ruimte tussen afbeelding en tekst */
    margin-bottom: 1rem;
}

/* Fix voor tekstomloop in Joomla 6 */
.com-content-article, .com-content-category-blog__item {
    display: block; 
}

/* Verberg de artikel-info alleen in het blogoverzicht */
.com-content-category-blog .article-info {
    display: none !important;
}

/* Behoud de info in het volledige artikel */
.com-content-article .article-info {
    display: flex; /* Jouw eerdere styling blijft hier actief */
}


/* Forceer de lijst horizontaal en negeer de float van de afbeelding */
dl.article-info.text-muted {
    display: flex;       /* Bootstrap flex: zet items naast elkaar */
    flex-wrap: wrap;     /* Zorg dat het op mobiel eventueel wel naar een nieuwe regel mag */
    gap: 1rem;           /* Ruimte tussen de items (datum, auteur, etc.) */
    clear: both;         /* CRUCIAAL: stopt het 'meezwemmen' met de gefloate afbeelding */
    width: 100%;         /* Claim de volledige breedte boven of onder de tekst */
    margin: 0 0 1rem;
    padding: 0;
}

/* Zorg dat de individuele items (onderdeel van de dl) netjes lijnen */
dl.article-info dd, dl.article-info dt {
    margin: 0;
    display: inline-block;
}

/* Optioneel: Verwijder de standaard icons van Cassiopeia als die in de weg zitten */
.article-info dd [class^="icon-"], .article-info dd .fa {
    margin-right: 5px;
}


/* De 'Lees meer' knop in het blogoverzicht */
.btn-secondary {
    --btn-color: var(--kc-light);
    --btn-bg: var(--kc-dark);
    --btn-border-color: var(--gray-400);
    --btn-hover-color: var(--gray-800);
    --btn-hover-bg: var(--kc-secondary);
}

/* Hover effect: Knop komt omhoog */
.readmore .btn:hover {
    @extend .shadow;           /* Dikkere schaduw bij hover */
    transform: translateY(-3px);
    background-color: var(--bs-primary-dark); /* Iets donkerder indien ingesteld */
}



/*modules breedte */

.width-50 {
    max-width: 50%; /* Of een percentage zoals 50% */
    margin: 20px 0;   /* Centreert de module indien nodig */
}

.width-70 {
    max-width: 70%; /* Of een percentage zoals 50% */
    margin: 20px 0;   /* Centreert de module indien nodig */
}


/* ===== Container & Grid ===== */  
.container,  
.container-fluid {  
    --bs-gutter-x: 1.5rem;  
    --bs-gutter-y: 0;  
    width: 100%;  
    padding-right: calc(var(--bs-gutter-x) * 0.5);  
    padding-left: calc(var(--bs-gutter-x) * 0.5);  
    margin-right: auto;  
    margin-left: auto;  
}

.container-header {
    background-color: #000;
    background-image: linear-gradient(135deg, var(--kc-header-bg) 0%, var(--kc-header-bg-hover) 80%);
}

.container-header .navbar-brand img {
  margin-left: 0rem;
  width: 280px;
  padding: 0px 0;
}

.breadcrumbs{
    font-size: 0.8rem;
    color: #fff;
    background-color: #248B3B;
}

.kuku {
    color: #248B3B;
    padding: 20px;
    border: 2px solid #248B3B;
    border-radius: 10px;
}


.footer {
    color: var(--kc-light);
    background-color: var(--kc-primary);
    background-image: linear-gradient(135deg, var(--kc-primary) 0%, var(---kc-primary) 100%);
    margin-top: 1em;
}

/* Responsive containers */  
@media (min-width: 576px) { .container { max-width: 540px; } }  
@media (min-width: 768px) { .container { max-width: 720px; } }  
@media (min-width: 992px) { .container { max-width: 960px; } }  
@media (min-width: 1200px) { .container { max-width: 1140px; } }  
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Grid system (Bootstrap 5) */
.site-grid {
        grid-gap: 1em 1em;

.row {  
    --bs-gutter-x: 1.5rem;  
    --bs-gutter-y: 1em;  
    display: flex;  
    flex-wrap: wrap;  
    margin-top: calc(-1 * var(--bs-gutter-y));  
    margin-right: calc(-0.5 * var(--bs-gutter-x));  
    margin-left: calc(-0.5 * var(--bs-gutter-x));  
}  
.row > * {  
    flex-shrink: 0;  
    width: 100%;  
    max-width: 100%;  
    padding-right: calc(var(--bs-gutter-x) * 0.5);  
    padding-left: calc(var(--bs-gutter-x) * 0.5);  
    margin-top: var(--bs-gutter-y);  
}

/* Kolomklassen (voorbeeld) */  
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,  
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,  
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,  
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,  
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,  
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,  
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,  
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,  
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,  
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,  
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6,  
.col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {  
    position: relative;  
    width: 100%;  
    min-height: 1px;  
    padding-right: calc(var(--bs-gutter-x) * 0.5);  
    padding-left: calc(var(--bs-gutter-x) * 0.5);  
}

/* ===== Typografie ===== */  
h1, h2, h3, h4, h5, h6 {  
    margin-top: 0;  
    margin-bottom: 0.5rem;  
    font-weight: 500;  
    line-height: 1.2;  
}  
h1 { font-size: calc(1.375rem + 1.5vw); }  
h2 { font-size: calc(1.325rem + 0.9vw); }  
h3 { font-size: calc(1.3rem + 0.6vw); }  
h4 { font-size: calc(1.275rem + 0.3vw); }  
h5 { font-size: 1.25rem; }  
h6 { font-size: 1rem; }

.display-1 { font-size: calc(1.625rem + 4.5vw); }  
.display-2 { font-size: calc(1.575rem + 3.9vw); }  
.display-3 { font-size: calc(1.525rem + 3.3vw); }  
.display-4 { font-size: calc(1.475rem + 2.7vw); }  
.display-5 { font-size: calc(1.425rem + 2.1vw); }  
.display-6 { font-size: calc(1.375rem + 1.5vw); }

.lead {  
    font-size: 1.25rem;  
    font-weight: 300;  
}

/* ===== Knoppen ===== */  
.btn {  
    display: inline-block;  
    font-weight: 400;  
    text-align: center;  
    white-space: nowrap;  
    vertical-align: middle;  
    user-select: none;  
    border: 1px solid transparent;  
    padding: 0.375rem 0.75rem;  
    font-size: 1rem;  
    line-height: 1.5;  
    border-radius: 0.25rem;  
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,  
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;  
}  
.btn-primary {  
    color: #fff;  
    background-color: #0d6efd;  
    border-color: #0d6efd;  
}  
.btn-primary:hover {  
    color: #fff;  
    background-color: #0b5ed7;  
    border-color: #0a58ca;  
}

/* ===== Navigatie ===== */  
.navbar {  
    padding: 0.5rem 1rem;  
    background-color: #f8f9fa;  
}  
.navbar-nav {  
    display: flex;  
    flex-direction: column;  
    padding-left: 0;  
    margin-bottom: 0;  
    list-style: none;  
}  
.nav-link {  
    display: block;  
    padding: 0.5rem 1rem;  
    color: #212529;  
    text-decoration: none;  
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,  
                border-color 0.15s ease-in-out;  
}  
.nav-link:hover, .nav-link:focus {  
    color: #0d6efd;  
}

/* ===== Cards ===== */  
.card {  
    position: relative;  
    display: flex;  
    flex-direction: column;  
    min-width: 0;  
    word-wrap: break-word;  
    background-color: #fff;  
    background-clip: border-box;  
    border: 1px solid rgba(0, 0, 0, 0.125);  
    border-radius: 0.25rem;  
}  
.card-body {  
    flex: 1 1 auto;  
    padding: 1.25rem;  
}

/* ===== Formulieren ===== */  
.form-control {  
    display: block;  
    width: 100%;  
    padding: 0.375rem 0.75rem;  
    font-size: 1rem;  
    font-weight: 400;  
    line-height: 1.5;  
    color: #212529;  
    background-color: #fff;  
    background-clip: padding-box;  
    border: 1px solid #ced4da;  
    appearance: none;  
    border-radius: 0.25rem;  
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;  
}  
.form-control:focus {  
    color: #212529;  
    background-color: #fff;  
    border-color: #86b7fe;  
    outline: 0;  
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);  
}

/* ===== Utility klassen ===== */  
.m-0 { margin: 0 !important; }  
.mt-1 { margin-top: 0.25rem !important; }  
.mt-2 { margin-top: 0.5rem !important; }  
.mt-3 { margin-top: 1rem !important; }  
.mt-4 { margin-top: 1.5rem !important; }  
.mt-5 { margin-top: 3rem !important; }

.p-0 { padding: 0 !important; }  
.pt-1 { padding-top: 0.25rem !important; }  
.pt-2 { padding-top: 0.5rem !important; }  
.pt-3 { padding-top: 1rem !important; }  
.pt-4 { padding-top: 1.5rem !important; }  
.pt-5 { padding-top: 3rem !important; }

.text-start { text-align: left !important; }  
.text-end { text-align: right !important; }  
.text-center { text-align: center !important; }

/* ===== Joomla-specifieke aanpassingen ===== */*  
*/* Module chrome (module-stijlen) */  
.module {  
    margin-bottom: 1.5rem;  
}  
.module-title {  
    margin-bottom: 0.5rem;  
    font-size: 1.25rem;  
}

/* Artikelstijl */  
.article-header {  
    margin-bottom: 1rem;  
}  
.article-content img {  
    max-width: 100%;  
    height: auto;  
}

/* Paginanavigatie */  
.pagination {  
    display: flex;  
    padding-left: 0;  
    list-style: none;  
}  
.page-item.active .page-link {  
    z-index: 1;  
    color: #fff;  
    background-color: #0d6efd;  
    border-color: #0d6efd;  
}

/* Responsive tabel */  
.table-responsive {  
    overflow-x: auto;  
    -webkit-overflow-scrolling: touch;  
}