/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 12 2026 | 15:01:28 */
/* ============================================================
   1. DE WITTE BALK FIX (Simpel gehouden)
   ============================================================ */
html, body {
    margin-top: -3vw !important;
    padding-top: -3vw !important;
}

.wp-site-blocks, .wp-block-template-part {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
html { margin-top: 0 !important; }

/* ============================================================
   2. BASIS – TYPOGRAFIE & KLEUREN
   ============================================================ */
.wp-site-blocks { color: black; }
.wp-block-navigation__responsive-container-close { color: black !important; }

/* ============================================================
   3. LETTERTYPEN – VARIABLE FONTS
   ============================================================ */
@font-face {
    font-family: 'Montserrat';
    font-weight: 100 900;
    font-display: swap;
    src: url('/wp-content/themes/fotawp/assets/fonts/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Outfit';
    font-weight: 100 900;
    font-display: swap;
    src: url('/wp-content/themes/fotawp/assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
}

/* ============================================================
   4. LOGO ANIMATIE
   ============================================================ */
.custom-logo { animation: fade-in 1.2s ease-out both; }
@keyframes fade-in { 0% {opacity:0;} 100% {opacity:1;} }

/* ============================================================
   5. NAVIGATIE – DESKTOP
   ============================================================ */
.wp-block-navigation.items-justified-center { --navigation-layout-justify: left; }

nav.wp-block-navigation ul li a:hover {
    background:black;
    color:white !important;
    border-radius:50px;
    transition:0.25s;
}

.wp-block-navigation__submenu-icon {
    width:0.6em;
    height:0.6em;
    color:white;
}

/* ============================================================
   6. SUBMENU
   ============================================================ */
.wp-block-navigation__submenu-container {
    background:black !important;
    border:3px solid white;
    border-radius:20px;
}

.wp-block-navigation__submenu-container > .wp-block-navigation-item > a {
    background:white !important;
    color:black !important;
    padding:0.6em 1em;
    border-radius:8px;
}

/* ============================================================
   7. HAMBURGER MENU
   ============================================================ */
.wp-block-navigation__responsive-container-open { color:white !important; }

/* ============================================================
   8. KNOPPEN - BASIS & HOVER EFFECT (OVERAL EN Manueel)
   ============================================================ */
/* BASIS KNOP INSTELLINGEN */
.wp-block-button__link, 
.custom-glow-button {
    transition: all 0.4s ease-in-out !important;
    position: relative !important;
    overflow: visible !important; /* Nodig om de gloed te tonen */
}

/* DE HOVER EFFECTEN */
.wp-block-button__link:hover, 
.custom-glow-button:hover {
    background-color: #DADADB !important; 
    color: black !important;
    
    /* GECOMBINEERDE GLOED FIX: we dwingen de gloed om de 50px radius te volgen */
    -webkit-box-shadow: 0 0 25px 5px rgba(220, 220, 220, 0.7) !important;
    -moz-box-shadow: 0 0 25px 5px rgba(220, 220, 220, 0.7) !important;
    box-shadow: 0 0 25px 5px rgba(220, 220, 220, 0.7) !important;
    
    /* We dwingen ook de container om afgerond te zijn voor de gloed */
    border-radius: 50px !important;
    
    transform: translateY(-7.5px) !important;
    border-color: white !important;
}

/* Optioneel: Klik effect */
.wp-block-button__link:active, 
.custom-glow-button:active {
    transform: translateY(-2px) !important;
}

@media (max-width:900px) {
    .wp-block-button__width-50 { width:100% !important; }
}

/* ============================================================
   9. LIJSTSTIJLEN
   ============================================================ */
ul[class*="is-style-fotawp-list-style"] li::before {
    content:"";
    background:black;
    mask:url(../images/list_check.svg) center/contain no-repeat;
    width:16px; height:12px;
    position:absolute;
    left:0; top:50%;
    transform:translateY(-50%);
}

/* ============================================================
   10. FORMULIEREN
   ============================================================ */
div.wpforms-container-full input[type="submit"],
div.wpforms-container-full button[type="submit"] {
    background:black !important;
    border-radius:50px !important;
    color:white !important;
}

/* ============================================================
   11. COOKIE BUTTON
   ============================================================ */
.cky-btn-revisit-wrapper {
    width:45px; height:45px;
    border-radius:50%;
    background:darkgray;
    border:1px solid black;
    display:flex; justify-content:center; align-items:center;
}

/* ============================================================
   12. AOS ANIMATIES
   ============================================================ */
[data-aos="flip-up"].aos-animate {
    transform:perspective(2500px) rotateX(0);
    margin-top:70px;
}

/* ============================================================
   13. TABLET
   ============================================================ */
@media (max-width:1328px) {
    .wp-block-columns { flex-wrap:wrap; gap:1.5rem; }
    .wp-block-column { flex:1 1 calc(50% - 1rem); min-width:240px; }
}

/* ============================================================
   14. MOBIEL (FOCUS OP DE +6 FIX)
   ============================================================ */
@media (max-width:768px) {
    html, body { overflow-x:hidden; }

    header .is-layout-flex,
    header.wp-block-template-part > .wp-block-group,
    header .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    html, body {
        margin-top: -3.25vw !important;
        padding-top: -3.25vw !important;
    }

    .wp-block-site-logo { order: 1 !important; margin: 0 auto !important; }
    .wp-block-site-title { order: 2 !important; margin: 0 auto !important; text-align: center !important; }
    .wp-block-navigation { order: 3 !important; margin: 0 auto !important; }
    .gtranslate_wrapper { order: 4 !important; margin: 10px auto 0 auto !important; display: flex !important; justify-content: center !important; }

    .wp-block-columns {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem;
        width: 100% !important;
    }

    .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-left: 0.5em;
    }

    .wp-block-column > * {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    h1 { font-size:clamp(1.8rem,7vw,3rem); }
    h2 { font-size:clamp(1.4rem,5.5vw,2.2rem); }
    h3 { font-size:clamp(1.1rem,4.5vw,1.8rem); }
    p, li { font-size:clamp(1rem,4vw,1.15rem); line-height:1.7; }

    .wp-block-buttons { flex-wrap:wrap; gap:0.8rem; justify-content: center !important; }
    .wp-block-button__link { width:100%; padding:12px 20px; min-height:48px; }

    .wp-block-columns:has(.startupone-portfolio-box) {
        flex-wrap:wrap;
        gap:1rem;
    }
    .startupone-portfolio-box { width:100%; min-height:350px; border-radius:30px; }
}

/* ============================================================
   15. SMALL MOBILE
   ============================================================ */
@media (max-width:480px) {
    h1{font-size:clamp(1.4rem,8vw,2rem);}
    h2{font-size:clamp(1.2rem,6vw,1.6rem);}
    h3{font-size:clamp(1rem,5vw,1.3rem);}
    .startupone-portfolio-box { min-height:280px !important; }
}

span, p, h1, h2, h3 {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* ============================================================
   16. FIXES: GTRANSLATE & FOOTER ICONS
   ============================================================ */
.gtranslate_wrapper img, .gt_wrapper img {
    width: 24px !important;
    height: auto !important;
}

footer img, .wp-block-footer img {
    max-width: 150px !important;
    height: auto !important;
}

@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important; 
        margin-left: 0.5em;
    }
}

.wp-container-core-group-is-layout-0ded49ab > .alignwide {
    max-width: 400px; 
    text-size-adjust: 75%;
}

.has-x-large-font-size {
    font-size: 20px !important;
}