/* responsive.css - Global Mobile Adjustments */

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above the overlay */
}

.mobile-menu-btn svg {
    width: 28px;
    height: 28px;
    stroke: var(--teal);
    transition: transform 0.3s ease;
}

/* Base adjustments for responsiveness */
@media (max-width: 900px) {
    .page-wrap {
        grid-template-columns: 1fr !important;
    }
    
    .sidebar {
        position: static !important;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    /* Show hamburger */
    .mobile-menu-btn {
        display: block;
    }

    /* Transform nav-links into full screen overlay */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: flex !important; /* Override inline or previous hidden display */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease, transform 0.4s ease;
        transform: translateY(-20px);
    }

    /* Active state for menu */
    .nav-links.menu-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        font-size: 1.25rem !important;
    }

    .nav-links .nav-cta {
        font-size: 1.1rem !important;
        padding: 0.8rem 2rem !important;
        display: inline-block;
    }

    /* Fix body scroll when menu open */
    body.no-scroll {
        overflow: hidden;
    }

    /* Make sure grid blocks collapse into single column */
    .c-service-block, .needs-grid, .services-grid, .form-step, .field-grid, .about-container, .page-hero-container, .corp-hero-container {
        grid-template-columns: 1fr !important;
    }

    .field.span2 {
        grid-column: span 1 !important;
    }
}

@media (max-width: 480px) {
    /* Refine padding and text for very small screens */
    .hero {
        padding: 3rem 1.5rem !important;
    }
    
    .hero-title {
        font-size: 2.2rem !important;
    }
    
    .page-hero h1 {
        font-size: 2rem !important;
    }
    
    .corp-title {
        font-size: 2.2rem !important;
    }
    
    .form-box, .c-service-block {
        padding: 1.5rem !important;
    }
}