/* Responsive Breakpoints */

/* Tablet & Mobile (900px and down) - iPad Pro and larger get desktop nav */
@media (max-width: 900px) {
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    
    .hamburger {
        display: block;
    }
    
    /* Hide nav-links by default when hamburger is visible */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        flex-direction: column;
        padding: 24px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        text-align: center;
        z-index: 1001;
        border-top: 1px solid #eee;
    }
    
    /* Show nav-links when active class is added */
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        width: 100%;
        margin: 10px 0;
    }
    
    .btn-join {
        width: 100%;
        margin-top: 16px;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }

    /* Reduce section padding on tablets for better space usage */
    .section-padding {
        padding: 60px 0 !important;
    }

    /* Community Layers - 2 columns on tablet */
    .community-layers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile Only (768px and down) */
@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }

    /* Increase navbar height on mobile to accommodate centered logo */
    .navbar {
        padding: 20px 0 !important;
        min-height: 60px !important;
    }
    
    /* Center logo in header on mobile only */
    .nav-container {
        justify-content: center !important;
        position: relative !important;
        align-items: center !important;
        min-height: 60px !important;
    }
    
    .logo {
        position: absolute !important;
        left: 50% !important;
        -webkit-transform: translateX(-50%) !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .logo img {
        height: 32px !important;
        width: auto !important;
    }
    
    /* Hamburger menu positioning on mobile - move to right side */
    .hamburger {
        position: absolute !important;
        right: 24px !important;
        left: auto !important;
        z-index: 1002 !important;
        top: 50% !important;
        -webkit-transform: translateY(-50%) !important;
        transform: translateY(-50%) !important;
        font-size: 20px !important;
        padding: 8px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hamburger i {
        font-size: 20px !important;
    }

    /* Compact button for section headers */
    .btn-compact {
        padding: 8px 14px;
        font-size: 16px;
        width: auto;
    }

    /* Grid collapses */
    .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Reduce card padding on mobile for better space usage */
    .card {
        padding: 20px !important;
    }

    /* Further reduce container padding on mobile for maximum usable space */
    .container {
        padding: 0 12px !important;
    }

    /* Adjust grid minimums on mobile to prevent forcing single column too early */
    #chapters-grid,
    #events-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

    /* Reduce text line length on mobile for better readability */
    section .container {
        max-width: 600px !important;
    }

    /* Community Layers - 1 column on mobile */
    .community-layers-grid {
        grid-template-columns: 1fr !important;
    }

    /* Timeline - Stack vertically on mobile */
    .timeline-item {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 32px !important;
    }

    .timeline-date {
        min-width: 100% !important;
        text-align: left !important;
        margin-bottom: 8px !important;
    }

    .timeline-line {
        display: none !important;
    }

    .timeline-content {
        width: 100% !important;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .section-padding {
        padding: 60px 0;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .btn {
        width: auto;
        padding: 16px 32px !important; /* Increase touch target to 48px minimum for accessibility */
        min-height: 48px;
    }
    
    /* Hero section mobile adjustments - true vertical centering */
    .hero {
        min-height: 100vh !important; /* Fallback for older browsers */
        min-height: -webkit-fill-available !important; /* iOS Safari < 15.4 fix */
        min-height: 100dvh !important; /* Modern browsers with dynamic viewport */
        height: 100vh !important; /* Fallback */
        height: -webkit-fill-available !important; /* iOS Safari < 15.4 fix */
        height: 100dvh !important; /* Modern browsers */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
    }
    
    /* Hero container - ensure vertical centering on mobile */
    .hero .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        flex: 0 0 auto !important; /* Don't grow or shrink */
    }
    
    /* Adjust body padding on mobile to account for navbar */
    body {
        padding-top: 60px !important; /* Match mobile navbar height */
    }
    
    /* Smaller hero title on mobile */
    .hero h1 {
        font-size: 28px !important;
        line-height: 1.2;
        margin-bottom: 20px !important;
    }
    
    /* Smaller hero copy text on mobile */
    .hero p {
        font-size: 16px !important;
        line-height: 1.5;
        margin-bottom: 24px !important;
        white-space: normal !important; /* Allow text wrapping on mobile */
        max-width: 100% !important;
    }
    
    /* Roadmap container - make square on mobile */
    /* Use padding-bottom trick to force square since inline styles override aspect-ratio */
    .roadmap-container {
        aspect-ratio: 1 / 1 !important;
        height: 0 !important;
        padding-bottom: 100% !important;
        position: relative !important;
    }
    
    .roadmap-container > img,
    .roadmap-container > div {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Footer - center text and social icons on mobile */
    .footer-logo {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer-logo p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    
    .footer-logo img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Center social icons container on mobile */
    #social-links-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    
    #social-links-container > div {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto !important;
    }
    
    /* Section headers with pill buttons - stack and center on mobile */
    .d-flex.justify-between.align-center {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .d-flex.justify-between.align-center h2 {
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    
    .d-flex.justify-between.align-center .btn-compact {
        margin: 0 auto !important;
    }
}