/* Header container (keeps your 1440px max width without forcing overflow) */
:root {
    /* Desktop defaults (used before JS measures real heights) */
    --elimys-topbar-height: 88px;
    --elimys-subnav-height: 56px;

    /* Single variable used to offset BOTH:
       - page content (#mainLayout)
       - drawer/backdrop top */
    --elimys-mobile-header-height: calc(var(--elimys-topbar-height) + var(--elimys-subnav-height));
}

/* Mobile defaults (used before JS measures real height) */
@media (max-width: 767.98px) {
    :root {
        --elimys-topbar-height: 0px;
        --elimys-subnav-height: 0px;

        /* Keep content from rendering behind the fixed mobile header before JS runs */
        --elimys-mobile-header-height: 112px;
    }
}

/* Prevent initial “behind header then snap” by reserving space immediately */
#mainLayout {
    padding-top: var(--elimys-mobile-header-height);
}

/* Also fixes anchor jumps (optional, but usually desired with fixed headers) */
html {
    scroll-padding-top: var(--elimys-mobile-header-height);
}

/* Ensure subnav content doesn't wrap; if it can't fit, JS will collapse it */
.elimys-subnav .navbar-collapse {
    flex-wrap: nowrap;
}

.elimys-subnav .navbar-nav {
    flex-wrap: nowrap;
}

.elimys-subnav .navbar-nav .nav-item,
.elimys-subnav .navbar-nav .nav-link {
    white-space: nowrap;
}

.elimys-header-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: .75rem;
    padding-right: .75rem;
}

/* “Glass” top bars */
.elimys-topbar,
.elimys-subnav,
.elimys-mobilebar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(17, 24, 39, .08);
}

/* =========================
   Desktop: FIXED + STICKY
   ========================= */

/* Ensure desktop top bar is actually fixed and always above page content */
.elimys-topbar {
    background: rgba(255, 255, 255, .92);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
}

/* Desktop sub-nav: fixed below the topbar */
.elimys-subnav {
    background: rgba(248, 249, 250, .90);
    position: fixed;
    top: var(--elimys-topbar-height);
    left: 0;
    right: 0;
    z-index: 2950;
}

/* Modern “pill” nav links */
.elimys-subnav .navbar-nav .nav-link {
    color: #111827;
    font-weight: 600;
    padding: .5rem .75rem;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}

.elimys-subnav .navbar-nav .nav-link:hover,
.elimys-subnav .navbar-nav .nav-item.dropdown.show > .nav-link {
    background: rgba(59, 130, 246, .10);
    color: #0b5ed7;
    text-decoration: none;
}

/* Dropdown polish */
.elimys-dropdown-menu {
    border-radius: 14px;
    padding: .5rem;
    border: 1px solid rgba(17, 24, 39, .08);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
    z-index: 3100;
}

.elimys-dropdown-menu .dropdown-item {
    border-radius: 10px;
    padding: .55rem .75rem;
}

.elimys-dropdown-menu .dropdown-item:hover,
.elimys-dropdown-menu .dropdown-item:focus {
    background: rgba(59, 130, 246, .10);
}

.userdropdown .dropdown-menu {
    z-index: 3100;
}

/* =========================
   Shared visuals
   ========================= */

.elimys-brand-logo {
    width: 120px;
    height: auto;
}

.elimys-institution-logo {
    height: 55px;
    width: auto;
}

.elimys-verified-badge {
    vertical-align: text-top;
}

/* Buttons */
.elimys-action-btn {
    border-radius: 999px;
    font-weight: 600;
}

/* =========================
   Mobile: drawer + backdrop
   ========================= */

/* Keep mobile fixed header above everything */
.elimys-mobilebar {
    background: rgba(255, 255, 255, .94);
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6000;
}

/* Drawer/backdrop should START below the fixed mobile header */
.drawer {
    top: var(--elimys-mobile-header-height) !important;
    height: calc(100vh - var(--elimys-mobile-header-height)) !important;
    height: calc(100dvh - var(--elimys-mobile-header-height)) !important;
    z-index: 5400 !important;
}

