/*
 * Portal header — Figma "navbar-desktop" (4052:388, variants Default and Onscroll),
 * "navbar-mobile" (4639:19584) and the flash banner "ad" (4561:4261).
 *
 * Three states share this file because they share the markup:
 *
 *  - expanded, >= 1440px: a yellow flash band, a gradient band carrying the logo and the actions,
 *    then a white band carrying the menu;
 *  - compact (`is-compact`, added once the expanded header has left the viewport): the three bands
 *    collapse into one 72px white row, taken out of the flow and slid down from behind the top
 *    edge. The collapse is done with `display: contents` on the gradient band, which promotes the
 *    logo, the actions and the menu to siblings so `order` can lay them out logo / menu / actions
 *    without the markup changing;
 *  - below 1440px: the menu leaves the header for the drawer, and the search field collapses to a
 *    button, exactly as the Tablet and Mobile maquettes have it.
 */

/*
 * The slot keeps the room the expanded header takes in the flow. The `sticky-header` controller
 * pins its height before taking the bar out of the flow, so the compact bar can be `fixed` without
 * the page under it moving by a single pixel — the collapse used to happen in place, under the
 * pointer, and threw the whole page 121px upwards.
 */
.mo-header-slot {
    position: relative;
    z-index: 50;
    flex: none;
}

.mo-header {
    background-color: var(--mo-surface-default-white);

    /* Height of the logo box, the one measurement that changes in every state. */
    --mo-header-logo-height: var(--mo-scale-800);

    /*
     * Height of the searchbar, the bell and the menu button.
     *
     * Figma draws the 2px stroke of these controls **outside** their box. Sampled on the `searchbar`
     * component itself (4052:385): its frame is 40px tall at y=20..60 and it renders from y=18 to
     * y=61, i.e. 44px, with 40px of white inside. So `Scale/500` is the **interior** of the control,
     * not its box, and a CSS border-box of 40px is 4px short — 36px of interior against 40, which is
     * what made the whole row look squashed next to the maquette.
     */
    --mo-header-control-height: calc(var(--mo-scale-500) + 2 * var(--mo-border-width-xs));

    /*
     * Same reading on the pharmacy chip, which the file draws 2px taller than its neighbours:
     * `User` (4050:205) is a 42px frame and renders 46px, centred on the same axis as the other two.
     * 42 is a raw number, bound to no variable — it is taken as drawn rather than rounded to
     * `Scale/500`, because the maquette shows the chip overhanging the searchbar top and bottom.
     */
    --mo-header-chip-height: calc(42px + 2 * var(--mo-border-width-xs));

    /*
     * Gap between two of those controls. The maquette leaves 16px between their **boxes**
     * (4050:212), and each stroke eats 2px of it, so 12px of pink actually shows between them.
     */
    --mo-header-control-gap: calc(var(--mo-scale-200) - 2 * var(--mo-border-width-xs));
}

/*
 * Sampling the maquette at 1000px across the two variants: the expanded header ends on white
 * (4052:387, y=171) and the compact one carries a 1px `Border/default-medium` (4052:451, y=277).
 * Which is the only sensible reading — the compact bar floats over the page and needs the line, the
 * expanded one is followed by the page background.
 */
.mo-header.is-compact {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid var(--mo-border-default-medium);
    transform: translateY(-100%);
    transition: transform 200ms ease-out;
}

/* Added a frame after `is-compact`, so the bar slides in from behind the top edge. */
.mo-header.is-compact.is-shown {
    transform: none;
}

@media (min-width: 1440px) {
    .mo-header {
        --mo-header-logo-height: var(--mo-scale-1000);
    }
}

/* ---------------------------------------------------------------- flash banner */

.mo-flash {
    display: grid;
    /* 8px, fixed in the maquette: the band is 40px tall at every breakpoint. */
    padding: 8px var(--mo-margin-body-lr);
    background-color: var(--mo-surface-secondary);
    text-align: center;
}

/*
 * Every phrase sits in the same grid cell, so the band keeps the height of its tallest phrase and
 * does not jump between two rotations.
 */
.mo-flash__item {
    grid-area: 1 / 1;
    margin: 0;
    color: var(--mo-text-default-dark);
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-body-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
}

.mo-flash__item.is-current {
    opacity: 1;
    pointer-events: auto;
}

a.mo-flash__item {
    color: inherit;
    text-decoration: none;
}

/*
 * `ad` (4561:4261) draws the clickable phrase exactly like the plain one: no underline, at rest or
 * under the pointer. The keyboard indicator is the global focus ring of base/reset.css, so dropping
 * the underline costs nothing to a keyboard user.
 */

