/*
 * Kantine Pro: Frontend
 *
 * Bewusst ohne prefers-color-scheme: der Block sitzt in einem hellen Theme.
 * Eine Dark-Variante würde auf der weissen Seite als dunkler Kasten stehen.
 *
 * Ein Markup für alle Layouts: ohne Zusatzklasse und mit .mensa-plan--list
 * ist es die Liste, .mensa-plan--cards und .mensa-plan--mini stehen weiter
 * unten. Aussehen einer Ansicht und eigenes CSS hängt WordPress direkt
 * hinter diese Datei (mensa_system_views_inline_css()).
 */

.mensa-plan {
    --mensa-surface: #ffffff;
    --mensa-surface-alt: #f7f8f5;
    --mensa-border: rgba(24, 28, 22, 0.14);
    --mensa-border-soft: rgba(24, 28, 22, 0.08);
    --mensa-muted: #6a7267;
    --mensa-veg-bg: #e9f2dc;
    --mensa-veg-text: #2c5410;
    --mensa-vegan-bg: #d9ecc2;
    --mensa-vegan-text: #1f4007;
    --mensa-animal-bg: #f1f2ef;
    --mensa-animal-text: #4a5147;
    --mensa-closed: #92402f;
    --mensa-radius: 10px;
    /* Akzent: das Orange aus dem Logo. Für Schrift auf drei Viertel
       abgedunkelt, sonst reicht der Kontrast auf Weiß nicht. Ein Browser
       ohne color-mix() nimmt dort die normale Schriftfarbe. */
    --mensa-accent: #f27324;
    --mensa-accent-text: color-mix(in srgb, var(--mensa-accent) 75%, #000);
    --mensa-today-bg: color-mix(in srgb, var(--mensa-accent) 7%, var(--mensa-surface));
    /* Schriftgröße der Ansicht als Faktor: 0.9, 1 oder 1.12. */
    --mensa-scale: 1;

    margin: 0 0 2.5rem;
    font-size: calc(1em * var(--mensa-scale));
}

.mensa-plan:last-child {
    margin-bottom: 0;
}

/* Avada und viele andere Themes setzen font-size und line-height inline auf
   Überschriften. Ohne !important bleibt die Überschrift bei 34px. */
.mensa-plan > .mensa-plan__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    margin: 0 0 10px !important;
    padding: 0;
    font-size: calc(1.2rem * var(--mensa-scale)) !important;
    line-height: 1.35 !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.mensa-plan__range {
    font-size: calc(0.8rem * var(--mensa-scale));
    font-weight: 400;
    color: var(--mensa-muted);
    letter-spacing: 0;
}

.mensa-plan__box {
    background: var(--mensa-surface);
    border: 1px solid var(--mensa-border);
    border-radius: var(--mensa-radius);
    overflow: hidden;
}

/* --- Täglich verfügbar --- */
/* Über einer Woche ein Streifen oben im Kasten; je Mahlzeit ein eigener
   Block mit ihrem Namen in der Überschrift, auf breiten Bildschirmen
   nebeneinander. Unter einzelnen Tagen (Heute) ein Abschnitt am Ende. */

.mensa-daily-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    background: var(--mensa-surface-alt);
    border-bottom: 1px solid var(--mensa-border-soft);
}

.mensa-daily-group--after {
    border-top: 1px solid var(--mensa-border-soft);
    border-bottom: 0;
}

.mensa-daily {
    padding: 13px 18px;
}

.mensa-daily + .mensa-daily {
    box-shadow: inset 1px 0 0 var(--mensa-border-soft);
}

.mensa-plan--daily-only .mensa-daily-group {
    border-bottom: 0;
}

.mensa-daily__label {
    margin: 0 0 7px !important;
    padding: 0;
    font-size: calc(0.75rem * var(--mensa-scale));
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mensa-muted);
}

/* Die Mahlzeit in der Überschrift, kräftiger als "Täglich verfügbar". */
.mensa-daily__meal {
    font-weight: 700;
}

