/*
    Header dropdowns and the facility bar. [MST6-1250]

    Markup: Views/Shared/Components/FacilitySwitcher/Bar.cshtml (facility bar) and the host's
    user menu. Behaviour: js/View_Scripts/Shared_Views/View_HeaderDropdown.js.

    Colours come from the brand tokens (--aa-primary, --aa-primary-border) with MyChild's values
    as the fallback, so another product can adopt the bar without restyling it.
*/

/* #region [ Dropdown (shared by the facility Switch and the user menu) ] */

.header-dropdown {
    position: relative;
}

    .header-dropdown > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
    }

        /* The disclosure triangle, in both engines. */
        .header-dropdown > summary::-webkit-details-marker {
            display: none;
        }

        .header-dropdown > summary::marker {
            content: "";
        }

        .header-dropdown > summary:focus-visible {
            outline: 2px solid var(--aa-primary, #18988B);
            outline-offset: 2px;
        }

/*
    Text for screen readers only. Defined here rather than borrowed from Bootstrap: the hosts ship
    Bootstrap 4, which calls it .sr-only, and 5 renamed it .visually-hidden -- using the wrong one
    prints the text on screen.
*/
.header-dropdown__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header-dropdown__chevron {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.header-dropdown[open] .header-dropdown__chevron {
    transform: rotate(180deg);
}

/*
    The panel. In the facility bar it is a <form>, which site.css styles globally (white, flex
    column, 50px side padding, centred text) -- every one of those has to be undone here.
*/
.header-dropdown__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 3100; /* above the nav's sub-menus (3000) */
    display: block;
    min-width: 240px;
    max-width: min(360px, calc(100vw - 32px));
    margin: 0;
    padding: 6px;
    text-align: left;
    background: #ffffff;
    border: 1px solid #d9dee3;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);
}

.header-dropdown__panel--end {
    left: auto;
    right: 0;
}

.header-dropdown__heading {
    margin: 0;
    padding: 6px 10px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7480;
}

.header-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.header-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #1b2430;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .header-dropdown__item:hover,
    .header-dropdown__item:focus-visible {
        background: #eef3f3;
        color: #1b2430;
        text-decoration: none;
        outline: none;
    }

    .header-dropdown__item:focus-visible {
        box-shadow: inset 0 0 0 2px var(--aa-primary, #18988B);
    }

/* Check mark holds its space on every row so the names line up; only the current row shows it. */
.header-dropdown__check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--aa-primary, #18988B);
    visibility: hidden;
}

.header-dropdown__item[aria-current="true"] {
    font-weight: 600;
    cursor: default;
}

    .header-dropdown__item[aria-current="true"] .header-dropdown__check {
        visibility: visible;
    }

.header-dropdown__divider {
    height: 1px;
    margin: 6px 4px;
    background: #e4e8ec;
}

/* #endregion */

/* #region [ Facility bar ] */

.facility-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.facility-bar__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--aa-primary, #18988B);
}

.facility-bar__name {
    min-width: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1b2430;
    /* The long tail of real facility names -- truncate rather than push Switch off the bar. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facility-bar__switch {
    flex-shrink: 0;
}

.facility-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 16px;
    border: 1.5px solid #9aa1a9;
    border-radius: 999px;
    background: #ffffff;
    color: #3a424c;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .facility-bar__toggle:hover,
    .facility-bar__switch[open] > .facility-bar__toggle {
        border-color: var(--aa-primary, #18988B);
        background: #f3f8f8;
    }

@media (max-width: 576px) {
    .facility-bar {
        gap: 10px;
    }

    .facility-bar__icon {
        width: 24px;
        height: 24px;
    }

    .facility-bar__name {
        font-size: 1.1rem;
    }

    .facility-bar__toggle {
        padding: 4px 10px 4px 12px;
        font-size: 0.9rem;
    }
}

@media print {
    /* Which facility a printed page came from matters; the control to change it does not. */
    .facility-bar__switch {
        display: none;
    }
}

/* #endregion */