/**
 * Header and Services Navigation Interaction Styles
 * Controls the relationship between main header and services navigation
 */

/* Header Transition */
.header {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform; /* Optimize for animations */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header.hidden {
    transform: translateY(-100%);
    box-shadow: none; /* Remove shadow when hidden */
    pointer-events: none; /* Prevent interaction with hidden header */
}

/* Services Nav Transitions */
.services-nav {
    transition: all 0.3s ease, top 0.3s ease, width 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
    will-change: top, width, margin; /* Optimize for animations */
    z-index: 999; /* Just below header by default */
}

/* When services nav is fixed */
.services-nav.fixed {
    position: fixed;
    top: 80px; /* Default position when header is visible */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    left: 0;
    right: 0;
}

/* When header is hidden and services nav takes its place */
.services-nav.fixed.header-hidden {
    top: 0 !important;
    border-radius: 0;
    width: 100% !important;
    margin: 0 !important;
    z-index: 1000; /* Same z-index as header when it's hidden */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Stronger shadow when at the top */
    background-color: #0a0a0a; /* Dark background like the example */
    left: 0;
    right: 0;
}

/* Style adjustments when services nav is at the top */
.services-nav.header-hidden .services-nav-grid {
    padding-left: calc(var(--spacing-md) + 5px); /* Slightly more padding when at the top */
    padding-right: calc(var(--spacing-md) + 5px);
}

/* Active item styling when services nav is at the top */
.services-nav.header-hidden .service-nav-item.active {
    color: #fff;
    font-weight: 600;
}

/* Body adjustments to prevent content jumps */
body.services-nav-fixed {
    padding-top: var(--spacing-lg);
}

/* Ensure content below doesn't jump when services nav becomes fixed */
body.header-hidden .page-header {
    margin-top: 0;
}

/* Light mode adjustments */
.light-mode .services-nav.fixed.header-hidden {
    box-shadow: 0 2px 10px rgba(0, 70, 173, 0.1);
}

/* Mobile adjustments */
@media (max-width: 992px) {
    .services-nav.fixed {
        top: 70px; /* Adjust for smaller header on tablets */
    }
}

@media (max-width: 768px) {
    .services-nav {
        top: 60px; /* Position below mobile header by default */
        width: 100% !important; /* Full width on mobile */
        margin: 0 !important; /* No margins on mobile */
    }
    
    .services-nav.fixed {
        top: 60px; /* Adjust for smaller header on mobile */
        position: fixed;
        width: 100% !important;
        left: 0;
        right: 0;
    }
    
    .services-nav.fixed.header-hidden {
        top: 0 !important;
        background-color: #0a0a0a; /* Dark background like the example */
        height: 40px; /* Slim height like the example */
        min-height: 40px;
        display: flex;
        align-items: center;
        position: fixed;
        width: 100% !important;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    
    /* Ensure content below doesn't jump on mobile */
    body.header-hidden .page-header {
        padding-top: var(--spacing-md);
    }
    
    /* Style the services nav grid when header is hidden on mobile */
    .services-nav.fixed.header-hidden .services-nav-grid {
        padding: 0 0.75rem;
    }
    
    /* Style the service nav items when header is hidden on mobile */
    .services-nav.fixed.header-hidden .service-nav-item {
        height: 40px;
        min-height: 40px;
        padding: 0 1rem;
        font-size: 0.85rem;
    }
    
    /* Adjust the scroll indicators on mobile when header is hidden */
    .services-nav.fixed.header-hidden .scroll-indicator {
        opacity: 0.8; /* Make indicators more visible */
        width: 32px;
        height: 32px;
    }
    
    /* Adjust icon size in services nav when header is hidden */
    .services-nav.fixed.header-hidden .service-nav-icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        margin-bottom: 0;
    }
    
    /* Make service nav items more compact when header is hidden */
    .services-nav.fixed.header-hidden .service-nav-item i {
        font-size: 0.8rem;
    }
    
    /* Add a subtle transition effect when switching between header and services nav */
    .header,
    .services-nav.fixed {
        transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
    }
}