/**
 * Navbar Styles — Picklemall Widgets
 *
 * Minimal navbar styles. Most styling is handled via Elementor Theme Builder.
 * Customize design tokens in theme variables.css (--pm-color-*, --pm-text-*)
 */

/* ── Navbar Base ──────────────────────────────────────────────────────────── */

.elementor-location-navbar {
    z-index: var(--pm-z-header, 400);
    position: relative;
}

/* ── Mobile Navigation Toggle ─────────────────────────────────────────────── */

.e-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--pm-space-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: auto;
    height: auto;
}

.e-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--pm-color-type-heading);
    transition: all var(--pm-duration-base) var(--pm-ease);
}

/* ── Navigation Menu Base ─────────────────────────────────────────────────── */

.e-menu {
    display: flex;
    flex-direction: row;
    gap: var(--pm-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.e-menu > li > a {
    color: var(--pm-color-type-heading);
    font-size: var(--pm-text-body-sm);
    font-weight: var(--pm-weight-medium);
    text-decoration: none;
    transition: color var(--pm-duration-fast) var(--pm-ease);
}

.e-menu > li > a:hover,
.e-menu > li.current-menu-item > a {
    color: var(--pm-color-primary);
}

/* ── Responsive: Mobile Menu ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .e-menu {
        flex-direction: column;
        gap: var(--pm-space-4);
    }

    .e-menu-toggle {
        display: flex;
    }
}