/* ──────────────────────────────────────────────────────────────
   components.css — The Haven at Hickory Stick
   Print-style typographic menu mirroring the source PDF.
   ────────────────────────────────────────────────────────────── */

/* ── Brand / header ──────────────────────────────────────────── */
.brand {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.brand__wordmark {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: clamp(1.4rem, 2.6vw + 0.6rem, 2.4rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  /* the trailing letter-spacing pushes the text optically right; nudge back */
  padding-left: 0.22em;
}
.brand__tagline {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-copper);
}
.brand__tagline:empty { display: none; }

/* ── Sticky section tabs ─────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 0 var(--space-4);
  height: var(--tabs-height);
  font-family: var(--font-heading);
  font-size: var(--fs-tab);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  scroll-snap-align: center;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.tab:hover { color: var(--color-charcoal); }
.tab[aria-selected="true"] {
  color: var(--color-copper);
  border-bottom-color: var(--color-copper);
}

/* ── Menu sections ───────────────────────────────────────────── */
.menu-cat { margin-bottom: var(--space-8); }
.menu-cat:last-child { margin-bottom: 0; }

.menu-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.category-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.category-unit {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── Item list — two columns on wider screens ────────────────── */
.item-list {
  columns: 1;
  column-gap: var(--space-9);
}
@media (min-width: 760px) {
  .item-list { columns: 2; }
}
.item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: var(--space-5);
}

/* name … price row */
.item__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.item__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-item);
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-copper);
}
.item__subtitle {
  font-size: var(--fs-sub);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.item__dots,
.variant__dots {
  flex: 1 1 auto;
  align-self: center;
  margin: 0 var(--space-1);
  border-bottom: 1px dotted var(--color-divider);
  transform: translateY(-0.18em);
}
.item__price {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-price);
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  color: var(--color-copper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item__desc {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-desc);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  max-width: 46ch;
}

/* ── Grouped items (brand + multiple expressions) ────────────── */
.item--grouped .item__name { margin-bottom: var(--space-1); }
.item__variants {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-1);
}
.variant {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.variant__label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-desc);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.variant__price {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-desc);
  letter-spacing: 0.04em;
  color: var(--color-copper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Menu-wide notes ─────────────────────────────────────────── */
#menu-notes { margin-top: var(--space-8); }
#menu-notes:empty { display: none; }
.menu-note {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer-address {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.footer-address:empty { display: none; }
.footer-bottom {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}