/* =========================================
   MOBILE HEADER OPTIMIZATION
   Professional header styling for all mobile tiers
   ========================================= */

/* =========================================
   BASE MOBILE HEADER (All Mobile Devices)
   ========================================= */
@media (max-width: 991px) {

    /* Header container */
    .header {
        height: auto !important;
        padding: 8px 0 !important;
    }

    /* Ensure header is always visible */
    .header.scrolled,
    .header--solid {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(15px);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    }

    /* Logo optimization */
    .nav__logo {
        gap: 10px;
        z-index: 1001;
    }

    .nav__logo-img {
        width: 40px !important;
        height: 40px !important;
    }

    .nav__logo-name {
        font-size: 18px !important;
        letter-spacing: 0.5px;
    }

    .nav__logo-tagline {
        font-size: 8px !important;
    }

    /* Hide desktop navigation */
    .nav__list,
    .nav__actions {
        display: none !important;
    }

    /* Mobile toggle button */
    .navbar-toggler {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease !important;
    }

    .header.scrolled .navbar-toggler,
    .header--solid .navbar-toggler {
        border-color: rgba(37, 99, 235, 0.2) !important;
        background: transparent !important;
    }

    .navbar-toggler:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
        transform: scale(1.05);
    }

    .header.scrolled .navbar-toggler:hover,
    .header--solid .navbar-toggler:hover {
        background: rgba(37, 99, 235, 0.1) !important;
        border-color: rgba(37, 99, 235, 0.5) !important;
    }

    .navbar-toggler-icon {
        width: 24px !important;
        height: 24px !important;
    }

    /* Container padding */
    .header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* =========================================
   LARGE TIER (769px - 991px)
   Tablets and large phones in landscape
   ========================================= */
@media (min-width: 769px) and (max-width: 991px) {

    .header {
        padding: 10px 0 !important;
    }

    .nav__logo-img {
        width: 45px !important;
        height: 45px !important;
    }

    .nav__logo-name {
        font-size: 20px !important;
    }

    .nav__logo-tagline {
        font-size: 9px !important;
    }

    .navbar-toggler {
        width: 46px !important;
        height: 46px !important;
    }
}

/* =========================================
   MEDIUM TIER (481px - 768px)
   Standard smartphones
   ========================================= */
@media (min-width: 481px) and (max-width: 768px) {

    .header {
        padding: 6px 0 !important;
    }

    .nav__logo-img {
        width: 38px !important;
        height: 38px !important;
    }

    .nav__logo-name {
        font-size: 17px !important;
    }

    .nav__logo-tagline {
        font-size: 8px !important;
    }

    .navbar-toggler {
        width: 44px !important;
        height: 44px !important;
    }

    .header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* =========================================
   SMALL TIER (320px - 480px)
   Small smartphones
   ========================================= */
@media (max-width: 480px) {

    .header {
        padding: 5px 0 !important;
    }

    .nav__logo {
        gap: 8px;
    }

    .nav__logo-img {
        width: 36px !important;
        height: 36px !important;
    }

    .nav__logo-name {
        font-size: 16px !important;
        letter-spacing: 0.3px;
    }

    .nav__logo-tagline {
        font-size: 7px !important;
    }

    /* Larger touch target for small screens */
    .navbar-toggler {
        width: 48px !important;
        height: 48px !important;
    }

    .navbar-toggler-icon {
        width: 26px !important;
        height: 26px !important;
    }

    .header .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================
   EXTRA SMALL TIER (< 375px)
   Very small devices
   ========================================= */
@media (max-width: 374px) {

    .header {
        padding: 8px 0 !important;
    }

    .nav__logo-img {
        width: 38px !important;
        height: 38px !important;
    }

    .nav__logo-name {
        font-size: 16px !important;
    }

    .nav__logo-tagline {
        font-size: 7px !important;
    }

    .header .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* =========================================
   HEADER ANIMATIONS & INTERACTIONS
   ========================================= */
@media (max-width: 991px) {

    /* Smooth header transitions */
    .header {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Logo text transitions */
    .nav__logo-name,
    .nav__logo-tagline {
        transition: all 0.3s ease;
    }

    /* Active state for toggle button */
    .navbar-toggler:active {
        transform: scale(0.95);
    }

    /* Focus state for accessibility */
    .navbar-toggler:focus {
        outline: 2px solid rgba(37, 99, 235, 0.5);
        outline-offset: 2px;
    }
}

/* =========================================
   HEADER SCROLLED STATE OPTIMIZATION
   ========================================= */
@media (max-width: 991px) {

    /* Compact header when scrolled */
    .header.scrolled {
        padding: 8px 0 !important;
    }

    .header.scrolled .nav__logo-img {
        width: 38px !important;
        height: 38px !important;
    }

    .header.scrolled .nav__logo-name {
        font-size: 18px !important;
    }

    .header.scrolled .nav__logo-tagline {
        font-size: 8px !important;
    }
}

/* Small tier scrolled state */
@media (max-width: 480px) {

    .header.scrolled {
        padding: 6px 0 !important;
    }

    .header.scrolled .nav__logo-img {
        width: 36px !important;
        height: 36px !important;
    }

    .header.scrolled .nav__logo-name {
        font-size: 16px !important;
    }
}

/* =========================================
   LANDSCAPE ORIENTATION
   ========================================= */
@media (max-width: 768px) and (orientation: landscape) {

    .header {
        padding: 8px 0 !important;
    }

    .nav__logo-img {
        width: 38px !important;
        height: 38px !important;
    }

    .nav__logo-name {
        font-size: 18px !important;
    }

    .nav__logo-tagline {
        font-size: 8px !important;
    }
}

/* =========================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================= */
@media (max-width: 991px) {

    /* Ensure sufficient contrast */
    .header.scrolled .nav__logo-name,
    .header--solid .nav__logo-name {
        color: var(--color-primary) !important;
    }

    .header.scrolled .nav__logo-tagline,
    .header--solid .nav__logo-tagline {
        color: rgba(26, 54, 93, 0.7) !important;
    }

    /* Touch-friendly spacing */
    .nav {
        min-height: 44px;
    }

    /* Prevent text selection on toggle */
    .navbar-toggler {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}