/**
 * GF-02 Hauptnavigation
 */

.main-navigation__list,
.main-navigation__mega-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation__list {
    @media (width >= 64rem) {
        position: relative;
        display: flex;
        align-items: center;
        gap: 1px;
        padding: 0.375rem;
        border-radius: 999px;
        background-color: var(--sav-color-hellgrau);
    }
}

/* One entry is one field: on wide screens that field is the white pill of the design, and
   it carries the open dropdown and the current page alike. */
.main-navigation__item {
    & + & {
        border-top: 1px solid var(--sav-color-mittelgrau);
    }

    @media (width >= 64rem) {
        border-radius: 999px;
        transition: background-color var(--sav-duration-fade) var(--sav-ease-out);

        & + & {
            border-top: 0;
        }

        @media (prefers-reduced-motion: reduce) {
            transition-duration: 0s;
        }

        &:hover,
        &:has(:focus-visible),
        &:has([open]),
        &.current-menu-item,
        &.current-menu-ancestor {
            background-color: var(--sav-color-weiss);
        }
    }
}

/* Entry without children, and the label inside the toggle of one with children — the same
   type either way, so the bar reads as one row. */
.main-navigation__link,
.main-navigation__label {
    color: var(--sav-color-dunkelblau);
    font-size: var(--sav-text-headline-s-size);
    line-height: var(--sav-text-headline-s-line);
    letter-spacing: var(--sav-text-headline-s-tracking);
    text-decoration: none;

    @media (width >= 64rem) {
        font-size: 1.25rem;
        line-height: 1.5rem;
        letter-spacing: normal;
    }
}

.main-navigation__link,
.main-navigation__summary {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    padding: 1rem 0;

    @media (width >= 64rem) {
        padding: 0.875rem 1.375rem;
    }
}

.main-navigation__summary {
    cursor: pointer;

    /* The triangle the browser puts in front of a summary has no place in the design. */
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }

    > svg {
        width: 1.5rem;
        height: 1.5rem;
        rotate: -90deg;
        color: var(--sav-color-dunkelblau);
    }

    [open] > & > svg {
        rotate: 90deg;
    }
}

.main-navigation__link:focus-visible,
.main-navigation__summary:focus-visible {
    outline: 2px solid var(--sav-color-dunkelblau);
    outline-offset: 2px;
}

/* Below the bar the entries of a dropdown stand in the flow underneath their own entry;
   from the wide breakpoint on they hang under the bar as the panel of the design. */
.main-navigation__mega {
    @media (width >= 64rem) {
        position: absolute;
        z-index: 1;
        inset-inline: 0.375rem;
        top: calc(100% + 1.5rem);
        border-radius: 5px;
        background-color: var(--sav-color-weiss);
        box-shadow: 2px 2px 12px rgb(0 0 0 / 10%);

        /* The panel hangs below the bar; this strip covers the gap, so a pointer on its way
           into the panel never leaves the entry. */
        &::before {
            content: '';
            position: absolute;
            inset-inline: 0;
            top: -1.5rem;
            height: 1.5rem;
        }
    }
}

/* The panel unfolds: its single row grows from nothing to the height of its entries, and the
   entries follow one after the other. That needs the panel to stay rendered while it is
   closed, so this stylesheet decides whether it is seen — the browser's own hiding would
   have nothing to animate, in either direction. Where the content of a disclosure cannot be
   addressed, panel and entries simply appear and disappear. */
@supports selector(::details-content) {
    .main-navigation__disclosure::details-content {
        content-visibility: visible;
    }

    .main-navigation__mega {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition:
            grid-template-rows var(--sav-duration-unfold) var(--sav-ease-out),
            visibility var(--sav-duration-unfold);
        transition-behavior: allow-discrete;

        [open] > & {
            grid-template-rows: 1fr;
            visibility: visible;
        }
    }

    .main-navigation__mega-list {
        overflow: hidden;
        min-height: 0;
    }

    .main-navigation__mega-item {
        opacity: 0;
        translate: 0 0.75rem;
        transition:
            opacity var(--sav-duration-fade) var(--sav-ease-out),
            translate var(--sav-duration-fade) var(--sav-ease-out);

        /* The delay only holds on the way in, so closing takes the whole panel at once. */
        [open] > .main-navigation__mega & {
            opacity: 1;
            translate: 0 0;
            transition-delay: calc(var(--sav-stagger) * var(--sibling-index, 1));
            transition-delay: calc(var(--sav-stagger) * sibling-index());
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .main-navigation__mega-item,
        [open] > .main-navigation__mega .main-navigation__mega-item {
            translate: none;
            transition-delay: 0s;
        }
    }
}

.main-navigation__mega-list {
    display: grid;
    gap: 1rem;
}

/* The room around the entries sits on the entries and not on the list around them: the list is the
   box that shrinks to nothing while the panel closes, and its own padding would hold it open at
   twice that value — the panel would stop halfway and wait. */
.main-navigation__mega-item {
    /* 30px below the label of the open entry, 16 of which the summary above already carries. */
    &:first-child {
        padding-block-start: 0.875rem;
    }

    /* 24px to the line under the open panel. */
    &:last-child {
        padding-block-end: 1.5rem;
    }

    @media (width >= 64rem) {
        padding-inline: 2rem;

        &:first-child {
            padding-block-start: 2rem;
        }

        &:last-child {
            padding-block-end: 2rem;
        }
    }
}

/* Below the breakpoint the panel stands in the flow and the entry after it follows the line it
   leaves behind, so that entry keeps the 24px the design draws there instead of the 16 every other
   one keeps. Above the breakpoint the panel hangs off the bar and no entry follows it. */
@media (width < 64rem) {
    .main-navigation__item:has([open]) + .main-navigation__item :is(.main-navigation__link, .main-navigation__summary) {
        padding-block-start: 1.5rem;
    }
}

.main-navigation__mega-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--sav-color-dunkelblau);
    font-weight: var(--sav-font-weight-light);
    font-size: var(--sav-text-m-size);
    line-height: var(--sav-text-m-line);
    text-decoration: none;

    > svg {
        flex: none;
        width: 1.5rem;
        height: 1.5rem;
        rotate: 180deg;
    }

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

/* The underline of the design grows in from the left, so it is drawn as a background rather
   than as a text decoration. */
.main-navigation__mega-label {
    background-image: linear-gradient(currentcolor, currentcolor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size var(--sav-duration-fade) var(--sav-ease-out);

    .main-navigation__mega-link:hover > &,
    .main-navigation__mega-link:focus-visible > & {
        background-size: 100% 1px;
    }

    @media (prefers-reduced-motion: reduce) {
        transition-duration: 0s;
    }
}