/**
 * Shared top navigation — single-row desktop bar + mobile offcanvas
 * (load after Bootstrap; works with injected upbar.html / php upbar.php)
 */

@import url("ui_scale.css?v=20260824e");

#top {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    font-family: "Open Sans", Arial, sans-serif;
}

#top .navbar {
    width: 100%;
    max-width: 100%;
}

#top .navbar.navbar-expand-lg.d-none.d-lg-block {
    min-height: 3.5rem;
}

#top #main_nav {
    display: block !important;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#top #main_nav > .container.upbar-desktop-row,
#top #main_nav > .container.d-flex {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem 1rem;
    width: 100%;
    max-width: 100%;
    min-height: 3.5rem;
    box-sizing: border-box;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

#top .upbar-nav-left {
    overflow: visible;
    min-width: 0;
}

#top .upbar-nav-left .upbar-profile-wrap {
    flex-shrink: 0;
    margin-right: 0.25rem;
}

#top .upbar-nav-left .upbar-profile-wrap .upbar-profile-toggle {
    padding-left: 0.25rem;
    padding-right: 0.5rem;
}

#top #top_menu {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

#top #top_menu::-webkit-scrollbar {
    height: 3px;
}

#top #top_menu .nav-item.small .nav-link {
    white-space: nowrap;
    padding: 0.4rem 0.55rem;
    font-size: 0.9rem;
}

#top #main_nav .navbar-nav.align-items-center {
    flex-shrink: 0;
}

#top .upbar-desktop-actions {
    margin-left: 0;
}

/* Logo — moderate size in the single row */
#wrapwrap #top .navbar-brand.logo,
#top .navbar-brand.logo {
    display: inline-flex;
    align-items: center;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    margin: 0;
    margin-right: 0.25rem;
    line-height: 1;
    max-width: 100%;
}

#wrapwrap #top .navbar-brand.logo img,
#top .navbar-brand.logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 44px !important;
    max-width: min(96px, 28vw) !important;
    object-fit: contain !important;
}

#wrapwrap #top .navbar-brand.logo img.hx-logo-light,
#top .navbar-brand.logo img.hx-logo-light,
#wrapwrap #top nav[aria-label="Mobile"] .navbar-brand.logo img.hx-logo-light,
#top nav[aria-label="Mobile"] .navbar-brand.logo img.hx-logo-light,
html[data-theme="dark"] #wrapwrap #top .navbar-brand.logo img.hx-logo-dark,
html[data-theme="dark"] #top .navbar-brand.logo img.hx-logo-dark,
html[data-theme="dark"] #wrapwrap #top nav[aria-label="Mobile"] .navbar-brand.logo img.hx-logo-dark,
html[data-theme="dark"] #top nav[aria-label="Mobile"] .navbar-brand.logo img.hx-logo-dark {
    max-height: 52px !important;
    max-width: min(120px, 34vw) !important;
}

#wrapwrap #top .navbar-brand.logo img.hx-logo-dark,
#top .navbar-brand.logo img.hx-logo-dark {
    display: none !important;
}

html[data-theme="dark"] #wrapwrap #top .navbar-brand.logo img.hx-logo-light,
html[data-theme="dark"] #top .navbar-brand.logo img.hx-logo-light {
    display: none !important;
}

html[data-theme="dark"] #wrapwrap #top .navbar-brand.logo img.hx-logo-dark,
html[data-theme="dark"] #top .navbar-brand.logo img.hx-logo-dark {
    display: block !important;
}

/* Mobile top bar (d-lg-none): hamburger LEFT, theme center, logo RIGHT.
   These selectors only style the existing mobile nav, which Bootstrap already
   shows below 992px. Desktop nav is a separate d-lg-block block. */
#top nav[aria-label="Mobile"] > .container,
#top nav[aria-label="Mobile"] > .container.hx-mobile-upbar {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

#top nav[aria-label="Mobile"].navbar {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    min-height: 0;
}

#top nav[aria-label="Mobile"] > .container > [data-bs-toggle="offcanvas"],
#top nav[aria-label="Mobile"] > .container > .hx-mobile-upbar__menu {
    order: 1;
    flex-shrink: 0;
    margin-left: 0 !important;
    margin-right: 0;
}

#top nav[aria-label="Mobile"] > .container > .hx-theme-toggle,
#top nav[aria-label="Mobile"] > .container > .hx-mobile-theme-toggle {
    order: 2;
    flex-shrink: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#top nav[aria-label="Mobile"] > .container > .d-flex.flex-grow-1,
#top nav[aria-label="Mobile"] > .container > .hx-mobile-upbar__brand {
    order: 3;
    flex: 0 0 auto !important;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

