/*
 * Opmaak voor de vervangen ElementsKit PRO widgets (Phase 4c)
 *
 * Twee widgets bleken ElementsKit PRO en renderden helemaal niets:
 *   ekit-vertical-menu           (8x) -> wp-widget-nav_menu (WordPress kern)
 *   elementskit-creative-button (15x) -> button (Elementor Free)
 *
 * De kleuren en vormgeving hieronder zijn overgenomen uit de oorspronkelijke
 * widget-instellingen. Er is geen ElementsKit Pro code gekopieerd.
 */

/* ================================================================== *
 * 1. Verticaal categoriemenu (links op de Verkoop-subpagina's)
 *
 *    Origineel:
 *      container achtergrond : gradient #302A2B -> #231F20
 *      itemtekst             : #FFFFFF, Source Sans Pro 600
 * ================================================================== */
.vdw-vertical-menu {
    background: linear-gradient(180deg, #302A2B 0%, #231F20 100%);
    padding: 0;
}

.vdw-vertical-menu .menu,
.vdw-vertical-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vdw-vertical-menu li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.vdw-vertical-menu li:last-child {
    border-bottom: 0;
}

.vdw-vertical-menu li a {
    display: block;
    padding: 18px 24px;
    color: #FFFFFF;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}

.vdw-vertical-menu li a:hover,
.vdw-vertical-menu li a:focus-visible {
    background-color: #00AEEF;
    color: #FFFFFF;
    padding-left: 30px;
}

/* de pagina waar je nu bent, blauw gemarkeerd */
.vdw-vertical-menu li.current-menu-item > a,
.vdw-vertical-menu li.current_page_item > a {
    color: #00AEEF;
    box-shadow: inset 4px 0 0 0 #00AEEF;
}

.vdw-vertical-menu li.current-menu-item > a:hover,
.vdw-vertical-menu li.current_page_item > a:hover {
    color: #FFFFFF;
}

/* submenu's in dit blok inspringen in plaats van uitklappen */
.vdw-vertical-menu .sub-menu {
    padding-left: 0;
}

.vdw-vertical-menu .sub-menu a {
    padding-left: 40px;
    font-weight: 400;
    font-size: .95em;
}

/* een eventuele widgettitel verbergen (het origineel had er geen) */
.vdw-vertical-menu .widget-title,
.vdw-vertical-menu .widgettitle {
    display: none;
}

/* ================================================================== *
 * 2. Witte knop met blauwe rand (voorheen "creative button")
 *
 *    Origineel:
 *      tekst        #00AEEF      achtergrond  #FFFFFF
 *      rand         #00AEEF      hover        blauw vlak, witte tekst
 *      icoon        fas fa-bicycle
 *
 *    Het origineel schoof de blauwe vulling van links naar rechts in.
 *    Dat effect wordt hieronder benaderd met een pseudo-element.
 * ================================================================== */
.vdw-creative-btn .elementor-button {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.vdw-creative-btn .elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #00AEEF;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
    z-index: -1;
}

.vdw-creative-btn .elementor-button:hover::before,
.vdw-creative-btn .elementor-button:focus-visible::before {
    transform: scaleX(1);
}

/* zonder hover-ondersteuning of met bewegingsreductie: geen animatie */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .vdw-creative-btn .elementor-button::before {
        transition: none;
    }
}

.vdw-creative-btn .elementor-button-icon {
    color: inherit;
}

/* ================================================================== *
 * 3. Google Maps-insluiting op de contactpagina
 *
 *    Verving de google_maps-widget (die alleen op adres zocht) door de
 *    place-insluiting van het bedrijf zelf. De oorspronkelijke widget stond
 *    op saturate(0); die grijstint is hier behouden.
 * ================================================================== */
.vdw-map iframe {
    width: 100%;
    display: block;
    border: 0;
    filter: saturate(0);
    transition: filter 1.5s ease;
}

.vdw-map iframe:hover {
    filter: saturate(1);
}

@media (max-width: 767px) {
    .vdw-map iframe {
        height: 300px !important;
    }
}

/* ================================================================== *
 * 4. Zijmenu-kleuren AFGEDWONGEN
 *
 *    Op /accessoires/, /tweedehandsfietsen/, /kinderfietsen/ en /verkoop/
 *    bleef de menutekst blauw, terwijl dezelfde opmaak op /fietsen/,
 *    /onze-merken/ en /fietsverzekering/ wel goed viel.
 *
 *    Een vergelijking van die pagina's leverde geen verschil op in
 *    stylesheets, laadvolgorde, gegenereerde CSS, inline styles of HTML.
 *    De oorzaak is dus niet met zekerheid vastgesteld; daarom worden de
 *    kleuren hier hard afgedwongen met !important en een zeer specifieke
 *    selector, zodat het resultaat niet afhangt van wat er nog meer meekomt.
 *
 *    Regel: alle items wit, alleen de huidige pagina blauw.
 * ================================================================== */

/* --- 1. alle menu-items WIT --- */
.vdw-vertical-menu nav ul.menu li.menu-item > a,
.vdw-vertical-menu nav ul.menu li.menu-item > a:link,
.vdw-vertical-menu nav ul.menu li.menu-item > a:visited,
.vdw-vertical-menu ul.menu li.menu-item > a,
.vdw-vertical-menu .menu-item a,
.elementor-widget-wp-widget-nav_menu.vdw-vertical-menu .menu li a {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

/* --- 2. alleen de GESELECTEERDE pagina blauw --- */
.vdw-vertical-menu nav ul.menu li.current-menu-item > a,
.vdw-vertical-menu nav ul.menu li.current_page_item > a,
.vdw-vertical-menu ul.menu li.current-menu-item > a,
.vdw-vertical-menu ul.menu li.current_page_item > a,
.vdw-vertical-menu .menu-item.current-menu-item > a,
.vdw-vertical-menu .menu-item.current_page_item > a,
.elementor-widget-wp-widget-nav_menu.vdw-vertical-menu .menu li.current-menu-item a {
    color: #00AEEF !important;
    background-color: transparent !important;
    box-shadow: inset 4px 0 0 0 #00AEEF !important;
}

/* --- 3. hover: blauw vlak met witte tekst, ook op het actieve item --- */
.vdw-vertical-menu nav ul.menu li.menu-item > a:hover,
.vdw-vertical-menu nav ul.menu li.menu-item > a:focus-visible,
.vdw-vertical-menu ul.menu li.menu-item > a:hover,
.vdw-vertical-menu .menu-item a:hover,
.vdw-vertical-menu nav ul.menu li.current-menu-item > a:hover,
.vdw-vertical-menu nav ul.menu li.current_page_item > a:hover {
    color: #FFFFFF !important;
    background-color: #00AEEF !important;
}