:root {
  --wmccl-bg: #ffffff;
  --wmccl-fg: #222;
  --wmccl-muted: #666;
  --wmccl-border: #ddd;
  --wmccl-stripe: #f7f7f7;
  --wmccl-header-bg: #f5f5f5;
  --wmccl-link: #1f4e79;
  --wmccl-gold-bg: #f4c430; --wmccl-gold-fg: #4a3900;
  --wmccl-silver-bg: #cfd4d8; --wmccl-silver-fg: #333;
  --wmccl-bronze-bg: #d8935a; --wmccl-bronze-fg: #3a2200;
}
body.wmccl-league {
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--wmccl-fg);
  background: var(--wmccl-bg);
  /* Widened from 980px to 1400px (2026-09-22). 980px was a reasonable
     default while the WordPress embed's own container was narrow, but
     Adam has since switched the New League Tables page onto the same
     "Full Width" template the Results page uses (no sidebar), so the
     surrounding <iframe> can now be 1200px+ wide on a normal desktop
     window. With the old 980px cap still in place, this page centred
     itself inside that wider iframe with ~100px+ of dead space on each
     side instead of using the room — confirmed live on wmccl.co.uk
     2026-09-22 (iframe 1250px, this body still rendering at 980px with
     119px side margins). 1400px comfortably covers even an 11-round
     table's ~1130px natural width with room to spare, without letting
     the page stretch fully edge-to-edge on a very wide monitor. The
     table's own overflow-x:auto (see .wmccl-league table below) is
     still what saves a narrower container/phone — this change only
     helps once there's genuinely more room to use. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}
.wmccl-league h1 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.wmccl-league h2 { font-size: 1.1rem; margin-top: 2rem; }
.wmccl-league a { color: var(--wmccl-link); }
.wmccl-league .breadcrumb { margin-bottom: 1rem; font-size: 0.9rem; }
.wmccl-league .sponsors { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin: 1rem 0 1.5rem; }
.wmccl-league .sponsors img { max-height: 60px; max-width: 160px; }
.wmccl-league .index-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin: 0.5rem 0; }
.wmccl-league .index-row + .index-row { border-top: 1px solid var(--wmccl-border); padding-top: 0.5rem; }
.wmccl-league .index-row h2 { margin: 0; font-size: 1rem; white-space: nowrap; flex-shrink: 0; }
.wmccl-league .table-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.wmccl-league .table-links li a { display: inline-block; background: var(--wmccl-header-bg); border-radius: 6px; padding: 0.3rem 0.7rem; text-decoration: none; font-size: 0.85rem; }
.wmccl-league .table-links li a:hover { background: #eef3f9; }
.wmccl-league .table-scroll-hint {
  font-size: 0.8rem;
  color: var(--wmccl-muted);
  margin: -0.5rem 0 0.5rem;
}
/*
 * Wide-table horizontal scroll (added 2026-09-22). A league table can have
 * ~19-20 columns (Pos, Name, No., Category, Club, 1BX, Best N, Avg, one
 * per round up to 11, AP rounds), all white-space:nowrap, and easily needs
 * 1100px+ of natural width. The page (max-width: 980px) is already
 * narrower than that on a full desktop browser, and when this site is
 * embedded via <iframe> in the WMCCL WordPress site the iframe's own
 * container is narrower still (confirmed 2026-09-22: ~611-660px on the
 * live wmccl.co.uk theme) — so without this, the table just gets clipped
 * by the iframe with no way to see the missing columns.
 *
 * `display: block` on the <table> element itself (its <thead>/<tbody>/
 * <tr>/<td> children keep their own default table-row-group/table-row/
 * table-cell display — that's set on THEM by the browser's UA stylesheet,
 * not inherited from the table's display value) turns the table into an
 * ordinary block box that `overflow-x: auto` can scroll, without needing
 * an extra wrapper <div> around every generated page. That matters here
 * specifically because it means fixing this file's CSS output and
 * re-running the generator (which always rewrites css/site.css) makes
 * every ALREADY-published table page scrollable too — they all link to
 * this shared stylesheet and don't need to be regenerated themselves.
 *
 * Trade-off, noted deliberately rather than missed: setting overflow-x to
 * anything but 'visible' forces the browser to also compute overflow-y as
 * 'auto' instead of 'visible' (a CSS spec quirk, confirmed live 2026-09-22),
 * which makes the <table> itself the nearest scrolling ancestor for the
 * sticky <thead><th>. Since the table's height is never constrained,
 * nothing actually scrolls vertically inside it, so the sticky header
 * quietly becomes a no-op instead of tracking the page scroll — not a
 * visible bug, just a lost nicety, and only for a table with enough rows
 * to run off-screen vertically (none currently do). Deliberately not
 * "fixed" with a fixed/vh max-height + its own overflow-y:auto (which
 * would restore real stickiness) because that height would be measured
 * before the WordPress iframe's auto-resize script has settled, risking a
 * shrink feedback loop against IFRAME_RESIZE_SCRIPT below.
 */
.wmccl-league table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.wmccl-league th, .wmccl-league td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--wmccl-border); white-space: nowrap; }
.wmccl-league th { background: var(--wmccl-header-bg); position: sticky; top: 0; }
.wmccl-league tbody tr:nth-child(even) { background: var(--wmccl-stripe); }
.wmccl-league .pos { font-weight: 600; }
.wmccl-league .medal { display: inline-block; min-width: 1.5rem; text-align: center; border-radius: 999px; padding: 0.05rem 0.4rem; font-weight: 700; }
.wmccl-league .medal.gold { background: var(--wmccl-gold-bg); color: var(--wmccl-gold-fg); }
.wmccl-league .medal.silver { background: var(--wmccl-silver-bg); color: var(--wmccl-silver-fg); }
.wmccl-league .medal.bronze { background: var(--wmccl-bronze-bg); color: var(--wmccl-bronze-fg); }
.wmccl-league .best-total { font-weight: 700; }
.wmccl-league .ap-cell { color: #888; font-style: italic; }
.wmccl-league .empty-cell { color: #ccc; }
.wmccl-league .ap-note { color: #888; font-size: 0.85rem; }
.wmccl-league footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--wmccl-border); font-size: 0.8rem; color: var(--wmccl-muted); }
@media (max-width: 700px) {
  .wmccl-league .table-scroll-hint { display: block; }
}