.mo-header.is-compact .mo-flash {
    display: none;
}

/* ---------------------------------------------------------------- bands */

.mo-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mo-spacing-sm);
    padding: var(--mo-spacing-xxs) var(--mo-margin-body-lr);
    background-image: var(--mo-gradient-brand-bar);
}

/*
 * Onscroll (4052:451) is a 72px row, and `menu-text` fills it edge to edge — the entries are 72px
 * tall there against 56px in the expanded band (4052:459). So the row is a fixed height whose
 * children stretch, not a min-height around centred children: centring left 9px of dead space above
 * and below the entries, and their tint and their underline stopped short of the row.
 */
.mo-header.is-compact .mo-header__main {
    display: flex;
    height: 72px;
    align-items: stretch;
    gap: var(--mo-spacing-sm);
    padding-inline: var(--mo-margin-body-lr);
    background-color: var(--mo-surface-default-white);
}

.mo-header.is-compact .mo-header__bar {
    display: contents;
}

.mo-header.is-compact {
    --mo-header-logo-height: var(--mo-scale-600);
}

.mo-header__brand {
    display: flex;
    flex: none;
    align-items: center;
    order: 1;
}

.mo-header__brand .mo-logo {
    height: var(--mo-header-logo-height);
    width: auto;
}

.mo-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mo-header-control-gap);
    order: 3;
}

/*
 * Onscroll puts the logo on the left and everything else on the right — the "Profile Section" ends
 * on the page margin at every breakpoint (4052:456 at 1920, 4639:19601 at 480). Above 1440px the
 * menu sits between the two and already grows, so the auto margin adds nothing there; below it the
 * menu is in the drawer, and without the auto margin the actions stayed glued to the logo.
 */
.mo-header.is-compact .mo-header__actions {
    margin-inline-start: auto;
}

/* ---------------------------------------------------------------- menu */

.mo-nav {
    display: none;
    order: 2;
    background-color: var(--mo-surface-default-white);
}

@media (min-width: 1440px) {
    .mo-nav {
        display: block;
        padding-inline: var(--mo-margin-body-lr);
    }

    .mo-header.is-compact .mo-nav {
        height: 100%;
        flex: 1 1 auto;
        padding-inline: 0;
    }
}

.mo-nav__list {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mo-nav__item {
    position: relative;
    display: flex;
}

/*
 * `menu-text` (4052:202) is 56px tall, 24px in from each side, and the active underline is drawn
 * inside that height. The underline is a border here, so the bottom padding gives its width back —
 * without that the whole menu band, and every page under it, sits 2px lower than the maquette.
 */
.mo-nav__link {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-xs) var(--mo-spacing-sm)
        calc(var(--mo-spacing-xs) - var(--mo-border-width-xs));
    border: 0;
    border-bottom: var(--mo-border-width-xs) solid transparent;
    background: none;
    color: var(--mo-text-default-dark);
    font-family: inherit;
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-regular);
    line-height: var(--mo-line-height-body-md);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Onscroll (4052:459): the same entries, 16px in from each side instead of 24px, and 72px tall. */
.mo-header.is-compact .mo-nav__list,
.mo-header.is-compact .mo-nav__item {
    height: 100%;
}

.mo-header.is-compact .mo-nav__link {
    height: 100%;
    padding: 0 var(--mo-spacing-xs);
}

/*
 * `menu-text` carries three states (component set 4052:201), and only two were implemented:
 *
 *  - Default  (4052:200) black, regular, no underline;
 *  - Hover    (4052:199) pink text, **`Surface/action-light` behind it** and the pink underline —
 *             the tint and the underline were both missing;
 *  - Onclick  (4052:198) pink bold and the underline, on white. It is what marks the current page
 *             here: the set has no "current" state of its own, and an entry has to say where the
 *             visitor is.
 *
 * An entry whose drop-down is open takes the Hover look as well. The set has no "open" state — the
 * maquette draws the drop-downs as detached frames, without their bar — so this is a product
 * decision, not a reading: the trigger must not go inert while its panel is on screen, and the
 * pointer has by then left it for the panel.
 */
.mo-nav__link:hover,
.mo-nav__link:focus-visible,
.mo-nav__link[aria-expanded='true'] {
    border-bottom-color: var(--mo-border-action);
    background-color: var(--mo-surface-action-light);
    color: var(--mo-text-action);
}

.mo-nav__link.is-active {
    border-bottom-color: var(--mo-border-action);
    color: var(--mo-text-action);
    font-weight: var(--mo-font-weight-bold);
}

