/* ==========================================================================
   Responsive Design for Axel Crieger Website - COMPLETE SOLUTION
   ========================================================================== */

/* DESKTOP NAVIGATION - ORIGINAL STYLE WITH VISIBILITY FIX */
/* Restore original semi-transparent styling but ensure visibility */
.l-navbar_t-semi-trans {
    background: rgba(0, 0, 0, 0.4) !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 100001 !important;
    padding: 10px 0 !important;
    backdrop-filter: blur(3px);
}

/* Subtle visibility enhancement while maintaining original elegance */
.l-navbar_t-semi-trans .menuzord-menu > li > a {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7) !important;
    font-weight: normal !important;
    transition: all 0.3s ease;
}

.l-navbar_t-semi-trans .menuzord-menu > li > a:hover {
    color: #ffffff !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8) !important;
    transform: translateY(-1px);
}

/* Ensure body has top padding for fixed header on desktop */
@media (min-width: 1025px) {
    body {
        padding-top: 70px !important;
    }
}

/* MOBILE AND TABLET NAVIGATION - COMPLETE CUSTOM SOLUTION */
@media (max-width: 1024px) {
    /* Hide the problematic desktop navigation completely */
    .l-navbar, .menuzord, .menuzord-menu, .js-primary-navigation {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ensure body padding for mobile header */
    body {
        padding-top: 70px !important;
    }
    
    /* Mobile header container */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 100005;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 15px rgba(0,0,0,0.3);
        backdrop-filter: blur(10px);
    }
    
    .mobile-logo {
        color: white;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 3px;
        text-transform: uppercase;
    }
    
    /* Hamburger menu button */
    .hamburger-menu {
        display: flex !important;
        flex-direction: column;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 100006;
        width: 35px;
        height: 30px;
        justify-content: space-between;
        position: relative;
    }
    
    .hamburger-line {
        display: block;
        width: 30px;
        height: 3px;
        background: white;
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    .hamburger-menu:hover .hamburger-line {
        background: #ccc;
    }
    
    /* Hamburger animation when active */
    .hamburger-menu.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }
    
    .hamburger-menu.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger-menu.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -8px);
    }
    
    /* Mobile menu dropdown */
    .mobile-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.98);
        z-index: 100004;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    }
    
    .mobile-menu.show {
        max-height: calc(100vh - 80px); /* Full viewport minus header space */
    }
    
    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 10px 0; /* Reduced to optimize space for all menu items */
    }
    
    .mobile-menu-item {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin: 0;
    }
    
    .mobile-menu-item:last-child {
        border-bottom: none;
    }
    
    .mobile-menu-link {
        display: block;
        color: white !important;
        text-decoration: none;
        padding: 12px 30px; /* Reduced significantly to fit all 8 items */
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all 0.3s ease;
        font-weight: 500;
    }
    
    .mobile-menu-link:hover {
        color: #fff !important;
        background: rgba(255,255,255,0.1);
        padding-left: 40px;
        transform: translateX(10px);
    }
}

