/* 
  Mexto Consulting - Responsive Overrides (2026 Core)
  Handles Mobile Drawer Navigation and Custom Media Breakpoints
*/

/* --- MOBILE HEADER DRAWER OVERLAY --- */
@media (max-width: 1024px) {
    /* Hide desktop nav menu wrapper */
    header .nav-menu-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: 100%;
        max-width: 400px;
        height: 100vh;
        background: var(--bg-light);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 8rem 3rem 3rem 3rem;
        box-shadow: -10px 0 30px rgba(15, 23, 42, 0.15);
        transition: transform var(--transition-normal), visibility var(--transition-normal);
        z-index: 999;
        overflow-y: auto;
        visibility: hidden;
    }

    .dark-header .nav-menu-wrapper,
    .dark-theme .nav-menu-wrapper {
        background: var(--bg-dark);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    }

    header.mobile-open .nav-menu-wrapper {
        transform: translateX(0);
        visibility: visible;
    }

    /* Target inner nav menu list on mobile drawer */
    header .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        width: 100%;
        padding: 0;
    }

    /* Make menu items full-width and styled for touch */
    header .nav-item {
        width: 100%;
    }

    header .nav-link {
        font-size: 1.2rem;
        padding: 0.75rem 0;
        width: 100%;
        border-bottom: 1px solid rgba(30, 47, 69, 0.05);
        color: var(--text-dark) !important;
    }

    .dark-header .nav-link,
    .dark-theme .nav-link {
        border-bottom-color: rgba(255, 255, 255, 0.05);
        color: var(--text-light) !important;
    }

    /* Submenus/Dropdowns in Mobile Drawer */
    header .dropdown-menu {
        position: static;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100%;
        box-shadow: none;
        background: transparent !important;
        border: none;
        padding-left: 1.5rem;
        padding-top: 0.5rem;
        display: none; /* Will be toggled via JS click or just shown natively on click */
    }

    header .nav-item:hover .dropdown-menu {
        display: block;
    }

    header .dropdown-link {
        padding: 0.5rem 0;
        font-size: 1rem;
        color: var(--text-muted-dark);
    }

    .dark-header .dropdown-link,
    .dark-theme .dropdown-link {
        color: var(--text-muted-light);
    }

    /* Show burger menu button */
    .burger-menu {
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* Hide desktop CTA button from header, it can go in the menu drawer list */
    header .header-cta-wrapper {
        display: none;
    }

    .mobile-cta {
        display: block;
        width: 100%;
        margin-top: 1.5rem;
        text-align: center;
    }

    /* Collapse all 2 and 3 column grids on tablet */
    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Hero layout stacking and scaling for tablet/mobile */
    .hero-section .container.grid-2 {
        grid-template-columns: 1fr !important;
        gap: 3rem;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 700px;
        margin: 0 auto;
    }

    .hero-visual {
        height: auto !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin-top: 2rem;
        width: 100%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual .glass-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 180px;
        transform: none !important;
        opacity: 1 !important;
        box-shadow: var(--shadow-md) !important;
        padding: 1.5rem !important;
        text-align: left;
    }
}


/* Base mobile overrides */
@media (max-width: 768px) {
    /* Typographic Adjustments */
    h1 {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.75rem;
    }

    p.lead {
        font-size: 1.1rem;
    }

    /* Button and block alignments */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Layout Sections */
    section {
        padding: 3.25rem 1.25rem;
    }

    .container {
        padding: 0;
    }
}

@media (max-width: 480px) {
    header {
        padding: 1rem 1rem;
    }

    header.scrolled {
        padding: 0.75rem 1rem;
    }

    section {
        padding: 2.75rem 1rem;
    }

    .bento-card {
        padding: 2rem 1.5rem;
    }

    .service-card {
        padding: 2rem 1.5rem;
    }
}