/**
 * @file menu_top.css
 * @version 1.0.0
 * @date 2025-11-02
 * @description Top navigation menu bar styling and item layout
 * @status CURRENT
 */

top-menu, top-menu * { user-select: none }

top-menu {
    position: relative;
    display: block;
    width: 100%; height: 5rem;
    --transition-duration: 0.4s;
    background-color: rgba(0,0,0,0.7);
    pointer-events: all;
    display: flex;
    flex-direction: row;
    border-radius: 1rem;
}

top-menu top-menu-item {
    position: relative;
    display: block;
    width: auto; height: auto;
    background-color: transparent;
    transition: opacity var(--transition-duration);
    cursor: pointer;
}


top-menu top-menu-item top-menu-item-title {
    position: relative;
    display: block;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.8rem;
    padding: 1.6rem 2rem;
    padding-right: 5rem;
    white-space: nowrap;
    pointer-events: none;
    background-color: rgba(255,255,255,0.07);
    transition: background-color var(--transition-duration);
    border-left: 6px solid transparent;
    color: #ffffff;
}

top-menu top-menu-item:first-child  top-menu-item-title { border-radius: var(--border-radius) 0 0 var(--border-radius);  }
top-menu top-menu-item:last-child  top-menu-item-title { border-radius: 0 var(--border-radius) var(--border-radius) 0;  }

top-menu top-menu-item > top-menu-item-title:hover,
top-menu top-menu-item > top-menu-item-title:focus  {
    /* background-color: rgba(255,255,255,0.3); */
    outline: none;
}

top-menu top-menu-item > top-menu-item-title::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    right: 2.5rem; top: 50%; width: 1.2rem; height: 1.2rem;
    border-radius: var(--border-radius);
    border: 1px solid #ffffff;
    background-color: rgba(255,255,255,0.0);
    transform: translate(50%,-50%) scale(0.5);
    transition: transform var(--transition-duration), background-color var(--transition-duration);
}

top-menu top-menu-item:hover > top-menu-item-title::after,
top-menu top-menu-item.open > top-menu-item-title::after {
    transform: translate(50%,-50%) scale(1);
    background-color: rgba(255,255,255,1);
}

top-menu top-menu-item > top-menu-item-title::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    right: 2.5rem; top: 50%; width: 1.2rem; height: 1.2rem;
    border-radius: var(--border-radius);
    border: 1px solid #ffffff;
    background-color: rgba(255,255,255,0.0);
    transform: translate(50%,-50%) scale(0.5);
    transition: transform var(--transition-duration), background-color var(--transition-duration);
}

/* if has and active item */
top-menu top-menu-item:has(acc-menu-item.active) > top-menu-item-title::after  {
    transform: translate(50%,-50%) scale(1);
    background-color: rgba(255,255,255,1);
}

top-menu top-menu-item top-menu-item-menu {
    position: absolute;
    left: 0; top: 100%; min-width: 100%; height: auto;
    transition: transform var(--transition-duration), opacity var(--transition-duration);
    /* transform-origin: 3rem 0; */
    transform-origin: top;
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none;
}

top-menu top-menu-item:last-child top-menu-item-menu {
    transform-origin: calc(100% - 3rem) 0;
    left: auto; right: 0; 
}

/* top-menu top-menu-item.hover top-menu-item-menu,  */
top-menu top-menu-item:hover top-menu-item-menu {
/* top-menu top-menu-item top-menu-item-menu { */
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}


top-menu top-menu-item top-menu-item-menu acc-menu::before  {
    content: '';
    position: absolute;
    left: 50%; bottom: 100%; transform: translate(-50%,0);
    width: 0px; height: 0px;
    border-style: solid;
    border-width:  0 7px 10px 7px;
    border-color: transparent transparent rgba(0,0,0,0.7) transparent;
}

top-menu top-menu-item:last-child top-menu-item-menu acc-menu::before  {
    /* left: auto; right: 3rem; */
}











