/* ------- */
/* Desktop */
/* ------- */
/* Header */
header {
    --_animation-speed: 0.2s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: transparent;
    color: var(--color-text);
    /* background: linear-gradient(var(--color-contrast), rgba(0,0,0,0)); */
    /* filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3)); */
    /* backdrop-filter: blur(10px); */
    transition: all var(--_animation-speed) ease-in-out;
}
header[data-sticky] {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.05));
}

/* Navbar */
header nav {
    position: relative;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    /* padding: 49px 0 10px; */
    padding-block: clamp(2rem, 0.86rem + 2.377vw, 3rem);
    transition: padding var(--_animation-speed) ease-in-out;
}

/* Sections */
header nav #logo-section {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
}
header nav #logo-section .header-logo {
    width: 110px;
    transition: all var(--_animation-speed) ease-in-out;
}
header[data-sticky] nav #logo-section .header-logo {
    width: 70px;
}
header nav #logo-section a {
    line-height: 0;
    z-index: 2;
}

header nav #navigation-links {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
header #navigation-links ul {
    list-style: none;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-6);
    background-color: var(--color-contrast2);
    border-radius: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(39, 55, 65, 0.4);
    font-size: 16px;
    transition: all var(--_animation-speed) ease-in-out;
}
header #navigation-links ul li {
    opacity: 0.56;
}

header #cta {
    font-size: 1rem;
    color: var(--color-base);
    transition: all var(--_animation-speed) ease-in-out;
}
header[data-mobile-menu-toggle] #cta {
    transform: translateY(-300%);
}

@media only screen and (min-width: 971px) { /* desktop only */ 
    /* Sticky header styling */
    header[data-sticky] {
        background: var(--color-contrast);
    }
    header[data-sticky] nav {
        padding-block: var(--spacing-4);
    }
    header[data-sticky] #navigation-links ul {
        background-color: transparent;
        border-color: transparent;
    }
    header[data-sticky] #cta {
        padding: 10px 24px;
    }

    /* Hamburger button (hide) */
    header #mobile-hamburger {
        display: none;
    }
}

/* ------ */
/* Mobile */
/* ------ */
/* Hamburger button */
header #mobile-hamburger {
    --_bar-height: 3px;
    --_bar-width: 20px;
    --_bar-gap: 4px;
    gap: var(--_bar-gap);
}
header #mobile-hamburger .bar {
    width: var(--_bar-width);
    height: var(--_bar-height);
    border-radius: 100px;
    background-color: var(--color-text);
    transition: var(--_animation-speed);
}
header[data-mobile-menu-toggle] #mobile-hamburger .bar {
    background-color: var(--color-base);
}
header[data-mobile-menu-toggle] #mobile-hamburger .bar1 {
    transform:
    translateY(calc(var(--_bar-height) + var(--_bar-gap))) /* gap + height */
    rotate(45deg); /* Rotate after translateY!!! */
}
header[data-mobile-menu-toggle] #mobile-hamburger .bar2 {
    transform: translateX(calc(var(--_bar-width) / -2)); /* Any number possible */
    opacity: 0;
}
header[data-mobile-menu-toggle] #mobile-hamburger .bar3 {
    transform: translateY(calc((var(--_bar-height) + var(--_bar-gap)) * -1)) rotate(-45deg);
}

/* Mobile menu */
header + #mobile-menu {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-block: var(--spacing-7);
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
}
header[data-mobile-menu-toggle] + #mobile-menu {
    transform: translateX(0);
}

/* Mobile menu sections */
header + #mobile-menu #navigation-links {
    font-size: 24px;
    color:rgba(199, 231, 236, 1);
    margin-block: var(--spacing-5);
    overflow-y: auto;
}
header + #mobile-menu #navigation-links ul {
    list-style: none;
    gap: var(--spacing-5);
    padding-inline: 0;
}
header + #mobile-menu #navigation-links ul li {
    padding-bottom: var(--spacing-5);
    border-bottom: 1px rgba(199, 231, 236, 0.16) solid;
}
header + #mobile-menu #navigation-links ul li:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

@media only screen and (max-width: 970px) { /* mobile only */ 
    /* Header */
    header {
        background: var(--color-contrast);
    }

    /* Navbar */
    header nav {
        padding-bottom: 1.5rem;
    }

    /* Header sections */
    header nav #logo-section .header-logo {
        width: 70px;
    }

    header nav #navigation-links {
        display: none;
    }
    header nav #navigation-links ul > li {
        width: 100%;
    }
    header nav #navigation-links ul a {
        font-size: 1.5rem;
    }

    header #cta {
        padding: 8.5px 20px;
    }
}