/* Responsive design - Mobile-first approach */

/* Medium devices (tablets, 992px and down) */
@media (max-width: 992px) {
    .hero-content p {
        font-size: 1.1rem;
    }

    .logo-container img {
        max-width: 250px;
    }

    .device-showcase {
        height: 450px;
        margin-top: -120px;
    }
}

/* Small devices (landscape phones, 768px and down) */
@media (max-width: 768px) {
    :root {
        --hero-height: 75vh; /* Increased to accommodate content */
        --logo-max-width: 200px;
        --device-showcase-height: 350px;
    }

    /* Hide navbar on mobile */
    #main-navbar {
        display: none !important;
    }

    .background-container {
        height: var(--hero-height);
        padding-top: 40px; /* Ensure logo isn't cut off */
    }

    .hero-content {
        position: absolute;
        top: 50%; /* Center content in available space */
        left: 50%;
        transform: translate(-50%, -50%); /* True centering */
        width: 100%;
        text-align: center;
    }

    .logo-container {
        display: block;
        margin: 0 auto var(--spacing-lg);
    }
    
    .logo-container img {
        max-width: var(--logo-max-width);
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .device-showcase {
        height: var(--device-showcase-height);
        margin-top: -100px;
    }

    /* Improved button layout for mobile */
    .hero-buttons {
        margin-bottom: var(--spacing-xxl);
    }
    
    .hero-buttons .btn {
        display: block;
        width: 90%;
        max-width: 300px;
        margin: 0 auto var(--spacing-md) auto;
        min-height: 44px; /* iOS minimum touch target */
        position: relative;
        z-index: var(--z-buttons);
    }

    /* Hide scroll indicator on mobile */
    .scroll-indicator-container {
        display: none !important;
    }

    /* Wave animations adjustment for mobile */
    .waves {
        height: 40px;
        min-height: 40px;
        z-index: var(--z-waves);
        position: absolute;
        bottom: 0;
    }
    
    /* Ensure enough space between buttons and waves */
    .hero-buttons {
        margin-bottom: calc(var(--spacing-xxl) + 30px);
    }
}

/* Extra small devices (portrait phones, 576px and down) */
@media (max-width: 576px) {
    :root {
        --hero-height: 80vh; /* More height for small screens */
        --logo-max-width: 180px;
        --device-showcase-height: 220px;
    }

    .background-container {
        height: var(--hero-height);
        padding-top: 30px; /* Balance between space and content */
    }

    .hero-content {
        /* Inherit centering from parent media query */
        padding: 0 var(--spacing-md);
    }

    .logo-container {
        margin-bottom: var(--spacing-md); /* Space between logo and text */
    }
    
    .logo-container img {
        max-width: var(--logo-max-width);
        opacity: 1 !important;
        visibility: visible !important;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)) !important;
    }

    .device-showcase {
        height: var(--device-showcase-height);
        margin-top: -20px;
    }
    
    .device-art-container {
        right: 15%;
        height: 100%;
    }
    
    #device-art-framed {
        height: 100%;
        width: auto;
        max-width: 150px;
        filter: none !important;
    }


    /* Improved mobile typography */
    .hero-content p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Better spacing for mobile */
    .content-section,
    .feature-section,
    .publications-section {
        padding: 4rem 0;
    }
    
    .feature-section {
        margin-top: 2rem;
    }
    
    /* Wearables section mobile styles */
    .wearables-intro {
        font-size: 1rem;
    }
    
    .wearables-subsection {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }
    
    .wearables-subsection h3 {
        font-size: 1.25rem;
    }
    
    /* Mobile stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .tech-list {
        grid-template-columns: 1fr;
    }
    
    .lead-paragraph {
        font-size: 1rem;
    }
}

/* Very small devices (320px and down) */
@media (max-width: 375px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-number {
        font-size: 1.75rem;
    }
    
    :root {
        --logo-max-width: 160px;
    }

    .hero-content {
        /* Inherit centering from parent media queries */
        padding: 0 var(--spacing-sm);
    }

    .hero-buttons .btn {
        width: 95%;
        font-size: 0.9rem;
        padding: 0.75rem var(--spacing-md);
        margin: 0 auto var(--spacing-lg) auto;
        min-height: 48px; /* Larger touch target for very small screens */
    }

    /* Hide the scroll indicator on very small screens to prevent overlap */
    .scroll-indicator-container {
        display: none;
    }

    .hero-content p {
        font-size: 0.9rem;
    }
    
    /* Extra margin for buttons on very small screens */
    .hero-buttons {
        margin-bottom: calc(var(--spacing-xxl) + 40px);
    }
}

/* Touch device optimizations */
@media only screen and (hover: none) and (pointer: coarse) {
    /* Improve touch targets */
    .hero-buttons .btn {
        min-height: 48px;
        margin-bottom: var(--spacing-md);
    }

    /* Reduce hover effects on touch devices */
    .feature-card:hover,
    .publication-item:hover {
        transform: none;
    }

    .hero-buttons .btn:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    /* Legacy floating text adjustments */
    #floating-text {
        display: block !important;
        width: 80% !important;
    }

    #floating-text-logo {
        margin: auto;
        width: 100%;
    }

    #device-art-framed {
        margin: 0px;
        margin-top: 20px;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
    }

    footer {
        position: initial !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn:focus {
        outline: 3px solid white;
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .parallax > use {
        animation: none;
    }

    .hero-buttons .btn {
        transition: none;
    }

    .feature-card,
    .publication-item {
        transition: none;
    }
}