/*-----------------------------------------------------------------------------------

    Custom CSS - Quina Ribeiro Website
    Description: Custom styles and mobile navigation overrides
    
-----------------------------------------------------------------------------------*/

/* ===================================
   MOBILE NAVIGATION
   =================================== */

   @media (max-width: 991px) {
    /* Hide desktop navigation completely on mobile */
    .main-menu__wrap.d-none.d-lg-flex {
        display: none !important;
    }
    
    /* Fix header layout - no centering on mobile */
    .header__main {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Ensure logo stays on the left */
    .header__logo {
        flex-shrink: 0;
    }
    
    /* Mobile menu dropdown styling */
    .mobile-menu-container {
        background: rgba(3, 2, 22, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        margin-top: 15px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Vertical menu layout */
    .mobile-menu-container .main-menu ul {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    /* Menu items styling */
    .mobile-menu-container .main-menu ul li {
        width: 100%;
        margin: 5px 0;
        list-style: none;
    }
    
    .mobile-menu-container .main-menu ul li a {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        text-align: left;
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        transition: color 0.3s ease;
    }
    
    .mobile-menu-container .main-menu ul li a:hover {
        color: #6f42c1;
    }
    
    .mobile-menu-container .main-menu ul li:last-child a {
        border-bottom: none;
    }
    
    /* Mobile CTA button */
    .mobile-cta {
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 15px;
        margin-top: 15px;
    }
    
    /* Hamburger button animation */
    .navbar-toggler[aria-expanded="true"] span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    
    .navbar-toggler[aria-expanded="true"] span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Mobile navigation positioning */
    .collapse.navbar-collapse.d-lg-none {
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    
    .header__actions {
        flex-wrap: nowrap;
        gap: 10px;
    }
    
    /* Ensure hamburger appears before other elements */
    .navbar-toggler {
        order: 1;
    }
    
    .language-switcher {
        order: 2;
    }
    
    .header__button {
        order: 3;
    }
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
    /* Logo adjustments for smaller screens */
    .header__logo a {
        font-size: 1.5rem !important;
    }
    
    /* Hamburger button positioning */
    .navbar-toggler {
        margin-left: auto;
    }
}

@media (max-width: 576px) {
    /* Extra small screens */
    .header__main {
        padding: 10px 0;
    }
    
    .navbar-collapse {
        margin-top: 15px;
        padding: 15px;
    }
    
    .main-menu ul li a {
        padding: 10px 0;
        font-size: 14px;
    }
}

/* ===================================
   CUSTOM UTILITIES
   =================================== */

/* Ensure proper z-index for mobile menu */
.main-menu__wrap .navbar-collapse {
    z-index: 9999;
}

/* Smooth transitions for mobile menu */
.navbar-collapse {
    transition: all 0.3s ease-in-out;
}

/* Focus states for accessibility */
.navbar-toggler:focus {
    outline: 2px solid #6f42c1;
    outline-offset: 2px;
}

.main-menu ul li a:focus {
    outline: 2px solid #6f42c1;
    outline-offset: 2px;
}