/**
 * BrightAster Website
 *
 * @file mobile-header.css
 * @description Styles for the mobile and tablet header components.
 * @version 1.8 (Using Button Component)
 */

/* Prevent body scroll when sidebar is open */
body.sidebar-open {
    overflow: hidden;
}

/* Hide mobile header on desktop */
.mobile-header, .mobile-sidebar, .sidebar-overlay {
    display: none;
}

/* Show mobile header only on screens up to 1024px */
@media (max-width: 1024px) {
    .mobile-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 5%;
        z-index: 999;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        background-color: transparent;
        border-bottom: 1px solid transparent;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-header .header-logo a {
        height: 40px;
        display: flex;
        align-items: center;
        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-header .header-logo img {
        height: 50px;
        width: auto;
    }

    .mobile-header.scrolled {
        background-color: rgba(6, 6, 6, 0.8);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom-color: var(--divider-color);
        padding: 15px 5%;
    }

    .mobile-header.scrolled .header-logo a {
        height: 35px;
    }

    .hamburger-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    
    .hamburger-btn:hover {
        transform: scale(1.1);
    }

    .hamburger-btn img {
        width: 100%;
        height: auto;
    }

    .mobile-sidebar {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100%;
        background-color: var(--secondary-color);
        z-index: 1002;
        padding: 60px 30px 30px 30px;
        box-sizing: border-box;
        flex-direction: column;
        transition: right 0.5s cubic-bezier(0.77, 0, 0.18, 1);
        overflow-y: auto;
    }

    .mobile-sidebar nav {
        flex-grow: 1;
    }

    .mobile-sidebar nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-sidebar nav ul li a {
        color: var(--primary-color);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 10px;
        font-size: 18px;
        font-weight: 600;
        position: relative;
        transition: color 0.3s ease;
    }

    .mobile-sidebar nav ul li a .fa-solid,
    .mobile-sidebar nav ul li a .fa-brands {
        width: 20px;
        text-align: center;
    }

    .mobile-sidebar nav ul li a:hover,
    .mobile-sidebar nav ul li a.active {
        color: var(--accent-color);
    }

    .mobile-sidebar nav ul li a::after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 50px;
        width: 0;
        height: 2px;
        background-color: var(--accent-color);
        border-radius: 2px;
        transition: width 0.4s ease-in-out;
    }

    .mobile-sidebar nav ul li a:hover::after,
    .mobile-sidebar nav ul li a.active::after {
        width: 50%;
    }

    .sidebar-footer {
        margin-top: auto;
        text-align: center;
        color: var(--text-color);
    }

    .sidebar-footer p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 30px;
    }

    .social-icons a {
        color: var(--primary-color);
        background-color: var(--divider-color);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 20px;
        transition: all 0.3s ease;
    }

    .social-icons a:hover {
        background-color: var(--accent-color);
        transform: translateY(-5px);
    }

    /* Adjusting the new button for the sidebar */
    .mobile-sidebar .header-cta .btn-primary {
        width: 100%; /* Make button full width */
        margin: 0; /* Remove default margin */
    }

    .close-btn {
        position: absolute;
        top: 15px;
        right: 25px;
        font-size: 35px;
        color: var(--primary-color);
        background: none;
        border: none;
        cursor: pointer;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1001;
    }

    body.sidebar-open .mobile-sidebar {
        right: 0;
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }
}