:root {
    --nav-bg: #162F6A; /* palette strong blue (was #162F6A) */
    --nav-dark: #2144AB; /* home box / hover */
    --nav-text: #FFFFFF;
    --nav-home-line: #FFFFFF; /* white underline under Home */
    --nav-line: #d9dde5; /* full-width divider lines */
    --drop-hover-bg: #D2DFFF; /* dropdown hover: palette lightest blue */
    --drop-hover-text: #162F6A; /* dropdown hover text: palette navy */
}

html.theme-classic {
    --nav-bg: #162F6A; /* bright blue bar                  */
    --nav-dark: #0A2A4F; /* dark navy home box               */
    --nav-home-line: transparent;
}

/* ---------- full-width divider lines ---------- */
.gh-topbar {
    border-bottom: 1px solid var(--nav-line, #d9dde5);
    background: #fff;
}

.gh-brand {
    border-bottom: 0;
    background: #fff;
}

#b-accessibility {
    border-bottom: 0 !important;
}

/* ---------- navbar bar ---------- */
.wrapper.megamenu-wraper {
    background: var(--nav-bg, #1A2F6B) !important;
    border: 0;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

    /* top-level items */
    .wrapper.megamenu-wraper .main-menu .nav-menu > li > a {
        color: var(--nav-text, #fff) !important;
        background: transparent !important;
        font-size: 15px;
        font-weight: 700;
        padding: 13px 14px;
        margin: 0;
        border-radius: 0;
        text-decoration: none;
        transition: background .15s;
    }

        .wrapper.megamenu-wraper .main-menu .nav-menu > li > a:hover,
        .wrapper.megamenu-wraper .main-menu .nav-menu > li > a:focus,
        .wrapper.megamenu-wraper .main-menu .nav-menu > li:hover > a,
        .wrapper.megamenu-wraper .main-menu .nav-menu > li.active > a {
            background: var(--nav-dark, #0F2150) !important;
            color: var(--nav-text, #fff) !important;
        }

        .wrapper.megamenu-wraper .main-menu .nav-menu > li > a::after,
        .wrapper.megamenu-wraper .main-menu .nav-menu > li > a span {
            color: inherit !important;
        }

        /* Home: dark box (+ white underline on the navy bar) */
        .wrapper.megamenu-wraper .main-menu .nav-menu > li > a.home {
            background: var(--nav-dark, #0F2150) !important;
            border-bottom: 2px solid var(--nav-home-line, #fff);
            padding: 13px 16px;
        }

    .wrapper.megamenu-wraper .nav-menu > li > a.home .fa-home {
        color: #fff;
    }

    /* ---------- dropdown panel (same colour + font as navbar) ---------- */
    .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav {
        background: var(--nav-bg, #162F6A) !important; /* same as navbar */
        border: 0;
        border-radius: 0;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
        min-width: 260px;
        margin-top: 0;
    }

        .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav .sub-nav-group,
        .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav .sub-nav-group > li {
            background: transparent !important;
            list-style: none;
            margin: 0;
        }

        .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav a {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            color: var(--nav-text, #fff) !important;
            background: transparent !important;
            font-family: inherit; /* same font as navbar */
            font-size: 15px; /* same size as navbar */
            font-weight: 700; /* same weight as navbar */
            padding: 12px 18px;
            margin: 0;
            border-radius: 0;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, .15);
            transition: background .15s, color .15s;
        }

            /* hover / keyboard focus: light blue background, dark text */
            .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav a:hover,
            .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav a:focus,
            .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav a:hover label,
            .wrapper.megamenu-wraper .main-menu .nav-menu > li .sub-nav a:focus label {
                background: var(--drop-hover-bg, #D2DFFF) !important;
                color: var(--drop-hover-text, #162F6A) !important;
            }

    .wrapper.megamenu-wraper .sub-nav label {
        color: inherit !important;
        cursor: pointer;
        margin: 0;
        font-weight: inherit;
        font-size: inherit;
    }

    /* ---------- misc ---------- */
    .wrapper.megamenu-wraper .navbar-text {
        color: #fff !important;
        font-size: 13px;
    }

    .wrapper.megamenu-wraper .showhide em {
        background: #fff !important;
    }

    .wrapper.megamenu-wraper a:focus-visible {
        outline: 2px solid #ffff00;
        outline-offset: -2px;
    }

/* =========================================================
   Top buttons + search use the SAME colour as the navbar
   (Login / Logout / Register + search box and its button)
   ========================================================= */
.b-tool-item a.gh-btn,
.gh-tools a.gh-btn {
    background: var(--nav-bg, #1A2F6B) !important;
    color: #fff !important;
}

    .b-tool-item a.gh-btn:hover,
    .b-tool-item a.gh-btn:focus {
        background: var(--nav-dark, #0F2150) !important;
    }

.gh-wrap .gh-search {
    border-color: var(--nav-bg, #1A2F6B) !important;
}

    .gh-wrap .gh-search button {
        background: var(--nav-bg, #1A2F6B) !important;
        color: #fff !important;
    }

        .gh-wrap .gh-search button:hover,
        .gh-wrap .gh-search button:focus {
            background: var(--nav-dark, #0F2150) !important;
        }

    .gh-wrap .gh-search:focus-within {
        box-shadow: 0 0 0 3px rgba(26, 47, 107, .25);
    }

/* accessibility + tool icon hover also follows the bar colour */
.b-tool-btn:hover, .b-tool-btn:focus {
    color: var(--nav-bg, #1A2F6B);
}

/* =========================================================
   Login / Register buttons + Search = follow the navbar colour
   (change --btn-blue here if you want a different shade)
   ========================================================= */
:root {
    --btn-blue: var(--nav-bg);
    --btn-blue-hover: #286090;
}

.b-tool-item a.gh-btn,
.gh-tools a.gh-btn {
    background: var(--btn-blue, #162F6A) !important;
    color: #fff !important;
}

    .b-tool-item a.gh-btn:hover,
    .b-tool-item a.gh-btn:focus {
        background: var(--btn-blue-hover, #286090) !important;
    }

.gh-wrap .gh-search {
    border-color: var(--btn-blue, #162F6A) !important;
}

    .gh-wrap .gh-search button {
        background: var(--btn-blue, #162F6A) !important;
        color: #fff !important;
    }

        .gh-wrap .gh-search button:hover,
        .gh-wrap .gh-search button:focus {
            background: var(--btn-blue-hover, #286090) !important;
        }

    .gh-wrap .gh-search:focus-within {
        box-shadow: 0 0 0 3px rgba(51, 122, 183, .3);
    }

.b-tool-btn:hover, .b-tool-btn:focus {
    color: var(--btn-blue, #162F6A);
}