/* =============================================
   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 {
    color: #1a1a2e !important;
    text-decoration: none;
    font-weight: 500;
}
.navbar .nav-link:hover {
    color: #f59e0b !important;
}

/* Megamenu trigger link */
.navbar .megamenu-toggle {
    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;
}

/* ---- 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 {
    color: #ffffff !important;
}
body.pagelayout-frontpage.transparent-header:not(.scrolled) .navbar .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;
}

/* --------------------------------------------------------------------------
   Global fix: Button line-height (RemUI sets 1.063, BS5 default is 1.5)
   Without this, button text sits too high/low instead of vertically centered.
   -------------------------------------------------------------------------- */
.btn {
    line-height: 1.5 !important;
}
.btn-sm, .btn-group-sm > .btn {
    line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Forum search: add gap between input and search icon button
   -------------------------------------------------------------------------- */
.simplesearchform .input-group {
    gap: 6px;
}
.simplesearchform .input-group .form-control {
    border-radius: 8px !important;
}
.simplesearchform .input-group .btn.search-icon {
    border-radius: 8px !important;
}

/* ---- Dark Mode Toggle: Visual integration with header buttons ---- */

/* 1. Outlined icon button — matches hero-btn-login border + height */
.navbar .nav-darkmode .dm-toggle {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border: 1.5px solid #1a1a2e !important;
    border-radius: 6px;
    padding: 5.6px 8px;
    line-height: 19px;
    font-size: 13.6px;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.navbar .nav-darkmode .dm-toggle:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}
.navbar .nav-darkmode .dm-toggle .edw-icon {
    color: #1a1a2e !important;
    font-size: 1rem;
    line-height: 19px;
    height: auto !important;
    width: auto !important;
    transition: color 0.2s ease;
}
.navbar .nav-darkmode .dm-toggle:hover .edw-icon {
    color: #fff !important;
}

/* 2. Remove right divider in usermenu-wrapper — visually group dark mode with buttons */
.navbar #usernavigation .usermenu-wrapper > .divider:last-child {
    display: none !important;
}

/* 3. Match spacing: Acceder↔Registrate gap is 8px (gap-2).
   navbar-nav gap is ~24px, so -16px margin = 8px effective gap. */
.navbar #usernavigation > .nav-darkmode {
    margin-left: -16px;
}

/* 4. Transparent header (frontpage): ghost outline on dark hero */
body.pagelayout-frontpage .navbar.trasnparent-home-nav .nav-darkmode .dm-toggle {
    border-color: rgba(255, 255, 255, 0.8) !important;
}
body.pagelayout-frontpage .navbar.trasnparent-home-nav .nav-darkmode .dm-toggle .edw-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}
body.pagelayout-frontpage .navbar.trasnparent-home-nav .nav-darkmode .dm-toggle:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}
body.pagelayout-frontpage .navbar.trasnparent-home-nav .nav-darkmode .dm-toggle:hover .edw-icon {
    color: #fff !important;
}

/* 5. Dark mode (NightEye active): subtle light outline */
html[nighteyeplgn="active"] .navbar .nav-darkmode .dm-toggle {
    border-color: rgba(255, 255, 255, 0.4) !important;
}
html[nighteyeplgn="active"] .navbar .nav-darkmode .dm-toggle .edw-icon {
    color: #e4e4e7 !important;
}
html[nighteyeplgn="active"] .navbar .nav-darkmode .dm-toggle:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}
html[nighteyeplgn="active"] .navbar .nav-darkmode .dm-toggle:hover .edw-icon {
    color: #fff !important;
}