/* ── WordPress / Elementor bridge ────────────────────────────────────────────
   assets/src/ holds the React build's four stylesheets, copied verbatim; they
   own every design decision. This file only reconciles Elementor's DOM with the
   markup those stylesheets were written against. It introduces no new values —
   everything below reads from tokens.css.

   Pages are built from Elementor's own Heading / Text / Image / Button widgets
   so the client edits copy in the editor rather than in a code box. Elementor
   wraps each widget in two divs and puts the CSS-class field on the OUTER
   wrapper — not on the <a>, <img> or list the stylesheets target. Most of what
   follows is that reconciliation.
   ------------------------------------------------------------------------- */

/* ── 1. Closed states ─────────────────────────────────────────────────────
   React mounted the sheet and the mobile nav only while open, so components.css
   never needed a closed state. WordPress renders them once and toggles [hidden],
   which a class rule setting `display` silently outranks. */
[hidden] { display: none !important; }

/* ── 2. Buttons that hold real sentences ──────────────────────────────────
   Elementor's reset sets `white-space: nowrap` on <button>. The accordion
   trigger holds a whole question, so on a phone it could not wrap and pushed
   the page wider than the viewport. */
.accordion__trigger,
.cat-sheet button,
.menu-bar__jump,
.chip { white-space: normal; }

/* ── 3. Layout primitives ─────────────────────────────────────────────────
   Elementor's `.e-con` defaults are declared with the same specificity as the
   ported classes, so the two primitives everything sits inside are re-asserted
   one notch higher. Nothing else about container layout is touched. */
.e-con.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.e-con.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }
.e-con.section { padding-block: var(--space-2xl); }
.e-con.section--tight { padding-block: var(--space-xl); }
.e-con.hero { display: flex; flex-direction: column; justify-content: flex-end; }
.e-con.split__grid, .e-con.location__grid, .e-con.page-hero__split,
.e-con.faq__grid, .e-con.bestsellers__layout, .e-con.contact__grid { display: grid; }

/* ── 4. r-pass ────────────────────────────────────────────────────────────
   A Text widget whose content carries the real class contributes no box of its
   own, so that element sits directly in the surrounding layout. */
.r-pass,
.r-pass > .elementor-widget-container { display: contents; }

/* ── 5. Headings and text ─────────────────────────────────────────────────
   Keep the element styles base.css gives h1–h4; only drop the wrapper margin.
   Where a ported class sets the size on the wrapper, let the inner tag inherit. */
.elementor-widget-heading .elementor-heading-title { margin: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.location__subhead .elementor-heading-title,
.dish-card__name .elementor-heading-title { font: inherit; letter-spacing: inherit; }

/* ── 6. Buttons ───────────────────────────────────────────────────────────
   Paint the anchor; variant classes stay on the wrapper so their custom
   properties cascade into it. The wrapper carries `btn` only to pass those
   properties down, so base.css's own .btn box has to be stripped off it —
   otherwise every button renders as two nested pills. */
.elementor-widget-button.btn {
  background: none; border: 0; box-shadow: none; padding: 0;
  display: block; border-radius: 0; transform: none;
}
.elementor-widget-button.btn:hover { background: none; box-shadow: none; transform: none; }
.elementor-widget-button.btn .elementor-button {
  --btn-bg: var(--tomato); --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem; background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step-0);
  letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease), color .18s var(--ease);
}
.elementor-widget-button.btn .elementor-button:hover {
  background: var(--btn-bg); color: var(--btn-fg);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.elementor-widget-button.btn .elementor-button:hover { --btn-bg: var(--tomato-dark); }
.elementor-widget-button.btn--lg .elementor-button { padding: 1.05rem 2rem; font-size: var(--step-1); }
.elementor-widget-button.btn--sm .elementor-button { padding: .6rem 1.1rem; font-size: var(--step--1); }
.elementor-widget-button.btn--ghost .elementor-button {
  --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); box-shadow: none;
}
.elementor-widget-button.btn--ghost .elementor-button:hover {
  --btn-bg: var(--ink); --btn-fg: var(--paper); border-color: var(--ink);
}
.elementor-widget-button.btn--ghost-light .elementor-button {
  --btn-bg: transparent; --btn-fg: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 35%, transparent); box-shadow: none;
}
.elementor-widget-button.btn--ghost-light .elementor-button:hover {
  --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--paper);
}
.cta-band .elementor-widget-button.btn .elementor-button { --btn-bg: var(--ink); }
.cta-band .elementor-widget-button.btn .elementor-button:hover { --btn-bg: #000; }
.elementor-widget-button.link-arrow .elementor-button {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  color: var(--tomato); font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--tomato) 35%, transparent);
}
.elementor-widget-button.link-arrow .elementor-button:hover {
  transform: none; box-shadow: none; border-color: var(--tomato); color: var(--tomato);
}
.elementor-widget-button .elementor-button-wrapper { line-height: 0; }

