/* Base layout for shortcode, block, and Breakdance element dependency fallback.
 * Layout (section widths + per-section column count) comes from the admin; visual
 * styling comes from the host (Breakdance element CSS, theme CSS). */
.bde-menuforge-menu .mf-menu,
.mf-menu {
  margin: 0 auto;
  font-family: system-ui, sans-serif;
}

/*
 * Strip every browser/theme/Breakdance default vertical margin from the
 * element's headings and text blocks. All spacing inside a rendered menu is
 * controlled exclusively by the element's "Menu spacing" design controls (or
 * by the host theme via these same selectors with higher specificity) — we
 * don't want the user's chosen 8px gap fighting against, say, `h2 { margin:
 * 0.83em 0 }` from the UA stylesheet or a theme's heading rhythm.
 */
.mf-menu__name,
.mf-section__name,
.mf-item__name,
.mf-menu__description,
.mf-section__description,
.mf-item__description,
.mf-item__extra-info,
.mf-item__allergens,
.mf-menu__footnote {
  margin: 0;
  padding: 0;
}

.mf-item__extra-info {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.85;
}

.mf-menu__pdf-wrap {
  margin: 0.75rem 0 0;
}

.mf-menu__pdf-button {
  display: inline-block;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0.5rem 1rem;
}

.mf-menu__sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
}

.mf-section {
  flex: 0 1 var(--mf-section-width, 100%);
  width: var(--mf-section-width, 100%);
  max-width: var(--mf-section-width, 100%);
  min-width: 200px;
  box-sizing: border-box;
}

/* Below desktop, sections always span the full container width. The admin
   width slider is a desktop-only setting. */
@media (max-width: 1023px) {
  .mf-section {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

.bde-menuforge-menu .mf-section__items,
.mf-section__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Responsive per-section column count, driven by data-cols-* attributes
 * emitted from PublicRenderer. Mobile-first: the data-cols-mobile rule
 * applies at all widths and is overridden by the wider breakpoints.
 *
 * `row-gap` + `column-gap` are kept separate (not the `gap` shorthand) so
 * the Breakdance "Between item columns" design control can override only
 * the column dimension without clobbering the row gap.
 */
.mf-section__items[data-cols-mobile="1"] {
  display: block;
}
.mf-section__items[data-cols-mobile="2"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0.75rem;
  column-gap: 1.5rem;
}
.mf-section__items[data-cols-mobile="3"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 0.75rem;
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .mf-section__items[data-cols-tablet="1"] {
    display: block;
  }
  .mf-section__items[data-cols-tablet="2"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.75rem;
    column-gap: 1.5rem;
  }
  .mf-section__items[data-cols-tablet="3"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0.75rem;
    column-gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .mf-section__items[data-cols-desktop="1"] {
    display: block;
  }
  .mf-section__items[data-cols-desktop="2"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.75rem;
    column-gap: 1.5rem;
  }
  .mf-section__items[data-cols-desktop="3"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0.75rem;
    column-gap: 1rem;
  }
}

.bde-menuforge-menu .mf-item,
.mf-item {
  margin-bottom: 12px;
}

.bde-menuforge-menu .mf-section__items > .mf-item:last-child,
.mf-section__items > .mf-item:last-child {
  margin-bottom: 0;
}

.bde-menuforge-menu .mf-item__row,
.mf-item__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

/*
 * "Price position = after description" layout. The price block moves out of
 * .mf-item__row (which then just contains the item name) and renders below
 * .mf-item__description as its own block. Variants stack vertically and
 * inherit the item's text-align so the menu-alignment design control still
 * controls placement.
 */
.mf-item__prices--block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 6px;
}
.mf-item__prices--block .mf-item__variant {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
}

.bde-menuforge-menu .mf-item__diet-icons,
.mf-item__diet-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  font-size: 0.7rem;
}

.bde-menuforge-menu .mf-item__diet-icon,
.mf-item__diet-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  padding: 0;
  background: transparent;
}

.mf-item__diet-icon-img,
.mf-menu__diet-legend-icon {
  width: var(--mf-diet-icon-size, 20px);
  height: var(--mf-diet-icon-size, 20px);
  object-fit: contain;
  display: block;
}

.mf-item__diet-icon-label {
  font-size: 0.75rem;
  line-height: 1.2;
}

.mf-menu__diet-legend {
  margin-top: 1.5rem;
}

.mf-menu__diet-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mf-menu__diet-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mf-menu__diet-legend-label {
  font-size: 0.8125rem;
  line-height: 1.2;
}

/* Legacy text-only dietary tags when no custom icons are configured */
.mf-item__diet-icon:not(:has(.mf-item__diet-icon-img)) {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
}

.mf-menuforge-ssr-message {
  margin: 0;
  padding: 12px 16px;
  color: #666;
  font-style: italic;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

/* Per-section center items — overrides Breakdance item_align for this section only */
.mf-section[data-mf-center-items="1"] .mf-item,
.mf-section[data-mf-center-items="1"] .mf-item__description,
.mf-section[data-mf-center-items="1"] .mf-item__extra-info,
.mf-section[data-mf-center-items="1"] .mf-item__allergens {
  text-align: center !important;
}
.mf-section[data-mf-center-items="1"] .mf-item__row {
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
.mf-section[data-mf-center-items="1"] .mf-item__diet-icons {
  justify-content: center;
}
.mf-section[data-mf-center-items="1"] .mf-item__prices--block .mf-item__variant {
  justify-content: center;
}

.mf-section[data-mf-featured="1"],
.mf-item[data-mf-featured="1"] {
  box-sizing: border-box;
}