/* ======================================= */
/* 1. GLOBALE STIJLEN EN VARIABELEN */
/* ======================================= */

:root {
    /* Kleurpalet gebaseerd op de schetsen en teksten */
    --color-dark: #17140F; /* Hoofdkleur voor titels en meeste tekst */
    --color-orange-primary: #FB8500; /* Accentkleur */
    --color-blue-dark: #559EB3; /* CTA en blauwe nieuwsbox */
    --color-blue-footer: #112F45; /* Footer kleur */
    --color-background-light: #F6F3F0; /* Lichte achtergrond (Nieuws, Team images) */
    --color-gray-text: #868686; /* Grijze tekst */
    --color-light-gray: #DFDEE9; /* Lichte tekst in footer */
    --color-story-overview: #A5A5A5; /* Kleur voor "Over Honest Mirror" */
    --color-blue-dark: #112F45; /* Dit is de donkerblauwe achtergrond van de footer */
    --color-white: #FFFFFF; /* Nodig voor tekst en scheidingslijnen */

    /* Lay-out constanten */
    --max-width: 1200px;
    --content-width: 800px; /* Algemene max. breedte */
    --story-width: 750px; /* Specifieke, iets bredere container voor de Story sectie */
    --padding-sides: 20px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-inter);
    color: var(--color-dark);
    line-height: 1.6;
    background-color: var(--color-white);
    zoom: 0.9; /* Voor Chrome, Edge en Safari */
    -moz-transform: scale(0.9); /* Voor Firefox */
    -moz-transform-origin: top center; /* Zorgt dat Firefox van bovenaf schaalt */
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased; /* Maakt het font extra strak op Mac/iOS */

}


a {
    text-decoration: none;
    color: inherit;
}

/* Hoofdtitels voor de secties (In het nieuws / Het team) */
.section-title-large {
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    text-align: center;
    color: var(--color-dark);
    margin-bottom: 50px;
}

/* ======================================= */
/* 2. NAVIGATIE BALK (Onveranderd) */
/* ======================================= */

.navigation {
    width: 90%; 
    max-width: 730px; 
    margin: 30px auto 60px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #F2F0E9;
    box-shadow: 0px 8px 11.4px 3px rgba(24, 23, 23, 0.07);
    border-radius: 44px;
}

.logo-hm img {
    height: 34px; 
}

.nav-container a {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-dark);
    margin-left: 20px;
    padding: 5px;
    transition: color 0.2s;
}

.nav-container a:hover {
    color: var(--color-orange-primary);
}


/* ======================================= */
/* 3. HET VERHAAL SECTIE (Story) - GECORRIGEERDE CSS */
/* ======================================= */

.story-section {
    max-width: var(--story-width);
    margin: 0 auto;
    padding: 0 var(--padding-sides) 100px;
    text-align: center;
}

/* Algemene Titels en Subtitels */
.story-main-title {
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    color: var(--color-dark);
    text-align: center;
    margin-bottom: 100px; /* Houdt de grote afstand vast */
}



/* --------------------------------- */
/* A. OVERZICHTSBLOK (HI THERE!) */
/* --------------------------------- */

.story-toc {
    max-width: 701px;
    margin: 0 auto 80px;
    padding: 0;
    text-align: center; /* Zorgt dat de subtitel centreert */
}

.toc-subtitle {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-story-overview);
    margin-bottom: 20px;
    margin-top: 120px;
    text-align: center;
}

/* * TOC LINES CONTAINER
 * Deze klasse bevat de losse <p> tags voor de Hi There tekst.
 * Dit is de container voor de gecentreerde Hi There sectie.
 */
.toc-lines {
    /* Zorgt ervoor dat de <p>'s links uitgelijnd zijn in de gecentreerde container */
    text-align: left;
}

/* Stijl voor ALLE <p> elementen in het 'Hi There' blok */
.toc-lines p {
    font-weight: 400; /* Standaard tekst is 400 */
    font-size: 16px; /* Standaard tekst is 16px */
    line-height: 29px;
    color: #000000;
    margin: 0 0 15px 0; /* Verticale ruimte na elk segment */
}

