/* ============================================================
   Modernisation layer. Appended to each site's own site.css.

   WHAT THIS DOES NOT TOUCH, on purpose: display faces, accent colours, and the
   heading clamps. The headings are not ad-hoc, they are tuned and measured, and
   one of them carries a comment recording a hero that was cut because it ran to
   four lines at 390px against a three-line limit. Japanese headings break
   differently from Latin ones at the same size, so a tidy modular scale imposed
   over the top would undo per-site work that was done with a ruler.

   What IS ad-hoc is the small text. A single site carried ten unrelated sizes
   between 0.72rem and 1.1rem with no ratio between them. Those collapse onto
   the steps below, which is where a scale earns its keep.
   ============================================================ */

:root {
  /* Supporting-text scale, DERIVED from what the sites already used rather than
     imposed on them. The estate carried 28 distinct sizes below 1.25rem across
     354 declarations, with clusters like 0.85/0.86/0.87/0.88 that no reader can
     tell apart but every maintainer has to. The steps below sit on the actual
     high-frequency values (0.85 appeared 43 times, 0.92 28, 1.00 31), so
     snapping to them moved 148 declarations by at most 0.03rem, which is under
     half a pixel, and left the rest alone.

     Stops short of the display sizes on purpose: each site's heading clamps are
     measured, and one carries a note about a hero cut for running to four lines
     at 390px. Those are not fragmentation, they are fitting. */
  --step--2: 0.72rem;
  --step--1: 0.78rem;
  --step-0:  0.85rem;
  --step-1:  0.92rem;
  --step-2:  1rem;
  --step-3:  1.05rem;
  --step-4:  1.1rem;

  /* Spacing, so section rhythm stops being one-off margins. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
}

/* ---------- Headings ----------
   Size is left alone; only the ragging is improved. `balance` stops a heading
   dropping one orphaned word onto its own line, which is the most common way a
   careful layout still looks careless. */
h1, h2, h3, h4 {
  text-wrap: balance;
}
p, li, dd {
  text-wrap: pretty;
}

/* ---------- Anchored sections ----------
   The nav is fixed, so an in-page jump would otherwise park the heading
   underneath it. Uses each site's own nav height token. */
:target,
section[id],
[id^="reserve"],
[id^="access"] {
  scroll-margin-top: calc(var(--nav-h, 68px) + var(--sp-5));
}

/* ---------- Numbers ----------
   Prices, times, party sizes and the booking reference all sit in columns or
   get compared against each other, and proportional figures make that harder
   than it needs to be. */
.rd-ref-code, .charge-rows, .charge-list, .hours-list, .menu-list,
.price, .figure, time, .tbc, .steps .n {
  font-variant-numeric: tabular-nums;
}

/* ---------- Touch ----------
   Kills the 300ms double-tap zoom delay on the controls a customer actually
   presses, which is most of what makes a phone page feel slow rather than
   unresponsive. */
.btn, .nav-cta, .lang a, .nav-links a, button, [role="button"],
input, select, textarea, summary {
  touch-action: manipulation;
}

/* ---------- Interactive states ----------
   The guideline is that hover, active and focus each read as MORE prominent
   than rest, not merely different. Motion handles the lift where it is bound;
   this is the non-JS floor underneath it. */
@media (hover: hover) {
  .btn:hover, .nav-cta:hover {
    filter: brightness(1.06);
  }
}
.btn:active, .nav-cta:active {
  transform: translateY(1px);
}

/* ---------- Long content ----------
   User-supplied strings reach these: a guest name, a note, an address. None of
   them should be allowed to push a layout sideways. */
.rd-detail dd, .cast-body p, .form-error, .form-ok {
  overflow-wrap: break-word;
}

/* ---------- Reduced motion ----------
   The layer above is the only place these transforms are declared, so switching
   them off here is sufficient; Motion itself bails out before binding anything. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .nav-cta:active { transform: none; }
  @media (hover: hover) {
    .btn:hover, .nav-cta:hover { filter: none; }
  }
}