/* -----------------------------------------------------------------------------
   mod-a-menu-table — a priced menu as a real table.

   Adapted from mod-compare.css: the same hairline table discipline and the
   same ≤1000px stacked-card reflow (roles stay on the elements; each td
   re-labels itself from data-label). Two deliberate differences:

     1. The first column is a genuine row header (th scope="row") styled as
        a serif item name but NOT as a link — menu items have no child pages,
        and dressing a non-link as a link would be worse than either.
     2. A price column, right-most, set in the label weight so a scanning
        eye can run down it. Prices here are only ever figures the practice
        has published, quoted with their own wording.

   No hovers: nothing in this module is interactive. Links that appear
   INSIDE a cell (contextual links in a description) inherit the global
   link styles. Tokens only, as everywhere.
   -------------------------------------------------------------------------- */

.b-a-menu__inner {
  max-width: var(--container);
}

.b-a-menu__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-10);
}

.b-a-menu__eyebrow {
  display: block;
  margin-bottom: var(--sp-4);
}

.b-a-menu__h {
  margin-bottom: var(--sp-5);
}

.b-a-menu__lede {
  color: var(--soft);
}

/* --- the table ------------------------------------------------------------ */

.b-a-menu__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
}

.b-a-menu__table thead th {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--soft);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.b-a-menu__table tbody th,
.b-a-menu__table td {
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  vertical-align: top;
  text-align: left;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.b-a-menu__table tbody tr:last-child th,
.b-a-menu__table tbody tr:last-child td {
  border-bottom: 0;
}

/* The item cell is a genuine row header — screen readers announce the item
   with every cell. Serif name, plain text, no link affordance. */
.b-a-menu__item {
  min-width: 180px;
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  font-weight: var(--w-title);
  line-height: var(--lh-display-m);
  color: var(--ink);
}

/* The second half of a two-part treatment name — "(Collagen Induction
   Therapy)", "by BioRePeel® Cl Blue". Both are in the practitioner's own menu
   and both carry search weight, so they belong on the page; they are set
   quieter and on their own line so the row still reads as one treatment
   rather than a run-on heading. */
.b-a-menu__alt {
  display: block;
  margin-block-start: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--w-body);
  line-height: var(--lh-small);
  color: var(--soft);
}

/* The price column reads as a column: label weight, kept narrow. */
.b-a-menu__price {
  font-weight: var(--w-label);
  color: var(--ink);
}

/* A note inside a cell (a pairing suggestion, a safety line) sits under the
   description at small size — the markup carries t-small t-soft; this only
   spaces it. */
.b-a-menu__note {
  margin-top: var(--sp-2);
}

/* --- packaged pricing and add-on tables (added 12 Aug 2026, /aesthetics/) ---
   The block's own header always expected this: "Memberships (four tiers,
   published prices) and the detox pillar's pricing will want this block too."
   Aesthetics got there first. Three additions, all general rather than
   page-specific, so memberships can use them unchanged. */

/* A second price on the same cell — "$250" then "pkg of 3 — $635". Its own
   line, quieter than the single price above it, so the eye still lands on the
   one-off cost first. A small note under BOTH (the recommended frequency)
   carries t-small t-soft in the markup and is spaced by the rule below. */
.b-a-menu__pkg {
  display: block;
  margin-top: var(--sp-1);
  font-weight: var(--w-body);
  color: var(--soft);
}

/* Any t-small directly inside a price cell — the "recommended as a series of
   3" line. Spaced away from the figures so the cell reads as price-then-caveat
   rather than as one run-on. */
.b-a-menu__price .t-small {
  display: block;
  margin-top: var(--sp-2);
}

/* A second, shorter table under the main one. It is a separate <table> rather
   than more rows because its items are priced per ADD-ON, not per treatment,
   and a $50 add-on sitting in the same column as a $300 service invites a
   comparison that is not being offered. */
.b-a-menu__table--addons {
  margin-top: clamp(var(--sp-12), 6vw, var(--sp-16));
}

/* The add-on table's caption doubles as its heading. Left-aligned to the table
   edge — a centred caption reads as a figure title and this is a section. */
.b-a-menu__caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--sp-4);
}

/* --- copy slots ----------------------------------------------------------- */

.b-a-menu .s-slot {
  color: var(--soft);
  text-decoration: underline dashed var(--line);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* --- stacked (≤1000px) ----------------------------------------------------
   Rows become cards, exactly as mod-compare does it. Roles stay on the
   elements so the display switch does not strip the table semantics. */

@media (max-width: 1000px) {
  .b-a-menu__table,
  .b-a-menu__table tbody,
  .b-a-menu__table tr,
  .b-a-menu__table th,
  .b-a-menu__table td {
    display: block;
  }

  .b-a-menu__table tbody th {
    padding: 0 0 var(--sp-5);
    border-bottom: 0;
  }

  /* Kept for screen readers, removed from view. */
  .b-a-menu__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .b-a-menu__table {
    background: transparent;
    border: 0;
  }

  .b-a-menu__table tr {
    background: var(--card);
    border: 1px solid var(--line);
    padding: var(--sp-5) var(--sp-5) var(--sp-2);
  }

  .b-a-menu__table tr + tr {
    margin-top: var(--sp-4);
  }

  .b-a-menu__table td {
    padding: 0 0 var(--sp-5);
  }

  /* Each data cell re-labels itself with its column head. */
  .b-a-menu__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--t-label);
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-1);
  }

  .b-a-menu__item {
    min-width: 0;
  }
}