/* =============================================================================
   MR. TED SHOP — header.css
   Navbar sticky con glassmorphism, logo, menú, búsqueda y carrito
   Basado en maquetas Stitch / VIBE_VAULT
   ============================================================================= */

/* ─── Header contenedor ─────────────────────────────────────────────────────── */
.mrted-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          1000;
    height:           var(--mt-header-height);
    background:       rgba(30, 21, 82, 0.7);
    backdrop-filter:  blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom:    1px solid var(--mt-border);
    transition:       background var(--mt-transition);
}

.mrted-header.scrolled {
    background: rgba(19, 6, 71, 0.95);
}

/* ─── Nav ───────────────────────────────────────────────────────────────────── */
.mrted-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    max-width:       var(--mt-container);
    margin-inline:   auto;
    padding-inline:  var(--mt-gap);
    gap:             var(--mt-gap);
}

/* ─── Logo ──────────────────────────────────────────────────────────────────── */
.mrted-logo {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    transition:  opacity var(--mt-transition-fast);
}

.mrted-logo:hover {
    opacity: 0.85;
}

.mrted-logo img {
    height:    44px;
    width:     auto;
    max-width: 160px;
    object-fit: contain;
}

/* ─── Menú desktop ──────────────────────────────────────────────────────────── */
.mrted-nav__menu {
    display:     flex;
    align-items: center;
    flex:        1;
    justify-content: center;
}

.mrted-nav__list {
    display:     flex;
    align-items: center;
    gap:         var(--mt-gap-lg);
    list-style:  none;
    margin:      0;
    padding:     0;
}

.mrted-nav__list .menu-item a,
.mrted-nav__list li a {
    font-family:     var(--mt-font-ui);
    font-size:       var(--mt-text-sm);
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.15em;
    color:           var(--mt-text-muted);
    text-decoration: none;
    padding-bottom:  4px;
    border-bottom:   2px solid transparent;
    transition:      color var(--mt-transition-fast),
                     border-color var(--mt-transition-fast);
    white-space:     nowrap;
}

.mrted-nav__list .menu-item a:hover,
.mrted-nav__list li a:hover,
.mrted-nav__list .current-menu-item a,
.mrted-nav__list .current_page_item a {
    color:        var(--mt-mint);
    border-color: var(--mt-mint);
}

/* ─── Acciones (búsqueda + carrito + hamburger) ─────────────────────────────── */
.mrted-nav__actions {
    display:     flex;
    align-items: center;
    gap:         var(--mt-gap-xs);
    flex-shrink: 0;
}

.mrted-nav__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    color:           var(--mt-text-muted);
    background:      none;
    border:          none;
    border-radius:   var(--mt-radius);
    cursor:          pointer;
    transition:      color var(--mt-transition-fast),
                     transform var(--mt-transition-fast);
}

.mrted-nav__btn:hover {
    color:     var(--mt-mint);
    transform: scale(0.95);
}

.mrted-nav__btn svg {
    pointer-events: none;
}

/* ─── Carrito con badge ──────────────────────────────────────────────────────── */
.mrted-cart-btn {
    position: relative;
}

.mrted-cart-count {
    position:         absolute;
    top:              2px;
    right:            2px;
    min-width:        18px;
    height:           18px;
    padding-inline:   4px;
    background-color: var(--mt-violet);
    color:            #fff;
    font-family:      var(--mt-font-display);
    font-size:        11px;
    line-height:      18px;
    text-align:       center;
    border-radius:    var(--mt-radius-full);
    pointer-events:   none;
}

/* ─── Hamburger mobile ──────────────────────────────────────────────────────── */
.mrted-hamburger {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    pointer-events: none;
}

.mrted-hamburger span {
    display:          block;
    width:            22px;
    height:           2px;
    background-color: var(--mt-text-muted);
    border-radius:    2px;
    transition:       var(--mt-transition-fast);
    transform-origin: center;
}

