/**
Theme Name: MixMyMeals Astra Child
Author: Timo Fricke
Author URI: https://www.mixmymeals.de
Description: Child Theme für MixMyMeals auf Basis von Astra.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mixmymeals-astra-child
Template: astra
*/

:root {
    --mmm-primary: #9FC193;
    --mmm-secondary: #EA9181;
    --mmm-text: #454A45;
    --mmm-white: #fff;
    --mmm-grey: #f7f7f7;

    /* Zusatz für subtilere Schatten */
    --mmm-shadow: 0 3px 10px rgba(0,0,0,0.08);
    --mmm-shadow-hover: 0 6px 16px rgba(0,0,0,0.12);
}



/* --- Generic Card --- */

.mmm-card {
    border: 1px solid var( --mmm-grey );
    border-radius: 12px;
    background: var(--mmm-white);
    box-shadow: var(--mmm-shadow);
    padding: 1.5rem 2rem 2.5rem 1.5rem;
    margin-top: 2rem;
    transition: box-shadow 0.25s ease,
    transform 0.25s ease;
}

.mmm-card:hover {
    box-shadow: var(--mmm-shadow-hover);
    transform: translateY(-2px);
}



/* --- Icons --- */

span.mmm-plan-days::before     { content: "\f185"; }
span.mmm-plan-range::before    { content: "\f133"; }
span.mmm-plan-meals::before    { content: "\f2e7"; }
span.mmm-plan-servings::before { content: "\f07e"; }
a.mmm-go-to-plan-link::before  { content: "\f06e"; }
span.mmm-recipe-categories-list::before { content: "\f02e"; }
span.mmm-recipe-energy::before { content: "\f06d"; }
a.mmm-meal-back-to-meal-plan-link::before { content: "\f060"; }





/* --- Meal Plan Archive --- */

/*
With shortcodes
[mixmymeals_all_meal_plans]
[mixmymeals_mode_switch]
[mixmymeals_day_selector]
*/

.mmm-meal-plan-overview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
}

.mmm-meal-plan-overview .mmm-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.mmm-meal-plan-overview .mmm-plan-header .mmm-plan-title {
    margin: 0;
}

 .mmm-plan-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
    color: var(--mmm-text);
}

.mmm-meal-plan-overview .mmm-plan-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.mmm-meal-plan-overview .mmm-plan-meta > span::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--mmm-secondary);
    font-size: 0.9rem;
}

.mmm-meal-plan-overview a.mmm-go-to-plan-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.4em;
    color: var(--mmm-secondary);
    font-size: 0.9rem;
}

.mmm-meal-plan-overview .mmm-plan-selected-day {
    border-left: 4px solid var(--mmm-primary);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    background: var(--mmm-grey);
}

.mmm-meal-plan-overview .mmm-plan-selected-day h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.mmm-meal-plan-overview .mmm-selected-day-image {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--mmm-shadow);
    max-width: 50%;
}

.mmm-meal-plan-overview .mmm-selected-day-image img {
    width: 100%;
    height: auto;
    display: block;
}

.mmm-meal-plan-overview .mmm-plan-selected-day, .mmm-meal-plan-overview .mmm-plan-upcoming, .mmm-meal-plan-overview .mmm-plan-missed {
    margin-bottom: 1rem;
}

.mmm-meal-plan-overview .mmm-plan-meals h4 {
    margin: 0 0 0.5rem 0;
}

.mmm-meal-plan-overview .mmm-meal-list {
    margin-left: 0;
    padding-top: 1rem;
    padding-left: 1.2rem;
    list-style-type: square;
}

.mmm-meal-plan-overview .mmm-meal-list-item {
    margin-bottom: 0.4rem;
}

.mmm-meal-plan-overview .mmm-meal-list-item a {
    color: var(--mmm-primary);
    text-decoration: none;
}

.mmm-meal-plan-overview .mmm-meal-list-item a:hover {
    opacity: 0.8;
}

.mmm-meal-plan-overview .mmm-plan-upcoming,
.mmm-meal-plan-overview .mmm-plan-past {
    background: var(--mmm-grey);
    border-radius: 4px;
    padding: 0.75rem 1rem;
}

