@import url("global/typography.css");
@import url("global/vars.css");
@import url("global/colors.css");
@import url("global/reset.css");
@import url("global/classes.css");
@import url("global/cookie.css");

:root {
    --var-navbar-width                  : var(--var-content-width);
    --var-navbar-transition-time        : 0.3s;
    --var-navlink-hover-transition-time : 0.1s;
    --nav-bar-glass-color               : rgba(255, 255, 255, 0.5);
}

body {
    margin-inline          : auto;
    -webkit-font-smoothing : antialiased;
    font                   : var(--font-body);
    font-feature-settings  : var(--font-features);
}

a {
    color           : black;
    text-decoration : none;
}

*:focus, *:focus-visible {
    outline : none;
}

.nav-bar {
    position                   : fixed;
    left                       : 50%;
    top                        : var(--var-panel-gap);
    transform                  : translateX(-50%);
    height                     : var(--var-navbar-height);
    border-radius              : var(--var-panel-border-radius);

    padding-inline             : 12px;
    z-index                    : 2;

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

    transition-property        : background-color, width, box-shadow;
    transition-duration        : var(--var-navbar-transition-time);
    transition-timing-function : ease-in-out;

    width                      : var(--var-navbar-width);
    box-shadow                 : none;

    a, .nav-item {
        flex-shrink : 0;
    }
}

.nav-bar::before {
    transition-property        : background-color;
    transition-duration        : var(--var-navbar-transition-time);
    transition-timing-function : ease-in-out;

    content                    : "";
    position                   : absolute;
    inset                      : 0;
    border-radius              : inherit;
    background-color           : var(--color-grey-light-bright);
    z-index                    : -1;
}

.nav-bar_scroll::before {
    content          : "";
    position         : absolute;
    inset            : 0;
    border-radius    : inherit;
    background-color : var(--nav-bar-glass-color);
    backdrop-filter  : var(--var-glass-filter);
    z-index          : -1;
}

.nav-bar_scroll {
    background-color : rgba(255, 255, 255, 0.0);
    width            : calc(var(--var-navbar-width) - var(--var-panel-margin) * 2);
    box-shadow       : 0 2px 24px -4px rgba(0, 0, 0, 0.1);
}

.nav-bar-logo {
    height        : 28px;
    margin-inline : 16px;
}

.nav-items {
    display     : flex;
    gap         : 4px;
    align-items : center;

    .nav-item {

        --size           : 40px;

        padding-inline   : 16px;
        height           : var(--size);
        border-radius    : calc(var(--size) / 2);
        display          : flex;
        align-items      : center;

        background-color : transparent;
        color            : black;
    }

    .nav-item:not(.nav-item_active):hover {
        cursor           : pointer;
        background-color : var(--color-navbar-hover);
    }

    .nav-item_active {
        background-color : var(--color-navbar-hover);
    }

    .hamburger-btn {
        display : none;
    }
}

.nav-icon {
    height : 20px;
}

.nav-link {
    text-underline-offset : 4px;
    text-wrap             : nowrap;
}

.nav-link:hover {
    text-decoration-line : underline;
}

.language-select-popup {
    --menu-padding   : 12px;
    --menu-offset    : 1rem;

    position         : fixed;
    top              : calc(100% + var(--menu-offset));
    right            : 0;
    z-index          : 3;
    border-radius    : var(--var-panel-border-radius);
    display          : none;
    flex-direction   : column;
    gap              : 8px;
    padding          : var(--menu-padding);
    background-color : var(--nav-bar-glass-color);;
    backdrop-filter  : var(--var-glass-filter);
    box-shadow       : 0 2px 24px -4px rgba(0, 0, 0, 0.2);

    .language-switcher-item {
        border-radius         : calc(var(--var-panel-border-radius) - var(--menu-padding));

        padding-block         : 1rem;
        padding-inline        : 2rem;
        color                 : black;
        font                  : var(--font-link);
        font-feature-settings : var(--font-features);
    }

    .language-switcher-item_selected {
        background-color : black;
        color            : white;
    }

    .language-switcher-item:hover {
        cursor : pointer;
    }

    .language-switcher-item:not(.language-switcher-item_selected):hover {
        background-color : var(--color-navbar-hover);
    }
}

