/* Mobile Responsive Enhancements for Nana Nani Cares */

/* Base Mobile Styles */
@media (max-width: 767.98px) {
    /* Header & Navigation Fixes */
    .site-navbar {
        padding: 10px 0;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    
    .site-logo img {
        max-height: 40px !important;
    }
    
    /* Ensure menu toggle is always visible */
    .d-xl-none {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    
    .site-menu-toggle {
        background: #dc3545 !important;
        color: white !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(220, 53, 69, 0.3) !important;
        transition: all 0.3s ease !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .site-menu-toggle:hover {
        background: #c82333 !important;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5) !important;
        transform: translateY(-1px);
    }
    
    .site-menu-toggle:active {
        transform: translateY(0);
    }
    
    .site-menu-toggle span {
        color: white !important;
        font-size: 24px !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    .site-menu-toggle.active {
        background: #bd2130 !important;
    }
    
    /* Mobile Menu Enhancement */
    .site-mobile-menu {
        width: 100% !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    }
    
    .site-mobile-menu .site-nav-wrap a {
        padding: 15px 20px;
        font-size: 16px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }
    
    .site-mobile-menu .site-nav-wrap a:hover {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        padding-left: 30px;
    }
    
    /* Hero Section Mobile */
    .slide-item {
        padding: 60px 0 !important;
        min-height: auto !important;
    }
    
    .slide-item h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
    
    .slide-item .lead {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .hero-features {
        margin-bottom: 30px !important;
    }
    
    .hero-features .col-md-6 {
        margin-bottom: 8px;
        font-size: 14px;
    }
    
    /* Hero CTA Buttons */
    .hero-cta .btn {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .hero-cta .btn-lg {
        padding: 15px 25px;
        font-size: 16px;
    }
    
    /* Services Section Mobile */
    .premium-services-section {
        padding: 40px 0 !important;
    }
    
    .premium-services-section h2 {
        font-size: 1.8rem !important;
    }
    
    .premium-services-section .display-4 {
        font-size: 1.8rem !important;
    }
    
    .service-card {
        margin-bottom: 20px !important;
        padding: 20px 15px !important;
    }
    
    .service-card h4 {
        font-size: 1.1rem !important;
    }
    
    .icon-container {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 15px !important;
    }
    
    .icon-container i {
        font-size: 24px !important;
    }
    
    /* Care Plans Section */
    .care-plans-section {
        padding: 40px 0 !important;
    }
    
    .plan-card {
        margin-bottom: 20px !important;
        padding: 20px 15px !important;
    }
    
    .plan-price {
        font-size: 1.5rem !important;
    }
    
    /* Stats Section */
    .stats-section {
        padding: 40px 0 !important;
    }
    
    .stat-item {
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
    
    /* Testimonials */
    .testimonial-section {
        padding: 40px 0 !important;
    }
    
    .testimonial-card {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* CTA Section */
    .cta-section {
        padding: 40px 0 !important;
        text-align: center !important;
    }
    
    .cta-section h2 {
        font-size: 1.5rem !important;
    }
    
    .cta-section .btn {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    /* Footer Mobile */
    .site-footer {
        padding: 40px 0 20px !important;
    }
    
    .footer-heading {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }
    
    .footer-contact-info {
        margin-bottom: 30px !important;
    }
    
    .social-media a {
        margin-right: 15px !important;
        padding: 10px !important;
    }
    
    /* Forms Mobile */
    .modal-dialog {
        margin: 20px !important;
        max-width: calc(100% - 40px) !important;
    }
    
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Utility Classes */
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 991.98px) {
    .slide-item h1 {
        font-size: 2.5rem !important;
    }
    
    .service-card {
        margin-bottom: 20px !important;
    }
    
    .hero-cta .btn {
        margin: 0 5px 10px 0 !important;
    }
}

/* Small Mobile Devices */
@media (max-width: 575.98px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .slide-item {
        padding: 40px 0 !important;
    }
    
    .slide-item h1 {
        font-size: 1.8rem !important;
    }
    
    .hero-features .row > div {
        margin-bottom: 5px !important;
        font-size: 13px !important;
    }
    
    .service-card {
        padding: 15px 10px !important;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .slide-item {
        padding: 30px 0 !important;
    }
    
    .slide-item h1 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .hero-cta .btn {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .site-logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Touch Device Enhancements */
@media (hover: none) and (pointer: coarse) {
    .btn {
        padding: 15px 25px !important;
        font-size: 16px !important;
    }
    
    .service-card:hover {
        transform: none !important;
    }
    
    .service-card:active {
        transform: scale(0.98) !important;
    }
}

/* Additional Mobile Fixes */
@media (max-width: 767.98px) {
    /* Fix service cards on mobile */
    .service-card {
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        border-radius: 15px !important;
    }
    
    .service-card:hover {
        transform: none !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    }
    
    /* Mobile dropdown menu styling */
    .site-mobile-menu .dropdown {
        display: none;
        padding-left: 20px;
        background: rgba(248, 249, 250, 0.5);
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    
    .site-mobile-menu .has-children {
        position: relative;
    }
    
    .site-mobile-menu .has-children .arrow-collapse {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        padding: 10px;
        transition: transform 0.3s ease;
        z-index: 2;
        background: transparent;
        border: none;
    }
    
    .site-mobile-menu .has-children .arrow-collapse.active {
        transform: translateY(-50%) rotate(180deg);
    }
    
    .site-mobile-menu .has-children > a {
        position: relative;
        padding-right: 50px;
        cursor: pointer;
        display: block;
    }
    
    .site-mobile-menu .dropdown a {
        padding: 10px 15px 10px 30px;
        font-size: 14px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        display: block;
        color: #333;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }
    
    .site-mobile-menu .dropdown a:hover {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        padding-left: 35px;
    }
    
    .site-mobile-menu .dropdown a.active {
        background: rgba(220, 53, 69, 0.15);
        color: #dc3545;
        font-weight: 600;
    }
    
    /* Mobile CTA buttons in navigation */
    .mobile-cta-buttons .btn {
        font-size: 14px;
        padding: 10px 15px;
        border-radius: 8px;
    }
    
    .mobile-social-links {
        padding: 20px 0;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    
    /* Prevent zoom on form inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Fix header on mobile */
    .site-navbar {
        min-height: 70px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    /* Optimize container padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Fix hero section background */
    .slide-item {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
}