/* Sinterklaas Art Deco Hero - CSS */

.sk-hero-de7bc9bb {
    position: relative;
    width: 100%;
    /* min-height 580px, max 1000px, responsive 100svh - 78px */
    height: clamp(580px, calc(100svh - 78px), 1000px);
    background-color: #1E060B;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    font-family: 'Montserrat', sans-serif;
    color: #ECE4D3;
}

/* Slider */
.sk-hero-de7bc9bb .sk-slider-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sk-hero-de7bc9bb .sk-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease;
    will-change: opacity;
}

.sk-hero-de7bc9bb .sk-slide-active {
    opacity: 1;
    z-index: 1;
}

.sk-hero-de7bc9bb .sk-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* object-position is inline */
}

/* Ken Burns */
@media (prefers-reduced-motion: no-preference) {
    .sk-hero-de7bc9bb .sk-slide-active img {
        animation: kenburns-de7bc9bb 9s linear forwards;
    }
}

@keyframes kenburns-de7bc9bb {
    0% { transform: scale(1.07); }
    100% { transform: scale(1); }
}

/* Overlay Gradients */
.sk-hero-de7bc9bb .sk-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: 
        linear-gradient(90deg, rgba(30,6,11,.9) 0%, rgba(30,6,11,.6) 34%, rgba(30,6,11,0) 62%),
        linear-gradient(0deg, rgba(30,6,11,.75) 0%, rgba(30,6,11,0) 42%);
}

/* Deco Frame */
.sk-hero-de7bc9bb .sk-deco-frame {
    position: absolute;
    inset: clamp(12px, 2vw, 28px);
    border: 1px solid rgba(212,180,127,.75);
    z-index: 2;
    pointer-events: none;
    /* Load Animation initial state */
    clip-path: inset(50% 0 50% 0);
    transition: clip-path 1.4s cubic-bezier(.2,.7,.1,1) .3s;
}

/* Frame animation class added via JS */
.sk-hero-de7bc9bb.loaded .sk-deco-frame {
    clip-path: inset(0);
}

.sk-hero-de7bc9bb .sk-deco-frame::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(212,180,127,.35);
}

.sk-hero-de7bc9bb .sk-corner {
    position: absolute;
    width: 44px;
    height: 44px;
    color: #D4B47F;
}

.sk-hero-de7bc9bb .sk-corner svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sk-hero-de7bc9bb .sk-tl { top: -2px; left: -2px; }
.sk-hero-de7bc9bb .sk-tr { top: -2px; right: -2px; transform: scaleX(-1); }
.sk-hero-de7bc9bb .sk-bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.sk-hero-de7bc9bb .sk-br { bottom: -2px; right: -2px; transform: scale(-1, -1); }

/* Content Wrapper */
.sk-hero-de7bc9bb .sk-content-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 48px);
    padding-bottom: clamp(72px, 12vh, 128px);
}

.sk-hero-de7bc9bb .sk-title {
    /* Styles are now managed via Elementor Controls */
}

.sk-hero-de7bc9bb .sk-intro {
    /* Styles are now managed via Elementor Controls */
}

/* Load Animations Text */
@media (prefers-reduced-motion: no-preference) {
    .sk-hero-de7bc9bb .sk-anim-item {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .9s ease, transform .9s ease;
    }
    .sk-hero-de7bc9bb.loaded .sk-anim-item {
        opacity: 1;
        transform: translateY(0);
    }
    .sk-hero-de7bc9bb.loaded .sk-title { transition-delay: .4s; }
    .sk-hero-de7bc9bb.loaded .sk-intro { transition-delay: .55s; }
    .sk-hero-de7bc9bb.loaded .sk-actions { transition-delay: .7s; }
}

/* Actions */
.sk-hero-de7bc9bb .sk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.sk-hero-de7bc9bb .sk-btn-primary {
    display: inline-block;
    background-color: #B8925A;
    color: #1D1B18;
    font-weight: 600;
    padding: 1em 1.7em;
    text-decoration: none;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.sk-hero-de7bc9bb .sk-btn-primary:hover,
.sk-hero-de7bc9bb .sk-btn-primary:focus {
    background-color: #D4B47F;
    color: #1D1B18;
}

.sk-hero-de7bc9bb .sk-btn-link {
    display: inline-block;
    color: #ECE4D3;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #B8925A;
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.sk-hero-de7bc9bb .sk-btn-link:hover,
.sk-hero-de7bc9bb .sk-btn-link:focus {
    color: #D4B47F;
    border-color: #D4B47F;
}

/* Nav Points */
.sk-hero-de7bc9bb .sk-nav {
    position: absolute;
    right: clamp(40px, 5vw, 72px);
    bottom: clamp(44px, 7vh, 72px);
    z-index: 3;
    display: flex;
    gap: 1rem;
}

.sk-hero-de7bc9bb .sk-nav-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    background: transparent;
    border: 1px solid #D4B47F;
    transform: rotate(45deg);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sk-hero-de7bc9bb .sk-nav-dot.active {
    background-color: #D4B47F;
}

/* Accessibility Focus */
.sk-hero-de7bc9bb button:focus-visible,
.sk-hero-de7bc9bb a:focus-visible {
    outline: 2px solid #D4B47F;
    outline-offset: 3px;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    .sk-hero-de7bc9bb .sk-slide { transition: none; }
    .sk-hero-de7bc9bb .sk-deco-frame { clip-path: inset(0); transition: none; }
    .sk-hero-de7bc9bb .sk-anim-item { opacity: 1; transform: translateY(0); transition: none; }
}

/* Mobile */
@media (max-width: 760px) {
    .sk-hero-de7bc9bb {
        min-height: 620px;
    }
    
    .sk-hero-de7bc9bb .sk-overlay {
        background: linear-gradient(0deg, rgba(30,6,11,.95) 0%, rgba(30,6,11,.7) 45%, rgba(30,6,11,.1) 75%);
    }
    
    .sk-hero-de7bc9bb .sk-hide-mobile {
        display: none !important;
    }
    
    .sk-hero-de7bc9bb .sk-content-wrapper {
        padding-bottom: 84px;
    }
    
    .sk-hero-de7bc9bb .sk-nav {
        right: 50%;
        transform: translateX(50%);
        bottom: 28px;
    }
}