#top nav[aria-label="Mobile"] > .container > #top_menu_collapse_mobile {
    order: 4;
}

#top nav[aria-label="Mobile"] .navbar-brand.logo {
    flex-shrink: 0;
    margin-right: 0;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

#top nav[aria-label="Mobile"] .navbar-brand.logo img,
#wrapwrap #top nav[aria-label="Mobile"] .navbar-brand.logo img {
    max-height: 40px !important;
    max-width: min(88px, 36vw) !important;
}

#top nav[aria-label="Mobile"] > .container > .nav-link.btn {
    flex-shrink: 0;
    margin-left: 0;
}

#top #top_menu_collapse_mobile.offcanvas {
    max-width: min(100vw, 22rem);
}

#top #top_menu_collapse_mobile .offcanvas-body {
    overflow-x: hidden;
    overflow-y: auto;
}

#top #top_menu_collapse_mobile .nav-link {
    word-break: break-word;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #top #top_menu .nav-item.small .nav-link {
        padding: 0.35rem 0.4rem;
        font-size: 0.84rem;
    }

    #wrapwrap #top .navbar-brand.logo img,
    #top .navbar-brand.logo img {
        max-height: 40px !important;
        max-width: 86px !important;
    }

    #top .btn_cta.btn.btn-primary {
        padding: 0.45rem 0.95rem !important;
        font-size: 0.84rem !important;
        min-height: 2.25rem;
    }

    #top .upbar-profile-toggle {
        max-width: 9rem;
    }

    #top .upbar-profile-name {
        max-width: 5rem !important;
    }
}

@media (min-width: 1200px) {
    #wrapwrap #top .navbar-brand.logo img,
    #top .navbar-brand.logo img {
        max-height: 48px !important;
        max-width: 104px !important;
    }
}

@media (max-width: 575.98px) {
    #top nav[aria-label="Mobile"] > .container {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    #wrapwrap #top nav[aria-label="Mobile"] .navbar-brand.logo img,
    #top nav[aria-label="Mobile"] .navbar-brand.logo img {
        max-height: 36px !important;
        max-width: min(80px, 34vw) !important;
    }

    #top .btn_cta.btn.btn-primary.w-100 {
        font-size: 0.9rem !important;
    }
}

/* Keep CTA and nav look consistent on pages that don't load full theme bundle */
#top .btn_cta.btn.btn-primary {
    background-color: #51649a;
    border-color: #51649a;
    color: #ffffff;
    font-size: 0.875rem !important;
    font-weight: 600;
    padding: 0.45rem 1.1rem !important;
    border-radius: 0.5rem;
    line-height: 1.4;
    min-height: 2.35rem;
    box-shadow: none !important;
}

#top .btn_cta.btn.btn-primary.w-100 {
    padding: 0.65rem 1.35rem;
}

#top .btn_cta.btn.btn-primary:hover,
#top .btn_cta.btn.btn-primary:focus,
#top .btn_cta.btn.btn-primary:active {
    background-color: #43537f;
    border-color: #43537f;
    color: #ffffff;
}

/* Login / register: public site links only (no staff or student nav) */
#top.upbar-minimal #top_menu > .nav-item:not([data-upbar-public]),
#top.upbar-minimal .top_menu > .nav-item:not([data-upbar-public]) {
    display: none !important;
}

#top.upbar-minimal [data-rbac-show] {
    display: none !important;
}

#top.upbar-minimal #desktop-signin-btn,
#top.upbar-minimal #desktop-profile-nav,
#top.upbar-minimal #mobile-signin-btn,
#top.upbar-minimal #mobile-profile-nav {
    display: none !important;
}

/* Profile dropdown in top nav */
#top .upbar-profile-toggle {
    color: var(--hx-ink-2, #334155);
    font-size: 0.875rem;
    font-weight: 600;
    max-width: 14rem;
}

#top .upbar-profile-toggle::after {
    margin-left: 0.15rem;
    vertical-align: middle;
}

#top .upbar-profile-toggle:hover,
#top .upbar-profile-toggle:focus,
#top .upbar-profile-toggle.show {
    color: var(--hx-ink, #0f172a);
}

#top .upbar-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0F766E;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    border: 1px solid rgba(13, 148, 136, 0.28);
    box-sizing: border-box;
    user-select: none;
}

#top .upbar-profile-avatar.upbar-profile-avatar--lg {
    width: 36px;
    height: 36px;
    font-size: 0.8125rem;
}

#top .upbar-profile-menu {
    min-width: 13rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0.35rem 0;
}

#top .upbar-profile-menu .dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

