/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*
*{outline:1px dotted grey}
*/

.site-content{height:100vh}
.content-area{display:none}

/* ************************************************** */
/* settings */
img{display:block}
video{display:block;height:auto !important;width:100% !important}
svg{display:block;max-height:100%;max-width:100%}

/* ************************************************** */
/* body */
body{padding-top:80px}


/* ************************************************** */
/* site-header*/
.site-header{left:0;position:fixed;top:0;right:0;z-index:999}
.site-header .site-logo img{height:50px;width:auto}


.site-header .main-nav .c2a{background:var(--accent);border-radius:10px}
.site-header .main-nav .c2a:hover{background:#d1b089}
.site-header .main-nav .c2a a{color:var(--base-3) !important}
.site-header .main-nav .c2a a:hover{color:var(--base-3) !important}


/* ************************************************** */
/* off-canvas panel */
.slideout-navigation .main-nav{order:2}
.slideout-navigation .slideout-widget.widget_media_image{order:1}



.slideout-navigation .main-nav .c2a{background:var(--accent)}
.slideout-navigation .main-nav .c2a:hover{background:#d1b089}
.slideout-navigation .main-nav .c2a a{color:var(--base-3) !important}
.slideout-navigation .main-nav .c2a a:hover{color:var(--base-3) !important}

.slideout-navigation .lang-item{margin-top:60px}

/* ************************************************** */
/* hero img */

/* --- Basis hero structuur --- */
.featured-hero .page-hero {
    background:#000;
    height:0;
    margin:0 auto;
    padding-top:32%;
    position:relative;
    width:100%;
}
@media all and (max-width:600px) {
    .featured-hero .page-hero { padding-top:120%; }
}
@media all and (min-width:601px) and (max-width:1200px) {
    .featured-hero .page-hero { padding-top:50%; }
}
@media all and (min-width:1201px) and (max-width:1600px) {
    .featured-hero .page-hero { padding-top:40%; }
}
@media all and (min-width:1601px) {
    .featured-hero .page-hero { padding-top:25%; }
    .featured-hero .page-hero-vid { padding-top:32%; }
}

/* --- Video achtergrond --- */
.featured-hero .page-hero .vid-hero video {
    animation:hero-image-fade-in 2s ease-out forwards;
    bottom:0; left:0; right:0; top:0;
    position:absolute;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    object-position:center center;
    opacity:0;
}
@keyframes hero-image-fade-in {
    0% {opacity:0;visibility:hidden}
    100% {opacity:1;visibility:visible}
}
.featured-hero .page-hero .vid-hero::after {
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    background:#000;
    opacity:.6;
    z-index:9;
}

/* --- Content container --- */
.page-hero-content {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    text-align:center;
    padding:0 20px;
}

/* --- Binnenste content (titel + knoppen) --- */
.page-hero-inner {
    animation:hero-title-fade-in 2s ease-out forwards 1s;
    visibility:hidden;
}
@keyframes hero-title-fade-in {
    0% {opacity:0;visibility:hidden}
    100% {opacity:1;visibility:visible}
}
.page-hero-inner h1 {
    color:#fff;
    font:900 32px/1.1 'Gill Sans', sans-serif;
    text-transform:uppercase;
    margin:0 0 90px 0;
}
@media all and (max-width:600px) {
    .page-hero-inner h1 { font-size:5.5vw;margin:0 0 30px 0 }
}
@media all and (min-width:601px) and (max-width:1200px) {
    .page-hero-inner h1 { font-size:4vw; }
}
@media all and (min-width:1201px) {
    .page-hero-inner h1 { font-size:2vw; }
}

/* --- Hero knoppen --- */
.hero-buttons {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}



.hero-btn {
    display:inline-block;
    padding:25px;
    border-radius:10px;
    text-decoration:none;
    transition:all .3s ease;
    width:300px;
    font-size:1.2em
}
.hero-btn-primary {
    background:#ffada5;
    color:#fff;
}
.hero-btn-primary:hover {
    background:#d1b089;
}
.hero-btn-secondary {
    background:#f00b35;
    color:#fff;
}
.hero-btn-secondary:hover {
    background:#d1b089;
}

@media (max-width:600px) {
    .hero-buttons { flex-direction:column; align-items:center }
    .hero-btn {font-size:1.1em;padding:15px;width:250px}
}
















/* ************************************************** */
/* usp bar */

.usp-bar {
    width: 100%;
    padding: 2rem 0;
    background-color: #ffada5;
}

.usp-bar-inner {
   display: grid;
    max-width: 1600px;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr); /* 4 kolommen desktop */
    gap: 2rem; /* ruimte tussen kolommen */
    text-align: center;
}

.usp-item {
   display: flex;
    flex-direction: column;
    align-items: center;
    /*
    opacity: 0;          /* start onzichtbaar */
    /*
    transform: translateY(20px); /* start iets naar beneden */
    /*
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    */
}

/* Wanneer 'visible' class wordt toegevoegd (door JS of handmatig) */
/*
.usp-item.visible {
    opacity: 1;
    transform: translateY(0);
}
*/

.usp-counter {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent);
}

.usp-label {
    font-size: 2rem;
    color: #fff;
    margin-top: 0.5rem;
}

/* responsive breakpoints */
@media (max-width: 1024px) {
    .usp-bar-inner {
        grid-template-columns: repeat(2, 1fr); /* tablet 2x2 */
    }
}

@media (max-width: 600px) {
    .usp-bar-inner {
        grid-template-columns: 1fr; /* mobiel 4x1 */
    }
}