/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme.
Version: 1.0
Author: Kriesi
Template: enfold
*/

/* ==========================================================
   DE HORIZON – LOGO SCALING – DESKTOP ONLY
   ========================================================== */

/* Logo mag buiten container steken */
#top .logo,
#top .logo a {
    overflow: visible;
}

/* GROTER LOGO – ALLEEN OP BREEDBEELD DESKTOPS */
@media only screen and (min-width: 1025px) and (min-height: 150px) {
    .logo img {
        height: 150%;
        max-height: 200px !important;
        padding-left: 10px !important;
    }
}

/* ==========================================================
   DE HORIZON – MENU STYLING
   ========================================================== */

/* ----------------------------------------------------------
   1. HOOFDMENU – BASIS
   ---------------------------------------------------------- */

/* LI mag geen extra ruimte of achtergrond duwen */
#top .av-main-nav > li {
    background: transparent !important;
}

/* Links hoofdmenu */
#top .av-main-nav > li > a {
    /* TYPE */
    color: #9AF22F !important;
    font-family: "Open Sans Condensed", Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    text-transform: none !important;

    /* BEHAVIOR */
    background: transparent !important;  /* voorkomt verspringen */
    transition: color 0.15s ease;
}

/* ----------------------------------------------------------
   2. HOOFDMENU – HOVER / ACTIEF
   ---------------------------------------------------------- */

/* Hover: alleen tekstkleur */
#top .av-main-nav > li:hover > a {
    color: #232323 !important;
}

/* Actieve status tekstkleur */
#top .av-main-nav > li.current-menu-item > a,
#top .av-main-nav > li.current_page_item > a,
#top .av-main-nav > li.current-menu-ancestor > a {
    color: #232323 !important;
}

/* Underline bij actief item */
#top .av-main-nav > li.current-menu-item > a:after,
#top .av-main-nav > li.current_page_item > a:after,
#top .av-main-nav > li.current-menu-ancestor > a:after {
    content: "";
    background-color: #232323;
    border-radius: 2px;
}

/* ----------------------------------------------------------
   3. SUBMENU – BASIS + HOVER
   ---------------------------------------------------------- */

#top .av-main-nav ul.sub-menu {
    background: #FFFFFF !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Submenu links */
#top .av-main-nav ul.sub-menu li a {
    /* TYPE */
    color: #232323 !important;
    font-family: "Open Sans Condensed", Arial, sans-serif !important;
    font-size: 18px !important;
    text-transform: none !important;

    /* BOX */
    background: #FFFFFF !important;

    /* BEHAVIOR */
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Submenu hover */
#top .av-main-nav ul.sub-menu li a:hover {
    background-color: #9AF22F !important;
    color: #232323 !important;
}

/* ----------------------------------------------------------
   5. RESPONSIVE – TABLET
   ---------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    #top .av-main-nav > li > a {
        font-size: 24px !important;
        padding: 10px 18px !important;
    }

    #top .av-main-nav ul.sub-menu li a {
        font-size: 20px !important;
        padding: 9px 16px !important;
    }

    /* Laatste item ook hier strak tot rand */
    #top .av-main-nav > li:last-child > a {
        padding-right: 0 !important;
    }
}

/* ----------------------------------------------------------
   6. RESPONSIVE – BURGER MENU
   ---------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    #top .av-main-nav > li > a {
        font-size: 20px !important;
        padding: 10px 16px !important;
    }

    #top .av-main-nav ul.sub-menu li a {
        font-size: 18px !important;
        padding: 9px 14px !important;
    }

    /* Underline iets subtieler op mobiel */
    #top .av-main-nav > li.current-menu-item > a:after,
    #top .av-main-nav > li.current_page_item > a:after,
    #top .av-main-nav > li.current-menu-ancestor > a:after {
        bottom: -2px;
        height: 2px;
    }
}

/* ----------------------------------------------------------
   DE HORIZON - BURGER MENU - UITLIJNING VERTICAAL
   ---------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    .av-hamburger.av-hamburger--spin.av-js-hamburger {
        transform: translateY(-12px) !important;   /* naar boven */
    }
}

/* ==========================================================
   DE HORIZON – STANDAARD ENFOLD KNOPPEN (AVIA BUTTON)
   ========================================================== */

/* Basisstijl */
.avia-button,
a.avia-button {
    font-family: "Open Sans Condensed", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;          /* vet */
    text-transform: none !important;       /* geen kapitalen */
    border-radius: 15px !important;        /* afgeronde hoeken */
}

/* ==========================================================
   DE HORIZON – FORMULIERKNOPPEN
   ========================================================== */

.main_color input[type='submit'],
.main_color button[type='submit'] {
    /* KLEUREN */
    background-color: #99F22F !important;
    border: 2px solid #99F22F !important;
    color: #333333 !important;

    /* TYPE */
    font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;

    /* HOEKEN & RUIMTE */
    border-radius: 15px !important;
    padding: 10px !important;   /* <-- gelijk aan jouw andere buttons */
    line-height: 1.2 !important;
    box-sizing: border-box;

    /* EFFECTS */
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

/* HOVER */
.main_color input[type='submit']:hover,
.main_color button[type='submit']:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* ==========================================================
   DE HORIZON - SCROLL BUTTON RECHTSONDER
   ========================================================== */

/* BASIS */
#scroll-top-link {
    /* BOX */
    background-color: #99F22F;
    opacity: 1 !important;

    /* TYPE */
    font-size: 20px !important;
    color: #333333 !important;

    /* RESET */
    border-radius: 0 !important;     /* voorkomt rond worden */
	line-height: 1 !important;        /* voorkomt icon-baseline gedoe */

    /* EFFECTS */
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* HOVER */
#scroll-top-link:hover {
    background-color: #ffffff;
    color: #333333 !important;
    opacity: 1 !important;
}

