/**
 * Navigation Menu - Core Functional Styles
 * Structural and layout styles required for the component to function.
 * Visual theming should be provided by a site-specific stylesheet.
 */

/* CSS Custom Properties required for layout and state mechanics. */
navigation-menu {
    /* Layout & sizing */
    --width-icons: 3rem;
    --width-icons-header: var(--width-icons);
    --width-submenu-trigger: 1.5rem;
    --width-icons-body: 1.5rem;
    --padding-icons: 1rem;

    /* Timing */
    --timing-decoration: 0.2s;
    --timing-decoration-double: 0.4s;
    --timing-decoration-half: 0.1s;
    --timing-navigation-menu-active: 0.5s;

    /* Spacing */
    --flex-gap: 3em;

    /* Active entry insets */
    --inset-active-entry: -0.5em;
    --inset-active-entry-horizontal: -1em;
    --inset-active-entry-vertical: -1.25em;
    --inset-active-entry-horizontal-compact: -0.375em;
    --inset-active-entry-vertical-compact: var(--inset-active-entry-horizontal-compact);

    /* Margin horizontal entries */
    --margin-horizontal-entry: 1em;
}
navigation-menu[submenu-trigger-active] navigation-menu-active-overlay{
    --inset-active-entry-horizontal: -0.25em;
    --inset-active-entry-vertical: var(--inset-active-entry-horizontal);
    --inset-active-entry-vertical: -2.25em;
}

/* User Selection */
navigation-menu,
navigation-menu * {
    -webkit-user-select: none;
    /* Safari, Chrome, Opera */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Standard */
}

/* Base Layout */
navigation-menu {
    display: flex;
    flex-wrap: nowrap;
    /* try to keep items in one row */
    gap: var(--flex-gap);
    align-items: center;
    justify-content: center;
    color: inherit;
    position: sticky;
    top: 1rem;
    margin: 0 auto;
    z-index: 2147483647;
}

navigation-menu[initializing] {
    visibility: hidden;
    pointer-events: none;
}

/* Entries the menu carries without showing them: a page of the site that belongs
   among the menu's entries for matching and for swipe navigation, but that the menu
   itself never lists. The `hidden` attribute already does this; stated here too so
   no consumer theme can bring them into view by styling the menu's children. */
navigation-menu navigation-menu-unlisted {
    display: none;
}

/* Needed for Safari mobile. Otherwise text under overlay is blurred and overlay is not transitioning */
/* navigation-menu>navigation-menu-header>*,
navigation-menu>navigation-menu-body>* {
    z-index: 1;
} */

/* Container Decoration */
navigation-menu-container-decoration {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -2;
}

navigation-menu navigation-menu-body,
navigation-menu navigation-menu-header {
    position: relative;
    z-index: 0;
}

navigation-menu navigation-menu-body::before,
navigation-menu navigation-menu-header::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

navigation-menu[full-size] navigation-menu-body::before,
navigation-menu[full-size] navigation-menu-header::before {
    content: none;
}

navigation-menu navigation-menu-body>*,
navigation-menu navigation-menu-header>* {
    position: relative;
    z-index: 1;
}

/* Header */
navigation-menu-header {
    display: flex;
    justify-content: space-between;
}

/* Links */
navigation-menu a,
navigation-menu a:visited {
    color: inherit;
}

navigation-menu a {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    box-sizing: border-box;
    padding: 1em 1.5em;
    border: 0px solid;
    transition:
        background-color var(--timing-decoration) ease;
}

navigation-menu navigation-menu-body>a {
    margin-left: var(--margin-horizontal-entry);
    margin-right: var(--margin-horizontal-entry);
}

navigation-menu a[entry="home"],
navigation-menu navigation-menu-trigger {
    padding: var(--padding-icons);
}

navigation-menu a:hover:not([active]) {
    transition: background-color var(--timing-decoration-double) ease var(--timing-decoration-half);
}

/* Visible keyboard focus for native links and custom disclosure controls. */
navigation-menu a:focus-visible,
navigation-menu-trigger:focus-visible,
navigation-submenu-trigger:focus-visible,
navigation-menu div[entry][has-submenu]>span.entry-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Body */
navigation-menu navigation-menu-body {
    display: flex;
    gap: var(--flex-gap);
}

/* Names */
navigation-menu-active-entry-name span,
navigation-menu-active-entry-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 5em;
    padding: 0 0.5em;
    /* max-width: calc(100dvw - 2 * var(--width-icons-header) - 2 * var(--padding-icons) - 4em); */
}


