/**
 * Responsive Styles
 * All media queries consolidated here
 * Mobile-first approach
 */

/* ==================== Small Devices (576px and up) ==================== */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* ==================== Medium Devices (768px and up) ==================== */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    /* Header adjustments */
    #fpa-header-site-header.fpa-header-full-header .fpa-header-brand {
        font-size: 3rem;
    }
    
    /* Form rows stay 2-column */
    .form-row,
    .fpa-popup-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================== Large Devices (992px and up) ==================== */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    /* Footer grid */
    .footer-container {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ==================== Extra Large Devices (1200px and up) ==================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* ==================== Mobile Specific (max-width: 992px) ==================== */
@media (max-width: 992px) {
    #fpa-header-site-header.fpa-header-full-header { 
        min-height: 210px; 
    }
    
    .fpa-header-main { 
        padding: 20px 10px 0; 
    }
    
    #fpa-header-site-header.fpa-header-full-header .fpa-header-brand { 
        font-size: 2.2rem; 
    }
}

/* ==================== Mobile Specific (max-width: 768px) ==================== */
@media (max-width: 768px) {
    /* Typography scaling */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    
    /* Forms stack vertically */
    .form-row,
    .fpa-popup-form-row {
        grid-template-columns: 1fr;
    }
    
    /* Footer stacks */
    .footer-container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    /* Header mobile adjustments */
    #fpa-header-site-header.fpa-header-full-header { 
        min-height: 60px; 
    }
    
    .fpa-header-main { 
        display: none; 
    }
    
    /* Popup adjustments */
    .firework-popup-container {
        width: 95%;
        max-height: 95vh;
    }
    
    /* Form adjustments */
    .firework-form {
        padding: 30px 20px;
    }
}

/* ==================== Small Mobile (max-width: 480px) ==================== */
@media (max-width: 480px) {
    :root {
        --space-md: 1rem;
        --space-lg: 1.5rem;
    }
    
    .container {
        padding: 0 var(--space-sm);
    }
    
    /* Further reduce heading sizes */
    h1 { font-size: 1.75rem; }
    
    /* Buttons full-width on mobile */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Hide action buttons on smallest screens */
    .fpa-header-action-buttons {
        display: none;
    }
}