/* ==========================================================================
   HEADER

   The top bar, logo and menu.

   The design floats the header over the top of the hero rather than sitting it
   above the page, and the menu itself is a translucent pill. So the header is
   positioned absolutely over the first section and the page below it starts at
   the very top.

   Design values are in style.css. Never write a raw colour or size here.
   ========================================================================== */

.nex-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    /* The header runs the full width of the page but only the logo and the
       pill are actually drawn on it. The rest is empty space, and empty space
       that swallows clicks is a strip across the top of every page where
       nothing underneath can be pressed. It mattered less when the header only
       ever sat over the hero. Now that it follows you down the page it would
       sit over real content, so the empty part is made to pass clicks
       through and only the pieces that are drawn take them.

       Found on 3 September while testing the team cards: a card sitting under
       the floating pill could not be clicked. */
    pointer-events: none;
}

.nex-logo,
.nex-nav,
.nex-menu-toggle {
    pointer-events: auto;
}

/* The header keeps the wider line rather than coming in to the content column,
   because it floats over the hero picture: the design sits the logo and the menu
   near the corners of that picture, not in line with the paragraphs below. */
/* THE ONE THING ON THE SITE THAT IS NOT ON THE PAGE COLUMN, and the only one
   allowed to set its own width.

   Chad, 3 September, having seen it both ways. The header floats over the
   picture panel rather than sitting above the page, so it belongs to that
   panel: it runs its full width, with a margin of its own, and the logo and
   the menu sit near its two ends. Held in to the column of words below it, it
   read as a narrow strip stranded in the middle of a wide photograph.

   The inset is the white border down each side of the picture, plus a margin,
   so the header sits inside the panel rather than on its edge. */
.nex-header-inner {
    width: 100%;
    padding: var(--space-6) calc(var(--gutter-bleed) + var(--space-8)) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

/* WordPress puts its own bar across the top for anyone signed in, and without
   this the logo sits behind it. Visitors never see either. */
.admin-bar .nex-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .nex-header {
        top: 46px;
    }
}

/* --------------------------------------------------------------------------
   The logo

   Held at a fixed height rather than a fixed width so it lines up with the
   menu pill whatever the picture's proportions turn out to be.
   -------------------------------------------------------------------------- */

.nex-logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.nex-logo img {
    height: 96px;
    width: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   The menu pill

   One translucent pill holding the links and the Get Support button. The blur
   is what makes it read as glass over the picture; without it the panel looks
   like a flat grey box.
   -------------------------------------------------------------------------- */

/* The tint and blur are shared with the contact popup, so both read as one
   glass material rather than two different treatments. */
.nex-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-8);
    border-radius: var(--radius);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.nex-menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nex-menu li {
    position: relative;
}

/* White, not the usual ink, because the pill sits over a photo rather than a
   plain background. The current page is bold rather than a different colour,
   which is what the design shows. */
.nex-menu a {
    display: block;
    padding: var(--space-2) 0;
    color: var(--page);
    font-size: var(--size-sm);
    text-decoration: none;
    white-space: nowrap;
}

.nex-menu a:hover,
.nex-menu a:focus-visible {
    color: var(--accent);
}

.nex-menu .current-menu-item > a,
.nex-menu .current_page_item > a {
    font-weight: var(--weight-bold);
}

/* A parent with children gets the small chevron the design shows. Drawn rather
   than added as a picture, so it takes the colour of the link it belongs to. */
.nex-menu .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.45em;
    vertical-align: 0.15em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Sub menus
   -------------------------------------------------------------------------- */

.nex-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: var(--space-2) 0;
    list-style: none;
    background: var(--page);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-lifted);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nex-menu li:hover > .sub-menu,
.nex-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nex-menu .sub-menu a {
    padding: var(--space-2) var(--space-6);
}

