/* =====================================================================
   Menu page rendered from Elementor (legacy sections / columns / widgets).
   Sections and columns carry the class names the PHP template used, so the
   menu rules in styles.css keep styling them; this sheet covers the places
   where Elementor's wrappers and its own section/column CSS get in the way.
   ===================================================================== */

/* Tokens + cream ground that <main class="page-main menu-page"> used to carry. */
body.page-template-template-menu .elementor,
body.elementor-editor-active.page-template-template-menu .elementor,
body.elementor-editor-preview.page-template-template-menu .elementor {
  --menu-paper: #fff8e7;
  --menu-ink: #24322f;
  --menu-rule: rgba(36, 50, 47, 0.28);
  --menu-press: 8px 8px 0 0 var(--oxblood);
  --menu-press-ink: 8px 8px 0 0 var(--teal);
  background: var(--cream);
  color: var(--menu-ink);
}

/* Sections and columns carry the theme's class names so descendant rules
   still match -- but the theme's own box/grid rules for those classes must
   not land on the Elementor wrapper itself. Reset them here; the rules below
   re-apply each one on the right inner element. */
body.page-template-template-menu .elementor-section[class*="menu-"],
body.page-template-template-menu .elementor-column[class*="menu-"],
body.page-template-template-menu .elementor-column[class*="fm-"] {
  display: block; grid-template-columns: none; gap: 0; max-width: none; min-width: 0;
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible; aspect-ratio: auto; position: relative; top: auto; z-index: auto;
}
/* Keep `position: relative` (Elementor's own): in the editor every section
   holds an absolutely-positioned .elementor-background-overlay, and a static
   section lets it grow to the whole page and swallow every click. Width is
   left to Elementor's column classes; `width: auto` would shrink-to-fit. */
body.page-template-template-menu .elementor-column.menu-wrap { width: 100%; }

/* Widget spacing: the menu's rhythm comes from the theme's own margins. */
body.page-template-template-menu .elementor .elementor-widget:not(:last-child) { margin-bottom: 0; }
body.page-template-template-menu .elementor .elementor-column > .elementor-widget-wrap { padding: 0; }

/* The content wrap. */
body.page-template-template-menu .elementor-column.menu-wrap > .elementor-widget-wrap {
  display: block;
  width: min(92rem, calc(100% - 5rem));
  margin: 0 auto;
}

/* Section chrome. */
body.page-template-template-menu .elementor-section.menu-hero { padding: 3rem 0 3.5rem !important; }
body.page-template-template-menu .elementor-section.menu-sec-block { padding: 2.6rem 0 !important; }
body.page-template-template-menu .elementor-section.menu-sec-block.is-paper { background: var(--parchment) !important; }
body.page-template-template-menu .elementor-section.menu-feature { padding: 0 0 2.6rem !important; }
body.page-template-template-menu .elementor-section.menu-hot { position: relative; overflow: hidden; padding: 3rem 0 !important; background: var(--oxblood) !important; }
body.page-template-template-menu .elementor-section.menu-hot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--cream) 2.4px, transparent 3px); background-size: 26px 26px; opacity: 0.16;
}
body.page-template-template-menu .elementor-section.menu-hot > .elementor-container { position: relative; }
body.page-template-template-menu .elementor-section.menu-close { padding: 3rem 0 !important; background: var(--teal) !important; }
body.page-template-template-menu .elementor-section.menu-jump {
  position: sticky; top: 0; z-index: 8; padding: 0 !important;
  background: var(--cream) !important; border-top: 2px solid var(--menu-ink); border-bottom: 2px solid var(--menu-ink);
}