/* Button rows size to their content instead of stretching on the cross axis. */
/* Elementor's widget CSS prints after the theme sheets and sets widgets to the
   container width, so these carry the container class too, one notch higher. */
.e-con.hero__actions > .elementor-element,
.e-con.page-hero__actions > .elementor-element,
.e-con.bestsellers__actions > .elementor-element,
.e-con.cta-band__actions > .elementor-element,
.e-con.location__actions > .elementor-element,
.e-con.reviews__cta-buttons > .elementor-element,
.e-con.faq__actions > .elementor-element,
.e-con.specials__head > .elementor-widget-button,
.e-con.split__text > .elementor-widget-button,
.e-con.reviews__cta > .elementor-widget-button { width: auto; flex: 0 0 auto; }
.e-con.hero__actions, .e-con.page-hero__actions, .e-con.bestsellers__actions,
.e-con.cta-band__actions, .e-con.location__actions, .e-con.reviews__cta-buttons,
.e-con.faq__actions { flex-direction: row; flex-wrap: wrap; }

/* ── 7. Images ────────────────────────────────────────────────────────────
   Fill the frame the way SmartImage did, without relying on a percentage-height
   chain through Elementor's wrappers. */
.elementor-widget-image img { display: block; max-width: 100%; height: auto; }
/* Elementor prints widget-image.css after the theme sheets, so these are scoped
   one class deeper to out-rank it rather than reaching for !important. */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media .elementor-widget-image,
.hero__media .elementor-widget-image .elementor-widget-container { position: absolute; inset: 0; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(15 10 7 / .95) 0%, rgb(15 10 7 / .86) 38%,
                    rgb(15 10 7 / .42) 78%, rgb(15 10 7 / .25) 100%),
    linear-gradient(to top, rgb(15 10 7 / .92), rgb(15 10 7 / .12) 58%), rgb(15 10 7 / .2);
}
.hero__media .elementor-widget-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__media .elementor-widget-image img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.page-hero__media .elementor-widget-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dish-card__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── 8. Sticky menu bar ───────────────────────────────────────────────────
   position:sticky needs a containing block taller than the element. The bar and
   the item list therefore share one section container. */
.menu-shell { position: relative; }

/* Card grid and cards are containers now, so the photo inside each is a real
   Image widget the client can click and replace from the media library. */
.e-con.bestsellers__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.e-con.dish-card { display: flex; flex-direction: column; }
.e-con.dish-card__media { position: relative; overflow: hidden; display: block; }
.dish-card__media .elementor-widget-image { display: block; }
.e-con.dish-card__body { display: flex; flex-direction: column; gap: .3rem; }
.dish-card__cat .elementor-heading-title,
.dish-card__desc p { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }

/* Elementor containers default to a column; these ported rows need their
   original direction and alignment back. */
.e-con.beer-wine-banner__inner { flex-direction: row; align-items: center; justify-content: center; gap: 1rem; }
.e-con.specials__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.e-con.cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.e-con.reviews__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.e-con.catering__menu-split { flex-direction: row; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.e-con.catering__menu-split > * { flex: 1 1 320px; }


/* --------------------------------------------------------
   Hero background video
   The .hero__media container holds the still image widget (instant
   paint + fallback) with the video layered directly over it. The
   .hero__media::after scrim above still paints last, so the text
   contrast is unchanged.
   ------------------------------------------------------- */
.hero__media .elementor-widget-html,
.hero__media .elementor-widget-html .elementor-widget-container {
	position: absolute;
	inset: 0;
	margin: 0;
}

.hero__media .hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Source is near-square (1080x1092); bias the crop upward so the
	   hands and food stay in frame in a wide banner. */
	object-position: 50% 33%;
	pointer-events: none;
	border: 0;
}

/* No motion for people who ask for none - the still image shows through. */
@media (prefers-reduced-motion: reduce) {
	.hero__media .hero__video { display: none; }
}