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

header {

    position: fixed;

    top: 22px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

}


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

.navbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    min-width: 440px;

    padding: .8rem 1.3rem;

    border-radius: 999px;

    background: rgba(255,255,255,.12);

    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);

    border: 1px solid rgba(255,255,255,.25);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        0 15px 45px rgba(0,40,120,.12);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

.navbar:hover {

    transform: translateY(-2px);

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.5),

        0 20px 55px rgba(0,40,120,.16);

}


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

.logo {

    font-size: 1.15rem;

    font-weight: 700;

    letter-spacing: .18em;

    color: var(--color-primary-dark);

    user-select: none;

}


/* ==================================================
   CONTROLS
================================================== */

.nav-controls {

    display: flex;

    align-items: center;

    gap: .8rem;

}


/* ==================================================
   SEGMENTED CONTROL
================================================== */

.segmented {

    position: relative;

    display: flex;

    align-items: center;

    padding: 4px;

    min-width: 82px;

    border-radius: 999px;

    overflow: hidden;

    background: rgba(255,255,255,.10);

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

    border: 1px solid rgba(255,255,255,.20);

}


/* ==================================================
   SLIDER
================================================== */

.segmented .slider {

    position: absolute;

    top: 4px;

    left: 4px;

    width: calc(50% - 4px);

    height: calc(100% - 8px);

    border-radius: 999px;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,.55),
        rgba(255,255,255,.20)
    );

    backdrop-filter: blur(24px);

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.7),

        0 8px 18px rgba(0,40,120,.12);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1);

}


/* ==================================================
   BUTTONS
================================================== */

.segmented button {

    position: relative;

    z-index: 2;

    flex: 1;

    padding: .55rem .95rem;

    border: none;

    background: transparent;

    color: var(--text-secondary);

    font-size: .88rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        color .3s ease,
        transform .3s ease;

}

.segmented button:hover {

    color: var(--text-primary);

}

.segmented button.active {

    color: var(--text-primary);

}

.segmented button:active {

    transform: scale(.96);

}


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

@media (max-width: 768px) {

    header {

        top: 16px;

        width: 100%;

        padding: 0 1rem;

    }

    .navbar {

        width: 100%;

        min-width: 0;

        gap: 1rem;

        padding: .75rem 1rem;

    }

    .logo {

        font-size: 1rem;

        letter-spacing: .12em;

    }

    .nav-controls {

        gap: .5rem;

    }

    .segmented {

        min-width: 74px;

    }

    .segmented button {

        padding: .5rem .75rem;

        font-size: .82rem;

    }

}

/* ==================================================
   THEME SLIDER
================================================== */

#theme-switch.dark .slider {

    transform: translateX(100%);

}

/* Posun slideru na EN */

#language-switch.en .slider {

    transform: translateX(100%);

}