.mrted-mobile-toggle[aria-expanded="true"] .mrted-hamburger span:nth-child(1) {
    transform:   translateY(7px) rotate(45deg);
    background:  var(--mt-mint);
}
.mrted-mobile-toggle[aria-expanded="true"] .mrted-hamburger span:nth-child(2) {
    opacity:     0;
    transform:   scaleX(0);
}
.mrted-mobile-toggle[aria-expanded="true"] .mrted-hamburger span:nth-child(3) {
    transform:   translateY(-7px) rotate(-45deg);
    background:  var(--mt-mint);
}

/* ─── Barra de búsqueda expandible ─────────────────────────────────────────── */
.mrted-search-bar {
    position:   absolute;
    top:        100%;
    left:       0;
    right:      0;
    background: rgba(19, 6, 71, 0.98);
    border-top: 1px solid var(--mt-border);
    padding:    var(--mt-gap-sm) var(--mt-gap);
    transform:  translateY(-10px);
    opacity:    0;
    pointer-events: none;
    transition: opacity var(--mt-transition-fast),
                transform var(--mt-transition-fast);
}

.mrted-search-bar.is-open {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: all;
}

.mrted-search-bar__inner {
    display:         flex;
    align-items:     center;
    gap:             var(--mt-gap-sm);
    max-width:       var(--mt-container);
    margin-inline:   auto;
}

/* Override del form de búsqueda de WP */
.mrted-search-bar .search-form {
    display: flex;
    flex:    1;
    gap:     var(--mt-gap-sm);
}

.mrted-search-bar .search-field {
    flex:             1;
    background:       var(--mt-surface-high);
    border:           1px solid var(--mt-border);
    border-radius:    var(--mt-radius);
    color:            var(--mt-text);
    font-family:      var(--mt-font-ui);
    font-size:        var(--mt-text-sm);
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    padding:          0.625rem 1rem;
    outline:          none;
    transition:       border-color var(--mt-transition-fast);
}

.mrted-search-bar .search-field::placeholder {
    color: var(--mt-text-dim);
}

.mrted-search-bar .search-field:focus {
    border-color: var(--mt-mint);
}

.mrted-search-bar .search-submit {
    background:      var(--mt-violet);
    color:           #fff;
    font-family:     var(--mt-font-display);
    font-size:       var(--mt-text-lg);
    letter-spacing:  0.1em;
    padding:         0.5rem 1.5rem;
    border:          none;
    border-radius:   var(--mt-radius);
    cursor:          pointer;
    transition:      background var(--mt-transition-fast);
}

.mrted-search-bar .search-submit:hover {
    background: var(--mt-mint);
    color:      var(--mt-text-on-mint);
}

.mrted-search-close {
    color:      var(--mt-text-muted);
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0.5rem;
    transition: color var(--mt-transition-fast);
}

.mrted-search-close:hover {
    color: var(--mt-mint);
}

/* ─── Overlay (mobile menu) ─────────────────────────────────────────────────── */
.mrted-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.mrted-overlay.is-active {
    display: block;
}

/* ─── Responsive: mobile ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .mrted-nav__menu {
        display:        flex;
        position:       fixed;
        top:            0;
        left:           0;
        bottom:         0;
        width:          min(320px, 85vw);
        background:     var(--mt-navy);
        border-right:   1px solid var(--mt-border-accent);
        padding:        calc(var(--mt-header-height) + var(--mt-gap-lg)) var(--mt-gap) var(--mt-gap-lg);
        transform:      translateX(-100%);
        transition:     transform var(--mt-transition);
        z-index:        1001;
        overflow-y:     auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items:    flex-start;
        box-shadow:     4px 0 40px rgba(0,0,0,0.5);
    }

    .mrted-nav__menu.is-open {
        transform: translateX(0);
    }

    .mrted-nav__list {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0;
        width:          100%;
    }

    .mrted-nav__list .menu-item {
        width: 100%;
    }

    .mrted-nav__list .menu-item a,
    .mrted-nav__list li a {
        display:        block;
        padding:        1rem 0;
        font-size:      1.5rem;
        letter-spacing: 0.1em;
        color:          var(--mt-text-muted);
        border-bottom:  1px solid var(--mt-border);
        border-left:    none;
        transition:     color var(--mt-transition-fast);
    }

    .mrted-nav__list .menu-item a:hover,
    .mrted-nav__list li a:hover {
        color: var(--mt-mint);
        border-color: transparent;
    }

    .mrted-nav__list .current-menu-item a,
    .mrted-nav__list .current_page_item a {
        color:        var(--mt-mint);
        border-color: var(--mt-mint);
    }

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

@media (min-width: 1024px) {
    .mrted-mobile-toggle {
        display: none;
    }
}

/* ─── Menú mobile separado (patrón RootLabs) ───────────────────────────────── */

