/**
 * LC top navbar restyle (global) — matches the "learningCards" mockup:
 * black bar, brand mark + wordmark, uppercase nav with an active white pill,
 * user dropdown + language box on the right.
 *
 * Loaded after ax_skin.css so these rules win. Layout goes flex on desktop
 * only (>= 980px); on smaller screens Bootstrap's collapse behaviour is kept.
 */

:root { --lc-navbar-h: 64px; }

/* Navbar sits 64px tall; keep page content clear of it */
body { padding-top: var(--lc-navbar-h) !important; }

.navbar-fixed-top .navbar-inner {
    background: #0b0b0b !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: var(--lc-navbar-h);
    height: var(--lc-navbar-h);
    padding: 0 !important;
    text-align: left;
}

.navbar-fixed-top .navbar-inner > .container {
    height: var(--lc-navbar-h);
    padding: 0 22px;
    width: auto;
    max-width: 1440px;
}

/* Brand: mark + wordmark */
.navbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0 26px 0 0;
    height: var(--lc-navbar-h);
    color: #fff;
    text-shadow: none;
}
.navbar .brand:hover { color: #fff; }
.navbar .brand .header_image_logo { display: none; } /* hide legacy PNG logo */
.lc-brand-mark { width: 30px; height: 30px; display: block; }
.lc-brand-text { font-size: 21px; font-weight: 400; color: #fff; letter-spacing: -0.2px; line-height: 1; }
.lc-brand-text b { font-weight: 800; }

/* Caret colour */
.navbar .caret { border-top-color: #fff; border-bottom-color: #fff; opacity: .9; }

/* Nav link base styling (applies at all widths) */
.navbar .header_nav > li > a {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-shadow: none;
    background: transparent;
}
.navbar .header_nav > li > a:hover,
.navbar .header_nav > li > a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12);
}

/* Active section -> white pill */
.navbar .nav-collapse .header_nav > li.active > a {
    background: #fff !important;
    color: #0b0b0b !important;
    border-radius: 22px;
}
.navbar .nav-collapse .header_nav > li.active > a:hover { background: #fff !important; color: #0b0b0b !important; }

/* Language toggle -> bordered "IT" box */
.lc-lang-toggle {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 7px 12px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Hide the small flag image next to the language menu */
.language_flag_image_link { display: none !important; }

/* ---------- Desktop layout (flex) ---------- */
@media (min-width: 980px) {
    .navbar-fixed-top .navbar-inner > .container {
        display: flex;
        align-items: center;
    }
    .navbar .btn-navbar { display: none !important; }

    .navbar .brand { order: 1; }

    .navbar .nav-collapse {
        order: 2;
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        height: var(--lc-navbar-h);
        overflow: visible;
        max-height: none;
    }
    .navbar .nav-collapse .nav.pull-left {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        float: none;
    }
    .navbar .nav-collapse .nav.pull-right {
        margin: 0 0 0 auto;   /* push user dropdown to the far right of nav-collapse */
        display: flex;
        align-items: center;
        float: none;
    }

    /* Language dropdown (top-level pull-right) pinned to the very right */
    .navbar-inner > .container > ul.nav.pull-right.header_nav {
        order: 3;
        margin: 0 0 0 14px;
        display: flex;
        align-items: center;
        float: none;
    }

    .navbar .header_nav > li { display: flex; align-items: center; }
    .navbar .header_nav > li > a { padding: 9px 16px !important; border-radius: 22px; }
    .navbar .nav-collapse .nav.pull-right > li > a { padding: 9px 12px !important; }
}