/* Mobile Responsive Styles */

/* Hero Banner Wrapper */
.hero-banner-wrapper {
    width: 100%;
    padding: 1px 0;
    background: #ffffff;
    margin: 0;
    position: relative;
    z-index: 100;
}

.hero-banner-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* Banner Image */
.banner-image {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

@media (max-width: 767px) {
    .banner-image {
        border-radius: 0;
        width: 100%;
    }
}

.banner-link {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
}

/* Banner Slider */
.banner-slider {
    position: relative;
    display: inline-block;
    max-width: 980px;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}

.slide-item {
    min-width: 100%;
    flex: 0 0 100%;
}

.slide-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Slider Navigation */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
}

.slider-prev,
.slider-next {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    transition: background 0.3s;
}

.slider-prev:hover,
.slider-next:hover {
    background: rgba(0,0,0,0.8);
}

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
}

.slider-dot.active {
    background: white;
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
    /* Force remove all padding/margin from root elements */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    body > *, 
    body #page,
    body .site {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hero-banner-wrapper {
        padding: 1px 0;
    }
    
    .hero-banner-container {
        padding: 0;
    }
    
    .banner-image,
    .banner-slider {
        border-radius: 0;
        width: 100%;
    }
    
    /* Reset all wrappers for full width */
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    #page {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    /* Header full width */
    body .site-header,
    body #masthead {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body .header-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body .header-wrapper .container {
        padding: 10px 15px !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Container full width on mobile */
    .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Force all containers and wrappers */
    body .container,
    body .wrapper,
    body .content-wrapper,
    body [class*="wrapper"],
    body [class*="container"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Main content areas full width */
    .site-content {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .site-main {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    /* Homepage sections full width */
    .homepage-section {
        margin: 0;
        padding: 0;
        border-radius: 0;
        width: 100%;
    }
    
    /* Results section full width - keep some padding for content */
    .results-section,
    .soicau-section,
    .statistics-section,
    .blog-section {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    /* Content inside sections */
    .results-section > .container,
    .soicau-section > .container,
    .statistics-section > .container,
    .blog-section > .container {
        padding: 0 15px;
    }
    
    /* Cards and boxes */
    .result-box,
    .soicau-box,
    .stat-box {
        border-radius: 0;
        margin: 0;
    }
    
    /* Section headers full width */
    .section-header {
        margin: 0;
        padding: 10px 15px;
        border-radius: 0;
        width: 100%;
    }
    
    /* Quick menu bar */
    .quick-menu-bar {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .menu-wrapper {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .quick-menu {
        padding: 10px 15px;
        width: 100%;
    }
    
    /* Navigation full width */
    .main-navigation {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .nav-wrapper {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .nav-wrapper .container {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    /* Single column layout */
    .single-column-layout {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    /* Section title bars - Full width on mobile */
    .section-title,
    .result-header,
    .hero-section .section-header,
    .results-section .section-header,
    .soicau-section .section-header {
        width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 10px 15px;
    }
    
    /* Result content box */
    .result-content,
    .section-content {
        padding: 15px;
        margin: 0;
        width: 100%;
    }
    
    /* Table and result displays */
    .result-table,
    .lottery-results {
        width: 100%;
        margin: 0;
        padding: 0 15px;
    }
    
    /* Remove any side margins on main sections */
    .hero-section,
    .results-section,
    .soicau-section,
    .statistics-section {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Bottom navigation full width */
    .mobile-bottom-nav {
        width: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;
    }
    
    /* Header Top styling */
    .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 15px;
        margin: 0;
    }
    
    /* Site branding */
    .site-branding {
        flex: 1;
        margin: 0;
        padding: 0;
    }
    
    /* Ensure all inner containers are full width */
    .container > *,
    .site-content > *,
    .site-main > * {
        max-width: 100%;
    }
    
    /* Remove any default margins and paddings that might cause indentation */
    p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, dt, li {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Force full width for specific elements */
    .site,
    #page,
    .site-header,
    .site-content,
    .content-area {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Banner specific - ensure it's full width like everything else */
    .hero-banner-wrapper,
    .hero-banner-container,
    .banner-image,
    .banner-slider {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* Remove border radius on all elements for consistent look */
    * {
        border-radius: 0;
    }
    
    /* Only add padding where content needs it */
    .entry-content,
    article > .content,
    .post-content,
    .page-content {
        padding: 0 15px;
    }
}