/* ========================================
   RESPONSIVE.CSS — Adaptive Layout
========================================= */

@media (max-width: 992px) {
    .medication-layout { grid-template-columns: 1fr; }

    .navbar-custom { padding: 1rem; }
    .navbar-custom form { max-width: 250px; }

    .hero-container { padding-top: 80px; padding-bottom: 80px; }

    .main-content h2 { font-size: 1.8rem; }
    .main-content h3,
    .sidebar h3 { font-size: 1.3rem; }
}

@media (max-width: 576px) {
    body { padding: 15px; }

    .hero-container {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .site-title { font-size: 2.5rem; }
    .site-subtitle { font-size: 1rem; margin-bottom: 30px; }

    #search { font-size: 1rem; padding: 0.9rem 1.2rem; }

    .main-content,
    .sidebar { padding: 20px; }

    .warning-icon { width: 40px; height: 40px; }
}

#nav-suggestions {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    width: 100%;
    z-index: 1000;
    display: none;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-suggestion {
    padding: 8px 12px;
    cursor: pointer;
}

.nav-suggestion:hover {
    background: #f0f4ff;
}