/* ============================================================
   BN-MENU (Bella Nova Menu / Shop page)
   Scope: /menu page only. Namespace: bn-menu-.
   Deployed as its own file (assets/css/bn-menu.css), auto-enqueued
   by mu-plugins/bellanova-area-styles.php. Do not fold this into
   the shared theme style.css: that convention was retired because
   concurrent SSH read-modify-write across builders silently drops
   other areas' work (see that plugin's doc comment).
   Shared global classes reused as-is (not bn-menu- prefixed, already
   defined site-wide):
     .bn-reveal / .bn-reveal.is-visible / .d-0 / .d-015
                              (scroll reveal, IntersectionObserver-driven,
                               defined in the theme's base style.css)
     .animate-pulse          (assets/css/animations.css, skeleton pulse)
   Built against design-system/tokens.css custom properties.
   Source of truth: specs/menu-page.md,
     reference/src__pages__Menu.jsx, reference/src__components__DutchieEmbed.jsx
   ============================================================ */

.bn-menu-page {
  padding-top: 128px;
  padding-bottom: 96px;
}
@media (min-width: 768px) {
  .bn-menu-page {
    padding-bottom: 128px;
  }
}

.bn-menu-container {
  max-width: var(--container-max, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .bn-menu-container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ---- Heading block ---- */

.bn-menu-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-moss);
  margin: 0 0 16px;
}

.bn-menu-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.25;
  color: var(--color-forest);
  margin: 0;
}
@media (min-width: 640px) {
  .bn-menu-h1 {
    font-size: 60px;
  }
}
@media (min-width: 1024px) {
  .bn-menu-h1 {
    font-size: 72px;
  }
}
.bn-menu-h1-accent {
  font-style: italic;
  color: var(--color-sage);
}

.bn-menu-intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.625;
  color: var(--color-moss);
  max-width: 576px;
  margin: 24px 0 0;
}

.bn-menu-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  row-gap: 8px;
  margin: 24px 0 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-moss);
}
.bn-menu-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bn-menu-meta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

/* ---- Dutchie full-menu embed ---- */

.bn-menu-embed-wrap {
  margin-top: 48px;
}

.bn-menu-dutchie-frame {
  position: relative;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 8px 32px rgba(44, 59, 46, 0.08);
  padding: 12px;
  min-height: 300px; /* matches reference .dutchie-frame exactly (real-index.css) */
}
@media (min-width: 768px) {
  .bn-menu-dutchie-frame {
    padding: 24px;
  }
}

.bn-menu-dutchie-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    to right,
    rgba(232, 235, 228, 0.4),
    rgba(232, 235, 228, 0.7),
    rgba(232, 235, 228, 0.4)
  );
}
.bn-menu-dutchie-skeleton-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-moss);
}

.bn-menu-dutchie-container {
  position: relative;
  width: 100%;
}

.bn-menu-dutchie-caption {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(92, 107, 94, 0.7);
  text-align: center;
}
/* Scoped to .bn-menu-dutchie-caption (2 classes = specificity 0,2,0) so this beats
   Elementor's global kit rule `.elementor-kit-6 a { color: var(--e-global-color-accent) }`
   (specificity 0,1,1), which was otherwise winning and rendering this link gold instead
   of forest. Confirmed via computed-style measurement against the reference site. */
.bn-menu-dutchie-caption .bn-menu-dutchie-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-forest);
  text-decoration: none;
  transition: color 300ms;
}
.bn-menu-dutchie-caption .bn-menu-dutchie-link:hover,
.bn-menu-dutchie-caption .bn-menu-dutchie-link:focus-visible {
  color: var(--color-sage);
}
.bn-menu-dutchie-link-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---- The theme prints its own page header above the Elementor content, so
   /menu/ opened with a plain "Menu" H1 sitting above the real headline. The
   reference has nothing there. Taken out of the layout rather than made
   invisible, so it leaves the accessibility tree too and the page keeps a
   single H1. ---- */
body.page-id-26 .page-header {
	display: none;
}

/* ---- The menu hero's four widgets already carry the reference's own spacing
   on their inner elements: 16 under the eyebrow, 24 above the intro, 24 above
   the meta row. The Elementor container was adding a 20px flex gap on top of
   every one of them, which is the 60px this block ran long by. The reference
   spaces these with margins alone. ---- */
body.page-id-26 .elementor-element-9a0b1c2 {
	gap: 0;
}