/* =========================================================
   BAVARIAN KINGS
   Hauptnavigation
   ========================================================= */


/* ---------------------------------------------------------
   Menüleiste
   --------------------------------------------------------- */

.site-navigation {
    position: sticky;
    z-index: 900;

    top: var(--header-height);

    width: 100%;
    height: var(--navigation-height);

    overflow: visible;

    color: var(--color-text-light);

    background-color: var(--color-royal-blue-dark);
    background-image:
        url("/assets/images/default/backgrounds/background-dark-blue-01.png");
    background-repeat: repeat;
    background-position: center;
    background-size: auto 100%;

    box-shadow:
        0 5px 10px rgb(0 0 0 / 24%);
}


/* ---------------------------------------------------------
   Innerer Navigationsbereich
   --------------------------------------------------------- */

.site-navigation__inner {
    display: flex;
    align-items: stretch;

    width: 100%;
    max-width: var(--content-max-width);
    height: 100%;

    margin: 0 auto;
    padding: 0 70px;
}


/* ---------------------------------------------------------
   Einzelner Menüpunkt
   --------------------------------------------------------- */

.site-navigation__item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 0;

    min-width: 0;
    height: 100%;

    padding: 0 10px;

    gap: 9px;

    color: #f2c65b;

    text-decoration: none;

    cursor: pointer;

    isolation: isolate;
}


/* ---------------------------------------------------------
   Aufhellung bei Hover / aktiver Seite
   --------------------------------------------------------- */

.site-navigation__item::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    right: 2px;
    bottom: 0;
    left: 2px;

    opacity: 0;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgb(255 235 169 / 22%) 0%,
            rgb(94 139 193 / 16%) 36%,
            rgb(35 72 120 / 10%) 58%,
            rgb(13 35 72 / 0%) 82%
        );

    transition:
        opacity 170ms ease;
}


/* ---------------------------------------------------------
   Feine Goldlinie unten bei Hover / aktiv
   --------------------------------------------------------- */

.site-navigation__item::after {
    content: "";

    position: absolute;

    right: 17%;
    bottom: 7px;
    left: 17%;

    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgb(255 209 95 / 82%),
            transparent
        );

    box-shadow:
        0 0 6px rgb(255 201 79 / 38%);

    transition:
        opacity 170ms ease;
}

.site-navigation__item:hover::before,
.site-navigation__item.is-active::before {
    opacity: 1;
}

.site-navigation__item:hover::after,
.site-navigation__item.is-active::after {
    opacity: 1;
}


/* ---------------------------------------------------------
   Menü-Icons
   --------------------------------------------------------- */

.site-navigation__icon {
    position: relative;
    z-index: 1;

    flex: 0 0 auto;

    width: auto;
    height: 31px;

    object-fit: contain;

    filter:
        drop-shadow(0 1px 1px rgb(0 0 0 / 52%));

    transition:
        transform 170ms ease,
        filter 170ms ease;
}

.site-navigation__item:hover .site-navigation__icon,
.site-navigation__item.is-active .site-navigation__icon {
    transform: translateY(-1px);

    filter:
        brightness(1.12)
        drop-shadow(0 1px 1px rgb(0 0 0 / 48%))
        drop-shadow(0 0 4px rgb(255 205 83 / 22%));
}


/* ---------------------------------------------------------
   Menü-Beschriftungen
   --------------------------------------------------------- */

.site-navigation__label {
    position: relative;
    z-index: 1;

    display: inline-block;

    color: #f2c65b;

    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.025em;

    white-space: nowrap;

    text-shadow:
        0 1px 1px rgb(0 0 0 / 72%);

    transition:
        filter 170ms ease;
}


/* ---------------------------------------------------------
   Goldverlauf der Menü-Beschriftungen
   --------------------------------------------------------- */

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .site-navigation__label {
        background-image:
            linear-gradient(
                180deg,
                #fff0a6 0%,
                #ffe17a 33%,
                #f4bd44 67%,
                #e7a72f 100%
            );

        background-clip: text;
        -webkit-background-clip: text;

        color: #f2c65b;

        -webkit-text-fill-color: transparent;
    }
}

.site-navigation__item:hover .site-navigation__label,
.site-navigation__item.is-active .site-navigation__label {
    filter:
        brightness(1.12)
        drop-shadow(0 0 2px rgb(255 215 113 / 20%));
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
    .site-navigation__inner {
        padding-right: 40px;
        padding-left: 40px;
    }

    .site-navigation__item {
        padding-right: 6px;
        padding-left: 6px;

        gap: 6px;
    }

    .site-navigation__icon {
        height: 27px;
    }

    .site-navigation__label {
        font-size: 12px;
    }
}

@media (max-width: 760px) {
    .site-navigation {
        position: fixed;
        z-index: 2000;

        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;

        height: auto;

        overflow-x: hidden;
        overflow-y: auto;

        background-color: var(--color-royal-blue-dark);
        background-image:
            linear-gradient(rgb(7 19 40 / 94%), rgb(7 19 40 / 98%)),
            url("/assets/images/default/backgrounds/background-dark-blue-01.png");

        opacity: 0;

        transform: translateY(-12px);

        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 180ms ease,
            transform 180ms ease,
            visibility 180ms ease;
    }

    .site-navigation__inner {
        flex-direction: column;

        min-width: 0;
        min-height: 100%;

        padding: 24px 18px 36px;
    }

    .site-navigation__item {
        justify-content: flex-start;

        width: min(100%, 420px);
        min-width: 0;
        min-height: 58px;

        margin: 0 auto;
        padding: 10px 22px;

        border-bottom: 1px solid rgb(176 138 69 / 34%);

        gap: 16px;
    }

    .site-navigation__icon {
        width: 34px;
        height: 34px;
    }

    .site-navigation__label {
        font-size: 14px;

        letter-spacing: 0.1em;
    }

    body.is-mobile-menu-open .site-navigation {
        opacity: 1;

        transform: translateY(0);

        visibility: visible;
        pointer-events: auto;
    }
}