/**
 * C4mulo5 Speisekarte mit Bild (c4mulo5-restaurant-menu-image)
 *
 * Zweispaltiges Layout: Bild + Preisliste (classic-Stil). Bild/Liste per
 * data-c4m5-image-position bzw. Klasse links/rechts tauschbar. Dunkles
 * Standard-Design über CSS-Variablen, im Customizer überschreibbar.
 */

.c4mulo5-restaurant-menu-image {
    --rmi-bg:          #111111;
    --rmi-text:        #f3f3f3;
    --rmi-muted:       #9a9a9a;
    --rmi-price:       #ffffff;
    --rmi-divider:     rgba(255, 255, 255, 0.18);
    --rmi-heading:     #ffffff;
    --rmi-codes:       #8a8a8a;
    --rmi-variant:     #cfcfcf;
    --rmi-title:       #ffffff;
    --rmi-subtitle:    #b8b8b8;
    --rmi-gap:         48px;

    background-color: var(--rmi-bg);
    color:            var(--rmi-text);
}

/* ── Editierbare Überschrift ───────────────────────────────── */
.c4mulo5-restaurant-menu-image .c4m5-rmi-header {
    margin-bottom: 38px;
}
.c4mulo5-restaurant-menu-image .c4m5-rmi-title {
    color:         var(--rmi-title);
    margin:        0 0 8px;
    font-size:     2.2rem;
    line-height:   1.2;
}
.c4mulo5-restaurant-menu-image .c4m5-rmi-subtitle {
    color:      var(--rmi-subtitle);
    margin:     0;
    font-size:  1.05rem;
}

/* ── Zwei-Spalten-Reihe ─────────────────────────────────────── */
.c4m5-rmi-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--rmi-gap);
}
.c4m5-rmi-row > .c4m5-rmi-image-col,
.c4m5-rmi-row > .c4m5-rmi-list-col {
    flex:      1 1 0;
    min-width: 0;
    max-width: none;       /* col-sm-6 Breite überschreiben, Gap steuert Abstand */
    padding:   0;
}

/* Bild rechts statt links: Reihenfolge tauschen */
.c4mulo5-restaurant-menu-image.c4m5-rmi-img-right .c4m5-rmi-image-col { order: 2; }
.c4mulo5-restaurant-menu-image.c4m5-rmi-img-right .c4m5-rmi-list-col  { order: 1; }

/* ── Bild ───────────────────────────────────────────────────── */
.c4m5-rmi-image {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 2px;
    object-fit:    cover;
}

/* ── Listen-Spalte (bare render_menu Ausgabe) ──────────────────
 * Der innere Wrapper kommt ohne gridContainer (bare), daher hier
 * volle Breite ohne zusätzliches Padding. */
.c4m5-rmi-list .c4m5-menu-bare {
    width:   100%;
    margin:  0;
    padding: 0;
}
.c4m5-rmi-list .c4m5-menu-group + .c4m5-menu-group {
    margin-top: 28px;
}
.c4m5-rmi-list .c4m5-menu-cat-title {
    color:         var(--rmi-heading);
    font-size:     1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin:        0 0 12px;
}

