/*
 * DOR Menu styles – dark theme with golden accents to mirror the printed menu design.
 */

.dor-menu-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* further reduce vertical gap between groups to fit more content */
}

/* Category heading */
/*
 * By default the category title uses white text for better contrast on the dark
 * background. The underline retains the golden accent.  Users can override
 * these colours with custom CSS in the theme if desired.
 */
.dor-menu-category-title {
    font-size: 2rem;
    font-weight: 600;
    color: #F2F2F2 !important; /* white text */
    margin-bottom: 0.5rem;
    /* remove underline; a separate separator element is used instead */
    border-bottom: none;
    display: block;
    padding: 0.5rem 20px;
}

/* A separator line that appears beneath each category title. This element
   clears any floated images and ensures the golden line matches the width
   of the menu items rather than spanning the entire container. */
.dor-menu-category-separator {
    clear: both;
    height: 2px;
    background-color: #FEC600;
    margin: 0 20px 1rem;
}

/* Group title styling */
.dor-menu-group-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #FEC600 !important;
    margin-bottom: 1.5rem;
    padding: 0 20px;
    border-bottom: 2px solid #FEC600;
}

/* Category image positioning */
/*
 * Category image wrapper.  The image should never occupy more than
 * 30% of the available horizontal space on larger screens so that
 * enough room remains for the list of menu items.  Padding is
 * applied on the left and right to match the horizontal padding used
 * for the category title and separator.  On smaller viewports the
 * image will stack above the title and take the full width of the
 * container (overridden in responsive rules below).
 */
.dor-menu-category-image {
    margin-bottom: 1.5rem;
    max-width: 30%;
    padding: 0 20px;
    box-sizing: border-box;
    /* Make the category image sticky within its section on desktop.  It
       remains visible while scrolling until the end of its parent
       category.  A top offset of 145px aligns it below the site
       header and menu.  Position is reset to static on mobile via
       media queries below. */
    position: -webkit-sticky;
    position: sticky;
    top: 145px;
}
.dor-menu-category-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}
/*
 * Align the category image left or right.  We remove the extra
 * horizontal margins because padding already provides spacing and the
 * width is capped at 30%.  Floating the image allows text and menu
 * items to wrap around it on wide screens.  On mobile the float is
 * removed so the image stacks with the content.
 */
.dor-menu-category-image.dor-align-right {
    float: right;
    margin-left: 0;
}
.dor-menu-category-image.dor-align-left {
    float: left;
    margin-right: 0;
}

/* List of items */
.dor-menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* further reduce gap between menu item cards */
}

/* Single menu item card */
/*
 * Each menu item card uses a flex layout to divide its content into two
 * logical columns.  The left column occupies roughly 60% of the card
 * and contains the item title and description.  The right column
 * occupies up to 30% of the card and contains the price and weight.
 * The remaining space accounts for padding and gap.  Flex‑wrap is
 * enabled so that on narrow screens the right column flows beneath
 * the left column instead of overlapping it.  Align items at the
 * start to keep the content anchored to the top of the card.
 */
.dor-menu-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    background-color: rgba(25, 23, 31, 0.9);
    border-radius: 15px;
    padding: 15px 20px;
    width: calc(50% - 1.5rem);
    color: #F2F2F2;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Make cards more compact by default */
    min-height: 100px;
    box-sizing: border-box;
}

/* Left column of a menu item: occupies about 60% of the card width.  Text
   will wrap onto multiple lines as needed. */
