/* ============================================================================
 * Navbar "Donate" button + dropdown (Views/Shared/_DonatePartial.cshtml).
 *
 * Deliberately self-contained and separate from mhc-brand.css: this mirrors the
 * Donate control on the organization's public website (gold pill, teal text,
 * small up-caret; header-teal menu with an arrow notch and white links) rather
 * than the app's general dropdown styling. Everything is scoped under
 * .donate-nav so none of it leaks into the other navbar dropdowns.
 * ========================================================================== */

.donate-nav {
    --donate-gold: var(--mhc-gold-light, #FFC700);
    --donate-gold-hover: #FFD84D;
    --donate-text: var(--mhc-teal, #00676A);
    --donate-menu-bg: var(--mhc-teal, #00676A);
    --donate-menu-link: #fff;
    --donate-menu-link-hover: var(--mhc-gold-light, #FFC700);

    align-items: center;
    margin-right: 0.75rem;
}

/* ── The pill ─────────────────────────────────────────────────────────────── */
.donate-nav .donate-btn {
    background-color: var(--donate-gold);
    border: 0;
    border-radius: 50rem;
    color: var(--donate-text);
    font-family: var(--mhc-font-heading, Arial, Helvetica, sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    padding: 0.55rem 1.6rem 0.55rem 1.9rem;
    transition: background-color 0.15s ease-in-out;
}

.donate-nav .donate-btn:hover,
.donate-nav .donate-btn:focus-visible,
.donate-nav .donate-btn.show {
    background-color: var(--donate-gold-hover);
    color: var(--donate-text);
}

.donate-nav .donate-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}

/* Replace Bootstrap's down-caret with the website's small solid up-triangle,
   flipping down while the menu is open. */
.donate-nav .donate-btn.dropdown-toggle::after {
    border: 0;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-bottom: 0.3em solid currentColor;
    margin-left: 0.9em;
    vertical-align: 0.2em;
    transition: transform 0.15s ease-in-out;
}

.donate-nav .donate-btn.show::after {
    transform: rotate(180deg);
}

/* ── The menu ─────────────────────────────────────────────────────────────── */
.donate-nav .donate-menu {
    --bs-dropdown-bg: var(--donate-menu-bg);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 0.5rem;
    --bs-dropdown-min-width: 14rem;
    --bs-dropdown-padding-y: 1.25rem;
    --bs-dropdown-item-padding-x: 2rem;
    --bs-dropdown-item-padding-y: 0.6rem;
    --bs-dropdown-link-color: var(--donate-menu-link);
    --bs-dropdown-link-hover-color: var(--donate-menu-link-hover);
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: var(--donate-menu-link-hover);
    --bs-dropdown-link-active-bg: transparent;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
}

.donate-nav .donate-menu .dropdown-item {
    font-family: var(--mhc-font-heading, Arial, Helvetica, sans-serif);
    font-size: 1.1rem;
    text-align: center;
}

/* Arrow notch pointing up at the pill (desktop only — in the collapsed mobile
   menu the dropdown renders inline, where a notch would point at nothing). */
@media (min-width: 992px) {
    /* Bootstrap positions navbar dropdowns statically (no Popper), so the gap
       below the pill that makes room for the notch is a plain margin. */
    .donate-nav .donate-menu {
        margin-top: 14px;
        /* Optical correction: the padding is symmetric, but the heading font's
           line box leaves more room above the capitals than below the baseline
           of the last (descender-free) item, so the top read as visibly deeper
           at this padding size. Trim the top to balance it. */
        padding-top: calc(var(--bs-dropdown-padding-y) - 4px);
    }

    .donate-nav .donate-menu::before {
        content: "";
        position: absolute;
        top: -10px;
        right: 3.75rem;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid var(--donate-menu-bg);
    }
}

/* Collapsed (mobile) navbar: keep the pill from stretching and give it room. */
@media (max-width: 991.98px) {
    /* The partial sits before _LoginPartial in the markup (so it's left of
       Login/Logout on desktop), but in the collapsed menu it goes last, after
       Register/Login or Hello/Logout. Bootstrap only makes .navbar-collapse a
       flex container at lg+, so make the open (.show) and animating
       (.collapsing) states a flex column here, then use `order` to move the
       button. Closed .collapse:not(.show) stays display:none. Bootstrap also
       gives .navbar-collapse align-items:center, which only bites once it is a
       flex container — stretch restores the normal left-aligned block layout. */
    .navbar-collapse:has(> .donate-nav).show,
    .navbar-collapse:has(> .donate-nav).collapsing {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .donate-nav {
        /* The collapsed menu opens inline on the header-teal navbar, so a
           same-teal menu would disappear into it — deepen it slightly here
           (desktop keeps the exact header teal, since it floats over the page). */
        --donate-menu-bg: #00585A;
        order: 1;
        align-items: flex-start;
        margin: 0.5rem 0;
    }

    .donate-nav .donate-menu {
        --bs-dropdown-padding-y: 0.5rem;
        margin-top: 0.75rem;
    }

    .donate-nav .donate-menu .dropdown-item {
        text-align: left;
    }
}