/* ===================================
   FIXED HEADER SYSTEM
   Makes headers sticky on scroll
   =================================== */

/* Desktop only - Mobile has its own rules in mobile-layout-fix.css */
@media screen and (min-width: 768px) {
    /* Adjust body padding for fixed headers */
    body {
        padding-top: 140px !important; /* 40px green + 60px white + 40px blue */
    }
    
    body.homepage {
        padding-top: 140px !important; /* Same for homepage with blue bar visible */
    }
    
    body.no-categories {
        padding-top: 100px !important; /* When blue bar is hidden */
    }
    
    /* GREEN HEADER BAR - FIXED */
    .header-contact {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 40px !important;
        background: #81d742 !important;
        z-index: 10002 !important;
        display: block !important;
    }
    
    /* WHITE MAIN HEADER - FIXED - OVERRIDE WITH HIGHER SPECIFICITY */
    body .new-header,
    body.homepage .new-header,
    body:not(.homepage) .new-header,
    header.new-header {
        position: fixed !important;
        top: 40px !important; /* Below green bar */
        left: 0 !important;
        width: 100% !important;
        height: 60px !important; /* Slightly reduced height */
        background: white !important;
        z-index: 10001 !important;
        display: block !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    /* Adjust header content for smaller height */
    .new-header .header-main-content {
        height: 60px !important;
    }
    
    .new-header .logo-section {
        height: 45px !important; /* Smaller logo */
    }
    
    .new-header .logo-section img {
        height: 45px !important;
    }
    
    /* BLUE NAVIGATION BAR - FIXED AND TOGGLEABLE - OVERRIDE WITH HIGHER SPECIFICITY */
    body .meniu-principal,
    body.homepage .meniu-principal,
    body:not(.homepage) .meniu-principal,
    div.meniu-principal {
        position: fixed !important;
        top: 100px !important; /* Below green + white headers */
        left: 0 !important;
        width: 100% !important;
        height: 40px !important;
        background: #0066cc !important;
        z-index: 10000 !important;
        transition: transform 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* ALWAYS show blue bar on ALL pages */
    body:not(.homepage) .meniu-principal {
        transform: translateY(0) !important; /* Always visible */
    }
    
    /* Show blue bar when toggled - not needed anymore */
    body:not(.homepage) .meniu-principal.show-categories {
        transform: translateY(0) !important;
    }
    
    /* Always show on homepage */
    body.homepage .meniu-principal {
        transform: translateY(0) !important;
    }
    
    /* Categories toggle button for non-homepage pages */
    .categories-toggle-btn {
        position: fixed !important;
        top: 55px !important; /* Centered in white header */
        left: 20px !important;
        width: 120px !important;
        height: 30px !important;
        background: #0066cc !important;
        color: white !important;
        border: none !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        z-index: 10003 !important;
        display: none !important; /* Hidden by default */
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        transition: background 0.3s ease !important;
    }
    
    /* Hide toggle button on homepage */
    body.homepage .categories-toggle-btn {
        display: none !important;
    }
    
    /* Show toggle button on non-homepage pages */
    body:not(.homepage) .categories-toggle-btn {
        display: flex !important;
    }
    
    .categories-toggle-btn:hover {
        background: #0052a3 !important;
    }
    
    .categories-toggle-btn i {
        font-size: 14px !important;
    }
    
    /* Adjust main content positioning */
    main,
    .main-content,
    .container-fluid {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Hero carousel adjustment */
    #heroCarousel {
        margin-top: 20px !important;
    }
    
    /* Adjust for pages with visible categories */
    body.categories-visible main {
        padding-top: 40px !important;
    }
}

/* Ensure proper stacking order */
.header-contact {
    z-index: 10002 !important;
}

.new-header {
    z-index: 10001 !important;
}

.meniu-principal {
    z-index: 10000 !important;
}

/* Categories animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}