/**
 * New Header/nav styles
 */
/*
    Future notes:
    due to time crunch, there's a lot of z-index hacking + weird positioning tricks...
    Sorry dawg
*/

:root {
    --_header-height: var(--header-height, 80px);
}

.fl-header {
    --_header-bg: var(--header-bg, rgba(255 255 255 / .8));
    --_header-link-clr: var(--header-link-clr, var(--tertiary-color));
    --_header-link-clr--hover: var(--header-link-clr--hover, var(--accent-color));

    --_header-content-padding: var(--header-content-padding, 1rem);


    --_nav-item-spacing: var(--nav-item-spacing, var(--gutter));

    height: var(--_header-height);
    padding-block-start: 1rem;
    
    z-index: 3;
    position: relative;
    

    & + * .parallax-hero {
        margin-top: calc(-1 * var(--_header-height));
    }
}

.fl-header__content {
    display: flex;
    align-items: center;
    height: 100%;
    background: var(--_header-bg);
    backdrop-filter: blur(10px);
    padding-inline: var(--_header-content-padding);
    border-radius: var(--radius-normal);
    position: relative;
}

.fl-header__logo {
    height: 100%;
    margin-right: auto;
    padding: 0.6rem;
    img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
    }
}

.fl-nav {
    display: flex;

    :where(ul) {
        padding: 0;
        margin: 0;
    }
    :where(li, ul) {
        list-style: none;
    }
}

.fl-nav__list {
    display: flex;
    gap: var(--_nav-item-spacing);
    padding-inline: var(--_nav-item-spacing);
}

.fl-nav__item {
    color: var(--tertiary-color);
    font-family: var(--header-font);
    font-weight: 700;

    &:not(:hover) {
        z-index: 1;
    }

    a:where(:not(.ctab)), li {
        font: inherit;
    }
}

.fl-nav__link-column {
    font-size: 1.25rem;
    --flow-space: var(--gutter);
    padding: 1rem;
}

@layer overrides { /* WHO THE FUCK ADDS A GLOBAL "a {text-decoration: none !important;}" im going to break my monitore */
    .fl-nav__link-column-link > a:hover {
        text-decoration: underline !important;
        text-decoration-color: var(--accent-color) !important;
        text-decoration-thickness: 2px !important;
    }
}

.fl-header__mobile-toggle {
    all: unset;
    display: none;
    font-size: 1.5em;
    cursor: pointer;
    color: inherit;

    & > * {
        width: 1lh;
        height: 1lh;
        vertical-align: center;
        fill: currentColor;
    }
}
.fl-nav {
    &:not([open]) + .fl-header__mobile-toggle > .icon-close,
    &[open] + .fl-header__mobile-toggle > .icon-open {
        display: none;
    }
}

.fl-header__content:has(.fl-nav__item--parent:hover) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fl-nav__sub-list-wrapper {
    container: nav-sub-list / inline-size;
}
.fl-nav__sub-list {
    --nsl-min-width: 240px;


    /* scuffed calc the height to be aspect ratio 1 for 4 columns */
    --nsl-container-width: calc(100cqi - 2rem); /* padding */
	--nsl-row-height: calc((var(--nsl-container-width) - (3 * var(--gutter))) / 4);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--nsl-min-width), 1fr));
    grid-auto-rows: max(var(--nsl-min-width), var(--nsl-row-height));
    gap: var(--gutter);
}

/* better heights with 2/3 columns */
.fl-nav__sub-item .img-link {
    height: 100%;

    .img-container {
        aspect-ratio: auto;
    }
}

.fl-nav__item:not(:hover),
:is(.fl-header__logo, .fl-header__button) { /* make hoverable even with nav open*/
    z-index: 1;
}

@media (width > 1050px) and (hover: hover) {

    .fl-nav__item {

        & > :is(a, span) {
            position: relative;
            z-index: 1;
            display: inline-block;
            min-width: 80px; /* bishmillah that evil cursive font*/
            text-align: center;
        }

        &:hover > :is(a, span) {
            font-family: var(--fancy-font);
            color: var(--accent-color);
            font-weight: 400;
            font-size: 1.55em;
            line-height: 0;
        }
    }

    .fl-nav__list {
        align-items: center;
    }

    .fl-nav__sub-list {
        padding-inline: var(--_header-content-padding);
        padding-block-end: var(--_header-content-padding);
        border-bottom-left-radius: var(--radius-normal);
        border-bottom-right-radius: var(--radius-normal);
        
        background: var(--_header-bg);
        backdrop-filter: blur(10px);
    }


    .fl-nav__sub-list-wrapper {
        position: absolute;
        inset: 0;
        display: none;
        grid-template-rows: 100% 1fr;

        .fl-nav__item--parent:hover & {
            display: grid;
        }

        & > * {
            grid-row: 2;
        }
    }

}

@media (width <= 1050px), (hover: none) { 
    .fl-header__mobile-toggle {
        display: initial;
    }
    .fl-nav__sub-list-wrapper, .fl-nav:not([open]) {
        display: none;
    }

    .fl-nav__item  {
        & > :is(span, a) {
            font-family: var(--header-font);
            font-size: 2rem;
            padding-block: 1rem;
        }

    }

    .fl-nav[open] {
        position: absolute;
        inset: 0;
        top: 100%;

        display: flex;
        flex-direction: column;
        height: fit-content;
        background: var(--_header-bg);
        padding: var(--_header-content-padding);
        border-bottom-left-radius: var(--radius-normal);
        border-bottom-right-radius: var(--radius-normal);
        gap: var(--gutter);
        
        .fl-header:has(&) {
            --header-bg: white;
        }

        .fl-header__content:has(&) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .fl-nav__list {
            flex-direction: column;
        }
        .fl-nav__sub-list-wrapper {
            display: grid;
            position: relative;
        }
    }

    .fl-nav__item--parent {
        cursor: pointer;
        display: grid;
        grid-template-columns: 1fr 1fr;

        &::after {
            content: "";
            display: block;
            width: 2rem;
            height: 2rem;
            background-image: var(--icon-chevron-up);

            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            rotate: -180deg;
            transition: rotate .2s;
            align-self: center;
        }

        &[open]::after {
            rotate: 0deg;
        }

        & > .fl-nav__sub-list-wrapper {
            grid-column: span 2;
        }
    }

    .fl-nav__sub-list-wrapper {
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows .2s;

        .fl-nav__item--parent[open] > & {
            grid-template-rows: 1fr;
        }

        & > .fl-nav__sub-list {
            min-height: 0;
        }
        
    }
}