/* ================================================== */
/* Header nav styles                                  */
/* ================================================== */
:root {
    --bs-gutter-x: 20px;
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;

    --menu-left-top-rotation: 45deg;
    --menu-left-bottom-rotation: -225deg;
    --menu-right-top-rotation: -45deg;
    --menu-right-bottom-rotation: 225deg;

    --menu-top-rotation: var(--menu-right-top-rotation);
    --menu-bottom-rotation: var(--menu-right-bottom-rotation);
    --menu-close-bg: var(--bg);
    --menu-close-fg: var(--fg);
    --menu-open-bg: var(--logo-gray);
    --menu-open-fg: var(--bg);

    --media-menu-mobile: 1000px;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    /* TODO: color to fit the navbar or no ? */
    /* background-color: var(--menu-close-bg); */
}

body>header {
    position: sticky;
    top: 0;
    width: 100dvw;
    background-color: var(--menu-close-bg);
    border-bottom: 0.5px solid var(--logo-gray);
    z-index: 1000;   
    will-change: transform;
    transition: transform 300ms ease-in-out;
}

body>header.nav-hidden {
    transform: translateY(-100%);
}

nav {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* height: 70px; */
    padding: var(--bs-gutter-x) 40px;
    padding: 0 min(40px, 4dvw);
    margin: auto;
    max-width: 1400px;
}

/* -------------------------------------------------- */
/* LINKS                                              */
/* -------------------------------------------------- */
nav .menu {
    display: flex;
    flex-flow: row nowrap;
    margin: 0;
    gap: 1.5rem;
    list-style: none;
}

nav .nav-item {
    position: relative;
    color: #050505a6; /* var(--menu-close-fg), 0.65) */
}

nav .nav-item:hover {
    color: #050505cc; /* var(--menu-close-fg), 0.8) */
}

nav .nav-item:active {
    color: #050505; /* var(--menu-close-fg)) */
    color: #e31f25; /* var(--logo-red)) */
}

nav .nav-item:active:hover {
    text-shadow: 0 1px 3px #05050525; /* var(--menu-close-fg), 0.15) */
    text-shadow: 0 1px 3px #e31f2525; /* var(--logo-red), 0.15) */
}

nav .nav-item .nav-link {
    display: block;
    line-height: 1.5;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    color: unset;
    transition: 150ms ease-in-out;
    transition-property: color, background-color, border-color;
}

/* calc(var(--media-menu-mobile) + 1px) */
@media (min-width: 1001px) {
    nav #menuDetails>ul>.nav-item {
        animation: navItemAppear 400ms ease-out forwards;
    }

    nav .nav-item:after {
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 2px;
        content: '';
        background-color: #050505cc; /* var(--menu-close-fg), 0.8) */
        opacity: 0;
        transition: all 200ms linear;
    }

    nav .nav-item:not(.has-submenu):not(:active):hover:after {
        bottom: 0;
        opacity: 1;
    }

    nav details>.menu {
        display: none;
    }

    @supports selector(::details-content) {
        nav>details::details-content {
            display: contents;
        }

        nav>.menu {
            display: none;
        }

        nav details>.menu {
            display: flex;
        }
    }
}

/* -------------------------------------------------- */
/* TOGGLER - DETAILS/SUMMARY                          */
/* -------------------------------------------------- */
nav details {
    position: relative;
}

nav summary {
    list-style: none;
    cursor: pointer;
    outline-style: none;
}

nav summary::-webkit-details-marker {
    display: none;
}