/* --------------------------------------------------------------------------
   The floating menu

   Once the page scrolls past the top the header lifts off, comes back as a
   small pill in the top corner and follows you down. The logo steps out, the
   links fold away, and what is left is the Get Support button with a little
   menu button beside it. Point at it, or press it, and the links unfold again.

   Chad's idea, 3 September. The reason the links fold rather than simply
   disappearing is that the button has to keep earning its place: Get Support
   is the one thing on the page we actually want pressed, so it stays visible
   the whole way down while everything else gets out of the way.

   It keeps the same glass it wears at the top of the page. A darker version
   was tried first and Chad, 3 September, wanted the one glass throughout. All
   it gains is a shadow, which is what tells you it has lifted off the page
   rather than being printed on it.
   -------------------------------------------------------------------------- */

.nex-header.is-float {
    position: fixed;
    animation: nex-float-in 0.28s ease both;
}

@keyframes nex-float-in {
    from {
        transform: translateY(-130%);
    }
    to {
        transform: translateY(0);
    }
}

/* Anybody who has asked their computer to stop moving things about gets the
   pill without the drop. */
@media (prefers-reduced-motion: reduce) {
    .nex-header.is-float {
        animation: none;
    }
}

/* Nothing on the left any more, so the pill goes over to its own corner. */
.nex-header.is-float .nex-header-inner {
    justify-content: flex-end;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.nex-header.is-float .nex-logo {
    display: none;
}

@media (min-width: 1201px) {

    /* Same glass as it wears at the top of the page. It only gains a shadow,
       so it reads as something lifted off the page and floating over it
       rather than something printed on it. */
    .nex-header.is-float .nex-nav {
        padding-left: var(--space-2);
        box-shadow: var(--shadow-lifted);
    }

    /* The writing turns dark once it is floating.

       At the top of the page the pill has a photograph behind it, so white
       reads. Floating down the page it has the page behind it, and the page is
       mostly white paper, where white writing is nothing at all. Same glass,
       same pill, only the writing changes to suit what is behind it. */
    .nex-header.is-float .nex-menu a {
        color: var(--brand);
    }

    /* The three bars are drawn rather than written, so they take a background
       rather than a colour. */
    .nex-header.is-float .nex-float-toggle span {
        background: var(--brand);
    }

    .nex-header.is-float .nex-menu a:hover,
    .nex-header.is-float .nex-menu a:focus-visible {
        color: var(--accent);
    }

    /* Smaller once it is floating. Up at the top of the page the button is the
       first thing anybody sees and it is sized for that. Following you down
       the page it is a reminder rather than an announcement, so it steps back
       to the size of the links beside it and the whole pill sits lighter in
       the corner. */
    .nex-header.is-float .nex-nav-cta {
        padding: var(--space-2) var(--space-4);
        font-size: var(--size-sm);
    }

    /* The links fold sideways into nothing. Hidden rather than merely narrow,
       so the words cannot be read spilling out of the side of the pill while
       it is folding.

       NOTE for later: this clips anything that has to hang below a link, so
       if a drop down is ever added to the header menu this needs another
       think. There are none today. */
    .nex-header.is-float .nex-menu {
        max-width: 0;
        margin-left: 0;
        gap: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width 0.32s ease, margin-left 0.32s ease,
                    gap 0.32s ease, opacity 0.18s ease;
    }

    /* Three ways in: pointing at it, tabbing into it, or pressing the button.
       The last one is what makes it work on a touch screen, where there is no
       such thing as pointing at something. */
    .nex-header.is-float .nex-nav:hover .nex-menu,
    .nex-header.is-float .nex-nav:focus-within .nex-menu,
    .nex-header.is-float .nex-nav.is-expanded .nex-menu {
        max-width: 60vw;
        margin-left: var(--space-6);
        gap: var(--space-8);
        opacity: 1;
    }

    .nex-header.is-float .nex-nav .nex-float-toggle {
        display: flex;
    }
}

/* Only ever seen inside the floating pill.

   Named through its parent rather than on its own because the parent theme
   paints every button on the page a dark grey, and that rule is printed after
   this stylesheet. Without the extra name the little menu button came back as
   a dark grey block sitting inside the pill. */
.nex-nav .nex-float-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    margin: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
}

.nex-nav .nex-float-toggle:hover,
.nex-nav .nex-float-toggle:focus,
.nex-nav .nex-float-toggle:active {
    background: transparent;
}

