/* ====================================================== */
/* © HENDRIK ADONS
/* Contains the styling for the header, works together
/* with the header.js file.
/* ====================================================== */

header {
    position: fixed; top: 0; left: 0; z-index: 999;
    width: var(--dvw); height: var(--header-height); display: flex; justify-content: center;
    --header-background: rgba(var(--light-rgb),0.8);
    --header-primary-color: black;
    --header-button-hover-background: rgba(0,0,0,0.05);
    --header-mobilenav-background: var(--color\:background);
}
header.transparent {
    --header-background: transparent;
}
header.notfixed {
    position: absolute;
}
/* [DARK] */
header:is(.dark *, .dark) {
    --header-background: rgba(var(--dark-rgb),0.8);
    --header-primary-color: white;
    --header-button-hover-background: rgba(255,255,255,0.12);
}
header.transparent:is(.dark *, .dark) {
    --header-background: transparent;
}

header.dark {
    --header-background: rgba(var(--dark-rgb),0.8);
    --header-primary-color: white;
    --header-button-hover-background: rgba(255,255,255,0.12);
    &.transparent { --header-background: transparent; }
}


/* ===================== */
/* HEADNAV
/* ===================== */
/* #region */

/* headnav */
.headnav {
    z-index: 997; flex-grow: 1;
    width: calc(100% - .8rem); max-width: calc(68rem + 1rem); position: fixed;
    display: flex; padding: .5rem;
    border: var(--border); border-radius: .7rem;
    margin: .4rem; box-shadow: var(--shadow);
    background-color: var(--header-background);
    -webkit-backdrop-filter: blur(32px) saturate(172%);
    backdrop-filter: blur(32px) saturate(172%);
    transition: padding 240ms ease, width 240ms ease,
                background-color 240ms ease,
                backdrop-filter 240ms ease,
                -webkit-backdrop-filter 240ms ease,
                border-color 240ms ease, box-shadow 240ms ease;
}
.transparent .headnav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-color: transparent;
}
.notfixed .headnav {
    position: absolute;
}
.open .headnav {
    box-shadow: none;
    border-color: transparent;
}
.header\:custom-text-color.transparent .headnav {
    --header-primary-color: var(--c);
    --header-button-hover-background: color-mix(in hsl, var(--c) 12%, transparent);
}


