/* ReThread - Responsive CSS - Mobile-First Design */

/* ========================================
   Mobile First Base Styles (Default)
========================================= */

/* Extra Small devices (phones, less than 576px) */
/* Default styles in main.css already mobile-first */

body {
    font-size: 0.9rem;
    overflow-x: hidden;
}

h1, .h1 {
    font-size: 1.8rem;
}

h2, .h2 {
    font-size: 1.6rem;
}

h3, .h3 {
    font-size: 1.4rem;
}

/* Navigation adjustments for mobile */
.navbar-brand {
    font-size: 1.3rem !important;
}

.navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    text-align: center;
}

/* Hero section mobile */
.hero-section {
    padding: 3rem 0;
    text-align: center;
}

.hero-section h1 {
    margin-bottom: 1rem;
    padding-top: 275px;
}

/* Cards mobile spacing */
.card {
    margin-bottom: 2rem;
}

/* Process steps mobile */
.process-step,
.feature-icon,
.process-number,
.impact-stat,
.process-circle {
    margin-bottom: 1rem;
}

/* Timeline mobile */
.timeline::before {
    left: 20px;
}

.timeline-item::before {
    left: 20px;
}

.timeline-item {
    padding-left: 3rem;
}

/* Footer mobile */
footer .col-md-6,
footer .col-lg-3 {
    text-align: center;
    margin-bottom: 2rem;
}

/* Disable animations on mobile for performance */
@media (max-width: 767.98px) {
    @media (prefers-reduced-motion: no-preference) {
        .card:hover {
            transform: none;
        }
        
        .card:hover .card-img-top {
            transform: none;
        }
        
        .btn-primary:hover {
            transform: none;
        }
        
        .process-step:hover,
        .feature-icon:hover,
        .process-number:hover,
        .impact-stat:hover,
        .process-circle:hover {
            transform: none;
        }
    }
}

/* ========================================
   Small devices (landscape phones, 576px and up)
========================================= */
@media (min-width: 576px) {
    body {
        font-size: 1rem;
    }
    
    h1, .h1 {
        font-size: 2rem;
    }
    
    h2, .h2 {
        font-size: 1.8rem;
    }
    
    .navbar-brand {
        font-size: 1.4rem !important;
    }
    
    .hero-section {
        padding: 4rem 0;
    }
    
    /* Team grid adjustments */
    .col-lg-2-4 {
        width: 50%;
    }
}

/* ========================================
   Medium devices (tablets, 768px and up)
========================================= */
@media (min-width: 768px) {
    body {
        font-size: 1rem;
    }
    
    h1, .h1 {
        font-size: 2.2rem;
    }
    
    h2, .h2 {
        font-size: 1.9rem;
    }
    
    .navbar-brand {
        font-size: 1.45rem !important;
    }
    
    .hero-section {
        padding: 5rem 0;
        text-align: left;
    }
    
    /* Navigation improvements */
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem !important;
        text-align: left;
    }
    
    /* Timeline improvements */
    .timeline::before {
        left: 50%;
    }
    
    .timeline-item::before {
        left: 50%;
    }
    
    .timeline-item {
        padding-left: 0;
    }
    
    /* Footer improvements */
    footer .col-md-6,
    footer .col-lg-3 {
        text-align: left;
    }
    
    footer .text-md-end {
        text-align: right !important;
    }
    
    /* Cards grid improvements */
    .card-columns {
        column-count: 2;
    }
    
    /* Process steps in rows */
    .process-steps .row > div {
        margin-bottom: 2rem;
    }
}

/* ========================================
   Large devices (desktops, 992px and up)
========================================= */
@media (min-width: 992px) {
    h1, .h1 {
        font-size: 2.4rem;
    }
    
    h2, .h2 {
        font-size: 2rem;
    }
    
    .navbar-brand {
        font-size: 1.5rem !important;
    }
    
    .hero-section {
        padding: 5rem 0;
    }
    
    /* Team grid - 5 columns */
    .col-lg-2-4 {
        width: 20%;
    }
    
    /* Cards improvements */
    .card-columns {
        column-count: 3;
    }
    
    /* Better spacing for large screens */
    section {
        padding: 5rem 0;
    }
    
    /* Process steps better layout */
    .process-steps .row {
        justify-content: space-between;
    }
    
    /* Enhanced hover effects for desktop */
    @media (prefers-reduced-motion: no-preference) {
        .card:hover {
            transform: translateY(-8px);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
        }
    }
}

/* ========================================
   Extra large devices (large desktops, 1200px and up)
========================================= */
@media (min-width: 1200px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
    
    h2, .h2 {
        font-size: 2rem;
    }
    
    .container {
        max-width: 1140px;
    }
    
    /* Enhanced spacing for very large screens */
    section {
        padding: 6rem 0;
    }
    
    .hero-section {
        padding: 6rem 0;
    }
    
    /* Better typography scale */
    .lead {
        font-size: 1.15rem;
    }
    
    /* Cards improvements */
    .card-columns {
        column-count: 4;
    }
}

/* ========================================
   Extra Extra large devices (1400px and up)
========================================= */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* Prevent content from becoming too wide */
    .hero-section .container,
    section .container {
        max-width: 1200px;
    }
}

/* ========================================
   Print Styles
========================================= */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .navbar,
    footer,
    .btn,
    .breadcrumb-section {
        display: none !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* ========================================
   High Contrast Mode Support
========================================= */
@media (prefers-contrast: high) {
    :root {
        --primary-blue: #003f5c;
        --primary-slate: #000000;
        --primary-cream: #ffffff;
    }
    
    .card {
        border: 2px solid #000000;
    }
    
    .btn-primary {
        border: 2px solid #000000;
    }
}

/* ========================================
   Landscape Orientation Adjustments
========================================= */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .navbar {
        padding: 0.5rem 0;
    }
    
    section {
        padding: 3rem 0;
    }
}

/* ========================================
   Dark Mode Support (if needed in future)
========================================= */

/* ========================================
   Reduced Motion Support
========================================= */
@media (prefers-reduced-motion: reduce) {
    .hero-section::before {
        animation: none;
    }
    
    * {
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   Touch Device Optimizations
========================================= */
@media (hover: none) and (pointer: coarse) {
    /* Touch device optimizations */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Remove hover effects on touch devices */
    .card:hover {
        transform: none;
        box-shadow: var(--box-shadow);
    }
    
    .card:hover .card-img-top {
        transform: none;
    }
    
    .btn-primary:hover {
        transform: none;
        background-color: var(--primary-blue);
    }
}

/* ========================================
   Screen Reader Only Content
========================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}