/* Mobile Optimization for Medicare Landing Page */

/* Mobile-First Responsive Design */
@media (max-width: 768px) {
    /* Typography adjustments for mobile */
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem; /* Consistent bottom margin for headlines */
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    p {
        font-size: 1rem;
    }
    
    /* Layout adjustments */
    .container {
        padding: 0 15px;
    }
    
    section {
        padding: 2rem 0; /* Consistent vertical padding for sections */
        margin-bottom: 0; /* Remove default bottom margin from sections */
    }

    /* Specific section padding adjustments if needed (overrides general rule) */
    .hero {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .medicare-stats {
        padding-top: 2.5rem; /* Adjust top padding if needed */
        padding-bottom: 2.5rem;
    }
    
    .expertise {
        padding-top: 2rem;
        padding-bottom: 1rem; /* Reduce bottom padding to remove gap */
    }

    .guarantee {
        padding-top: 2rem; /* Increased from 1rem to add more space above */
        padding-bottom: 2rem;
    }

    .value-stack {
        padding-top: 2rem;
        padding-bottom: 2rem; /* Increased from 1rem to add more space below */
    }

    .urgency {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .faq {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .final-cta {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem; 
    }

    .order-form {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Logo container adjustments */
    .logo-container {
        padding: 1rem 0;
    }
    
    .logo img {
        height: 36px; /* 1. Fix: Match desktop height */
    }
    
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    nav ul li {
        margin: 0.5rem 0.75rem;
    }
    
    /* Hero section adjustments */
    .hero .container {
        flex-direction: column-reverse;
        gap: 1rem;
    }
    
    .hero-image {
        max-width: 90%;
        margin: 0 auto;
    }
    
    .hero-image img {
        max-width: 100%;
        width: 300px; /* Make the hero image larger on mobile */
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-content .cta-button {
        text-align: center;
    }
    
    /* Stats adjustments */
    .stats-container {
        grid-template-columns: 1fr;
    }
    
    .stat-box {
        width: 100%;
    }
    
    /* Benefits section adjustments */
    .benefits-container {
        grid-template-columns: 1fr;
    }
    
    /* Content list adjustments */
    .content-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .content-icon {
        margin: 0 0 1rem 0;
    }
    
    /* Testimonials adjustments */
    .testimonials-container {
        flex-direction: column;
    }
    
    /* Author section adjustments */
    .author-content {
        flex-direction: column;
        text-align: center;
    }
    
    .author-image {
        margin: 0 auto 1.5rem;
    }
    
    /* Guarantee section adjustments */
    .guarantee-content {
        flex-direction: column;
        text-align: center;
        padding: 2rem; /* Adjust padding */
    }
    
    .guarantee-image {
        margin: 0 auto 1.5rem;
    }
    
    /* Primary offer adjustments */
    .primary-offer {
        flex-direction: column;
        text-align: center;
    }
    
    .primary-offer .offer-image {
        margin: 0 auto 1.5rem;
    }
    
    /* Bonus offer adjustments */
    .bonus-offer {
        flex-direction: column;
        text-align: center;
    }
    
    .bonus-icon {
        margin: 0 auto 1rem;
    }
    
    /* CTA button adjustments */
    .button {
        width: 100%;
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    
    .cta-button.large .button {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
    
    /* Form adjustments */
    .card-extra-details {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Footer adjustments */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    /* Value Stack Adjustments */
    .value-line.today {
        font-size: 1.3rem; /* 5. Fix: Reduce font size on mobile */
        flex-direction: column; /* Stack label and amount */
        text-align: center;
        gap: 0.25rem;
    }

    /* Reduce secure checkout font size */
    .secure-checkout {
        font-size: 0.9rem; /* Make font smaller on mobile */
        padding: 0.8rem; /* Slightly reduce padding */
    }

    /* Better button contrast */
    .primary-button {
        background-color: var(--success-color);
        color: white;
        font-weight: 700;
        border: none;
        padding: 15px 20px;
        font-size: 18px;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }
    
    .hero .container {
        gap: 2rem;
    }
    
    .benefits-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-container {
        flex-wrap: wrap;
    }
    
    .testimonial-box {
        flex-basis: calc(50% - 1rem);
    }
}

/* Touch-friendly adjustments */
@media (max-width: 1024px) {
    /* Larger touch targets */
    nav ul li a,
    .button,
    input[type="radio"] + label {
        min-height: 44px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* FAQ question: keep space-between so toggle stays right */
    .faq-question {
        min-height: 44px;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Form elements */
    input, select, textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 12px;
    }
    
    /* Increase spacing between interactive elements */
    .pain-points-list li,
    .content-item,
    .faq-item {
        margin-bottom: 1rem;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Increase contrast */
    .testimonial-box {
        background-color: rgba(255, 255, 255, 0.15);
    }
    
    /* Increase tap target size */
    .faq-toggle {
        min-width: 30px;
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve form usability */
    label {
        margin-bottom: 8px;
        display: block;
    }
    
    /* Better focus states */
    a:focus, button:focus, input:focus, textarea:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 3px;
    }
}

/* Senior-friendly adjustments */
@media (max-width: 768px) {
    /* Larger text for seniors */
    body {
        font-size: 18px; /* This might override base mobile size - check consistency */
    }
    
    p, li, label {
        font-size: 18px;
        line-height: 1.7;
    }
    
    /* Simpler layout */
    .stats-container,
    .benefits-container,
    .content-list {
        gap: 1.5rem;
    }
    
    /* Increased spacing */
    section {
        margin-bottom: 0; 
    }
    
    /* Better button contrast */
    .primary-button {
        background-color: var(--success-color);
        color: white;
        font-weight: 700;
        border: none;
        padding: 15px 20px;
        font-size: 18px;
    }
    
    /* Improved form readability */
    input, select, textarea {
        font-size: 18px;
        padding: 15px;
    }
}

/* High contrast mode toggle (to be activated via JavaScript) */
.high-contrast {
    --text-color: #000000;
    --background-color: #FFFFFF;
    --primary-color: #006666;
    --secondary-color: #002244;
    --section-bg-light: #F0F0F0;
    --section-bg-dark: #002244;
    --border-color: #000000;
    
    color: var(--text-color);
    background-color: var(--background-color);
}

.high-contrast .button {
    border: 2px solid black;
}

.high-contrast .primary-button {
    background-color: var(--primary-color);
    color: white;
}

/* Font size adjustments (to be activated via JavaScript) */
.larger-text {
    font-size: 125% !important;
}

.larger-text h1 {
    font-size: 3.25rem !important;
}

.larger-text h2 {
    font-size: 2.5rem !important;
}

.larger-text h3 {
    font-size: 1.75rem !important;
}

.larger-text p, 
.larger-text li, 
.larger-text label {
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
}

/* Accessibility toolbar */
.accessibility-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 5px 20px;
    background-color: var(--section-bg-light);
}

.accessibility-toolbar button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
}

.accessibility-toolbar button:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Font loading optimization */
/* Add font-display: swap to ensure text is visible while fonts are loading */
@font-face {
    font-family: 'Merriweather';
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    font-display: swap;
}

/* Performance optimizations */
img {
    max-width: 100%;
    height: auto;
}

/* Add simple loading state */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-load.loaded {
    opacity: 1;
}

/* JavaScript to add to the page */
/*
document.addEventListener('DOMContentLoaded', function() {
    // High contrast toggle
    document.getElementById('high-contrast-toggle').addEventListener('click', function() {
        document.body.classList.toggle('high-contrast');
    });
    
    // Font size toggle
    document.getElementById('font-size-toggle').addEventListener('click', function() {
        document.body.classList.toggle('larger-text');
    });
    
    // Lazy loading images
    const lazyImages = document.querySelectorAll('.lazy-load');
    
    if ('IntersectionObserver' in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.add('loaded');
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});
*/