/* ============================================================================
   DMVD — Visuele polish (CSS-only)
   Toegankelijkheid, hover/micro-interacties, formulier-focus, cookie-harmonisatie.
   Huisstijl & content ongewijzigd. Geïsoleerd bestand; verwijderen = volledig terug.
   Palet: diepblauw #131d6c / #031c68 · navy #061428 · accentgeel #e3de53
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Toegankelijkheid — zichtbare toetsenbord-focus
   Accentgeel is zichtbaar op zowel donkere (blauwe) als lichte (crème) secties.
   :focus-visible => alleen voor toetsenbord/AT, niet voor muisklikken.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
    outline: 3px solid #e3de53;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Muisgebruikers krijgen geen outline (alleen toetsenbordnavigatie) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.elementor-button:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------------------
   2. Knoppen — soepele hover met subtiele lift
   --------------------------------------------------------------------------- */
.elementor-button {
    transition: transform .18s ease, box-shadow .18s ease,
                background-color .18s ease, color .18s ease, filter .18s ease;
}
.elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(6, 20, 40, .18);
}
.elementor-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(6, 20, 40, .15);
}

/* ---------------------------------------------------------------------------
   3. Case-cards — lift + schaduw bij hover
   --------------------------------------------------------------------------- */
.case-card {
    transition: transform .25s ease, box-shadow .25s ease;
}
.case-card:hover,
.inner-box:hover .case-card {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(6, 20, 40, .22);
}

/* ---------------------------------------------------------------------------
   4. Tekstlinks — subtiele kleurtransitie
   --------------------------------------------------------------------------- */
a {
    transition: color .15s ease, opacity .15s ease;
}

/* ---------------------------------------------------------------------------
   5. Formuliervelden (Gravity Forms) — nette focus-ring in huisstijl
   --------------------------------------------------------------------------- */
.gform_wrapper input:not([type=submit]):not([type=button]):focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    outline: none;
    border-color: #131d6c;
    box-shadow: 0 0 0 3px rgba(19, 29, 108, .15);
}

/* ---------------------------------------------------------------------------
   6. Cookiebot — lichte harmonisatie met de huisstijl (gedrag ongewijzigd)
   Voor écht "minder opdringerig": zet in het Cookiebot-dashboard de layout
   op een onderbalk i.p.v. centrale popup.
   --------------------------------------------------------------------------- */
#CybotCookiebotDialog {
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(6, 20, 40, .28) !important;
    overflow: hidden;
}
/* Primaire "accepteren"-knop in het accentgeel van de huisstijl */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonAccept {
    transition: transform .15s ease, filter .15s ease;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialogBodyButtonAccept:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* ---------------------------------------------------------------------------
   8. Klant-logobalk (image-carousel) — gelijkmatige logo-hoogtes
   Logo's varieerden van 50–106px; max-height brengt ze in balans zonder
   kleine logo's op te blazen. Alleen binnen de carousel, dus veilig gescoped.
   --------------------------------------------------------------------------- */
.elementor-widget-image-carousel .swiper-slide img,
.elementor-widget-image-carousel .slick-slide img,
.elementor-widget-image-carousel figure img {
    max-height: 58px;
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   9. Respecteer 'prefers-reduced-motion'
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .elementor-button,
    .case-card,
    a,
    #CybotCookiebotDialogBodyButtonAccept {
        transition: none;
    }
    .elementor-button:hover,
    .case-card:hover,
    .inner-box:hover .case-card {
        transform: none;
    }
}