.mensa-daily__meal::before {
    content: "· ";
    font-weight: 400;
}

/* --- Mahlzeiten eines Tages --- */
/* Ab zwei Mahlzeiten: je Mahlzeit ein Abschnitt mit Kopf (Name und Zeit),
   dazwischen eine feine, gestrichelte Linie. */

.mensa-mahlzeit + .mensa-mahlzeit {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--mensa-border);
}

.mensa-plan .mensa-mahlzeit__head {
    margin: 0 0 4px !important;
    padding: 0;
    line-height: 1.4;
}

.mensa-mahlzeit__name {
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mensa-mahlzeit__time {
    margin-left: 6px;
    font-size: 0.8em;
    color: var(--mensa-muted);
    white-space: nowrap;
}

.mensa-plan .mensa-mahlzeit > .mensa-meals {
    margin: 0 !important;
}

/* --- Tageszeile --- */

/* Tabellenlayout statt fester Spaltenbreite: die Spalte wird genau so breit
   wie der längste Wochentag und ist über alle Zeilen gleich, unabhängig von
   der Schriftgrösse des Themes. Mit einer festen Breite lief "Donnerstag" bei
   grösserer Grundschrift in den Gerichtnamen hinein. Ein Grid pro Zeile kann
   das nicht leisten, weil jede Zeile ihre Spalten selbst berechnet. */
.mensa-plan__days {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.mensa-day {
    display: table-row;
}

.mensa-day__name,
.mensa-day__body {
    display: table-cell;
    vertical-align: top;
    border-bottom: 1px solid var(--mensa-border-soft);
}

.mensa-day:last-child .mensa-day__name,
.mensa-day:last-child .mensa-day__body {
    border-bottom: 0;
}

.mensa-day__name {
    /* width:1px zusammen mit nowrap lässt die Spalte auf die Textbreite
       schrumpfen, ohne sie abzuschneiden. */
    width: 1px;
    white-space: nowrap;
    padding: 13px 16px 13px 18px;
    font-weight: 600;
    line-height: 1.4;
}

.mensa-day__date {
    display: block;
    margin-top: 3px;
    font-weight: 400;
    font-size: 0.82em;
    color: var(--mensa-muted);
}

.mensa-day--closed .mensa-day__name {
    color: var(--mensa-muted);
}

/* "Heute" und "Morgen" über dem Wochentag. */
.mensa-day__relative {
    display: block;
    margin-bottom: 2px;
    font-size: 0.7em;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mensa-accent-text);
    /* "Nächster Öffnungstag" darf umbrechen, sonst würde die Spalte mit
       den Wochentagen breiter. */
    white-space: normal;
}

/* Heute: zart hinterlegt, links ein Strich in der Akzentfarbe. Auf den
   Zellen, nicht auf der Zeile: Schatten auf einer table-row zeichnet nicht
   jeder Browser. */
.mensa-day--today > .mensa-day__name,
.mensa-day--today > .mensa-day__body {
    background: var(--mensa-today-bg);
}

.mensa-day--today > .mensa-day__name {
    box-shadow: inset 3px 0 0 var(--mensa-accent);
}

.mensa-day__body {
    padding: 13px 18px 13px 0;
}

/* --- Mahlzeiten --- */
/* Themes stylen ul/li im Inhaltsbereich meist mit Aufzählungszeichen und
   eigenen Abständen; die werden hier bewusst zurückgesetzt. Alles Weitere
   steht in Spans, damit kein Theme-Abstand für Absätze dazwischenfunkt. */

.mensa-plan .mensa-meals {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mensa-plan .mensa-meal {
    margin: 0 !important;
    padding: 4px 0 !important;
    list-style: none !important;
    background: none;
    border: 0;
    line-height: 1.45;
}

.mensa-plan .mensa-meal::before,
.mensa-plan .mensa-meal::marker {
    content: none !important;
}

/* Die Zelle bringt ihren Innenabstand schon mit. */
.mensa-plan .mensa-day__body > .mensa-meals {
    margin: -4px 0 !important;
}

.mensa-meal__body,
.mensa-meal__main,
.mensa-meal__sides {
    display: block;
}

.mensa-dish__name {
    font-weight: 500;
}

.mensa-codes {
    font-size: 0.8em;
    color: var(--mensa-muted);
    white-space: nowrap;
}

.mensa-meal__main .mensa-mark {
    margin-left: 4px;
    vertical-align: 0.08em;
}

.mensa-meal__sides {
    margin-top: 1px;
    font-size: 0.9em;
}

.mensa-meal__with {
    color: var(--mensa-muted);
    font-style: italic;
}

.mensa-meal__side {
    white-space: normal;
}

/* Mehrere Linien: der Name als kleine Überschrift links neben dem Gericht.
   Die Spaltenbreite kommt aus dem längsten Namen (siehe render.php), so
   stehen die Gerichte aller Tage auf einer Flucht. */
.mensa-plan--lines .mensa-meal--line {
    display: grid;
    grid-template-columns: var(--mensa-line-width, 6em) minmax(0, 1fr);
    gap: 0 12px;
    align-items: baseline;
}

.mensa-plan--lines .mensa-meal--line + .mensa-meal--line {
    padding-top: 7px !important;
}

.mensa-meal__line {
    font-size: 0.72em;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mensa-muted);
    overflow-wrap: anywhere;
}

/* --- Kennzeichnung --- */

.mensa-mark {
    display: inline-block;
    padding: 0.12em 0.66em 0.18em;
    border-radius: 999px;
    font-size: 0.75em;
    line-height: 1.5;
    font-weight: 500;
    white-space: nowrap;
}

.mensa-mark--veg {
    background: var(--mensa-veg-bg);
    color: var(--mensa-veg-text);
}

.mensa-mark--vegan {
    background: var(--mensa-vegan-bg);
    color: var(--mensa-vegan-text);
}

.mensa-mark--animal {
    background: var(--mensa-animal-bg);
    color: var(--mensa-animal-text);
    box-shadow: inset 0 0 0 1px var(--mensa-border-soft);
}

/* --- Zustände --- */

.mensa-plan .mensa-closed,
.mensa-plan .mensa-none {
    margin: 0 !important;
    padding: 0;
    color: var(--mensa-muted);
    font-size: 0.92em;
    line-height: 1.5;
}

.mensa-closed__label {
    font-weight: 600;
    color: var(--mensa-closed);
}

/* --- Link und leerer Zeitraum --- */

.mensa-plan .mensa-plan__more {
    margin: 0 !important;
    padding: 11px 18px;
    border-top: 1px solid var(--mensa-border-soft);
    font-size: 0.92em;
    line-height: 1.45;
}

.mensa-plan__more a {
    color: var(--mensa-accent-text);
    font-weight: 600;
    text-decoration: none;
}

.mensa-plan__more a:hover,
.mensa-plan__more a:focus {
    text-decoration: underline;
}

.mensa-plan .mensa-plan__empty {
    padding: 13px 18px;
}

/* Nur für angemeldete Administratoren: Tippfehler im Shortcode. */
.kantine-admin-hint {
    margin: 0 0 10px !important;
    padding: 8px 12px;
    border: 1px dashed #c9a227;
    border-radius: 6px;
    background: #fff8db;
    color: #5c4a00;
    font-size: 0.85rem;
    line-height: 1.45;
}

.kantine-admin-hint__note {
    opacity: 0.75;
}

/* --- Legende --- */

.mensa-plan .mensa-legend {
    margin: 0 !important;
    padding: 11px 18px;
    border-top: 1px solid var(--mensa-border-soft);
    background: var(--mensa-surface-alt);
    font-size: calc(0.78rem * var(--mensa-scale));
    line-height: 1.55;
    color: var(--mensa-muted);
}

/* --- Schmale Viewports --- */

@media (max-width: 560px) {
    /* Gestapelt: Tabellenlayout wieder auflösen. */
    .mensa-plan__days,
    .mensa-day,
    .mensa-day__name,
    .mensa-day__body {
        display: block;
        width: auto;
        border-bottom: 0;
    }

    .mensa-day {
        border-bottom: 1px solid var(--mensa-border-soft);
    }

    .mensa-day:last-child {
        border-bottom: 0;
    }

    /* Wochentag und Datum stehen hier nebeneinander. Bewusst ohne Flexbox
       mit gap: Safari kennt gap in Flexboxen erst ab Version 14.1, davor
       fällt der Abstand weg und das Datum klebt am Wochentagnamen.
       Inline-Fluss mit margin wirkt in jedem Browser und bricht genauso um. */
    .mensa-day__name {
        white-space: normal;
        padding: 12px 16px 0;
    }

    .mensa-day__date {
        display: inline;
        margin: 0 0 0 8px;
    }

    .mensa-day__body {
        padding: 5px 16px 12px;
    }

    /* Gestapelt: der Strich für heute läuft über den ganzen Tag. */
    .mensa-plan:not(.mensa-plan--cards):not(.mensa-plan--mini) .mensa-day--today {
        background: var(--mensa-today-bg);
        box-shadow: inset 3px 0 0 var(--mensa-accent);
    }

    .mensa-day--today > .mensa-day__name,
    .mensa-day--today > .mensa-day__body {
        background: transparent;
        box-shadow: none;
    }

    /* Auf dem Handy rückt der Linienname über das Gericht. */
    .mensa-plan--lines .mensa-meal--line {
        display: block;
    }

    .mensa-plan--lines .mensa-meal__line {
        display: block;
        margin-bottom: 1px;
    }

    .mensa-daily,
    .mensa-plan .mensa-legend {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Nebeneinander wird es hier zu eng: die Blöcke stehen untereinander. */
    .mensa-daily + .mensa-daily {
        box-shadow: inset 0 1px 0 var(--mensa-border-soft);
    }
}

/* --- Kacheln: die Tage nebeneinander --- */
/* Jeder Tag ein eigener Kasten im Raster. Passen nicht alle in eine Reihe,
   brechen sie um; auf dem Handy stehen sie untereinander. */

.mensa-plan--cards .mensa-plan__box {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.mensa-plan--cards .mensa-daily-group {
    margin-bottom: 12px;
    border: 1px solid var(--mensa-border);
    border-radius: var(--mensa-radius);
    overflow: hidden;
}

.mensa-plan--cards .mensa-daily-group--after {
    margin: 12px 0 0;
}

.mensa-plan--cards .mensa-plan__days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
    gap: 12px;
    width: auto;
}

.mensa-plan--cards .mensa-day {
    display: block;
    background: var(--mensa-surface);
    border: 1px solid var(--mensa-border);
    border-radius: var(--mensa-radius);
    overflow: hidden;
}

.mensa-plan--cards .mensa-day .mensa-day__name,
.mensa-plan--cards .mensa-day .mensa-day__body {
    display: block;
    width: auto;
    white-space: normal;
    border-bottom: 0;
    box-shadow: none;
}

.mensa-plan--cards .mensa-day .mensa-day__name {
    padding: 11px 14px 9px;
    background: var(--mensa-surface-alt);
    border-bottom: 1px solid var(--mensa-border-soft);
}

.mensa-plan--cards .mensa-day__date {
    display: inline;
    margin: 0 0 0 6px;
}

.mensa-plan--cards .mensa-day .mensa-day__body {
    padding: 10px 14px 12px;
    background: transparent;
}

.mensa-plan--cards .mensa-day--today {
    border-color: var(--mensa-accent);
    box-shadow: inset 0 3px 0 var(--mensa-accent);
}

.mensa-plan--cards .mensa-day--today .mensa-day__name {
    background: var(--mensa-today-bg);
}

.mensa-plan--cards .mensa-meal--line {
    display: block;
}

.mensa-plan--cards .mensa-meal__line {
    display: block;
    margin-bottom: 1px;
}

.mensa-plan--cards .mensa-legend,
.mensa-plan--cards .mensa-plan__more {
    padding-left: 2px;
    padding-right: 2px;
    border-top: 0;
    background: transparent;
}

/* --- Mini: eine kleine Box, etwa für die Startseite --- */

.mensa-plan--mini {
    max-width: 26em;
}

.mensa-plan--mini .mensa-plan__box {
    border-top: 4px solid var(--mensa-accent);
}

.mensa-plan--mini .mensa-plan__days,
.mensa-plan--mini .mensa-day,
.mensa-plan--mini .mensa-day .mensa-day__name,
.mensa-plan--mini .mensa-day .mensa-day__body {
    display: block;
    width: auto;
    white-space: normal;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
}

.mensa-plan--mini .mensa-day {
    padding: 14px 18px 10px;
}

.mensa-plan--mini .mensa-day + .mensa-day {
    border-top: 1px solid var(--mensa-border);
}

.mensa-plan--mini .mensa-day .mensa-day__name {
    padding: 0 0 8px;
    font-size: 1.15em;
    line-height: 1.3;
}

.mensa-plan--mini .mensa-day__relative {
    font-size: 0.62em;
    margin-bottom: 3px;
}

.mensa-plan--mini .mensa-day__weekday::after {
    content: ",";
}

.mensa-plan--mini .mensa-day__date {
    display: inline;
    margin: 0 0 0 0.3em;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.mensa-plan--mini .mensa-day .mensa-day__body {
    padding: 0;
}

.mensa-plan--mini .mensa-day__body > .mensa-meals {
    margin: 0 !important;
}

.mensa-plan--mini .mensa-meal {
    padding: 7px 0 !important;
    border-top: 1px solid var(--mensa-border-soft) !important;
}

.mensa-plan--mini .mensa-meal--line {
    display: block;
}

.mensa-plan--mini .mensa-meal__line {
    display: block;
    margin-bottom: 1px;
}

.mensa-plan--mini .mensa-day .mensa-none,
.mensa-plan--mini .mensa-day .mensa-closed {
    padding-top: 7px;
    border-top: 1px solid var(--mensa-border-soft);
}

.mensa-plan--mini .mensa-plan__more {
    padding: 2px 18px 14px;
    border-top: 0;
}

/* Mahlzeiten in der kleinen Box: der Kopf als Zeile über den Gerichten. */
.mensa-plan--mini .mensa-mahlzeit__head {
    margin: 0 !important;
    padding: 2px 0 6px;
}

.mensa-plan--mini .mensa-mahlzeit + .mensa-mahlzeit {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--mensa-border);
}

/* Täglich verfügbar unter dem Tag, als eigener Abschnitt der Box. */
.mensa-plan--mini .mensa-daily-group {
    display: block;
    background: var(--mensa-surface-alt);
}

.mensa-plan--mini .mensa-daily + .mensa-daily {
    box-shadow: inset 0 1px 0 var(--mensa-border-soft);
}

.mensa-plan--mini .mensa-daily .mensa-meal {
    border-top: 0 !important;
    padding: 3px 0 !important;
}

/* --- Druck --- */

@media print {
    .mensa-plan__box {
        border-color: #999;
    }

    .mensa-daily-group,
    .mensa-plan .mensa-legend {
        background: transparent;
    }

    .mensa-mark {
        background: transparent;
        color: #000;
        box-shadow: inset 0 0 0 1px #999;
    }

    .mensa-day--today > .mensa-day__name,
    .mensa-day--today > .mensa-day__body {
        background: transparent;
    }

    .kantine-admin-hint {
        display: none;
    }
}