/* =============================================
   GLOBAL NAVBAR - PO-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 — only when transparent-header is active) */
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar .nav-link,
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar .primary-navigation .nav-link,
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar .moremenu .nav-link {
    color: #ffffff !important;
}
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar .nav-link:hover,
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar .primary-navigation .nav-link:hover {
    color: #f59e0b !important;
}

/* ---- Login button styling for guests ---- */
/* All hero-btn-login / hero-btn-signup styles now in SCSS pipeline.
   Only fallback for .btn-login (non-popup mode) here. */
.navbar .login a.btn-login {
    background: #fff;
    color: #1E3A5F !important;
    border: 1.5px solid #1E3A5F;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.navbar .login a.btn-login:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff !important;
    text-decoration: none;
}

/* ---- Mobile: guest login dropdown fullscreen centered ---- */
@media (max-width: 767px) {
    .navbar .login-dropdown,
    .navbar .loginddown {
        position: fixed !important;
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
}

/* ---- Mobile drawer: category links ---- */
.drawer-cat-link {
    font-size: 0.9rem;
    padding: 10px 16px !important;
    border: none !important;
    color: #1a1a2e !important;
    transition: background 0.15s, color 0.15s;
}
.drawer-cat-link:hover,
.drawer-cat-link:focus {
    background: #f5f5f5 !important;
    color: #f59e0b !important;
    text-decoration: none;
}
.drawer-cat-link i {
    width: 20px;
    text-align: center;
    color: #6a6f73;
}
.drawer-cat-link:hover i {
    color: #f59e0b;
}
.drawer-cat-divider {
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
}
.drawer-cat-divider small {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: #9ca3af !important;
}