/* =========================================================
   QUANTO – GEMEINSAME NAVIGATION
   navigation.css
   ========================================================= */


/* =========================================================
   GRUNDLAGEN
   ========================================================= */

body {
    overflow-x: clip;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;

    min-height: 90px;

    background: #1C121C;

    border-bottom:
        1px solid rgba(230, 96, 218, 0.22);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transform: translateY(0);

    transition:
        transform 0.32s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

    will-change: transform;
}


/* Header wenn gescrollt */

.site-header.is-scrolled {
    background: rgba(17, 13, 17, 0.96);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.33);
}


/* =========================================================
   NAVBAR AUSBLENDEN
   ========================================================= */

/*
   Sobald die Seite nicht mehr ganz oben ist,
   bekommt der Header per JS die Klasse .is-hidden.

   Dadurch fährt die komplette Navbar nach oben raus.
*/

.site-header.is-hidden {
    transform: translateY(-105%);
    box-shadow: none;
}


/* =========================================================
   NAVIGATION CONTAINER
   ========================================================= */

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-height: 90px;

    width: min(1400px, 94%);

    margin: auto;
}


/* =========================================================
   LOGO / BRAND
   ========================================================= */

.site-brand {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    flex-shrink: 0;

    color: #f1d9ee;

    text-decoration: none;

    letter-spacing: 2px;

    font-size: 20px;
}


.site-brand img {
    display: block;

    width: 32px;
    height: 32px;

    filter:
        brightness(0)
        invert(85%)
        sepia(22%)
        saturate(1160%)
        hue-rotate(272deg);

    animation:
        site-atom-spin 12s linear infinite;
}


/* =========================================================
   MENÜ
   ========================================================= */

.site-menu {
    display: flex;
    align-items: center;

    gap: 12px;
}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.site-nav-link {
    position: relative;

    padding: 12px 18px;

    color: #c7b8c5;

    text-decoration: none;

    font-size: 16px;

    border:
        1px solid transparent;

    border-radius: 10px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


/* Unterstrich */

.site-nav-link::after {
    content: '';

    position: absolute;

    left: 18px;
    right: 18px;

    bottom: 5px;

    height: 2px;

    border-radius: 2px;

    background: #ee86e6;

    transform: scaleX(0);

    transition:
        transform 0.25s ease;
}


/* Hover */

.site-nav-link:hover,
.site-nav-link:focus-visible {
    color: #f6e9f4;

    background:
        rgba(180, 20, 174, 0.14);
}


.site-nav-link:hover::after,
.site-nav-link:focus-visible::after,
.site-nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}


/* Aktuelle Seite */

.site-nav-link[aria-current="page"] {
    color: #ee86e6;

    background:
        rgba(180, 20, 174, 0.12);
}


/* =========================================================
   ACCOUNT LINK
   ========================================================= */

.site-nav-account {
    margin-left: 14px;

    border-color:
        rgba(180, 20, 174, 0.5);

    background:
        rgba(180, 20, 174, 0.08);
}


.site-nav-account span {
    display: inline-block;

    margin-left: 9px;

    transition:
        transform 0.25s ease;
}


.site-nav-account:hover span {
    transform:
        translate(2px, -2px);
}


/* =========================================================
   FOCUS
   ========================================================= */

.site-header a:focus-visible,
.site-menu-toggle:focus-visible {
    outline:
        2px solid #ee86e6;

    outline-offset: 4px;
}


/* =========================================================
   MOBILE BUTTON
   ========================================================= */

.site-menu-toggle {
    display: none;
}


/* =========================================================
   SCROLL PROGRESS
   ========================================================= */

.site-scroll-track {
    position: absolute;

    bottom: -1px;
    left: 0;

    width: 100%;
    height: 2px;

    pointer-events: none;
}


.site-scroll-track span {
    display: block;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #b414ae,
            #ee86e6
        );

    transform:
        scaleX(var(--page-progress, 0));

    transform-origin: left;
}


/* =========================================================
   SCROLL OFFSET
   ========================================================= */

html {
    scroll-padding-top: 115px;
}


/* =========================================================
   LOGO ANIMATION
   ========================================================= */