/* Einzelner Eintrag: Name links, Preis rechts, Punkt-Linie dazwischen */
.c4m5-rmi-list .c4m5-menu-item {
    padding: 0;
}
.c4m5-rmi-list .c4m5-menu-item-row {
    display:        flex;
    align-items:    baseline;
    gap:            8px;
    padding:        14px 0;
    border-bottom:  1px dotted var(--rmi-divider);
}
.c4m5-rmi-list .c4m5-menu-item:last-child .c4m5-menu-item-row {
    border-bottom: none;
}
.c4m5-rmi-list .c4m5-menu-item-main {
    flex:     1 1 auto;
    min-width: 0;
}
.c4m5-rmi-list .c4m5-menu-item-name {
    color:       var(--rmi-text);
    font-size:   1rem;
    font-weight: 500;
}
.c4m5-rmi-list .c4m5-menu-item-name strong {
    font-weight: 500;
}
.c4m5-rmi-list .c4m5-menu-codes {
    color:       var(--rmi-codes);
    font-size:   0.7rem;
    vertical-align: super;
    margin-left: 2px;
    cursor:      help;
}
.c4m5-rmi-list .c4m5-menu-item-desc {
    color:      var(--rmi-muted);
    font-size:  0.82rem;
    font-style: italic;
    margin-top: 3px;
}
.c4m5-rmi-list .c4m5-menu-item-price {
    flex:        0 0 auto;
    color:       var(--rmi-price);
    font-size:   1rem;
    font-weight: 600;
    white-space: nowrap;
    text-align:  right;
}
.c4m5-rmi-list .c4m5-menu-variants {
    list-style: none;
    margin:     0;
    padding:    0;
}
.c4m5-rmi-list .c4m5-menu-variants li {
    display: flex;
    gap:     8px;
    justify-content: flex-end;
}
.c4m5-rmi-list .c4m5-variant-label {
    color: var(--rmi-muted);
}

/* ── Responsive: untereinander stapeln ─────────────────────── */
@media (max-width: 767px) {
    .c4m5-rmi-row {
        gap: 28px;
    }
    .c4mulo5-restaurant-menu-image .c4m5-rmi-image-col,
    .c4mulo5-restaurant-menu-image .c4m5-rmi-list-col {
        flex:  1 1 100%;
        order: 0 !important;   /* auf Mobile immer Bild oben, Liste darunter */
    }
}

/* ── Robustheit gegen Theme-Hintergründe / Reveal-Overlays ──────────────
 * Einige Theme- bzw. Reveal-Styles legen weiße Hintergründe hinter die
 * Texte. Auf dem dunklen Section-Grund führt das zu „weiß auf weiß" und
 * macht Gericht-Namen und Preise unlesbar. Wir erzwingen daher
 * transparente Hintergründe (Element + etwaige Pseudo-Overlays) und
 * sichern helle, kontrastreiche Textfarben ab. */
.c4mulo5-restaurant-menu-image .c4m5-menu-item,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-row,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-main,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-name,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-name strong,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-price,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-desc,
.c4mulo5-restaurant-menu-image .c4m5-menu-codes,
.c4mulo5-restaurant-menu-image .c4m5-menu-cat-title,
.c4mulo5-restaurant-menu-image .c4m5-menu-variants,
.c4mulo5-restaurant-menu-image .c4m5-menu-variants li {
    background: transparent !important;
    box-shadow: none !important;
}
/* Falls ein Reveal-/Highlight-Effekt als Pseudo-Element über dem Text liegt */
.c4mulo5-restaurant-menu-image .c4m5-menu-item-name::before,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-name::after,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-price::before,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-price::after,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-row::before,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-row::after {
    background: none !important;
}
/* Textfarben kontrastsicher erzwingen (überschreibt Theme-Textfarben) */
.c4mulo5-restaurant-menu-image .c4m5-menu-item-name,
.c4mulo5-restaurant-menu-image .c4m5-menu-item-name strong {
    color: var(--rmi-text) !important;
}
.c4mulo5-restaurant-menu-image .c4m5-menu-item-price {
    color: var(--rmi-price) !important;
}
.c4mulo5-restaurant-menu-image .c4m5-menu-item-desc {
    color: var(--rmi-muted) !important;
}
.c4mulo5-restaurant-menu-image .c4m5-menu-cat-title {
    color: var(--rmi-heading) !important;
}
/* Preisvarianten (z. B. „0,2 l  2,20 €" / „0,4 l  4,00 €") lesbar machen:
 * Menge in hellem Grau, Preis in Weiß – beide gegen Theme-Vererbung absichern. */
.c4mulo5-restaurant-menu-image .c4m5-menu-variants,
.c4mulo5-restaurant-menu-image .c4m5-menu-variants li,
.c4mulo5-restaurant-menu-image .c4m5-variant-label {
    color: var(--rmi-variant) !important;
}
.c4mulo5-restaurant-menu-image .c4m5-menu-variants li strong {
    color: var(--rmi-price) !important;
}