.language-select-popup_visible {
    display : flex;
}

.hamburger-menu {
    display : none;
}

@media (max-width : 880px) {

    .nav-bar {

        .nav-item:not(.hamburger-btn) {
            display : none;
        }

        .nav-item.hamburger-btn {
            display : block;
        }

        .nav-item.hamburger-btn:focus, .nav-item.hamburger-btn:focus-visible {
            background : none;
        }

        .nav-item.hamburger-btn.hamburger-btn_hidden {
            display : none;
        }
    }

    .hamburger-menu {
        --padding-left   : 6rem;

        display          : block;
        position         : fixed;
        inset            : 0;
        width            : 100dvw;
        height           : 100dvh;
        background-color : rgba(255, 255, 255, 0.8);
        z-index          : 3;
        backdrop-filter  : blur(16px);
        padding-left     : 6rem;
        padding-top      : 8rem;
        pointer-events   : none;

        opacity          : 0;
        transform        : translateY(-16px);

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

        .hamburger-x {
            --size      : var(--var-navbar-height);

            height      : var(--size);
            width       : var(--size);

            position    : absolute;
            top         : var(--var-panel-gap);
            right       : var(--var-panel-gap);

            display     : grid;
            place-items : center;

            color       : black;
        }

        .hamburger-x:hover {
            cursor           : pointer;
            background-color : var(--color-navbar-hover);
            border-radius    : 50%;
        }

        .hamburger-x:focus, .hamburger-x:focus-visible {
            background : none;
        }

        .hamburger-item {
            display               : flex;
            align-items           : center;
            height                : 8rem;
            font                  : var(--font-hamb-link);
            width                 : calc(80dvw - var(--padding-left));
            text-underline-offset : 4px;
        }

        .hamburger-item:hover {
            text-decoration-line : underline;
        }
    }

    .hamburger-menu_visible {
        pointer-events : auto;

        opacity        : 1;
        transform      : translateY(0);
    }
}

.footer-mountains {
    position        : absolute;
    bottom          : 0;
    display         : flex;
    gap             : 2px;
    justify-content : center;
    width           : 100%;
    overflow        : hidden;

    svg {
        flex-shrink : 0;
    }
}

.button-animation {
    transition-property        : transform, background-color, box-shadow;
    transition-timing-function : ease-in-out;
    transition-duration        : 0.2s;
    border                     : 4px solid var(--color-itp-green);
}

.button-animation:hover {
    cursor                     : pointer;

    transition-property        : transform, background-color, box-shadow;
    transition-timing-function : ease-in-out;
    transition-duration        : 0.2s;

    transform                  : translate(0, -4%);
    box-shadow                 : 0 4px 8px -2px rgba(0, 0, 0, 0.2);
}

.button-animation:active {
    transition-property        : transform, box-shadow;
    transition-timing-function : ease-in-out;
    transition-duration        : 0.1s;

    transform                  : translate(0, -2%);
    box-shadow                 : 0 2px 6px -1px rgba(0, 0, 0, 0.2);
}

button {
    border                      : none;
    background                  : none;
    -webkit-tap-highlight-color : transparent;
    appearance                  : none;
    -webkit-appearance          : none;
}

.section-title {
    text-align     : center;
    padding-top    : 8rem;
    padding-bottom : 4rem;
}

@media (max-width : 720px) {
    .section-title {
        margin-inline : 2rem;
    }
}

.section-panel {
    max-width     : var(--var-content-width);
    margin-inline : auto;
    margin-bottom : var(--var-panel-gap);
    border-radius : var(--var-panel-border-radius);
}

.margin-top-72 {
    margin-top : 7.2rem;
}

.margin-top-52 {
    margin-top : 5.2rem;
}

.margin-top-32 {
    margin-top : 3.2rem;
}

/**
 * enable for layout debugging
 */
/**, *::before, *::after {*/
/*    outline : 2px solid hotpink;*/
/*}*/