/* Navigation Menu Styles */
/* ============================================ */

/* Main Navigation Container */
.main-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
    animation: fadeInUp 0.8s ease-out;
}

.nav-logo {
    flex-shrink: 0;
}

.nav-logo img {
    max-width: 160px;
    height: auto;
    filter: drop-shadow(0 10px 25px rgba(212, 165, 116, 0.4))
            drop-shadow(0 0 15px rgba(77, 217, 232, 0.3));
}

.nav-menu-container {
    flex: 1;
    position: relative;
    background: linear-gradient(145deg, rgba(26, 31, 46, 0.95), rgba(13, 17, 23, 0.95));
    border: 3px solid var(--gold-dark);
    padding: 0;
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(212, 165, 116, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Ornate corners for nav */
.nav-corner {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 3px solid var(--gold);
    pointer-events: none;
}

.nav-corner::before,
.nav-corner::after {
    content: '';
    position: absolute;
    background: var(--gold-light);
    box-shadow: 0 0 10px var(--gold);
}

.nav-corner.nav-tl {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
}

.nav-corner.nav-tl::before {
    width: 18px;
    height: 3px;
    top: -3px;
    left: -3px;
}

.nav-corner.nav-tl::after {
    width: 3px;
    height: 18px;
    top: -3px;
    left: -3px;
}

.nav-corner.nav-tr {
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
}

.nav-corner.nav-tr::before {
    width: 18px;
    height: 3px;
    top: -3px;
    right: -3px;
}

.nav-corner.nav-tr::after {
    width: 3px;
    height: 18px;
    top: -3px;
    right: -3px;
}

.nav-corner.nav-bl {
    bottom: -3px;
    left: -3px;
    border-right: none;
    border-top: none;
}

.nav-corner.nav-bl::before {
    width: 18px;
    height: 3px;
    bottom: -3px;
    left: -3px;
}

.nav-corner.nav-bl::after {
    width: 3px;
    height: 18px;
    bottom: -3px;
    left: -3px;
}

.nav-corner.nav-br {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
}

.nav-corner.nav-br::before {
    width: 18px;
    height: 3px;
    bottom: -3px;
    right: -3px;
}

.nav-corner.nav-br::after {
    width: 3px;
    height: 18px;
    bottom: -3px;
    right: -3px;
}

/* Edge decorations for nav */
.nav-edge-decoration {
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--gold-light);
    transform: rotate(45deg);
    box-shadow: 0 0 8px var(--gold);
    animation: edgePulse 2s ease-in-out infinite;
}

.nav-edge-decoration.nav-top {
    top: -3px;
    left: 50%;
    animation-delay: 0s;
}

.nav-edge-decoration.nav-bottom {
    bottom: -3px;
    left: 50%;
    animation-delay: 1s;
}

/* Navigation menu */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px 20px;
}

/* Menu items */
.menu-item {
    position: relative;
}

.menu-item > a {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-light);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 14px;
    transition: all 0.3s ease;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.menu-item > a::before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: translateX(-50%);
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--gold);
}

.menu-item > a:hover {
    color: #fff;
    text-shadow: 0 0 15px rgba(212, 165, 116, 0.8);
}

.menu-item > a:hover::before {
    width: 100%;
}

/* Dropdown indicator */
.has-dropdown > a::after {
    content: '▾';
    margin-left: 5px;
    font-size: 0.8em;
}

/* Invisible buffer on the dropdown itself that extends upward
   into the visual gap so the dropdown remains hovered when the
   mouse crosses the gap. Implemented on the dropdown for
   consistent behavior regardless of parent size. Disabled on mobile. */
.dropdown-menu::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(-1 * var(--dropdown-gap));
    width: 100%;
    height: var(--dropdown-gap);
    pointer-events: auto;
    background: transparent;
    z-index: 1001; /* above dropdown background but below menu items if needed */
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    /* slightly overlap parent to avoid mouse-gap when moving into the menu */
    top: calc(100% - 8px);
    left: 0;
    min-width: 300px;
    background: linear-gradient(145deg, rgba(26, 31, 46, 0.98), rgba(13, 17, 23, 0.98));
    border: 2px solid var(--gold-dark);
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(212, 165, 116, 0.05);
    z-index: 1000;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    box-sizing: border-box;
    transition: transform 0.2s ease, color 0.2s ease, padding 0.2s ease;
    position: relative;
}

.dropdown-menu a:hover {
    background: linear-gradient(90deg, rgba(212, 165, 116, 0.15), transparent);
}

.dropdown-menu a:hover::before {
    opacity: 1;
}

/* User Account Menu */
.user-account-menu {
    align-items: center;
    position: relative;
    border-left: 1px solid var(--gold-dark);
    order: 1; /* Ensure it appears after main menu items */
}

.user-menu-item {
    position: relative;
    width: auto;
    display: inline-block;
    align-self: center;
}

.user-account-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-light);
    text-decoration: none;
    padding: 10px 14px;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.user-icon {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 8px var(--gold));
}

.user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-account-link:hover {
    color: #fff;
    text-shadow: 0 0 15px rgba(212, 165, 116, 0.8);
}

.user-account-link:hover .user-icon {
    filter: drop-shadow(0 0 15px var(--gold-light));
}

.user-dropdown {
    min-width: 220px;
    left: auto;
    right: 0;
    top: calc(100% - 28px) !important;
    transform: translateX(0) translateY(-20px);
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.9), rgba(13, 17, 23, 0.9));
    border: 2px solid var(--gold);
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    z-index: 1002;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px var(--gold);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu-toggle:hover {
    border-color: var(--gold-light);
    box-shadow: 0 5px 25px rgba(212, 165, 116, 0.5);
}