nav .menu-button-lines {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

nav .menu-button-lines>div {
    display: block;
    background-color: var(--logo-red);
    width: 30px;
    height: 4px;
    border-radius: 5px;
    transition: 200ms ease-in-out;
}

nav>details[open] .menu-button-lines [top] {
    transform: translateY(10px)
        rotate(var(--menu-top-rotation));
}

nav>details[open] .menu-button-lines [middle] {
    opacity: 0;
    transition: 5ms linear;
}

nav>details[open] .menu-button-lines [bottom] {
    transform: translateY(-10px)
        rotate(var(--menu-bottom-rotation));
}

/* var(--media-menu-mobile) */
@media (max-width: 1000px) {
    nav>details .menu-button-lines {
        display: flex;
        animation: menuButtonAppear 400ms ease-out forwards;
    }

    /* Fallback for browsers without :has() */
    body.menu-open {
        overflow: hidden;
    }

    /* Lock body scroll when menu is open */
    @supports selector(body:has(*)) {
        body:has(nav>details[open]) {
            overflow: hidden;
        }
    }

    nav .menu {
        display: none;
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100dvh;
        gap: unset;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        background: var(--menu-open-bg);
        z-index: 1000;
        overflow-y: auto;
        /* Smooth scrolling for the menu */
        -webkit-overflow-scrolling: touch;
    }

    nav>details[open] .menu {
        display: flex;
    }

    nav>details[open] .menu>.nav-item {
        /* height: 2.5em; */
        width: 100%;
    }

    nav>details[open] .nav-item {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
        color: var(--menu-open-fg);
        border-bottom: 1px solid var(--gray);

        /* padding: 0.5em;
        box-sizing: border-box; */
    }

    nav>details[open] .nav-item:last-child {
        border-bottom: unset;
        padding-bottom: unset;
    }
}

/* calc(var(--media-menu-mobile) + 1px) */
@media (min-width: 1001px) {
    nav>details[open] .nav-item::after,
    nav>details[open] .nav-item .nav-link {
        transition: none;
    }
}

/* SUBMENUS
  ------------------------- */
nav .has-submenu.nav-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Remove positioning context from the details wrapper so the submenu
     ignores it and aligns to the grandparent instead */
nav .submenu-details {
    position: static;
}

nav .submenu-details summary {
    width: 16px;
    font-size: 16px;
    display: flex;
    /* align-items: center; */
    /* padding: 0.25rem; */
}

nav .submenu-details .chevron {
    margin: auto;
    line-height: 1;
    transition: transform 200ms ease-in-out;
}

nav .submenu-details[open] .chevron {
    transform: rotate(180deg);
}

/* calc(var(--media-menu-mobile) + 1px) */
@media (min-width: 1001px) {
    nav .submenu-details .submenu {
        position: absolute;
        top: calc(100% - 2px);
        left: 0;
        z-index: 100;
        max-width: 240px;
        margin: 0;
        padding: 0.5rem 1rem;
        list-style: none;
        background: var(--menu-close-bg);
        border-top: 3px solid #ea3a2a;
        box-shadow: 0 4px 12px #0505051a; /* var(--menu-close-fg), 0.1) */
    }

    nav .submenu-details .nav-item {
        padding: 0 0.2rem;
        width: fit-content;
    }

    nav .nav-item.has-submenu:nth-last-child(-n + 2) .submenu-details .submenu {
        left: auto;
        right: 0;
    }

    /* PURE CSS HOVER ENHANCEMENT
      ------------------------- */
    @supports selector(::details-content) {
        nav .nav-item:hover .submenu-details::details-content {
            display: contents;
        }

        /* Disable hover-block click trigger on desktop */
        nav .submenu-details .submenu-toggle {
            /* pointer-events: none; */
            cursor: default;
        }

        nav .nav-item:hover .submenu-details .chevron {
            transform: rotate(180deg);
        }
    }
}

/* var(--media-menu-mobile) */
@media (max-width: 1000px) {
    nav>details[open] .has-submenu.nav-item {
        gap: unset;
        flex-direction: column;
    }

    nav>details[open] .submenu-details {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.03);
    }

    /* Chevron floats to the top right of the <li> wrapper */
    nav>details[open] .submenu-details .submenu-toggle {
        position: absolute;
        top: 0;
        right: min(40px, 4dvw);
        width: calc(16px + (var(--bs-nav-link-padding-y) * 2));
        background-color: rgba(250, 250, 250, 0.03);
        box-shadow: 0 0 15px rgba(5, 5, 5, .1);
        backdrop-filter: blur(10px);
        border-radius: 4px;
        box-sizing: border-box;

        /* (1.5 line-height) + (padding-top + padding-bottom) */
        height: calc(1.5em + (var(--bs-nav-link-padding-y) * 2));
        /* .nav-item (padding-top + padding-bottom) */
        margin: 0.5rem 0;
    }

    nav>details[open] .submenu {
        width: fit-content;
        margin: auto;
    }

    nav>details[open] .submenu .nav-item .nav-link {
        font-size: 0.95em;
        opacity: 0.85;
        /* border-bottom: 1px solid var(--gray);
    }

    nav>details[open] .submenu .nav-item:last-child .nav-link {
        /* border-bottom: unset; */
    }
}

/* -------------------------------------------------- */
/* LOGO                                               */
/* -------------------------------------------------- */
nav #logo {
    position: relative;
    top: 0%;
    right: 0%;
    z-index: 1;
    transform: translate(0%, 0%);
    max-width: 200px;
    max-height: 50px;
    background-color: unset;
    margin: 10px 0;
    padding: 0px;
    /*border-radius: 8%;*/
    /*border-radius: 0 0 0 18%;*/
    border-radius: 5% 0 5% 5%;
}


/* ========================================= */
/* ANIMATIONS                                */
/* ========================================= */
.preload nav * {
    animation-duration: 0ms !important;
}

@keyframes navItemAppear {
    from {
        opacity: 0;
        letter-spacing: -4px;
    }

    to {
        opacity: 1;
        letter-spacing: initial;
    }
}

@keyframes menuButtonAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: initial;
    }
}