/**
 * Public CSS for Restaurant Menu Plugin
 */

/* Container */
.restaurant-menu-container {
    margin: 20px 0;
}

/* Category styling */
.restaurant-menu-category {
    margin-bottom: 30px;
}

.restaurant-menu-category-title {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 24px;
}

/* Column layout: CSS grid gives a deterministic column count at every width,
   so columns never wrap unpredictably based on content the way flex-basis
   overflow did. row-gap is 0 so when columns stack (or an extra row wraps)
   no vertical gap opens between them; column-gap keeps the horizontal spacing. */
.restaurant-menu-items {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 75px;
    row-gap: 0;
    align-items: start;
}

.restaurant-menu-column {
    min-width: 0; /* Allow grid tracks to shrink instead of overflowing */
}

/* Column count is driven by the col-N class, which sits on
   .restaurant-menu-items itself (compound selector, no descendant space). */
.restaurant-menu-items.restaurant-menu-col-1 {
    grid-template-columns: 1fr;
}

.restaurant-menu-items.restaurant-menu-col-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restaurant-menu-items.restaurant-menu-col-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.restaurant-menu-items.restaurant-menu-col-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Menu item styling - updated to match requirements */
.restaurant-menu-item {
    padding: 15px 0;
    margin-bottom: 10px;
    box-sizing: border-box;
    position: relative;
}

.restaurant-menu-item-content {
    position: relative;
}

/* Updated title styling */
.restaurant-menu-item-title {
    margin-top: 0;
    margin-bottom: 7px;
    padding-right: 75px; /* Standard padding for single price */
    font-size: 21px;
    line-height: 1.1;
    font-weight: 800;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* Allow natural line breaks */
}

/* Titles without prices don't need padding for price */
.restaurant-menu-item-title.no-price {
    padding-right: 0;
}

.last-word-with-icons {
    white-space: nowrap; /* Force the last word and icons to stay together */
    display: inline-flex; /* Use inline-flex to properly align the contents */
    align-items: center; /* Vertically center the icons with the text */
    vertical-align: baseline; /* Align with the rest of the text */
}

/* Add extra padding for titles with dual pricing */
.restaurant-menu-item-title.has-dual-pricing {
    padding-right: 100px; /* Increased padding for dual prices */
}

/* No-price overrides dual pricing padding */
.restaurant-menu-item-title.has-dual-pricing.no-price {
    padding-right: 0;
}

.restaurant-menu-item-price {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    font-size: 20px;
    font-family: var(--main-body);
    line-height: 1.4;
}

.restaurant-menu-item-description {
    margin-top: 7px;
    font-size: 17px;
    line-height: 1.45;
    color: #000;
}

/* Updated as requested */
.restaurant-menu-item-description p {
    margin-bottom: 0px;
}

/* Updated as requested */
.restaurant-menu-item-notes {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.2;
    color: #000;
    font-family: var(--main-body);
    margin-bottom: 4px;
}

.restaurant-menu-item-image {
    margin-bottom: 10px;
}

.restaurant-menu-item-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Updated title with icons styling */
.title-with-icons {
    display: inline;
    white-space: normal; /* Allow normal word wrapping */
}

/* Make title text display properly */
.title-text {
    display: inline;
}

/* Target ONLY the last word with CSS and make it non-breaking with icons */
.title-text > span:last-child {
    white-space: nowrap;
}

/* Improved dietary icons container */
.restaurant-menu-dietary-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 16px;
    margin-left: 9px;
    position: relative;
    top: 1px; /* Fine-tune vertical position */
    white-space: nowrap; /* Prevent breaks between icons */
}

/* Hide empty dietary icons container */
.restaurant-menu-dietary-icons:empty {
    display: none;
}

/* Dietary icon circles */
.dietary-icon {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px;
    flex-shrink: 0; /* Prevent icons from shrinking */
}

/* Food dietary icons - original styling */
.dietary-icon.vegetarian,
.dietary-icon.gluten-free,
.dietary-icon.vegan {
    background: var(--tan) !important;
}

/* Beer/Wine icons with circles - new styling */
.dietary-icon.on-cask,
.dietary-icon.on-nitro,
.dietary-icon.growler-fills {
    background: var(--tan) !important;
}

/* Special icons without circles (star and can) */
.special-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px;
    color: var(--tan) !important;
    position: relative;
    flex-shrink: 0; /* Prevent icons from shrinking */
}

.special-icon.just-added-star {
    font-size: 19px;
}

.special-icon.in-can {
    font-size: 19px;
    font-family: 'Font Awesome 7 Pro';
    font-weight: 300;
}

/**
 * Updated beverage pricing styles
 */

/* Update beverage prices styling to match single price */
.restaurant-menu-item-price.beverage-prices {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    font-size: 20px;
    font-family: var(--main-body);
    line-height: 1.4;
    padding-top: 0;
    text-align: right;
}

/* Alternative layout for browsers that don't support :has() */
@supports not (selector(:has(*))) {
    .restaurant-menu-item-title {
        padding-right: 80px;
    }
    
    .restaurant-menu-item-title.has-dual-pricing {
        padding-right: 120px;
    }

    .restaurant-menu-item-title.no-price {
        padding-right: 0;
    }
}

/* Responsive column counts. With CSS grid each breakpoint sets an exact column
   count, so every section with the same col-N class collapses at the same width
   (no content-dependent drift) and there is never a wrap gap. Progression:
   col-4: 4 -> 3 (992) -> 2 (980) -> 1 (576); col-3: 3 -> 2 (980) -> 1 (576);
   col-2: 2 -> 1 (576). */
@media (max-width: 992px) {
    .restaurant-menu-items.restaurant-menu-col-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .restaurant-menu-items.restaurant-menu-col-3,
    .restaurant-menu-items.restaurant-menu-col-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Single column on phones: every layout collapses identically, no gap. */
@media (max-width: 576px) {
    .restaurant-menu-items.restaurant-menu-col-1,
    .restaurant-menu-items.restaurant-menu-col-2,
    .restaurant-menu-items.restaurant-menu-col-3,
    .restaurant-menu-items.restaurant-menu-col-4 {
        grid-template-columns: 1fr;
    }
}

/* No items message */
.restaurant-menu-no-items {
    font-style: italic;
    color: #888;
    margin-left: 15px; /* Using margin instead of padding */
}
/* Category notations */
.restaurant-menu-category-included {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 25px !important;
}

.restaurant-menu-category-additions {
    font-size: 17px;
    line-height: 1.4;
    margin-top: 15px;
    margin-bottom: 60px;
}