/* CSWR Website - Responsive Styles */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 calc(var(--spacing-unit) * 2);
    }
    
    section {
        padding: calc(var(--spacing-unit) * 6) 0;
    }
    
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.875rem; }
    h3 { font-size: 1.625rem; }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    
    /* Container */
    .container {
        padding: 0 calc(var(--spacing-unit) * 2);
    }
    
    /* Sections */
    section {
        padding: calc(var(--spacing-unit) * 5) 0;
    }
    
    /* Navigation */
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--bg-color);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: calc(var(--spacing-unit) * 2) 0;
        gap: 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        margin: calc(var(--spacing-unit) * 2) 0;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 3);
    }
    
    /* Buttons - Touch Friendly */
    .btn {
        min-height: 48px;
        min-width: 48px;
        padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    }
    
    /* Tables */
    table {
        font-size: 0.875rem;
    }
    
    th, td {
        padding: calc(var(--spacing-unit) * 1.5);
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .container {
        padding: 0 calc(var(--spacing-unit) * 1.5);
    }
    
    section {
        padding: calc(var(--spacing-unit) * 4) 0;
    }
}