/**
 * VPS Game Theme - Responsive Fixes
 * Fix các vấn đề về logo, menu mobile và layout
 */

/* ===================================
   GLOBAL RESPONSIVE IMPROVEMENTS
=================================== */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
        padding: 0 25px;
    }
}

@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    /* Fix images overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
}

/* ===================================
   HEADER MOBILE FIXES
=================================== */
@media (max-width: 768px) {
    /* Ensure header stays on top */
    .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    /* Add padding to body content */
    .site-content {
        padding-top: 80px;
    }
    
    /* Logo responsive */
    .site-branding {
        max-width: 140px !important;
    }
    
    .site-branding .custom-logo {
        max-height: 40px !important;
    }
    
    .site-title {
        font-size: 1.4rem !important;
    }
    
    /* Header CTA button mobile */
    .header-cta .btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .header-cta .btn span {
        display: inline !important;
    }
    
    /* Menu toggle always visible on mobile */
    .menu-toggle {
        display: flex !important;
    }
    
    /* Hide desktop menu structure on mobile */
    .main-navigation .primary-menu {
        display: flex !important;
    }
}

/* ===================================
   MOBILE MENU OVERLAY FIX
=================================== */
@media (max-width: 768px) {
    /* Overlay backdrop */
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* background: rgba(0, 0, 0, 0.5); */
        z-index: 9998;
        animation: fadeIn 0.3s ease;
    }
    
    /* Prevent body scroll when menu open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    /* Mobile menu panel */
    .main-navigation {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: #1a0b2e;
        box-shadow: -5px 0 30px rgba(124, 58, 237, 0.5);
        padding: 80px 0 20px;
        overflow-y: auto;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        border-left: 2px solid rgba(240, 171, 252, 0.3);
    }
    
    .main-navigation.active {
        right: 0 !important;
    }
}

/* ===================================
   PAGE CONTENT RESPONSIVE
=================================== */
@media (max-width: 768px) {
    /* Hero section */
    .hero-section {
        min-height: auto !important;
        padding: 80px 0 40px !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    /* Page headers */
    .page-header-section {
        padding: 60px 0 40px !important;
    }
    
    .page-title {
        font-size: 2rem !important;
    }
    
    /* Sections */
    .section-padding {
        padding: 50px 0 !important;
    }
    
    .section-title {
        font-size: 1.75rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    .btn-lg {
        padding: 14px 28px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .page-title {
        font-size: 1.75rem !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
}

/* ===================================
   FOOTER RESPONSIVE
=================================== */
@media (max-width: 768px) {
    .footer-widgets-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-menu {
        justify-content: center;
    }
}

/* ===================================
   UTILITY CLASSES
=================================== */
.mobile-hidden {
    display: block;
}

.mobile-visible {
    display: none;
}

@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-visible {
        display: block !important;
    }
}

/* ===================================
   FEATURES HORIZONTAL RESPONSIVE
=================================== */
@media (max-width: 992px) {
    .feature-horizontal-card {
        flex-direction: column !important;
        gap: 25px;
        padding: 25px;
    }
    
    .feature-horizontal-image {
        flex: 0 0 auto;
        width: 100%;
        height: 250px;
    }
    
    .feature-horizontal-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
    .features-horizontal {
        gap: 30px;
    }
    
    .feature-horizontal-card {
        padding: 20px;
    }
    
    .feature-horizontal-image {
        height: 220px;
    }
    
    .feature-horizontal-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .feature-horizontal-description {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    .feature-horizontal-action .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .feature-horizontal-image {
        height: 200px;
    }
    
    .feature-horizontal-title {
        font-size: 1.35rem;
    }
    
    .feature-horizontal-description ul li {
        font-size: 0.9rem;
        padding: 6px 0 6px 25px;
    }
}

/* Prevent text selection on mobile menu toggle */
.menu-toggle {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Smooth transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}