/* ==========================================
   RESPONSIVE.CSS - Mobile-First Responsive Design
   Conservative Mobile Animations as Required
   ========================================== */

/* ==========================================
   MOBILE FIRST (Default: 320px+)
   ========================================== */

/* Mobile Typography Adjustments */
body {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Conservative Mobile Heading Sizes */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

/* Mobile Navigation */
.navbar-brand {
    font-size: 1.1rem !important;
}

.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Mobile Hero Section */
#hero {
    min-height: 80vh;
    padding: 2rem 0;
}

/* NO ANIMATIONS ON MOBILE (As Required) */
@media (max-width: 767.98px) {
    /* Disable all scroll animations on mobile */
    [data-sal] {
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
    }
    
    /* Disable card hover effects on mobile */
    .card:hover {
        transform: none !important;
        box-shadow: var(--shadow-sm) !important;
    }
    
    /* Disable button hover effects on mobile */
    .btn:hover {
        transform: none !important;
    }
    
    /* Disable image scaling effects on mobile */
    .card:hover .card-img-top {
        transform: none !important;
    }
    
    .gallery-item:hover img {
        transform: none !important;
    }
    
    /* Disable team member hover effects on mobile */
    .team-member img {
        filter: none !important;
    }
}

/* Mobile Section Spacing */
section {
    padding: 2rem 0;
}

/* Mobile Cards */
.card {
    margin-bottom: 1rem;
}

/* Mobile Forms */
.form-control {
    font-size: 16px; /* Prevents zoom on iOS */
}

/* Mobile Contact Information */
.contact-info-mobile {
    text-align: center;
    margin-top: 2rem;
}

/* Mobile Process Steps */
.process-step::after {
    display: none;
}

/* ==========================================
   SMALL DEVICES (576px+)
   ========================================== */

@media (min-width: 576px) {
    body {
        font-size: 0.95rem;
    }
    
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    
    .navbar-brand {
        font-size: 1.15rem !important;
    }
    
    section {
        padding: 2.5rem 0;
    }
    
    #hero {
        min-height: 85vh;
    }
}

/* ==========================================
   MEDIUM DEVICES (768px+)
   ========================================== */

@media (min-width: 768px) {
    body {
        font-size: 1rem;
    }
    
    h1, .h1 { font-size: 2.25rem; }
    h2, .h2 { font-size: 2rem; }
    h3, .h3 { font-size: 1.5rem; }
    
    .navbar-brand {
        font-size: 1.25rem !important;
    }
    
    section {
        padding: 3rem 0;
    }
    
    #hero {
        min-height: 90vh;
    }
    
    /* Re-enable animations for desktop */
    [data-sal] {
        transition-duration: var(--transition-slow);
    }
    
    .card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
    }
    
    .btn:hover {
        transform: translateY(-2px);
    }
    
    /* Process Steps Connection */
    .process-step::after {
        display: block;
    }
    
    /* Mobile-specific adjustments for medium screens */
    .mobile-stack {
        flex-direction: column;
    }
    
    .mobile-center {
        text-align: center;
    }
    
    .mobile-full-width {
        width: 100%;
    }
}

/* ==========================================
   LARGE DEVICES (992px+)
   ========================================== */

@media (min-width: 992px) {
    h1, .h1 { font-size: var(--font-size-4xl); }
    h2, .h2 { font-size: var(--font-size-3xl); }
    h3, .h3 { font-size: var(--font-size-2xl); }
    
    .navbar-brand {
        font-size: var(--font-size-xl) !important;
    }
    
    section {
        padding: var(--spacing-2xl) 0;
    }
    
    #hero {
        min-height: 100vh;
    }
    
    /* Desktop Card Layouts */
    .card-deck {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    
    .card-deck .card {
        flex: 1;
        min-width: 300px;
    }
    
    /* Desktop Navigation Improvements */
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
    
    /* Desktop Process Layout */
    .process-horizontal {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .process-horizontal .process-step {
        flex: 1;
        text-align: center;
        position: relative;
    }
}

/* ==========================================
   EXTRA LARGE DEVICES (1200px+)
   ========================================== */

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* Enhanced spacing for larger screens */
    section {
        padding: 4rem 0;
    }
    
    /* Larger content areas */
    .hero-content {
        max-width: 600px;
    }
    
    .section-header {
        max-width: 800px;
        margin: 0 auto;
    }
}

/* ==========================================
   EXTRA EXTRA LARGE DEVICES (1400px+)
   ========================================== */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* Even more spacing for very large screens */
    section {
        padding: 5rem 0;
    }
    
    /* Prevent content from becoming too wide */
    .content-max-width {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* ==========================================
   MOBILE NAVIGATION IMPROVEMENTS
   ========================================== */

/* Standard Bootstrap Mobile Menu (No Customization) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--color-white);
        border-top: 1px solid var(--color-gray-200);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    
    .navbar-nav {
        padding: 0.5rem 0;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--color-gray-100);
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
}

/* ==========================================
   RESPONSIVE IMAGES
   ========================================== */

/* Image Responsive Behavior */
.img-responsive {
    max-width: 100%;
    height: auto;
}

/* Hero Image Adjustments */
@media (max-width: 767.98px) {
    .hero-image {
        max-width: 90%;
        margin: 2rem auto;
    }
}

@media (min-width: 768px) {
    .hero-image {
        max-width: 100%;
    }
}

/* Card Image Heights */
@media (max-width: 575.98px) {
    .card-img-top {
        height: 150px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .card-img-top {
        height: 180px;
    }
}

@media (min-width: 768px) {
    .card-img-top {
        height: 200px;
    }
}

/* ==========================================
   RESPONSIVE TYPOGRAPHY
   ========================================== */

/* Responsive Lead Text */
@media (max-width: 575.98px) {
    .lead {
        font-size: 1rem;
    }
}

@media (min-width: 576px) {
    .lead {
        font-size: 1.125rem;
    }
}

/* Responsive Small Text */
.small {
    font-size: 0.875rem;
}

/* ==========================================
   RESPONSIVE SPACING
   ========================================== */

/* Mobile Margin Utilities */
@media (max-width: 575.98px) {
    .mb-mobile-2 { margin-bottom: 0.5rem !important; }
    .mb-mobile-3 { margin-bottom: 1rem !important; }
    .mb-mobile-4 { margin-bottom: 1.5rem !important; }
    .mb-mobile-5 { margin-bottom: 3rem !important; }
    
    .mt-mobile-2 { margin-top: 0.5rem !important; }
    .mt-mobile-3 { margin-top: 1rem !important; }
    .mt-mobile-4 { margin-top: 1.5rem !important; }
    .mt-mobile-5 { margin-top: 3rem !important; }
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */

/* Hide elements on mobile */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    * {
        color: black !important;
        background: white !important;
        box-shadow: none !important;
    }
    
    .navbar,
    .btn,
    footer {
        display: none !important;
    }
    
    .container {
        max-width: none !important;
        width: 100% !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .card {
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }
}

/* ==========================================
   ACCESSIBILITY RESPONSIVE
   ========================================== */

/* Larger touch targets on mobile */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Ensure sufficient color contrast */
@media (prefers-contrast: high) {
    :root {
        --color-gray-500: #000000;
        --color-gray-700: #000000;
    }
    
    .card {
        border: 2px solid #000000 !important;
    }
} 
/* Disable horizontal scroll on desktop resolutions */
@media (min-width: 992px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}