/* Minimal site footer — copyright left, social links right */
.site-footer {
    background-color: var(--hx-surface-2, #f8f9fa);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.site-footer > .container {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}

.site-footer-bar {
    min-height: auto;
    gap: 0.5rem !important;
}

.site-footer-copy {
    font-size: 0.75rem;
    line-height: 1.2;
}

.site-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.7rem;
    border-radius: 50%;
    color: #51649a;
    background: rgba(81, 100, 154, 0.1);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-footer-social-link:hover,
.site-footer-social-link:focus {
    color: #fff;
    background: #51649a;
}

/* Parent portal: logo + profile left, Logout + Contact Us right */
#top.upbar-parent-portal .navbar.d-lg-none,
#top.upbar-parent-portal #top_menu_collapse_mobile,
#top.upbar-parent-portal #top_menu,
#top.upbar-parent-portal .top_menu,
#top.upbar-parent-portal [data-upbar-public="1"],
#top.upbar-parent-portal [data-rbac-show]:not(#parent-upbar-actions):not([data-rbac-show="parent"]),
#top.upbar-parent-portal #desktop-signin-btn,
#top.upbar-parent-portal #mobile-signin-btn,
#top.upbar-parent-portal #desktop-contact-btn,
#top.upbar-parent-portal #main_nav > .container.d-flex > ul.navbar-nav:not(#parent-upbar-actions),
#top.upbar-parent-portal #main_nav > .container.upbar-desktop-row > ul.navbar-nav:not(#parent-upbar-actions),
#top.upbar-parent-portal .upbar-profile-menu,
#top.upbar-parent-portal .upbar-profile-toggle.dropdown-toggle::after,
#top.upbar-parent-portal #parent-profile-nav-link.dropdown-toggle::after {
    display: none !important;
}

#top.upbar-parent-portal nav.navbar.d-none.d-lg-block {
    display: block !important;
}

#top.upbar-parent-portal #main_nav.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#top.upbar-parent-portal #main_nav > .container.upbar-desktop-row,
#top.upbar-parent-portal #main_nav > .container.d-flex {
    justify-content: space-between !important;
    align-items: center;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 3.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

#top.upbar-parent-portal .upbar-nav-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-grow: 0 !important;
    width: auto;
}

#top.upbar-parent-portal #desktop-profile-nav.upbar-profile-wrap:not(.d-none),
#top.upbar-parent-portal #parent-profile-nav-link {
    display: flex !important;
    margin-left: 0 !important;
}

#top.upbar-parent-portal #parent-upbar-actions {
    display: flex !important;
    margin-left: auto !important;
}

#top.upbar-parent-portal #parent-upbar-actions .btn_cta {
    display: inline-block !important;
}

#top.upbar-parent-portal #parent-upbar-actions .parent-upbar-logout {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    line-height: 1.4;
    min-height: 2.35rem;
    padding: 0.45rem 1.1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: none !important;
}

#top.upbar-parent-portal #parent-upbar-actions .parent-upbar-logout:hover,
#top.upbar-parent-portal #parent-upbar-actions .parent-upbar-logout:focus,
#top.upbar-parent-portal #parent-upbar-actions .parent-upbar-logout:active {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: #ffffff !important;
}

#top.upbar-parent-portal .upbar-profile-link {
    color: var(--hx-ink-2, #334155);
    font-weight: 600;
}

#top.upbar-parent-portal .upbar-profile-link:hover,
#top.upbar-parent-portal .upbar-profile-link:focus {
    color: var(--hx-ink, #0f172a);
}

/* Parent portal on phones: one row is too narrow for logo + name + Logout +
   Contact Us + theme, so the name slid under Logout. Keep the full name on
   row 1 (logo, name, theme) and move Logout / Contact Us to row 2. */
@media (max-width: 575.98px) {
    #top.upbar-parent-portal #main_nav > .container.upbar-desktop-row,
    #top.upbar-parent-portal #main_nav > .container.d-flex {
        flex-wrap: wrap;
        row-gap: 0.4rem;
        padding-top: 0.4rem;
        padding-bottom: 0.5rem;
    }

    #top.upbar-parent-portal .upbar-nav-left {
        flex: 1 1 0% !important;
        min-width: 0;
    }

    #top.upbar-parent-portal #desktop-profile-nav.upbar-profile-wrap:not(.d-none),
    #top.upbar-parent-portal #parent-profile-nav-link {
        min-width: 0;
        flex-shrink: 1 !important;
    }

    #top.upbar-parent-portal .upbar-profile-name {
        max-width: none !important;
    }

    #top.upbar-parent-portal .hx-theme-slot {
        order: 2;
    }

    #top.upbar-parent-portal #parent-upbar-actions {
        order: 3;
        flex: 0 0 100%;
        flex-direction: row;
        justify-content: flex-end;
        margin-left: 0 !important;
    }
}