/* Header utility strip: search, Contact and account.

   Two renderings of one partial. Above 768px the strip sits as a slim band over the main header;
   below it, the same controls appear as a block pinned to the bottom of the open mega-menu drawer.
   Each variant is hidden at the other breakpoint, so only one is ever in the accessibility tree.

   The breakpoint matches the mega-menu's exactly. If one moves, both move.

   Everything themeable is a custom property on .site-utility, defaulting to site-theme.css tokens.
*/

.site-utility {
    /* How much room the drawer variant needs reserved at the bottom of anything that scrolls
       behind it. Read by navigation-megamenu's drawer rules; see the note at the foot of this file. */
    --su-drawer-reserve: 13rem;

    /* Shell tokens, not brand roles. This used to be var(--site-color-primary-hover) on the same
       assumption the mega menu made - that the header is built from the primary colour. Under the
       BioHorizons theme that resolved to a bright orange strip carrying white text at 3.43:1.
       The strip is now whatever the theme says it is. */
    --su-bg: var(--site-utility-background, #10263b);
    --su-fg: color-mix(in srgb, var(--site-utility-text, #ffffff) 82%, transparent);
    --su-fg-strong: var(--site-utility-text, #ffffff);
    --su-field-bg: rgba(255, 255, 255, .08);
    --su-field-border: rgba(255, 255, 255, .16);
    --su-gap: 1.1rem;

    background: var(--su-bg);
    color: var(--su-fg);
    font-size: .8125rem;
}

.site-utility *,
.site-utility *::before,
.site-utility *::after {
    box-sizing: border-box;
}


/* The same measure as everything below it - min(100% - two gutters, --site-content-width), matching
       .site-container, which the header bar, the page content and the footer all use. Two
       measuring systems stacked on each other put the strip further right than the bar beneath it,
       which only became visible once --site-nav-alignment allowed right-aligned navigation.

       Written out rather than composed from .site-container in the markup, because the drawer
       variant renders this same element full-bleed and must not inherit a page measure. If
       .site-container's formula ever changes, this has to follow. */
.site-utility__inner {
    display: flex;
    align-items: center;
    gap: var(--su-gap);
    width: min(calc(100% - var(--site-page-gutter) - var(--site-page-gutter)), var(--site-content-width));
    margin-inline: auto;
    padding-block: .35rem;
}

/* ---------------------------------------------------------------------------
   Links and account controls
   --------------------------------------------------------------------------- */

.site-utility__link {
    color: var(--su-fg);
    text-decoration: none;
    white-space: nowrap;
}

/* Colour is the whole hover signal, deliberately - the same choice the mega menu's bar makes.
   These are chrome, not links in a sentence, and an underline appearing under one item in a tight
   row is a lot of movement for a hover. It puts the same requirement on a theme the mega menu
   documents: --site-utility-text has to be far enough from its 82% self to register as a change.

   Keyboard focus is unaffected - Site.css draws --site-focus-ring on :focus-visible sitewide, and
   the menu ITEMS are handled there too, where a global a:hover was outranking .dropdown-item.

   The search RESULTS further down keep their underline - those are links in a list of prose. */
.site-utility__link:hover,
.site-utility__link:focus-visible {
    color: var(--su-fg-strong);
    text-decoration: none;
}

.site-utility__link--static {
    cursor: default;
}

.site-utility__link--static:hover {
    color: var(--su-fg);
    text-decoration: none;
}

.site-utility__form {
    display: inline;
    margin: 0;
}

/* Sign out posts, so it has to be a button. Stripped back to read as the link beside it. */
.site-utility__button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Account menu (strip only)

   Identity and Sign out are one control that opens a menu, rather than two more items in the same
   right-aligned run as search and Contact - the two longest strings in the row were the two a
   visitor never needs.

   Only the strip collapses. The drawer variant keeps the flat stack: it is already fixed to the
   bottom of the viewport, so a menu would open off-screen.
   --------------------------------------------------------------------------- */

.site-utility__account {
    position: relative;
}

/* A hairline before the account control, so the strip reads as two groups - what the site offers,
   then who you are - rather than one undifferentiated row. Drawn on the element rather than as a
   flex gap so it appears only when the control does. */
@media (min-width: 768px) {
    .site-utility--strip .site-utility__account {
        padding-left: var(--su-gap);
        border-left: 1px solid var(--su-field-border);
    }
}

.site-utility__account-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.site-utility__account-caret {
    font-size: .6rem;
    opacity: .7;
    transition: transform .15s ease;
}

.site-utility__account-toggle[aria-expanded="true"] .site-utility__account-caret {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .site-utility__account-caret {
        transition: none;
    }
}

/* The menu is a light surface on a dark strip, so it inherits nothing from .site-utility - every
   colour in here is set explicitly rather than left to --su-fg. Above the header: the strip sits
   under a header that carries its own stacking context, and a menu that opens behind it is worse
   than no menu at all. */
.site-utility__menu {
    --bs-dropdown-min-width: 13.5rem;
    --bs-dropdown-font-size: .8125rem;
    z-index: 1050;
    color: var(--site-color-text, #344054);
}

.site-utility__menu-identity {
    display: block;
    line-height: 1.35;
    white-space: normal;
    /* The full DOMAIN\user, which the toggle shortens. Long enough to wrap on a narrow menu. */
    word-break: break-word;
}

.site-utility__menu-identity strong {
    display: block;
    color: var(--site-color-heading, #19324d);
}

.site-utility__menu-identity small {
    color: var(--site-color-text-muted, #667085);
}

/* Sign out posts, so it is a button wearing a menu item's clothes. Bootstrap's .dropdown-item
   already gives it full width, no border and inherited alignment, and reboot gives it the menu's
   font - so it needs nothing here beyond a pointer and a form that fills the row rather than
   sitting inline as it does up in the strip. */
.site-utility__menu .site-utility__form {
    display: block;
}

.site-utility__menu .dropdown-item {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Search
   --------------------------------------------------------------------------- */

.site-utility__search {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .2rem .7rem;
    border: 1px solid var(--su-field-border);
    border-radius: 999px;
    background: var(--su-field-bg);
    min-width: 9rem;
}

.site-utility__search:focus-within {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .14);
}

.site-utility__search-icon {
    font-size: .75rem;
    opacity: .75;
    flex: none;
}

.site-utility__search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--su-fg-strong);
    font: inherit;
    padding: .1rem 0;
}

.site-utility__search input::placeholder {
    color: var(--su-fg);
    opacity: .8;
}

.site-utility__search input:focus {
    outline: none;
}

/* The clear affordance some browsers add is invisible on a dark field. */
.site-utility__search input::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: .6;
}

/* ---------------------------------------------------------------------------
   Desktop - the slim strip
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .site-utility--drawer {
        display: none;
    }

    /* Right-aligned: the strip is a set of destinations you reach for deliberately, not content.
       Pushing it right and sitting it on a darker ground than the main header lets it recede
       rather than compete with the brand. */
    .site-utility--strip .site-utility__inner {
        justify-content: flex-end;
    }
}

/* ---------------------------------------------------------------------------
   Small screens - the drawer block
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .site-utility--strip {
        display: none;
    }

    /* Fixed to the bottom of the viewport and revealed only while the drawer is open. The mega
       menu already sets this class on <body>, so the two partials need no knowledge of each other
       and no script has to move nodes between them. */
    .site-utility--drawer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1041;
        display: none;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    body.mm-drawer-open .site-utility--drawer {
        display: block;
    }

    /* Stacked and full width: these are thumb targets at the end of a scroll, not a row of small
       links. Search leads, because it is the one control someone opens the menu already wanting. */
    /* width: auto undoes the page measure above. This block is fixed to the bottom of the
       viewport rather than laid out in the page, so it spans the full width and sets its
       own inset with padding, exactly as it did before. */
    .site-utility--drawer .site-utility__inner {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        width: auto;
        padding: .85rem 1rem 1rem;
    }

    .site-utility--drawer .site-utility__search {
        padding: .45rem .85rem;
        min-width: 0;
    }

    .site-utility--drawer .site-utility__link {
        display: block;
        padding: .55rem;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 4px;
        text-align: center;
    }

    .site-utility--drawer .site-utility__link:hover,
    .site-utility--drawer .site-utility__link:focus-visible {
        text-decoration: none;
        background: rgba(255, 255, 255, .08);
    }

    /* One solid action at the end of the stack, ascending in emphasis. */
    .site-utility--drawer .site-utility__link--cta {
        border-color: transparent;
        background: var(--site-color-secondary, #087f8c);
        color: #ffffff;
        font-weight: 600;
    }

    .site-utility--drawer .site-utility__form {
        display: block;
    }

    .site-utility--drawer .site-utility__button {
        width: 100%;
    }


}

/* Everything scrollable in the drawer has to clear this fixed block, or its last rows sit
   underneath it - unreachable at any scroll position, because the block is z-index 1041 over a
   drawer at 1040. .mm__bar had this reserve; .mm-panel did not, and a drill-down panel is a
   separate scroll container laid over the whole drawer.

   A variable because this component is what occupies the space, so it is what should say how much.
   Generous on purpose - the block grows when a user is signed in - and over-reserving costs a
   little scroll, while under-reserving hides links. */
@media (max-width: 767.98px) {
    body.mm-drawer-open .mm__bar,
    body.mm-drawer-open .mm-panel__inner {
        padding-bottom: var(--su-drawer-reserve, 13rem);
    }
}

/* ---------------------------------------------------------------------------
   Search results
   --------------------------------------------------------------------------- */

.site-search {
    padding: 2.5rem 1.5rem 4rem;
}

.site-search__header {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--site-color-border, #d8dee7);
}

.site-search__title {
    margin: 0 0 .25rem;
    color: var(--site-color-heading, #19324d);
}

.site-search__count,
.site-search__scope {
    margin: 0;
    color: var(--site-color-text-muted, #667085);
    font-size: .9rem;
}

.site-search__scope {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--site-color-border, #d8dee7);
}

.site-search__empty {
    color: var(--site-color-text, #344054);
}

.site-search__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    /* Long enough to scan, short enough to read - results are prose, not a table. */
    max-width: 68ch;
}

.site-search__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    text-decoration: none;
}

.site-search__result-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--site-color-link, #087f8c);
}

.site-search__link:hover .site-search__result-title,
.site-search__link:focus-visible .site-search__result-title {
    text-decoration: underline;
}

.site-search__result-route {
    font-family: var(--site-font-monospace, monospace);
    font-size: .8rem;
    color: var(--site-color-text-muted, #667085);
}

.site-search__result-description {
    margin: .25rem 0 0;
    color: var(--site-color-text, #344054);
}

.site-search__result-flag {
    display: inline-block;
    margin-top: .35rem;
    padding: .1rem .45rem;
    border-radius: 3px;
    background: var(--site-color-surface-strong, #eef2f6);
    color: var(--site-color-text-muted, #667085);
    font-size: .75rem;
}