.dor-menu-item-left {
    flex: 0 0 60%;
    max-width: 60%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Right column of a menu item: occupies up to 30% of the card width.  The
   price and weight are displayed inline and allowed to wrap to the next
   line when there is insufficient space.  The container uses flex to
   align items horizontally and wraps when necessary. */
.dor-menu-item-right {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    text-align: right;
}

/* Within the right column display price and weight inline with no forced
   line breaks.  White‑space nowrap ensures they stay together when
   possible, but flex‑wrap on the parent will move the weight onto the
   next line if space runs out. */
.dor-menu-item-right .dor-menu-item-price,
.dor-menu-item-right .dor-menu-item-weight {
    display: inline;
    white-space: nowrap;
}

/* Wrapper for title and meta (price + weight) allowing absolute positioning of meta */
.dor-menu-item-header {
    position: relative;
}

/* Meta container containing price and weight; aligned horizontally */
.dor-menu-item-meta {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

/* Item title */
.dor-menu-item-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: #FEC600 !important;
    margin-bottom: 0.5rem;
    display: block;
}

/* Item price */
.dor-menu-item-price {
    font-size: 1.3rem;
    font-weight: 600;
    color: #F2F2F2 !important; /* price colour changed to white */
}

/* Weight displayed after price */
.dor-menu-item-weight {
    font-size: 0.95rem;
    color: #F2F2F2 !important;
    /* Display weight inline with the price.  Any vertical spacing is handled
       by the flex container in the right column.  Remove margins so the
       weight stays aligned on the same baseline as the price when space
       allows and wraps cleanly below when it does not. */
    margin-top: 0;
    margin-left: 0;
    position: static;
}

/* Display a bullet before the weight */
.dor-menu-item-weight::before {
    content: '•';
    margin-right: 0.2rem;
    color: #F2F2F2;
}

/* Item description */
.dor-menu-item-description {
    /* Remove the top margin so the description sits closer to the title and
       apply a modest bottom margin to tighten spacing.  Setting this
       between 8–10px ensures the description does not add excessive
       vertical space (previously ~24px). */
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #D4D4D4 !important;
}

/* Adjust height for items without description. When a menu item lacks a
   description, the .no-desc class is applied in PHP so that the block
   collapses to fit its content rather than enforcing the default
   minimum height. */
.dor-menu-item.no-desc {
    min-height: auto;
    height: auto;
}

/* Responsive layout: on narrow screens stack menu items and
   images vertically. */
@media (max-width: 768px) {
    .dor-menu-category-image {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        /* Remove sticky positioning on mobile to allow normal flow */
        position: static;
        top: auto;
    }
    .dor-menu-items {
        flex-direction: column;
    }
    .dor-menu-item {
        width: 100%;
    }
    .dor-menu-item-meta {
        position: static;
        margin-top: 0.5rem;
    }
}

/* Extra-small screens: stack everything and remove leftover floats. On very narrow
   viewports (e.g. phones <480px) the two‑column layout collapses entirely and
   elements occupy the full width. The price (și gramajul) appears under titlu
   pentru a preveni suprapunerea. */
@media (max-width: 480px) {
    .dor-menu-container {
        gap: 2rem;
    }
    .dor-menu-category-image {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1rem;
        position: static;
        top: auto;
    }
    .dor-menu-items {
        flex-direction: column;
        gap: 1.5rem;
    }
    .dor-menu-item {
        width: 100%;
        padding: 20px 20px;
    }
    .dor-menu-item-meta {
        position: static;
        margin-top: 0.5rem;
    }
    .dor-menu-item-title {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }
    .dor-menu-item-weight {
        font-size: 0.9rem;
        color: #F2F2F2 !important;
    }
    .dor-menu-item-description {
        font-size: 0.9rem;
    }
}

/* Clear floats after each category */
.dor-menu-category:after {
    content: "";
    display: table;
    clear: both;
}



/* Sticky navigation for jumping between categories */
/*
 * Sticky navigation for jumping between menu sections.  The navigation
 * uses a `position: sticky` so that it follows the user’s scroll but
 * remains anchored below your site’s own header or admin bar.  Many
 * themes implement a sticky header at the top of the page; without an
 * offset our navigation could disappear underneath that header.  To
 * compensate we set a smaller offset than before (145px) to better
 * align with the site’s header.  A subtle border radius is applied
 * for a softer look.
 */
.dor-menu-nav {
    position: sticky;
    top: 145px;
    background-color: rgba(25, 23, 31, 0.95);
    padding: 0.5rem 1rem;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-radius: 8px;
}

/* On mobile devices (<768px), increase the top offset of the sticky menu
   so that it appears below typically taller mobile headers. Feel free
   to adjust this value if your theme uses a different header height. */
@media (max-width: 768px) {
    /*
     * On mobile screens the site header is often taller due to extra
     * navigation bars or admin bars.  Increase the offset for the
     * sticky navigation to ensure it remains visible below the header.
     */
    .dor-menu-nav {
        top: 110px;
        border-radius: 12px;
    }
}


/* Nav list styling.  Items are displayed inline with separators. */
.dor-menu-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0; /* separation handled by custom paddings and separators */
    overflow-x: auto;
    white-space: nowrap;
}

/* Each nav item gets equal horizontal padding.  A vertical bar is
   inserted before every item after the first to separate the links. */
.dor-menu-nav-list li {
    padding: 0 0.75rem;
    position: relative;
    display: flex;
    align-items: center;
}
.dor-menu-nav-list li:not(:first-child)::before {
    content: '|';
    color: #FEC600;
    margin-right: 0.75rem;
}

.dor-menu-nav-list li a {
    color: #FEC600;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.dor-menu-nav-select {
    display: none;
    width: 100%;
    background-color: #19171F;
    color: #FEC600;
    padding: 0.5rem;
    border-radius: 5px;
    border: 1px solid #FEC600;
    font-weight: 500;
}

/* Responsive behaviour for nav: show dropdown on small screens */
@media (max-width: 768px) {
    .dor-menu-nav-list {
        display: none;
    }
    .dor-menu-nav-select {
        display: block;
        
}
	
}

/* Reorder category image on mobile: display above title */
@media (max-width: 768px) {
    .dor-menu-category {
        display: flex;
        flex-direction: column;
    }
    .dor-menu-category-image {
        order: -1;
        margin-bottom: 1rem;
    }
}