/**
 * File: header-secondary-menu.css
 * Purpose: Styles for a secondary navigation menu with dropdown submenus.
 * Usage: Currently appears unused; may be a legacy or optional feature.
 * Dependencies: Requires `.secondary-menu-container` structure and global CSS variables.
 *
 * Notes:
 * - Adds styled dropdown behavior with arrow indicator on hover
 * - Submenu positioning is right-aligned and offset slightly downward
 * - Includes hover color change and strong font styling
 * - Dropdown arrow created with pure CSS pseudo-element (`:before`)
 *
 * Recommendation:
 * - Check if any templates or components use `.secondary-menu-container`
 * - If unused, consider archiving or commenting out for clarity
 */

/* ---------------------------- */
/* ----- Scoped Variables ----- */
/* ---------------------------- */

.secondary-menu-container{
    --top-nav-sub-bg-color: var(--tan-lighter);
    --top-nav-sub-border-top-color: var(--brand-yellow);
    --top-nav-sub-border-color: var(--tan-medium);
    --top-nav-sub-arrow-color: var(--brand-yellow);
    --top-nav-sub-link-color: var(--brown-dark);
    --top-nav-sub-link-hover-color: var(--brand-orange-medium);
    --top-nav-sub-link-underline-color: var(--brand-yellow-trans-full);
    --top-nav-sub-link-hover-underline-color: var(--brand-yellow-trans-none);
    --top-nav-sub-box-shadow-color: var(--black-trans-highest);
}

/* ---------------------------- */

/* Ensure all submenus are initially hidden */

/* Show submenus on hover */
.secondary-menu-container > ul li:hover > .sub-menu{
    display: flex;
}

.secondary-menu-container > ul li:hover > .sub-menu:before{
    opacity: 1;
}

.secondary-menu-container > ul .sub-menu a {
    font-weight:700;
    color:var(--top-nav-sub-link-color)!important;
}

.secondary-menu-container > ul .sub-menu a:hover {
    color:var(--top-nav-sub-link-hover-color);
}

.secondary-menu-container > ul .sub-menu {
    flex-direction:column;
    display: none;
    position: absolute;
    right: 20px;
    top: calc(3.1em + var(--top-offset, 0px));
    background: var(--top-nav-sub-bg-color);
    padding: 5px 15px 25px 15px;
    z-index: 1000;
    border-left: 1px solid var(--top-nav-sub-border-color);
    border-right: 1px solid var(--top-nav-sub-border-color);
    border-top: 3px solid var(--top-nav-sub-border-top-color);
    border-bottom: 4px solid var(--top-nav-sub-border-color);
}

.secondary-menu-container > ul .sub-menu li{
    padding: 0.5em 0 0 0;
}

/* submenu arrow effect */
.secondary-menu-container > ul .sub-menu:before
{
    content: '';
    position: absolute;
    top: -8px; /* This likely does not need adjusting */
    left: calc(50% - 8px);
    margin: 0 auto;
    width: 0;
    height: 0;
    opacity: 0;
    border-bottom: 8px solid var(--top-nav-sub-arrow-color);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    transition: opacity 80ms linear;
}