/*
 Theme Name:   Blocksy Child
 Theme URI:    https://pdcreative.nl/
 Description:  Child theme voor PD Creative - Focus op kleine ondernemers
 Author:       PD Creative
 Author URI:   https://pdcreative.nl/
 Template:     blocksy
 Version:      1.0.0
 Text Domain:  blocksy-child
*/

/* ===========================================================
   1. FONT FACE – Poppins lokaal gehost
   =========================================================== */
@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/blocksy-child/fonts/poppins-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/blocksy-child/fonts/poppins-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===========================================================
   2. BASIS TEKST EN KOPPEN
   =========================================================== */
body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
}

p,
p * {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif !important;
    font-weight: 400;
    /* normaal gewicht */
    line-height: 1.6;
    /* mooi leesbaar */
    font-size: 1rem;
    /* basis grootte, kan aangepast worden */
}

.text-white {
    color: #fafafa;
}

:root {
    --fontFamily: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
}

/* Force Poppins in Blocksy header */
.ct-header,
.ct-header * {
    font-family: 'Poppins', system-ui, sans-serif !important;
}

/* ===========================================================
   3. SLIDE-UP ANIMATIES
   =========================================================== */
/* Beginpositie: onzichtbaar en 30px lager */
.slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    visibility: hidden;
}

/* Actieve positie: zichtbaar en op juiste plek */
.slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Extra vertraging voor tweede en derde kind */
.slide-up:nth-child(2) {
    transition-delay: 0.2s;
}

.slide-up:nth-child(3) {
    transition-delay: 0.4s;
}

/* Algemene delay-classes */
.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

/* ===========================================================
   4. BENTO-WRAPPER STYLING
   =========================================================== */
.bento-wrapper {
    position: relative;
    z-index: 1;
    padding: 40px;
    background: #192a3d;
    overflow: hidden;
}

.bento-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(2, 62, 255, 0.5) 0%, rgba(2, 62, 255, 0.2) 40%, rgba(2, 62, 255, 0) 100%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
    animation: bentoGlow 12s infinite alternate ease-in-out;
}

@keyframes bentoGlow {
    0% {
        transform: translate(-65%, -45%) scale(1);
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-35%, -55%) scale(1.3);
        opacity: 0.8;
    }
}

/* Bento-box styling */
.bento-wrapper .uagb-container,
.bento-wrapper .wp-block-column {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
}

/* ===========================================================
   5. MENU – Poppins + Hover Lift + Custom Underline
   =========================================================== */
.ct-menu-link {
    display: inline-block;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.03em;

    /* TRANSITIONS */
    transition:
        transform 0.5s ease,
        opacity 0.5s ease,
        background-size 0.45s cubic-bezier(.4, 0, .2, 1);

    /* CUSTOM UNDERLINE */
    background-image: linear-gradient(#023EFF, #023EFF);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 0% 2px;
    /* start breedte */
}

/* Hover lift */
.ct-menu-link:hover {
    transform: translateY(-6px);
    opacity: 0.85;
    letter-spacing: 0.02em;
}

/* Active/current blijft gelift */
.menu-item.current-menu-item>.ct-menu-link,
.menu-item.current_page_item>.ct-menu-link {
    transform: translateY(-6px);
    opacity: 0.9;
    letter-spacing: 0.02em;
}

/* Hover / Active: underline groeit naar 75% van de link */
.ct-menu-link:hover,
.menu-item.current-menu-item>.ct-menu-link,
.menu-item.current_page_item>.ct-menu-link {
    background-size: 75% 2px;
}

/* Eventueel offset voor extra styling */
.ct-menu-link::after {
    transform: translateY(6px);
}

/* ===========================================================
   FLUENT FORMS – Poppins FONT CONSISTENTIE
   -----------------------------------------------------------
   Doel:
   - Alle formulieren gebruiken Poppins
   - Velden, labels, placeholders, buttons consistent
   - Past bij het Blocksy-child theme styling
   =========================================================== */

/* 1. Basis font voor het hele formulier */
.fluentform,
.fluentform * {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif !important;
}

/* 2. Formulier labels */
.fluentform label {
    font-weight: 500;
    /* consistent met menu links */
    font-size: 0.95rem;
}

/* 3. Inputvelden, textareas en select */
.fluentform input,
.fluentform textarea,
.fluentform select {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400;
    font-size: 0.95rem;
}

/* 4. Placeholder tekst (invoer hints) */
.fluentform input::placeholder,
.fluentform textarea::placeholder,
.fluentform select::placeholder {
    font-family: 'Poppins', sans-serif !important;
    opacity: 0.7;
    /* subtieler dan gewone tekst */
}

/* 5. Knoppen */
.fluentform button,
.fluentform input[type="submit"] {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
}

/* 6. Focus state styling (optioneel: visueel passend bij menu) */
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
    outline: 2px solid #023EFF;
    /* accentkleur van je menu */
    outline-offset: 2px;
}

/* 7. Validatie en foutmeldingen (optioneel) */
.fluentform .ff-el-form-message {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500;
    font-size: 0.9rem;
}