/* Content and Image Responsiveness */
@media (max-width: 768px) {
    /* Content sections should maintain left margin for readability */
    .content-wrapper,
    .contact-wrapper,
    .facts-section {
        margin-left: 30px !important;
        margin-right: 15px !important;
        text-align: left;
    }
    
    .content-text {
        margin-left: 30px !important;
        margin-right: 15px !important;
        text-align: left !important;
    }
    
    /* Fix legacy hardcoded margins - make them mobile responsive */
    p[style*="margin-left"] {
        margin-left: 30px !important;
        margin-right: 15px !important;
        text-align: left !important;
    }
    
    /* Mobile parallax sections - DIFFERENTIATED BY PAGE TYPE */
    
    /* DEFAULT - Full images for main pages (index, collections, shows, views) */
    .parallax, .parallax2, .parallax3, .parallax11, .parallax12 {
        min-height: 350px !important;
        padding: 30px 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #ffffff !important;
        background-attachment: scroll !important; /* DISABLE PARALLAX FOR MOBILE */
        margin: 0 !important;
        border-radius: 0 !important;
        height: auto !important;
    }
    
    /* PRESS/GALLERY pages + REFERENCES parallax20 - DISABLE PARALLAX, HIGH QUALITY MOBILE DISPLAY */
    .parallax4, .parallax5, .parallax6, .parallax8, .parallax9, .parallax10, .parallax16, .parallax20 {
        min-height: 60vh !important;
        height: auto !important;
        padding: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #ffffff !important;
        background-attachment: scroll !important; /* DISABLE PARALLAX FOR CRISP IMAGES */
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        position: relative !important;
        transform: none !important; /* PREVENT ANY TRANSFORMS THAT REDUCE QUALITY */
        will-change: auto !important; /* DISABLE HARDWARE ACCELERATION THAT CAUSES BLUR */
        /* Ensure images fit properly without forcing full height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* VIEWS page - DISABLE PARALLAX, HIGH QUALITY MOBILE DISPLAY - ALL SECTIONS */
    .parallax12, .parallax13, .parallax14, .parallax15, .parallax17, .parallax19, .parallax21 {
        min-height: 60vh !important;
        height: auto !important;
        padding: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #ffffff !important;
        background-attachment: scroll !important; /* DISABLE PARALLAX FOR CRISP IMAGES */
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        position: relative !important;
        transform: none !important; /* PREVENT ANY TRANSFORMS THAT REDUCE QUALITY */
        will-change: auto !important; /* DISABLE HARDWARE ACCELERATION THAT CAUSES BLUR */
        /* Ensure images fit properly without forcing full height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Press gallery specific styling - full screen */
    .press-gallery .press-item {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    /* Views page specific styling - full screen, ALL SECTIONS */
    .parallax12, .parallax13, .parallax14, .parallax15, .parallax17, .parallax19, .parallax21 {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    /* Remove spacing from body-content sections between GALLERY images only */
    .press-gallery .body-content,
    .views-gallery .body-content {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove BR tags only in gallery pages, not content pages */
    .press-gallery br,
    .views-gallery br,
    .parallax4 br,
    .parallax5 br,
    .parallax6 br,
    .parallax8 br,
    .parallax9 br,
    .parallax10 br,
    .parallax16 br,
    .parallax12 br,
    .parallax13 br,
    .parallax14 br,
    .parallax15 br,
    .parallax17 br,
    .parallax19 br,
    .parallax21 br {
        display: none !important;
    }
    
    /* Preserve line breaks in content sections */
    .body-content:not(.press-gallery):not(.views-gallery) br,
    .content-wrapper br,
    .content-text br {
        display: block !important;
    }
    
    /* Ensure press images break out of all containers completely */
    .press-gallery {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    .press-gallery .container,
    .press-gallery .row,
    .press-gallery .col-md-12 {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    /* GALLERY MOBILE CONTAINER RESET - REMOVE ALL SIDE MARGINS ONLY FOR GALLERY PAGES */
    .press-gallery .container, 
    .press-gallery .row, 
    .press-gallery .col-md-12, 
    .press-gallery .body-content,
    .views-gallery .container,
    .views-gallery .row,
    .views-gallery .col-md-12,
    .views-gallery .body-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Mobile body - no horizontal margins */
    body {
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Mobile body adjustments for press page full-screen images */
    .press-gallery {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure mobile body accommodates full-screen images */
    body {
        overflow-x: hidden !important;
    }
    
    /* Press page specific mobile container reset */
    .press-gallery .body-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hide mobile header on press page for full immersion */
    .press-gallery ~ * .mobile-header {
        z-index: 100010 !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Ensure proper scrolling between full-screen images */
    .press-gallery .press-item + .press-item {
        margin-top: 0 !important;
    }
    
    /* FORCE HIGH QUALITY RENDERING ON MOBILE - ALL SECTIONS */
    .parallax4, .parallax5, .parallax6, .parallax8, .parallax9, .parallax10, .parallax16,
    .parallax12, .parallax13, .parallax14, .parallax15, .parallax17, .parallax19, .parallax21 {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        backface-visibility: hidden !important;
        -webkit-transform: translateZ(0) !important;
        -moz-transform: translateZ(0) !important;
        -ms-transform: translateZ(0) !important;
        -o-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* NEWS page - Full width mobile display like other gallery pages */
    .parallax7 {
        background-size: contain !important;
        background-color: #fff !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        min-height: 50vh !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        border-radius: 0 !important;
        position: relative !important;
        transform: none !important;
        will-change: auto !important;
        /* Ensure images fit properly */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* NEWS page inline images - force responsive full width */
    img[src*="banner/07.jpg"], 
    img[src*="assets/img/banner/"],
    .news-image,
    img.center {
        width: 100vw !important;
        height: auto !important;
        max-width: 100vw !important;
        margin: 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        background-color: #fff !important;
    }
    
    /* Remove extra spacing from body content sections */
    .body-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* First parallax on page - remove top spacing */
    .parallax:first-of-type, 
    .parallax2:first-of-type, 
    .parallax3:first-of-type,
    .parallax4:first-of-type, 
    .parallax5:first-of-type, 
    .parallax6:first-of-type,
    .parallax7:first-of-type, 
    .parallax8:first-of-type, 
    .parallax9:first-of-type,
    .parallax10:first-of-type, 
    .parallax11:first-of-type, 
    .parallax12:first-of-type,
    .parallax16:first-of-type {
        margin-top: 0 !important;
        padding-top: 30px !important;
    }
    
    .container {
        padding: 0 15px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* But remove container padding for gallery pages */
    .press-gallery .container,
    .views-gallery .container {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    footer {
        padding: 40px 15px !important;
    }
    
    /* Remove excessive gaps around parallax sections */
    .parallax + .body-content,
    .parallax2 + .body-content,
    .parallax3 + .body-content,
    .parallax4 + .body-content,
    .parallax5 + .body-content,
    .parallax6 + .body-content,
    .parallax7 + .body-content,
    .parallax8 + .body-content,
    .parallax9 + .body-content,
    .parallax10 + .body-content,
    .parallax11 + .body-content,
    .parallax12 + .body-content,
    .parallax16 + .body-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Fix page-specific spacing issues */
    .s-header + .parallax,
    .s-header + .parallax2,
    .s-header + .parallax3,
    .s-header + .parallax4,
    .s-header + .parallax5,
    .s-header + .parallax6,
    .s-header + .parallax7,
    .s-header + .parallax8,
    .s-header + .parallax9,
    .s-header + .parallax10,
    .s-header + .parallax11,
    .s-header + .parallax12,
    .s-header + .parallax16 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Ensure body padding for mobile header */
    body {
        padding-top: 70px !important;
    }
    
    /* DEFAULT - Full images for main pages (index, collections, shows, views) */
    .parallax, .parallax2, .parallax3, .parallax11, .parallax12 {
        min-height: 450px !important;
        padding: 40px 30px !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #ffffff !important;
        background-attachment: scroll !important; /* DISABLE PARALLAX FOR TABLET */
        margin: 0 !important;
    }
    
    /* PRESS/GALLERY pages - Better tablet display */
    .parallax4, .parallax5, .parallax6, .parallax8, .parallax9, .parallax10, .parallax16 {
        min-height: 450px !important;
        padding: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        margin: 0 0 20px 0 !important;
        border-radius: 8px !important;
    }
    
    /* NEWS page tablet optimization - also full width */
    .parallax7 {
        background-size: contain !important;
        background-color: #fff !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        min-height: 60vh !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        border-radius: 0 !important;
        position: relative !important;
        transform: none !important;
        will-change: auto !important;
        /* Ensure images fit properly */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* NEWS page inline images - tablet responsive */
    img[src*="banner/07.jpg"], 
    img[src*="assets/img/banner/"],
    .news-image,
    img.center {
        width: 100vw !important;
        height: auto !important;
        max-width: 100vw !important;
        margin: 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        background-color: #fff !important;
    }
}

/* General responsive images */
img {
    max-width: 100%;
    height: auto;
}

video {
    max-width: 100%;
    height: auto;
}

/* DESKTOP PRESS PAGE ENHANCEMENTS */
/* Make press images take more width on desktop */
@media (min-width: 1025px) {
    .press-gallery .press-item {
        margin-bottom: 30px;
    }
    
    .press-gallery .parallax4,
    .press-gallery .parallax5, 
    .press-gallery .parallax6,
    .press-gallery .parallax8,
    .press-gallery .parallax9,
    .press-gallery .parallax10,
    .press-gallery .parallax16 {
        height: 80vh !important;
        min-height: 600px !important;
        background-size: cover !important;
        background-position: center center !important;
        margin: 0 -150px 40px -150px !important;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }
    
    /* Extend images even further on larger screens */
    @media (min-width: 1400px) {
        .press-gallery .parallax4,
        .press-gallery .parallax5, 
        .press-gallery .parallax6,
        .press-gallery .parallax8,
        .press-gallery .parallax9,
        .press-gallery .parallax10,
        .press-gallery .parallax16 {
            margin: 0 -250px 40px -250px !important;
            height: 85vh !important;
            min-height: 700px !important;
        }
    }
    
    /* Extra wide screens - almost full width */
    @media (min-width: 1800px) {
        .press-gallery .parallax4,
        .press-gallery .parallax5, 
        .press-gallery .parallax6,
        .press-gallery .parallax8,
        .press-gallery .parallax9,
        .press-gallery .parallax10,
        .press-gallery .parallax16 {
            margin: 0 -400px 50px -400px !important;
            height: 90vh !important;
            min-height: 800px !important;
        }
    }
    
    /* Ultra-wide screens - nearly full viewport width */
    @media (min-width: 2200px) {
        .press-gallery .parallax4,
        .press-gallery .parallax5, 
        .press-gallery .parallax6,
        .press-gallery .parallax8,
        .press-gallery .parallax9,
        .press-gallery .parallax10,
        .press-gallery .parallax16 {
            margin: 0 -600px 60px -600px !important;
            height: 95vh !important;
            min-height: 900px !important;
        }
    }
    
    /* Ensure container allows overflow for wider images */
    .press-gallery .container {
        overflow: visible;
    }
    
    .press-gallery .row {
        overflow: visible;
    }
    
    /* CRITICAL: Force zero side margins/padding ONLY for gallery pages on mobile */
    html, body {
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Only apply full-width container resets to gallery sections */
    .press-gallery .container-fluid,
    .press-gallery .container,
    .press-gallery .row,
    .press-gallery .col-xs-12,
    .press-gallery .col-sm-12,
    .press-gallery .col-md-12,
    .press-gallery .col-lg-12,
    .views-gallery .container-fluid,
    .views-gallery .container,
    .views-gallery .row,
    .views-gallery .col-xs-12,
    .views-gallery .col-sm-12,
    .views-gallery .col-md-12,
    .views-gallery .col-lg-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
}