/*************-------------------------------------------------------
    EPZA SACCO
    HEADER / NAVIGATION THEME
    -----------------------------------------------------------------
    IMPORTANT:
    This file preserves the original Bizler/Bootstrap navigation
    architecture and behaviour.
    DO NOT REMOVE:
    - Bootstrap collapse behaviour
    - dropdown hover behaviour
    - mega-menu behaviour
    - nested dropdown positioning
    - .main-menu structure
    - .megamenu-column structure
    Only the visual language has been modernized for EPZA SACCO.
-------------------------------------------------------------------*************/
/* ================================================================
   01. EPZA HEADER DESIGN TOKENS
   ================================================================ */
:root {
    --epza-header-blue: #2B54AC;
    --epza-header-blue-dark: #24468F;
    --epza-header-blue-deep: #19386F;
    --epza-header-red: #EC2127;
    --epza-header-red-dark: #C9181D;
    --epza-header-white: #FFFFFF;
    --epza-header-black: #111111;
    --epza-header-text: #1A2333;
    --epza-header-text-soft: #647086;
    --epza-header-bg: #FFFFFF;
    --epza-header-bg-soft: #F8FAFD;
    --epza-header-border: #E5EAF3;
    --epza-header-border-dark: #D7DFEC;
    --epza-header-shadow:
        0 5px 20px rgba(17, 32, 60, 0.055);
    --epza-header-shadow-dropdown:
        0 18px 45px rgba(25, 56, 111, 0.14);
    --epza-header-shadow-hover:
        0 10px 25px rgba(43, 84, 172, 0.12);
    --epza-header-transition:
        all .28s cubic-bezier(.22, 1, .36, 1);
}
/* ================================================================
   02. MAIN NAVBAR FOUNDATION
   ================================================================ */
.navbar {
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    background: var(--epza-header-white);
    transition:
        background .28s ease,
        box-shadow .28s ease;
}
/* ================================================================
   03. MAIN NAVIGATION LINKS
   ================================================================ */
.navbar-nav .nav-item a,
.navbar-nav .dropdown-item a,
.navbar-expand-lg .navbar-nav .nav-link {
    color: var(--epza-header-text);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    transition: var(--epza-header-transition);
}
/* Transparent header compatibility
   --------------------------------------------------------------- */
.header-transparent .navbar-nav .nav-item a,
.header-transparent .navbar-nav .dropdown-item a,
.header-transparent .navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
    font-size: 13px;
    padding: 10px 0;
}
/* ================================================================
   04. MAIN NAVIGATION HOVER
   ================================================================ */
.navbar-nav > .nav-item > a,
.navbar-nav > .nav-item > .nav-link {
    position: relative;
}
/*
    Modern EPZA navigation indicator.
    Keeps original navigation dimensions while adding
    a small institutional blue/red indicator.
*/
.navbar-nav > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 3px;
    border-radius: 10px;
    background:
        linear-gradient(
            90deg,
            var(--epza-header-blue),
            var(--epza-header-red)
        );
    transform: scaleX(0);
    transform-origin: center;
    transition:
        transform .28s cubic-bezier(.22,1,.36,1);
}
.navbar-nav > .nav-item:hover > .nav-link,
.navbar-nav > .nav-item.active > .nav-link {
    color: var(--epza-header-blue);
}
.navbar-nav > .nav-item:hover > .nav-link::before,
.navbar-nav > .nav-item.active > .nav-link::before {
    transform: scaleX(1);
}
/* Transparent version */
.header-transparent .navbar-nav > .nav-item:hover > .nav-link,
.header-transparent .navbar-nav > .nav-item.active > .nav-link {
    color: #fff;
}
.header-transparent .navbar-nav > .nav-item > .nav-link::before {
    background: var(--epza-header-red);
}
/* ================================================================
   05. DROPDOWN TOGGLE ARROW
   ================================================================ */