/* accordian menu styles */

top-menu acc-menu, top-menu acc-menu * { user-select: none }

top-menu acc-menu {
    position: relative;
    display: block;
    width: 100%; height: auto;
    --transition-duration: 0.4s;
    background-color: rgba(0,0,0,0.0);
    margin-top: 1rem;
    /* pointer-events: all; */
}

top-menu acc-menu acc-menu-group {
    position: relative;
    display: block;
    width: 100%; height: auto;
    background-color: transparent;
    overflow: hidden;
    transition: opacity var(--transition-duration);
}

top-menu acc-menu acc-menu-group.disabled {
    opacity: 0.7;
    pointer-events: none;
}

top-menu acc-menu acc-menu-group > acc-menu-item-title {
    position: relative;
    display: block;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.8rem;
    padding: 1.6rem 2rem;
    padding-right: 5rem;
    background-color: rgba(255,255,255,0.07);
    transition: background-color var(--transition-duration);
    border-left: 6px solid transparent;
    color: #ffffff;
    cursor: pointer;
}

top-menu acc-menu acc-menu-group:not(:last-child) > acc-menu-item-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

top-menu acc-menu acc-menu-group > acc-menu-item-title:hover,
top-menu acc-menu acc-menu-group > acc-menu-item-title:focus  {
    background-color: rgba(255,255,255,0.3);
    outline: none;
}
top-menu acc-menu acc-menu-group > acc-menu-item-title::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    right: 3rem; top: 50%; width: 1.5rem; height: 1.5rem;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: translate(50%,-50%) rotate(-45deg);
    transition: transform var(--transition-duration);
}

top-menu acc-menu acc-menu-group.open > acc-menu-item-title::after {
    transform: translate(50%,-1.06rem) rotate(45deg);
}

top-menu acc-menu acc-menu-item.visited > acc-menu-item-title::before,
top-menu acc-menu acc-menu-group.visited > acc-menu-item-title::before {
    content: '';
    position: absolute;
    left: 0.2rem; top: 50%;
    box-sizing: border-box;
    width: 1.2rem; height: 0.8rem;
    border: 0px solid rgba(255,255,255,0.8);
    border-width: 0 0 2px 3px;
    transform: translate(0,-75%) rotate(-45deg);
}


top-menu acc-menu > acc-menu-item-children {
    display: block;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 5px solid transparent;
    background-color: rgba(0,0,0,0.7);
}

top-menu acc-menu acc-menu-group > acc-menu-item-children {
    display: block;
    box-sizing: border-box;
    overflow: auto;
    /* border-bottom: 1px solid #a2a2a2; */
    padding-left: 3rem;
    transition: opacity var(--transition-duration), transform var(--transition-duration);
    opacity: 0;
    transform: scale(0.9);
    transform-origin: left top;
    /* transition-delay: 0.01s; */
}

top-menu acc-menu acc-menu-group.open > acc-menu-item-children {
    opacity: 1;
    transform: scale(1);
    /* transition-delay: 0.0s; */
}



top-menu acc-menu acc-menu-item > acc-menu-item-title {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.4rem;
    padding: 1rem 1rem 1rem 1rem;
    background-color: rgba(255,255,255,0.0);
 
    transition: background-color var(--transition-duration), color var(--transition-duration);
    color: #ffffff;
    cursor: pointer;
}

top-menu acc-menu acc-menu-item > acc-menu-item-title span-lang {
    display: block;
    width: 100%;
    text-align: center;
}

top-menu acc-menu acc-menu-item:not(:last-child) > acc-menu-item-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

top-menu acc-menu acc-menu-item > acc-menu-item-title:hover,
top-menu acc-menu acc-menu-item > acc-menu-item-title:focus {
    background-color: rgba(255,255,255,0.1);
    outline: none;
}

top-menu acc-menu acc-menu-item.active > acc-menu-item-title {
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    outline: none;
}