/*!
 * MOVING BOX MEDIA Website
 * (c) [2025] [Peter Bauditsch]
 */

 .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    width: 100%;
    padding: 0 5vw;
    margin: 0;
    z-index: 5;
    color: #fff;
    box-sizing: border-box;
    transition: height 0.5s ease,
                background-color 0.5s ease;
    transform: translateZ(0)
}



.header-logo-light,
.header-logo-dark {
    display:block;
    position: absolute;
    top: 50%;
    padding: 4px;
    transform: translateY(-50%);
    height: clamp(80px, 15vw, 150px);
    aspect-ratio: 67 / 50;
    width: auto;
    object-fit: contain;
    left: 4vw;
    margin: 0;
    transition: all 0.5s ease;
    will-change: transform, left, height, opacity;
}


.header-logo-light {
    opacity: 1;
}

.header-logo-dark {
    opacity: 0;
}

.light-theme .header-logo-light {
    opacity: 0;
}

.light-theme .header-logo-dark {
    opacity: 1;
}

.burger-container {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 50px;
    height: 36px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(calc(-5vw), -50%);
    margin: 0;
    z-index: 6;
    transition: transform 0.5s ease;
    padding: 5px;
}

.burger-container div {
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    position: relative;
    transform-origin: center center;
    transition: transform 0.5s ease, 
                background-color 0.5s ease,
                opacity 0.5s ease;
    margin: 0;
}

/* Improved active state with better transforms */
.burger-container.active div:nth-child(1) {
    transform: translateY(16.5px) rotate(45deg);
}

.burger-container.active div:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.burger-container.active div:nth-child(3) {
    transform: translateY(-16.5px) rotate(-45deg);
}

/* Menu styling improvements */
#burger-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.95); /* Slightly more opaque for better readability */
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    transition: right 0.5s ease;
    font-size: clamp(20px, 3vw, 60px);
    overflow: hidden;
}

#burger-menu.active {
    right: 0;
}

/* Add a subtle animation for menu items */
#burger-menu ul li {
    transform: translateX(50px);
    opacity: 0;
    transition: transform 0s, opacity 0s;
}

#burger-menu.active ul li {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.5s ease, 
                opacity 0.5s ease;
}

/* Stagger the animation for each menu item */
#burger-menu.active ul li:nth-child(1) { transition-delay: 0.1s; }
#burger-menu.active ul li:nth-child(2) { transition-delay: 0.15s; }
#burger-menu.active ul li:nth-child(3) { transition-delay: 0.2s; }
#burger-menu.active ul li:nth-child(4) { transition-delay: 0.25s; }
#burger-menu.active ul li:nth-child(5) { transition-delay: 0.3s; }
#burger-menu.active ul li:nth-child(6) { transition-delay: 0.35s; }
#burger-menu.active ul li:nth-child(7) { transition-delay: 0.4s; }

/* Light theme support */
.light-theme .burger-container div {
    background-color: var(--MBM-dark);
}

/* Ensure active burger menu state is still visible in light theme */
.light-theme .burger-container.active div {
    background-color: var(--MBM-white);
}


/* Additional hover effect for better UX */
.burger-container:hover div:nth-child(2) {
    transform: scaleX(0.8);
}

.burger-container.active:hover div {
    transform-origin: center;
}

.burger-container.active:hover div:nth-child(1) {
    transform: translateY(16.5px) rotate(50deg);
}

.burger-container.active:hover div:nth-child(3) {
    transform: translateY(-16.5px) rotate(-50deg);
}

#burger-menu ul {
    position: absolute;
    right: 15vw;
    top: 15vh;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

#burger-menu li {
    padding: 10px 0;
}

#burger-menu a {
    color: var(--MBM-white);
    text-decoration: none;
    transition: color 0.3s;
}

#burger-menu a:hover {
    color: var(--MBM-orange);
}

#burger-menu .kunden-login-button {
    color: rgba(255, 255, 255, 0.7); /* Less bright color */
}

.menu-up-icon {
    width: auto;
    height: clamp(40px, 5vw, 300px);
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Media Queries für spezifische Breakpoints */

@media screen and (min-width: 1800px) {

    .header.scrolled .burger-container {
        transform: translate(calc(-4vw), -50%);
    }

    .header.scrolled .header-logo-light,
    .header.scrolled .header-logo-dark {
        left: 3vw; 
        height: clamp(46px, 10vw, 120px);
    }    
}

@media screen and (max-width: 1800px) {
    .header.scrolled {
        height: 150px;
    }
    
    .header.scrolled .header-logo-light,
    .header.scrolled .header-logo-dark {
        height: clamp(60px, 8vw, 90px);
        left: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .header {
        height: 120px !important;
    }
    
    .header-logo-light, .header-logo-dark {
        left: 3vw;
        transform: translateY(-50%);
    }
    
    .burger-container {
        transform: translate(calc(-5vw), -50%);
        height: 36px;
        width: 40px;
        padding: 4px;
    }
   
    .header.scrolled .burger-container {
        transform: translate(calc(-3vw), -50%);
    }

    .header.scrolled .header-logo-light,
    .header.scrolled .header-logo-dark {
        left: 3vw; 
        height: clamp(46px, 10vw, 120px);
    }

    .burger-container.active div:nth-child(1),
    .burger-container.active:hover div:nth-child(1) {
        transform: translateY(16.5px) rotate(45deg);
    }
    
    .burger-container.active div:nth-child(3),
    .burger-container.active:hover div:nth-child(3) {
        transform: translateY(-16.5px) rotate(-45deg);
    }
}


@media screen and (max-width: 450px){
    
    .header.scrolled {
        height: 80px !important;
        background-color: rgb(26,26,26);
    }    
    
    /* Hintergrundfarbe beim Scrollen im Light-Theme */
    .header.scrolled.light-theme{
        background-color: rgb(255, 255, 255);
    }

    .header.scrolled .header-logo-light,
    .header.scrolled .header-logo-dark {
        height: 56px;
    }
}

/* Hide burger button on sub-pages (project and legal pages) */
.header.sub-page .burger-container {
    display: none;
}

/* Fallback: ensure legal pages behave like sub-pages even before JS runs */
body.legal-page .header .burger-container {
    display: none;
}

/* =============================================================================
   CONSOLIDATED BACK BUTTONS (Legal & Project Pages)
   ============================================================================= */

/* Base back button styles */
.project-back-arrow {
    position: fixed;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    color: var(--MBM-dark);
    text-decoration: none;
    transition: transform 0.2s ease;
    z-index: 5;
}

/* Show on sub-pages (project and legal pages) */
.header.sub-page .project-back-arrow {
    display: flex;
}

/* Fallback: show back arrow on legal pages even before JS runs */
body.legal-page .header .project-back-arrow {
    display: flex;
}

/* SVG styles */
.project-back-arrow svg {
    width: clamp(40px, 8vw, 60px);
    height: clamp(40px, 8vw, 60px);
    fill: none;
    stroke: var(--MBM-dark);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hover effects */
.project-back-arrow:hover {
    transform: translate(calc(-5px), -50%);
}

/* Media queries for back buttons */
@media screen and (min-width: 1800px) {
    .project-back-arrow {
       right: 4vw;
    }
}

@media (max-width: 768px) {
    .project-back-arrow {
        right: 3vw;
    }
}