/* ==========================================
   1. ALGEMENE EN GLOBALE STYLING
   ========================================== */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Harde stop voor horizontale scroll */
}

body {
    background-color: #f8f9fa; /* Lichte kleur voor de rest van de pagina */
}

/* ==========================================
   2. TYPOGRAFIE (TITELS & SUBTITELS)
   ========================================== */
.old-english-title {
    /* 1. Zet "Pirata One" vooraan en haal de andere specifieke namen weg om verwarring te voorkomen */
    font-family: "Pirata One", serif;
    
    /* 2. Vloeiende letterschaling: op desktop (maximaal 4.5rem), op mobiel (minimaal 1.4rem) */
    font-size: clamp(1.4rem, 4.5vw, 4.5rem); 
    
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/* Extra veiligheid voor extreem kleine telefoons (kleiner dan 360px breed) */
@media (max-width: 360px) {
    .old-english-title {
        font-size: 2.5rem;
    }
}

.classic-subtitle {
    font-family: serif; 
    font-style: italic;
    opacity: 0.9;
}

/* ==========================================
   3. NAVIGATIEBALK (NAVBAR)
   ========================================== */
.navbar {
    background-color: rgba(0, 0, 0, 0.8); /* Donkere achtergrond op mobiel voor leesbaarheid */
    transition: background-color 0.3s ease;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-link:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

@media (min-width: 992px) {
    .navbar, 
    .navbar-collapse {
        background-color: transparent !important; /* Volledig transparant op desktop */
        padding: 0;
    }
}

/* ==========================================
   4. HERO SECTIE (.bg-container) & FOOTER
   ========================================== */
.bg-container {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/background_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
}

/* Vaste positie onderaan het scherm op desktop */
.address-footer {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 20;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

/* Responsieve aanpassingen voor mobiel/tablet */
@media (max-width: 991px) {
    .bg-container {
        padding-top: 80px; /* Ruimte onder de mobiele navbar */
        align-items: flex-start;
        min-height: 100vh;
        display: block; 
    }
    .bg-container > .row {
        margin: 0;
        width: 100%;
    }
    .address-footer {
        position: relative !important; 
        margin-top: 40px; 
        padding-bottom: 20px;
        bottom: auto;
    }
}

/* ==========================================
   5. MATRIX KAARTEN (BOVENSTE SECTIE)
   ========================================== */
.custom-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: none;
}

.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.custom-card .card-body {
    display: flex;
    flex-direction: column;
    padding: 0.75rem !important; 
}

.card-title {
    font-weight: 700;
    margin-bottom: 0.5rem; 
}

.card-footer-content {
    margin-top: auto; /* Houdt de badge/voetnoot netjes onderaan */
}

/* ==========================================
   6. MENUKAART SECTIE (ONDERSTE SECTIE)
   ========================================== */
.bg-custom-light {
    background-color: #f0f0f0 !important; /* Lichtgrijze achtergrond van de menusectie */
}

/* Container voor de tekstlinks */
.filter-text-group {
    list-style: none;
    padding: 0;
}

/* Standaard status van de tekstknoppen */
.filter-text-group .nav-link {
    background: none !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 500;
    padding: 4px 0 !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    text-shadow: none !important;
    transition: color 0.3s ease;
}

/* Zwart bolletje vóór elke categorie */
.filter-text-group .nav-link::before {
    content: "•";
    color: #000000;
    font-size: 1.2rem;
    margin-right: 8px;
    display: inline-block;
}

/* De onderlijning voorbereiden (onzichtbaar op de achtergrond) */
.filter-text-group .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000000;
    transform: scaleX(0); /* Start op breedte 0 */
    transform-origin: bottom center; /* Groeit vanuit het midden */
    transition: transform 0.3s ease-in-out; /* Dit zorgt voor de vloeiende beweging */
}

/* Wanneer de knop actief is: de onderlijning animeren naar 100% breedte */
.filter-text-group .nav-link.active {
    font-weight: 700;
}

.filter-text-group .nav-link.active::after {
    transform: scaleX(1); /* Wordt volledig zichtbaar */
}

/* Hover-status */
.filter-text-group .nav-link:hover {
    color: #333333 !important;
    text-decoration: none !important;
}

/* Optioneel: de onderlijning ook heel subtiel tonen bij hover */
.filter-text-group .nav-link:hover::after {
    transform: scaleX(0.5); /* Groeit tot de helft als je erover hovert */
}

/* Als de knop AL actief is, moet de hover de lijn natuurlijk op 100% houden */
.filter-text-group .nav-link.active:hover::after {
    transform: scaleX(1);
}

/* De gegenereerde menukaartjes */
.menu-item-wrapper {
    transition: all 0.4s ease;
}

.menu-item {
    background-color: #ffffff; 
    border-radius: 15px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    transition: transform 0.2s ease-in-out;
    border: none;
    height: 100%; /* Zorgt dat alle kaartjes in dezelfde rij exact even hoog zijn */
}

.menu-item:hover {
    transform: translateY(-5px);
}

.menu-item img {
    border: 1px solid #eeeeee;
    flex-shrink: 0; /* Voorkomt dat de afbeelding ovaal gedrukt wordt op mobiel */
}

.text-primary {
    color: #0d6efd !important;
    font-size: 1.1rem;
}

/* Sfeergalerij Styling */
.gallery-item {
    position: relative;
    height: 250px; /* Geeft alle sfeerfoto's een vaste, gelijke hoogte */
    background-color: #eeeeee;
    overflow: hidden; /* CRUCIAAL: Voorkomt dat de ingezoomde foto buiten het kader treedt */
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt dat de foto de box vult zonder te vervormen */
    transition: transform 0.5s ease; /* Zorgt voor de vloeiende zoom */
}

/* Het elegante zoom-effect bij hover */
.gallery-item:hover .gallery-img {
    transform: scale(1.08); /* Zoomt de foto 8% in */
}

/* Op mobiele telefoons maken we de fotoboxen iets minder hoog zodat het mooi oogt */
@media (max-width: 576px) {
    .gallery-item {
        height: 160px;
    }
}

.text-white-50 .hover-link:hover {
    color: #ffc107 !important; /* Maakt telefoonnummer goud/geel bij hover */
    text-decoration: underline !important;
}

.transition-all {
    transition: all 0.3s ease-in-out;
}

.hover-opacity-100:hover {
    opacity: 1 !important; /* Kaart licht subtiel op bij hover */
}

/* ==========================================
   7. CHATBOT CUSTOM OVERRIDES
   ========================================== */
#bot-chat-log .bg-warning {
    background-color: #ffc107 !important; /* Forceert de originele Bootstrap warning-kleur */
    color: #212529 !important;            /* Forceert donkere tekst voor de leesbaarheid */
    border-radius: 8px !important;        /* Dwingt de exacte zachte ronde hoeken af */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; /* Dwingt shadow-sm af */
}

#bot-chat-log .bg-white {
    border-radius: 8px !important;
}

#bot-options .btn {
    border-radius: 8px !important;
}

/* Standaard afstand voor grote schermen (Desktop / Tablet) */
.custom-footer-scroll {
    scroll-margin-top: 125px;
}

/* Grotere afstand voor kleine schermen (Smartphones) */
@media (max-width: 767px) {
    .custom-footer-scroll {
        scroll-margin-top: 125px; /* Verhoog of verlaag dit getal tot de titel perfect staat */
    }
}