/*-----------------------------*/
/*                             */
/*    © 2026 God's Kingdom     */
/*    Author: Alex v/d Kooi    */
/*                             */
/*-----------------------------*/


    @font-face {
        font-family: 'Libre Baskerville';
        src: url('/webfonts/LibreBaskerville-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap; /* Cruciaal voor snelheid! */
    }

    @font-face {
        font-family: 'Libre Baskerville';
        src: url('/webfonts/LibreBaskerville-Bold.woff2') format('woff2');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
         font-family: 'Libre Baskerville';
         src: url('/webfonts/LibreBaskerville-Italic.woff2') format('woff2');
         font-weight: normal;
         font-style: italic;
         font-display: swap;
    }

    :root {
        --main-blue: #2196f3;
        --dark-blue: #1565c0;
        --bible-gold: #ffd700;
        --yt-red: #ff0000;
    }

    body { 
        background-color: #f0f4f8; 
        color: #333; 
        font-family: 'Segoe UI', Tahoma, sans-serif;
        line-height: 1.8;
        margin: 0;
        /* Voeg deze regel toe: */
        min-width: 320px;

/*        min-height: 100vh; /* 'vh' staat voor Viewport Height. 100vh is precies 100% van het scherm */
        display: flex;
        flex-direction: column;  */
    }

    /* Dark Mode Kleuren */
    body.dark-mode {
        background-color: #121212;
        color: #e0e0e0;
    }

    body.dark-mode .nav-bar-custom, 
    body.dark-mode .content-card, 
    body.dark-mode .sidebar-chapters,
    body.dark-mode .chapter-box {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border-color: #333 !important;
    }

    body.dark-mode .sidebar-title,
    body.dark-mode .content-card h2 {
        color: var(--main-blue) !important;
    }

    /* Specifieke stijl voor de hoofdstuk-vakjes in Dark Mode */
    body.dark-mode .chapter-box {
        background-color: #252525 !important; /* Iets lichter dan de #121212 achtergrond */
        border: 1px solid #333 !important;   /* Een subtiel randje eromheen */
       box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Een kleine schaduw voor diepte */
    }

    /* De tekst binnen de vakjes in Dark Mode */
    body.dark-mode .chapter-box span {
        color: #bbdefb !important; /* Een mooie lichtblauwe kleur voor de titel */
    }

    /* De kleur van de tekst in de zijbalk-titel */
    body.dark-mode .sidebar-title {
        color: var(--main-blue) !important;
    }

    /* Zorg dat de blauwe lijnen zichtbaar blijven */
    body.dark-mode .blue-separator,
    body.dark-mode .hero-section,
    body.dark-mode .nav-bar-custom {
        border-bottom-color: var(--main-blue) !important;
    }

    /* Specifieke kleur voor het groene vakje in Dark Mode */
    body.dark-mode #additions {
        background-color: #1e2a1e !important;
        border: 1px solid #2d3a2d !important;
    }

    /* Zorg dat de tekst in dat vakje ook goed leesbaar is */
    body.dark-mode #additions span {
        color: #bbdefb !important; /* Lichtgroene tekst #81c784 */
    }

    /* Specifieke kleur voor het groene vakje in Dark Mode */
    body.dark-mode #aanvullingen {
        background-color: #1e2a1e !important;
        border: 1px solid #2d3a2d !important;
    }

    /* Zorg dat de tekst in dat vakje ook goed leesbaar is */
    body.dark-mode #aanvullingen span {
        color: #bbdefb !important; /* Lichtgroene tekst #81c784 */
    }

    /* Specifieke aanpassing voor de foto in Dark Mode */
        body.dark-mode .hero-section {         /* 0.3 lijkt wel goed te zijn voor dark-mode */
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/images/header-mobile.webp') no-repeat center center !important;   /* standaard light-mode was 0.12 maar die vond ik donker genoeg voor dark-mode */
        background-size: cover !important;
    }

    /* Zorgt dat de navigatie-inhoud altijd de volledige breedte benut */
    .nav-bar-custom .container {
        max-width: 1200px; /* Zelfde breedte als je content-container */
    }


    /* Voeg dit toe aan je bestaande dark mode CSS */
    body.dark-mode footer {
        background-color: #0d1117 !important; /* #2c3e50 Een diepere, bijna zwarte kleur */
        color: white !important;               /* #888 De tekst iets minder fel wit maken voor rust aan de ogen */
        border-top: 1px solid #222;           /* Een subtiele scheidingslijn boven de footer */
    }


        footer { 
            background: #2c3e50; 
            color: white; 
            padding: 10px 0; /*  10px Verlaag dit getal om de balk minder hoog te maken */
            text-align: center; 
            margin-top: auto;   /* 5px */
            width: 100%;
            border-top: 1px solid #222; 
        }

        /* 0.12 was hij standaard */
        /* Header */
        .hero-section { 
            position: relative;
            background: linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10)), 
                    url('/images/header-mobile.webp') no-repeat center center; 
            background-size: cover;
            /* Desktop padding: zorgt voor een groot plaatje op PC */
            padding: 120px 50px 140px 50px; 
            text-align: center;
            border-bottom: 1.8px solid var(--main-blue);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 450px; /* 450px Geeft desktop die 'body' die je zocht */
        }

        .bible-quote { 
            font-family: 'Libre Baskerville', serif;
            font-style: italic; 
            color: white;     /* var(--bible-gold) */
            font-size: 1.2rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
    
            /* Deze regels zorgen dat de tekst vlak boven de onderkant 'plakt' */
            position: absolute;
            bottom: 10px;       /* 20 pixels vanaf de onderkant van de foto */
            left: 0;
            right: 0;
            margin: 0 auto;     /* Zorgt dat de tekst in het midden blijft staan */
            width: 90%;         /* Voorkomt dat de tekst de zijkanten raakt */
        }

        html[lang="en"] .hero-section h1 {
            margin-top: -66px; /* -66px Duw de Engelse tekst bijvoorbeeld 15px omhoog */
        }

        html[lang="nl"] .hero-section h1 {
            margin-top: 0px; /* 0px Pas dit getal aan voor NL */
        }

        .hero-section h1 {
            color: white !important; /* Dwing wit af */
            font-family: 'Libre Baskerville', serif;
            font-weight: bold; 
            font-size: 3.0rem;
            text-shadow: 3px 3px 8px rgba(0,0,0,1);
        }


        .nav-bar-custom {
            background-color: #ffffff !important;
            padding: 5px 0;
            text-align: center;
            /* Gebruik hier exact de 1.8px die je ook bij de hero section hebt */
            border-bottom: 1.8px solid #2196f3 !important; 
            margin-bottom: 20px; /* Ruimte naar de tekst eronder */
            position: relative;
            z-index: 10;
        }

        .nav-btn {
            display: inline-block;
            padding: 4px 15px; /* Knoppen zelf ook iets minder hoog gemaakt */
            margin: 3px;
            border-radius: 20px;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.85rem; /* Iets kleiner font voor een subtiele look */
            transition: 0.3s;
            border: 2px solid transparent;
        }

        /* De container voor de knoppen op desktop */
        .nav-bar-custom .d-flex {
            justify-content: flex-start !important; /* Zet alles aan de linkerkant als startpunt */
            position: relative;
            width: 100%;
        }

        /* De basis voor elke groep */
        .nav-group {
            display: flex;
            align-items: center;
        }

        /* Home knop: als ankerpunt links */
        .nav-home {
            margin-left: 110px; /* 15px of 110px Pas dit aan om hem boven de zijbalk te krijgen */
        }

        /* Talen: volledig onafhankelijk schuiven */
        .nav-languages {
            margin-left: 35px; /* 35px Verhoog of verlaag dit om de talen te verschuiven */
        }

        /* YouTube: volledig onafhankelijk schuiven */
        .nav-socials {
            margin-left: 35px; /* 35px Verhoog of verlaag dit om YouTube te verschuiven */
        }

        /* Darkmode: deze duwen we met 'auto' naar de uiterste rechterkant */
        .nav-settings {
            margin-left: auto; 
            margin-right: 110px;
        }

        .content-card h1, 
        .content-card h2, 
        .content-card h3,
        .content-card h4, 
        .content-card h5 {
            color: var(--main-blue);
        }

        .btn-lang { background: #eee; color: #555; }
        .btn-lang.active { border-color: var(--main-blue); color: var(--main-blue); background: white; }
        .btn-lang:hover { background: #ddd; }
        .btn-yt { background: var(--yt-red); color: white; }
        .btn-yt:hover { background: #cc0000; color: white; }

        /* --- Dark Mode Toggle EXACT conform 2 januari --- */
        #dark-mode-toggle {
            display: inline-block;
            padding: 4px 15px !important;    /* Exacte padding uit Deel 1 gisteren */
            margin: 3px;
            border-radius: 20px !important;  /* Exacte afronding uit Deel 1 gisteren */
            font-weight: bold;
            font-size: 0.85rem;             /* Exacte grootte uit Deel 1 gisteren */
            transition: 0.3s;
            cursor: pointer;
            text-decoration: none;
            border: 2px solid transparent;  /* De 'onzichtbare' rand van gisteren */
            
            /* De kleuren van de .btn-lang klasse van gisteren */
            background: #eee !important; 
            color: #555 !important;
            
            /* Zorgt dat het icoontje netjes in het midden staat */
            line-height: 1;
            vertical-align: middle;
        }

        /* De hover-kleur van de .btn-lang van gisteren */
        #dark-mode-toggle:hover {
            background: #ddd !important;     /* Kleur uit Deel 2 gisteren */
            color: #333 !important;
        }

        /* De Dark Mode kleuren van 2 januari */
        body.dark-mode #dark-mode-toggle {
            background-color: #252525 !important; /* Kleur uit jouw Dark Mode sectie */
            color: #e0e0e0 !important;
            border: 1px solid #333 !important;   /* De subtiele rand uit Deel 1 */
        }

        body.dark-mode #dark-mode-toggle:hover {
            background-color: #333 !important;
            color: white !important;
        }


        /* verbreden middentekst  .flex mad-width 800px +  en .sidebar left: -320px beiden aanpassen */
        /* De hoofdcontainer centreert alleen de tekstkolom */
        .flex-container {
            display: block;      /* We stappen af van flex voor de hoofdstructuur */
            max-width: 1000px;    /* 800px Dit is de breedte van je centrale tekst */
            margin: 20px auto;   /* Centreert de tekstkolom in het midden van het scherm */
            padding: 0 15px;
            position: relative;  /* Nodig om de zijbalk hieraan te refereren */
        }

        /* De Middentekst - Nu het echte middelpunt */
        .content-card {
            background: white;
            padding: 50px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            width: 100%;          /* Vult de 800px van de flex-container */
        }

        /* De Zijbalk - Nu zwevend aan de linkerkant */
        .sidebar-chapters {
            position: absolute;
            left: -300px;     /* -300px Duwt de zijbalk buiten de 800px kolom naar links */
            top: 0;
            width: 280px;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            border-top: 5px solid var(--main-blue);
        }

        /* Verberg de scrollbar voor Chrome, Safari en Opera */
        .sidebar-chapters::-webkit-scrollbar {
            display: none;
        }

        /* Verberg de scrollbar voor Firefox en Edge/IE */
        .sidebar-chapters {
            -ms-overflow-style: none;  /* Internet Explorer en Edge */
            scrollbar-width: none;     /* Firefox */
        }

