/* =============================================
   GLOBAL NAVBAR - Udemy-Style (2026-02-19)
   Applied on ALL pages (not just frontpage).
   Loaded via common_end.php.
   ============================================= */

/* ---- Full-width navbar container ---- */
.navbar .navbar-container {
    max-width: 100% !important;
    padding: 0 24px;
}

/* ---- Nav link colors: dark navy, amber on hover ---- */
.navbar .nav-link,
.navbar .primary-navigation .nav-link,
.navbar .moremenu .nav-link {
    color: #1a1a2e !important;
    text-decoration: none;
    font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .primary-navigation .nav-link:hover,
.navbar .moremenu .nav-link:hover {
    color: #f59e0b !important;
}

/* Megamenu trigger link */
.navbar .megamenu-toggle {
    font-weight: 600;
    font-size: 0.9rem;
}
.navbar .primary-navigation .nav-link {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Chevron and icon inherit link color */
.navbar .nav-link .fa-chevron-down,
.navbar .nav-link i {
    color: inherit !important;
}

/* ---- Hide Calendar link globally ---- */
.navbar .primary-navigation a[href*="calendar"],
.navbar .primary-navigation a[href*="calendar.php"] {
    display: none !important;
}
.navbar .nav-item:has(a[href*="calendar"]) {
    display: none !important;
}

/* ---- Search form layout (injected by JS) ---- */
.navbar-course-search {
    flex: 1;
    max-width: 600px;
    margin: 0 16px;
    display: flex;
    align-items: center;
}
.navbar-search-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #d1d5db;
    border-radius: 50px;
    padding: 0;
    transition: all 0.2s;
}
.navbar-search-wrapper:focus-within {
    background: #fff;
    border-color: #1a1a2e;
    box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.1);
}
.navbar-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px 0 16px;
    color: #6a6f73;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.navbar-search-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 16px 10px 4px;
    font-size: 0.9rem;
    color: #1a1a2e;
    outline: none;
    font-family: inherit;
}
.navbar-search-input::placeholder {
    color: #6a6f73;
}

/* Scrolled state: solid white navbar, search on light grey */
body.scrolled .navbar-search-wrapper {
    background: #f0f0f0;
    border-color: #d1d5db;
}

/* Hide search on mobile (< 768px) - navbar is too narrow */
@media (max-width: 768px) {
    .navbar-course-search {
        display: none;
    }
}

/* ---- Transparent header state (frontpage only, over hero) ---- */
/* Search bar semi-transparent on transparent header */
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar-search-wrapper {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar-search-icon {
    color: rgba(255, 255, 255, 0.7);
}
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar-search-input {
    color: #fff;
}
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Transparent header link colors (frontpage hero) */
body.pagelayout-frontpage:not(.scrolled) .navbar .nav-link,
body.pagelayout-frontpage:not(.scrolled) .navbar .primary-navigation .nav-link,
body.pagelayout-frontpage:not(.scrolled) .navbar .moremenu .nav-link {
    color: #ffffff !important;
}
body.pagelayout-frontpage:not(.scrolled) .navbar .nav-link:hover,
body.pagelayout-frontpage:not(.scrolled) .navbar .primary-navigation .nav-link:hover {
    color: #f59e0b !important;
}

/* ---- Login button styling for guests ---- */
.navbar .login a.btn-login,
.navbar .login .hero-btn-login .login-btn-text {
    background: #1E3A5F;
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 24px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: background 0.2s;
}
.navbar .login a.btn-login:hover {
    background: #2C5282;
    text-decoration: none;
    color: #fff !important;
}

/* Style the login dropdown trigger (popup mode) */
.navbar .login .hero-btn-login {
    background: #1E3A5F;
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.navbar .login .hero-btn-login:hover {
    background: #2C5282;
    text-decoration: none;
    color: #fff !important;
}
.navbar .login .hero-btn-login .login-btn-icon-user {
    color: #fff !important;
}

/* Transparent header: login button keeps navy style (high contrast on transparent) */
body.pagelayout-frontpage:not(.scrolled) .navbar .login .hero-btn-login,
body.pagelayout-frontpage:not(.scrolled) .navbar .login a.btn-login {
    background: #1E3A5F;
    color: #fff !important;
}