.mo-nav__chevron {
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
    flex: none;
}

/*
 * The chevron does not flip when the drop-down opens: `menu-text` carries one glyph across its
 * three states (4052:200 / 199 / 198), pointing down in all of them. What marks the open entry is
 * the Hover look given to it above.
 */

/* ---------------------------------------------------------------- action controls */

/*
 * The bell, the search toggle and the user chip lay over the gradient in the expanded state and
 * over white in the compact one, so their border and their text colour are state dependent.
 */
/*
 * The bell is `button-icone` `Type=Secondary` — white surface, pink glyph — with its border swapped
 * to `Border/default-light` in the expanded header (4050:157), where a pink ring over the gradient
 * would read as an error, and left on `Border/action` in the compact one (4052:457). The glyph is
 * `Icon/action` in both: it was painted `Icon/default-dark`, which is the only black icon of the bar.
 */
.mo-header__icon-button {
    display: flex;
    width: var(--mo-header-control-height);
    height: var(--mo-header-control-height);
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--mo-border-width-xs) solid var(--mo-border-default-light);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
    color: var(--mo-icon-action);
    cursor: pointer;
}

.mo-header.is-compact .mo-header__icon-button {
    border-color: var(--mo-border-action);
}

/*
 * Hover (`Type=Secondary, State=Hover`, 4045:195) turns the button transparent — white glyph, white
 * border, no fill — so it reads over the gradient rather than sitting a flat pink square on top of
 * it. The button whose panel is open takes the same look, for the reason given for the menu entries
 * above.
 */
.mo-header__icon-button:hover,
.mo-header__icon-button:focus-visible,
.mo-header__icon-button[aria-expanded='true'] {
    border-color: var(--mo-border-default-light);
    background-color: transparent;
    color: var(--mo-icon-default-light);
}

.mo-header__icon-button svg {
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
}

.mo-header__badge-anchor {
    position: relative;
    display: flex;
}

.mo-header__badge {
    position: absolute;
    top: calc(-1 * var(--mo-spacing-xs) - -5px);
    right: calc(-1 * var(--mo-spacing-xs) - 1px);
    display: flex;
    min-width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    align-items: center;
    justify-content: center;
    padding-inline: var(--mo-spacing-xxs);
    border-radius: var(--mo-radius-round);
    background-color: var(--mo-surface-secondary);
    color: var(--mo-text-default-dark);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-body-sm);
    pointer-events: none;
    z-index: 1;
}

.mo-header__notifications,
.mo-header__user {
    position: relative;
    display: flex;
}

/*
 * Measured on the maquette (`User`, 4050:205): 8px in front of the avatar, 20px behind the chevron,
 * 8px between the three. The height is declared rather than left to the padding: `Spacing/xs` is
 * 8px below 1440px but 16px above it, so a padded box silently grows by 20px on the very width the
 * maquette is drawn at.
 */
.mo-header__user-button {
    display: flex;
    height: var(--mo-header-chip-height);
    max-width: 300px;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    padding: 0 var(--mo-scale-250) 0 var(--mo-spacing-xxs);
    border: var(--mo-border-width-xs) solid var(--mo-border-default-light);
    border-radius: var(--mo-radius-sm);
    /* Figma paints the chip with the neutral surface at 30% over the gradient. */
    background-color: rgb(244 244 244 / 30%);
    color: var(--mo-text-default-light);
    font-family: inherit;
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-body-md);
    cursor: pointer;
}

.mo-header.is-compact .mo-header__user-button {
    border-color: var(--mo-border-default-medium);
    background-color: var(--mo-surface-default);
    color: var(--mo-text-default-dark);
}

.mo-header__user-button svg {
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
    flex: none;
}

.mo-header__user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu button of the tablet and mobile navbars; the desktop menu band replaces it. */
.mo-header__menu-toggle {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    padding-inline: var(--mo-scale-300);
    height: var(--mo-header-control-height);
    border: var(--mo-border-width-xs) solid var(--mo-border-action);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
    color: var(--mo-text-action);
    font-family: inherit;
    font-size: var(--mo-font-size-btn);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-btn);
    cursor: pointer;
}

.mo-header__menu-toggle svg {
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
}

@media (min-width: 1440px) {
    .mo-header__menu-toggle {
        display: none;
    }
}

/* The user chip is in the drawer below 1440px, next to the menu it belongs with. */
@media (max-width: 1439.98px) {
    .mo-header__user {
        display: none;
    }
}