/* Grids: the theme's grid goes on the inner section's container; columns fill their cell. */
body.page-template-template-menu .elementor-section.elementor-inner-section > .elementor-container { display: grid; width: 100%; max-width: none; }
body.page-template-template-menu .elementor-section.elementor-inner-section > .elementor-container > .elementor-column { width: 100%; min-width: 0; }
body.page-template-template-menu .elementor-section.menu-hero-grid > .elementor-container { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
body.page-template-template-menu .elementor-section.menu-hot-grid > .elementor-container { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
body.page-template-template-menu .elementor-section.menu-split > .elementor-container { grid-template-columns: 0.42fr 0.58fr; gap: 3rem; align-items: start; margin-bottom: 2rem; }
body.page-template-template-menu .elementor-section.menu-split.is-flip > .elementor-container { grid-template-columns: 0.58fr 0.42fr; }
body.page-template-template-menu .elementor-section.menu-sec-intro > .elementor-container { grid-template-columns: 1fr minmax(0, 22rem); gap: 2rem; align-items: start; margin-bottom: 2rem; }
body.page-template-template-menu .elementor-section.menu-cards > .elementor-container { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0 0 2rem; }
body.page-template-template-menu .elementor-section.menu-cards.menu-cards--4 > .elementor-container { grid-template-columns: repeat(4, 1fr); }
body.page-template-template-menu .elementor-section.menu-side-cols > .elementor-container { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
body.page-template-template-menu .elementor-section.menu-drink-grid > .elementor-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 1.5rem; margin: 0.65rem 0 1.35rem; }
body.page-template-template-menu .elementor-section.menu-feature-card > .elementor-container {
  grid-template-columns: 1.1fr 1fr; overflow: hidden; background: var(--menu-paper);
  border: 3px solid var(--menu-ink); border-radius: 14px; box-shadow: 10px 10px 0 0 var(--oxblood);
}
body.page-template-template-menu .elementor-section.menu-close-inner > .elementor-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
body.page-template-template-menu .elementor-section.menu-close-inner > .elementor-container > .elementor-column { width: auto; flex: 0 1 auto; }

/* Columns that are boxes in the design. */
body.page-template-template-menu .elementor-column.menu-card > .elementor-widget-wrap {
  overflow: hidden; background: var(--menu-paper); border: 3px solid var(--menu-ink); border-radius: 14px; box-shadow: var(--menu-press);
}
body.page-template-template-menu .elementor-column.menu-card.is-ink > .elementor-widget-wrap { box-shadow: var(--menu-press-ink); }
body.page-template-template-menu .elementor-column.menu-card .elementor-widget-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 3px solid var(--menu-ink); }
body.page-template-template-menu .elementor-column.menu-card .elementor-widget-heading { padding: 1.1rem 1.3rem 0; }
body.page-template-template-menu .elementor-column.menu-card .elementor-widget-heading:last-child { padding-bottom: 1.2rem; }
body.page-template-template-menu .elementor-column.menu-card .elementor-widget-heading + .elementor-widget-heading { padding-top: 0.2rem; padding-bottom: 1.2rem; }
body.page-template-template-menu .elementor-column.menu-cards-single > .elementor-widget-wrap { max-width: 22rem; margin-left: auto; }

body.page-template-template-menu .elementor-column.menu-poster > .elementor-widget-wrap {
  position: relative; overflow: hidden; background: var(--menu-paper);
  border: 3px solid var(--menu-ink); border-radius: 14px; box-shadow: 10px 10px 0 0 var(--oxblood);
}
body.page-template-template-menu .elementor-column.menu-poster.is-on-hot > .elementor-widget-wrap {
  max-width: 23rem; margin-left: auto; border-color: var(--cream); box-shadow: 10px 10px 0 0 var(--cream);
}
body.page-template-template-menu .elementor-column.menu-poster > .elementor-widget-wrap::after {
  content: ""; position: absolute; top: -0.35rem; left: 50%; width: 4.4rem; height: 1.35rem; pointer-events: none;
  background: color-mix(in srgb, var(--mustard) 82%, #fff); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); transform: translateX(-50%) rotate(-2deg);
}
/* Photos: Elementor 4 has no .elementor-widget-container, so a height:100%
   chain from the frame down to the <img> breaks and the photo stops short of
   its box (a bare cream slab under every poster). Give the poster image its
   own aspect ratio and let the frame size to it; the feature photo must match
   the copy column's height, so it fills its frame absolutely instead. */
body.page-template-template-menu .elementor-column.menu-poster img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
}
body.page-template-template-menu .elementor-column.menu-poster.is-on-hot img { aspect-ratio: 3 / 4; }
body.page-template-template-menu .elementor-column.menu-feature-photo > .elementor-widget-wrap { position: relative; height: 100%; min-height: 18rem; }
body.page-template-template-menu .elementor-column.menu-feature-photo .elementor-widget-image { position: absolute; inset: 0; margin: 0; }
body.page-template-template-menu .elementor-column.menu-feature-photo img {
  display: block; width: 100%; height: 100%; max-height: none; object-fit: cover;
}
body.page-template-template-menu .elementor-column.menu-feature-copy > .elementor-widget-wrap { padding: 2.4rem 2.6rem; }
body.page-template-template-menu .elementor-column.menu-feature-copy .elementor-widget-text-editor p { margin: 0.9rem 0 0; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.55; }

/* Drink cards: photo left, copy right, all inside one column. */
body.page-template-template-menu .elementor-column.menu-drink > .elementor-widget-wrap {
  display: grid; grid-template-columns: 7.25rem minmax(0, 1fr) auto; grid-template-areas: "img name price" "img desc desc" "img add add";
  column-gap: 1.15rem; row-gap: 0.35rem; align-items: start; align-content: start;
  padding: 0.95rem 1rem; background: var(--cream); border: 2px solid var(--menu-ink); border-radius: 10px; box-shadow: 5px 5px 0 0 var(--oxblood);
}
body.page-template-template-menu .elementor-column.menu-drink .elementor-widget-image.menu-drink-photo { grid-area: img; }
body.page-template-template-menu .elementor-column.menu-drink .elementor-widget-image.menu-drink-photo img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid var(--menu-ink); border-radius: 8px; background: var(--menu-paper);
}
body.page-template-template-menu .elementor-column.menu-drink .elementor-widget-heading:not(.menu-price):not(.menu-add) { grid-area: name; }
body.page-template-template-menu .elementor-column.menu-drink .elementor-widget-heading.menu-price { grid-area: price; align-self: baseline; }
body.page-template-template-menu .elementor-column.menu-drink .elementor-widget-text-editor { grid-area: desc; }
body.page-template-template-menu .elementor-column.menu-drink .elementor-widget-heading.menu-add { grid-area: add; }
body.page-template-template-menu .elementor-column.menu-drink .elementor-widget-text-editor p { margin: 0; font-family: var(--font-serif); font-size: 0.9rem; line-height: 1.45; opacity: 0.88; }

