/* Mobile Navigation Fixes
   Makes the mobile navigation menu push content down instead of overlaying it
   Only applies to mobile views (both horizontal and vertical)
*/

/* Make the menubar icon (hamburger) white on all pages */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
    /* Fix for overlapping chat bubbles in mobile view */
    .jasmine-visual {
        flex-direction: column;
        padding-top: 30px;
        padding-bottom: 250px; /* Add extra space at bottom for chat bubbles */
    }
    
    .jasmine-avatar {
        position: relative;
        margin-bottom: 20px;
    }
    
    .chat-bubble {
        position: relative !important;
        margin: 10px auto;
        max-width: 80% !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    .chat-1 {
        order: 1;
    }
    
    .chat-2 {
        order: 2;
    }
    
    .chat-3 {
        order: 3;
    }
    
    .tech-circles {
        position: absolute;
        height: auto;
        bottom: 0;
        top: auto;
    }
    
    .tech-circle {
        position: absolute;
        width: 50px;
        height: 50px;
        font-size: 0.9rem;
    }
    
    .tc1 {
        top: auto;
        bottom: 30px;
        left: 15%;
    }
    
    .tc2 {
        top: auto;
        bottom: 100px;
        left: 5%;
    }
    
    .tc3 {
        top: auto;
        bottom: 30px;
        right: 15%;
        left: auto;
    }
    
    .tc4 {
        top: auto;
        bottom: 100px;
        right: 5%;
        left: auto;
    }

    /* Jasmine: lower tech badges; reduce extra space further by ~400px (mobile) */
    #jasmine .jasmine-visual { min-height: 440px; }
    /* Push Jasmine and badges down by ~110px total (additional 20px) for better balance */
    #jasmine .jasmine-visual { margin-top: 110px !important; }
    /* Increase bottom space to allow badges to sit lower without clipping */
    #jasmine .jasmine-visual { padding-bottom: 220px !important; }
    /* Lower Jasmine's value stream by 20px for improved spacing */
    #jasmine .value-stream { margin-top: 36px !important; }
    /* Move Jasmine tech badges further down for better balance */
    #jasmine .tc1, #jasmine .tc2, #jasmine .tc3, #jasmine .tc4 { transform: translateY(45px) !important; }
    #jasmine .tc1 { top: auto !important; bottom: 15px !important; }
    #jasmine .tc3 { top: auto !important; bottom: 15px !important; }
    #jasmine .tc2 { top: auto !important; bottom: 35px !important; }
    #jasmine .tc4 { top: auto !important; bottom: 35px !important; }

    /* CairGiver-specific: adjust tech badges height (-100px from prior) */
    #cairgiver .jasmine-visual { min-height: 1100px; }
    #cairgiver .tc1 { bottom: 780px; } /* was 880px */
    #cairgiver .tc3 { bottom: 780px; } /* was 880px */
    #cairgiver .tc2 { bottom: 850px; } /* was 950px */
    #cairgiver .tc4 { bottom: 850px; } /* was 950px */

    /* CairAttendant (CLARA/CairNurse) on Products page: mirror mobile adjustments */
    #cairattendant .jasmine-visual { min-height: 1100px; }
    #cairattendant .tc1 { bottom: 780px; }
    #cairattendant .tc3 { bottom: 780px; }
    #cairattendant .tc2 { bottom: 850px; }
    #cairattendant .tc4 { bottom: 850px; }

    /* CairGiver on Products page uses id #cairiq_products: mirror mobile adjustments */
    #cairiq_products .jasmine-visual { min-height: 1100px; }
    #cairiq_products .tc1 { bottom: 780px; }
    #cairiq_products .tc3 { bottom: 780px; }
    #cairiq_products .tc2 { bottom: 850px; }
    #cairiq_products .tc4 { bottom: 850px; }
    /* Adjust header positioning for mobile */
    header {
        position: relative !important;
    }
    
    /* Remove absolute positioning in mobile view */
    .position-absolute.w-100.top-0.start-0.z-index-high {
        position: relative !important;
    }
    
    /* Style the navbar collapse to be in normal flow with visible background */
    .navbar-collapse {
        position: relative;
        background-color: rgba(26, 37, 54, 0.98) !important; /* Darker, more opaque background */
        border-radius: 0;
        padding: 0.75rem;
        margin-top: 0.25rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    /* Ensure navbar links are visible */
    .navbar-nav .nav-link {
        color: white !important;
        font-weight: 500;
        padding: 0.5rem 1rem;
    }
    
    /* Active link styling */
    .navbar-nav .nav-link.active {
        color: #4e7df1 !important;
    }
    
    /* Keep the hero section visible but hide only the content when navbar is expanded */
    body.navbar-expanded .hero-content {
        visibility: hidden !important;
    }
    
    /* Keep the hero section structure but make it not take up space in the flow */
    body.navbar-expanded .hero {
        height: 100vh !important;
        min-height: 100vh !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }
    
    /* Keep hero background elements visible when navbar is expanded */
    body.navbar-expanded .hero-bg-img,
    body.navbar-expanded .hero-bg-overlay {
        display: block !important;
    }
    
    /* Completely eliminate any gap between navbar and hero content */
    .hero-content {
        padding-top: 0 !important;
        margin-top: -2px !important; /* More aggressive negative margin to eliminate any remaining gap */
        position: relative;
        top: -1px;
    }
    
    /* Target hero inner content to remove any internal spacing */
    .hero-inner {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Adjust navbar bottom spacing */
    .navbar-nav {
        margin-bottom: 0 !important;
    }
    
    /* Ensure no gap between navbar-collapse and hero */
    .navbar-collapse.show + .hero .hero-content {
        margin-top: -3px !important;
    }
    
    /* Remove all margins and padding from header */
    header {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Minimize navbar padding */
    .navbar {
        padding: 0.25rem 0.5rem !important;
        margin: 0 !important;
    }
    
    /* Remove any extra spacing from hero section */
    .hero {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure Jasmine section starts properly after hero section */
    #jasmine {
        margin-top: 0 !important;
        padding-top: 2rem !important;
        position: relative;
        z-index: 1;
        background-color: #fff;
    }
    
    /* When navbar is expanded, ensure jasmine section is properly positioned */
    body.navbar-expanded #jasmine {
        margin-top: 0 !important;
    }

    /* Reduce excess whitespace between sections (mobile) */
    .py-5,
    section.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Tighten section headers */
    .section-header { margin-bottom: 1.25rem !important; }
    .section-header .lead { margin-bottom: 0.5rem !important; }
    .divider { margin-top: 0.5rem !important; margin-bottom: 0 !important; }

    /* Reduce vertical gaps inside product rows */
    #jasmine .row.g-5,
    #cairgiver .row.g-5,
    #cairattendant .row.g-5 { --bs-gutter-y: 1rem; }

    /* Tighter card spacing */
    .content-card { margin-bottom: 0.75rem; }
    .feature-grid { row-gap: 0.5rem; }

    /* Take ~100px out of Jasmine's avatar name and feature container */
    #jasmine .content-card {
        margin-bottom: 0 !important; /* trim ~40px from bottom space */
        padding-bottom: 0 !important; /* remove extra inner spacing */
        overflow: visible !important; /* ensure avatar name isn't clipped */
    }
    #jasmine .jasmine-visual .avatar-name {
        font-size: 1.5rem !important; /* smaller label */
        line-height: 1.1 !important;
        margin-bottom: 0.25rem !important; /* tighter spacing under label */
        margin-top: -60px !important; /* raise name another ~20px */
        position: relative; z-index: 6; /* keep above any overlapping elements */
        transform: translateY(-60px); /* ensure visible upward shift inside flex stack */
    }

    /* Reduce top whitespace above Jasmine section header on mobile */
    #jasmine.jasmine-section,
    #jasmine {
        padding-top: 0 !important; /* remove py-5 top padding (~48px) */
        margin-top: -52px !important; /* pull section up a bit more to total ~100px trim */
    }

    /* Normalize avatar name sizing across sections on mobile */
    #jasmine .jasmine-visual .avatar-name,
    #cairattendant .jasmine-visual .avatar-name,
    #cairgiver .jasmine-visual .avatar-name {
        font-size: 1.5rem !important;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: #00c0ff; /* matches current visual style; adjust if needed */
        text-shadow: 0 2px 4px rgba(0,0,0,0.25);
    }
    #jasmine .jasmine-avatar {
        margin-top: -60px !important; /* shift avatar up by ~60px */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    /* Additional mobile fixes for very small screens */
    .hero-content {
        padding-top: 5px;
    }
    
    /* Further reduce padding for navbar collapse */
    .navbar-collapse {
        padding: 0.5rem;
    }
    
    /* Smaller buttons with less padding for very small screens */
    .navbar-collapse.show ~ section .hero-buttons .btn,
    .navbar-collapse.collapsing ~ section .hero-buttons .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }

    /* Prevent left-edge clipping: neutralize Bootstrap row negative margins
       and provide consistent side padding on key sections */
    .hero .row,
    #jasmine .row,
    #cairgiver .row,
    #cairattendant .row,
    .contact-section .row,
    .footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero .container,
    #jasmine .container,
    #cairgiver .container,
    #cairattendant .container,
    .contact-section .container,
    .footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* Allow content to show fully within Jasmine on phones */
    .jasmine-section,
    .jasmine-visual {
        overflow: visible !important;
    }

    /* Ensure inner gutters inside the features card */
    #jasmine .content-card,
    #cairgiver .content-card,
    #cairattendant .content-card {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        box-sizing: border-box;
    }

    /* Prevent inner clipping inside cards */
    .content-card {
        overflow: visible !important;
    }

    /* Slightly reduce Bootstrap gutter inside Jasmine to avoid overshoot */
    #jasmine .row {
        --bs-gutter-x: 0.75rem;
    }

    /* As a safety net, reset all rows and containers at xs to prevent any
       residual negative-margin overshoot from Bootstrap gutters */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* Ensure all section containers respect a left gutter on phones */
    section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
        width: 100%;
    }

    /* Tiny grid padding to avoid perceived clipping of first column */
    #jasmine .feature-grid,
    #cairgiver .feature-grid,
    #cairattendant .feature-grid {
        padding-left: 4px;
        padding-right: 4px;
        box-sizing: border-box;
    }
}

/* Compress spacing between CairCompanion and CairNurse for small phones and up */
@media (min-width: 400px) and (max-width: 767px) {
    /* Trim bottom of Jasmine and top of CairAttendant to reduce inter-section gap */
    #jasmine {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    #cairattendant {
        padding-top: 24px !important;
        margin-top: 0 !important; /* prevent header cut-off */
    }
    /* Ensure the CairGiver section header isn't cut off by preceding padding */
    #cairgiver {
        padding-top: 56px !important;
        margin-top: 0 !important;
    }
    /* Also tighten the shared py-5 spacing only for this band */
    #jasmine.py-5, #cairattendant.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}