/* ===================================
   AlphaNexus™ by SSSL - Responsive Styles
   =================================== */

/* Tablet View (max-width: 1024px) */
@media (max-width: 1024px) {
    /* Typography adjustments */
    :root {
        --text-display: 48px;
        --text-h1: 36px;
        --text-h2: 28px;
        --text-h3: 22px;
        --text-h4: 18px;
    }

    /* Container */
    .container {
        padding: 0 var(--space-md);
    }

    /* Services Grid */
    .services-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }

    /* Hero Stats */
    .hero-stats {
        max-width: 400px;
    }
}

/* Small Tablet & Large Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Navigation */
    .navbar-menu {
        display: none;
    }

    .navbar-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Hero Section */
    .hero-tracking {
        padding: calc(var(--space-4xl) + 72px) 0 var(--space-4xl);
    }

    .hero-content h1 {
        font-size: var(--text-h1);
    }

    .hero-search {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .hero-search input,
    .hero-search button {
        width: 100%;
    }

    /* Services */
    .services-container {
        grid-template-columns: 1fr;
    }

    /* Features */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* CTA Buttons */
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .cta-buttons button {
        width: 100%;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }

    .footer-links-bottom {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Map */
    #shipping-routes-map {
        height: 350px;
    }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* Typography */
    :root {
        --text-display: 36px;
        --text-h1: 32px;
        --text-h2: 24px;
        --text-h3: 20px;
        --text-h4: 18px;
    }

    /* Hero */
    .hero-tracking {
        padding: calc(var(--space-3xl) + 72px) 0 var(--space-3xl);
    }

    .hero-content {
        padding: 0 var(--space-md);
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        max-width: none;
    }

    .stat {
        display: flex;
        align-items: center;
        text-align: left;
        gap: var(--space-lg);
    }

    .stat-number {
        font-size: var(--text-h3);
    }

    /* Service Cards */
    .service-card {
        padding: var(--space-lg);
    }

    /* Feature Cards */
    .feature-card {
        padding: var(--space-lg);
    }

    /* Mobile Menu */
    .mobile-menu-content {
        padding: var(--space-md);
    }

    /* Buttons */
    .btn-primary,
    .btn-secondary,
    .btn-ghost {
        padding: 10px 20px;
        font-size: var(--text-body-sm);
    }

    /* Footer */
    .footer-links-bottom {
        gap: var(--space-md);
    }

    .footer-links-bottom a {
        font-size: var(--text-caption);
    }

    /* Map */
    #shipping-routes-map {
        height: 300px;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-tracking {
        padding: calc(var(--space-2xl) + 72px) 0 var(--space-2xl);
    }

    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        max-width: 500px;
    }
}

/* High Resolution & Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .alphanexus-logo {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Print Styles */
@media print {
    /* Hide navigation and footer */
    .navbar,
    .global-footer,
    .mobile-menu,
    .btn-primary,
    .btn-secondary,
    .cta-section {
        display: none;
    }

    /* Adjust colors for print */
    body {
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Page breaks */
    .services-grid,
    .features-section {
        page-break-before: always;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode variables can be defined here */
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .nav-link,
    .btn-primary,
    .btn-secondary,
    .btn-ghost {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Disable hover effects on touch devices */
    .service-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    .service-card:active {
        transform: scale(0.98);
    }
}

/* Custom Scrollbar for Webkit browsers */
@media screen and (min-width: 769px) {
    /* Scrollbar styles */
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        background: var(--gray-100);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--gray-400);
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gray-500);
    }
}

/* Specific Component Responsive Adjustments */

/* Tracking Input Responsive */
@media (max-width: 640px) {
    .hero-search {
        margin: 0 auto var(--space-xl);
        padding: 6px;
    }

    .hero-search input {
        padding: 14px 16px;
        font-size: 14px;
    }

    .hero-search button {
        padding: 14px 24px;
    }
}

/* Navigation Dropdown Mobile */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        margin: 0;
    }

    .dropdown-menu a {
        padding-left: var(--space-xl);
    }
}

/* Service Features List Mobile */
@media (max-width: 480px) {
    .service-features {
        font-size: var(--text-body-sm);
    }

    .service-features li {
        padding-left: 20px;
    }
}

/* Integration Notice Mobile */
@media (max-width: 640px) {
    .integration-notice {
        padding: var(--space-md);
        font-size: var(--text-body-sm);
    }
}

/* Status Badge Mobile */
@media (max-width: 480px) {
    .status-badge {
        font-size: 11px;
        padding: 3px 8px;
    }

    .status-badge::before {
        width: 5px;
        height: 5px;
    }
}

/* Footer Social Links Mobile */
@media (max-width: 480px) {
    .social-links a {
        width: 36px;
        height: 36px;
    }

    .social-links svg {
        width: 16px;
        height: 16px;
    }
}