/**
 * BH Maat Berekenen Online - Mobile Stylesheet
 * Version: 1.0.0
 * Description: Mobile-specific styles (max-width: 768px)
 */

@media (max-width: 768px) {
    /* Typography adjustments */
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .lead {
        font-size: 1.125rem;
    }
    
    /* Container adjustments */
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Header & Navigation */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--background);
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        transition: transform var(--transition-base);
        z-index: 999;
    }
    
    .main-nav.active {
        transform: translateY(0);
    }
    
    .main-nav ul {
        flex-direction: column;
        padding: var(--spacing-lg);
        gap: 0;
    }
    
    .main-nav li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    
    .main-nav a {
        display: block;
        padding: var(--spacing-md);
        width: 100%;
    }
    
    /* Hero section */
    .hero {
        padding: var(--spacing-xl) 0;
    }
    
    .hero h1 {
        font-size: 1.75rem;
    }
    
    .hero-intro {
        text-align: left;
        padding: 0 var(--spacing-md);
    }
    
    .trust-badges {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .badge {
        justify-content: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        padding: 0 var(--spacing-md);
    }
    
    .btn {
        width: 100%;
    }
    
    /* Calculator steps */
    .calculator-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .step {
        padding: var(--spacing-lg);
    }
    
    /* Share buttons */
    .share-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Internal links */
    .links-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Cookie banner */
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-buttons {
        width: 100%;
        flex-direction: column;
    }
    
    .cookie-buttons button,
    .cookie-buttons a {
        width: 100%;
    }
    
    /* Page content */
    .page-content {
        padding: var(--spacing-lg);
    }
    
    /* Tables */
    table {
        font-size: 0.875rem;
    }
    
    /* Forms */
    input, select, textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero h1 {
        font-size: 1.5rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}