/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* =========================================================
   GENERAL STYLING / MM
   ========================================================= */

.entry-title {
    text-align: center;
}


/* =========================================================
   MENU ITEM ACCORDION / MM
   ========================================================= */

.menu-item,
.menu-item-toggle,
.menu-item-details,
.menu-item-details > *,
.menu-prices,
.menu-price-headers {
    min-width: 0;
}

.menu-item {
    margin-bottom: 0;
}


/* Collapsed menu details */
.menu-item .menu-item-details {
    display: grid;

    grid-template-columns:
        minmax(0, 7fr)
        minmax(0, 3fr);

    grid-template-rows: 0fr;

    column-gap: 10px;
    row-gap: 0;

    width: 100%;

    padding: 0 10px;
    margin: 0;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;

    transition:
        grid-template-rows 0.4s cubic-bezier(.4, 0, .2, 1),
        opacity 0.25s ease,
        padding 0.4s cubic-bezier(.4, 0, .2, 1),
        margin 0.4s cubic-bezier(.4, 0, .2, 1),
        row-gap 0.4s cubic-bezier(.4, 0, .2, 1);
}


/* No image = full-width description */
.menu-item .menu-item-details:not(:has(.menu-item-image img)) {
    grid-template-columns: minmax(0, 1fr);
}


/* Allow accordion row to fully collapse */
.menu-item .menu-item-details > * {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}


/* Open menu details */
.menu-item.is-open .menu-item-details {
    grid-template-rows: 1fr;

    padding: 10px;
    margin-bottom: 10px;

    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   MENU TOGGLE / MM
   ========================================================= */

.menu-item-toggle {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 50px;

    position: relative;
    z-index: 2;

    cursor: pointer;
}

.menu-item-toggle > * {
    width: 100%;
}


/* =========================================================
   MENU ARROW / MM
   ========================================================= */

.menu-item .menu-item-arrow {
    flex: 0 0 auto;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* Flip arrow and change color when open */
.menu-item.is-open .menu-item-arrow {
    transform: rotate(180deg);

    color: var(--e-global-color-accent);
}


.menu-item.is-open .menu-item-arrow svg,
.menu-item.is-open .menu-item-arrow svg * {
    fill: var(--e-global-color-accent);
}


/* =========================================================
   LOOP GRID / MM
   ALWAYS ONE COLUMN
   ========================================================= */

.menu-loop .elementor-loop-container {
    grid-template-columns: minmax(0, 1fr) !important;
}


/* Every loop item fills available width */
.menu-loop .e-loop-item,
.menu-loop .menu-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}


/* Menu items with no price set to 2 columns */
.two-column-loop .elementor-loop-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.two-column-loop .e-loop-item {
    width: auto !important;
    max-width: none !important;
}


/* =========================================================
   MENU PRICES + HEADERS / MM
   ========================================================= */

.menu-prices,
.menu-price-headers {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 0;

    flex: 0 0 auto;

    width: auto;
    min-width: max-content;

    margin: 0;

    white-space: nowrap;
}


/* Headers fill available width and stay right */
.menu-price-headers {
    width: 100%;

    justify-content: flex-end;

    padding-right: 19px;
}


/* Actual prices never move below item name */
.menu-item-toggle .menu-prices {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    flex: 0 0 auto !important;

    width: auto;
    min-width: max-content;

    margin-left: auto;

    white-space: nowrap !important;
}


/* Individual price/header columns */
.menu-prices > *,
.menu-price-headers > * {
    flex: 0 0 auto;

    width: auto;
    min-width: max-content;

    white-space: nowrap;

    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;

    text-align: center;
}


/* Individual prices never wrap or shrink */
.menu-item-toggle .menu-prices > * {
    flex: 0 0 auto !important;

    min-width: max-content;

    white-space: nowrap !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* Divider between Small / Large */
.menu-prices > *:nth-child(2),
.menu-price-headers > *:nth-child(2) {
    border-left: 1px solid currentColor;

    padding-left: 12px;
    margin-left: 12px;
}


/* Protect nested Elementor text */
.menu-prices *,
.menu-price-headers * {
    white-space: nowrap !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* =========================================================
   MENU ITEM TEXT / MM
   ========================================================= */

.menu-item-title,
.menu-item-name,
.menu-item-description {
    min-width: 0;

    white-space: normal;

    word-break: normal;
    overflow-wrap: break-word;
}


/* =========================================================
   MENU ITEM NAME WRAPPING / MM
   ========================================================= */

.menu-item-name {
    flex: 1 1 auto;

    width: auto;
    max-width: 30ch;
    min-width: 0;

    white-space: normal !important;

    word-break: normal;
    overflow-wrap: break-word;
}


.menu-item-name .elementor-heading-title,
.menu-item-name .elementor-widget-container {
    white-space: normal !important;

    overflow-wrap: break-word;
}


/* =========================================================
   MENU IMAGES / MM
   ========================================================= */

.menu-item-image {
    min-width: 0;

    overflow: hidden;
}


.menu-item-image img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   ITEMS WITH NO DESCRIPTION / MM
   ========================================================= */

/* Hide arrow but preserve its exact space */
.menu-item.no-description .menu-item-arrow {
    visibility: hidden !important;
    display: flex !important;
}


/* Remove description/accordion area */
.menu-item.no-description .menu-item-details {
    display: none !important;
}


/* No clickable cursor */
.menu-item.no-description .menu-item-toggle {
    cursor: default !important;
}


/* =========================================================
   RESPONSIVE / MM
   ========================================================= */

@media (max-width: 1280px) {

    /* Loop always stays one column */
    .menu-loop .elementor-loop-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    .menu-loop .e-loop-item,
    .menu-loop .menu-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* Prices remain on one line */
    .menu-prices,
    .menu-price-headers {
        flex: 0 0 auto;

        min-width: max-content;
    }

}


@media (max-width: 767px) {

    /* =====================================================
       MOBILE ACCORDION
       True accordion expansion without height jumping
       ===================================================== */

    .menu-item .menu-item-details {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 0fr;

        column-gap: 0;
        row-gap: 0;

        padding: 0 10px;
        margin: 0;

        overflow: hidden !important;

        pointer-events: none;
    }


    /* Elementor wrappers inside collapsed details */
    .menu-item .menu-item-details > *,
    .menu-item .menu-item-details .elementor-element,
    .menu-item .menu-item-details .elementor-widget,
    .menu-item .menu-item-details .elementor-widget-container {
        min-height: 0 !important;
    }


    /* Restore description when open */
    .menu-item.is-open .menu-item-details {
        grid-template-rows: 1fr;

        row-gap: 10px;

        padding: 10px !important;
        margin-bottom: 10px !important;

        pointer-events: auto;
    }


    /* Loop remains one column */
    .menu-loop .elementor-loop-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    /* Slightly tighter divider spacing */
    .menu-prices > *:nth-child(2),
    .menu-price-headers > *:nth-child(2) {
        padding-left: 8px;
        margin-left: 8px;
    }


    /* Headers stay right aligned */
    .menu-price-headers {
        width: 100%;

        margin: 0;

        justify-content: flex-end;
    }


    /* Prices still never drop below name */
    .menu-item-toggle {
        flex-wrap: nowrap !important;
    }


    .menu-item-toggle .menu-prices {
        flex-wrap: nowrap !important;

        flex: 0 0 auto !important;

        min-width: max-content;

        white-space: nowrap !important;
    }


    /* Menu items with no prices in 2 columns */
    .two-column-loop .elementor-loop-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

}