/*
 * assets/css/pricelist.css
 * [ezpro_pricelist] — the public rate card.
 *
 * Authored against `Design / Pricelist` in New-UI.pen. Hand-written and
 * enqueued directly rather than built through Vite, because the shortcode
 * renders static server-side markup and ships no JavaScript: there is no
 * bundle for a stylesheet to ride along with. Same call BrandTokensEnqueue
 * makes, for the same reason.
 *
 * ── SCOPE ───────────────────────────────────────────────────────────────────
 * A PUBLIC marketing surface. CLAUDE.md Hard Rule 6 puts the Operational
 * Warmth design system on /eazycity/* and the booking form only, so its tokens
 * are deliberately not imported. The palette below is the marketing palette
 * from the .pen, declared as local custom properties with literal fallbacks so
 * a theme can restyle the whole card by redefining a handful of values rather
 * than by overriding rules.
 *
 * The same short palette block appears in price.css. Duplicated on purpose:
 * each stylesheet is enqueued only by its own shortcode, and a shared file
 * would put the table rules on a page carrying nothing but a headline.
 *
 * ── NO rem, ANYWHERE ────────────────────────────────────────────────────────
 * This theme sets a 10px root (the 62.5% trick), so `rem` here rendered every
 * size at 62.5% of what the design asked for — the season band came out at
 * 7.5px. Type is sized in `em` so it scales with the copy it sits in, and
 * structure is in `px` because the .pen specifies structure at 1:1 and a card
 * should not resize because a theme rescaled its root.
 *
 * ── THE TYPEFACE FOLLOWS THE SITE ───────────────────────────────────────────
 * The .pen sets amounts in Plus Jakarta Sans, which is not loaded on the public
 * site. Hierarchy carries the look; the face is inherited via ACSS's
 * --heading-font-family where it exists. Figures are tabular so a money column
 * aligns on its digits — the admin Pricing screen reaches for a mono face for
 * the same reason, but a marketing document should read as prose, not ledger.
 */

.ezpro-pricelist {
  --ezpro-pl-ink: #18211b;
  --ezpro-pl-ink-2: #5c6660;
  --ezpro-pl-ink-3: #949d97;
  --ezpro-pl-line: #e6e1d6;
  --ezpro-pl-surface: #ffffff;
  --ezpro-pl-surface-warm: #fbf8f2;
  --ezpro-pl-band: var(--ezc-brand-primary, #0d3b23);
  --ezpro-pl-accent-deep: #4f7c15;
  --ezpro-pl-accent-soft: #edf6dc;
  --ezpro-pl-radius: 18px;
  --ezpro-pl-radius-inner: 14px;
  --ezpro-pl-face: var(--heading-font-family, inherit);

  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--ezpro-pl-ink);
}

/* ── City tabs ────────────────────────────────────────────────────────────── */

/*
 * Ships `hidden` from the server and is revealed by script — see
 * assets/js/pricelist.js for why that direction and not the other.
 */
.ezpro-pricelist__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ezpro-pricelist__tabs[hidden] {
  display: none;
}

.ezpro-pricelist__tab {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  text-align: left;
  background: var(--ezpro-pl-surface-warm);
  border: 1px solid var(--ezpro-pl-line);
  border-radius: 14px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ezpro-pricelist__tab:hover {
  border-color: var(--ezpro-pl-band);
}

.ezpro-pricelist__tab-city {
  font-family: var(--ezpro-pl-face);
  font-size: 1.06em;
  font-weight: 700;
  letter-spacing: -0.017em;
  color: var(--ezpro-pl-ink);
}

.ezpro-pricelist__tab-meta {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--ezpro-pl-ink-3);
}

.ezpro-pricelist__tab[aria-selected="true"] {
  background: var(--ezpro-pl-band);
  border-color: var(--ezpro-pl-band);
}

.ezpro-pricelist__tab[aria-selected="true"] .ezpro-pricelist__tab-city {
  color: #ffffff;
}

.ezpro-pricelist__tab[aria-selected="true"] .ezpro-pricelist__tab-meta {
  color: rgba(255, 255, 255, 0.6);
}

