/* ========================================
   SOHAIBIONICS HEADER - RESPONSIVE DISPLAY LOGIC
   ======================================== */

/* Default: Desktop styles */
.mobile-header {
    display: none;
}

.desktop-header {
    display: block;
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
    .desktop-header {
        display: none;
    }
    .mobile-header {
        display: block;
    }
}

/* Tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .desktop-header {
        display: block;
    }
    .mobile-header {
        display: none;
    }
}

/* Desktop (1024px and above) */
@media (min-width: 1024px) {
    .desktop-header {
        display: block;
    }
    .mobile-header {
        display: none;
    }
}

/* ========================================
   SHARED HEADER STYLES
   ======================================== */

/* Material Icons Color */
.material-icons {
    color: #fff;
    fill: #fff;
}

/* Search button icon color */
.search-btn .material-icons {
    color: #666 !important;
    fill: #666;
}

/* Category trigger color */
.dropdown > a {
    color: #fff;
    fill: #fff;
}

/* ========================================
   GLOBAL HEADER UTILITIES
   ======================================== */

/* Hide elements based on screen size */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* ========================================
   HEADER ANIMATIONS (Shared)
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   HEADER ACCESSIBILITY (Shared)
   ======================================== */

/* Focus indicators */
.header-focus:focus {
    outline: 2px solid #154880;
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   HEADER PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Hardware acceleration for animations */
.header-animated {
    transform: translateZ(0);
    will-change: transform;
}

/* Smooth scrolling for mobile */
.mobile-scroll {
    -webkit-overflow-scrolling: touch;
}