/* Close band actions. */
body.page-template-template-menu .elementor-column.menu-close-actions > .elementor-widget-wrap { display: flex; flex-wrap: wrap; gap: 0.85rem; }
body.page-template-template-menu .elementor-column.menu-close-actions .elementor-widget-button { width: auto; }

/* ---- Typography: neutralise the theme's generic Elementor-heading rules
   inside the menu, then restate the menu's heading styles. ---- */
body.page-template-template-menu .elementor-widget-heading .elementor-heading-title,
body.page-template-template-menu .elementor-widget-heading.menu-display .elementor-heading-title,
body.page-template-template-menu .elementor-widget-heading.menu-script .elementor-heading-title,
body.page-template-template-menu .elementor-widget-heading.menu-eyebrow .elementor-heading-title {
  font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; line-height: inherit !important; margin: 0 !important; padding: 0 !important;
}
body.page-template-template-menu .elementor-widget-text-editor { color: inherit; }
body.page-template-template-menu .elementor-widget-heading.menu-sec-h2 .elementor-heading-title {
  padding-top: 0.12em !important; color: var(--menu-ink) !important; font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important; letter-spacing: 0.01em !important; line-height: 1.08 !important; text-transform: uppercase !important;
}
body.page-template-template-menu .elementor-widget-heading.menu-sec-h2 + .elementor-widget-heading.menu-script { margin-bottom: 1.5rem; }
body.page-template-template-menu .menu-card h3.elementor-heading-title,
body.page-template-template-menu .menu-drink h3.elementor-heading-title,
body.page-template-template-menu .menu-feature-copy h3.elementor-heading-title,
body.page-template-template-menu .menu-close h2.elementor-heading-title {
  color: var(--menu-ink) !important; font-family: var(--font-display) !important; letter-spacing: 0.02em !important; line-height: 1.1 !important; text-transform: uppercase !important;
}
body.page-template-template-menu .menu-card h3.elementor-heading-title { font-size: 1.35rem !important; }
body.page-template-template-menu .menu-drink h3.elementor-heading-title { font-size: clamp(1.2rem, 2vw, 1.55rem) !important; }
body.page-template-template-menu .menu-feature-copy h3.elementor-heading-title { font-size: clamp(2.4rem, 4vw, 3.5rem) !important; line-height: 1 !important; }
body.page-template-template-menu .menu-close h2.elementor-heading-title { font-size: clamp(2.6rem, 5vw, 4rem) !important; color: var(--cream) !important; }
body.page-template-template-menu .menu-card .elementor-widget.menu-script,
body.page-template-template-menu .menu-feature-copy .elementor-widget.menu-script { margin: 0.2rem 0 0; }
body.page-template-template-menu .menu-card .elementor-widget.menu-script { font-size: 2.1rem; }
body.page-template-template-menu .menu-feature-copy .elementor-widget.menu-script { font-size: clamp(2.1rem, 3.4vw, 3rem); }
body.page-template-template-menu .menu-feature-copy .elementor-widget.menu-price { margin-top: 1.2rem; font-size: 3.2rem; }
body.page-template-template-menu .menu-drink .elementor-widget.menu-price { margin: 0; font-size: 1.2rem; }
body.page-template-template-menu .menu-drink .elementor-widget.menu-add { margin-top: 0.4rem; }
body.page-template-template-menu .menu-hot .elementor-widget.menu-display { margin-top: 0.9rem; color: var(--cream); }
body.page-template-template-menu .menu-hot .elementor-widget.menu-script,
body.page-template-template-menu .menu-close .elementor-widget.menu-script { color: var(--mustard); }
body.page-template-template-menu .menu-hot .elementor-widget.menu-lede { color: var(--cream); }
body.page-template-template-menu .menu-hot-price .elementor-heading-title { display: flex; align-items: baseline; gap: 0.85rem; }
body.page-template-template-menu .menu-hot-price .elementor-heading-title span { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
body.page-template-template-menu .elementor-widget.menu-ribbon { width: auto; align-self: flex-start; }
body.page-template-template-menu .menu-lede p, body.page-template-template-menu .menu-note p,
body.page-template-template-menu .menu-disclaimer p, body.page-template-template-menu .menu-note--callout p,
body.page-template-template-menu .menu-chips .elementor-text-editor,
body.page-template-template-menu .menu-chips ul:not([class]) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; }
/* Chips: the theme's grid lives on the <ul>; here the class is on the widget,
   so restate the type on the widget and the grid on the (class-less) list.
   ul:not([class]) skips the editor's own toolbar <ul> inside the overlay. */