/* De hoofdstuk box basis */
.chapter-box {
    background-color: #ffffff; /* In darkmode wordt dit via body.dark-mode overschreven */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Zijbalk logica   0.5s */


/* --- BASIS STRUCTUUR VOOR SUB-HOOFDSTUKKEN --- */
.sub-chapters {
    display: flex;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.9s ease-in-out;
    flex-direction: column;
}

/* 1. STANDAARD & KLIK-MODUS (Altijd actief voor .open en .active-click) */
.chapter-box.open .sub-chapters,
.chapter-box.active-click .sub-chapters {
    max-height: 2000px; /* Ruim genoeg voor alle sub-links was 800px */
    padding-top: 10px;
}

/* 2. HOVER-MODUS (Alleen als de body de class 'hover-mode' heeft) */
body.hover-mode .chapter-box:hover .sub-chapters {
    max-height: 800px;
    padding-top: 10px;
}

/* Voorkom dat de 'open' box inklapt bij hover in de zijbalk in hover-mode */
body.hover-mode .sidebar-chapters:hover .chapter-box.open:not(:hover) .sub-chapters {
    max-height: 0;
    padding-top: 0;
}



/* einde Zijbalk logica */


/* Stijl voor de sub-links */
.sub-chapters a {
    display: block;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: #2196f3;
    text-decoration: none;
    border-left: 2px solid #2196f3;
    margin-bottom: 5px;
    transition: background 0.2s;
}

.sub-chapters a:hover {
    background: rgba(33, 150, 243, 0.1);
}

/* Verberg het pijltje volledig */
.arrow {
    display: none !important;
}

.chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}


        .sidebar-title { color: var(--dark-blue); font-weight: bold; margin-bottom: 15px; font-size: 1.1rem; }
        /* .chapter-box { background: #e3f2fd; margin-bottom: 10px; padding: 10px; border-radius: 8px; } */
        .chapter-box span { display: block; font-size: 0.9rem; font-weight: 600; color: var(--dark-blue); }
        .btn-mini { background: var(--main-blue); color: white; text-decoration: none; font-size: 0.75rem; padding: 3px 10px; border-radius: 4px; display: inline-block; margin-top: 5px; }

        .smart-break {
            display: block; /* De break is actief */
        }

        /* --- MOBIELE EN TABLET AANPASSINGEN --- */
        /* 1. EERSTE STAP: Voor tablets en kleine laptops (max 1400px) */
        /* Hier zorgen we dat de zijbalk onder de tekst springt voordat hij van het scherm valt */
        @media (max-width: 1400px) {
            .flex-container {
                max-width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .sidebar-chapters {
                position: static; /* Stop met 'zweven' aan de linkerkant */
                margin: 20px auto;
                width: 100%;
                max-width: 600px;
                order: 2; /* Navigatie komt 2=ONDER de tekst */
            }
            .content-card {
                width: 100%;
                order: 1; /* Tekst komt 1=BOVEN de navigatie */
                padding: 30px; /* Iets minder ruimte aan de zijkant op kleinere schermen */
            }

	}

        /* 2. De Navigatie herstellen voor alle schermen onder de 1400px */
        @media (max-width: 1400px) {
            .nav-bar-custom .d-flex {
                flex-direction: row !important; /* Dwing ze naast elkaar te blijven */
                justify-content: space-between !important; /* Home links, Darkmode rechts */
                flex-wrap: wrap; /* Als het echt te smal is, vloeit het naar de volgende regel */
                padding: 0 15px;
            }

            .nav-group {
                margin: 5px !important; /* Reset de grote desktop-marges naar kleine marges */
            }

            /* Zorg dat de Darkmode knop altijd naar de rechterkant van de balk gaat */
            .nav-settings {
                margin-left: auto !important;
            }
        }

        /* Zijbalk "sticky" maken zodat hij meescrolt op desktop */
        @media (min-width: 1401px) {
            .sidebar-chapters {
                position: -webkit-sticky; /* Voor Safari */
                position: sticky;
                top: 20px; /* De afstand vanaf de bovenkant van het scherm tijdens het scrollen */
                max-height: calc(100vh - 40px); /* Voorkomt dat de balk langer is dan het scherm */
                overflow-y: auto; /* Zorgt voor een scrollbalkje binnen het menu als er véél subhoofdstukken zijn */
                left: auto; /* Overschrijft de absolute positionering */
                margin-left: -320px; /* Plaats hem links van de 1000px container */
                float: left; /* Laat de content eromheen vloeien */
            }
        }

        /* Dark Mode aanpassing specifiek voor Desktop */
        @media (min-width: 992px) {
            body.dark-mode .hero-section {
                background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
                            url('/images/header.webp') no-repeat center center !important;
                background-size: cover !important;
            }
        }

        /* 2. TWEEDE STAP: Voor grote telefoons (max 991px) */
        /* Hier herstellen we de Hero-sectie (foto-blok) */
        @media (max-width: 991px) {
            .hero-section {
                background: linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10)), 
                        url('/images/header-mobile.webp') no-repeat center center; 
                background-size: cover !important; 
                background-position: center !important;
                /* Jouw perfecte mobiele padding */
                padding: 60px 10px 60px 10px !important; 
                position: relative;
                overflow: hidden;
                min-height: 200px !important; /* Forceert de juiste hoogte op de S7 */
                display: block !important;    /* Heft de desktop flexbox op */
            }
            .hero-section h1 {
                font-size: 1.55rem !important;  /* 1.4rem standaard */
                margin-bottom: 10px;
                text-shadow: 2px 2px 5px rgba(0,0,0,1) !important;
            }
            .bible-quote {
                position: absolute !important;
                bottom: 1px !important;  /* 1px vanaf onderkant foto ; Raakt bijna de onderkant van de foto */
                left: 0;
                right: 0;
                margin: 0 auto !important;
                font-size: 0.70rem !important;  /* 0.70 (was 0.75 origineel)  Kleiner lettertype voor de Bijbeltekst */
                font-weight: 600 !important;   /* Het 'medium-bold' effect */
                line-height: 1.2;
                width: 95% !important;
                background: rgba(0, 0, 0, 0.05);  /* 0.05 Subtiele achtergrond voor leesbaarheid */
                text-shadow: 2px 2px 5px rgba(0,0,0,1) !important;
                padding: 4px 0;
            }
            .smart-break {
                display: none;
            }
            .nav-group {
                margin: 5px !important; /* Zet alle marges weer neutraal op mobiel moet vermoedelijk op 0px */
                justify-content: center;
            }
            .nav-bar-custom .d-flex {
                flex-wrap: wrap; /* Laat de groepjes netjes onder elkaar vloeien op mobiel */
                justify-content: center;
            }
        }

        /* 3. DERDE STAP: Voor kleine telefoons (max 600px) */
        /* Hier zorgen we dat de knoppen in de navigatiebalk netjes blijven staan */
        @media (max-width: 600px) {
            .nav-bar-custom .d-flex {
                flex-direction: column; /* Dark mode knop onder de taalknoppen */
                gap: 15px;
            }
            .nav-group {
                margin: 5px !important; /* Zet alle marges weer neutraal op mobiel (vermoedelijk moet hij op 0px) */
                justify-content: center;
            }
            .nav-bar-custom .d-flex {
                flex-wrap: wrap; /* Laat de groepjes netjes onder elkaar vloeien op mobiel */
                justify-content: center;
            }
            .content-card {
                padding: 20px; /* Nog iets meer leesruimte op smalle telefoons */
            }
        }

        /* deze nog 4 spaties naar rechts schuiven voor overzichtelijkheid */
        /* 3. Specifiek voor kleine telefoons (max 600px - zoals jouw S7 Edge) */
        @media (max-width: 600px) {
            .nav-bar-custom .container {
                padding: 5px;
            }
            .nav-group {
                margin: 2px !important; /* Maak de ruimte tussen de groepen minimaal */
            }
            .nav-btn {
                padding: 4px 8px !important; /* Maak de knoppen iets smaller voor mobiel */
                font-size: 0.75rem !important; /* Iets kleiner lettertype zodat het past */
            }
            /* Op hele kleine schermen zetten we de groepen in 2 rijen voor de balans */
            .nav-bar-custom .d-flex {
                justify-content: center !important; /* Alles in het midden op kleine telefoons */
            }
        }

        /* 4. VIERDE STAP: Voor grote breedbeeld monitoren (Full HD en hoger) */
        @media (min-width: 1600px) {
            .hero-section {
                /* We verhogen de min-height zodat het plaatje op grote schermen indrukwekkend blijft */
                min-height: 550px !important; 
                /* We passen de padding aan om de tekst mooi in het midden van het grote vlak te houden */
                padding: 160px 50px 180px 50px !important;
            }
            .hero-section h1 {
                font-size: 3.5rem !important; /* Iets grotere letters voor de leesbaarheid op grote afstand */
            }
        }

        .document-container {
            width: 100%;
            max-width: 900px; /* Optioneel: voorkomt dat de tekst te breed wordt op grote schermen */
            margin: 0 auto;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
        }

        .word-iframe {
            width: 100%;
            height: 80vh; /* Neemt 80% van de schermhoogte in */
            border: none;
            display: block;
        }

    html {
        scroll-behavior: smooth; /* Zorgt voor een vloeiende beweging bij het klikken */
        scroll-padding-top: 20px; /* Voorkomt dat de titel 'onder' je navigatiebalk verdwijnt */
    }