/* =========================================================
   PRIME-HRM NAVBAR (scoped under .r3-nav to avoid conflicts)
   ========================================================= */
.r3-nav {
    background-color: #18417f;

}

#mainNav {
    max-height: 70px;
}


.r3-nav__container {
    padding-left: 1rem;
    padding-right: 1rem;
}


.r3-nav__brand {
    text-decoration: none;
}

.r3-nav__brandlines {
    font-size: 1rem;
    font-family: "Poppins";
    font-weight: 600;
}

.r3-nav__line {
    white-space: normal;
    word-break: break-word;
    margin-bottom: 0;
}

/* Links */
.r3-nav__link {
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px !important;
    border-radius: 5px;
    transition: background-color .2s ease, color .2s ease;
    font-family: 'Poppins', sans-serif;
}

.r3-nav__link:hover {
    background-color: #a6c8dd;
    color: #fff !important;
}

/* Contact link push */
.r3-nav__menu {
    margin-right: 1rem;
}

.r3-nav__list .nav-link {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

#mainNav,
#mainNav.scrolled,
.r3-nav.navbar.scrolled {
    background-color: #18417f !important;
}

.nav-link .r3-nav__link{
    font-family: "Poppins";
    font-size: 0.85rem !important;
    font-weight: 500;
}
/* ----------------- Breakpoint ≤ 800px ----------------- */
@media (max-width: 800px) {

    /* Dropdown panel (Bootstrap collapse) */
    .r3-nav .navbar-collapse {
        background-color: #18417f;
        padding: 0.8rem;
        margin-top: 0;
        width: 100%;
        border-radius: 0;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
    }

    .r3-nav .navbar-toggler {
        z-index: 1000;
        border: none;
        box-shadow: none;
        margin: 0 auto;
        display: block;
    }

    /* Keep hover inversion you wanted on mobile */
    .r3-nav a.r3-nav__link:hover {
        background-color: #a6c8dd;
        color: #000 !important;
    }


    /* Horizontal nav distribution across full width */
    .r3-nav .navbar-nav {
        display: flex;
        flex-direction: row !important;
        justify-content: space-between;
        width: 100%;
        text-align: center;
    }

    .r3-nav .navbar-nav .nav-item {
        flex: 1;
        text-align: center;
    }

    .r3-nav .navbar-nav .nav-link {
        font-size: 0.7rem !important;
        padding: 0.75rem 0 !important;
        white-space: nowrap;
    }

    #mainNav {
        max-height: 80px;
    }
}

/* ----------------- Breakpoint ≤ 576px ----------------- */
@media (max-width: 576px) {
    .r3-nav .navbar-collapse {
        background-color: #18417f;
        padding: 0.8rem;
        margin-top: 0;
        width: 90%;
        height: auto;
        border-radius: 0;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
    }

    .r3-nav .navbar-toggler {
        z-index: 1000;
        border: none;
        box-shadow: none;
    }

    .r3-nav a.r3-nav__link:hover {
        background-color: #a6c8dd;
        color: #000 !important;
    }

    .r3-nav .navbar-nav {
        display: flex;
        flex-direction: row !important;
        justify-content: space-between;
        width: 100%;
    }

    .r3-nav .navbar-nav .nav-link {
        font-size: 0.7rem !important;
        padding: 0.2rem 0 !important;
        white-space: nowrap;
    }
}

/* ===== Brand spacing & logo padding ===== */
.r3-nav {
    padding: .35rem 0;
}

.r3-nav__container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.r3-nav__brand {
    padding-left: .25rem;
}

.r3-nav__brand img {
    width: 60px;
    height: 60px;
    padding: 4px;
    display: block;
}

/* ===== Push hamburger to the far right ===== */
.r3-nav .navbar-toggler {
    margin-left: auto;
    /* forces it to the right edge */
    margin-right: .25rem;
    /* small gutter to the edge */
}

/* Keep the menu aligned to the right on large screens too */
.r3-nav .navbar-collapse {
    margin-left: auto;
}

/* When collapsed (mobile), keep panel full-width and aligned to the right edge */
@media (max-width: 991.98px) {
    .r3-nav .navbar-collapse {
        left: 0;
        right: 0;
        /* span full width */
    }
}

@media (max-width: 991.98px) {

    .r3-nav .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: .75rem 1rem;
        background: #18417f;
        border-radius: 0;
        border-top: 1px solid rgba(255, 255, 255, .15);
        z-index: 999;
    }
}

/* =========================================================
   ACTIVE PAGE HOVER-LOCK (background only)
   ========================================================= */

.r3-nav__link.active,
.r3-nav__link[aria-current="page"] {
  background-color: #a6c8dd;       /* same as your hover background */
    color: white !important;  
 
}

@media (max-width: 800px) {
  .r3-nav a.r3-nav__link.active,
  .r3-nav a.r3-nav__link[aria-current="page"] {
    background-color: #a6c8dd;
    color: inherit !important;  
  }
}

@media (max-width: 576px) {
  .r3-nav a.r3-nav__link.active,
  .r3-nav a.r3-nav__link[aria-current="page"] {
    background-color: #a6c8dd;
    color: inherit !important;
  }
}