.mmm-meal-plan-overview .mmm-plan-upcoming h4,
.mmm-meal-plan-overview .mmm-plan-past h4 {
    margin: 0 0 0.4rem 0;
}

.mmm-meal-plan-overview .mmm-collapsible {
    margin-top: 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5em 1em;
    background: #fafafa;
}

.mmm-meal-plan-overview .mmm-collapsible summary {
    cursor: pointer;
    list-style: none; /* Safari */
}

.mmm-meal-plan-overview .mmm-collapsible summary::-webkit-details-marker {
    display: none; /* Chrome/Safari Marker entfernen */
}

.mmm-meal-plan-overview .mmm-collapsible summary::after {
    content: '＋';
    float: right;
    line-height: 1;
    transition: transform 0.2s ease;
}

.mmm-meal-plan-overview .mmm-collapsible[open] summary::after {
    content: '−';
}

.mmm-meal-plan-overview .mmm-day-sequence {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    margin-top: 0.6rem;
}

.mmm-meal-plan-overview .mmm-day-sequence .mmm-day {
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--mmm-surface-alt);
    color: var(--mmm-text-light);
    border: 1px solid var(--mmm-border);
    transition: 0.2s ease;
}

.mmm-meal-plan-overview .mmm-day-sequence .mmm-day-active {
    background: var(--mmm-primary);
    color: var(--mmm-white);
}

.mmm-day-sequence .mmm-day-past {
    color: var(--mmm-text);
    text-decoration: line-through;
}

.mmm-meal-plan-overview .mmm-day-sequence .mmm-day-upcoming {
    color: var(--mmm-text);
}

