/**
 * fullPage.js Custom Styles
 * Premium UX Integration with Flatsome Theme
 */

/* ============================================
   1. Hide fullPage.js Watermark
   ============================================ */
.fp-watermark {
    display: none !important;
}

/* ============================================
   2. Navigation Dots Styling
   ============================================ */
#fp-nav ul li a span {
    background: rgba(255, 255, 255, 0.5);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    transition: all 0.3s ease;
}

#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span {
    background: #ffffff;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
}

#fp-nav ul li:hover a span {
    background: rgba(255, 255, 255, 0.8);
}

#fp-nav {
    margin-top: 0;
    padding: 0;
}

/* ============================================
   3. Header Integration
   ============================================ */
/**
 * Header Integration
 * Uses global CSS variables from hdev-theme/assets/css/global-variables.css
 */
#header {
    position: fixed !important;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 9999;
}

#header .header-wrapper {
    width: 100%;
    max-width: var(--container-width-base);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}

#header .header-main {
    width: 100%;
    max-width: 100%;
}

#header .header-inner {
    width: 100%;
}

@media (min-width: 1200px) {
    #header .header-wrapper {
        max-width: var(--container-width-md);
    }
}

@media (min-width: 1400px) {
    #header .header-wrapper {
        max-width: var(--container-width-lg);
    }
}

/* ============================================
   4. Section Layout & Scrollbar Hide
   ============================================ */
/* Desktop only: Fullscreen sections */
@media (min-width: 1025px) {
    .hdev-fullpage {
        height: 100vh;
        display: flex;
        align-items: center;
        transition: opacity 0.3s ease;
    }
}

/* Mobile: Normal height, no fullscreen */
@media (max-width: 1024px) {
    .hdev-fullpage {
        height: auto;
        min-height: auto;
        display: block;
    }
}

html.fp-enabled,
body.fp-enabled {
    overflow: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
}

html.fp-enabled::-webkit-scrollbar,
body.fp-enabled::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html.fp-enabled *,
body.fp-enabled * {
    scrollbar-width: none;
}

html.fp-enabled *::-webkit-scrollbar,
body.fp-enabled *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ============================================
   5. Mobile Responsive Reset
   ============================================ */
@media (max-width: 1024px) {

    /* Reset header top position on mobile */
    #header {
        top: 0px !important;
        background-color: #ffffff !important;
    }

    /* Simple centered layout for mobile header - no padding */
    #header .header-wrapper {
        position: relative !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reduce logo size on mobile */
    #header .header-logo img,
    #header .logo img {
        max-height: 50px !important;
        width: auto !important;
    }

    /* Hamburger menu stays on the left */
    .hdev-hamburger-wrapper {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* Right elements (hotline, etc) stay on the right */
    #header .header-right {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

    body.fp-responsive .hdev-fullpage {
        height: auto !important;
        min-height: 100vh;
    }

    body.fp-responsive {
        overflow: auto !important;
    }

    body.fp-responsive #fp-nav {
        display: none;
    }
}