/* ================================================================
   ProxiesVault shared hamburger menu
   Loaded on every page that has the standard nav. Uses the same theme
   variables as style.css (with fallbacks so a page that doesn't load
   style.css still renders correctly).
   ================================================================ */

/* ---- Hamburger button (lives inside .nav-actions) ---- */
.nav-actions .nav-hamburger { order: 99; } /* always the right-most item */

.nav-hamburger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, rgba(201, 168, 76, 0.14));
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.25s, background 0.25s, transform 0.2s;
}
.nav-hamburger:hover,
.nav-hamburger:focus-visible {
    border-color: var(--border-hover, rgba(201, 168, 76, 0.38));
    background: var(--bg-hover, rgba(201, 168, 76, 0.05));
    outline: none;
}
.nav-hamburger:focus-visible { box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.45); }
.nav-hamburger:active { transform: scale(0.95); }
.nav-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-light, #F0D078);
    transition: transform 0.3s, opacity 0.2s;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- The account drawer is now reached from the hamburger menu, so the
   separate "My Account" pill is taken out of sight. It is hidden visually
   rather than with display:none on purpose: account-drawer.js still toggles
   its display to show the logged-in state, and the menu reads that state. ---- */
#myAccountBtn {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

/* On phones the nav only has room for the brand and the hamburger. Login and
   Get Started move into the menu, where they are shown as large buttons. */
@media (max-width: 560px) {
    #navAuthLinks { display: none !important; }
}

/* ---- Slide-out menu ---- */
.pv-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 5, 10, 0.66);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 1090;
}
.pv-menu-overlay.open { opacity: 1; pointer-events: auto; }

.pv-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg-card, #0A1120);
    border-left: 1px solid var(--border, rgba(201, 168, 76, 0.14));
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s linear 0.32s;
    z-index: 1100;
    outline: none;
}
.pv-menu.open {
    transform: none;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s;
}

.pv-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pv-menu-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold, #C9A84C);
}
.pv-menu-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-sub, #A8B4D0);
    background: transparent;
    border: 1px solid var(--border-soft, rgba(168, 180, 208, 0.055));
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.pv-menu-close:hover,
.pv-menu-close:focus-visible {
    color: var(--gold-light, #F0D078);
    border-color: var(--border-hover, rgba(201, 168, 76, 0.38));
    outline: none;
}

/* Account area (buttons for visitors, wallet entry for customers) */
.pv-menu-account {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-soft, rgba(168, 180, 208, 0.055));
}
.pv-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.pv-menu-btn:active { transform: scale(0.98); }
.pv-menu-btn-gold {
    color: #080E1A;
    background: linear-gradient(135deg, var(--gold-pale, #FDF3D0), var(--gold-light, #F0D078) 45%, var(--gold, #C9A84C));
    border: 1px solid transparent;
}
.pv-menu-btn-ghost {
    color: var(--text, #EEF2FF);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, rgba(201, 168, 76, 0.14));
}
.pv-menu-btn-ghost:hover,
.pv-menu-btn-ghost:focus-visible {
    border-color: var(--border-hover, rgba(201, 168, 76, 0.38));
    background: var(--bg-hover, rgba(201, 168, 76, 0.05));
    outline: none;
}
.pv-menu-btn-gold:focus-visible { outline: 2px solid var(--gold-light, #F0D078); outline-offset: 2px; }
.pv-menu-signout {
    color: var(--text-sub, #A8B4D0);
    background: transparent;
    border: 1px solid var(--border-soft, rgba(168, 180, 208, 0.055));
    font-weight: 600;
    font-size: 0.82rem;
}

/* Site links */
.pv-menu-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.pv-menu-link {
    display: block;
    padding: 0.8rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-sub, #A8B4D0);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.pv-menu-link:hover,
.pv-menu-link:focus-visible {
    color: var(--text, #EEF2FF);
    background: var(--bg-hover, rgba(201, 168, 76, 0.05));
    outline: none;
}
.pv-menu-link.active {
    color: var(--gold-light, #F0D078);
    font-weight: 700;
    background: var(--gold-glow-sm, rgba(201, 168, 76, 0.09));
    border-color: var(--border, rgba(201, 168, 76, 0.14));
}

@media (prefers-reduced-motion: reduce) {
    .pv-menu, .pv-menu.open, .pv-menu-overlay, .nav-hamburger span { transition: none; }
}