.dropdown-toggle::after {
    border: none;
    content: "\f124";
    color: var(--epza-header-text-soft);
    font-weight: 500;
    font-family: Flaticon;
    width: auto;
    height: auto;
    font-size: 7px;
    vertical-align: middle;
    transition:
        color .25s ease,
        transform .25s ease;
    margin-left: 6px;
}
.nav-item:hover > .dropdown-toggle::after,
.dropdown.show > .dropdown-toggle::after {
    color: var(--epza-header-blue);
    transform: rotate(180deg);
}
.header-transparent .dropdown-toggle::after {
    border: none;
    content: "\f124";
    color: #fff;
    font-weight: 500;
    font-family: Flaticon;
    width: auto;
    height: auto;
    font-size: 7px;
    vertical-align: middle;
    transition:
        color .25s ease,
        transform .25s ease;
    margin-left: 6px;
}
/* Nested dropdown arrow */
.dropdown-menu .dropdown-toggle::after {
    border: none;
    content: "\f124";
    color: rgba(255,255,255,.72);
    font-weight: 500;
    font-family: Flaticon;
    width: auto;
    height: auto;
    font-size: 7px;
    vertical-align: middle;
    position: absolute;
    right: 18px;
    line-height: 22px;
    transition: var(--epza-header-transition);
}
/* ================================================================
   06. BASE DROPDOWN
   ================================================================ */
.dropdown-menu {
    text-align: left;
    margin: 0;
    padding: 7px;
    top: 55px;
    border: 1px solid var(--epza-header-border);
    border-radius: 10px;
    font-size: 12px;
    background-color: var(--epza-header-white);
    box-shadow: var(--epza-header-shadow-dropdown);
    overflow: hidden;
}
/* ================================================================
   07. DROPDOWN ITEMS
   ================================================================ */
.navbar-nav .dropdown-menu .dropdown-item {
    position: relative;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border-bottom:
        1px solid var(--epza-header-border);
    transition: var(--epza-header-transition);
}
.navbar-nav .dropdown-menu .dropdown-item:last-child {
    border-bottom: 0;
}
.navbar-nav .dropdown-menu .dropdown-item a {
    position: relative;
    display: block;
    color: var(--epza-header-text) !important;
    padding: 11px 14px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    transition: var(--epza-header-transition);
}
.navbar-nav .dropdown-menu .dropdown-item a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--epza-header-blue);
    opacity: 0;
    transform:
        translateY(-50%)
        scale(.4);
    transition: var(--epza-header-transition);
}
.navbar-nav .dropdown-menu .dropdown-item:hover > a {
    color: var(--epza-header-blue) !important;
    background:
        rgba(43, 84, 172, .055);
    padding-left: 19px;
}
.navbar-nav .dropdown-menu .dropdown-item:hover > a::before {
    opacity: 1;
    transform:
        translateY(-50%)
        scale(1);
}
/* Active dropdown */
.navbar-nav .dropdown-menu .dropdown-item.active > a {
    color: var(--epza-header-blue) !important;
    background:
        rgba(43, 84, 172, .07);
}
/* ================================================================
   08. ACTIVE DROPDOWN COMPATIBILITY
   ================================================================ */
.navbar-nav .nav-item.active ul.dropdown-menu li a {
    color: var(--epza-header-text);
}
/* ================================================================
   09. MEGA MENU
   ================================================================ */
.dropdown-menu.megamenu {
    position: absolute;
    display: table;
    min-width: 100%;
    white-space: nowrap;
    left: 0;
    width: auto;
    top: 70px;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    padding: 18px;
    background: var(--epza-header-white);
    border:
        1px solid var(--epza-header-border);
    border-radius: 14px;
    box-shadow: var(--epza-header-shadow-dropdown);
    transform: translateY(12px);
    transition:
        opacity .28s ease,
        visibility .28s ease,
        transform .28s cubic-bezier(.22,1,.36,1);
}
.dropdown-menu.megamenu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* ================================================================
   10. MEGA MENU COLUMNS
   ================================================================ */
.dropdown-menu.megamenu .megamenu-column {
    float: left;
    width: 25%;
    padding: 5px 14px;
    border-right:
        1px solid var(--epza-header-border);
}
.dropdown-menu.megamenu .megamenu-column:last-child {
    border-right: 0;
}
/* ================================================================
   11. MEGA MENU LINKS
   ================================================================ */
