/* ============================================================
   Anokey LMS - navbar overrides
     1. Logo in the top bar, uncropped, lightly animated
     2. Dark navbar in the logo's navy, with orange accents
     3. Nav link spacing (search sits in the top bar)

   Loaded after app.css, so plain selectors win where possible;
   !important is used only where the theme itself uses it.
   ============================================================ */

:root {
    --ank-navy: #1b2a63;
    --ank-navy-deep: #16224f;
    --ank-navy-line: rgba(255, 255, 255, .14);
    --ank-orange: #f26522;
}

/* ---------- 1. LOGO (top bar) --------------------------- */
/* The logo now sits in the light top bar, so it needs no panel
   behind it. The theme's .img-cover (object-fit:cover) inside a
   fixed 170x50 box cropped wide logos; contain + auto width shows
   the full wordmark at its natural ratio. */

/* no box — just the wordmark, with breathing room above and below.
   The theme pinned .top-navbar to a hard 53px, which is what pushed
   the logo flush against the top edge. */

.top-navbar {
    height: auto;
    min-height: 0;
    padding: 16px 0 12px;
}

.top-navbar-brand {
    flex: 0 0 auto;
    width: auto;
    height: 44px;
    padding: 0;
    margin-right: 28px;
    border: 0;
    background: none;
    box-shadow: none;
}

.top-navbar-brand img {
    width: auto;
    max-width: 200px;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.rtl .top-navbar-brand {
    margin-right: 0;
    margin-left: 28px;
}

.rtl .top-navbar-brand img {
    object-position: right center;
}

@media (max-width: 991px) {
    .top-navbar {
        padding: 12px 0 8px;
    }

    .top-navbar-brand {
        height: 36px;
        margin: 0 auto;
    }

    .top-navbar-brand img {
        max-width: 160px;
    }

    .rtl .top-navbar-brand {
        margin: 0 auto;
    }
}

/* ---------- 1c. LOGO ANIMATION -------------------------- */
/* Entrance on page load, then a very slow drift so the header
   doesn't feel static. Hover gives a small lift. */

.top-navbar-brand img {
    animation:
        ank-logo-in .7s cubic-bezier(.22, .9, .3, 1) both,
        ank-logo-drift 6s ease-in-out 1s infinite;
    transition: transform .25s ease, filter .25s ease;
}

.top-navbar-brand:hover img {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 6px 12px rgba(27, 42, 99, .22));
}

@keyframes ank-logo-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ank-logo-drift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .top-navbar-brand img {
        animation: none;
    }

    .top-navbar-brand:hover img {
        transform: none;
    }
}

/* ---------- 2. DARK NAVBAR ------------------------------ */

/* multi-shaded: lighter navy behind the logo end, deepening to the
   right, with a faint orange bloom picked up from the wordmark */
#navbar {
    position: relative;
    background-color: var(--ank-navy);
    background-image:
        radial-gradient(38% 180% at 16% 0%, rgba(242, 101, 34, .16) 0%, rgba(242, 101, 34, 0) 60%),
        linear-gradient(100deg, #26386f 0%, #1e2d66 38%, #17244f 100%);
    border-bottom: 1px solid var(--ank-navy-deep);
    box-shadow: 0 6px 24px -14px rgba(11, 20, 48, .8);
}

/* thin brand-coloured rule along the bottom edge */
#navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ank-orange) 0%, rgba(242, 101, 34, .35) 22%, rgba(242, 101, 34, 0) 55%);
}

/* with the logo gone, let the menu start flush with the container */
#navbar #navbarContent {
    margin-left: 0;
}

.rtl #navbar #navbarContent {
    margin-right: 0;
}

/* the CTA was wrapping onto two lines ("Start / learning") */
#navbar .nav-start-a-live-btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

#navbar .nav-icons-or-start-live {
    flex: 0 0 auto;
    margin-left: 18px;
}

.rtl #navbar .nav-icons-or-start-live {
    margin-left: 0;
    margin-right: 18px;
}

/* menu links */
#navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    transition: color .15s ease;
}

#navbar .navbar-nav .nav-link:hover,
#navbar .navbar-nav .nav-link:focus,
#navbar .navbar-nav .nav-item.active .nav-link {
    color: #fff;
}

/* orange underline on hover */
#navbar .navbar-nav .nav-item {
    position: relative;
}

#navbar .navbar-nav .nav-item .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--ank-orange);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .15s ease, transform .15s ease;
}

#navbar .navbar-nav .nav-item .nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* "Categories" pill */
#navbar .menu-category > ul > li {
    color: #fff;
    background-color: rgba(255, 255, 255, .10);
    border: 1px solid var(--ank-navy-line);
    transition: background-color .15s ease;
}

#navbar .menu-category > ul > li:hover {
    background-color: rgba(255, 255, 255, .16);
}

/* the dropdown panel itself stays light — only the trigger is dark */
#navbar .menu-category .cat-dropdown-menu,
#navbar .menu-category .sub-menu {
    color: #171347;
}

#navbar .menu-category .cat-dropdown-menu a,
#navbar .menu-category .sub-menu a {
    color: #171347;
}

/* mobile slide-out panel */
@media (max-width: 991px) {
    #navbar .navbar-toggle-content {
        background-color: var(--ank-navy) !important;
    }

    #navbar .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }

    #navbar #navbarClose {
        color: #fff;
    }
}

/* ---------- 3. NAV LINK SPACING ------------------------- */
/* "Job Board" was wrapping onto two lines once the menu filled up */

#navbar .navbar-nav .nav-link {
    white-space: nowrap;
}

#navbar .navbar-nav > li {
    margin-right: 18px;
}

.rtl #navbar .navbar-nav > li {
    margin-right: 0;
    margin-left: 18px;
}

/* ---------- 4. TOP BAR SEARCH --------------------------- */
/* Sits immediately left of the cart. Fixed width so the cart,
   bell and user menu never shift as the viewport changes. */

.top-navbar .navbar-search .form-control {
    width: 230px;
    height: 40px;
    padding-right: 40px;
    border-radius: 999px;
    background-color: #f5f7fa;
    border: 1px solid #e7edf6;
    transition: background-color .15s ease, border-color .15s ease;
}

.top-navbar .navbar-search .form-control:focus {
    background-color: #fff;
    border-color: var(--ank-orange);
    box-shadow: none;
}

.top-navbar .navbar-search .search-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #8a97a8;
}

.rtl .top-navbar .navbar-search .form-control {
    padding-right: 16px;
    padding-left: 40px;
}

.rtl .top-navbar .navbar-search .search-icon {
    right: auto;
    left: 12px;
}

@media (max-width: 991px) {
    .top-navbar .navbar-search .form-control {
        width: 100%;
        min-width: 0;
    }

    .top-navbar .navbar-search {
        flex: 1 1 auto;
        margin-right: 12px;
    }
}