/* headnav items */
.headnav-logo {
    --h: calc(1.3rem + .7*.375rem);
    margin: auto; margin-left: 0;
    transition: opacity 240ms 200ms ease;
    & > div {
        margin-left:0; height: var(--h);
        & > svg {
            transition: color 200ms ease;
            height: 100%; width: auto;
            color: var(--header-primary-color);
        }
    }
}
.open .headnav-logo { opacity: 0; transition: opacity 240ms ease; }
#headnav-desktop {
    align-items: center;
    /* gap: 0.5rem; */
    margin: auto;
    margin-right: 0; /* 1.7rem; */
    & .high-contrast, .high-contrast-reverse {
        margin-left: .375rem;
    }
    & .button:not(.high-contrast,.high-contrast-reverse) {
        color: var(--header-primary-color);
        &:hover { background-color: var(--header-button-hover-background); }
    }
}
#headnav-mobile {
    align-items: center;
    gap: 0.5rem;
    margin: auto;
    margin-right: 0; /* 1.4rem; */
}
.headnav-hamburger-container {
    width: 2rem;
    height: 2rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.headnav-hamburger {
    width: 1.27rem;
    height: 1.27rem;
    position: relative;
    margin: auto;
}
.headnav-hamburger-line {
    width: 100%;
    height: 1.5pt;
    background-color: var(--header-primary-color);
    position: absolute;
    top: calc(50% - 0.75pt);
    border-radius: 50vh;
}
.headnav-hamburger-top {
    width: 100%; height: 100%;
    position: absolute;
}
.closed .headnav-hamburger-top {
    top: -22.5%;
    transform: rotate(0deg);
    transition: transform 0.25s ease, top 0.25s 0.25s ease;
}
.open .headnav-hamburger-top {
    top: 0%;
    transform: rotate(45deg);
    transition: top 0.25s ease, transform 0.25s 0.25s ease;
}
.headnav-hamburger-bottom {
    width: 100%; height: 100%;
    position: absolute;
}
.closed .headnav-hamburger-bottom {
    top: 22.5%;
    transform: rotate(0deg);
    transition: transform 0.25s ease, top 0.25s 0.25s ease;
}
.open .headnav-hamburger-bottom {
    top: 0%;
    transform: rotate(-45deg);
    transition: top 0.25s ease, transform 0.25s 0.25s ease;
}

/* #endregion */



/* ===================== */
/* MOBILENAV
/* ===================== */
/* #region */

.mobilenav-background {
    position: fixed; top: 0; left: 0; z-index: 995;
    width: var(--dvw); height: var(--dvh);
    background-color: rgba(6,18,37,0.1);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.open .mobilenav-background {
    visibility: visible;
    opacity: 0.8;
    transition-property: visibility, opacity;
    transition-duration: 370ms;
    transition-timing-function: step-start, cubic-bezier(0.4, 0, 0.6, 1);
}
.closed .mobilenav-background {
    visibility: hidden;
    opacity: 0;
    transition-property: visibility, opacity;
    transition-duration: 370ms;
    transition-timing-function: step-end, cubic-bezier(0.4, 0, 0.6, 1);
}

.mobilenav-container {
    width: 100vw;
    z-index: 996; position: fixed;
    background-color: var(--header-mobilenav-background);
    overflow: hidden;
    transition: height 370ms cubic-bezier(0.4, 0, 0.6, 1);
}
.closed .mobilenav-container {
    height: 0;
}
.open .mobilenav-container {
    height: var(--dvh);
}
.mobilenav {
    display: flex; flex-direction: column;
    position: relative; margin-left: auto; margin-right: auto;
    width: 100%; height: 100%; padding: calc(3*var(--save-padding-left));
    padding-top: var(--header-height);
}
/* .closed .mobilenav {
    transform: translateY(-1rem);
    transition: transform 0.27s cubic-bezier(0.4, 0, 0.6, 1);
}
.open .mobilenav {
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.6, 1);
} */
.mobilenav-divider-line {
    width: 100%;
    height: 1.5pt;
    background-color: var(--header-primary-color);
    opacity: 0.3;
}
.mobilenav-item {
    --start-delay: 200ms;
    --delta-delay: 20ms;
}
.closed .mobilenav-item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition-property: opacity, transform, visibility;
    transition-duration: 240ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), step-end;
}
.open .mobilenav-item {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-property: opacity, transform, visibility;
    transition-duration: 240ms;
    transition-delay: calc(var(--start-delay) + var(--delta-delay) * var(--item));
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), step-start;
}
.mobilenav-text {
    width: 100%;
    margin-top: 1.2rem;
    color: var(--header-primary-color);
    font-size: 2rem; font-weight: 800;
    opacity: 1;
}
.mobilenav-socialmedia {
    margin-top: auto;
    display: flex;
    color: var(--header-primary-color);
    & a { padding: 10px; color: var(--color\:secondary); transform: translate(-10px,10px); & > svg { height: 20px; width: auto; } }
}

/* #endregion */



/* ===================== */
/* RESPONSIVE
/* ===================== */
/* #region */

/* [MOBILE] */
@media screen and (max-width: 767px) {
    #headnav-desktop {
        display: none;
    }
    #headnav-mobile {
        display: flex;
    }
}

/* [DESKTOP] */
@media screen and (min-width: 768px) {
    #headnav-desktop {
        display: flex;
    }
    #headnav-mobile {
        display: none;
    }
}
 
/* [MOBILE] Mobile phones (portrait) */
@media screen and (max-width: 480px) {

}

/* [MOBILE] Mobile phones (landscape) and small tablets */
@media screen and (min-width: 481px) and (max-width: 767px) {

}

/* [DESKTOP] Tablets and small desktops */
@media screen and (min-width: 768px) and (max-width: 991px) {

}

/* [DESKTOP] Medium-sized desktops */
@media screen and (min-width: 992px) and (max-width: 1199px) {

}

/* [DESKTOP] Large desktops and widescreen monitors */
@media screen and (min-width: 1200px) {

}

/* #endregion */