.dropdown-menu.megamenu .megamenu-column a {
    position: relative;
    display: block;
    color: var(--epza-header-text-soft) !important;
    padding: 8px 8px 8px 13px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    background: transparent;
    transition: var(--epza-header-transition);
}
.dropdown-menu.megamenu .megamenu-column a::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--epza-header-blue);
    opacity: 0;
    transform:
        translateY(-50%)
        scale(.4);
    transition: var(--epza-header-transition);
}
.dropdown-menu.megamenu .megamenu-column a:hover {
    color: var(--epza-header-blue) !important;
    background:
        rgba(43, 84, 172, .055);
    padding-left: 18px;
}
.dropdown-menu.megamenu .megamenu-column a:hover::before {
    opacity: 1;
    transform:
        translateY(-50%)
        scale(1);
}
/* ================================================================
   12. MEGA MENU TITLE / HEADING COMPATIBILITY
   ================================================================ */
.dropdown-menu.megamenu .megamenu-column h5,
.dropdown-menu.megamenu .megamenu-column h6,
.dropdown-menu.megamenu .megamenu-column .menu-title {
    color: var(--epza-header-blue-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0 8px;
}
.dropdown-menu.megamenu .megamenu-column h5::after,
.dropdown-menu.megamenu .megamenu-column h6::after,
.dropdown-menu.megamenu .megamenu-column .menu-title::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--epza-header-red);
}
/* ================================================================
   13. DESKTOP DROPDOWN ENGINE
   IMPORTANT:
   ORIGINAL HOVER LOGIC PRESERVED
   ================================================================ */
@media (min-width: 991px) {
    .navbar-nav {
        padding-right: 15px;
    }
    .navbar-nav .nav-item {
        margin-left: 32px;
    }
    .main-menu .navbar-nav {
        text-align: right;
        margin-left: auto;
    }
    li.megamenu {
        display: inline;
        position: inherit;
    }
    .dropdown-menu {
        display: block;
        position: absolute;
        min-width: 210px;
        width: auto;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        text-align: left;
        margin: 0;
        padding: 7px;
        border:
            1px solid var(--epza-header-border);
        border-radius: 10px;
        font-size: 12px;
        transform: translateY(14px);
        transition:
            opacity .28s ease,
            visibility .28s ease,
            transform .28s cubic-bezier(.22,1,.36,1);
    }
    /* Nested dropdown */
    .dropdown-menu .dropdown-menu {
        left: -100%;
        top: 0;
        transform: translateY(0);
    }
    /* Existing hover behaviour */
    .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .dropdown:hover > .dropdown-menu.megamenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /* Dropdown item */
    .dropdown-item {
        padding: 0;
        margin: 0;
        position: relative;
        border-bottom:
            1px solid var(--epza-header-border);
        transition: var(--epza-header-transition);
    }
    .dropdown-item:last-child {
        border: 0;
    }
    .dropdown-item {
        background-color:
            var(--epza-header-white) !important;
    }
    .navbar-nav .dropdown-menu .dropdown-item:hover > a {
        color: var(--epza-header-blue) !important;
    }
}
/* ================================================================
   14. MOBILE NAVIGATION
   ORIGINAL BOOTSTRAP COLLAPSE ARCHITECTURE PRESERVED
   ================================================================ */