/* Stijl voor de EERSTE alinea (die "Hi there!" bevat) */
.toc-lines p:first-child {
    font-size: 24px; /* De hele eerste alinea is 24px */
}

/* Stijl voor de eerste zin: VET */
.toc-lines p strong {
    font-weight: 700; /* Maakt alleen <strong> vet */
    /* font-size: 24px is al geërfd van p:first-child */
}

/* Zorgt ervoor dat de laatste alinea geen extra ruimte heeft */
.toc-lines p:last-child {
    margin-bottom: 0;
}


/* --------------------------------- */
/* B. STORY BLOCKS (ONDERZOEK, VR, ETC.) */
/* --------------------------------- */

.story-block {
    display: flex;
    margin-bottom: 60px;
    width: 100%;
    align-items: stretch; 
    height: 100%;
    display: flex;
    gap: 40px; 
}

.story-image-container {
    flex-shrink: 0;
    width: 30%;
    max-width: 250px;
    text-align: center;
}
.story-image-container img {
    max-width: 100%;
    width: 100%;
    height: 100%; /* Dit is de sleutel tot het matchen van de hoogte */
    object-fit: contain; /* Cruciaal: Zorgt dat de afbeelding niet vervormt, maar het frame vult */
    display: block;
    max-height: 250px;
    
}

.story-text-content {
    flex-grow: 1;
    width: 70%; 
}

.story-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 5px;
}

/* Algemene stijl voor alle tekst in de story blocks */
.story-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    text-align: left; 
}

/* * SEGMENT STYLING
 * Gebruikt voor de verticale ruimte tussen <p> tags in alle story blocks.
 */
.story-text-segments .story-text {
    margin-bottom: 20px; /* DIT ZORGT VOOR DE VERTICALE RUIMTE TUSSEN DE SEGMENTEN */
}

.story-text-segments .story-text:last-child {
    margin-bottom: 0;
}

/* AFWISSELING: Tekst R, Afbeelding L */
.story-block-left .story-text-content {
    max-width: 401px; 
}

/* AFWISSELING: Tekst L, Afbeelding R */
.story-block-right {
    flex-direction: row-reverse; 
    justify-content: space-between;
}
.story-block-right .story-text-content {
    max-width: 450px; 
}

/* --------------------------------- */
/* C. DE LAATSTE BLOK (TOT SLOT) */
/* --------------------------------- */

.story-final-block {
    max-width: 701px;
    margin: 80px auto 0;
    text-align: left;
}

/* Eerste alinea van de finale sectie (Reguliere tekst) */
.story-final-block > .story-text {
    /* De styling zit nu in de inline style van de HTML, maar dit zorgt voor consistentie */
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    margin-bottom: 20px; /* Zorgt voor ruimte voor het volgende blok */
}

/* * FINALE SEGMENT STYLING (De "En nu?" tekst)
 * Gebruikt .story-text-segments maar voegt centrering toe.
 */
.story-text-segments.final-text-segment {
    /* Zorgt ervoor dat de hele container gecentreerd staat */
    max-width: 701px;
    margin: 0 auto; /* Gebruik 0 margin-top/bottom, de <p> erboven heeft al margin-bottom */
    text-align: left !important;
}

/* Stijl voor ALLE <p> elementen in dit laatste, gecentreerde blok */
.story-text-segments.final-text-segment p {
    font-size: 16px; /* Basisgrootte is 16px */
    line-height: 19px;
    margin-bottom: 20px; /* Verticale ruimte tussen segmenten */
    text-align: left !important;
}

/* Stijl voor de introductiezin (de "En nu?" regel) */
.story-text-segments.final-text-segment .final-intro-text {
    font-size: 24px; /* De hele eerste alinea is 24px */
    font-weight: 400; 
    text-align: left; 
}

