/* ============================================================
   RR Nav Menu — v1.5.0
   A Radiator Boutique · by Matei Georgian Alex
   Specificitate crescută pentru override complet Elementor Pro.
   Toate culorile și dimensiunile controlate via CSS custom props
   injectate din PHP (wp_head) sau inline pe elementul <nav>.
   NOTĂ: media query mobile (colaps orizontal→coloană) este
   injectat dinamic din PHP pentru a permite breakpoint configurabil.
   ============================================================ */

.rr-nm {
    /* ── Valori fallback (suprascrise de PHP via wp_head) ── */
    --nm-muted:     #6B6B6B;
    --nm-red:       #800020;
    --nm-current:   #800020;
    --nm-gold:      #D9B382;
    --nm-sep:       #C0C0C0;
    --nm-size-link: 10px;
    --nm-size-cur:  13px;
    --nm-ls:        0.13em;
    --nm-ls-cur:    0.02em;
    --nm-sep-space: 20px;
    --nm-fw-link:   400;
    --nm-fs-link:   normal;
    --nm-tt-link:   uppercase;
    --nm-fw-cur:    500;
    --nm-fs-cur:    italic;
    --nm-tt-cur:    none;

    /* ── Fixe — nu se configurează ── */
    --nm-dark:      #1A1A1A;
    --nm-border:    #E8E8E8;
    --f-display:    'Cormorant Garamond', Georgia, serif;
    --f-body:       'Inter', sans-serif;
    --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);

    display: block !important;
    width: 100% !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* ── Lista principală ── */
.rr-nm .rr-nm__list {
    all: unset !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* ── Font family via CSS vars (suprascrise din PHP/inline) ── */
.rr-nm .rr-nm__link {
    font-family: var(--nm-font-link, var(--f-body)) !important;
}

.rr-nm .rr-nm__link--current {
    font-family: var(--nm-font-current, var(--f-display)) !important;
}

/* ════════════════════════════════
   LAYOUT: HORIZONTAL
   ════════════════════════════════ */
.rr-nm--horizontal .rr-nm__list {
    flex-direction: row !important;
}

/* Separator vertical fin între itemi nivel 1 */
.rr-nm--horizontal > .rr-nm__list > .rr-nm__item + .rr-nm__item::before {
    content: '' !important;
    display: inline-block !important;
    width: 1px !important;
    height: 10px !important;
    background: var(--nm-sep) !important;
    margin: 0 var(--nm-sep-space) !important;
    opacity: 0.45 !important;
    flex-shrink: 0 !important;
}

/* ════════════════════════════════
   LAYOUT: VERTICAL
   ════════════════════════════════ */
.rr-nm--vertical .rr-nm__list {
    flex-direction: column !important;
    align-items: stretch !important;
}

.rr-nm--vertical > .rr-nm__list > .rr-nm__item {
    border-bottom: 1px solid var(--nm-border) !important;
}

.rr-nm--vertical > .rr-nm__list > .rr-nm__item:first-child {
    border-top: 1px solid var(--nm-border) !important;
}

/* ── Item generic ── */
.rr-nm .rr-nm__item {
    display: inline-flex !important;
    align-items: center !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: relative !important;
    box-shadow: none !important;
}

/* ── Link generic ── */
.rr-nm .rr-nm__link {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--nm-font-link, var(--f-body)) !important;
    font-size: var(--nm-size-link) !important;
    font-weight: var(--nm-fw-link) !important;
    font-style: var(--nm-fs-link) !important;
    letter-spacing: var(--nm-ls) !important;
    text-transform: var(--nm-tt-link) !important;
    line-height: 1 !important;
    color: var(--nm-muted) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 5px !important;
    margin: 0 !important;
    position: relative !important;
    white-space: nowrap !important;
    transition: color 0.22s var(--ease) !important;
    cursor: pointer !important;
}

.rr-nm .rr-nm__link::before {
    display: none !important;
}

/* Gradient underline — identic cu RR Breadcrumbs */
.rr-nm .rr-nm__link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, var(--nm-red), var(--nm-gold)) !important;
    transition: width 0.3s var(--ease) !important;
}

.rr-nm .rr-nm__link:hover {
    color: var(--nm-red) !important;
    text-decoration: none !important;
    background: none !important;
}

.rr-nm .rr-nm__link:hover::after {
    width: 100% !important;
}