/* Active entry name - hidden by default, shown in compact/tiny */
navigation-menu-active-entry-name {
    display: none;
    position: relative;
}

/* Swipe crossfade: the name's content travels and fades while the destination it
   would reach fades in, centred on where that content rests. The preview is taken
   out of flow so the content's own position is unaffected by its presence, and it
   is inert so it can never take the press driving the gesture. It is deliberately
   not a <span>: the component finds the name's own content with a span lookup and
   recreates it when missing, so a second span here could be taken for the content. */
navigation-menu-active-entry-preview {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Centred by transform, so the swipe can drive translate independently without
       having to restate the centring on every move. */
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

/* Active Indicator */
navigation-menu-active {
    position: absolute;
    pointer-events: none;
    transition:
        top var(--timing-navigation-menu-active) ease,
        left var(--timing-navigation-menu-active) ease,
        bottom var(--timing-navigation-menu-active) ease,
        right var(--timing-navigation-menu-active) ease,
        width var(--timing-navigation-menu-active) ease,
        height var(--timing-navigation-menu-active) ease,
        opacity var(--timing-navigation-menu-active) ease;
}

/* Hide navigation-menu-active element if active navigation menu entry is not in view. */
/* navigation-menu[compact][active-entry-out-of-view] navigation-menu-active {
    opacity: 0;
} */
navigation-menu[active-entry-out-of-view="6"] navigation-menu-active,
navigation-menu[active-entry-out-of-view="7"] navigation-menu-active,
navigation-menu[active-entry-out-of-view="8"] navigation-menu-active,
navigation-menu[active-entry-out-of-view="8"] navigation-menu-active,
navigation-menu[active-entry-out-of-view="9"] navigation-menu-active {
    opacity: 0;
}

navigation-menu:not([active-entry-out-of-view]) navigation-menu-active {
    opacity: 1;
}

navigation-menu-active-overlay {
    position: absolute;
    border: 1em;
    top: var(--inset-active-entry);
    left: var(--inset-active-entry);
    bottom: var(--inset-active-entry);
    right: var(--inset-active-entry);
    z-index: 1;
    /* Above submenu content */
    pointer-events: none;
    /* Allow clicks to pass through to submenu items */

    transform: scale(1);
    transition: transform var(--timing-decoration) ease-in-out;
}

/* Above overlay, keeps interactive elements reachable. */
navigation-menu a,
navigation-submenu-trigger,
navigation-menu navigation-menu-active-entry-name {
    z-index: 2;
}

/* Drag-overlay navigation: interaction mechanics only.
   Appearance of the dragging state belongs to the consumer stylesheet. */
navigation-menu[dragging] {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

navigation-menu[dragging] navigation-menu-active {
    z-index: 3;
}

/* Entries the running drag has grabbed: the ones its overlay is sitting over.
   Holding the marker still is also how iOS asks for the link preview of whatever
   is underneath, and that preview takes the touch with it, so the drag is left
   stranded by its own gesture. Only the marked entries give the long press up,
   and only while the drag holds them — every other entry keeps its preview, bar
   the links the overlay rests on below. */
navigation-menu[dragging] [drag-grabbed] {
    -webkit-touch-callout: none;
}

/* iOS settles a press's link preview before a drag can be recognised, so the links the overlay rests on opt out in advance. */
navigation-menu[drag-overlay] a[active] {
    -webkit-touch-callout: none;
}

/* Separate rule: an engine without :has() drops every selector in a list containing it. */
navigation-menu[drag-overlay] [has-submenu]:not([open]):has(> navigation-submenu-trigger[active]) > .entry-link {
    -webkit-touch-callout: none;
}

navigation-menu-active-overlay[inactive] {
    transform: scale(0);
}

navigation-menu:not([active="home"]) navigation-menu-active-overlay {
    top: var(--inset-active-entry-vertical);
    left: var(--inset-active-entry-horizontal);
    bottom: var(--inset-active-entry-vertical);
    right: var(--inset-active-entry-horizontal);
}

/* Entry Decoration */
navigation-menu a navigation-menu-decoration {
    position: absolute;
    top: var(--inset-active-entry);
    left: var(--inset-active-entry);
    bottom: var(--inset-active-entry);
    right: var(--inset-active-entry);
    border: 0px solid;
    transition: border var(--timing-decoration) ease var(--timing-decoration);
}

navigation-menu a:hover:not([active]) navigation-menu-decoration {
    display: block;
    border-width: 1em;
    border-style: solid;
    transition: border var(--timing-decoration) ease;
}

/* Home Entry (Logo) */
navigation-menu [image-container] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--width-icons-header);
    width: var(--width-icons-header);
    flex: 0 0 var(--width-icons-header);
}

