/*
* Mobile Styles for Cognifai Theme
* Extracted for easier maintenance and mobile-specific updates.
*/

@media (max-width: 768px) {

    /* Header Layout */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 5%;
    }

    /* Reduce hero top padding on mobile to move vocalizer higher */
    .hero {
        padding-top: 1rem !important;
    }

    /* Logo Group */
    .logo-group {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        flex-grow: 0;
        flex-shrink: 0;
    }

    /* Hero Vocalizer - Large centered vocalizer for mobile */
    .hero-vocalizer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100%;
        padding: 0;
        margin-top: -60px;
        margin-bottom: 10px;
    }

    .hero-vocalizer .bar {
        width: 30px;
        background-color: #ffffff;
        border-radius: 15px;
        animation: hero-wave 1s ease-in-out infinite;
    }

    .hero-vocalizer .bar:nth-child(1) {
        animation-delay: 0s;
        height: 60px;
    }

    .hero-vocalizer .bar:nth-child(2) {
        animation-delay: 0.1s;
        height: 105px;
    }

    .hero-vocalizer .bar:nth-child(3) {
        animation-delay: 0.2s;
        height: 150px;
        /* Middle bar tallest */
    }

    .hero-vocalizer .bar:nth-child(4) {
        animation-delay: 0.1s;
        height: 105px;
    }

    .hero-vocalizer .bar:nth-child(5) {
        animation-delay: 0s;
        height: 60px;
    }

    @keyframes hero-wave {
        0%,
        100% {
            transform: scaleY(0.6);
            opacity: 0.6;
        }

        50% {
            transform: scaleY(1);
            opacity: 1;
        }
    }

    .hamburger {
        display: flex;
        z-index: 1001;
    }

    /* Force Hide Hero Vocalizer on Mobile - The Giant Bars Fix */
    .hero-visual,
    .hero-visual.mobile-hidden,
    .audio-wave,
    .audio-wave .bar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        opacity: 0 !important;
        position: absolute !important;
        z-index: -9999 !important;
        overflow: hidden !important;
    }

    /* Hamburger line styles for mobile */
    .hamburger-line {
        display: block !important;
        width: 25px !important;
        height: 2px !important;
        background-color: white !important;
        border-radius: 2px;
        transition: 0.3s;
    }

    .hero-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 2rem;
    }

    .hero-content .btn-cta {
        margin: 0 auto;
    }

    /* Nav Links Overlay */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        background-color: rgba(6, 6, 12, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        opacity: 0;
        pointer-events: none;
        z-index: 1000;
    }

    .nav-links.active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: all;
    }

    .nav-links a {
        font-size: 1.5rem;
        width: 100%;
        text-align: center;
        padding: 1rem 0;
    }

    /* General Layout adjustments */
    .hero,
    .use-case-row,
    .stats-row,
    .about-grid,
    .big-stats-row {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    /* Use Cases: Text above Image on Mobile */
    .use-cases-container {
        display: block;
        width: 100%;
    }

    .use-case-row {
        display: flex;
        flex-direction: column-reverse;
        /* Image is first in HTML, so reverse puts Text on top */
        margin-bottom: 4rem !important;
        /* Ensure spacing */
        gap: 2rem;
        width: 100%;
        margin-right: 0;
        /* Reset carousel margins */
    }

    /* For the row that was ALREADY text-first (Row 2 .reverse), we keep it column */
    .use-case-row.reverse {
        flex-direction: column;
    }

    /* Auto-Scrolling Carousel Implementation */
    /* Container for overflow */
    .features-grid,
    .timeline-container {
        display: flex;
        overflow-x: auto;
        gap: 1.5rem;
        padding-bottom: 2rem;
        padding-left: 5%;
        padding-right: 5%;
        width: 100vw;
        margin-left: -5%;
        margin-right: -5%;
        scrollbar-width: none;

        /* Auto-scroll Animation */
        /* Note: Pure CSS auto-scroll often requires duplicating content for seamless loop. 
           For a simple "slow rotation", we can use a keyframe on the container's scroll position 
           if supported, or translate content. 
           Given the constraints, we'll try a gentle auto-scroll hint via animation or rely on JS.
           
           However, the user asked for "rotate in a carousel slowly, Without the user having to swipe".
           Standard accessible pattern is CSS Scroll Snap + JS Auto Advance. 
           For now, let's keep the scroll snap but I'll add a JS snippet to main.js for auto-scroll. 
        */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .features-grid::-webkit-scrollbar,
    .timeline-container::-webkit-scrollbar {
        display: none;
    }

    /* Carousel Cards */
    .feature-card,
    .step-card {
        flex: 0 0 85vw;
        width: 85vw;
        scroll-snap-align: center;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .built-for-insurance .section-header h2 {
        font-size: 2.5rem;
    }

    /* Center all text in Built for Insurance section on mobile */
    .built-for-insurance .section-header,
    .built-for-insurance .text-content {
        text-align: center;
    }

    .built-for-insurance .text-content h3,
    .built-for-insurance .text-content p {
        text-align: center;
    }

    .features,
    .built-for-insurance,
    .about-section,
    .contact-section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 3rem;
    }

    /* Fix step circle size on mobile */
    .step-circle {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
        margin: -30px auto 20px auto;
    }

    .timeline-line {
        display: none;
    }
}