/*
 * Sport-Fit Physio Care - typography refinements
 * ----------------------------------------------------------------------
 * Loaded LAST on every page so it wins over the page-specific stylesheet.
 * Two jobs only: hold the line breaks after the Nunito -> Inter swap, and
 * cap the reading measure. It deliberately sets no colours, no sizes and no
 * spacing, so it cannot drift into a redesign.
 */

/* ── 1. Metric compensation for Inter ─────────────────────────────────
   Inter sets about 6% wider than Nunito at the same size and has a larger
   x-height. Inter is also designed to be tracked slightly tight - Rasmus
   Andersson's own guidance is negative tracking as size increases - so a
   small negative value both looks correct and buys back the width.

   The navigation is the tight spot: after the swap the eight desktop links
   filled their container with about 3px to spare (it had roughly 60px with
   Nunito). This restores usable headroom so a slightly narrower viewport,
   or a longer menu label, does not push the menu onto a second row. */
body {
  letter-spacing: -0.006em;
}

.nav-menu > li > a,
.nav-link {
  letter-spacing: -0.011em;
}

/* Large display text needs proportionally tighter tracking, not looser. */
h1, h2, .editorial-title {
  letter-spacing: -0.014em;
}

/* Numerals stay untouched: Bebas Neue is a condensed display face and any
   negative tracking makes it crowd. */
.hero-stat-value, .counter-number, .error-num,
[style*="--ff-display"] {
  letter-spacing: normal;
}

/* ── 2. Reading measure ───────────────────────────────────────────────
   Body copy was running to 125 characters per line in the full-width
   sections; the comfortable range is 45-75.

   A max-width in `ch` only bites on elements that are ACTUALLY wider than
   the limit. Paragraphs inside cards, columns and grids already sit around
   40ch and are completely unaffected by this rule - which is why it can be
   applied broadly without hunting for individual selectors. 
main p,
section p,
.section p,
.shell > p,
.container > p {
  max-width: 68ch;
}*/

/* Where the text is centred, keep the narrowed block centred too, otherwise
   it would hug the left edge of a centred section. */
.text-center > p,
.text-md-center > p,
.text-m-center > p,
[class$="-head"] > p,
[class*="-head "] > p,
[class$="-header"] > p,
[class*="-header "] > p,
[class$="-heading"] > p,
[class*="-heading "] > p,
[class$="-copy"] > p,
[class*="section-header"] > p {
  margin-inline: auto;
}

/* ── 3. Exclusions ────────────────────────────────────────────────────
   The Pain & Movement Check maps every hotspot and drawn path onto a fixed
   image geometry. Nothing in this file may change its layout. */
#pain-check p,
#pain-check li,
#pain-check .hero p,
.app p {
  max-width: none;
  margin-inline: 0;
}

/* Form controls, buttons and table cells are sized by their container, not
   by a reading measure. */
button, .button, .btn, input, select, textarea,
td p, th p, label p {
  max-width: none;
}

/* ── 4. Hero trademark line ───────────────────────────────────────────
   `.trade-h1` carries "INTEGRATED MANUAL THERAPY(tm)" as one line of the
   hero headline. Fraunces sets about 6% wider than Playfair Display, which
   pushed that line to wrap and made the hero a line taller.

   These sizes are scaled by the same ~7.5% so the line holds on ONE line at
   every breakpoint, restoring the original hero composition. They are not a
   redesign - they exist purely to absorb the width difference between the
   old and new typeface. Measured, not guessed: at 1280px the line needs
   656px inside a 685px column, leaving 29px of margin. */
.trade-h1 { font-size: 37px; }

@media (max-width: 1199px) { .trade-h1 { font-size: 30px; } }
@media (max-width:  767px) { .trade-h1 { font-size: 19px; } }