@keyframes site-atom-spin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 800px) {

    /*
       Mobile Navbar bewusst deutlich kleiner
       als die Desktop Navbar.
    */

    .site-header,
    .site-nav {
        min-height: 64px;
    }


    .site-nav {
        flex-wrap: nowrap;

        gap: 12px;

        padding:
            7px 4px;
    }


    /* =============================
       BRAND
       ============================= */

    .site-brand {
        gap: 9px;

        font-size: 16px;

        letter-spacing: 1.5px;
    }


    .site-brand img {
        width: 27px;
        height: 27px;
    }


    /* =============================
       MOBILE MENÜ BUTTON
       ============================= */

    .site-header.is-enhanced
    .site-menu-toggle {

        display: inline-flex;

        align-items: center;

        gap: 9px;

        padding:
            8px 10px;

        border:
            1px solid #62315d;

        border-radius: 8px;

        background: #241521;

        color: #edc9e7;

        font: inherit;

        font-size: 14px;

        cursor: pointer;

        flex-shrink: 0;
    }


    /* =============================
       HAMBURGER ICON
       ============================= */

    .site-menu-icon {
        position: relative;

        width: 18px;
        height: 12px;

        flex-shrink: 0;
    }


    .site-menu-icon::before,
    .site-menu-icon::after {

        content: '';

        position: absolute;

        left: 0;

        width: 18px;
        height: 2px;

        background:
            currentColor;

        transition:
            transform 0.25s ease,
            top 0.25s ease;
    }


    .site-menu-icon::before {
        top: 2px;
    }


    .site-menu-icon::after {
        top: 10px;
    }


    /* Hamburger -> X */

    .site-menu-toggle[aria-expanded="true"]
    .site-menu-icon::before {

        top: 6px;

        transform:
            rotate(45deg);
    }


    .site-menu-toggle[aria-expanded="true"]
    .site-menu-icon::after {

        top: 6px;

        transform:
            rotate(-45deg);
    }


    /* =============================
       DROPDOWN MENÜ
       ============================= */

    .site-header.is-enhanced
    .site-menu {

        position: absolute;

        top: 100%;
        left: 3%;

        width: 94%;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        padding: 10px;

        background:
            rgba(25, 11, 25, 0.97);

        border:
            1px solid #791475;

        border-top:
            1px solid rgba(238, 134, 230, 0.25);

        border-radius:
            0 0 14px 14px;

        box-shadow:
            0 16px 30px rgba(0, 0, 0, 0.47);

        max-height:
            calc(100dvh - 70px);

        overflow-y: auto;
    }


    /* =============================
       MOBILE LINKS
       ============================= */

    .site-nav-link {
        width: 100%;

        padding:
            11px 14px;

        text-align: left;

        font-size: 15px;

        border-radius: 8px;
    }


    .site-nav-link::after {
        left: 14px;
        right: 14px;
    }


    /* =============================
       ACCOUNT
       ============================= */

    .site-nav-account {
        margin:
            6px 0 0;
    }


    /* =============================
       HIDDEN MENÜ
       ============================= */

    .site-menu[hidden] {
        display: none;
    }


    /* =============================
       MENÜ ANIMATION
       ============================= */

    .site-header.is-enhanced
    .site-menu:not([hidden]) {

        animation:
            site-menu-open
            0.22s ease both;
    }


    /* Mobile Scroll Offset */

    html {
        scroll-padding-top: 80px;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
   ========================================================= */

@media (max-width: 420px) {

    .site-header,
    .site-nav {
        min-height: 60px;
    }


    .site-nav {
        width: 95%;

        padding:
            6px 2px;
    }


    .site-brand {
        gap: 7px;

        font-size: 14px;

        letter-spacing: 1px;
    }


    .site-brand img {
        width: 25px;
        height: 25px;
    }


    .site-header.is-enhanced
    .site-menu-toggle {

        gap: 7px;

        padding:
            7px 9px;

        font-size: 13px;
    }


    .site-header.is-enhanced
    .site-menu {

        max-height:
            calc(100dvh - 64px);
    }


    .site-nav-link {
        padding:
            10px 13px;

        font-size: 14px;
    }


    html {
        scroll-padding-top: 70px;
    }

}


/* =========================================================
   MENÜ OPEN ANIMATION
   ========================================================= */

@keyframes site-menu-open {

    from {
        opacity: 0;

        transform:
            translateY(-8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   REDUCED MOTION / ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-header,
    .site-header *,
    .site-header *::before,
    .site-header *::after {

        animation: none !important;

        transition: none !important;
    }

}