body.page-template-template-menu .elementor-widget.menu-chips {
  display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase;
}
body.page-template-template-menu .menu-chips ul:not([class]) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; padding: 0; list-style: none;
}
body.page-template-template-menu .elementor-widget.menu-subhead { margin: 1.4rem 0 0.4rem; }

/* Dish lists: one editable table per section, styled like the designed rows.
   The theme's .menu-rows grid must not run on the widget wrapper: in the
   editor the tables sit inside an extra .elementor-text-editor div, but on
   the live page they are the wrapper's direct children and would become
   grid cells (two narrow columns). Block wrapper, inline-table halves. */
body.page-template-template-menu .elementor-widget.menu-rows { display: block; grid-template-columns: none; gap: 0; }
.menu-rows table.fm-rows { width: 100%; border-collapse: collapse; margin: 0; }
.menu-rows table.fm-rows td {
  padding: 0.9rem 0; border: 0; border-bottom: 1.5px dotted var(--menu-rule); vertical-align: baseline;
  font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.45; color: var(--menu-ink);
}
.menu-rows table.fm-rows td + td {
  width: 1%; padding-left: 1rem; white-space: nowrap; text-align: right;
  color: var(--oxblood); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.02em;
}
.menu-rows table.fm-rows strong {
  display: inline-block; margin-bottom: 0.3rem; color: var(--menu-ink);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase;
}
.menu-rows table.fm-rows em { margin-left: 0.5rem; color: var(--oxblood); font-family: var(--font-script); font-size: 1.6rem; font-style: normal; line-height: 1; }
.menu-rows table.fm-rows small {
  display: inline-block; margin-top: 0.4rem; color: var(--oxblood);
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
}
.menu-rows--2 table.fm-rows { display: inline-table; width: calc(50% - 1.75rem); vertical-align: top; }
.menu-rows--2 table.fm-rows + table.fm-rows { margin-left: 3.5rem; }

/* Buttons. */
body.page-template-template-menu .elementor-widget-button.menu-btn .elementor-button {
  display: inline-flex !important; align-items: center !important; padding: 0.75rem 1.15rem !important;
  background: var(--oxblood) !important; color: var(--cream) !important; border: 2px solid var(--cream) !important; border-radius: 0 !important;
  font-family: var(--font-display) !important; font-size: 1.05rem !important; font-weight: 400 !important; letter-spacing: 0.04em !important; line-height: 1.2 !important; text-transform: uppercase !important;
  box-shadow: 4px 4px 0 0 #1b2725 !important;
}
body.page-template-template-menu .elementor-widget-button.menu-btn.is-ghost .elementor-button { background: transparent !important; }

/* Responsive: collapse the grids the way the PHP page does. */
@media (max-width: 1100px) {
  body.page-template-template-menu .elementor-section.menu-cards.menu-cards--4 > .elementor-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  body.page-template-template-menu .elementor-section.menu-hero-grid > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-hot-grid > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-split > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-split.is-flip > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-cards > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-cards.menu-cards--4 > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-sec-intro > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-side-cols > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-drink-grid > .elementor-container,
  body.page-template-template-menu .elementor-section.menu-feature-card > .elementor-container { grid-template-columns: 1fr; }
  body.page-template-template-menu .elementor-column.menu-cards-single > .elementor-widget-wrap { margin-left: 0; }
  .menu-rows--2 table.fm-rows { display: table; width: 100%; }
  .menu-rows--2 table.fm-rows + table.fm-rows { margin-left: 0; }
}