/* ==========================================================================
   Navigation
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Primary nav — desktop horizontal                                             */
/* -------------------------------------------------------------------------- */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.site-nav__item {
    position: relative;
}

/* Nav link tile — targets both WP-generated <a> tags and fallback .site-nav__link class */
.site-nav__list li a,
.site-nav__link {
    display: inline-flex !important;
    align-items: center;
    padding: var(--space-2) var(--space-4) !important;
    font-family: var(--font-heading) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: var(--color-stone-mid) !important;
    text-decoration: none !important;
    background: rgba(42, 42, 34, 0.6) !important;
    border: 1px solid var(--color-olive-deep) !important;
    border-radius: var(--radius-base) !important;
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
    white-space: nowrap;
    position: relative;
}

.site-nav__list li a:hover,
.site-nav__link:hover {
    color: var(--color-parchment) !important;
    background: var(--color-vault) !important;
    border-color: var(--color-olive-mid) !important;
}

.site-nav__list li.current-menu-item > a,
.site-nav__list li.current-page-ancestor > a,
.site-nav__item.current-menu-item .site-nav__link,
.site-nav__item.current-page-ancestor .site-nav__link {
    color: var(--color-parchment) !important;
    background: var(--color-vault) !important;
    border-color: var(--color-olive-mid) !important;
}

/* Dropdown chevron */
.site-nav__link .nav-chevron {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.site-nav__item:hover .nav-chevron,
.site-nav__item.submenu-open .nav-chevron {
    transform: rotate(180deg);
}

/* -------------------------------------------------------------------------- */
/* Dropdown submenu                                                             */
/* -------------------------------------------------------------------------- */
.site-nav__submenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--color-vault);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility var(--transition-base);
    z-index: var(--z-dropdown);
    animation: none;
}

.site-nav__item:hover .site-nav__submenu,
.site-nav__item.submenu-open .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav__submenu-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.site-nav__submenu-link:hover {
    background: var(--color-vault-raised);
    color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* Mobile overlay nav                                                           */
/* -------------------------------------------------------------------------- */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, var(--color-purple-abyss) 0%, var(--color-vault) 60%, var(--color-obsidian) 100%);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
    /* Entablature top rule — matches the site header */
    box-shadow:
        inset 0 3px 0 var(--color-gold),
        inset 0 5px 0 var(--color-olive-deep);
}

.mobile-nav-overlay.is-open {
    transform: translateX(0);
}

/* -------------------------------------------------------------------------- */
/* Mobile nav — header row                                                      */
/* -------------------------------------------------------------------------- */
.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    /* Double-rule separator echoing the site header bottom border */
    border-bottom: none;
    box-shadow:
        0 1px 0 var(--color-gold),
        0 3px 0 var(--color-olive-deep);
}

.mobile-nav__close {
    width: 40px;
    height: 40px;
    background: rgba(42, 42, 34, 0.5);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-base);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.mobile-nav__close:hover {
    background: var(--color-vault-raised);
    border-color: var(--color-gold);
    color: var(--color-parchment);
}

/* -------------------------------------------------------------------------- */
/* Mobile nav — link list                                                        */
/* WP generates plain <a> tags inside <li> so we target those directly.        */
/* -------------------------------------------------------------------------- */
.mobile-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Target both WP-generated <a> tags and any explicit .mobile-nav__link class */
.mobile-nav__list li > a,
.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--color-stone-mid);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative;
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        padding-left var(--transition-fast);
}

/* Gold left-edge accent on hover — refined museum touch */
.mobile-nav__list li > a::before,
.mobile-nav__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: var(--color-gold);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.mobile-nav__list li > a:hover,
.mobile-nav__list li.current-menu-item > a,
.mobile-nav__link:hover {
    color: var(--color-parchment);
    background: rgba(42, 42, 34, 0.4);
    padding-left: var(--space-5);
}

.mobile-nav__list li > a:hover::before,
.mobile-nav__list li.current-menu-item > a::before,
.mobile-nav__link:hover::before {
    opacity: 1;
}

/* Active / current page — gold tint */
.mobile-nav__list li.current-menu-item > a {
    color: var(--color-gold);
}

/* -------------------------------------------------------------------------- */
/* Mobile nav — utility buttons at the bottom                                   */
/* -------------------------------------------------------------------------- */
.mobile-nav__utilities {
    margin-top: auto;
    padding-top: var(--space-8);
    /* Subtle top divider */
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    gap: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* Desktop only / mobile only                                                   */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .site-nav { display: none; }
}

@media (min-width: 1025px) {
    .mobile-nav-overlay { display: none !important; }
    .nav-toggle         { display: none !important; }
}