.mobile-menu-toggle:hover span {
    background: var(--gold-light);
}

/* Mobile slide-out menu */
.nav-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.nav-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Desktop-specific styles */
@media (min-width: 993px) {
    .nav-menu {
        flex: 1;
        flex-direction: row !important;
        padding: 15px 20px !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: visible !important;
        width: auto !important;
    }

    .menu-item {
        width: auto !important;
        border-bottom: none !important;
        overflow: visible !important;
    }

    .menu-item > a {
        padding: 20px 18px !important;
        font-size: 1rem !important;
    }
    
    /* Force desktop dropdown styles */
    .has-dropdown .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        max-height: none !important;
        overflow: visible !important;
        /* use defined visual gap; dropdown will sit below parent visually */
        top: calc(100% + var(--dropdown-gap)) !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    .has-dropdown:hover .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .user-menu-item:hover .user-dropdown {
        opacity: 1;
        visibility: visible;
        top: 100%;
    }
}

/* Mobile-specific styles */
@media (max-width: 992px) {
    .main-navigation {
        position: relative;
        justify-content: space-between; /* Logo on left, hamburger on right */
    }

    .nav-logo {
        display: block; /* Keep logo visible on mobile */
    }

    .nav-menu-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch;
    }

    .nav-logo img {
        max-width: 120px;
    }

    /* Show hamburger button on desktop in the nav-menu-container */
    .nav-menu-container .mobile-menu-toggle {
        display: none;
    }

    /* Show hamburger outside nav container on desktop */
    .main-navigation > .mobile-menu-toggle {
        display: flex;
        position: relative;
        margin-left: auto; /* Push to right side */
    }

    .nav-menu-overlay {
        display: block;
    }

    .nav-menu-container {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        z-index: 1000;
        transition: right 0.4s ease;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .nav-menu-container.active {
        right: 0;
    }

    /* Position close button in top-right of flyout */
    .nav-menu-container.active .mobile-menu-toggle {
        display: flex;
        position: fixed;
        top: 20px;
        right: 20px;
    }

    /* Keep ornate corners for mobile menu */
    .nav-corner {
        width: 40px;
        height: 40px;
    }

    .nav-corner::before {
        width: 15px;
        height: 3px;
    }

    .nav-corner::after {
        width: 3px;
        height: 15px;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: 20px 0 0 0;
        align-items: stretch;
        width: 100%;
        overflow-x: hidden;
    }

    .menu-item {
        width: 100%;
        border-bottom: 1px solid rgba(212, 165, 116, 0.1);
        overflow: hidden;
    }

    .menu-item:last-child {
        border-bottom: none;
    }

    .menu-item > a {
        padding: 15px 25px;
        font-size: 1.1rem;
    }

    .menu-item > a::before {
        display: none;
    }

    /* Mobile dropdowns */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        border-top: 1px solid rgba(212, 165, 116, 0.2);
        border-radius: 0;
        background: rgba(13, 17, 23, 0.5);
        max-height: 0;
        overflow: hidden;
        transition: none;
        padding: 0;
        box-shadow: none;
    }

    .has-dropdown.active .dropdown-menu {
        max-height: 300px;
        padding: 8px 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .has-dropdown > a::after {
        float: right;
        transition: transform 0.3s ease;
    }

    .has-dropdown.active > a::after {
        transform: rotate(180deg);
    }

    .dropdown-menu a {
        padding: 12px 25px 12px 45px;
        font-size: 1rem;
    }

    .dropdown-menu a:hover {
        padding-left: 50px;
    }

    /* User menu adjustments for mobile - positioned at top */
    .user-account-menu {
        width: 100%;
        border-bottom: 1px solid rgba(212, 165, 116, 0.2);
        margin-bottom: 10px;
        padding-bottom: 10px;
        padding-top: 160px; /* Add top padding as requested */
        order: -1; /* Ensure it appears first in mobile layout */
    }

    .user-menu-item {
        width: 100%;
    }

    .user-account-link {
        width: 100%;
        justify-content: center;
    }

    .user-dropdown {
        position: static;
        border-top: 1px solid rgba(212, 165, 116, 0.2);
    }
}

/* Responsive transitions */
@media (max-width: 992px) {
    .has-dropdown .dropdown-menu {
        transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.1s ease, visibility 0.1s ease !important;
    }
}

/* Aggressive fix: Hide dropdowns during any transition period */
.nav-menu-container.transitioning .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: none !important;
    overflow: visible !important;
    top: calc(100% + var(--dropdown-gap)) !important;
    transition: none !important;
    display: none !important; /* Force hide completely */
}

/* Additional fix: Hide all dropdowns during window resize */
.nav-menu-container.resizing .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
    top: calc(100% + var(--dropdown-gap)) !important;
    transition: none !important;
    display: none !important; /* Force hide completely */
}

/* Ensure dropdowns are hidden during media query transitions */
@media (max-width: 992px) {
    .nav-menu-container .dropdown-menu {
        display: none !important; /* Hide all dropdowns on mobile by default */
    }
    
    .nav-menu-container .has-dropdown.active .dropdown-menu {
        display: block !important; /* Only show when explicitly active */
    }
    /* disable the hover buffer on mobile where dropdowns are static */
    .dropdown-menu::before {
        display: none;
    }
}

/* Keyframe animations */
@keyframes fadeInUp {
    0% { opacity: 0; transform: scale(0.8) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes edgePulse {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 10px var(--gold); }
    50% { opacity: 1; box-shadow: 0 0 20px var(--gold); }
}