/* ////////////////////////////////////////

Your custom css here

/////////////////////////////////////////*/

/* ==========================================================================
   Custom Typography Overrides (Nunito Sans & Didot)
   ========================================================================== */

/* ==========================================================================
   Custom Typography Overrides (Inter & Didot)
   ========================================================================== */


body {
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
}


/*@media (max-width: 768px) {
    #portfolio-filters {
        scroll-margin-top: 120px;
    }
}

@media (min-width: 769px) {
    #portfolio-filters {
        scroll-margin-top: -120px;
    }
}

#portfolio-anchor {
    display: block;
    position: relative;
    visibility: hidden;
}

@media (min-width: 769px) {
    #portfolio-anchor {
        top: -820px;
    }
}*/




/* 1. Force body text, navigation, and paragraphs to use Inter */
body, p, a, span, div, li, .nav-link, .copy {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* 2. Style the headline subtitle for a clean Avenir-like presence */
.headline-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em; /* Inter looks best at large sizes with slight tight tracking */
	color: rgb(182, 165, 150) !important; /* Zet de kleur vast op je hover-tint */
}

/* 3. Keep your working Didot serif headings intact */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.headline-title, .navbar-brand, .footer-title {
    font-family: Didot, 'Didot LT STD', 'Bodoni MT', 'Noto Serif Display', serif !important;
    font-weight: normal !important;
}


/* De hover-laag op portfolio items aanpassen naar transparant wit */
.work-entry-hover {
    background: rgba(213, 203, 195, 0.4) !important;
}

/* Omdat de achtergrond nu wit is, moeten we de tekstkleur in de hover aanpassen naar donker/zwart, anders is het onleesbaar */
.work-entry-title, 
.work-entry-cat {
    color: #000000 !important;
}


/* Zorgt ervoor dat het logo perfect meeschaalt binnen de navigatiebalk */
/* Zorgt ervoor dat het SVG logo daadwerkelijk een vorm krijgt */
/* Globale instellingen voor het SVG logo */
.brand-logo {
    display: block !important;
    height: 90px !important;
    width: auto !important; /* Laat de browser de verhouding bepalen */
    min-width: 170px !important; /* Dwingt een minimale breedte af zodat hij op mobiel niet naar 0px klapt */
    max-width: 220px !important;
    object-fit: contain;
}

/* Specifieke tweak voor mobiel */
@media (max-width: 575.98px) {
    .brand-logo {
        height: 60px !important;
        min-width: 120px !important; /* Iets compacter voor mobiele schermen */
        max-width: 170px !important;
    }
}

/* De hover-stijl voor links aanpassen */
a:hover {
    text-decoration: none !important;        /* Verwijdert het doorhalen (line-through) */
    color: rgb(182, 165, 150) !important;    /* Wijzigt de hover-kleur naar jouw RGB-kleur */
}


/* Slogan (display-3) specifiek op mobiele schermen kleiner maken */
@media (max-width: 767.98px) {
    h1.headline-title.display-3 {
        font-size: 40px !important;    /* Pas dit getal aan om de tekst groter of kleiner te maken op mobiel */
        line-height: 1.3 !important;   /* Zorgt ervoor dat de regels op mobiel mooi dicht op elkaar aansluiten */
        margin-bottom: 15px !important;
    }
}

/* De dikte van de menu-links aanpassen naar een slanker gewicht */
.navbar-light .navbar-nav .nav-link {
    font-weight: 400 !important; /* Probeer 400 voor 'Regular' of 500 voor 'Medium' */
    letter-spacing: 0.02rem !important; /* Optioneel: iets minder spatie tussen de letters voor een strakker effect */
}


/* De navigatiefilters boven de fotogalerij dwingen om Inter te gebruiken */
#filters li a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important; /* Maakt het menu netjes 'Medium' qua dikte */
}

/* De kleur van de groeiende lijn onder de gallery-filters aanpassen */
#filters li a::after {
    background: rgb(182, 165, 150) !important; /* Pas hier de RGB-kleur aan naar wens */
}



/* Extra marge aan de linkerkant van de slogan-tekst */
.slogan-row .headline-content {
    padding-left: 20px !important; /* Pas dit getal (bvb 40px, 60px, 80px) aan naar wens */
}

/* Optimalisatie voor mobiel zodat de tekst niet buiten het scherm valt */
@media (max-width: 767.98px) {
    .slogan-row .headline-content {
        padding-left: 0px !important; /* Iets subtieler op telefoons */
    }
}




/* ==========================================================================
   Portfolio Filters op 1 Lijn voor Mobiel (Swipeable)
   ========================================================================== */