.mmm-meal-plan-archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.mmm-meal-plan-archive-filters .mmm-day-selector select {
    appearance: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    color: var(--mmm-text);
    background: var(--mmm-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media screen and (max-width: 750px) {
    .mmm-meal-plan-archive-filters .mmm-day-selector select {
        max-width: 40vw;
    }
}

.mmm-meal-plan-archive-filters .mmm-day-selector select:hover {
    border-color: var(--mmm-secondary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.mmm-meal-plan-archive-filters .mmm-day-selector option {
    color: var(--mmm-text);
}

.mmm-meal-plan-archive-filters .mmm-switch-container {
    position: relative;
    display: inline-flex;
    border-radius: 25px;
    border: 1px solid var(--mmm-grey);
    padding: 4px;
    width: 220px;
    justify-content: space-between;
    background: var(--mmm-white);
}

@media screen and (max-width: 750px) {
    .mmm-meal-plan-archive-filters .mmm-switch-container {
        max-width: 40vw;
    }
}

.mmm-meal-plan-archive-filters .mmm-switch-option {
    flex: 1;
    text-align: center;
    z-index: 2;
    padding: 0.4rem 0;
    border-radius: 20px;
    color: var(--mmm-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mmm-meal-plan-archive-filters .mmm-switch-option.active {
    color: var(--mmm-white);
}

.mmm-meal-plan-archive-filters .mmm-switch-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    background: var(--mmm-secondary);
    border-radius: 20px;
    transition: transform 0.25s ease;
}

.mmm-meal-plan-archive-filters .mmm-switch-slider.left {
    transform: translateX(0);
}

.mmm-meal-plan-archive-filters .mmm-switch-slider.right {
    transform: translateX(100%);
}






/* --- Single Recipe Post --- */

.mmm-single-recipe .mmm-recipe-section > h2 {
    margin-top: 0;
    margin-bottom: 1.2rem;
}

.mmm-single-recipe .mmm-recipe-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
}

.mmm-single-recipe .mmm-step-header {
    margin-bottom: 1rem;
}

.mmm-single-recipe .mmm-step-title {
    margin: 0;
}

.mmm-single-recipe .mmm-step-description p {
    margin: 0 0 1rem 0;
    color: var(--mmm-text);
    line-height: 1.5;
}

.mmm-single-recipe .mmm-step-ingredients {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mmm-single-recipe .mmm-step-ingredients li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--mmm-grey);
}

.mmm-single-recipe .mmm-step-ingredients li:last-child {
    border-bottom: none;
}

.mmm-single-recipe .mmm-recipe-nutrition {
    margin-top: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mmm-single-recipe .mmm-recipe-nutrition .mmm-nutrition-table {
    min-width: 480px;
}

.mmm-single-recipe .mmm-step-description p {
    margin: 0 0 1rem 0;
    color: var(--mmm-text);
    line-height: 1.5;
}

.mmm-single-recipe .mmm-step-ingredients {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mmm-single-recipe .mmm-step-ingredients li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.mmm-single-recipe .mmm-ingredient-name {
    color: var(--mmm-secondary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mmm-single-recipe .mmm-ingredient-name:hover {
    opacity: 0.7;
}

.mmm-single-recipe .mmm-ingredient-amount {
    color: var(--mmm-text);
}

.mmm-single-recipe .mmm-nutrition-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: var(--mmm-white);
    border: 1px solid var(--mmm-grey); /* äußerer Rahmen */
    border-radius: 8px;
    overflow: hidden;
}

.mmm-single-recipe .mmm-nutrition-table th,
.mmm-single-recipe .mmm-nutrition-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--mmm-grey); /* innere Linien */
    color: var(--mmm-text);
}

.mmm-single-recipe .mmm-nutrition-table th {
    background: var(--mmm-grey);
    font-weight: 600;
    color: var(--mmm-text);
}

.mmm-single-recipe .mmm-nutrition-table th:last-child,
.mmm-single-recipe .mmm-nutrition-table td:last-child {
    border-right: none;
}



/* --- Single Meal Post --- */

.mmm-single-meal .mmm-meal-section > h2 {
    margin-top: 0;
    margin-bottom: 1.2rem;
}

.mmm-single-meal .mmm-meal-nutrition {
    width: 100%;
    overflow-x: auto;              /* horizontales Scrollen erlauben */
    -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */
    margin-top: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mmm-single-meal .mmm-meal-nutrition .mmm-nutrition-table {
    min-width: 480px;              /* sorgt für horizontales Scrollen */
}



/* --- Single Meal Plan Post --- */

/*
With Shortcodes
[mixmymeals_all_meals_in_a_single_meal_plan]
[mixmymeals_simple_shopping_list_for_a_single_meal_plan]
[mixmymeals_shopping_list_for_a_single_meal_plan]
*/

.mmm-single-meal-plan .mmm-meal-plan-table {
    width: 100%;
    border-collapse: collapse; /* sorgt für durchgehende Linien */
    margin-top: 1rem;
    background: var(--mmm-white);
    border: 1px solid var(--mmm-grey); /* äußerer Rahmen */
    border-radius: 8px;
    overflow: hidden;
}

.mmm-single-meal-plan .mmm-meal-plan-table th,
.mmm-single-meal-plan .mmm-meal-plan-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--mmm-grey); /* innere Linien */
    color: var(--mmm-text);
}

.mmm-single-meal-plan .mmm-meal-plan-table th {
    background: var(--mmm-grey);
    font-weight: 600;
    color: var(--mmm-text);
    text-align: left;
    white-space: nowrap; /* verhindert Umbrüche */
}

.mmm-single-meal-plan .mmm-meal-plan-table th:last-child,
.mmm-single-meal-plan .mmm-meal-plan-table td:last-child {
    border-right: none;
}

.mmm-single-meal-plan .mmm-meal-plan-wrapper {
    width: 100%;
    overflow-x: auto;              /* erlaubt horizontales Scrollen */
    -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */
}

.mmm-single-meal-plan .mmm-meal-plan-wrapper .mmm-meal-plan-table {
    min-width: 700px; /* oder breiter, je nach Anzahl Spalten */
}

.mmm-single-meal-plan .mmm-recipe-behind-meal-categories-list  {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mmm-single-meal-plan .mmm-recipe-behind-meal-categories-list-item {
    display: inline;
    color: var(--mmm-text);
}

.mmm-single-meal-plan .mmm-recipe-behind-meal-categories-list-item::after {
    content: ", "; /* Standard: Komma + Leerzeichen */
}

.mmm-single-meal-plan .mmm-recipe-behind-meal-categories-list-item:last-child::after {
    content: "";
}

.mmm-single-meal-plan .mmm-meal-type-label {
    color: var(--mmm-primary);
    font-weight: 600;
}

.mmm-single-meal-plan .mmm-meal-title a:hover {
    opacity: 0.7;
}

.mmm-single-meal-plan .mmm-meal-item {
    margin-bottom: 0.5rem;
}

.mmm-single-meal-plan .mmm-meal-title a {
    color: var(--mmm-secondary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mmm-single-meal-plan .mmm-meal-title a:hover {
    opacity: 0.7;
}

.mmm-single-meal-plan .mmm-meal-servings {
    color: var(--mmm-text);
    margin-top: 0.25rem;
}

.mmm-single-meal-plan .mmm-simple-shopping-list {
    margin-top: 2rem;
}

.mmm-single-meal-plan .mmm-shopping-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mmm-single-meal-plan .mmm-shopping-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 0.75rem 0;
}

.mmm-single-meal-plan .mmm-shopping-item:last-child {
    border-bottom: none;
}

.mmm-single-meal-plan .mmm-shopping-item summary {
    cursor: pointer;
    color: var(--mmm-text);
    list-style: none;
}

.mmm-single-meal-plan .mmm-shopping-item summary::-webkit-details-marker {
    display: none;
}

.mmm-single-meal-plan .mmm-shopping-item summary::after {
    content: '＋';
    float: right;
    line-height: 1;
    transition: transform 0.2s ease;
    color: var(--mmm-secondary);
}

.mmm-single-meal-plan .mmm-shopping-item[open] summary::after {
    content: '−';
}

.mmm-single-meal-plan .mmm-shopping-item ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    list-style: square;
    color: var(--mmm-text);
}



/* --- Recipe Archive --- */

/*
With shortcodes
[mixmymeals_all_recipes]
*/

.mmm-recipe-archive .mmm-recipe-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.mmm-recipe-archive .mmm-recipe-energy::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;              /* Solid Icons */
    color: var(--mmm-secondary);
    margin-right: 0.4em;
    font-size: 0.9rem;
}

.mmm-recipe-archive .mmm-recipe-categories-list::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--mmm-secondary);
    margin-right: 0.4em;
    font-size: 0.9rem;
}

.mmm-recipe-archive .mmm-recipe-thumb-wrap {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--mmm-shadow);
}