navigation-menu [image-container] img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

navigation-menu [entry="home"] [image-container] {
    height: var(--width-icons-header);
    width: var(--width-icons-header);
}

navigation-menu navigation-menu-body [image-container] {
    width: var(--width-icons-body);
    height: var(--width-icons-body);
    flex-basis: var(--width-icons-body);
}

navigation-menu [entry="home"] [image-container] img {
    height: inherit;
    width: auto;

    /*transition: transform 3s ease;*/
}

/*navigation-menu [entry="home"] [image-container] img:hover {
    transform: rotate(720deg);
}*/

navigation-menu [entry="home"] navigation-menu-name {
    display: none;
}

/* Profile is icon-only: the icon already carries the label through its img alt,
   so the visible name only repeats it. Scoped to the entry's own link -- the
   submenu is rendered inside [entry="profile"] and reuses navigation-menu-name
   for Projects/Chat/Settings, which must stay visible. */
navigation-menu [entry="profile"] > .entry-link > navigation-menu-name {
    display: none;
}

/* Trigger - hidden by default */
navigation-menu-trigger {
    display: none;
    font-size: 2em;
}

/* Cursor Visual */
navigation-menu-trigger,
navigation-menu a,
navigation-menu div[entry][has-submenu]>.entry-link {
    cursor: default;
    /* cursor: pointer; */
}

/* ===== LOADING INDICATOR ===== */

/* Loading icon */
navigation-menu-active::after {
    content: '';
    display: block;
    width: 2em;
    height: 2em;
    background-image: url("../loading.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: -0.75em;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* No transition delay when content is fully loaded */
    transition: opacity var(--timing-navigation-menu-active) ease;
    opacity: 0;
    z-index: 1;
    /* avoid blurring by overlay */
}

navigation-menu[loading] navigation-menu-active::after {
    /* Transition delay when content is loading */
    transition: opacity var(--timing-navigation-menu-active) ease var(--timing-navigation-menu-active);
    opacity: 1;
}

/* Progress bar below loading icon */
navigation-menu-active::before {
    content: '';
    display: block;
    height: 0.125em;
    position: absolute;
    right: 0.75em;
    top: calc(50% + 0.875em);
    width: 0;
    pointer-events: none;
    transition: width 0.2s ease, translate 0.2s ease, opacity var(--timing-navigation-menu-active) ease;
    opacity: 0;
    z-index: 1;
    /* avoid blurring by overlay */
}

navigation-menu[loading] navigation-menu-active::before {
    opacity: 1;
    transition: width 0.2s ease, translate 0.2s ease, opacity var(--timing-navigation-menu-active) ease var(--timing-navigation-menu-active);
}

/* Progress states 0-9 (0-10%, 10-20%, ..., 90-100%) */
navigation-menu[loading="0"] navigation-menu-active::before {
    width: 0.1em;
    translate: 0.1em 0;
}

navigation-menu[loading="1"] navigation-menu-active::before {
    width: 0.2em;
    translate: 0.2em 0;
}

navigation-menu[loading="2"] navigation-menu-active::before {
    width: 0.3em;
    translate: 0.3em 0;
}

navigation-menu[loading="3"] navigation-menu-active::before {
    width: 0.4em;
    translate: 0.4em 0;
}

navigation-menu[loading="4"] navigation-menu-active::before {
    width: 0.5em;
    translate: 0.5em 0;
}

navigation-menu[loading="5"] navigation-menu-active::before {
    width: 0.6em;
    translate: 0.6em 0;
}

navigation-menu[loading="6"] navigation-menu-active::before {
    width: 0.7em;
    translate: 0.7em 0;
}

navigation-menu[loading="7"] navigation-menu-active::before {
    width: 0.8em;
    translate: 0.8em 0;
}

navigation-menu[loading="8"] navigation-menu-active::before {
    width: 0.9em;
    translate: 0.9em 0;
}

navigation-menu[loading="9"] navigation-menu-active::before {
    width: 0.95em;
    translate: 0.95em 0;
}

navigation-menu[loading][navigation-menu-active-transitioning] navigation-menu-active::before,
navigation-menu[loading][navigation-menu-active-transitioning] navigation-menu-active::after {
    opacity: 0;
    transition: width var(--timing-decoration-half) ease, translate var(--timing-decoration-half) ease, opacity var(--timing-decoration-half) ease;
}

/* =============================================================================
   SUBMENUS
   ============================================================================= */
/* Entry with submenu uses div container */
navigation-menu div[entry][has-submenu] {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Entry link inside submenu parent */
navigation-menu div[entry][has-submenu]>.entry-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 1em 1.5em;
    border: 0px solid;
    transition: background-color var(--timing-decoration) ease;
    color: inherit;
    text-decoration: none;
}

navigation-menu div[entry][has-submenu]>a.entry-link:not([active]):hover {
    transition: background-color var(--timing-decoration-double) ease var(--timing-decoration-half);
}

navigation-menu div[entry][has-submenu]>span.entry-link:hover {
    transition: background-color var(--timing-decoration-double) ease var(--timing-decoration-half);
}

/* Submenu container - hidden by default (using height:0 for smooth animations) */
navigation-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    padding: 0 0.75em;
    margin-top: 1em;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0s 0.5s ease;

    --inset-active-entry-vertical: -0.5em;
}

