/**
 * UX Vantage Pro — polish layer (Defendere LLC standards, CSS-only).
 * Focus-visible, micro-feedback, hero entrance, restrained texture. Geen Lenis/GSAP;
 * respecteert prefers-reduced-motion.
 */

:root {
    --dce-focus-ring: rgba(13, 148, 136, 0.4);
    --dce-focus-ring-strong: rgba(13, 148, 136, 0.9);
    --dce-focus-offset: 3px;
    --dce-press-scale: 0.98;
}

/* ——— Hero: subtiele filmgrain + diepte ——— */
.dce-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image: repeating-linear-gradient(
        -18deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.04) 2px,
        rgba(255, 255, 255, 0.04) 3px
    );
}

.dce-hero__inner {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .dce-hero::after {
        opacity: 0.15;
    }
}

/* ——— Hero: gestaggerde entrance (alleen als motion OK) ——— */
@keyframes dce-vantage-raise {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .dce-hero__title {
        animation: dce-vantage-raise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .dce-hero__sub {
        animation: dce-vantage-raise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.09s both;
    }

    .dce-hero__actions {
        animation: dce-vantage-raise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
    }
}

/* ——— Knoppen: keyboard-focus duidelijk; active = lichte “haptic” schaal ——— */
.dce-btn {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background var(--dce-fast) var(--dce-ease),
        color var(--dce-fast) var(--dce-ease), border-color var(--dce-fast) var(--dce-ease),
        box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.dce-btn:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: var(--dce-focus-offset);
    box-shadow: 0 0 0 4px var(--dce-focus-ring);
}

.dce-hero .dce-btn--primary:focus-visible {
    outline-color: var(--dce-accent-ink);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45), 0 0 0 6px rgba(12, 18, 34, 0.45);
}

.dce-hero .dce-btn--ghost:focus-visible {
    outline-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
    .dce-btn:active {
        transform: scale(var(--dce-press-scale));
    }
}

/* ——— Primaire navigatie + logo: focus-visible ring ——— */
.site-header .site-nav a:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: var(--dce-focus-offset);
    border-radius: 8px;
}

.site-header .site-nav a:focus:not(:focus-visible) {
    outline: none;
}

.site-title a:focus-visible,
.custom-logo-link:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: 4px;
    border-radius: 8px;
}

.site-title a:focus:not(:focus-visible),
.custom-logo-link:focus:not(:focus-visible) {
    outline: none;
}

/* ——— Mobile menu toggle ——— */
.dce-nav-toggle:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--dce-focus-ring);
}

/* ——— Flyout submenu links ——— */
.site-nav .sub-menu .menu-item a:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: -2px;
}

/* ——— Footer ——— */
.site-footer__menu a:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: 4px;
    border-radius: 6px;
}

.site-footer__menu a:focus:not(:focus-visible) {
    outline: none;
}

.site-footer__agency-link:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ——— Skip link: bestaande focus + ring ——— */
.skip-link:focus {
    outline: 3px solid var(--dce-focus-ring-strong);
    outline-offset: 2px;
}

/* ——— Paginatie ——— */
.pagination a:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: 2px;
}

/* ——— Blog excerpt cards: lichte lift (geen layout-shift op mobiel) ——— */
@media (min-width: 600px) {
    .dce-entry--excerpt {
        transition: border-color var(--dce-fast) var(--dce-ease), box-shadow var(--dce-fast) var(--dce-ease),
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dce-entry--excerpt:hover {
        border-color: color-mix(in srgb, var(--dce-primary) 22%, var(--dce-line));
        box-shadow: 0 22px 52px rgba(15, 23, 42, 0.1);
    }

    @media (prefers-reduced-motion: no-preference) {
        .dce-entry--excerpt:hover {
            transform: translateY(-2px);
        }
    }
}

.dce-entry--excerpt .entry-title a:focus-visible,
.read-more a:focus-visible {
    outline: 2px solid var(--dce-focus-ring-strong);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ——— Grovere pointers: iets ruimere tap targets op primary links ——— */
@media (pointer: coarse) {
    .site-nav__list > .menu-item > a,
    .site-nav__list > li > a {
        min-height: 44px;
        padding-inline: 0.5rem;
    }
}