/* De kopfoto overal verbergen */
.header-image {
    display: none;
}

/* De kopfoto alléén op de homepagina wel tonen */
.home .header-image, .front-page .header-image {
    display: block;
}

/* ==========================================================================
   1. SCHOONMAAK: VERBERG DE STANDAARD TITEL, DATUM EN FOOTER OP DE HOME
   ========================================================================== */
.home .entry-header, .archive .entry-header,
.home .entry-footer, .archive .entry-footer {
    display: none !important;
}

/* ==========================================================================
   2. JAAPLEEST STRUCTUUR: AFBEELDING LINKS, ALLES ANDERS RECHTS
   ========================================================================== */
@media screen and (min-width: 768px) {
    
    .home .site-main article, .archive .site-main article {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 25px; /* Fijne, rustige ruimte tussen foto en tekst */
        margin-bottom: 35px;
        padding-bottom: 25px;
        border-bottom: 1px solid #eee; /* Dun elegant scheidingslijntje */
    }

    .home .post-thumbnail, .archive .post-thumbnail {
        flex-shrink: 0;
        margin: 0 !important;
        width: 140px; /* Iets compacter formaat voor de boekomslag */
        max-width: 140px;
    }

    .home .entry-content, .archive .entry-content {
        flex: 1;
        text-align: left !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   3. VERFIJNING LETTERTYPES EN WITRUIMTES (SOBER EN COMPACT)
   ========================================================================== */

/* ALINEA 1: De handmatige boektitel (Veel kleiner en compacter) */
.home .entry-content p:nth-of-type(1), .archive .entry-content p:nth-of-type(1) {
    font-size: 16px !important; /* Elegant klein formaat */
    font-weight: bold;
    color: #000;
    margin-top: 0 !important;
    margin-bottom: 2px !important; /* Minimale witruimte onder de titel */
    line-height: 1.2;
}

/* ALINEA 2: De auteur (Kleiner, soberder, schuingedrukt grijs) */
.home .entry-content p:nth-of-type(2), .archive .entry-content p:nth-of-type(2) {
    font-size: 13px !important; /* Heel bescheiden en sober */
    font-style: italic;
    color: #666; /* Neutraal sober grijs */
    margin-top: 0 !important; /* Sluit strak aan op de titel */
    margin-bottom: 10px !important; /* Ruimte voordat de recensie begint */
    line-height: 1.2;
}

/* ALINEA 3 EN VERDER: De eerste zinnen van de recensie (Heel klein lettertype) */
.home .entry-content p:not(:nth-of-type(1)):not(:nth-of-type(2)),
.archive .entry-content p:not(:nth-of-type(1)):not(:nth-of-type(2)) {
    font-size: 12px !important; /* Heel klein lettertype voor de introzinnen */
    line-height: 1.5;
    color: #444; /* Iets zachter zwart voor rust aan de ogen */
}

/* DE VERDER LEZEN KNOP: Subtiel opmaken */
.home .more-link, .archive .more-link {
    font-size: 12px !important;
    font-weight: bold;
    color: #0073aa; /* Klassieke subtiele WordPress linkkleur */
    text-transform: lowercase; /* Alles in kleine letters voor sobere look */
}

/* ==========================================================================
   4. INDELING BINNENIN DE RECENSIE (SINGLE POST)
   ========================================================================== */

/* De officiële titel bovenaan de pagina (Mooi groot en duidelijk) */
.single .entry-title {
    font-size: 28px !important;
    font-weight: bold;
    color: #111;
    text-align: left !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

/* Zorg voor een fijne, rustige lettergrootte voor de echte lezer */
.single .entry-content p {
    font-size: 15px !important; /* Comfortabel leesbaar formaat */
    line-height: 1.6; /* Meer ademruimte tussen de regels */
    color: #222;
    margin-bottom: 1.5em;
}

/* Geef de herhaalde titel en auteur binnenin de tekst een eigen accent */
.single .entry-content p:nth-of-type(1) {
    font-size: 18px !important;
    font-weight: bold;
    margin-bottom: 2px !important;
}

.single .entry-content p:nth-of-type(2) {
    font-size: 15px !important;
    font-style: italic;
    color: #555;
    margin-bottom: 25px !important; /* Ruimte voordat het echte verhaal begint */
    border-bottom: 1px dashed #ddd; /* Elegant stippellijntje onder de auteur */
    padding-bottom: 15px;
}
/* ==========================================================================
   5. NAAM IN SIERLIJKE KRULLETTERS (100% GERICHT OP JOUW NAAM)
   ========================================================================== */
.mijn-handtekening {
    font-family: 'Great Vibes', 'Brush Script MT', 'Comic Sans MS', cursive !important;
    font-size: 26px !important; /* Prachtig formaat voor je handtekening */
    color: #222 !important; /* Elegante donkere inktkleur */
    display: inline-block;
    margin-top: 15px; /* Fijne witruimte boven je handtekening */
}
/* ==========================================================================
   6. AFBEELDING ALS ACHTERGROND ACHTER HET CONTACTFORMULIER
   ========================================================================== */
.contact-form {
    background-image: url('https://mijn-venster-op-de-wereld.be/wp-content/uploads/2026/08/Post-voor-Tim-1.jpg') !important;
    background-size: cover; /* Zorgt dat de foto het hele formulier vult */
    background-position: center; /* Centreert de achtergrondfoto */
    padding: 30px !important; /* Geeft fijne ademruimte binnenin het vlak */
    border-radius: 8px; /* Maakt de hoeken van het formuliervlak mooi rond */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Geeft een subtiele, zachte schaduw */
}

/* Zorg dat de teksten van de vragen (Naam, E-mail etc.) goed leesbaar zijn */
.contact-form label {
    color: #ffffff !important; /* Maakt de vragen wit. Verander naar #000000 voor zwart */
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Geeft een schaduw achter de letters voor leesbaarheid */
}
/* /* /* ==========================================================================
   7. DE ACHTERGROND EN DE WITTE KADERS OVERAL PERFECT INRICHTEN
   ========================================================================== */

/* Maak de hele website iets minder breed zodat er meer achtergrond te zien is */
@media screen and (min-width: 44.375em) {
    .site {
        max-width: 1000px;
        margin: 30px auto;
    }
}

/* EXTREEM DOORZICHTIG: De boord rondom de recensies laat de foto maximaal door */
.site, .site-header, .site-footer, .sidebar {
    background-color: rgba(255, 255, 255, 0.30) !important;
}

/* DE WITTE KADERS: Zowel op de home, de archieven, als binnenin het bericht (single) */
.home .site-main article, 
.archive .site-main article, 
.single .site-main article {
    background: #ffffff !important;
    padding: 30px !important; /* Iets meer binnenruimte voor optimaal leescomfort */
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 40px; /* Zorgt voor een mooie afstand tussen de elementen */
}
/* ==========================================================================
   8. CORRECTIE: ULTRA STRAK HAMBURGER-MENU (3 IDENTIEKE LIJNTJES RECHTS BOVENAAN)
   ========================================================================== */
@media screen and (max-width: 44.375em) {
    /* Ruimte maken in de header voor absolute positionering */
    .site-header {
        position: relative;
    }
    
    /* De knop strak rechts bovenaan positioneren */
    .menu-toggle {
        font-size: 0 !important; /* Verbergt de tekst 'Menu' volledig */
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        position: absolute;
        top: 25px;    /* Nauwkeurige afstand vanaf de bovenkant */
        right: 20px;  /* Nauwkeurige afstand vanaf de rechterkant */
        width: 32px;
        height: 24px; /* Totale hoogte van het icoon */
        cursor: pointer;
        display: block !important;
        z-index: 9999;
        box-shadow: none !important;
    }

    /* Lijn 1 (Boven) en Lijn 2 (Midden via schaduw) */
    .menu-toggle::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px; /* Dikte van de lijntjes */
        background-color: #000000; /* Kleur van de bovenste lijn */
        border-radius: 2px;
        
        /* DIT MAAKT DE MIDDELSTE LIJN: exact 10px naar beneden geprojecteerd */
        box-shadow: 0 10px 0 0 #000000; 
    }

    /* Lijn 3 (Onder) */
    .menu-toggle::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px; /* Dikte van de onderste lijn */
        background-color: #000000; /* Kleur van de onderste lijn */
        border-radius: 2px;
    }
}
/* ==========================================================================
   9. MOBIEL MENU: MENU-ITEMS VETTER EN DUIDELIJKER MAKEN
   ========================================================================== */
@media screen and (max-width: 44.375em) {
    /* Maakt de hoofdkeuzes in het mobiele menu vetgedrukt en iets groter */
    .main-navigation ul li a {
        font-weight: bold !important;   /* Maakt de letters vet */
        font-size: 16px !important;    /* Iets groter voor betere leesbaarheid */
        color: #111111 !important;     /* Diepzwart voor maximaal contrast */
        padding-top: 12px !important;  /* Iets meer ademruimte tussen de keuzes */
        padding-bottom: 12px !important;
    }

    /* Zorgt dat ook de sub-keuzes (zoals onder je 'Recensiearchief') netjes meegaan */
    .main-navigation ul ul li a {
        font-weight: 600 !important;   /* Net een tikje minder zwaar dan het hoofdmenu */
        font-size: 15px !important;
        padding-left: 20px !important; /* Springt mooi in naar rechts */
    }
}
/* ==========================================================================
   10. MOBIEL MENU: UITKLAPPIJLTJE VEILIG EN COMPACT DICHTBIJ PLAATSEN
   ========================================================================== */
@media screen and (max-width: 44.375em) {
    /* Geeft de menuregel een flexibele structuur zonder de inklap-logica te breken */
    .main-navigation .menu-item-has-children {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start; /* Duwt alles direct naar links */
    }

    /* Zorgt dat het woord zelf compact aansluit en geen 100% breedte opeist */
    .main-navigation .menu-item-has-children > a {
        display: inline-block !important;
        width: auto !important;
        padding-right: 0 !important;
    }

    /* Plakt het pijltje direct achter het woord en herstelt de werking */
    .main-navigation .menu-item-has-children .dropdown-toggle {
        position: static !important; /* Heft de zwevende positie aan de rechterkant op */
        margin-left: 5px !important; /* De gewenste compacte afstand tot het woord */
        padding: 10px !important;    /* Behoudt een fijne klikruimte voor je vinger */
        width: auto !important;
        height: auto !important;
    }

    /* Zorgt dat de onderliggende categorieën (het sub-menu) altijd netjes op een nieuwe regel starten */
    .main-navigation .menu-item-has-children .sub-menu {
        flex-basis: 100%;
    }
}