/* ============================================
   RESPONSIVE FIXES — GlobalLogistics
   Targeted fixes for 360px and 1024px alignment
   ============================================ */

/* --- 360px Breakpoint (Mobile Small) --- */
@media (max-width: 374px) {

    /* Navbar Alignment */
    .header-inner {
        gap: 0.25rem;
    }

    /* Reduce Logo Size to prevent overflow */
    .logo-icon {
        font-size: 1.25rem !important;
    }

    .logo-text {
        font-size: 0.9rem !important;
        letter-spacing: 0px;
    }

    /* Actions Alignment */
    .header-actions {
        gap: 0.25rem;
    }

    .rtl-toggle,
    .menu-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.25rem !important;
    }

    /* Section Adjustments */
    .container {
        padding-inline: 0.75rem !important;
    }

    /* Hero Text Scaling */
    h1 {
        font-size: 2rem !important;
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    /* Prevent horizontal scroll on cards */
    .services-grid,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {

    /* Hide Auth buttons on mobile to save space */
    .header-login,
    .header-register {
        display: none !important;
    }
}

/* --- 1024px Breakpoint (Tablet Landscape) --- */
/* The user reported missing hamburger at 1024px. 
   We will force the mobile state (Hamburger) to persist UP TO and INCLUDING 1024px.
   This means Desktop Nav appears at 1025px. */

@media (max-width: 1024px) {

    /* Hide Desktop Nav */
    .nav-desktop {
        display: none !important;
    }

    /* Show Hamburger */
    .menu-btn {
        display: flex !important;
    }

    /* Ensure actions are visible */
    .header-actions {
        gap: var(--sp-4);
    }

    /* Login CTA visibility adjustment:
       We rely on layout.css to show/hide it based on 768px breakpoint.
       We DO NOT force it here, otherwise it shows up on mobile too.
    */

    /* Grid Adjustments for Tablet */
    /* Ensure grids don't look squeezed if they were switching to 4 cols too early */
    .services-grid,
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-6);
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- RTL Specific Tweaks if needed --- */
[dir="rtl"] .header-actions {
    /* Ensure no weird spacing in RTL */
    flex-direction: row;
}

[dir="rtl"] .logo {
    /* Ensure logo stays on right */
}

/* --- Tracking Form Fix (Mobile) --- */
@media (max-width: 480px) {
    .hero-tracking {
        flex-direction: column;
        padding: var(--sp-4) !important;
        gap: var(--sp-3) !important;
    }

    .hero-tracking input {
        width: 100%;
        padding: var(--sp-3) 0 !important;
        border-bottom: 1px solid var(--clr-border-light) !important;
        text-align: center;
        margin-bottom: var(--sp-2);
    }

    .hero-tracking .btn {
        width: 100%;
        justify-content: center;
    }
}
/* --- Small Mobile Screens (360px and below) --- */
@media (max-width: 400px) {
    /* Reduce button size in mobile menu for better balance */
    .mobile-auth .btn {
        padding: 0.55rem 1rem;
        font-size: 0.75rem;
        letter-spacing: 0.3px;
    }
    
    /* Ensure buttons don't get too wide on very small screens */
    .btn {
        padding: 0.6rem 1.25rem;
        font-size: 0.8rem;
    }
}