@media (max-width: 767.98px) {
    /* 1. Dwing de hele lijst op één lijn en maak hem horizontaal scrollbaar */
    #filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Zorgt voor soepel swipen op iPhone/iOS */
        padding-bottom: 15px !important;   /* Ruimte voor de animatielijn */
        margin-bottom: 20px !important;
        
        /* Verberg de lelijke scrollbalk in Chrome/Safari/Firefox */
        scrollbar-width: none; 
    }
    #filters::-webkit-scrollbar {
        display: none; 
    }

    /* 2. Breng de enorme marge van 100px terug naar een mooie tussenruimte op mobiel */
    #filters li {
        margin-right: 25px !important; /* Ruimte tussen de menu-items op mobiel */
        flex: 0 0 auto !important;     /* Zorgt ervoor dat de woorden niet worden ingedrukt */
    }
    
    /* 3. Zorg dat de tekst mooi compact blijft op mobiel */
    #filters li a {
        font-size: 16px !important;
        white-space: nowrap !important; /* Dwingt de woorden om op 1 lijn te blijven */
    }
}



/* ==========================================================================
   Portfolio Hoogte Aanpassingen voor Mobiel
   ========================================================================== */

@media (max-width: 767.98px) {
    /* 1. Dit geldt voor ALLE standaard portfolio items op mobiel */
    .entry .entry-image {
        height: 250px !important; /* Pas dit getal aan voor de standaard foto's op mobiel */
    }

    /* 2. Dit geldt SPECIFIEK voor de items waar je class="... h2" hebt toegevoegd */
    .entry.h2 .entry-image {
        height: 450px !important; /* Pas dit getal aan voor de extra hoge foto's op mobiel */
    }
    
    /* 3. Zorgt ervoor dat de grid-blokken zelf de juiste hoogte overnemen op mobiel */
    .entry {
        height: 250px !important;
    }
    .entry.h2 {
        height: 450px !important;
    }
}




/* ==========================================================================
   Project Detail Gallery - Exacte Verticale Spatiëring (30px - Alleen Detailpagina)
   ========================================================================== */

/* 1. Standaard marge voor alle figure-elementen */
figure {
    margin: 0 0 30px 0 !important; 
}

/* 2. Zorg dat de Bootstrap rijen onderling ook exact 30px afstand houden */
.row {
    margin-bottom: 30px !important; 
}

/* 3. SPECIFIEK VOOR MOBIEL: Alleen toepassen binnen de detailpagina/secties, NIET op het hoofdportfolio */
@media (max-width: 767.98px) {
    /* We zorgen dat we alleen kolommen pakken die binnen een 'section' vallen (zoals je projectdetail) */
    section .col-md-6 {
        margin-bottom: 0px !important;
    }
    
    figure {
        margin-bottom: 30px !important; 
    }
    
    .row {
        margin-bottom: 0px !important;
    }
}

/* 4. Ruimte boven de footer op detailpagina's */
footer, .footer {
    margin-top: 15px !important;
    padding-top: 15px !important;
}
/* ==========================================================================
   Project Pagina Navigatie (Volgende / Vorige / Overzicht)
   ========================================================================== */

.project-navigation .border-top {
    border-top: 1px solid #eaeaea !important; /* Subtiele scheidingslijn boven de knoppen */
}

.nav-project-link {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px;
    color: #000000 !important;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    text-decoration: none !important;
    transition: color .2s ease-in-out;
}

/* Subtiele hover-kleur die matcht met je subtitels en menu-items */
.nav-project-link:hover {
    color: rgb(182, 165, 150) !important;
}

/* Zorgt dat het 'Overzicht' icoon en tekst mooi gecentreerd onder elkaar staan */
.nav-project-link.all-project {
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
}



/* ==========================================================================
   Footer Logo Aanpassingen
   ========================================================================== */

.footer-logo {
    height: 80px !important;    /* Dwingt een mooie, subtiele hoogte af */
    width: 80px !important;     /* Houdt het logo perfect vierkant (1:1) */
    object-fit: contain;
    margin-bottom: 15px;
}

/* Op mobiel centreren we het logo en de copyright voor een betere balans */
@media (max-width: 767.98px) {
    .col-md-3 {
        align-items: center !important; /* Centreert het logo op telefoons */
        text-align: center !important;  /* Centreert de copyright-tekst */
    }
    .footer-logo {
        height: 60px !important; /* Net iets compacter op mobiel */
        width: 60px !important;
        margin-bottom: 10px;
    }
}






/* MOET BENEDEN STAAN */



/* ==========================================================================
   Responsive Achtergrondfoto achter de gehele Slogan-Rij
   ========================================================================== */

.slogan-row {
    /* 1. De achtergrondafbeelding instellen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('../img/PROJECT_KM/Elke_Architectuur_Project_KM_1B_OPT.jpg');
    
    /* 2. Zorgen dat de foto perfect responsive meeschaalt (bovenkant van de foto blijft zichtbaar op desktop) */
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    
    /* 3. Witruimte BINNEN de rij creëren zodat er ruimte boven en onder de tekst ontstaat */
    padding-top: 80px !important; 
    padding-bottom: 80px !important;
    
    /* 4. Optioneel: subtiele afronding van de hoeken van de rij */
    border-radius: 4px;
}

