/* site logo positioning, controlled from Admin > Settings > Media */

/* bootstrap navbar pages */
/* navbar stretches the full screen width, so the logo sits in the left corner and the links on the right edge
   (bootstrap's .container would otherwise keep both squeezed into the middle ~1140px) */
.navbar > .container[class*="site-navbar-logo-"] {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 767px) {
    .navbar > .container[class*="site-navbar-logo-"] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* desktop, logo on the left: the menu + Login button stay together on the right,
   but pulled in a bit so the Login / Register button isn't stuck to the screen edge */
@media (min-width: 992px) {
    .site-navbar-logo-left .navbar-nav {
        align-items: center;
        margin-right: 48px;
    }
}

.site-navbar-logo-left .navbar-brand {
    order: 1;
}
.site-navbar-logo-left .navbar-toggler {
    order: 2;
}
.site-navbar-logo-left .navbar-collapse {
    order: 3;
}

.site-navbar-logo-center .navbar-brand {
    order: 2;
    margin-left: auto;
    margin-right: auto;
}
.site-navbar-logo-center .navbar-toggler {
    order: 1;
}
.site-navbar-logo-center .navbar-collapse {
    order: 3;
}

.site-navbar-logo-right .navbar-brand {
    order: 3;
    margin-left: auto;
}
.site-navbar-logo-right .navbar-toggler {
    order: 1;
}
.site-navbar-logo-right .navbar-collapse {
    order: 2;
    margin-right: auto;
}

/* fixed floating logo on the auth pages */
.top-logo.logo-pos-left {
    left: 20px;
    right: auto;
    transform: none;
}
.top-logo.logo-pos-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
.top-logo.logo-pos-right {
    left: auto;
    right: 20px;
    transform: none;
}

/* Courses dropdown in the navbar: same app-colour gradient on every public page
   (before, only All Courses / All Batches had it and the rest showed bootstrap's plain blue on click) */
.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px 0;
    margin-top: 10px;
}

.navbar .dropdown-item {
    padding: 10px 25px;
    font-weight: 500;
    color: #333;
    transition: all 0.3s;
}

/* the page you're on (e.g. "All Courses" on all_courses.php) looks like the others, no stuck highlight */
.navbar .dropdown-item.active {
    background: transparent;
    color: #333;
}

/* gradient only while hovering / clicking (and for keyboard users tabbing through) */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:active,
.navbar .dropdown-item:focus-visible {
    background: linear-gradient(135deg, var(--primary-color, #2148C0), var(--secondary-color, #FF5722));
    color: #fff;
    padding-left: 30px;
}

/* no blue box around "Courses" after clicking it with the mouse */
.navbar .nav-link:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}