/* ========================================================================
   Elatrik v22 — mobiel menu + slider herstel
   Basis blijft v19/v21. Desktop styling wordt niet gewijzigd, behalve slider JS-cache.
   ======================================================================== */

@media (max-width: 1199.98px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.mobile-nav-open {
        overflow: hidden !important;
        height: 100dvh !important;
    }

    body.mobile-nav-open #main-content,
    body.mobile-nav-open .site-footer {
        pointer-events: none !important;
    }

    .site-header,
    .site-header--overlay,
    .site-header--light,
    .site-header.is-scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2200 !important;
        height: 76px !important;
        background: rgba(255, 253, 249, .985) !important;
        border-bottom: 1px solid rgba(36, 35, 31, .10) !important;
        box-shadow: 0 14px 34px rgba(34, 28, 20, .08) !important;
        backdrop-filter: blur(18px) saturate(1.05) !important;
    }

    .site-header .navbar,
    .site-header .container-wide {
        min-height: 76px !important;
        height: 76px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .site-header .container-wide {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .site-header .brand-logo {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        position: relative !important;
        z-index: 2210 !important;
    }

    .site-header .brand-logo img {
        max-width: 132px !important;
        max-height: 50px !important;
    }

    .site-header .brand-logo__dark,
    .site-header--overlay:not(.is-scrolled) .brand-logo__dark,
    body.mobile-nav-open .site-header .brand-logo__dark {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .site-header .brand-logo__light,
    .site-header--overlay:not(.is-scrolled) .brand-logo__light,
    body.mobile-nav-open .site-header .brand-logo__light {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .site-header .navbar-toggler,
    .site-header--overlay:not(.is-scrolled) .navbar-toggler,
    body.mobile-nav-open .site-header .navbar-toggler {
        position: relative !important;
        z-index: 2220 !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        border: 1px solid rgba(36, 35, 31, .12) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.86) !important;
        color: #24231f !important;
        box-shadow: 0 10px 24px rgba(34, 28, 20, .08) !important;
        text-shadow: none !important;
    }

    .site-header .navbar-toggler-icon,
    .site-header .navbar-toggler-icon::before,
    .site-header .navbar-toggler-icon::after,
    .site-header--overlay:not(.is-scrolled) .navbar-toggler-icon,
    .site-header--overlay:not(.is-scrolled) .navbar-toggler-icon::before,
    .site-header--overlay:not(.is-scrolled) .navbar-toggler-icon::after {
        background: currentColor !important;
    }

    body.mobile-nav-open .site-header .navbar-toggler-icon {
        background: transparent !important;
    }

    body.mobile-nav-open .site-header .navbar-toggler-icon::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }

    body.mobile-nav-open .site-header .navbar-toggler-icon::after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }

    .site-header .navbar-collapse {
        position: fixed !important;
        top: 76px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: calc(100dvh - 76px) !important;
        min-height: calc(100vh - 76px) !important;
        margin: 0 !important;
        padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background:
            radial-gradient(circle at 85% 12%, rgba(228, 159, 48, .22), transparent 28%),
            linear-gradient(135deg, rgba(22, 23, 22, .985), rgba(38, 48, 52, .985)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 2190 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) !important;
        transition: opacity .24s ease, visibility .24s ease, transform .24s ease !important;
    }

    .site-header .navbar-collapse.collapse:not(.show),
    .site-header .navbar-collapse.collapsing {
        display: block !important;
    }

    .site-header .navbar-collapse.show,
    .site-header .navbar-collapse.collapsing {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .navbar-nav {
        width: 100% !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .nav-item {
        width: 100% !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .nav-link,
    body.mobile-nav-open .site-header.site-header--overlay:not(.is-scrolled) .navbar-collapse .nav-link {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 58px !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
        color: #fff !important;
        background: none !important;
        font-size: clamp(1.28rem, 5.5vw, 1.85rem) !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        letter-spacing: -.025em !important;
        text-shadow: none !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .nav-link:hover,
    body.mobile-nav-open .site-header .navbar-collapse .nav-link.active {
        color: #f4b142 !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .nav-link.active::after {
        background: #f4b142 !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: .5rem 0 1rem !important;
        padding: .55rem !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.075) !important;
        box-shadow: none !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .dropdown-item {
        padding: .82rem .95rem !important;
        border-radius: 13px !important;
        color: rgba(255,255,255,.86) !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .dropdown-item:hover {
        background: rgba(228, 159, 48, .15) !important;
        color: #f4b142 !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .nav-cta {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .8rem !important;
        margin-top: 1.4rem !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .btn-nav-secondary,
    body.mobile-nav-open .site-header .navbar-collapse .nav-cta .btn-amber {
        width: 100% !important;
        min-height: 58px !important;
        justify-content: center !important;
        font-size: 1rem !important;
        border-radius: 0 !important;
    }

    body.mobile-nav-open .site-header .navbar-collapse .btn-nav-secondary {
        border-color: rgba(255,255,255,.22) !important;
        color: #fff !important;
        background: rgba(255,255,255,.055) !important;
    }
}

@media (max-width: 767.98px) {
    html,
    body,
    #main-content,
    .page-home,
    .home-hero,
    .home-hero__slide,
    .home-hero__image,
    .container-fluid,
    .container-wide {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .home-hero {
        width: 100% !important;
        height: auto !important;
        min-height: 940px !important;
        overflow: hidden !important;
    }

    .home-hero__slide {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .home-hero__image {
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        transform: scale(1.02) !important;
    }

    .home-hero__slide.active .home-hero__image {
        transform: scale(1.045) !important;
    }

    .home-hero__shade {
        background:
            linear-gradient(90deg, rgba(31, 25, 21, .94) 0%, rgba(31, 25, 21, .82) 64%, rgba(31, 25, 21, .58) 100%),
            linear-gradient(0deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 52%) !important;
    }

    .home-hero__content {
        width: 100% !important;
        min-height: 940px !important;
        justify-content: flex-start !important;
        padding-top: calc(9.75rem + env(safe-area-inset-top)) !important;
        padding-bottom: 13.75rem !important;
    }

    .home-hero h1 {
        max-width: 100% !important;
        font-size: clamp(2.85rem, 13vw, 4.2rem) !important;
        line-height: .95 !important;
        letter-spacing: -.065em !important;
    }

    .hero-subtitle {
        max-width: 100% !important;
        font-size: clamp(1.45rem, 7.2vw, 2.15rem) !important;
        line-height: 1.12 !important;
    }

    .hero-text {
        max-width: 100% !important;
        font-size: .98rem !important;
        line-height: 1.62 !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        min-height: 56px !important;
        justify-content: center !important;
    }

    .hero-slider__controls {
        left: .75rem !important;
        right: .75rem !important;
        bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: calc(100% - 1.5rem) !important;
        transform: none !important;
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        gap: .45rem !important;
        z-index: 60 !important;
        pointer-events: auto !important;
    }

    .hero-slider__button,
    .hero-slider__thumb {
        position: relative !important;
        z-index: 61 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .hero-slider__button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .hero-slider__thumbs {
        min-width: 0 !important;
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .38rem !important;
        overflow: hidden !important;
    }

    .hero-slider__thumb {
        min-width: 0 !important;
        min-height: 58px !important;
        padding: .28rem !important;
        border-radius: 11px !important;
    }

    .hero-slider__thumb-image {
        width: 100% !important;
        height: 49px !important;
        border-radius: 8px !important;
    }

    .section-services {
        padding-top: 4.75rem !important;
    }
}

@media (max-width: 380px) {
    .home-hero {
        min-height: 970px !important;
    }

    .home-hero__content {
        min-height: 970px !important;
        padding-top: calc(9.25rem + env(safe-area-inset-top)) !important;
    }

    .home-hero h1 {
        font-size: clamp(2.55rem, 12.2vw, 3.55rem) !important;
    }
}