/* 5. We zorgen dat de binnenliggende .headline geen ongewenste extra marges heeft */
.slogan-row .headline {
    background: transparent !important;
    padding: 0 !important;
}

/* 6. De tekstkleur aanpassen voor een strak contrast bovenop de foto */
.slogan-row .headline-title.display-3 {
    color: #ffffff !important; /* Maak hier #000000 van bij een heel lichte foto */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}



/* ==========================================================================
   Styling voor de H4 in de Slogan-Rij (Inter font + Navigatiegrootte)
   ========================================================================== */
.slogan-row h4 {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important; /* Activeert het Inter lettertype */
    font-size: 18px !important;                  /* Matcht de subtiele grootte van het menu */
    font-weight: 500 !important;                 /* Geeft een mooie, strakke dikte (Medium) */
    letter-spacing: 0.05rem !important;          /* Geeft net wat meer ademruimte tussen de letters */
    text-transform: uppercase !important;        /* Zet de tekst in hoofdletters voor die minimalistische architectenlook */
}

/* ==========================================================================
   Optimalisatie voor Mobiele Schermen
   ========================================================================== */
@media (max-width: 767.98px) {
    .slogan-row {
        /* Op mobiel maken we de rij verticaal iets compacter */
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        
        /* Zorgt dat de kolommen op mobiel links en rechts een klein beetje ademruimte houden */
        padding-left: 20px !important;
        padding-right: 20px !important;

        /* Op mobiel bleef de oorspronkelijke centrering prima ogen, dus die behouden we hier */
        background-position: center center !important;
    }
}

/* ==========================================================================
   Algemene Achtergrondkleur Website Wijzigen
   ========================================================================== */

/* 1. Dwing de volledige website-achtergrond naar de nieuwe warm-witte tint */
body {
    background-color: #F8F7F4 !important;
}

/* 2. Zorg dat ook de vaste navigatiebalk mooi mee kleurt in plaats van hard wit */
.navbar.bg-white, 
#mainNav {
    background-color: #F8F7F4 !important;
}


/* ==========================================================================
   Nieuwe 3-Koloms Structuur (Portrait FOTO onder header op idex + Tekst)
   ========================================================================== */

/* Zorgt ervoor dat de portrait foto scherp blijft en de breedte van zijn kolom respecteert */
.project-portrait {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 2px; /* Subtiele afronding, passend bij de rest van je site */
}

/* Extra witruimte aan de linkerkant van de tekst, maar alleen op desktop */
@media (min-width: 768px) {
    .right-content-wrapper {
        padding-left: 40px !important;
    }
}


/* ==========================================================================
   Footer Logo Aanpassingen (Vergroot voor een betere balans)
   ========================================================================== */

.footer-logo {
    height: 120px !important;    /* Was eerst 80px - flink vergroot */
    width: 120px !important;     /* Was eerst 80px - houdt het logo perfect 1:1 vierkant */
    object-fit: contain;
    margin-bottom: 20px;         /* Iets meer ademruimte naar de copyright toe */
}

/* Op mobiel schalen we het logo automatisch iets compacter mee */
@media (max-width: 767.98px) {
    .footer-logo {
        height: 90px !important;  /* Was eerst 60px op mobiel */
        width: 90px !important;   /* Was eerst 60px op mobiel */
        margin-bottom: 15px;
    }
}

/* ==========================================================================
   Witruimte tussen portrait-sectie en portfolio verkleinen
   ========================================================================== */

/* Minder padding onderaan de portrait/intro-sectie */
section.space-md.pt-0 {
    padding-bottom: 15px !important;
}

/* Minder padding bovenaan de portfolio-sectie */
section.space-md:has(#portfolio) {
    padding-top: 30px !important; /* WAS 15 BIJ GEBRUIK VAN FILTERS PROJECTEN */
    padding-bottom: 40px !important;
}

/* Lijn en footer dichter bij de foto's — geregeld via footer, .footer hierboven */

.visie-foto-sectie {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
.contact-foto-sectie {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* Minder witruimte tussen projectnavigatie en fotogalerij */
header.space-md:has(.project-navigation) {
    padding-bottom: 30px !important; /* was 90px */
}


   /* FIXEN VOOR SEO */

   .subtitle-style {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05rem !important;
    text-transform: uppercase !important;
   }

   .section-title-style {
       font-family: Didot, 'Didot LT STD', 'Bodoni MT', 'Noto Serif Display', serif !important;
    font-weight: normal !important;
	   font-size: 1.25rem;
	   margin-bottom: 0.5rem;
    line-height: 1.64;
   }
	.step-title-style {
    font-size: 1.25rem;   /* huidige waarde uit de p.lead-stijl overnemen */
    font-weight: 300;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    margin-top: 0;
    margin-bottom: 1rem;
}