/* Cognitio Nexus - Minimal Styles (Tailwind handles most styling) */

/* Prevent horizontal scroll */
html, body {
    max-width: 100vw;
}

/* Page loader hidden state */
#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Body loaded state - ensures smooth reveal */
body {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

body.loaded {
    opacity: 1;
}

/* Services Carousel - Essential 3D setup */
.services-carousel-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 480px;
    margin: 2rem auto;
    perspective: 1200px;
    overflow: visible;
}

.service-card {
    position: absolute;
    width: 100%;
    min-height: 360px;
    left: 0;
    top: 0;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.5s ease;
    backface-visibility: hidden;
    box-sizing: border-box;
}

/* Active card hover effect */
.service-card.is-active {
    cursor: default;
}

.service-card.is-active:hover {
    transform: scale(1.03) !important;
}

/* Mobile Navigation - Open state */
@media (max-width: 767px) {
    /* Ensure nav breaks out of container on mobile */
    #page-header {
        position: relative;
        z-index: 50;
        overflow: visible;
    }

    #page-header > div {
        overflow: visible;
    }

    #main-nav {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        background: rgba(10, 10, 11, 0.98);
        backdrop-filter: blur(20px);
        display: none !important;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateZ(0); /* Force hardware acceleration */
        box-sizing: border-box;
    }

    #main-nav.is-active {
        display: flex !important;
        opacity: 1;
        visibility: visible;
    }

    #main-nav ul {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 2rem 1rem;
        list-style: none;
        overflow: visible;
    }

    #main-nav ul li {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    #main-nav ul li a {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        font-size: 1.25rem;
        padding: 0.75rem 1.5rem;
        text-align: center;
        box-sizing: border-box;
    }

    /* Mobile hamburger X animation */
    #mobile-nav-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #mobile-nav-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile-nav-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Carousel responsive adjustments */
@media (max-width: 768px) {
    .carousel-container {
        overflow: visible;
        width: 100%;
        max-width: 100%;
        position: relative;
    }

    .services-carousel-container {
        max-width: 320px;
        height: 420px;
        overflow: visible;
    }

    .service-card {
        min-height: 320px;
    }
}

@media (max-width: 480px) {
    .services-carousel-container {
        max-width: 280px;
        height: 400px;
    }

    .service-card {
        min-height: 300px;
    }
}

/* Smooth scroll offset for anchor links */
section[id] {
    scroll-margin-top: 5rem;
}

/* Ensure all sections respect viewport width */
section {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}

/* Carousel container - allow 3D transforms but contain within section */
section#services .carousel-container {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    padding: 0 2rem; /* Add padding to accommodate card transforms */
}

/* Allow carousel cards to transform but keep them visually contained */
.services-carousel-container {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    section#services .carousel-container {
        padding: 0 1rem; /* Less padding on mobile */
    }
}


/* --- reCAPTCHA Styling Fixes --- */

.grecaptcha-badge {
    /* 1. Fix Z-Index: 
       Set higher than page content (usually <100) but lower than 
       your mobile nav (which is 9999) so the menu covers it when open. */
    z-index: 9000 !important; 
    
    /* 2. Force Icon-Only View (Collapsed state):
       This forces the badge to stay small (logo only) until interacted with,
       replicating the desktop hover behavior on mobile. */
    width: 70px !important;
    overflow: hidden !important;
    transition: width 0.3s ease !important;
    
    /* Ensure it stays fixed to the viewport */
    position: fixed !important;
    bottom: 14px !important;
    right: 5px !important;
}

/* 3. Reveal on Hover/Click:
   When the user taps or hovers over the icon, expand to show full text. */
.grecaptcha-badge:hover, 
.grecaptcha-badge:active {
    width: 256px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* --- Fix for Overlapping Carousel Cards on Mobile --- */

@media (max-width: 480px) {
    /* 1. Increase the container height significantly.
       This pushes the arrow buttons down, creating "safe space" for long text. */
    .services-carousel-container {
        height: 460px !important; /* Increased from 400px */
        margin-bottom: 0 !important;
    }

    /* 2. Reduce padding inside the cards on mobile only.
       This gives the text more room to breathe without making the card taller. */
    .service-card {
        padding: 1.5rem !important; /* Reduces default p-8 (2rem) */
        min-height: 400px !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligns content to top */
    }

    /* 3. Adjust the icon size slightly on mobile to save vertical space */
    .service-card .w-14 {
        width: 3rem !important;  /* w-12 */
        height: 3rem !important; /* h-12 */
        margin-bottom: 1rem !important; /* Reduce gap below icon */
    }
    
    /* 4. Ensure the arrows have plenty of clearance */
    .carousel-controls {
        margin-top: 1rem !important;
        position: relative;
        z-index: 50;
    }
}