/* ═══════════════════════════════════════════════════════
   Restaurant Menu Plugin — Frontend Styles
   Tipografía: Work Sans
═══════════════════════════════════════════════════════ */

.rm-menu {
    --rm-cream:      #f5f0e8;
    --rm-parchment:  #ede5d5;
    --rm-ink:        #1e1a14;
    --rm-ink-light:  #7a7060;
    --rm-gold:       #b8905a;
    --rm-gold-light: #d4ad7a;
    --rm-gold-pale:  #f0e4cc;
    --rm-divider:    #d5c9b5;
    --rm-white:      #faf8f4;
    --rm-font:       'Work Sans', sans-serif;

    background:  var(--rm-cream);
    color:       var(--rm-ink);
    font-family: var(--rm-font);
    font-weight: 300;
    font-size:   16px;
    line-height: 1.5;
    max-width:   1450px;
    margin:      0 auto;
    padding:     0 32px 80px;
    box-sizing:  border-box;
}

.rm-menu *, .rm-menu *::before, .rm-menu *::after { box-sizing: inherit; }

/* ══════════════════════════════════════
   NAV — wrap en múltiples filas
══════════════════════════════════════ */
.rm-menu .rm-categories-nav {
    background:    var(--rm-white);
    border-bottom: 1px solid var(--rm-divider);
    display:       flex;
    flex-wrap:     wrap;          /* ← wrap a múltiples filas */
    position:      sticky;
    top:           0;
    z-index:       50;
    margin:        0 -32px;
    padding:       0 32px;
}

.rm-menu .rm-nav-link {
    display:         block;
    padding:         12px 14px;
    font-family:     var(--rm-font);
    font-size:       11px;
    font-weight:     500;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--rm-ink-light);
    text-decoration: none;
    white-space:     nowrap;
    position:        relative;
    transition:      color 0.2s;
}

.rm-menu .rm-nav-link::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       14px;
    right:      14px;
    height:     2px;
    background: var(--rm-gold);
    transform:  scaleX(0);
    transition: transform 0.2s;
}

.rm-menu .rm-nav-link:hover,
.rm-menu .rm-nav-link--active           { color: var(--rm-ink); }

.rm-menu .rm-nav-link:hover::after,
.rm-menu .rm-nav-link--active::after    { transform: scaleX(1); }

/* ══════════════════════════════════════
   CATEGORÍA
══════════════════════════════════════ */
.rm-menu .rm-category          { padding-top: 60px; }

.rm-menu .rm-category-header   { text-align: center; margin-bottom: 36px; }

.rm-menu .rm-category-title {
    font-family:    var(--rm-font);
    font-size:      32px;
    font-weight:    400;
    letter-spacing: 0.06em;
    color:          var(--rm-ink);
    line-height:    1.15;
    margin:         0;
}

.rm-menu .rm-category-title em {
    display:        block;
    font-style:     italic;
    font-size:      14px;
    font-weight:    300;
    color:          var(--rm-ink-light);
    letter-spacing: 0.04em;
    margin-top:     4px;
}

.rm-menu .rm-category-header::after {
    content:    '';
    display:    block;
    width:      48px;
    height:     1px;
    background: var(--rm-gold);
    margin:     16px auto 0;
}

.rm-menu .rm-category-description {
    font-style:  italic;
    font-size:   14px;
    color:       var(--rm-ink-light);
    margin-top:  10px;
}

/* ══════════════════════════════════════
   SUBCATEGORÍA
══════════════════════════════════════ */
.rm-menu .rm-subcategory {
    list-style:     none;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--rm-gold);
    text-align:     center;
    padding:        22px 0 14px;
    position:       relative;
    grid-column:    1 / -1;
    border-bottom:  none;            /* nunca línea en subcategoría */
}