/* ==========================================================
   DE HORIZON – HERO | CONTENTBOX TITEL EN SUBTITEL
   ========================================================== */

/* BASIS (DESKTOP / GROTE SCHERMEN) */
.dehorizon-title {
    /* TYPE */
    color: #FFF !important;
    font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif !important;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.6px;

    /* BOX */
    margin: 0 !important;
    padding: 0 !important;

    /* BEHAVIOR */
    white-space: normal;          /* desktop: mag breken als het moet */
    overflow-wrap: anywhere;      /* voorkomt uit-beeld lopen */
}

/* SUBTITEL */
.dehorizon-subtitle {
    /* TYPE */
    color: #FFF !important;
    font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif !important;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.3px;

    /* BOX */
    margin: -22px 0 0 0 !important;
    padding: 0 !important;

    /* BEHAVIOR */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* TABLET (iPad staand/liggend) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .dehorizon-title {
        font-size: 30px !important;
        letter-spacing: 0.4px;

        /* BEHAVIOR */
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dehorizon-subtitle {
        font-size: 18px !important;
        margin: -18px 0 0 0 !important;

        /* BEHAVIOR */
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* MOBIEL (telefoons) */
@media only screen and (max-width: 767px) {

    .dehorizon-title {
        font-size: 22px !important;
        letter-spacing: 0.2px;

        /* BEHAVIOR */
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dehorizon-subtitle {
        font-size: 16px !important;
        margin: -12px 0 0 0 !important;

        /* BEHAVIOR */
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ==========================================================
   DE HORIZON – YOUTUBE THUMB + LIGHTBOX AUTOPLAY
   ENFOLD-SAFE DEFINITIEF:
   - thumbnail blijft altijd zichtbaar
   - 1 play-icoon (jij)
   - geen dubbele Enfold play bij hover
   - geen wit/vaal hover-effect
   ----------------------------------------------------------
   Gebruik:
   - Class "dehorizon-video-thumb" op het Image-element.
   - Link naar: https://www.youtube.com/embed/VIDEO-ID?autoplay=1
   - Open in lightbox.
   ========================================================== */

/* ----------------------------------------------------------
   1) BASIS: THUMB-CONTAINER
   ---------------------------------------------------------- */

.dehorizon-video-thumb {
    position: relative !important;
    display: inline-block !important;
}

/* Enfold zet class soms op avia-image-container, ook goed */
.dehorizon-video-thumb .avia-image-container,
.avia-image-container.dehorizon-video-thumb {
    position: relative !important;
    display: block !important;
}

/* Link rond de afbeelding */
.dehorizon-video-thumb a,
.dehorizon-video-thumb .avia-image-container a,
.avia-image-container.dehorizon-video-thumb a {
    position: relative !important;
    display: block !important;
}

/* ----------------------------------------------------------
   2) ENFOLD HOVER “WIT/VAAL” UIT (ALLEEN IMG)
   ---------------------------------------------------------- */

/* Normaal */
.dehorizon-video-thumb img,
.dehorizon-video-thumb .avia-image-container img {
    opacity: 1 !important;
    filter: none !important;
}

/* Hover */
.dehorizon-video-thumb:hover img,
.dehorizon-video-thumb .avia-image-container:hover img {
    opacity: 1 !important;
    filter: none !important;
}

/* ----------------------------------------------------------
   3) JOUW PLAY-OVERLAY (cirkel + driehoek)
   ---------------------------------------------------------- */

/* Cirkel */
.dehorizon-video-thumb a:after,
.dehorizon-video-thumb .avia-image-container a:after,
.avia-image-container.dehorizon-video-thumb a:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86px;
    height: 86px;
    margin-left: -43px;
    margin-top: -43px;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    z-index: 999;
    pointer-events: none;
}

/* Play-driehoek */
.dehorizon-video-thumb a:before,
.dehorizon-video-thumb .avia-image-container a:before,
.avia-image-container.dehorizon-video-thumb a:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-32%, -50%);
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 24px solid #FFFFFF;
    z-index: 1000;
    pointer-events: none;
}

/* Hover: alleen jouw cirkel donkerder */
.dehorizon-video-thumb a:hover:after,
.dehorizon-video-thumb .avia-image-container a:hover:after,
.avia-image-container.dehorizon-video-thumb a:hover:after {
    background: rgba(0,0,0,0.65);
}

/* ----------------------------------------------------------
   4) ENFOLD EXTRA PLAY-ICOON UIT
   (ALLEEN HET ICOON, GEEN WRAPPERS!)
   ---------------------------------------------------------- */

.dehorizon-video-thumb .avia_play_icon,
.dehorizon-video-thumb .av-overlay-icon,
.dehorizon-video-thumb i.avia_play_icon,
.dehorizon-video-thumb span.avia_play_icon {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ==========================================================
   LAUWERSLAB – GLOBAL: DISABLE ALL ANIMATIONS & TRANSITIONS
   (Superkort – Enfold-safe)
   ========================================================== */

/* 1) Alle CSS-animaties/transitions uitschakelen */
* {
    animation: none !important;
    transition: none !important;
}

/* 2) Enfold animatieklassen uitschakelen */
.avia_animate_when_visible,
.avia_animate_when_almost_visible,
.avia_start_animation,
.avia_start_delayed_animation,
.avia-animate,
.avia_animated,
.avia_transform3d,
[data-avia-animation],
[class*="av-animation-"],
[class*="av-fade"],
[class*="av-slide"],
[class*="av-zoom"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.js_active .av-minimum-height .container {
    transition: none !important;
    opacity: 1;
}