/* Show submenu when entry has [open] attribute */
[entry][open]>navigation-submenu {
    height: auto;
    padding: 0.75em;
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

[entry]>navigation-submenu>[entry] {
    opacity: 0;
    transition:
        opacity var(--timing-decoration-half) ease;
}

[entry][open]>navigation-submenu>[entry] {
    opacity: 1;
    transition:
        opacity var(--timing-navigation-menu-active) ease;
}

[entry][open]>navigation-submenu>[entry]:nth-child(1) {
    transition-delay: 0.1s;
}

[entry][open]>navigation-submenu>[entry]:nth-child(2) {
    transition-delay: 0.2s;
}

[entry][open]>navigation-submenu>[entry]:nth-child(3) {
    transition-delay: 0.3s;
}

[entry][open]>navigation-submenu>[entry]:nth-child(4) {
    transition-delay: 0.4s;
}

[entry][open]>navigation-submenu>[entry]:nth-child(n+5) {
    transition-delay: 0.5s;
}

/* [entry]>navigation-submenu>[entry]:nth-child(1) {
    transition-delay: 0.1s;
}
[entry]>navigation-submenu>[entry]:nth-child(2) {
    transition-delay: 0.75s;
}
[entry]>navigation-submenu>[entry]:nth-child(3) {
    transition-delay: 0.05s;
}
[entry]>navigation-submenu>[entry]:nth-child(4) {
    transition-delay: 0.25s;
}
[entry]>navigation-submenu>[entry]:nth-child(n+5) {
    transition-delay: 0s;
} */

/* Submenu entries */
navigation-submenu>[entry] {
    white-space: nowrap;
    padding: 0.75em 1.25em;
}

/* Submenu trigger button */
navigation-submenu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--width-submenu-trigger);
    width: var(--width-submenu-trigger);
    margin-left: -1em;
    transition:
        background-color var(--timing-decoration) ease,
        transform var(--timing-decoration) ease;
}

navigation-submenu-trigger svg {
    width: 0.75em;
    height: 0.75em;
    transition: transform var(--timing-decoration) ease;
}

/* Rotate chevron when open */
[entry][open]>navigation-submenu-trigger svg {
    transform: rotate(180deg);
}

/* Nested submenus - position to the right */
navigation-submenu navigation-submenu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: 0.5em;
}

navigation-menu *[has-submenu]>navigation-submenu {
    pointer-events: none;
}

navigation-menu *[has-submenu][open]>navigation-submenu {
    pointer-events: unset;
}

/* =============================================================================
   NOTIFICATION BADGES
   iOS-style circular red badge anchored to the top-right of an entry. The host
   entry carries a `notification-count` attribute; the badge text is set at
   runtime. The badge is hidden while the count is 0 (or absent).
   ============================================================================= */

/* Anchor the badge to the entry / link that owns the count. */
navigation-menu [entry][notification-count],
navigation-menu navigation-submenu>[entry][notification-count] {
    position: relative;
}

navigation-menu navigation-menu-badge {
    display: none;
    position: absolute;
    top: 0.35em;
    right: 0.35em;
    box-sizing: border-box;
    min-width: 1.25em;
    height: 1.25em;
    padding: 0 0.35em;
    font-size: 0.7em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

/* Reveal the badge only when the count is present and non-zero. */
navigation-menu [notification-count]:not([notification-count="0"])>navigation-menu-badge,
navigation-menu [notification-count]:not([notification-count="0"])>.entry-link>navigation-menu-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}