@media (max-width: 991px) {
    .navbar-collapse {
        background:
            linear-gradient(
                145deg,
                #19386F 0%,
                #24468F 65%,
                #2B54AC 100%
            );
        margin-top: 15px;
        margin-left: 0;
        padding: 12px 20px;
        overflow-y: auto;
        max-height: 330px;
        border-radius: 10px;
        box-shadow:
            0 14px 35px rgba(25, 56, 111, .20);
    }
    /* Mobile navigation links */
    .navbar-nav .nav-item > a,
    .navbar-nav .nav-item > .nav-link {
        position: relative;
        color: rgba(255,255,255,.90) !important;
        font-size: 13px;
        font-weight: 600;
        padding: 11px 4px;
    }
    .navbar-nav .nav-item > a:hover,
    .navbar-nav .nav-item > .nav-link:hover {
        color: #fff !important;
        background:
            rgba(255,255,255,.07);
        border-radius: 6px;
        padding-left: 10px;
    }
    /* Disable desktop underline inside mobile */
    .navbar-nav > .nav-item > .nav-link::before {
        display: none;
    }
    /* Mobile dropdown */
    .navbar-nav .dropdown-menu {
        border-left:
            1px solid rgba(255,255,255,.20);
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding-left: 12px;
    }
    .navbar-nav .nav-item ul.dropdown-menu li a {
        position: relative;
        color: rgba(255,255,255,.72) !important;
        padding-left: 10px;
    }
    .navbar-nav .nav-item ul.dropdown-menu li a::before {
        content: "";
        position: absolute;
        width: 7px;
        left: -5px;
        top: 50%;
        height: 1px;
        background:
            rgba(255,255,255,.25);
        opacity: 1;
    }
    .navbar-nav .dropdown-menu .dropdown-item a {
        color: rgba(255,255,255,.76) !important;
        padding: 9px 0;
    }
    .navbar-nav .dropdown-menu .dropdown-item a:hover {
        color: #fff !important;
        background:
            rgba(255,255,255,.055);
        padding-left: 8px;
    }
    .dropdown-item:focus,
    .dropdown-item:hover {
        color: #fff;
        text-decoration: none;
        background-color: transparent;
    }
    .dropdown-menu .dropdown-item {
        padding: 0;
        padding-left: 20px;
        background: transparent !important;
        border-bottom:
            1px solid rgba(255,255,255,.08);
    }
    /* Mobile dropdown arrow */
    .dropdown-toggle::after {
        color: rgba(255,255,255,.72);
    }
    .dropdown-menu .dropdown-toggle::after {
        color: rgba(255,255,255,.55);
    }
    /* ============================================================
       MOBILE MEGA MENU
       ORIGINAL SHOW/HIDE LOGIC PRESERVED
       ============================================================ */
    .dropdown-menu.megamenu {
        position: absolute;
        display: table;
        min-width: 100%;
        display: none;
        white-space: nowrap;
        left: 0;
        width: auto;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        background: transparent;
        border: 0;
        box-shadow: none;
        transform: none;
    }
    .dropdown-menu.megamenu.show {
        position: static;
        min-width: 100%;
        opacity: 1;
        visibility: visible;
        display: block;
        transform: none;
    }
    .dropdown-menu.megamenu.show .megamenu-column {
        float: none;
        width: 100%;
        padding: 8px 0;
        border-right: 0;
        border-bottom:
            1px solid rgba(255,255,255,.08);
    }
    .dropdown-menu.megamenu.show .megamenu-column:last-child {
        border-bottom: 0;
    }
    .dropdown-menu.megamenu .megamenu-column h5,
    .dropdown-menu.megamenu .megamenu-column h6,
    .dropdown-menu.megamenu .megamenu-column .menu-title {
        color: #fff;
        padding-left: 8px;
    }
    .dropdown-menu.megamenu .megamenu-column h5::after,
    .dropdown-menu.megamenu .megamenu-column h6::after,
    .dropdown-menu.megamenu .megamenu-column .menu-title::after {
        background: var(--epza-header-red);
    }
}
/* ================================================================
   15. MOBILE TOGGLER
   ================================================================ */
.navbar-toggler {
    padding: 5px 8px;
    line-height: 1;
    border:
        1px solid var(--epza-header-blue);
    border-radius: 6px;
    background:
        var(--epza-header-white);
    transition: var(--epza-header-transition);
}
.navbar-toggler:hover,
.navbar-toggler:focus {
    background:
        rgba(43,84,172,.06);
    border-color:
        var(--epza-header-blue-dark);
    outline: none;
    box-shadow:
        0 0 0 3px rgba(43,84,172,.08);
}
/* ================================================================
   16. HEADER BRAND
   ================================================================ */

header .navbar-brand {
    padding: 5px 0;
    margin: 0 15px;
    transition: var(--epza-header-transition);
}

