/**
 * File: header-main-nav-desktop.css
 * Purpose: Styles for the desktop primary navigation menu
 * Usage: Applies to `.main-nav` and its child `.primary-menu-container`
 * Dependencies: Controlled visibility via `header-visibility-helper.css`
 *
 * Notes:
 * - Ensures horizontal layout with uppercase links
 * - Responsive visibility handled externally (not in this file)
 * - Uses CSS variables for theming
 *
 * Key Elements:
 * - `.main-nav` — main container for desktop navigation
 * - `.primary-menu-container` — holds the unordered menu list
 * - `.primary-menu` — inner flex alignment (if used)
 * - Individual link styling and hover behavior
 */


 /* --- Scoped Variables --- */
.main-nav{
    --main-nav-bg-color: var(--tan-lighter);
    --main-nav-border-color: var(--tan-medium);
    --main-nav-link-color: var(--brown-dark);
    --main-nav-link-hover-color: var(--brand-orange-medium);
    --main-nav-link-underline-color: var(--brand-yellow-trans-full);
    --main-nav-link-hover-underline-color: var(--brand-yellow-trans-none);
}

/* --- Main Navigation Container --- */
.main-nav{
    padding: 0 3em;
    flex-wrap: nowrap !important;
    background-color: var(--main-nav-bg-color);
    border-width: 1px 0!important;
    border: solid var(--main-nav-border-color);
}

/* --- Menu Container Layout --- */
.main-nav > .primary-menu-container {
    width:100%;
}

/* --- Menu List Layout --- */
.main-nav > .primary-menu-container > ul, 
.main-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
    flex-direction: row;
}

.main-nav > .primary-menu-container > ul {
    width: 100%;
    justify-content: space-between;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.80em;
    letter-spacing: 1px;
    line-height: 2em;
}

/* --- Individual Link Styling --- */
.main-nav > .primary-menu-container > ul a
    {
    color: var(--main-nav-link-color);
    font-weight: 600;
    line-height: 3.5em;
    text-decoration: underline solid var(--main-nav-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 6px !important;
}

/* --- Link Hover Effects --- */
.main-nav > .primary-menu-container > ul a:hover,
.main-nav > .primary-menu-container > ul li > ul a:hover
{
    font-weight: 800;
    color: var(--main-nav-link-hover-color);
    text-decoration: underline solid var(--main-nav-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 6px !important;
}

/* --- Optional Inner Flex Wrapper --- */
.primary-menu{
    display: flex;
    justify-content: space-between;
}