/* Only the selected tab is in the tab order, so its focus ring has to show. */
.ezpro-pricelist__tab:focus-visible,
.ezpro-pricelist__panel:focus-visible {
  outline: 2px solid var(--ezpro-pl-accent-deep);
  outline-offset: 2px;
}

.ezpro-pricelist__panel[hidden] {
  display: none;
}

/* ── One city's categories, two across on a wide screen ───────────────────── */

/*
 * `auto-fit` rather than a fixed two-column track: a city with ONE category
 * fills the width instead of sitting in half a row beside nothing, and a third
 * category wraps rather than overflowing. The 420px floor is the point below
 * which a rate table's two money columns stop leaving room for a room name.
 */
.ezpro-pricelist__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 992px) {
  .ezpro-pricelist__grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }

  /*
   * Money columns give up their fixed width once two cards share the row —
   * 150px each would leave "Twin/Double Room" about 90px to live in.
   */
  .ezpro-pricelist__grid .ezpro-pricelist__money {
    width: auto;
    min-width: 84px;
  }
}

/* ── Download ─────────────────────────────────────────────────────────────── */

.ezpro-pricelist__actions {
  display: flex;
  justify-content: center;
  margin: 0;
}

.ezpro-pricelist__download {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  background: var(--ezpro-pl-band);
  border-radius: 12px;
  color: #ffffff;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.ezpro-pricelist__download:hover,
.ezpro-pricelist__download:focus {
  color: #ffffff;
  opacity: 0.9;
  text-decoration: none;
}

.ezpro-pricelist__download-icon {
  flex: none;
}

/* ── The card ─────────────────────────────────────────────────────────────── */

.ezpro-pricelist__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  background: var(--ezpro-pl-surface);
  border: 1px solid var(--ezpro-pl-line);
  border-radius: var(--ezpro-pl-radius);
}

.ezpro-pricelist__title {
  margin: 0;
  font-family: var(--ezpro-pl-face);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ezpro-pl-ink);
}

/*
 * "Rates effective from 1 September 2026" — shown when the card being printed
 * has not started yet, which is what the page falls back to between one year's
 * card expiring and the next one starting. A pill rather than a paragraph: it
 * is a qualifier on the figures below, and it has to survive being skimmed.
 */
.ezpro-pricelist__effective {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 0;
  padding: 6px 13px;
  background: var(--ezpro-pl-accent-soft);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--ezpro-pl-accent-deep);
}

.ezpro-pricelist__effective::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

/*
 * Tables scroll INSIDE themselves rather than widening the page. A rate card is
 * three or four columns of money and a room name, which is narrow — but a long
 * season label ("Academic year (provisional — rates to be confirmed)") is not,
 * and on a phone it is the thing that would otherwise push the document
 * sideways.
 */
.ezpro-pricelist__scroll {
  overflow-x: auto;
  border: 1px solid var(--ezpro-pl-line);
  border-radius: var(--ezpro-pl-radius-inner);
}

.ezpro-pricelist table {
  width: 100%;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.ezpro-pricelist th,
.ezpro-pricelist td {
  padding: 12px 20px;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--ezpro-pl-line);
}

/*
 * The theme sets its own cell border-width, and a single-class rule loses to
 * it — the hairlines came out at 2px. Two classes takes it back without an
 * !important, which would take it away from the theme permanently.
 */
.ezpro-pricelist .ezpro-pricelist__scroll th,
.ezpro-pricelist .ezpro-pricelist__scroll td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--ezpro-pl-line);
}

.ezpro-pricelist .ezpro-pricelist__scroll tbody tr:last-child th,
.ezpro-pricelist .ezpro-pricelist__scroll tbody tr:last-child td {
  border-bottom-width: 0;
}

.ezpro-pricelist thead th {
  background: var(--ezpro-pl-surface-warm);
  font-size: 0.66em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.105em;
  color: var(--ezpro-pl-ink-3);
}

