/* ========================================================================= */
/* --- 1. RESPONSIVE HERO HEADINGS --- */
/* ========================================================================= */

/* Styling the h1s */
#carouselExampleSlidesOnly .carousel-caption h1, 
#carouselHomepageHeader .carousel-caption .md-title,
#carouselPageHeader .carousel-caption .md-title{
    font-family: ClashDisplay-Bold;
    font-size: clamp(2.25rem, 0.286rem + 5.238vw, 5rem);
    line-height: 1.05;
    margin-bottom: 12px;
}


/* Homepage sub-heading */
#carouselHomepageHeader .carousel-caption .md-paragraph-lg,
#carouselPageHeader .carousel-caption h2{
    font-size: clamp(1.5rem, 1.143rem + 0.952vw, 2rem); 
    line-height: 1.3;
}


/* ========================================================================= */
/* --- 2. MOBILE LAYOUT OVERRIDES (MAX-WIDTH 767PX) --- */
/* ========================================================================= */

@media (max-width: 767px) {
    /* Fix excessive horizontal padding on HOMEPAGE hero */
    #carouselHomepageHeader .carousel-inner .carousel-item .carousel-caption {
        padding-left: 24px;
        padding-right: 24px;
        width: 100%;
        left: 0;
        right: 0;
    }
}


/* ========================================================================= */
/* --- 3. NAVBAR STYLING & DROPDOWN (DESKTOP) --- */
/* ========================================================================= */

/* --- 3A. MAIN NAV LINKS --- */
.navbar-nav .nav-link {
    font-size: 15px; 
    font-weight: 500;
}

/* --- 3B. DROPDOWN CHEVRON (Desktop Default) --- */
.nav-item.dropdown > a.dropdown-toggle:after {
    color: #353C44; 
    margin-left: 0.5em; 
}
.nav-item.dropdown.show > a.dropdown-toggle:after {
    color: #A9A9A9;
}

