/* 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;
  /* Column gap (between side-by-side sections) is controllable via the Menu
     Builder element's "Gap between sections" control, which sets
     --mf-section-gap on this container. Row gap keeps a fixed rhythm. */
  column-gap: var(--mf-section-gap, 1.25rem);
  row-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;
}

/* A section narrower than 100% subtracts the column gap from its basis so two
   (or more) tile within 100% with the gap between them — e.g. 2×50% fit on one
   row. Full-width sections keep an exact 100% (no inset). --mf-section-gap is
   inherited from .mf-menu__sections. */
.mf-section--partial {
  /* !important: the Breakdance element ships a base .bde-menu-builder .mf-section
     width rule (specificity 0,2,0, compiled into its per-page CSS) that otherwise
     beats this (0,1,0) rule and leaves partials at the FULL fraction, so 2×50% +
     gap overflows and wraps. !important wins without needing a Breakdance CSS
     regen on every site. Section widths are plugin-owned, so this is safe.
     Subtract the column gap so N tile within 100%; drop the 200px floor so a
     chosen fraction always tiles even in a narrow container. */
  flex-basis: calc(var(--mf-section-width, 100%) - var(--mf-section-gap, 1.25rem)) !important;
  width: calc(var(--mf-section-width, 100%) - var(--mf-section-gap, 1.25rem)) !important;
  max-width: calc(var(--mf-section-width, 100%) - var(--mf-section-gap, 1.25rem)) !important;
  min-width: 0 !important;
}

/* Zero-height full-width flex item that forces the next section onto a new row
   ("Clear row" in the section settings). */
.mf-section-break {
  flex: 0 0 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Custom-content sections render an author-provided shortcode (gallery,
   global block, etc.) instead of menu items. Strip the standard section
   chrome — padding, header spacing, lists — so the shortcode flows edge
   to edge inside whatever container the section is allocated. Page-builder
   skins layered on .mf-section often add their own padding; the
   .mf-section--custom > .mf-section__custom child also resets padding so
   neither side fights the other. */
.mf-section--custom {
  padding: 0;
}

.mf-section__custom {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

.mf-section__custom > *:first-child {
  margin-top: 0;
}

.mf-section__custom > *:last-child {
  margin-bottom: 0;
}

/* Below desktop, sections always span the full container width. The admin
   width slider is a desktop-only setting. */
@media (max-width: 1023px) {
  /* !important so this beats the desktop partial rule above (also !important). */
  .mf-section,
  .mf-section--partial {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Below desktop everything stacks, so a clear-row break is a no-op. */
  .mf-section-break {
    display: none;
  }
}

.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.
 */
/* A variant is a label + its price ("Large  12"). Without this the two spans butt
   together and render as "Large12" in the inline price layout. The gap is driven
   by --mf-item-variant-gap so the Breakdance element's "Between price label and
   price" control can set it once for both the inline and block layouts. */
.mf-item__variant {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mf-item-variant-gap, 0.4rem);
}

.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: var(--mf-item-variant-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;
}