/* ==========================================================================
   VFW POST 1298 - BOWLING GREEN, KY
   Fluid Modern Responsive Adjustments (responsive.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Large Tablet Landscapes & Small Desktops (Under 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-banner--large .hero-title {
        font-size: 3rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   2. Tablets & Mobile Layouts (Under 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Main Layout Sections */
    section {
        padding: 4rem 0;
    }
    
    /* Hero Systems */
    .hero-banner {
        padding: 4rem 0;
        text-align: center;
    }
    
    .hero-container {
        margin: 0 auto;
    }
    
    .hero-title, 
    .hero-banner--large .hero-title {
        font-size: 2.25rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    /* Mobile Navigation Mechanics Override */
    .nav-toggle {
        display: block;
        z-index: 1100;
    }
    
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--color-surface);
        box-shadow: var(--shadow-lg);
        padding: 6rem 2rem 2rem 2rem;
        transition: right 0.3s var(--transition-smooth);
        z-index: 1050;
    }
    
    .main-nav--open {
        right: 0;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    
    .nav-link {
        font-size: 1.15rem;
        width: 100%;
    }
    
    /* Active State Icon Transformation for Hamburger Button */
    .main-nav--open-toggle .nav-toggle-inner {
        transform: rotate(45deg);
    }
    
    .main-nav--open-toggle .nav-toggle-inner::before {
        top: 0;
        transform: rotate(90deg);
    }
    
    .main-nav--open-toggle .nav-toggle-inner::after {
        bottom: 0;
        opacity: 0;
    }
    
    /* Card Framework and Layout Grids */
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* --------------------------------------------------------------------------
   3. Small Mobile Devices (Under 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .logo-title {
        font-size: 1.1rem;
    }
    
    .logo-subtitle {
        font-size: 0.75rem;
    }
    
    .hero-actions .btn {
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
}