/* De <strong> tag blijft 700 (Vet) */
.story-text-segments.final-text-segment p strong {
    font-weight: 700;
    text-align: left; /* Gecentreerde tekst */
}

.story-text-segments p {
    text-align: left !important;
}

/* 1. Corrigeer de inspringing en ruimte van de lijstcontainer (UL) */
.story-text-segments ul {
    list-style-position: outside; /* Zorgt ervoor dat de bullet buiten de tekst wordt geplaatst */
    margin: 0; /* Haalt de standaard verticale ruimte boven en onder de lijst weg */
    padding-left: 1.5em; /* Standaard inspringing, pas dit aan om bij je andere tekst te passen */
    margin-bottom: 20px; /* Voeg ruimte toe onder de lijst, net als je andere <p> elementen */
}

/* 2. Corrigeer de inspringing van de lijstitems (LI) */
.story-text-segments li {
    padding-left: 0; /* Zorgt dat de tekst begint direct na de bullet */
    margin-left: 0; 
    text-align: left; /* Zorgt ervoor dat de tekst links uitgelijnd blijft */
}


/* ======================================= */
/* 4. IN HET NIEUWS SECTION (Onveranderd) */
/* ======================================= */

.news-section {
    background-color: var(--color-background-light); 
    padding: 100px var(--padding-sides);
    text-align: center;
}

.news-cards-container {
    display: flex;
    justify-content: center; 
    gap: 70px;
    max-width: 900px; 
    margin: 50px auto 0;
}

.news-card {
    width: 45%; 
    min-width: 350px;
    text-align: left;
}

.news-image-placeholder {
    width: 100%;
    height: 258px;
    border-radius: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
}

.news-image-blue {
    background-color: var(--color-blue-dark); 
}

.news-card h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #000000;
    margin-bottom: 5px;
}

.news-card .card-source {
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    color: var(--color-gray-text);
}


.news-card:hover {
    transform: translateY(-5px); /* Beweegt een klein beetje omhoog */
    transition: transform 0.3s ease;
    cursor: pointer;
}


/* ======================================= */
/* 5. HET TEAM SECTION (Onveranderd) */
/* ======================================= */

.team-section {
    padding: 100px var(--padding-sides);
    text-align: center;
}

.team-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 260px); 
    justify-content: center; 
    gap: 20px; 
    margin: 50px auto 0;
}

.team-card {
    text-align: left;
}

.team-image-placeholder {
    width: 100%;
    height: 349px; 
    background-color: var(--color-background-light);
    border-radius: 20px;
    margin-bottom: 15px;
    background-size: cover;
    background-position: center;
    object-fit: contain;
}

.team-role-orange {
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    color: var(--color-orange-primary);
    margin-bottom: 5px;
}

.team-name {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-dark);
    margin-bottom: 10px;
}

.team-description {
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    color: var(--color-gray-text);
}

/* ======================================= */
/* 6. PARTNERS SECTION (Onveranderd) */
/* ======================================= */

.partners-section {
    padding: 60px var(--padding-sides);
    background-color: #FFFFFF; 
    text-align: center;
    border-bottom: 1px solid #EFEFEF; 
}

.partners-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--color-dark);
}

.partners-logo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    row-gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.partners-logo-container img {
    height: 30px; 
    width: auto;
    opacity: 0.7; 
    transition: opacity 0.3s;
}

.partners-logo-container img:hover {
    opacity: 1;
}


/* ======================================= */
/* 7. CTA SECTION (READY TO START) (Onveranderd) */
/* ======================================= */

.ready-to-start-section {
    background-color: #559EB3; 
    padding: 150px var(--padding-sides);
    text-align: center;
    color: white;
}

.cta-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

.cta-subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background: var(--color-orange-primary);
    border: 2px solid var(--color-orange-primary);
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
    transition: background 0.3s;
}

.cta-button:hover {
    background: #FF9F2E;
    border-color: #FF9F2E;
}


/* ----------------------------------- */
/* FOOTER STYLES (tweede set) */
/* ----------------------------------- */

