/* Responsive CSS - Zero-Waste Refill Station Kiosks */

/* Mobile First Approach - Base styles are for mobile */

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 575.98px) {
    /* Typography */
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content h2 {
        font-size: 1.27rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.84rem;
    }
    
    h3 {
        font-size: 1.30rem;
    }
    
    /* Layout adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Hero section */
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-content {
        text-align: center;
        margin-bottom: 2rem;
    padding-top: 125px;
}
    
    /* Feature cards */
    .feature-card {
        margin-bottom: 1.76rem;
    }
    
    .feature-icon {
        font-size: 2.60rem;
    }
    
    /* Service cards */
    .service-card .card-img-top {
        height: 150px;
    }
    
    /* Team members */
    .team-photo {
        width: 80px;
        height: 80px;
    }
    
    /* Contact form */
    .contact-form {
        padding: 1.5rem;
    }
    
    /* Process steps */
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.33rem;
    }
    
    /* Statistics */
    .stat-number {
        font-size: 2.63rem;
    }
    
    .metric-value {
        font-size: 2rem;
    }
    
    /* Icons */
    .innovation-icon,
    .partner-icon,
    .region-icon,
    .research-icon,
    .industry-icon,
    .category-icon {
        font-size: 2rem;
    }
    
    /* Spacing adjustments */
    .py-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Typography */
    .hero-content h1 {
        font-size: 2.36rem;
    }
    
    .hero-content h2 {
        font-size: 1.27rem;
    }
    
    /* Service cards */
    .service-card .card-img-top {
        height: 175px;
    }
    
    /* Team members */
    .team-photo {
        width: 90px;
        height: 90px;
    }
    
    /* Contact form */
    .contact-form {
        padding: 2rem;
    }
    
    /* Process steps */
    .step-number {
        width: 55px;
        height: 55px;
        font-size: 1.45rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Typography */
    .hero-content h1 {
        font-size: 2.84rem;
    }
    
    .hero-content h2 {
        font-size: 1.49rem;
    }
    
    /* Hero section */
    .hero-section {
        padding: 3rem 0;
    }
    
    /* Service cards */
    .service-card .card-img-top {
        height: 200px;
    }
    
    /* Team members */
    .team-photo {
        width: 110px;
        height: 110px;
    }
    
    /* Contact form */
    .contact-form {
        padding: 2.5rem;
    }
    
    /* Featured price card */
    .price-card.featured {
        transform: scale(1.02);
    }
    
    /* Process steps */
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.62rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Typography */
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .hero-content h2 {
        font-size: 1.51rem;
    }
    
    /* Hero section */
    .hero-section {
        padding: 4rem 0;
    }
    
    /* Service cards */
    .service-card .card-img-top {
        height: 220px;
    }
    
    /* Team members */
    .team-photo {
        width: 120px;
        height: 120px;
    }
    
    /* Contact form */
    .contact-form {
        padding: 3rem;
    }
    
    /* Featured price card */
    .price-card.featured {
        transform: scale(1.05);
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Typography */
    .hero-content h1 {
        font-size: 3.57rem;
    }
    
    .hero-content h2 {
        font-size: 1.76rem;
    }
    
    /* Hero section */
    .hero-section {
        padding: 5rem 0;
    }
    
    /* Service cards */
    .service-card .card-img-top {
        height: 240px;
    }
    
    /* Team members */
    .team-photo {
        width: 140px;
        height: 140px;
    }
    
    /* Contact form */
    .contact-form {
        padding: 3.5rem;
    }
    
    /* Statistics */
    .stat-number {
        font-size: 3.53rem;
    }
    
    .metric-value {
        font-size: 3rem;
    }
    
    /* Icons */
    .innovation-icon,
    .partner-icon,
    .region-icon,
    .research-icon,
    .industry-icon,
    .category-icon {
        font-size: 3rem;
    }
    
    /* Info icons */
    .info-icon {
        font-size: 3rem;
    }
    
    .contact-info-icon {
        font-size: 2.62rem;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        padding: 1rem 0;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content h2 {
        font-size: 1.21rem;
    }
    
    .py-5 {
        padding-top: 1.86rem;
        padding-bottom: 1.68rem;
    }
}

/* Print styles */
@media print {
    /* Hide navigation and interactive elements */
    header,
    .breadcrumb-nav,
    .btn,
    .contact-form,
    footer {
        display: none;
    }
    
    /* Adjust colors for print */
    body {
        background: white;
        color: black;
    }
    
    /* Adjust typography for print */
    h1, h2, h3, h4, h5, h6 {
        color: black;
    }
    
    /* Remove shadows and animations */
    .feature-card,
    .service-card,
    .price-card,
    .review-card,
    .case-study-card,
    .career-card,
    .faq-card,
    .blog-card {
        box-shadow: none;
        border: 1px solid #bebebe;
    }
    
    /* Page breaks */
    .py-5 {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    /* Increase contrast for better accessibility */
    .feature-card,
    .service-card,
    .price-card,
    .review-card,
    .case-study-card,
    .career-card,
    .faq-card,
    .blog-card {
        border: 2px solid #000;
    }
    
    .btn-primary {
        border: 2px solid #000;
    }
    
    .contact-form .form-control {
        border: 2px solid #000;
    }
}

/* ALL ANIMATIONS DISABLED */
* {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* OVERRIDE SAL.JS LIBRARY STYLES */
[data-sal] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    clip-path: none !important;
}

/* Force all content to be visible */
body * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Disable hover transforms */
.feature-card:hover,
.service-card:hover,
.price-card:hover,
.case-study-card:hover,
.career-card:hover,
.blog-card:hover,
.btn-primary:hover,
#gallery img:hover {
    transform: none !important;
}

/* Disable transitions using CSS variables */
:root {
    --animation-duration: 0s !important;
    --animation-timing: none !important;
}

/* Focus styles for keyboard navigation */
@media (any-hover: none) {
    /* Touch device specific styles - ALL TRANSFORMS DISABLED */
    .feature-card:hover,
    .service-card:hover,
    .price-card:hover,
    .case-study-card:hover,
    .career-card:hover,
    .blog-card:hover {
        transform: none !important;
    }
}

/* Dark mode support */

/* Specific component responsive adjustments */

/* Navigation */
@media (max-width: 991.98px) {
    .navbar-nav {
        text-align: center;
        padding-top: 1rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }
}

/* Gallery responsiveness */
@media (max-width: 575.98px) {
    #gallery .col-lg-3 {
        margin-bottom: 1rem;
    }
}

/* FAQ cards */
@media (max-width: 767.98px) {
    .faq-card {
        margin-bottom: 1rem;
    }
}

/* Blog grid */
@media (max-width: 991.98px) {
    .blog-card {
        margin-bottom: 1.73rem;
    }
}

/* Contact info cards */
@media (max-width: 767.98px) {
    .contact-info-card {
        margin-bottom: 1.78rem;
    }
}

/* Process and timeline items */
@media (max-width: 767.98px) {
    .process-step,
    .timeline-item {
        margin-bottom: 1.88rem;
    }
}

/* Feature items */
@media (max-width: 767.98px) {
    .feature-item {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-icon-wrapper {
        margin-right: 0;
        margin-bottom: 1rem;
    }
}

/* Additional pages specific responsive adjustments */
@media (max-width: 575.98px) {
    .tech-feature,
    .innovation-card,
    .impact-stat,
    .metric-card,
    .industry-card,
    .partner-type,
    .expansion-region,
    .research-area,
    .product-category,
    .process-phase {
        margin-bottom: 1.81rem;
    }
}

/* Utilities for responsive spacing */
@media (max-width: 767.98px) {
    .mb-md-0 {
        margin-bottom: 0;
    }
    
    .mt-md-3 {
        margin-top: 1rem;
    }
    
    .py-md-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Responsive text sizing */
@media (max-width: 575.98px) {
    .display-1 {
        font-size: 2.54rem;
    }
    
    .display-2 {
        font-size: 2rem;
    }
    
    .display-3 {
        font-size: 1.85rem;
    }
    
    .display-4 {
        font-size: 1.60rem;
    }
}

/* Enhanced accessibility for forms */
@media (max-width: 767.98px) {
    .contact-form .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .contact-form .btn {
        width: 100%;
        margin-top: 1rem;
    }
}

/* Improved card layouts for mobile */
@media (max-width: 575.98px) {
    .card-deck {
        flex-direction: column;
    }
    
    .card {
        margin-bottom: 1rem;
    }
}

/* Enhanced touch targets */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    .nav-link {
        padding: 0.75rem 0;
    }
}

/* Improved spacing for mobile content */
@media (max-width: 575.98px) {
    .text-center {
        text-align: center;
    }
    
    .mb-4 {
        margin-bottom: 1.70rem;
    }
    
    .py-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Better mobile navigation */
@media (max-width: 991.98px) {
    .navbar-collapse {
        border-top: 1px solid #e1effd;
        margin-top: 1rem;
        padding-top: 1rem;
    }
    
    .navbar-nav {
        align-items: center;
    }
}

/* Optimized image display */
@media (max-width: 575.98px) {
    .hero-image {
        text-align: center;
        margin-top: 2rem;
    }
    
    .team-photo {
        margin-bottom: 1rem;
    }
}

/* Enhanced mobile gallery */
@media (max-width: 767.98px) {
    #gallery .col-lg-3,
    #gallery .col-md-4 {
        margin-bottom: 1rem;
    }
    
    #gallery img {
        border-radius: 0.5rem;
    }
}

/* Improved mobile forms */
@media (max-width: 575.98px) {
    .contact-form .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .contact-form .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Enhanced focus states for mobile */
@media (max-width: 767.98px) {
    .btn:focus,
    .form-control:focus,
    .nav-link:focus {
        outline: 2px solid #0083e8;
        outline-offset: 2px;
    }
}