/**
 * Homepage Styles
 * E-sigaret webshop homepage met Adalya Point branding
 */

/* ========== GLOBAL RESET & BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    /* overflow-y verwijderd - laat browser default scroll handling doen voor sticky support */
    -webkit-overflow-scrolling: touch;
    /* Verwijder height: 100% om dubbele scrollbars te voorkomen */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #FFFFFF;
    color: #1a1c1e;
    line-height: 1.6;
    overflow-x: hidden;
    /* Alleen body mag scrollen - voorkom dubbele scrollbars */
    overflow-y: auto;
    position: relative;
    width: 100%;
    max-width: 100vw;
    /* GEEN min-height - laat content natuurlijk groeien */
    -webkit-overflow-scrolling: touch;
}

/* Header blijft donker */
.main-header {
    background: #1a1c1e !important;
}

/* ========== MAIN CONTENT ========== */
.main-content {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ========== HERO SECTION ========== */
.hero-section {
    /* Hero begint EXACT waar header eindigt - geen gap */
    /* Header: top 0, height 80px → eindigt op 80px */
    margin-top: 80px; /* EXACT onder header (0px + 80px header = 80px) */
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 0; /* Voorkom whitespace onder afbeelding */
    background: #0a0a0a; /* Zwarte achtergrond om witte rand te voorkomen */
    margin-bottom: 0; /* Geen ruimte onder hero section */
}

/* Compensatie voor announcement bar */
body.has-announcement .hero-section {
    /* Announcement: top 0, height 40px → eindigt op 40px */
    /* Header: top 40px, height 80px → eindigt op 40px + 80px = 120px */
    margin-top: 120px !important; /* EXACT onder header (40px + 80px = 120px) */
}

.hero-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: bottom; /* Voorkom whitespace onder image */
}

/* Desktop: Show original hero image, hide mobile slideshow */
.hero-image-desktop {
    display: block;
}

.hero-slideshow {
    display: none;
}


/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet (max-width: 968px) */
@media (max-width: 968px) {
    .hero-section {
        /* Mobile header: top 0 (zonder announcement) of top 36px (met announcement), height 70px */
        margin-top: 70px; /* EXACT onder header (0px + 70px header = 70px) */
    }
    
    body.has-announcement .hero-section {
        /* Announcement: 36px hoogte, Header: top 36px, height 70px → eindigt op 36px + 70px = 106px */
        margin-top: 106px !important; /* EXACT onder header (36px + 70px = 106px) */
    }
    
    .hero-image {
        max-height: 500px;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .hero-section {
        /* Mobile header: top 0 (zonder announcement) of top 36px (met announcement), height 70px */
        margin-top: 70px !important; /* EXACT onder header */
    }
    
    body.has-announcement .hero-section {
        /* Announcement: 36px hoogte, Header: top 36px, height 70px → eindigt op 106px */
        margin-top: 106px !important; /* EXACT onder header (36px + 70px = 106px) */
    }
    
    /* Hide desktop image on mobile */
    .hero-image-desktop {
        display: none;
    }
    
    /* Show mobile slideshow on mobile */
    .hero-slideshow {
        display: block;
        position: relative;
        width: 100%;
        min-height: 400px;
        line-height: 0;
    }
    
    .hero-image-mobile {
        position: absolute;
        top: 0;
        left: 0;
        max-height: none;
        height: auto;
        object-fit: contain;
        object-position: center;
        opacity: 0;
        transition: opacity 2s ease-in-out;
    }
    
    .hero-image-mobile:first-child {
        position: relative;
    }
    
    .hero-image-mobile.active {
        opacity: 1;
        z-index: 1;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .hero-section {
        /* Small mobile header: top 0 (zonder announcement) of top 32px (met announcement), height 65px */
        margin-top: 65px !important; /* EXACT onder header (0px + 65px header = 65px) */
    }
    
    body.has-announcement .hero-section {
        /* Announcement: 32px hoogte, Header: top 32px, height 65px → eindigt op 32px + 65px = 97px */
        margin-top: 97px !important; /* EXACT onder header (32px + 65px = 97px) */
    }
    
    .hero-image {
        max-height: none;
        height: auto;
        object-fit: contain;
        object-position: center;
    }
}