.rm-menu .rm-subcategory::before,
.rm-menu .rm-subcategory::after {
    content:    '';
    position:   absolute;
    top:        50%;
    width:      28%;
    height:     1px;
    background: var(--rm-divider);
}
.rm-menu .rm-subcategory::before { left: 0; }
.rm-menu .rm-subcategory::after  { right: 0; }

.rm-menu .rm-subcategory em {
    font-style:     italic;
    font-weight:    300;
    text-transform: none;
    letter-spacing: 0;
    font-size:      10px;
    margin-left:    5px;
    color:          var(--rm-gold-light);
}

/* ══════════════════════════════════════
   GRID DE ÍTEMS
══════════════════════════════════════ */
.rm-menu .rm-items {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    grid;
    grid-template-columns: 1fr 1fr;
    gap:        0 20px;             /* ← 20px entre columnas */
}

/* ── Ítem ── */
.rm-menu .rm-item {
    display:       flex;
    gap:           14px;
    padding:       18px 0;
    border-bottom: 1px solid var(--rm-divider);
    align-items:   flex-start;
}

/* JS agrega esta clase a los ítems de la última fila */
.rm-menu .rm-item--last-row {
    border-bottom: none;
}

/* ── Foto ── */
.rm-menu .rm-item-photo {
    width:         80px;
    height:        80px;
    flex-shrink:   0;
    border-radius: 4px;
    overflow:      hidden;
    background:    var(--rm-parchment);
    margin:        0;
}

.rm-menu .rm-item-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Body ── */
.rm-menu .rm-item-body { flex: 1; min-width: 0; }

.rm-menu .rm-item-name {
    font-family: var(--rm-font);
    font-size:   17px;
    font-weight: 500;
    color:       var(--rm-ink);
    line-height: 1.3;
    margin:      0 0 2px;
}

.rm-menu .rm-item-name em {
    display:     block;
    font-style:  italic;
    font-size:   12px;
    font-weight: 300;
    color:       var(--rm-ink-light);
    margin-top:  2px;
    line-height: 1.4;
}

.rm-menu .rm-item-description {
    font-size:   12px;
    color:       var(--rm-ink-light);
    margin:      6px 0 0;
    line-height: 1.5;
    font-weight: 300;
}

.rm-menu .rm-item-description em {
    display:     block;
    font-style:  italic;
    font-size:   11px;
    color:       var(--rm-ink-light);
    margin-top:  2px;
    line-height: 1.4;
    opacity:     0.8;
}

/* ── Footer precio + badge ── */
.rm-menu .rm-item-footer {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  8px;
}

.rm-menu .rm-item-price {
    font-size:      16px;
    font-weight:    500;
    color:          var(--rm-gold);
    letter-spacing: 0.02em;
}

.rm-menu .rm-item-badge {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        3px 8px;
    border-radius:  2px;
    background:     var(--rm-gold-pale);
    color:          var(--rm-gold);
    border:         1px solid var(--rm-gold-light);
}

.rm-menu .rm-item-badge em {
    font-style:     italic;
    text-transform: none;
    letter-spacing: 0;
    font-weight:    300;
    margin-left:    4px;
    font-size:      10px;
}

/* ── Vacío ── */
.rm-menu .rm-empty {
    text-align:  center;
    padding:     60px 0;
    color:       var(--rm-ink-light);
    font-style:  italic;
    font-size:   18px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 760px) {
    .rm-menu {
        padding: 0 16px 60px;
    }
    .rm-menu .rm-categories-nav {
        margin:  0 -16px;
        padding: 0 16px;
    }
    .rm-menu .rm-items {
        grid-template-columns: 1fr;
    }
    .rm-menu .rm-item--last-row {
        border-bottom: none;
    }
    .rm-menu .rm-item:last-child {
        border-bottom: none;
    }
    .rm-menu .rm-category-title {
        font-size: 26px;
    }
    .rm-menu .rm-nav-link {
        padding:   10px 10px;
        font-size: 10px;
    }
    .rm-menu .rm-item-photo {
        width:  60px;
        height: 60px;
    }
}