/* =====================================================
   THE FIT CLUB COURTS
   Fully Corrected Responsive Design Engine
===================================================== */

/* ==============================================
   TABLET LANDSCAPE / PORTRAIT PROFILE
================================================= */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr); /*[cite: 2] */
    }

    .hero h1 {
        font-size: 32px; /*[cite: 2] */
    }
}

/* ==============================================
   SMARTPHONE & NATIVE MOBILE DISPLAYS (THE FIX)
================================================= */
@media (max-width: 768px) {
    
    .main-header {
        min-height: 70px !important;
    }
    
    .nav-container {
        height: 70px !important;
        padding: 10px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .logo-img {
        height: 48px !important;
    }

    /* 1. Hide the nav element off-screen/collapsed by default on mobile devices.
       Positions against .main-header (position:sticky), which is now the
       nearest positioned ancestor since .nav-container no longer competes
       for that role (see style.css). This is what makes top/left/width
       resolve against the full-width header instead of the inner
       centered container. */
    #nav-menu {
        position: absolute !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1) !important;
        border-top: 1px solid #eee !important;
        display: none !important; 
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important;
        height: auto !important;
    }

    /* 2. FORCE display when the active class is injected via JavaScript */
    #nav-menu.active {
        display: block !important;
    }

    /* 3. Force list items to stack vertically instead of inline layout */
    #nav-menu ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    /* 4. Ensure structural components expand to the outer border */
    #nav-menu ul li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 5. Maximize finger touch target surface space for UI items */
    #nav-menu ul li a {
        display: block !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        color: #111 !important;
        border-bottom: 1px solid #f5f5f5 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        text-align: left !important;
        transition: background 0.2s ease;
    }

    #nav-menu ul li a:hover {
        background: #f9f9f9 !important;
    }

    /* Admin Dropdown alignment rules within modern mobile panel viewports */
    .has-dropdown .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        width: 100% !important;
        background: #fdfdfd !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
    }

    .has-dropdown .dropdown-menu li a {
        padding-left: 40px !important;
        font-size: 15px !important;
        background: #fcfcfc !important;
    }

    /* Profile panel formatting details on dynamic handheld screens */
    .profile-item {
        padding: 14px 24px !important;
        border-bottom: 1px solid #f5f5f5 !important;
        display: block !important;
    }
    
    .user-profile-nav {
        background: #f5f5f5 !important;
        display: inline-flex !important;
    }
    
    .nav-user-name {
        display: inline-block !important;
    }

    /* Unhide the sandwich button wrapper completely */
    .menu-toggle {
        display: block !important; /*[cite: 2] */
        font-size: 24px !important;
        color: #111 !important;
        padding: 10px !important;
        z-index: 10000 !important;
        cursor: pointer !important;
    }

    .footer-container {
        grid-template-columns: 1fr !important; /*[cite: 2] */
        text-align: center !important; /*[cite: 2] */
    }

    .hero h1 {
        font-size: 26px !important; /*[cite: 2] */
    }
}

/* ==============================================
   MINIMAL WIREFRAME PROFILES / ULTRA-SMALL SCREENS
================================================= */
@media (max-width: 480px) {
    .btn {
        padding: 10px 18px; /*[cite: 2] */
        font-size: 14px; /*[cite: 2] */
    }

    .logo {
        font-size: 16px; /*[cite: 2] */
    }
}