.ezpro-pricelist tbody th {
  font-size: 0.875em;
  font-weight: 500;
  color: var(--ezpro-pl-ink);
}

/* The dark bar that groups a season's rows, carrying its name and its dates. */
/*
 * TWO classes, not one. `.ezpro-pricelist tbody th` is (0,1,2) and a lone
 * `.ezpro-pricelist__band th` is (0,1,1), so the generic row colour won and the
 * band rendered dark ink on dark green — unreadable, and invisible to every
 * test in the suite because no test renders a colour.
 */
.ezpro-pricelist .ezpro-pricelist__band th {
  background: var(--ezpro-pl-band);
  color: #ffffff;
  text-align: center;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.025em;
  border-bottom: none;
}

/*
 * Money sits in a fixed column, right-aligned, so a reader can compare down it.
 * The room name takes whatever width is left.
 */
/* Same specificity trap as the band: the generic cell rule is (0,1,1). */
.ezpro-pricelist .ezpro-pricelist__money {
  width: 150px;
  text-align: right;
  white-space: nowrap;
  font-family: var(--ezpro-pl-face);
  font-size: 0.94em;
  font-weight: 600;
  letter-spacing: -0.013em;
  font-variant-numeric: tabular-nums;
}

.ezpro-pricelist thead th.ezpro-pricelist__money {
  text-align: right;
}

/*
 * The retained slice of a deposit. Set apart because it is not an additional
 * charge — it is part of the deposit row above it, and a reader scanning a
 * column of amounts must not add it to their total.
 */
.ezpro-pricelist .ezpro-pricelist__retained th,
.ezpro-pricelist .ezpro-pricelist__retained td {
  color: var(--ezpro-pl-ink-3);
  font-size: 0.81em;
  font-weight: 500;
}

.ezpro-pricelist__notes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  font-size: 0.78em;
  color: var(--ezpro-pl-ink-3);
}

/* The staff-only diagnostic. Loud on purpose; no visitor ever sees it. */
.ezpro-pricelist--missing {
  padding: 8px 12px;
  border: 1px dashed currentColor;
  border-radius: 8px;
  color: #b3261e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
}

/*
 * NO prefers-color-scheme BLOCK, and that is deliberate.
 *
 * There was one. It flipped the ink to near-white and the surface to a 4%
 * white wash, which is correct on a dark page and catastrophic on a light one
 * — and `prefers-color-scheme` reports the VISITOR'S operating system, not the
 * background this card was dropped onto. The public site is light, so every
 * visitor with dark mode enabled got an invisible pricelist. Caught in the
 * browser, not in a test, because no test renders a colour.
 *
 * The card follows the page it lands on instead. A theme that goes dark-aware
 * redefines the custom properties above under whatever signal it already uses;
 * that is what they are for.
 */

/*
 * Print. The page IS the pricelist, so printing it has to produce the document
 * rather than a screenshot of a web page: no scroll containers, no colour that
 * costs ink to no purpose, and no season group split across a page break.
 */
@media print {
  .ezpro-pricelist {
    --ezpro-pl-line: #cccccc;
    --ezpro-pl-ink-3: #444444;
    --ezpro-pl-surface: #ffffff;
    --ezpro-pl-surface-warm: #f2f2f2;
    gap: 24px;
  }

  .ezpro-pricelist__scroll {
    overflow-x: visible;
  }

  .ezpro-pricelist__card {
    border: none;
    padding: 0;
    break-inside: avoid;
  }

  .ezpro-pricelist__season {
    break-inside: avoid;
  }

  /*
   * A printed pricelist is every city, not whichever tab happened to be open.
   * The strip and the button are screen furniture and go; the hidden panels
   * come back.
   */
  .ezpro-pricelist__tabs,
  .ezpro-pricelist__actions {
    display: none;
  }

  .ezpro-pricelist__panel[hidden] {
    display: block;
  }

  .ezpro-pricelist__grid {
    grid-template-columns: 1fr;
  }

  .ezpro-pricelist__band th {
    background: #eeeeee;
    color: #000000;
    border-bottom: 1px solid #999999;
  }
}