/* Responsive CSS for AromaVault */

/* Large screens (desktops) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    h1 {
        font-size: 2.75rem;
    }
    
    .hero-section {
        padding: 6rem 0;
    }
}

/* Medium screens (tablets) */
@media (max-width: 991.98px) {
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.875rem;
    }
    
    .hero-section {
        padding: 4rem 0;
        text-align: center;
    }
    
    .feature-card {
        margin-bottom: 2rem;
    }
    
    .process-step {
        margin-bottom: 2rem;
    }
    
    .timeline-item {
        margin-bottom: 1.5rem;
    }
    
    .team-member {
        margin-bottom: 2rem;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 767.98px) {
    /* Typography adjustments */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.375rem;
    }
    
    /* Remove animations on mobile */
    .feature-card,
    .card,
    .team-member img,
    #gallery img,
    .btn-primary {
        transition: none !important;
        transform: none !important;
    }
    
    .feature-card:hover,
    .card:hover,
    .team-member:hover img,
    #gallery img:hover,
    .btn-primary:hover {
        transform: none !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Hero section mobile */
    .hero-section {
        padding: 3rem 0;
        text-align: center;
    }
    
    .hero-section .row {
        flex-direction: column-reverse;
    }
    
    /* Mobile hamburger menu - standard Bootstrap only */
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;
    }
    
    /* Cards mobile */
    .card-img-top {
        height: 180px;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    /* Contact form mobile */
    .contact-form {
        margin-bottom: 2rem;
    }
    
    .contact-info {
        padding: 1.5rem;
    }
    
    /* Team members mobile */
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    /* Process steps mobile */
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    /* Gallery mobile */
    #gallery .col-6 {
        margin-bottom: 1rem;
    }
    
    /* Footer mobile */
    footer .col-lg-4 {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    /* Breadcrumb mobile */
    .breadcrumb-img {
        max-width: 25px;
    }
    
    /* Section padding mobile */
    section {
        padding: 3rem 0;
    }
    
    /* Blog grid mobile */
    #blog_grid .card-img-top {
        height: 160px;
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 575.98px) {
    /* Typography */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Navbar brand */
    .navbar-brand {
        font-size: 1.25rem !important;
    }
    
    /* Hero adjustments */
    .hero-section {
        padding: 2rem 0;
    }
    
    /* Card adjustments */
    .feature-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Team members */
    .team-member img {
        width: 80px;
        height: 80px;
    }
    
    .team-member {
        margin-bottom: 1.5rem;
    }
    
    /* Process steps */
    .process-step {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Timeline */
    .timeline-item {
        padding: 1rem;
    }
    
    /* Contact */
    .contact-info {
        padding: 1rem;
    }
    
    /* Buttons */
    .btn-primary {
        padding: 0.65rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Footer */
    footer {
        padding: 3rem 0 !important;
    }
    
    /* Services grid */
    .col-lg-4.col-md-6.mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    /* Section spacing */
    section {
        padding: 2.5rem 0;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid #464646;
    }
    
    .feature-card {
        border: 2px solid #232222;
    }
    
    .btn-primary {
        border-width: 2px;
    }
}

/* Dark mode support (if user prefers) */

/* Print styles */
@media print {
    .navbar,
    footer,
    .breadcrumb-img {
        display: none !important;
    }
    
    .hero-section {
        background: none !important;
        color: #000 !important;
    }
    
    .card,
    .feature-card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    section {
        page-break-inside: avoid;
        padding: 1rem 0;
    }
}

/* Accessibility improvements */
@media (max-width: 767.98px) {
    /* Ensure touch targets are at least 44px */
    .btn,
    .nav-link,
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve form field touch targets */
    .form-control {
        min-height: 44px;
        padding: 0.75rem;
    }
    
    /* Better spacing for mobile readability */
    p {
        line-height: 1.6;
        margin-bottom: 1.25rem;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero-section {
        padding: 2rem 0;
    }
    
    section {
        padding: 2rem 0;
    }
    
    .team-member img {
        width: 70px;
        height: 70px;
    }
}

/* No animations in mobile resolution as required */
@media (max-width: 767.98px) {
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .hero-section::before {
        display: none;
    }
}

/* Additional mobile-specific improvements */
@media (max-width: 575.98px) {
    /* Improve text readability */
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
    
    /* Better spacing for small screens */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    /* Optimize image display */
    .card-img-top {
        height: 150px;
    }
    
    #gallery img {
        border-radius: 0.5rem;
    }
}

/* Focus styles for better accessibility */
.form-control:focus,
.btn:focus,
.nav-link:focus {
    outline: 2px solid var(--primary-lavender);
    outline-offset: 2px;
} 

.hero-section h1 {
    padding-top: 225px;
}