@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                  : min(var(--var-content-width), 100%);*/
    --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;

        /*transition-property        : background-color, color;*/
        /*transition-duration        : var(--var-navlink-hover-transition-time);*/
        /*transition-timing-function : ease-out;*/

        background-color : transparent;
        color            : black;
    }

    .nav-item:not(.nav-item_active):hover {
        /*transition-property        : background-color, color;*/
        /*transition-duration        : var(--var-navlink-hover-transition-time);*/
        /*transition-timing-function : ease-in;*/

        cursor           : pointer;
        background-color : var(--color-navbar-hover);
        /*backdrop-filter  : hue-rotate(350deg);*/

        /*color            : white;*/
    }

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

@media (max-width : 768px) {
    .nav-items .nav-item {
        /*padding-inline : 12px;*/
        /*--size         : 36px;*/
    }
}

.nav-icon {
    height : 20px;
}

.nav-link {
    /*font                  : var(--font-link);*/
    /*font-feature-settings : var(--font-features);*/
    text-underline-offset : 4px;
    text-wrap             : nowrap;
}

.nav-link:hover {
    text-decoration-line : underline;
    /*color                : var(--color-itp-blue);*/
}

.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;
}

.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%);
    /*background-color           : color-mix(in srgb, var(--color-itp-green) 80%, white 20%);*/
    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 {
    /*height           : calc(var(--var-navbar-height) - var(--var-panel-padding));*/
    border     : none;
    background : none;
    /*border-radius    : 16px;*/
    /*padding          : 4px 16px;*/
    /*color            : white;*/
    /*font             : var(--font-button);*/
    /*background-color : var(--color-itp-green);*/
}

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

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

.no-wrap {
    text-wrap : nowrap;
    /*white-space : nowrap;*/
}

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

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

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

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

    svg {
        flex-shrink : 0;
    }
}

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