/* --- 3C. Dropdown menu container --- */
.md-dropdown-menu {
    display: inline-flex;
    padding: 18px 16px;
    flex-direction: column;
    align-items: flex-start;
    
    gap: 0; 
    min-width: 320px; 
    
    border-radius: 17px;
    border: 6px solid #6CA0C4;
    background: #FFF;
    z-index: 1050;
    
    margin-top: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- 3D. DROPDOWN ITEMS & LAYOUT --- */
.md-dropdown-menu .dropdown-item {
    background-color: transparent !important; 
    border-radius: 0 !important;
}

.md-dropdown-menu .dropdown-item a {
    /* CRITICAL FIX: Override conflicting layout properties from theme */
    display: flex !important;
    padding: 14px 18px 14px 12px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;

    min-height: 48px;
    align-items: center;
    gap: 0px !important; 
    
    border-bottom: 1px solid #DDD; 
    text-decoration: none;
    
    justify-content: flex-start; 
    height: 100%;
    background-color: transparent !important; 
}
/* Neutralize the dark-hover class in its base state */
.md-dropdown-menu .dropdown-item a.md-hover-darker {
    background-color: transparent !important;
}

/* --- 3E. TYPOGRAPHY & ICON STYLING --- */

/* CRITICAL FIX: Target B with maximum specificity for color/font */
.nav-item.dropdown .md-dropdown-menu .dropdown-item b {
    color: #353C44 !important; 
    font-family: Roboto, sans-serif !important; 
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    visibility: visible !important; 
    display: block !important; 
    height: auto !important; 
    white-space: normal !important;
}

/* Hide the subtitle text (d-block span) */
.md-dropdown-menu .dropdown-item a .d-inline-block span {
    display: none !important;
}

/* Spacing Control for first three items (Confirmed 26px) */
.md-dropdown-icon {
    margin-right: 26px !important; 
}

/* Icon Styling (Material Symbols) */
.md-dropdown-icon i.material-symbols-outlined {
    color: #218AAB !important; 
    font-size: 24px !important; 
    line-height: 1 !important; 
    height: auto !important; 
    width: auto !important;
}

/* Neutralize the conflicting yellow color from the dark hover class for the icon base state */
.md-dropdown-menu .dropdown-item a.md-hover-darker i {
    color: #218AAB !important; 
}

/* --- 3F. HOVER STATES --- */
.md-dropdown-menu .dropdown-item:hover {
    background: #FF0 !important; 
}
.md-dropdown-menu .dropdown-item a:hover {
    background-color: transparent !important;
}
.nav-item.dropdown .md-dropdown-menu .dropdown-item:hover b,
.nav-item.dropdown .md-dropdown-menu .dropdown-item:hover .md-dropdown-icon i {
    color: #000 !important; 
}

/* --- 3G. FINAL LINK ROW (md-subnavigation-link) --- */
.md-dropdown-menu > .md-subnavigation-link {
    display: flex;
    min-height: 48px;
    padding: 14px 18px 14px 12px;
    align-items: center;
    gap: 0;
    width: 100%;
    
    color: #353C44;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

/* Remove the existing arrow icon (i.fal.fa-chevron-right) */
.md-dropdown-menu > .md-subnavigation-link i.fa-chevron-right {
    display: none; 
}

/* Add the new Code Icon using CSS Generated Content (Confirmed 26px spacing/18px size) */
.md-dropdown-menu > .md-subnavigation-link:before {
    content: '\f121'; 
    font-family: 'Font Awesome 5 Pro'; 
    font-weight: 900;
    color: #218AAB;
    font-size: 18px; 
    margin-right: 26px; 
}

.md-dropdown-menu > .md-subnavigation-link:hover {
    background: #FF0;
    color: #000;
}

/* --- FINAL FIXES (Icon Hover) --- */
.md-dropdown-menu > .md-subnavigation-link:hover:before {
    color: #000 !important;
}


/* ========================================================================= */
/* --- 5. MOBILE MENU OVERHAUL (MAX-WIDTH 991.98PX) --- */
/* ========================================================================= */

@media (max-width: 991.98px) {
    /* --- A. FIX MENU BACKGROUND, SCROLL LOCK, AND MENU HEIGHT (UPDATED SCROLL LOCK) --- */
    
    /* CRITICAL FIX: Lock the scroll using only overflow: hidden to prevent viewport jump */
    html.modal-open,
    body.modal-open { 
        overflow: hidden !important;
        /* position: fixed !important; REMOVED to prevent scroll jump */
    }
    html:has(body:has(#navbarNavAltMarkup.show)),
    body:has(#navbarNavAltMarkup.show) { 
        overflow: hidden !important;
    }

    #navbarNavAltMarkup {
        background-color: #FFF !important;
        height: auto; 
        max-height: 100vh; 
        overflow-y: auto; 
    }
    
    /* --- B. MOBILE MENU ITEM STYLING (Layout & Height) --- */
    
    .navbar-nav .nav-item {
        display: flex;
        padding: 0; 
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
        min-height: 56px; 
        border-bottom: 1px solid #E9E9E9;
        justify-content: center; 
    }

    /* Remove excessive gap below 'Software Op Maat' and remove its border */
    .navbar-nav .nav-item.dropdown {
        margin-bottom: 0 !important; 
        padding-bottom: 0 !important;
        border-bottom: none !important; 
    }

    /* Apply styling and the custom chevron to the link text (a.nav-link) */
    .navbar-nav .nav-item .nav-link {
        color: #0A0B09;
        font-family: Roboto, sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 100%; 
        text-transform: capitalize;
        
        /* Layout FIX */
        display: flex !important;
        justify-content: space-between !important; 
        width: 100% !important;
        align-items: center; 
        min-height: 56px;
    }
    
    /* Add the custom chevron icon using a pseudo-element (Other nav items) */
    .navbar-nav .nav-item:not(.dropdown) .nav-link:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cpath d='M8.99612 6.84397C9.16722 7.03408 9.25277 7.25271 9.25277 7.49986C9.25277 7.74701 9.16722 7.96564 8.99612 8.15576L3.52083 13.631C3.33072 13.8021 3.11209 13.8877 2.86494 13.8877C2.61779 13.8877 2.39916 13.8021 2.20905 13.631C2.03794 13.4409 1.95239 13.2223 1.95239 12.9751C1.95239 12.728 2.03794 12.5094 2.20905 12.3193L7.05696 7.49986L2.20905 2.68047C2.03794 2.49036 1.95239 2.27173 1.95239 2.02458C1.95239 1.77743 2.03794 1.5588 2.20905 1.36868C2.39916 1.19758 2.61779 1.11203 2.86494 1.11203C3.11209 1.11203 3.33072 1.19758 3.52083 1.36868L8.99612 6.84397Z' fill='%23272E36'%3E%3C/path%3E%3C/svg%3E");
        display: inline-block;
        width: 10px;
        height: 15px;
    }
    
    /* --- C. REMOVE DESKTOP DROPDOWN FRAME ON MOBILE & ADD PADDING FIXES --- */
    
    .md-dropdown-menu {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        
        padding: 0 !important;
        margin-top: 0 !important;
        width: 100%;
        position: relative !important; 
        display: flex; 
    }
    
    /* FIX: Sub-menu item padding and border removal */
    .md-dropdown-menu .dropdown-item a {
        border-bottom: none !important; /* REMOVE INNER BORDERS */
        min-height: auto !important; 
        /* RESTORE 16px left padding for sub-menu items */
        padding: 14px 24px 14px 16px !important; 
    }
    
    /* FIX: Final custom link padding and border removal */
    .md-dropdown-menu > .md-subnavigation-link {
        border-bottom: none !important; /* REMOVE INNER BORDERS */
        min-height: auto !important;
        /* RESTORE 16px left padding for sub-menu items */
        padding: 14px 24px 14px 16px !important; 
    }
    .md-dropdown-menu .dropdown-item {
        padding: 0;
        margin: 0;
    }
    
    /* --- D. LOGO, HAMBURGER, AND PADDING ADJUSTMENTS --- */
    
    .navbar-brand img { width: 180px !important; }

    /* Hamburger Sizing FIX */
    .hamburger { padding: 12px !important; }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 32px !important; height: 4px !important; border-radius: 4px !important; }
    .hamburger-inner { margin-top: -2px !important; }
    
    /* Container Layout */
    .navbar-nav { padding-bottom: 24px; flex-direction: column !important; }
    
    /* Top Padding FIX (Software op maat) */
    .navbar-nav > li:first-child { border-top: none !important; padding-top: 24px; }
    
    /* Gap between last nav item (Vacatures) and button FIX */
    .navbar-nav .nav-item:last-of-type { margin-bottom: 24px !important; }

    /* Button Styling FIX */
    .md-contact-btn { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; display: block !important; }
    .navbar-nav > .md-contact-btn { display: block !important; }

    /* Hamburger Transformation and Color Fixes */
    .hamburger--vortex.is-active .hamburger-inner { transform: rotate(765deg) !important; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1) !important; }
    .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000 !important; }
    
    /* Vacatures Badge Spacing Fix */
    .navbar-nav .nav-item .nav-link .badge { margin-left: 6px; }

    /* --- E. SCRIM OVERLAY (FOR VISUALS ONLY) --- */
    .menu-backdrop { 
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4); 
        z-index: 1040; 
    }
}


