/* The site's header and footer: the university's brand bar, the title row,
   the navigation row and the footer. They were part of bootstrap-overrides.css
   and are kept apart here, unchanged, so that a page with its own base (the
   Cell LIMS) can load the very same rules and carry the very same header and
   footer. On the site this file loads straight after bootstrap-overrides.css,
   which is where these rules stood; the header's behaviour is in
   dark-mode-toggle.css, sticky-header.css and mobile-navigation.css. */

/* ==========================================================================
   UCB Header Styles (matching REFERENCE)
   ========================================================================== */

header.ucb {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 20px;
    padding: 15px 0;
    font-weight: 750;
    font-family: "Roboto Condensed", sans-serif;
    line-height: 1.1;
}
header.ucb.black {
    background: var(--header-bg);
    color: var(--header-text);
}

header.ucb.black a:link,
header.ucb.black a:visited,
header.ucb.black a:hover {
    color: var(--header-text);
}

.affiliation {
    text-transform: uppercase;
    font-size: 50%;
    padding-top: 5px;
    font-weight: bold;
}

header.ucb.black .affiliation,
header.ucb.black .affiliation a:link,
header.ucb.black .affiliation a:visited {
    color: var(--text-tertiary);
}

@media screen and (min-width: 768px) {
    header.ucb {
        font-size: 30px;
    }
}

/* ==========================================================================
   The utility classes the header and footer are built from
   ========================================================================== */

.background-black {
    background-color: var(--ucb-black);
    color: var(--ucb-white);
}
.background-color-dark-gray-dark {
    background-color: var(--nav-bg); /* Uses #424242 in light mode, #1a1a1a in dark mode */
    overflow: visible; /* Allow dropdowns to extend beyond navbar container */
}
.background-color-gold {
    background-color: var(--ucb-gold);
}

.padding-small { padding: 10px 0; }
.padding-xs-bottom { padding-bottom: 4px; }
.padding-top { padding-top: 1rem; }
.padding-bottom { padding-bottom: 1rem; }

@media (min-width: 768px) {
    .padding-top { padding-top: 1.5rem; }
    .padding-bottom { padding-bottom: 1.5rem; }
}

.brand-bar {
    padding: 10px 0 10px 0 !important;
}

