/*********************************************************************/
/* The Navbar module.                                                */
/* ----------------------------------------------------------------- */
/* Provides for a horizaontal set of items, which can be links or
 * menu headers. The menu headers have a chevron indicating they
 * open up submenus.
 */

:root {
    --navbar-height: 2.5em;
    --padding-nav-item: 0.3em 0.6em;
}

body {
    padding-block-start: var(--navbar-height);
}

.nav-icon {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    /* Pin every icon to a 1em square and clip. Until material.woff2 loads the
       glyph is an invisible ligature ("keyboard_arrow_down", "menu", ...) that
       would otherwise lay out at its full text width, blowing the navbar menu
       out to ~2x its real size for a frame before snapping back. */
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

.nav-icon.big {
    font-size: 1.8em;
}

.nav-hidden {
    display: none;
    visibility: hidden;
}

/*********************************************************************/
/* Top navigation bar and its contents. */

nav.navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    border-bottom: var(--card-border);
}

nav.navbar>div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: var(--navbar-height);
    align-items: center;
    height: var(--navbar-height);
    padding: 0 1em;
    background-color: var(--color-background);
}

/* The menu wrapper takes the centre track so the list is centred in the
   viewport; the empty first track mirrors the third. The hamburger lives
   in the last track, hard against the right edge. */
nav.navbar>div>div {
    grid-column: 2;
}

nav.navbar>div>button {
    grid-column: 3;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: var(--padding-nav-item);
    border-radius: var(--card-border-radius);
    border: none;
    color: var(--color-primary);
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--anim-interactive) var(--duration-fast);
}

/* Off-screen measurement of the hamburger while it is display:none, so the
   navbar.mjs break calculation can read its width. */
nav.navbar>div>button.measuring {
    display: inline flex;
    position: fixed;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
}

nav.navbar>div>button:hover {
    background-color: var(--color-hover);
}

/*-------------------------------------------------------------------*/
/* Links and Buttons in the navbar menu */

ul.navbar-list {
    display: inline flex;
    align-items: center;
    list-style: none;
    gap: 0;
    padding: 0;
    margin: 0;
    justify-self: center;
}

ul.navbar-list.nav-hidden {
    display: none;
    visibility: hidden;
}

ul.navbar-list.measuring {
    display: inline flex;
    position: fixed;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
    /* width: max-content; */
}

button.navbar-trigger,
a.navbar-link {
    font-family: var(--primary-font-family);
    font-size: 1rem;
    font-weight: 500;
    padding: 0;
    border-radius: var(--card-border-radius);
    color: var(--color-primary);
    background-color: transparent;
    transition: background-color var(--duration-fast) var(--anim-interactive);
}

button.navbar-trigger {
    display: inline flex;
    align-items: center;
    gap: 0.1em;
    border: none;
    cursor: pointer;
}

a.navbar-link {
    text-decoration: none;
}

li.navbar-li {
    padding: var(--padding-nav-item);
    border-radius: var(--card-border-radius);
    background-color: transparent;
    transition: background-color var(--anim-interactive) var(--duration-fast);
}

li.navbar-li:hover,
li.navbar-li:has(>button[aria-expanded="true"]) {
    background-color: var(--color-hover);
}

button.navbar-trigger>span.chevron {
    user-select: none;
    transition: transform var(--duration-standard) var(--anim-enter);
}

button.navbar-trigger[aria-expanded="true"]>span.chevron {
    transform: rotate(180deg);
    transition: transform var(--duration-standard) var(--anim-exit);
}

/*-------------------------------------------------------------------*/
/* The popover */

div.nav-popover {
    inset: auto;
    margin: 0;
    padding: 0.5em;
    /* Pinned under its trigger button. The trigger sets
       "anchor-name: --navbar-popover-N" and this popover sets the matching
       "position-anchor" inline (see preludes/navbar.php). */
    top: calc(anchor(bottom) + 0.3em);
    left: anchor(left);
    position-try-fallbacks: flip-inline;
    min-width: 5em;
    max-width: min(20em, 92vw);
    max-height: calc(100dvh - var(--navbar-height) - 1em);
    overflow-y: auto;
    overscroll-behavior: contain;

    border: var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);

    background: var(--color-background-lighter);

    opacity: 0;
    transform: translateY(-1em) scale(0.9);
    transition:
        opacity var(--duration-standard) var(--anim-enter),
        transform var(--duration-standard) var(--anim-enter),
        display var(--duration-standard) var(--anim-enter) allow-discrete,
        overlay var(--duration-standard) var(--anim-enter) allow-discrete;
}

