/* Responsive Navbar Styles - BioRemPP v1.0 */

/* ============================================================
   Navbar Base Styles
   ============================================================ */

/* Ensure navbar stays on top */
.navbar {
    z-index: 1030;
}

/* Brand section */
.navbar-brand {
    padding: 0.5rem 0;
}

.navbar-brand:hover {
    opacity: 0.8;
}

/* ============================================================
   Mobile Navbar (max-width: 992px)
   ============================================================ */
@media (max-width: 991px) {

    /* Reduce title font size on mobile */
    .navbar-brand h3 {
        font-size: 1.25rem !important;
    }

    /* Hide subtitle on very small screens */
    .navbar-brand .text-muted {
        font-size: 0.75rem !important;
    }

    /* Navbar toggler button */
    .navbar-toggler {
        border: 2px solid #28a745;
        padding: 0.5rem 0.75rem;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(40, 167, 69, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Collapsed menu */
    .navbar-collapse {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        padding: 0.5rem;
    }

    /* Nav items in collapsed menu */
    .navbar-collapse .nav-item {
        border-bottom: 1px solid #dee2e6;
    }

    .navbar-collapse .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-collapse .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        color: #495057;
    }

    .navbar-collapse .nav-link:hover {
        background-color: #e9ecef;
        color: #28a745;
        border-radius: 0.25rem;
    }

    .navbar-collapse .nav-link:active {
        background-color: #28a745;
        color: white;
    }
}

/* ============================================================
   Tablet Navbar (768px - 991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-brand h3 {
        font-size: 1.5rem !important;
    }

    .navbar-brand .text-muted {
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   Desktop Navbar (min-width: 992px)
   ============================================================ */
@media (min-width: 992px) {

    /* Desktop nav links */
    .navbar-nav .nav-link {
        font-size: 0.95rem;
        transition: all 0.2s ease;
    }

    .navbar-nav .nav-link:hover {
        color: #28a745 !important;
        transform: translateY(-2px);
    }

    .navbar-nav .nav-link:active {
        color: #1e7e34 !important;
    }
}

/* ============================================================
   Small Mobile (max-width: 576px)
   ============================================================ */
@media (max-width: 576px) {

    /* Extra small screens */
    .navbar {
        padding: 0.5rem 0.75rem;
    }

    .navbar-brand h3 {
        font-size: 1.1rem !important;
    }

    .navbar-brand img {
        height: 50px !important;
    }

    /* Stack logo and title vertically on very small screens */
    .navbar-brand .row {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .navbar-brand .col:first-child {
        margin-bottom: 0.25rem;
    }
}

/* ============================================================
   Landscape Orientation
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar {
        padding: 0.25rem 0.5rem;
    }

    .navbar-brand h3 {
        font-size: 1rem !important;
    }

    .navbar-brand img {
        height: 40px !important;
    }

    .navbar-collapse .nav-link {
        padding: 0.5rem 1rem;
    }
}

/* ============================================================
   Accessibility
   ============================================================ */

/* Focus visible for keyboard navigation */
.navbar-toggler:focus-visible {
    outline: 3px solid #28a745;
    outline-offset: 2px;
}

.navbar-nav .nav-link:focus-visible {
    outline: 2px solid #28a745;
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link {
        transition: none !important;
    }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {

    .navbar-toggler,
    .navbar-collapse {
        display: none !important;
    }

    .navbar {
        border-bottom: 2px solid #000 !important;
    }
}