/* =========================
   Controls
========================= */

:root {
    
--mobile-breakpoint: 1000px; /* Tells JS when to move menu to mobile config. Also change in media query. */
    
--navbar-background-color: #000; /* The color the nav bar will be */
--navbar-link-text-color: var(--white); /* Level 1 Link Text */
--navbar-link-hover-background-color: var(--orange); /* Level 1 Link Background on Hover */
--navbar-link-hover-text-color: var(--white); /* Level 1 Link Text  on Hover*/
--dropdown-menu-border-radius: 20px;
--dropdown-menu-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.05);

    /* These are auto-calculated. They can be replaced easily if desired. */
--level-2-link-text-color:var(--navbar-link-text-color);
--level-2-link-background-color:hsl(from var(--navbar-background-color) h s calc(l + 10));
--level-2-link-hover-text-color:var(--navbar-link-hover-text-color);
--level-2-link-hover-background-color:var(--navbar-link-hover-background-color);

--level-3-link-text-color: var(--navbar-link-text-color);
--level-3-link-background-color:hsl(from var(--navbar-background-color) h s calc(l + 20));
--level-3-link-hover-text-color:var(--navbar-link-hover-text-color);
--level-3-link-hover-background-color:var(--navbar-link-hover-background-color);
}

/* =========================
   Base
========================= */

* {margin: 0;padding: 0;box-sizing: border-box; transition: 0.3s ease all;}
a {text-decoration: none;color: inherit;}
.mobile-nav {display: none;}


/* =========================
   Main Menu Level 1
========================= */

#site-menu {
    background: rgba(0,0,0,0.15); backdrop-filter: blur(10px);
    color: var(--navbar-link-text-color);
    transition: 0.3s ease all;
/*    box-shadow: var(--dropdown-menu-box-shadow);*/
    padding: 3px 0;
    z-index: 999;
}

#site-menu > ul {
    display: flex;
    list-style: none;
}

#site-menu > ul li {
    position: relative;
    list-style: none;
}

#site-menu > ul li a {
    display: block;
    padding: 1rem 1.25rem;
    color: var(--navbar-link-text-color);
    background: var(--navbar-link-background-color);
}

#site-menu > ul li a:hover {
    background: var(--navbar-link-hover-background-color) ;
    color: var(--navbar-link-hover-text-color);
    margin-left: 5px;
}

/* =========================
   Main Menu Level 2
========================= */

#site-menu ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    color: var(--level-2-link-text-color);
    background: var(--level-2-link-background-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity .25s,
        transform .25s,
        visibility .25s;
    z-index: 50;
    border-radius: var(--dropdown-menu-border-radius);
    box-shadow: var(--dropdown-menu-box-shadow);
}
#site-menu ul ul li a:hover {
    color: var(--level-2-link-hover-text-color);
    background: var(--level-2-link-hover-background-color);
}
#site-menu * a:first-child {border-radius: var(--dropdown-menu-border-radius);}
#site-menu > ul > li:nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
}
/* =========================
   Main Menu Level 3
========================= */

#site-menu ul ul ul {
    top: 0;
    left: auto;
    right: 100%;
    background: var(--level-3-link-background-color);
}
#site-menu ul ul ul li a:hover {
    color: var(--level-3-link-hover-text-color);
    background: var(--level-3-link-hover-background-color);
}

#site-menu li.is-open > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================
   Dropdown Indicator ▼
========================= */

.has-submenu > a {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.has-submenu > a::after {
    content: '';
    display: inline-block;
    margin-left: 15px;
    width: 10px;
    height: 6px;
    color: currentColor;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform .25s;
}

.has-submenu.is-open > a::after {
    transform: rotate(180deg);
}

.has-submenu:has(> ul:hover) > a {
    background-color: var(--navbar-link-hover-background-color);
    color: var(--navbar-link-hover-text-color);
}

/* =========================
   Mobile
========================= */

@media (max-width: 1000px) /* IF CHANGED, REFLECT IN ROOT ABOVE  */{

    .menu-trigger {
        display: flex;
        background: transparent;
        color: var(--navbar-link-text-color);
        cursor: pointer;
        font-size: 1rem;
    }

    .mobile-nav {
        display: flex;
        justify-content: space-between;
/*        background: var(--navbar-background-color);*/
        align-items: center;
        gap: 50px;
/*        box-shadow: var(--dropdown-menu-box-shadow);*/
    }
    .header-logo {
        display: block;
        height: 75px;
        max-height: 100px;
        width: auto;
        object-fit: contain;
        min-width: 0;
        padding: 10px;
    }

    #site-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .3s ease, opacity .3s ease;
    }

    #site-menu.menu-visible {
        max-height: none;
        opacity: 1;
    }

    #site-menu > ul {
        flex-direction: column;
    }
    
    #site-menu ul li {width: 100%;}

    #site-menu ul ul,
    #site-menu ul ul ul {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        min-width: auto;
        border-radius: none;
        box-shadow: none;
    }

    #site-menu li.is-open > ul {
        max-height: none;
    }

    #site-menu a {
        padding: 1rem;
    }

    #site-menu ul ul a {
        padding-left: 2rem;
    }

    #site-menu ul ul ul a {
        padding-left: 3rem;
    }
}