/* ==========================================================================
   ODETTE GOMES · 2026 PRICELIST
   The list itself. The page wears the global chrome — style.css, theme.css
   and header.css load first — so this file only sets the table, the terms
   line under it and the printed version, using style.css's own tokens.

   A price list is a document, not a mood: black, two greys and hairlines,
   no accent colour, and separated by size, weight, case and letterspacing.
   ========================================================================== */

/* The interior page head leaves room for the header; the list follows it
   straight on rather than a full section's height below. */
.prices-section { padding-top: 0; }

/* A list wants a column, not a spread: the page head and the list share one
   760px column, centred on the page. Header and footer keep the full wrap. */
main .wrap { max-width: calc(760px + 2 * var(--gutter)); }

/* 1. The table -----------------------------------------------------------
   A table, because it is tabular data and a screen reader should say so. */
.prices {
  width: 100%;
  border-collapse: collapse;
}

/* Every figure is a starting price, so the column says so once at the top
   rather than eighteen times down the page. */
.prices thead th {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.prices thead th:first-child { text-align: left; }
.prices thead th:last-child  { text-align: right; white-space: nowrap; }

/* Each group gets its own <tbody> with a heading row, so the sections are
   announced as part of the table rather than floating above it. */
.prices__group th {
  padding-block: 2rem 0.5rem;
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.prices tbody tr:not(.prices__group) th,
.prices td {
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
  font-size: var(--fs-body);
}
.prices tbody tr:not(.prices__group) th {
  text-align: left;
  font-weight: 400;
  color: var(--ink);
  padding-right: 1rem;
}

/* Tabular figures so the euro signs stack. Never wrapped or stacked under
   the label — a name and a number fit side by side at any width. */
.prices td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* 2. Terms ---------------------------------------------------------------- */
.terms { margin-top: 2.5rem; }
.terms p {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: 60ch;
}
.terms__actions { margin-top: 2rem; }

/* 3. Print ---------------------------------------------------------------
   A price list is a page people print and bring with them. The screen page
   is already black on white, so only the chrome comes off. */
@media print {
  .site-header, .drawer, .terms__actions, .site-footer, .skip-link { display: none !important; }
  body { font-size: 11pt; }
  .page-head { padding-block: 0 1rem; }
  .prices tbody { break-inside: avoid; }
}