/*
Theme Name: Hal2
Theme URI: undefined
Author: Jeroen Braspenning
Description: Wordpress theme for Hal2
Version: 0.0.1
License: MIT
License URI: undefined
*/

.nav-primary {display: flex; gap: 32px; list-style: none; padding: 0; height:56px; justify-content: center; align-items: center;}

.nav-primary__item {position: relative;}
.nav-primary__item a{font-weight: 400; font-size: 18px; line-height: 23px; letter-spacing: -1.5%; text-decoration: none;}
.nav-dropdown {display: none; position: absolute; top: 100%; left: 0; background: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); list-style: none; padding: 16px; min-width: 200px; z-index: 10;}
.nav-primary__item.has-dropdown:hover .nav-dropdown {display: block;}
.nav-dropdown__item {margin-bottom: 8px;}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: currentColor;
}

.main-navigation {
    display: block; /* Of flex, afhankelijk van je huidige styling */
}
.nav-close {
    display: none;
}

.video-header{position: relative; height: calc(100vh - 56px); overflow: hidden;}
.video-header video{width: 100%; height: calc(100vh - 56px); object-fit: cover; object-position: center center;}

.123home .about-intro__header__overlay{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:430px; max-width: 85%; color:white; text-align: center;}
.home .about-intro__header__overlay h1{font-size:80px; margin-bottom: 12px; display:block!important;}
.home .about-intro__header__overlay p{display:block!important;}
.home .about-intro{background:transparent !important;}

.header-logo{top:50px;}
.home .header-logo a{color:#ffffff;}
.home-intro{}
.home-intro .home-intro__paragraph{width:636px; max-width:85vw; margin:0 auto; text-align: center;}
.home-intro .home-intro__keywords{gap:8px; display: flex; width:468px; max-width: 85vw; flex-wrap: wrap; justify-content: center;}
.home-intro .home-intro__keywords .keyword-tag{background: #EBEBEB; padding:10px 20px;}
.home-intro .home-intro__cta{text-align: center;}
.home-intro .home-intro__cta .cta-text{margin-bottom:12px;}

.home-profile__text__inner h2{font-size: max(50px, min(4.3vw, 62px)) !important; max-width:85%;}

.home .stories-section .content-grid__body{grid-template-columns: repeat(2, 1fr);}
.home .stories-section .content-card__cover{grid-template-columns: repeat(2, 1fr);}
.home .stories-section .content-card__cover figure {width: 100%; overflow: hidden;}
.home .stories-section .content-card__cover figure img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
.home .stories-section .content-card__label{position: absolute; top:12px; left:12px; background:#000000; box-shadow: 0px 1px 8px 0px #0000001A; color:#ECEB02; border-radius:7px; font-size:17px; line-height:22px; padding:10px 16px; }
.home .stories-section .content-card__label span:first-child{display: inline-block}
.home .stories-section .content-card__label span{display: none;}


.portfolio-section{}
.portfolio-section .portfolio-section__header h2{font-size:62px; margin-left: var(--cnt-margin);}
.portfolio-section .portfolio-section__header a{margin-right: var(--cnt-margin);}

.content-card--project{}
.content-card--project .content-card__cover{}

.button--orange{color:#7B2335; background-color: #FD5626; border-radius: 7px; padding:11px 16px; font-size: 17px; justify-content: center;}
.arrow-button{background: yellow; z-index: 10; position: absolute; bottom: 12px; right: 12px; width: 40px; height: 40px; text-align: center; border-radius: 7px;}
.arrow-button svg{position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%);}

.page-header--full .page-header__inner{flex-direction:column;}

.page-header--full .page-header__inner p{font-size:27px; line-height:32px;}

.page-template-template-design-build .page-header--full .page-header__inner p{color:#7B2335;}

.menu-toggle .menu-toggle__label{width:15ch;}
.menu-panel{padding:64px 120px;}
.menu-panel .contact-block{margin-bottom:50px;}
.menu-panel .menu-panel__inner{display: flex; justify-content: space-between;}
.menu-panel .contact-label{font-size:18px; line-height: 21px; display:block;}
.menu-panel .contact-link{font-size:48px; line-height:62px; font-weight:500; display:block;}
.menu-panel .contact-address{font-size:48px; line-height:62px; font-weight:500; display:block;}
.menu-panel .contact-route-link{font-size:48px; line-height:62px; font-weight:500; display:block; text-decoration: underline !important;}
.menu-panel .contact-overlay__team{display: flex; gap:12px;} 
.menu-panel .contact-overlay__team .team-card .team-card__image{width:285px; height:363px; overflow:hidden;}
.menu-panel .contact-overlay__team .team-card .team-card__image figure{width: 100%; height: 100%; margin: 0;}
.menu-panel .contact-overlay__team .team-card .team-card__image figure img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.menu-panel .contact-overlay__team .team-card .team-card__info {font-size:14px; line-height:16px;}
.menu-panel .contact-overlay__team .team-card .team-card__info .team-card__role{opacity: 50%;}

.footer__cta .button{display:inline-block;}
.tooltip.js-tooltip{display:none !important;}

.js-main-nav-toggle.menu-toggle{padding: 13px 20px 14px;}

.footer__image--left {position:absolute; left:0; top:32px; width:300px;}
.footer__image--left img {width:300px;}
.footer__image--right {position:absolute; right:0; bottom:64px; width:300px;}
.footer__image--right img{width:300px;}

.certifications{grid-column: -1; justify-self: end; text-align: right;}
.certifications .certifications-list{display:flex; gap:16px; flex-direction: row; justify-content: end; width: 320px; flex-wrap: wrap; }
.certifications .certifications-list .certifications-list__item{border-radius: 8px; display:inline; border-width: 1px; padding: 8px; border-style: dashed;}

.sentences-highlighter .sentences-highlighter__list{gap:.5rem}
.sentences-highlighter .sentences-highlighter__list li p{font-size: 18px; margin-top: 5px; letter-spacing: -0.27px;}

.accordion-card__inner p:last-child{margin-top:15px;}

.page-section.extra-content .design-footer{padding-top: 0; padding-bottom: 0;}
.page-section.extra-content .design-footer__title{width: 800px; margin: 0 auto; max-width: 100%;}
.page-section.extra-content h2{margin-bottom:1em;}
.page-section.extra-content p{margin-bottom:15px;}

.about-team h2{font-size: 12.5rem; text-align: center; margin-top: 9.75rem; margin-bottom: 9.75rem;}
.about-team .team-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px;}
.about-team .team-grid .team-card__image {aspect-ratio: 500 / 625; overflow: hidden; position: relative;}
.about-team .team-grid .team-card__image img {width: 100%; height: 100%; object-fit: cover; object-position: center;}


@media (max-width: 991px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	
	.mobile-menu-toggle {
        display: block;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: #ECEB02; 
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 100; 
    }


    .main-navigation.is-open {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Zet de links onder elkaar */
    .nav-primary {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
	
	.nav-close {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
        color: currentColor;
    }

    /* Zorg dat de links niet over het kruisje vallen */
    .main-navigation {
        padding-top: 60px; /* Geeft ruimte aan de bovenkant voor de sluitknop */
    }

	.menu-panel {padding:32px; display:block;}

	.menu-panel .menu-panel__inner {
		justify-content: center;
		flex-direction: column;
	}
	
	.menu-panel .contact-overlay__team{flex-direction:column;}
}

@media (max-width: 767px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}