/* =============================================================================
   Module: nav  (modules/nav.php)
   -----------------------------------------------------------------------------
   The menu panel the indicator opens. There is no horizontal bar any more, so
   this is the navigation at every width:

     < 1024px   covers the window, the gradient running behind the brand line
     >= 1024px  a drawer beside the page, starting below that line

   It slides in from the inline start in both cases, and the action bar is
   pinned to its foot on the small layout - see header.css, which owns where
   this panel sits and what stacks above it.

   The gradient sits on the panel itself rather than on a layer of its own: it
   never animates, and a layer inside a scrolling box would scroll away with the
   content. Scrolling is on .nav__scroll for the same reason.
   ============================================================================= */

.nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;

    background-color: var(--color-primary);
    background-image: linear-gradient(to bottom,
        var(--color-black) 0%,
        rgba(var(--rgb-black), 0) 42%,
        rgba(var(--rgb-blue-light), 0.45) 100%);

    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility var(--transition-base);
}

.site-header.is-nav-open .nav {
    transform: none;
    visibility: visible;
}

.nav__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    /* Clears the brand line above and the action bar pinned below. The foot is
       generous on purpose: the bar wraps to as many as three rows on a narrow
       phone, and spare room only adds scroll nobody notices. */
    padding-block: var(--header-h) 13rem;
}

/* --- Rows ------------------------------------------------------------------
   A rule above every row and one under the last, so the list reads as a set of
   bands rather than as text with lines between it.
   -------------------------------------------------------------------------- */

.nav__list {
    border-block-end: var(--border-width) solid var(--color-line-invert);
}

.nav__item,
.nav__subitem {
    position: relative;
    border-block-start: var(--border-width) solid var(--color-line-invert);
}

.nav__link,
.nav__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2xs) var(--container-padding);
    color: var(--color-text-inverse);
    font-family: inherit;
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-heading);
    text-align: start;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav__link {
    font-weight: var(--font-weight-bold);
}

/* One step in, one step lighter. */
.nav__sublink {
    padding-inline-start: calc(var(--container-padding) + var(--space-lg));
    font-weight: var(--font-weight-regular);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__sublink:hover,
.nav__sublink:focus-visible {
    background-color: rgba(var(--rgb-white), 0.10);
    color: var(--color-text-inverse);
}

/* The page you are on, and the branch it sits in. */
.nav__link--active,
.nav__sublink--active {
    background-color: var(--color-accent);
    color: var(--color-blue);
}

.nav__link--active:hover,
.nav__link--active:focus-visible,
.nav__sublink--active:hover,
.nav__sublink--active:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-blue);
}

/* A branch is only tinted while it is folded away - once it is open its own
   child carries the marker and two of them would compete. */
.nav__item.is-open > .nav__link--active {
    background-color: transparent;
    color: var(--color-text-inverse);
}

/* --- Chevrons ---------------------------------------------------------------
   Two corners of a box, turned: pointing along the inline axis while the
   submenu is folded, downwards once it is open.
   -------------------------------------------------------------------------- */

.nav__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid var(--color-accent);
    border-block-end: 2px solid var(--color-accent);
    transform: rotate(-45deg);
    transition: transform var(--transition-base), border-color var(--transition-fast);
}

.nav__link--header[aria-expanded='true'] .nav__chevron {
    transform: translateY(-2px) rotate(45deg);
}

.nav__link--active .nav__chevron {
    border-color: var(--color-blue);
}

/* The chevron beside an entry that has a page of its own as well: its own
   control, so the link stays a link. */
.nav__submenu-toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
}

.nav__submenu-toggle::before {
    content: '';
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid var(--color-accent);
    border-block-end: 2px solid var(--color-accent);
    transform: rotate(-45deg);
    transition: transform var(--transition-base);
}

.nav__submenu-toggle[aria-expanded='true']::before {
    transform: translateY(-2px) rotate(45deg);
}

/* --- Submenus -------------------------------------------------------------- */

.nav__sublist {
    display: none;
}

.nav__item.is-open > .nav__sublist {
    display: block;
}

/* =============================================================================
   From 1024px: a drawer beside the page rather than over it
   ============================================================================= */

@media (min-width: 1024px) {

    .nav {
        inset-block-start: var(--header-h);
        inset-inline-end: auto;
        width: min(28.75rem, 100%);   /* 460px */
        box-shadow: var(--shadow-lg);
    }

    .nav__scroll {
        /* The line is above the drawer here, not over it, and the action bar
           is back in that line - so neither needs clearing. */
        padding-block: var(--space-sm) var(--space-2xl);
    }
}