:root {
    /* -- Menu -- */
    --fission-menu-width: 900px; /* 900 */
    --fission-menu-height: 45px; /*45*/
    --fission-menu-bg: linear-gradient(90deg, rgba(63, 93, 138, 1) 0%, rgba(26, 57, 105, 1) 100%);
    
    --fission-corner-radius: 4px;

    --fission-text-color: #dedede;
    --fission-font:          system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --fission-font-size:     1rem;

    --menu-transition:    140ms ease;

    --fission-menu-bg-hover: none; /* linear-gradient(90deg, rgba(63, 93, 138, 1) 0%, rgba(26, 57, 105, 1) 100%); */
    --fission-highlight-color: #171780;

    --fission-dropdown-bg: #555;
    --fission-dropdown-text: #efefef;
    --fission-dropdown-min-width: 250px;

    --fission-submenu-bg: #aaa;
    --fission-submenu-text: #fff;
}

nav.fission-menu { 
    background: var(--fission-menu-bg); 
    width: var(--fission-menu-width); 
    height: var(--fission-menu-height); 
    margin-left: auto;
    margin-right:auto; 
    display: block;
    box-sizing: border-box;
    border-radius: var(--fission-corner-radius);

    -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 16px 15px 12px rgba(0,0,0,0); 
    box-shadow: 0px 10px 13px -7px #000000, 0px 16px 15px 12px rgba(0,0,0,0);
}

nav.fission-menu ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0px;
    height: 100%;
    /*background-color: #00ff00;*/
}

nav.fission-menu ul li {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 3px;
    /*padding-bottom:5px;*/
}
nav.fission-menu ul li.fission-menu-right { margin-left: auto; }

.fission-menu-link {
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 0 15px;
    height: 100%;
    line-height: 1;
    color: var(--fission-text-color);
    text-decoration: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: var(--fission-font);
    font-size: var(--fission-font-size);
    white-space: nowrap;
    transition: background var(--menu-transition), border-color var(--menu-transition);
}
.fission-menu-link:hover {
    background: var(--fission-menu-bg-hover);
    border-bottom: 5px solid var(--fission-highlight-color);
}

.fission-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: var(--fission-dropdown-min-width);
    background: var(--fission-dropdown-bg);
    color: var(--fission-dropdown-text);
    border-radius: var(--fission-corner-radius);
    box-shadow: 5px;
    padding: 4px 0;
    z-index: 200;
}
nav.fission-menu li.is-open > .fission-menu-dropdown { display: block; }

.fission-menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px;
    color: var(--fission-dropdown-text);
    text-decoration: none;
    background: transparent;
    border: none;
    /*border-bottom: 1px solid #333;*/
    width: 100%;
    text-align: left;
    line-height: 1;
    cursor: pointer;
    font-family: var(--fission-font);
    font-size: var(--fission-font-size);
    white-space: nowrap;
}

.fission-menu-dropdown-item-submenu {
    position: relative;
    display: block;
}

.fission-menu-submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: var(--fission-dropdown-min-width);
    background: var(--fission-submenu-bg);
    color: var(--fission-submenu-text);
    border-radius: var(--fission-corner-radius);
    padding: 4px 0;
    z-index: 201;
}
nav.fission-menu .fission-menu-dropdown-item-submenu.is-open > .fission-menu-submenu { display: block; }

.fission-submenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px;
    color: var(--fission-submenu-text);
    text-decoration: none;
    background: transparent;
    border: none;
    /*border-bottom: 1px solid #333;*/
    width: 100%;
    text-align: left;
    line-height: 1;
    cursor: pointer;
    font-family: var(--fission-font);
    font-size: var(--fission-font-size);
    white-space: nowrap;

}