.nex-float-toggle span {
    display: block;
    height: 2px;
    background: var(--page);
    border-radius: var(--radius);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

/* Open, and the three bars become a cross, so it is obvious the same button
   closes it again. */
.nex-header.is-float .nex-nav:hover .nex-float-toggle span:nth-child(2),
.nex-header.is-float .nex-nav:focus-within .nex-float-toggle span:nth-child(2),
.nex-header.is-float .nex-nav.is-expanded .nex-float-toggle span:nth-child(2) {
    opacity: 0;
}

.nex-header.is-float .nex-nav:hover .nex-float-toggle span:nth-child(1),
.nex-header.is-float .nex-nav:focus-within .nex-float-toggle span:nth-child(1),
.nex-header.is-float .nex-nav.is-expanded .nex-float-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nex-header.is-float .nex-nav:hover .nex-float-toggle span:nth-child(3),
.nex-header.is-float .nex-nav:focus-within .nex-float-toggle span:nth-child(3),
.nex-header.is-float .nex-nav.is-expanded .nex-float-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   The small screen menu

   The pill cannot hold six links on a phone, so below the breakpoint the links
   drop into a panel under the header and the pill keeps only the button.
   -------------------------------------------------------------------------- */

.nex-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    cursor: pointer;
}

.nex-menu-toggle span {
    display: block;
    height: 2px;
    background: var(--page);
    border-radius: var(--radius);
}

@media (max-width: 1200px) {
    /* Same idea on a smaller screen, tighter, so the logo and the menu button
       do not crowd the edge of the picture. */
    .nex-header-inner {
        padding: var(--space-6) calc(var(--gutter-bleed) + var(--space-4)) 0;
    }

    /* Chad, 31 August: 48px read as too small once the "Health Solutions"
       line under the wordmark is this size, worse on a tablet than a phone
       because the wider header around it makes a small logo more obvious.
       56px matches what the footer logo stays at on the same screens. */
    .nex-logo img {
        height: 56px;
    }

    .nex-menu-toggle {
        display: flex;
    }

    /* The dropdown on a small screen is a solid panel below the header rather
       than a pill floating over the photo, so it goes back to the ordinary
       light background and dark text. White text would be unreadable here. */
    /* The panel hangs under the menu button rather than stretching across the
       whole screen.

       Chad, 3 September: on a tablet it ran the full width for four short
       links, which reads as a mistake rather than a menu, and on a phone it
       was wider than the words on the page underneath it. So it is held to a
       sensible width, pinned to the same edge as the button it came out of,
       and on a narrow screen it comes in past the page's own margin so it sits
       inside the content rather than over the top of it. */
    .nex-nav {
        position: absolute;
        top: calc(100% + var(--space-3));
        left: calc(var(--gutter-bleed) + var(--space-12));
        right: calc(var(--gutter-bleed) + var(--space-4));
        max-width: 22rem;
        margin-left: auto;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-6);
        border-radius: var(--radius-large);
        background: var(--page);
        box-shadow: var(--shadow-lifted);
        display: none;
    }

    .nex-nav.is-open {
        display: flex;
    }

    .nex-menu a {
        color: var(--brand);
    }

    .nex-menu a:hover,
    .nex-menu a:focus-visible {
        color: var(--accent);
    }

    .nex-menu {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .nex-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: var(--space-4);
    }

    .nex-nav-cta {
        text-align: center;
    }

    /* Floating on a phone. There is already a menu button here and the links
       already open in a panel below it, so the only thing that changes is that
       the header follows you down and the logo steps out to leave the button
       on its own. It picks up the same shadow as the pill on a big screen, so
       it reads as lifted rather than printed on the page. */
    .nex-header.is-float .nex-menu-toggle {
        box-shadow: var(--shadow-lifted);
    }

    /* Dark bars for the same reason the writing goes dark on a big screen:
       floating down the page there is white paper behind them. */
    .nex-header.is-float .nex-menu-toggle span {
        background: var(--brand);
    }
}