.drawer-backdrop {
    top: var(--elimys-mobile-header-height) !important;
    height: calc(100vh - var(--elimys-mobile-header-height)) !important;
    height: calc(100dvh - var(--elimys-mobile-header-height)) !important;

    z-index: 5200 !important;
    background: rgba(17, 24, 39, .40) !important;
}

/* Drawer panel itself */
.drawer .drawer-content {
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
}

/* Drawer list items (make the change obvious) */
.drawer .list-group.panel .list-group-item,
.drawer .list-group.panel .list-group-item-action {
    padding: .8rem 1rem;
    font-weight: 650;
    color: #111827;
    border-radius: 10px;
    margin: .15rem .5rem;
}

.drawer .list-group.panel .list-group-item:hover,
.drawer .list-group.panel .list-group-item:focus,
.drawer .list-group.panel .list-group-item-action:hover,
.drawer .list-group.panel .list-group-item-action:focus {
    background: rgba(59, 130, 246, .10);
    text-decoration: none;
}

.drawer .list-group-item i {
    width: 1.25rem;
    margin-right: .5rem;
    text-align: center;
}

.drawer .collapse .list-group-item {
    font-weight: 550;
    padding-left: 1.25rem;
}

/* Keep the action area stable (visible even when menu collapses) */
.elimys-subnav-actions {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Mobile fixed-header actions row */
.elimys-mobile-actions {
    padding: .35rem .75rem;
}

.elimys-mobile-actions .btn {
    white-space: nowrap;
}

/* ===== CTA buttons (Apply / Contact / Donate) ===== */
.elimys-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    height: 34px;
    padding: 0 .75rem;

    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .2px;

    border: 1px solid transparent;
    text-decoration: none !important;

    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}

.elimys-cta:hover,
.elimys-cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
}

.elimys-cta:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* Apply Now (primary gradient) */
.elimys-cta-apply {
    color: #ffffff !important;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 55%, #10b981 100%);
}

/* Contact Us (clean, modern outline) */
.elimys-cta-contact {
    color: #0b5ed7 !important;
    background: rgba(255, 255, 255, .85);
    border-color: rgba(11, 94, 215, .28);
    box-shadow: none;
}

.elimys-cta-contact:hover,
.elimys-cta-contact:focus {
    background: rgba(11, 94, 215, .08);
    border-color: rgba(11, 94, 215, .40);
}

/* Donate (warm gradient) */
.elimys-cta-donate {
    color: #111827 !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #f97316 100%);
    border-color: rgba(217, 119, 6, .35);
}

/* Keep CTA text from wrapping (important for your "fit" logic + mobile header) */
.elimys-cta span {
    white-space: nowrap;
}

/* Slightly smaller on very narrow screens */
@media (max-width: 380px) {
    .elimys-cta {
        padding: 0 .6rem;
        height: 32px;
        font-size: .85rem;
    }
}

/* ===== Drawer: normalize collapse chevrons (push to end) ===== */
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .5rem;
}

/* Your markup uses legacy `pull-right` on the chevron; disable floats and push it to the end */
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] .pull-right,
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] i.fa-angle-down,
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] i.fa-angle-up,
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] i.fa-chevron-down,
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] i.fa-chevron-up {
    float: none !important;
    margin-left: auto;
    margin-right: 0;
    opacity: .75;
}

/* Keep the leading icon consistent */
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] > i:first-child {
    width: 1.25rem;
    text-align: center;
    margin-right: .25rem;
}

/* Optional: prevent the text from wrapping weirdly before the chevron */
.drawer .list-group.panel > a.list-group-item[data-toggle="collapse"] {
    white-space: nowrap;
}

/* Non-mobile overflow => switch the subnav into "drawer mode" */
.elimys-subnav.elimys-subnav--drawer #institutionNavbar {
    display: none !important;
}

/* Force-show the hamburger on md+ when we are in drawer mode */
.elimys-subnav.elimys-subnav--drawer .navbar-toggler {
    display: inline-flex !important;
}

/* Make toggler match your mobile button feel */
.elimys-subnav .navbar-toggler {
    border: 0;
    box-shadow: none;
    outline: none;
}