/* ============================================
   HEALTHY MEALS TEMPLATE - RESPONSIVE CSS
   ============================================ */

/* ============================================
   MOBILE FIRST - BASE STYLES (320px+)
   ============================================ */
@media (max-width: 575.98px) {
  /* Typography */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.83rem; }
  h3 { font-size: 1.58rem; }
  
  .hero-title { font-size: 2rem; }
  .section-title { font-size: 1.76rem; }
  
  /* Spacing */
  .section { padding: 40px 0; }
  .hero-section h1 {
    padding-top: 150px;
}

.hero-section { padding: 1rem 0; }
  
  /* Navigation */
  .navbar-brand { font-size: 1.30rem; }
  .navbar-nav .nav-link { margin: 0.25rem 0; }
  
  /* Cards */
  .card-custom { padding: 1.5rem; }
  .service-content { padding: 1.5rem; }
  .testimonial-card { padding: 1.5rem; margin: 0.5rem; }
  
  /* Team */
  .team-photo { width: 150px; height: 150px; }
  
  /* Contact */
  .btn-primary { padding: 0.75rem 2rem; }
  
  /* Hero shapes - hide on mobile */
  .hero-shape { display: none; }
}

/* ============================================
   SMALL DEVICES - PORTRAIT TABLETS (576px+)
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-title { font-size: 2.36rem; }
  .section-title { font-size: 2rem; }
  .section { padding: 50px 0; }
  
  .team-photo { width: 175px; height: 175px; }
  .gallery-item img { height: 200px; }
}

/* ============================================
   MEDIUM DEVICES - LANDSCAPE TABLETS (768px+)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-title { font-size: 2.76rem; }
  .section-title { font-size: 2.28rem; }
  .section { padding: 60px 0; }
  
  .navbar-toggler { display: none; }
  .team-photo { width: 180px; height: 180px; }
  
  .service-card { margin-bottom: 2rem; }
  .gallery-item img { height: 220px; }
}

/* ============================================
   LARGE DEVICES - DESKTOPS (992px+)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-title { font-size: 3rem; }
  .section-title { font-size: 2.53rem; }
  .section { padding: 70px 0; }
  
  .team-photo { width: 190px; height: 190px; }
  .gallery-item img { height: 240px; }
  
  /* Show hero decorative shapes */
  .hero-shape { display: block; }
}

/* ============================================
   EXTRA LARGE DEVICES - LARGE DESKTOPS (1200px+)
   ============================================ */
@media (min-width: 1200px) {
  .hero-title { font-size: 3.60rem; }
  .section-title { font-size: 2.56rem; }
  .section { padding: 80px 0; }
  
  .team-photo { width: 200px; height: 200px; }
  .gallery-item img { height: 250px; }
  
  /* Full hero decorative elements */
  .hero-shape { display: block; }
  .hero-shape-1 { width: 100px; height: 100px; }
  .hero-shape-2 { width: 150px; height: 150px; }
}

/* ============================================
   ULTRA WIDE SCREENS (1400px+)
   ============================================ */
@media (min-width: 1400px) {
  .container-custom { max-width: 1320px; }
  .hero-title { font-size: 4rem; }
  .section { padding: 100px 0; }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */
@media (orientation: landscape) and (max-height: 600px) {
  .hero-section h1 {
    padding-top: 150px;
}

.hero-section { min-height: 70vh; }
  .section { padding: 40px 0; }
}

/* ============================================
   HIGH DPI DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-section::before {
    background-image: url('../VAV_images/hero-bg@2x.webp');
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .navbar, .hero-shape, .breadcrumb-section { display: none; }
  .section { padding: 20px 0; }
  .hero-section h1 {
    padding-top: 150px;
}

.hero-section { min-height: auto; padding: 40px 0; }
  .card-custom { box-shadow: none; border: 1px solid #f6ebea; }
}

/* ============================================
   REDUCED MOTION ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-shape, .gallery-item img, .team-photo,
  .card-custom, .service-card, .navbar-nav .nav-link::after {
    animation: none !important;
    transition: none !important;
  }
  
  .hero-section::before {
    animation: none !important;
  }
}

/* ============================================
   DARK MODE SUPPORT (USER PREFERENCE)
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* Keep light theme as specified - no dark mode implementation */
}

/* ============================================
   NAVIGATION RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 15px;
    margin-top: 1rem;
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0.25rem 0;
  }
  
  .navbar-nav .nav-link:hover {
    background: rgba(60, 189, 197, 0.10);
  }
}

/* ============================================
   GRID SYSTEM RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 767.98px) {
  .row > [class*="col-"] {
    margin-bottom: 2rem;
  }
  
  .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }
}

/* ============================================
   FORM RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 575.98px) {
  .form-control {
    padding: 0.75rem;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .btn-primary {
    width: 100%;
    border-radius: 10px;
  }
}

/* ============================================
   CAROUSEL/SLIDER RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
  .testimonial-card {
    margin: 0.5rem 0;
  }
}

/* ============================================
   UTILITY RESPONSIVE CLASSES
   ============================================ */
@media (max-width: 575.98px) {
  .d-mobile-none { display: none !important; }
  .text-mobile-center { text-align: center !important; }
}

@media (min-width: 576px) {
  .d-mobile-block { display: block !important; }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
@media (max-width: 767.98px) {
  /* Reduce heavy effects on mobile for better performance */
  .card-custom:hover {
    transform: none;
  }
  
  .service-card:hover {
    transform: translateY(-5px);
  }
  
  .gallery-item:hover img {
    transform: scale(1.02);
  }
}