.main-footer {
    background-color: var(--color-blue-dark);
    padding: 50px var(--padding-sides) 20px;
    color: var(--color-white);
    font-size: 16px;
}



.logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.logos-row img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.footer-divider {
    border: none;
    height: 0.5px;
    background-color: var(--color-white);
    opacity: 0.5;
    margin: 40px auto;
    max-width: var(--max-width);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto 40px;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-links-group {
    display: flex;
    gap: 150px; /* Grote kloof zoals in Figma */
}

.footer-links h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-links a {
    display: block;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--color-orange-primary);
}

.team-image {
    max-width: 237px;
    height: auto;
    border-radius: 16px;
}

.legal-links {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 30px;
}

.legal-links a {
    color: #DFDEE9;
    font-size: 12px;
    font-weight: 400;
}

/* ======================================= */
/* 9. MEDIA QUERIES (Responsiviteit) */
/* ======================================= */

@media (max-width: 780px) {
    .story-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .story-image-container {
        width: 70%; 
        max-width: 200px;
    }
    
    /* Zorg dat tekstblokken weer netjes links uitlijnen binnen de mobiele flow */
    .story-text-content,
    .story-block-right .story-text-content, 
    .story-block-left .story-text-content {
        text-align: left;
        max-width: 100%;
        width: 100%;
    }
}
@media (max-width: 650px) {
    .team-cards-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    .footer-links-group {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
}
@media (max-width: 450px) {
    .team-cards-grid {
        grid-template-columns: 1fr; 
    }
    .story-main-title, .section-title-large, .cta-title {
        font-size: 30px;
        line-height: 38px;
    }
}

/* De achtergrond van de modal */
.modal-overlay {
    display: none; /* Standaard verborgen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Donkere transparante achtergrond */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* De witte box binnen de modal */
.modal-content {
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    position: relative;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Het kruisje om te sluiten */
.close-contact-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #333;
}

.modal-icon {
    font-size: 50px;
    color: #FB8500;
    margin-bottom: 20px;
}

/* Specifieke styling voor de opvallende taalknop */
.lang-button-orange {
    background-color: #FB8500 !important; /* Honest Mirror Oranje */
    color: #FFFFFF !important;            /* Witte tekst */
    padding: 8px 16px !important;         /* Ruimte rondom de letters */
    border-radius: 6px;                   /* Licht afgeronde hoeken */
    font-weight: 700 !important;          /* Dikgedrukte letters */
    margin-left: 15px;                    /* Afstand tot de 'Contact' link */
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lang-button-orange:hover {
    background-color: #e67a00 !important; /* Iets donkerder oranje bij hover */
    transform: translateY(-1px);          /* Subtiele lift bij hover */
    text-decoration: none !important;     /* Geen onderstreping */
}

/* Zorg dat de nav-container de elementen goed uitlijnt */
.nav-container {
    display: flex;
    align-items: center;
}

.lang-button-orange {
    background-color: #FB8500 !important;
    color: #FFFFFF !important;
    padding: 8px 16px !important;
    border-radius: 6px;
    font-weight: 700 !important;
    margin-left: 15px;
    
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Dit zorgt voor de ruimte tussen het icoon en de tekst */
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.lang-button-orange i {
    font-size: 0.9em; /* Maakt het icoontje subtiel iets kleiner dan de tekst */
}

.lang-button-orange:hover {
    background-color: #e67a00 !important;
    transform: translateY(-1px);
}

/* Modal Styling */
.modal-overlay {
    display: none; /* Standaard verborgen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.modal-icon {
    font-size: 3rem;
    color: #fb8500;
    margin-bottom: 20px;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.instruction-box {
    background: #f8f9fa;
    border-left: 4px solid #fb8500;
    padding: 15px;
    margin: 20px 0;
    text-align: left;
}

.instruction-box ol {
    margin-top: 10px;
    padding-left: 20px;
}

.modal-note {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 25px;
}