header .navbar-brand:hover {
    transform: translateY(-1px);
}
/* ================================================================
   17. ACTIVE NAVIGATION
   ================================================================ */

header .nav-item.active > a,
header .nav-item.active > .nav-link {
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    color: var(--epza-header-blue);
}
/* ================================================================
   18. EPZA HEADER LOGIN / ACCOUNT CTA
   These selectors are intentionally generic enough to work with
   the existing header classes without changing the markup.
   ================================================================ */
.smartlib-login-btn,
.smartlib-account-link,
.epza-login-btn,
.epza-account-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 17px !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid var(--epza-header-blue);
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            var(--epza-header-blue),
            var(--epza-header-blue-dark)
        );
    box-shadow:
        0 7px 18px rgba(43,84,172,.16);
    transition: var(--epza-header-transition);
}
.smartlib-login-btn:hover,
.smartlib-account-link:hover,
.epza-login-btn:hover,
.epza-account-link:hover {
    color: #fff !important;
    background:
        linear-gradient(
            135deg,
            var(--epza-header-blue-dark) 0%,
            var(--epza-header-blue-deep) 72%,
            var(--epza-header-red) 150%
        );
    border-color:
        var(--epza-header-blue-dark);
    transform:
        translateY(-1px);
    box-shadow:
        0 11px 25px rgba(43,84,172,.22);
}
/* ================================================================
   19. ACCOUNT DROPDOWN
   ================================================================ */
.smartlib-account-dropdown,
.epza-account-dropdown {
    min-width: 220px;
    padding: 7px;
    background:
        var(--epza-header-white);
    border:
        1px solid var(--epza-header-border);
    border-radius: 10px;
    box-shadow:
        var(--epza-header-shadow-dropdown);
    overflow: hidden;
}
.smartlib-account-dropdown .dropdown-item,
.epza-account-dropdown .dropdown-item {
    border: 0;
    border-radius: 6px;
    background: transparent !important;
}
.smartlib-account-dropdown .dropdown-item:hover,
.epza-account-dropdown .dropdown-item:hover {
    background:
        rgba(43,84,172,.055) !important;
}
/* ================================================================
   20. HEADER TOP-BAR SUPPORT
   This does NOT change the structure of the existing top bar.
   ================================================================ */
.header-top {
    position: relative;
    background:
        var(--epza-header-blue-deep) !important;
    color: #fff;
}
.header-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            var(--epza-header-blue) 0%,
            var(--epza-header-blue) 72%,
            var(--epza-header-red) 100%
        );
}
.header-top a {
    transition: var(--epza-header-transition);
}
.header-top a:hover {
    color: #fff !important;
    opacity: .90;
}
.header-top .follow_us_on a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-top .follow_us_on a:hover {
    transform: translateY(-1px);
}
/* ================================================================
   21. HEADER CONTACT INFORMATION
   ================================================================ */
.header-top .mail-to,
.header-top .call-on {
    color:
        rgba(255,255,255,.88);
    font-family:
        'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
}
.header-top .mail-to i,
.header-top .call-on i {
    color:
        rgba(255,255,255,.72);
}
/* ================================================================
   22. DESKTOP HEADER POLISH
   ================================================================ */
@media (min-width: 992px) {
    header {
        background:
            var(--epza-header-white);
        box-shadow:
            var(--epza-header-shadow);
    }
    header .navbar {
        min-height: 78px;
    }
    .main-menu {
        display: flex;
        align-items: center;
    }
}
/* ================================================================
   23. STICKY HEADER COMPATIBILITY
   Existing JavaScript sticky behaviour is untouched.
   ================================================================ */

header.sticky {
    background:
        rgba(255,255,255,.98);
    box-shadow:
        0 7px 25px rgba(17,32,60,.10);
    backdrop-filter:
        blur(10px);
}
/* ================================================================
   24. ACCESSIBILITY
   ================================================================ */
.navbar a:focus-visible,
.navbar button:focus-visible {
    outline:
        3px solid rgba(43,84,172,.20);
    outline-offset: 2px;
}
/* ================================================================
   25. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .navbar *,
    .navbar *::before,
    .navbar *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}