/* ============================================================
   Anokey LMS — navbar overrides
     1. Logo: stop the theme cropping it
     2. Dark navbar in the logo's navy, with orange accents
     3. Search bar moved inline, next to the menu links

   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. INLINE SEARCH ---------------------------- */

.navbar-inline-search {
    position: relative;
    max-width: 320px;
    width: 100%;
}

.navbar-inline-search .form-control {
    height: 42px;
    padding-right: 42px;
    border-radius: 999px;
    color: #fff;
    background-color: rgba(255, 255, 255, .10);
    border: 1px solid var(--ank-navy-line);
    transition: background-color .15s ease, border-color .15s ease;
}

.navbar-inline-search .form-control::placeholder {
    color: rgba(255, 255, 255, .55);
}

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

.navbar-inline-search__icon {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, .8);
    background: transparent;
}

.navbar-inline-search__icon:hover {
    color: #fff;
    background: var(--ank-orange);
}

/* RTL */
.rtl .navbar-inline-search .form-control {
    padding-right: 16px;
    padding-left: 42px;
}

.rtl .navbar-inline-search__icon {
    right: auto;
    left: 6px;
}

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

@media (max-width: 991px) {
    .navbar-inline-search {
        max-width: 100%;
        margin: 14px 0 4px;
    }
}