/* ========================================
   RESPONSIVE - SAÚDE NATURALMENTE
   ======================================== */

/* === MOBILE FIRST APPROACH === */

/* Small devices (landscape phones, less than 640px) */
@media (max-width: 639px) {
    .header-container {
        height: 4rem;
        padding: 0 1rem;
    }

    .logo {
        height: 2.5rem;
    }

    h1 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.875rem !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    .card {
        padding: 1.5rem;
    }

    .btn-lg {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .footer-grid {
        gap: 2rem;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Previne zoom no iOS */
    }
}

/* Medium devices (tablets, 640px and up) */
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .sm\:text-xl {
        font-size: 1.25rem;
    }
    
    .sm\:text-6xl {
        font-size: 3.75rem;
    }
}

/* Large devices (desktops, 768px and up) */
@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row;
    }

    .md\:gap-6 {
        gap: 1.5rem;
    }

    .md\:gap-8 {
        gap: 2rem;
    }

    .md\:gap-12 {
        gap: 3rem;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra large devices (large desktops, 1024px and up) */
@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .lg\:gap-10 {
        gap: 2.5rem;
    }

    .lg\:gap-16 {
        gap: 4rem;
    }

    .lg\:p-12 {
        padding: 3rem;
    }

    .lg\:p-16 {
        padding: 4rem;
    }
    
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:text-2xl {
        font-size: 1.5rem;
    }
    
    .lg\:text-3xl {
        font-size: 1.875rem;
    }
    
    .lg\:text-4xl {
        font-size: 2.25rem;
    }
    
    .lg\:text-5xl {
        font-size: 3rem;
    }
    
    .lg\:text-7xl {
        font-size: 4.5rem;
    }
    
    .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    
    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* Extra extra large devices (1280px and up) */
@media (min-width: 1280px) {
    .xl\:text-8xl {
        font-size: 6rem;
    }
}

/* === PRINT STYLES === */
@media print {

    .header,
    .footer,
    .mobile-menu-btn,
    .btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid currentColor;
    }

    .card {
        border: 2px solid var(--nature-brown);
    }
}

/* === DARK MODE SUPPORT (Optional) === */
@media (prefers-color-scheme: dark) {
    /* Uncomment if dark mode is needed
  :root {
    --nature-off-white: #1a1a1a;
    --nature-brown: #e8d5c4;
  }
  
  body {
    background-color: #1a1a1a;
    color: #e8d5c4;
  }
  
  .card {
    background-color: #2a2a2a;
  }
  */
}