/* ── Item curent — toate proprietățile font controlate via CSS vars ── */
.rr-nm .rr-nm__link--current {
    font-family: var(--nm-font-current, var(--f-display)) !important;
    font-size: var(--nm-size-cur) !important;
    font-weight: var(--nm-fw-cur) !important;
    font-style: var(--nm-fs-cur) !important;
    letter-spacing: var(--nm-ls-cur) !important;
    text-transform: var(--nm-tt-cur) !important;
    color: var(--nm-current) !important;
}

.rr-nm .rr-nm__link--current::after {
    width: 100% !important;
    background: linear-gradient(90deg, var(--nm-current), var(--nm-gold)) !important;
}

/* ── Vertical: link ocupă tot rândul ── */
.rr-nm--vertical .rr-nm__link {
    padding: 13px 4px 14px !important;
    width: 100% !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

/* ── Chevron SVG ── */
.rr-nm .rr-nm__chevron {
    width: 10px !important;
    height: 10px !important;
    stroke: currentColor !important;
    fill: none !important;
    flex-shrink: 0 !important;
    transition: transform 0.22s var(--ease) !important;
    position: relative !important;
    top: 0.5px !important;
    display: inline-block !important;
}

.rr-nm .rr-nm__item--has-children:hover > .rr-nm__link .rr-nm__chevron,
.rr-nm .rr-nm__item--has-children.rr-nm--open > .rr-nm__link .rr-nm__chevron {
    transform: rotate(180deg) !important;
}

/* ═══════════════════════════════════════════
   DROPDOWN — layout HORIZONTAL
   ═══════════════════════════════════════════ */
.rr-nm--horizontal .rr-nm__item--has-children {
    position: relative !important;
}

.rr-nm--horizontal .rr-nm__sub {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: -16px !important;
    min-width: 210px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--nm-border) !important;
    border-top: 2px solid var(--nm-gold) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    z-index: 9999 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) !important;
    transition: opacity 0.22s var(--ease),
                visibility 0.22s var(--ease),
                transform 0.22s var(--ease) !important;
    pointer-events: none !important;
}

/* Triunghi decorativ */
.rr-nm--horizontal .rr-nm__sub::before {
    content: '' !important;
    position: absolute !important;
    top: -6px !important;
    left: 24px !important;
    width: 10px !important;
    height: 5px !important;
    background: var(--nm-gold) !important;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
}

.rr-nm--horizontal .rr-nm__item--has-children:hover > .rr-nm__sub,
.rr-nm--horizontal .rr-nm__item--has-children.rr-nm--open > .rr-nm__sub {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Sub-link */
.rr-nm--horizontal .rr-nm__link--sub {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 20px !important;
    font-size: var(--nm-size-link) !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
    color: var(--nm-muted) !important;
    transition: color 0.18s var(--ease),
                background 0.18s var(--ease),
                padding-left 0.18s var(--ease) !important;
}

.rr-nm--horizontal .rr-nm__link--sub::after {
    display: none !important;
}

.rr-nm--horizontal .rr-nm__link--sub:hover {
    color: var(--nm-red) !important;
    background: #F9F9F9 !important;
    padding-left: 26px !important;
}

/* ═══════════════════════════════════════════
   SUB-MENIU — layout VERTICAL (acordeon)
   ═══════════════════════════════════════════ */
.rr-nm--vertical .rr-nm__sub {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 6px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-left: 2px solid var(--nm-gold) !important;
    background: none !important;
    display: none !important;
}

.rr-nm--vertical .rr-nm__item--has-children.rr-nm--open > .rr-nm__sub {
    display: block !important;
}

.rr-nm--vertical .rr-nm__link--sub {
    display: block !important;
    padding: 8px 4px !important;
    font-size: var(--nm-size-link) !important;
    letter-spacing: 0.11em !important;
    border-bottom: 1px solid var(--nm-border) !important;
    color: var(--nm-muted) !important;
}

.rr-nm--vertical .rr-nm__link--sub::after {
    display: none !important;
}

.rr-nm--vertical .rr-nm__link--sub:hover {
    color: var(--nm-red) !important;
    background: none !important;
}

/* ═══════════════════════════════════════════
   FONT SIZE — ecrane foarte mici (480px)
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
    .rr-nm .rr-nm__link {
        font-size: calc(var(--nm-size-link) - 1.5px) !important;
    }

    .rr-nm .rr-nm__link--current {
        font-size: calc(var(--nm-size-cur) - 2px) !important;
    }
}