div.nav-popover:popover-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity var(--duration-standard) var(--anim-exit),
        transform var(--duration-standard) var(--anim-exit),
        display var(--duration-standard) var(--anim-exit) allow-discrete,
        overlay var(--duration-standard) var(--anim-exit) allow-discrete;
}

@starting-style {
    div.nav-popover:popover-open {
        opacity: 0;
        transform: translateY(-1em) scale(0.9);
        transition:
            opacity var(--duration-standard) var(--anim-enter),
            transform var(--duration-standard) var(--anim-enter),
            display var(--duration-standard) var(--anim-enter) allow-discrete,
            overlay var(--duration-standard) var(--anim-enter) allow-discrete;
    }
}

/* Fallback for browsers without CSS anchor positioning (Safari): drop the
   popover just below the fixed navbar. Only one nav popover is open at a
   time, so a shared position is acceptable. */
@supports not (anchor-name: --a) {
    div.nav-popover {
        top: calc(var(--navbar-height) + 0.3em);
        left: 50%;
        translate: -50% 0;
    }
}

/*-------------------------------------------------------------------*/
/* The standard submenu */

ul.nav-menu {
    display: block flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 0 0.5em;
    margin: 0;
    list-style: none;
}

ul.nav-menu.top {
    padding: 0;
}

li.nav-li {
    /* Transparent layout row. The button / link inside is the visible,
       hoverable surface, so hovering one row never tints its ancestor
       rows and an open accordion's head is only highlighted when the
       pointer is actually on it. */
    margin: 0;
}

button.nav-accordion,
a.nav-link {
    box-sizing: border-box;
    width: 100%;
    padding: var(--padding-nav-item);
    margin: 0;
    border-radius: var(--card-border-radius);
    font-family: var(--primary-font-family);
    font-size: .93rem;
    font-weight: 500;
    color: var(--color-primary);
    background-color: transparent;
    transition: background-color var(--anim-interactive) var(--duration-fast);
}

button.nav-accordion:hover,
a.nav-link:hover {
    background-color: var(--color-hover-lighter);
}

button.nav-accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    cursor: pointer;
    text-align: left;
}

a.nav-link {
    display: block;
    text-decoration: none;
}

button.nav-accordion .chevron {
    transition: transform var(--duration-standard) var(--anim-interactive);
}

button.nav-accordion[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

div.nav-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--anim-enter) var(--duration-standard);
}

button.nav-accordion[aria-expanded="true"]+div.nav-accordion-body {
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--anim-exit) var(--duration-standard);
}

ul.nav-accordion-menu {
    list-style: none;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    padding-inline-start: 1em;
}

/*-------------------------------------------------------------------*/
/* The drawer */

div.nav-burger-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    padding: 0.6em;
    /* padding: var(--padding-nav-item); */
    width: min(17em, 85vw);
    height: 100%;
    border: none;
    border-left: var(--card-border);
    background-color: var(--color-background-lighter);
    overflow-y: auto;
    opacity: 0;
    transform: translateX(3em);
    transition:
        opacity var(--duration-moderate) var(--anim-enter),
        transform var(--duration-moderate) var(--anim-enter),
        display var(--duration-moderate) var(--anim-enter) allow-discrete,
        overlay var(--duration-moderate) var(--anim-enter) allow-discrete;
}

div.nav-burger-drawer:popover-open {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity var(--duration-moderate) var(--anim-exit),
        transform var(--duration-moderate) var(--anim-exit),
        display var(--duration-moderate) var(--anim-exit) allow-discrete,
        overlay var(--duration-moderate) var(--anim-exit) allow-discrete;
}

@starting-style {
    div.nav-burger-drawer:popover-open {
        opacity: 0;
        transform: translateX(3em);
    }
}

/* The header line, including "Menu" and the close button */
div.nav-burger-drawer>div {
    display: inline flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: 0.5em;
    border-block-end: var(--card-border);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
    width: 100%;
}

div.nav-burger-drawer>div>button {
    display: inline flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-nav-item);
    border-radius: var(--card-border-radius);
    border: none;
    cursor: pointer;
    font-weight: 400;
    color: var(--color-primary);
    background-color: var(--color-background-lighter);
    transition: background-color var(--anim-interactive) var(--duration-fast);
}

div.nav-burger-drawer>div>button:hover {
    background-color: var(--color-hover-lighter);
}