/* ==========================================================================
   Base: reset, page shell, and the type scale from design.md section 2.2.
   Everything here uses logical properties so the RTL build (section 6)
   mirrors from a single stylesheet.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--muted);
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

/* Section 7: no animation beyond a 150ms state transition. */
button, a, .slot, .day, .chip, .menu-item {
  transition: background-color var(--t) ease,
              border-color var(--t) ease,
              color var(--t) ease;
}

/* Visible focus for the keyboard path. Uses the brand green rather than the
   UA default so it reads as part of the system. */
:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Type scale ---------------------------------------------------------
   Named to match the Role column of the table in section 2.2. Line heights
   are the listed percentages; tracking is the listed em equivalent.        */

.t-hero      { font-size: 58px; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }
.t-section   { font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.t-page      { font-size: 28px; font-weight: 700; line-height: 1.40; letter-spacing: -0.01em; }
.t-court     { font-size: 26px; font-weight: 700; line-height: 1.40; letter-spacing: -0.01em; }
.t-stat      { font-size: 30px; font-weight: 700; line-height: 1.40; letter-spacing: -0.01em; }
.t-card      { font-size: 19px; font-weight: 600; line-height: 1.35; }
.t-subhead   { font-size: 18px; font-weight: 600; line-height: 1.40; }
.t-subhead-s { font-size: 17px; font-weight: 600; line-height: 1.40; }
.t-slot      { font-size: 17px; font-weight: 500; line-height: 1.40; }
.t-body-lg   { font-size: 17px; font-weight: 400; line-height: 1.40; }
.t-body      { font-size: 15px; font-weight: 400; line-height: 1.35; }
.t-btn       { font-size: 15px; font-weight: 500; line-height: 1.40; }
.t-meta      { font-size: 13px; font-weight: 400; line-height: 1.40; }
.t-meta-lg   { font-size: 14px; font-weight: 400; line-height: 1.40; }
.t-colhead   { font-size: 12px; font-weight: 500; line-height: 1.40; letter-spacing: 0.06em; }
.t-eyebrow   { font-size: 11px; font-weight: 500; line-height: 1.40; letter-spacing: 0.10em; text-transform: uppercase; }

@media (max-width: 767px) {
  .t-hero    { font-size: 32px; line-height: 1.12; }
  .t-section { font-size: 26px; }
  .t-card    { font-size: 16px; line-height: 1.38; }
}

/* Section 2.2: numerals are always Western, 0 to 9, including in Arabic.
   Latin-family digits are kept even when the Arabic face leads.            */
.num, time, .price, .stat-value {
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
}

/* --- Colour helpers ----------------------------------------------------- */
.c-ink-500 { color: var(--ink-500); }
.c-ink-300 { color: var(--ink-300); }
.c-green   { color: var(--green-600); }
.c-blue    { color: var(--blue-700); }
.c-amber   { color: var(--amber-500); }

/* --- Breakpoint helpers --------------------------------------------------
   Some copy is worded differently on the phone (4.4 against 4.1), and the
   admin schedule abbreviates its court names to keep all five columns.    */

.m-only { display: none; }

@media (max-width: 767px) {
  .m-only { display: block; }
  .d-only { display: none; }
}

/* --- Page shell --------------------------------------------------------- */
.page { min-height: 100vh; }

.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

@media (max-width: 767px) {
  .wrap { padding-inline: var(--gutter-mobile); }
}