/* Hamburger Menu Wrapper */
.menu-container {
     position: absolute;
     top: 0;
     right: 0;
     z-index: 1001;
     display: flex;
     justify-content: flex-end;
     width: 100%;
     max-inline-size: 1170px;
     margin: 0 auto;
     pointer-events: none;
     padding: 0;
     /* tighten up */
}

/* Hamburger Menu Box */
.topnav {
     pointer-events: auto;
     position: relative;
     display: inline-block;
     background-color: var(--secondary-color);
     width: auto;
     max-width: 150px;
     padding: 5px;
     text-align: center;
     z-index: 1002;
}

.topnav a {
     display: none;
     text-decoration: none;
}

.topnav a.icon {
     display: block;
}

.topnav.responsive {
     position: relative;
     width: 150px;
     /* fixed width of hamburger box */
     max-width: 150px;
     z-index: 1002;
     height: auto;
     float: right;
     box-sizing: border-box;
}

.topnav.responsive a {
     display: block;
     color: #ffff00;
     width: 100%;
     font-size: 1.2em;
     padding: 8px 0 0 10px;
     text-align: left;
     /* padding-left: 12px; */
     box-sizing: border-box;
     /* add this */
}

.topnav.responsive a:hover {
     color: #ffffff;
     text-decoration: none;
}

.topnav.responsive .icon {
     padding: 0px;
}

.topnav a i {
     margin-right: 0px;
}

/* Hamburger Icon Styling */
.line {
     width: 9px;
     height: 45px;
     background-color: var(--secondary-color);
     margin: 0px;
     border-radius: 2rem;
     display: inline-block;
     position: relative;
     overflow: hidden;
     transition: all 1.2s ease-in;
     border: 1px solid var(--font-color);
     box-sizing: border-box;
}

/* Style for broadcast tower icon in the menu */
.menu-icon-radio {
     color: red;
     font-size: 16px;
     transition: color 0.5s ease;
}

/* Change icon color on hover of parent link */
a:hover .menu-icon-radio {
     color: var(--font-color);
     /* white or custom font color */
}

.line::before {
     content: '';
     position: absolute;
     bottom: 0;
     width: 200%;
     height: calc(var(--level, 0) * 100%);
     background: linear-gradient(to top, green 50%, yellow 68%, red 82%, red 100%);
     transform-origin: bottom;
     transition: height 0.3s ease, background-color 0.3s ease;
}

.line .fill {
     position: absolute;
     bottom: 0;
     left: 0px;
     right: 0;
     height: 0%;
     background-color: green;
     transition: height 0.4s ease, background-color 0.4s ease;
     width: calc(100% + 4px);
}

/* Hover effect */
.icon:hover .line::before {
     transform: scaleY(var(--level));
}

/* Overlay for Submenu (container below the hamburger) */
.submenu-overlay {
     position: absolute;
     top: 45px;
     right: 10px;
     display: none;
     z-index: 1003;
     padding: 0;

}

/* Submenu container box */
.submenu-content {
     position: relative;
     width: 180px;
     /* increased from 145px */
     background-color: var(--neutral-color);
     border: 2px solid var(--highlight-color);
     border-radius: 10px;
     padding: 0;
     box-sizing: border-box;
}

/* Submenu Links */
.submenu-content a {
     display: block;
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     padding: 5px 8px;
     font-size: 0.75rem;
     color: var(--font-color);
     text-decoration: none;
     text-align: left;
     /* aligns text to the right */
}

.submenu-content a:hover {
     background-color: var(--highlight-color);
     color: var(--neutral-color);
}

/* Submenu Item Container (for inline stack) */
.submenu-item {
     position: relative;
     display: block;
     padding: 0;
     margin: 0;
}

/* Sub-submenu appears directly below the submenu item */
.sub-submenu {
     position: static;
     display: none;
     width: 100%;
     background-color: var(--neutral-color);
     border-top: 1px solid var(--highlight-color);
     box-sizing: border-box;
     padding: 0;
     margin: 0;
}

/* Sub-submenu links */
.sub-submenu a {
     padding-left: 1rem;
     font-size: 0.7rem;
     display: block;
     padding-top: 2px;
     padding-bottom: 2px;
     text-align: left;
     /* optional, for consistency */
}


/* Show sub-submenu on hover */
.submenu-item:hover .sub-submenu {
     display: block;
}

/* Responsive Fixes */
@media screen and (max-width: 768px) {
     .topnav {
          width: 100%;
     }

     .submenu-content {
          position: fixed;
          top: 60px;
          right: 10px;
          width: 180px;
          /* match the new width */
     }
}

.close-submenu-link {
     display: block;
     text-align: right;
     font-weight: bold;
     color: var(--highlight-color);
     border-top: 1px solid var(--highlight-color);
     padding: 6px 12px;
     cursor: pointer;
     font-size: 0.75rem;
}