/* ========================================================================= */
/* --- CASE STUDY CARD & BADGE STYLING --- */
/* ========================================================================= */

/* --- DESKTOP/GENERAL BADGE LAYOUT AND TYPOGRAPHY --- */

.md-case-panel-overlay {
    /* Set specific desktop padding */
    padding: 42px 54px; 
}

.md-badge {
    /* Layout Overrides */
    height: 32px; 
    padding: 8px 12px; 
    display: inline-flex; 
    align-items: center; 
    
    /* Visual Overrides */
    border-radius: 20px; 
    border: 2px solid; 
    
    /* Typography Overrides */
    color: #FFF; 
    font-family: Roboto, sans-serif;
    font-size: 14px; 
    line-height: 16px; 
    font-weight: 500; 
    
    /* Background Overrides */
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}

.md-badge-outline-light {
    /* Border Color Override */
    border-color: #FF0; 
}


/* --- MOBILE OVERRIDES (MAX-WIDTH 767PX) --- */

@media (max-width: 767px) {
    
    /* 1. Neutralize fixed spacing on the outer container */
    .md-case-panel-overlay {
        /* Set padding to 0 so it doesn't interfere with inner content margins/padding */
        padding: 0 !important;
    }

    /* 2. Apply spacing to the content wrapper */
    .md-overlay-content {
        left: 20px; 
        right: 20px; 
        padding-bottom: 20px; 
    }
    
    .md-badge {
        font-size: 14px; 
    }
}

/* --- INCREASE MAX-WIDTH CONSTRAINT (Desktop) --- */
.md-navbar .container-fluid {
    /* Set a wide max-width, well above the standard 1320px */
    max-width: 1440px !important; 
    
    /* Ensure there is always a minimum horizontal padding (e.g., 24px) */
    /* This overrides the default 1.5rem padding in container-fluid to ensure consistency */
    padding-left: 24px !important;
    padding-right: 24px !important;
    
    margin-left: auto;
    margin-right: auto;
}

/* Optional: If 1440px isn't enough, you can set it even larger. Example: */
/*
@media (min-width: 1600px) {
    .md-navbar .container-fluid {
        max-width: 1560px !important; 
    }
}
*/

/* --- PREVENT MENU ITEM WRAPPING --- */
.navbar-nav {
    /* Prevents the nav links from wrapping to the next line */
    flex-wrap: nowrap !important;
    
    /* Ensures the list items shrink slightly before forcing the collapse, if needed */
    flex-shrink: 0;
}