.mmm-recipe-archive .mmm-recipe-thumb {
    width: 100%;
    height: auto;
    display: block;
}

.mmm-recipe-archive .mmm-recipe-title {
    margin: 0 0 0.5rem 0;
}

.mmm-recipe-archive .mmm-recipe-title a {
    color: var(--mmm-secondary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mmm-recipe-archive .mmm-recipe-title a:hover {
    opacity: 0.7;
}

.mmm-recipe-archive .mmm-recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    color: var(--mmm-text);
    margin-bottom: 0.8rem;
}

.mmm-recipe-archive .mmm-recipe-excerpt {
    margin-top: auto;
    color: var(--mmm-text);
    line-height: 1.4;
}



/* --- Single Meal Post --- */

.entry-header > .mmm-meal-back-to-meal-plan-link {
    padding-bottom: 0.9rem;
}

.mmm-meal-back-to-meal-plan-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.4em;
    color: var(--mmm-text);
    font-size: 0.9rem;
}



/* --- Ingredients Archive --- */

/*
With shortcodes
[mixmymeals_all_ingredients]
*/

.mmm-ingredients-archive .mmm-ingredient-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.mmm-ingredients-archive .mmm-ingredient-title {
    margin: 0 0 0.5rem 0;
}

.mmm-ingredients-archive .mmm-ingredient-title a {
    color: var(--mmm-secondary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mmm-ingredients-archive .mmm-ingredient-title a:hover {
    opacity: 0.7;
}