.mrted-nav-mobile {
    display:         flex;
    flex-direction:  column;
    position:        fixed;
    top:             var(--mt-header-height);
    left:            0;
    width:           100%;
    background:      rgba(19, 6, 71, 0.98);
    backdrop-filter: blur(20px);
    border-bottom:   2px solid var(--mt-border-accent);
    padding:         var(--mt-gap) var(--mt-gap-lg);
    gap:             0;
    transform:       translateY(-120%);
    opacity:         0;
    pointer-events:  none;
    transition:      transform 0.3s ease, opacity 0.3s ease;
    z-index:         999;
}

.mrted-nav-mobile.is-open {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
}

.mrted-nav-mobile__list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
}

.mrted-nav-mobile__list li a,
.mrted-nav-mobile__list .menu-item a {
    display:        block;
    font-family:    var(--mt-font-display);
    font-size:      2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--mt-text-muted);
    text-decoration: none;
    padding:        0.875rem 0;
    border-bottom:  1px solid var(--mt-border);
    transition:     color var(--mt-transition-fast);
}

.mrted-nav-mobile__list li:last-child a,
.mrted-nav-mobile__list .menu-item:last-child a {
    border-bottom: none;
}

.mrted-nav-mobile__list li a:hover,
.mrted-nav-mobile__list .menu-item a:hover,
.mrted-nav-mobile__list .current-menu-item a {
    color: var(--mt-mint);
}

/* Ocultar el menú desktop en mobile */
@media (max-width: 1023px) {
    .mrted-nav__menu { display: none; }
}

@media (min-width: 1024px) {
    .mrted-nav-mobile  { display: none; }
    .mrted-mobile-toggle { display: none; }
}

/* ─── Menú mobile fullscreen ────────────────────────────────────────────────── */
.mrted-nav-mobile {
    height:          calc(100vh - var(--mt-header-height));
    padding:         var(--mt-gap-lg) var(--mt-gap-lg) var(--mt-gap-xl);
    overflow-y:      auto;
    justify-content: space-between;
}

.mrted-nav-mobile__list {
    flex: 1;
}

/* Botón carrito al fondo del menú mobile */
.mrted-nav-mobile__footer {
    margin-top:  var(--mt-gap-lg);
    padding-top: var(--mt-gap);
    border-top:  1px solid var(--mt-border);
}

.mrted-nav-mobile__cart-btn {
    display:          flex;
    align-items:      center;
    gap:              0.75rem;
    width:            100%;
    background-color: var(--mt-violet);
    color:            #fff;
    font-family:      var(--mt-font-display);
    font-size:        1.5rem;
    letter-spacing:   0.05em;
    text-transform:   uppercase;
    padding:          1rem 1.5rem;
    border-radius:    var(--mt-radius);
    text-decoration:  none;
    transition:       background-color var(--mt-transition-fast);
}

.mrted-nav-mobile__cart-btn:hover {
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
}


/* ─── Correcciones z-index y colores (consolidado) ─────────────────────────── */
.mrted-header         { z-index: 1003; }
.mrted-nav-mobile     { z-index: 1002; }
.mrted-nav-mobile__cart-btn       { background-color: var(--mt-mint); color: var(--mt-text-on-mint); }
.mrted-nav-mobile__cart-btn:hover { background-color: var(--mt-violet); color: #fff; }