.brand-bar-white {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* UCB Brand Bar Styling */
.ucb-brand-bar {
    padding: 10px 0;
    width: 100%;
}

.ucb-brand-bar .container-lg {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ucb-brand-bar-white {
    background-color: var(--ucb-white);
    border-bottom: 1px solid var(--border-color);
}

.ucb-brand-bar-black {
    background-color: var(--ucb-black);
}

.ucb-home-link {
    display: inline-flex;
    align-items: center;
}

.ucb-logo {
    height: 24px;
    width: auto;
}

/* Mobile brand bar and header dimensions (match colorado.edu) */
@media (max-width: 767px) {
    .ucb-brand-bar {
        padding: 10px 0;
    }

    header.ucb {
        padding: 6px 0;
    }

    .ucb-logo {
        height: 18px;
    }
}

/* Dark mode brand bar: show/hide variants based on theme */
/* Light mode: show white variant, hide black variant */
.brand-bar-light-mode {
    display: flex;
}

.brand-bar-dark-mode {
    display: none;
}

/* Dark mode: hide white variant, show black variant */
[data-theme="dark"] .brand-bar-light-mode {
    display: none !important;
}

[data-theme="dark"] .brand-bar-dark-mode {
    display: flex !important;
}

.text-nav { font-weight: 600; font-family: "Roboto", sans-serif; }

.background-black a:link,
.background-black a:visited {
    color: var(--ucb-white);
}

/* ==========================================================================
   Navbar - UCB Custom Navigation (matching REFERENCE implementation)
   ========================================================================== */

.ucb-navbar {
    font-weight: 600;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    overflow: visible; /* Allow dropdowns to extend beyond navbar */
}

.ucb-navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Prevent wrapping on desktop - keep navbar on one row (below this, hamburger drawer takes over) */
@media (min-width: 1200px) {
    .ucb-navbar ul {
        flex-wrap: nowrap;
    }
}

.ucb-navbar ul li {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.ucb-navbar a:link,
.ucb-navbar a:visited {
    display: inline-block;
    padding: 10px;
    color: var(--nav-text) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background-color 0.2s, color 0.2s;
}

.ucb-navbar a:visited {
    color: var(--nav-text) !important;
}

/* Dark grey navbar variant */
.ucb-navbar.ucb-navbar-dark-grey {
    background: var(--nav-bg); /* Uses theme variable: #424242 in light, #1a1a1a in dark */
}

.ucb-navbar.ucb-navbar-dark-grey a:link,
.ucb-navbar.ucb-navbar-dark-grey a:visited {
    color: var(--nav-text) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Desktop-only: active/hover states with gold background badges */
@media (min-width: 1200px) {
    .ucb-navbar.ucb-navbar-dark-grey a:link.active,
    .ucb-navbar.ucb-navbar-dark-grey a:visited.active {
        color: var(--nav-active-text) !important;
        font-weight: bold;
        background: var(--nav-active-bg);
        text-decoration: none !important;
        border-bottom: none !important;
    }

    .ucb-navbar.ucb-navbar-dark-grey a:hover {
        color: var(--nav-text-hover) !important;
        background: var(--nav-dropdown-hover-bg);
        text-decoration: none !important;
        border-bottom: none !important;
    }

    /* Dropdown trigger span - persistent gold background when active */
    .ucb-navbar.ucb-navbar-dark-grey .dropdown > span.active {
        color: var(--nav-active-text) !important;
        font-weight: bold;
        background: var(--nav-active-bg);
    }

    .ucb-navbar.ucb-navbar-dark-grey .dropdown > span.active:hover {
        color: var(--nav-active-text) !important;
        background: var(--nav-active-bg);
    }

    /* Dropdown trigger link - persistent gold background when active */
    .ucb-navbar.ucb-navbar-dark-grey .dropdown > a.active {
        color: var(--nav-active-text) !important;
        font-weight: bold;
        background: var(--nav-active-bg);
    }

    .ucb-navbar.ucb-navbar-dark-grey .dropdown > a.active:hover {
        color: var(--nav-active-text) !important;
        background: var(--nav-active-bg);
    }

    .ucb-navbar.ucb-navbar-dark-grey .dropdown > span:hover {
        color: var(--nav-text-hover) !important;
        background: var(--nav-dropdown-hover-bg);
    }

    /* Align home icon with text baseline in desktop navbar */
    .ucb-navbar .nav-home-icon {
        position: relative;
        top: -2px;
    }
}

/* Dropdown navigation - Matching REFERENCE implementation */
.ucb-navbar .dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown trigger - span element (non-clickable) */
.ucb-navbar .dropdown > span {
    display: inline-block;
    padding: 10px;
    color: var(--nav-text) !important;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.ucb-navbar.ucb-navbar-dark-grey .dropdown > span {
    color: var(--nav-text) !important;
}

/* Desktop only: the user's name is the one nav item whose width we do not
   control, and a long one pushes the row into a collision (a 35-character name
   overlapped by 28px at 1280 before this cap). Truncating keeps the nav's total
   width predictable. The full name stays in the trigger's aria-label, so
   nothing is lost to assistive tech. The mobile drawer is full width and needs
   no cap. */
@media (min-width: 1200px) {
    .ucb-navbar .dropdown > span {
        max-width: 20ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}

.ucb-navbar .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--nav-dropdown-bg);
    min-width: 220px;
    width: max-content;
    max-height: 80vh; /* Use viewport-based height - simpler and more reliable */
    overflow-y: auto; /* Enable vertical scrolling when content is too tall */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    box-shadow: var(--shadow-lg);
    z-index: 10000; /* Must be higher than sticky-header-container (z-index: 1000) */
    left: 0;
    top: 100%;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Firefox thin scrollbar */
    scrollbar-color: var(--ucb-gold) var(--nav-dropdown-bg); /* Firefox scrollbar colors */
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Webkit scrollbar styling for dropdown (Chrome, Safari, Edge) */
.ucb-navbar .dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.ucb-navbar .dropdown-content::-webkit-scrollbar-track {
    background: var(--nav-dropdown-bg);
}

.ucb-navbar .dropdown-content::-webkit-scrollbar-thumb {
    background: var(--ucb-gold);
    border-radius: 3px;
}

.ucb-navbar .dropdown-content::-webkit-scrollbar-thumb:hover {
    background: var(--ucb-gold-dark);
}

/* Right-aligned dropdowns (for user menu) */
.right-links .dropdown .dropdown-content {
    left: auto;
    right: 0;
}

.ucb-navbar .dropdown-content a {
    color: var(--nav-text);
    padding: 12px 16px;
    display: block;
    border-bottom: none !important;
    transition: all 0.2s;
    white-space: nowrap;
}

/* Desktop-only: dropdown content hover/active gold styles */
@media (min-width: 1200px) {
    .ucb-navbar .dropdown-content a:hover {
        background-color: var(--nav-dropdown-hover-bg);
    }

    .ucb-navbar .dropdown-content a.active {
        background-color: var(--nav-active-bg);
        color: var(--nav-active-text) !important;
        font-weight: bold;
    }
}

.ucb-navbar .dropdown-content hr {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* Desktop-only: show dropdowns on hover and keyboard focus */
@media (min-width: 1200px) {
    .ucb-navbar .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Keyboard navigation support for dropdown */
    .ucb-navbar .dropdown:focus-within .dropdown-content {
        display: block;
    }
}

.ucb-navbar .dropdown-content a:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: -3px;
}

/* Mobile responsive dropdown */
@media (max-width: 1199.98px) {
    .ucb-navbar .dropdown-content {
        position: static;
        display: none;
        background-color: var(--nav-dropdown-bg);
        box-shadow: none;
    }

    .ucb-navbar .dropdown.mobile-open .dropdown-content {
        display: block;
    }
}

/* Logout button in navbar */
.logout-link-button {
    background: transparent;
    border: none;
    color: var(--nav-text) !important;
    cursor: pointer;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
}

.logout-link-button:hover {
    color: var(--nav-text-hover) !important;
    background: var(--nav-dropdown-hover-bg);
}

.logout-link-button:active {
    color: var(--nav-active-text) !important;
    font-weight: bold;
    background: var(--nav-active-bg);
}

/* Right-aligned links */
.right-links {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%; /* Full navbar height */
    display: flex;
    align-items: stretch; /* Stretch children to full height */
}

.right-links li {
    display: flex;
    align-items: stretch; /* Stretch children to full height */
}

/* Responsive styles for mobile - only apply when mobile menu is active */
@media (max-width: 1199.98px) {
    .ucb-navbar ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .right-links {
        position: static;
    }

    .right-links li {
        display: block;
    }
}

/* ==========================================================================
   Footer Styles (matching goal-footer.png)
   ========================================================================== */

footer.background-black {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    border-top: var(--border-3) solid var(--ucb-gold);
}

/* Force left alignment on all footer columns */
footer.background-black [class*="col-"] {
    text-align: left !important;
}

footer.background-black [class*="col-"] > * {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.footer-heading {
    color: var(--ucb-gold);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.footer-subheading {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.footer-text {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-link {
    color: var(--ucb-gold) !important;
    text-decoration: none;
}

.footer-link:hover {
    color: var(--footer-text) !important;
    text-decoration: none;
}

/* UCB Footer "Be Boulder" Column */
.ucb-footer {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.ucb-footer p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.ucb-footer a {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.ucb-footer-be-boulder {
    display: block;
    max-width: 240px;
    height: auto;
    margin-bottom: 1rem;
    margin-left: 0 !important;
    margin-right: auto;
    text-align: left !important;
}

.ucb-footer img {
    margin-left: 0 !important;
    margin-right: auto;
    text-align: left !important;
}

.ucb-home-link {
    color: var(--ucb-white) !important;
    text-decoration: underline;
    font-weight: normal;
    display: inline;
    text-align: left !important;
}

.ucb-home-link:hover {
    color: var(--ucb-white) !important;
    text-decoration: none !important;
}

.ucb-info-footer-links {
    font-size: 0.85rem;
    text-align: left !important;
}

.ucb-info-footer-links a {
    text-align: left !important;
}

.footer-link-small {
    color: var(--ucb-white) !important;
    text-decoration: none;
}

.footer-link-small:hover {
    color: var(--ucb-white) !important;
    text-decoration: none;
}

/* Footer left column styling */
footer.background-black .content {
    text-align: left !important;
}

footer.background-black .block-title {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

footer.background-black .block-title strong {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

footer.background-black .block-title a {
    color: var(--ucb-gold);
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

footer.background-black .block-title a:hover {
    color: var(--footer-link-hover);
    text-decoration: none;
}

/* Footer widget - ensure left alignment for Be Boulder column */
footer.background-black #ucb-footer-embed,
footer.background-black [id^="ucb-footer"] {
    text-align: left;
}

/* Override any center alignment from widget */
footer.background-black [id^="ucb-footer"] p,
footer.background-black [id^="ucb-footer"] div {
    text-align: left !important;
}

/* Override widget link colors to gold - multiple selectors to ensure override */
footer.background-black a,
footer.background-black a:link,
footer a,
footer a:link {
    color: var(--ucb-gold) !important;
    text-decoration: none !important;
}

footer.background-black a:hover,
footer.background-black a:focus-visible,
footer a:hover,
footer a:focus-visible {
    color: var(--footer-link-hover) !important;
    text-decoration: none !important;
}

/* Specific overrides for any widget-generated content */
footer [class*="ucb"] a,
footer [id*="ucb"] a,
footer div a,
footer p a {
    color: var(--ucb-gold) !important;
}

footer [class*="ucb"] a:hover,
footer [id*="ucb"] a:hover,
footer div a:hover,
footer p a:hover {
    color: var(--footer-link-hover) !important;
    text-decoration: none !important;
}