/* ==========================================================================
   CleverPunts base
   ==========================================================================

   Element defaults for the design system. Requires cp-tokens.css.

   EVERYTHING IS SCOPED UNDER .cp ON THE BODY.

   This is not fussiness. The prototype these styles came from - the touchline
   landing pages - styled bare elements: body, h1-h3, table, th, td, code,
   details. Those two pages carry no Bootstrap and no site chrome, so that was
   fine there. Loading the same rules site-wide would restyle every racecard,
   fixture list and stats table on the site in one go.

   Scoping under .cp means an unconverted page is untouched even with this
   stylesheet linked, so pages can be migrated one at a time rather than in a
   single irreversible sweep.

   When a section is fully converted, add class="cp" to its body. That is the
   whole opt-in.
   ========================================================================== */

.cp {
    margin: 0;
    background: var(--cp-bg);
    color: var(--cp-ink);
    font-family: var(--cp-font);
    font-size: var(--cp-text-base);
    line-height: var(--cp-leading);
    -webkit-font-smoothing: antialiased;
}

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

/* --- Headings ----------------------------------------------------------- */

.cp h1, .cp h2, .cp h3, .cp h4, .cp p { margin-top: 0; }

.cp h1 {
    font-size: var(--cp-text-h1);
    line-height: 1.06;
    letter-spacing: var(--cp-track-h1);
    font-weight: 800;
    margin: var(--cp-space-5) 0 var(--cp-space-5);
    max-width: 850px;
}

.cp h2 {
    font-size: var(--cp-text-h2);
    line-height: var(--cp-leading-tight);
    letter-spacing: var(--cp-track-h2);
    font-weight: 750;
    margin-bottom: var(--cp-space-5);
}

.cp h3 {
    font-size: var(--cp-text-h3);
    line-height: 1.35;
    letter-spacing: var(--cp-track-h3);
    font-weight: 700;
    margin-bottom: var(--cp-space-3);
}

/* --- Links -------------------------------------------------------------- */
/* accent-ink, never accent: the fill colour is unreadable as text in light. */

.cp a {
    color: var(--cp-accent-ink);
    text-underline-offset: 4px;
}

.cp nav a,
.cp footer a { text-decoration: none; }

.cp a,
.cp button { touch-action: manipulation; }

.cp a:focus-visible,
.cp button:focus-visible,
.cp summary:focus-visible,
.cp [tabindex]:focus-visible {
    outline: 3px solid var(--cp-focus);
    outline-offset: 4px;
    border-radius: var(--cp-radius-sm);
}

/* --- Text utilities ----------------------------------------------------- */

.cp-lead   { font-size: var(--cp-text-lg); line-height: 1.6; color: var(--cp-muted); max-width: 650px; }
.cp-small  { font-size: var(--cp-text-sm); color: var(--cp-muted); }
.cp-muted  { color: var(--cp-muted); }

/* --- Tables ------------------------------------------------------------- */

.cp table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cp-text-sm);
}

.cp th,
.cp td {
    padding: 13px 15px;
    border: 1px solid var(--cp-line);
    text-align: left;
    vertical-align: top;
}

.cp th {
    background: var(--cp-surface);
    color: var(--cp-accent-ink);
    font-weight: 700;
}

.cp td { color: var(--cp-muted); }

/* Wide tables scroll inside their own container rather than the page. */
.cp-tablewrap { overflow-x: auto; }

/* --- Code --------------------------------------------------------------- */

.cp code {
    background: var(--cp-surface-2);
    padding: 2px 5px;
    border-radius: var(--cp-radius-sm);
    color: var(--cp-ink);
    font-family: var(--cp-font-mono);
    font-size: 0.9em;
}

.cp pre {
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    padding: var(--cp-space-4);
    overflow-x: auto;
}

.cp pre code { background: none; padding: 0; }

/* --- Disclosure --------------------------------------------------------- */

.cp details {
    border-bottom: 1px solid var(--cp-line);
    padding: 19px 0;
}

.cp summary {
    cursor: pointer;
    font-weight: 650;
    padding-right: var(--cp-space-3);
}

.cp details p {
    margin: var(--cp-space-3) 0 0;
    color: var(--cp-muted);
}

/* --- Layout helpers ----------------------------------------------------- */

.cp-wrap {
    max-width: var(--cp-measure);
    margin-inline: auto;
    padding-inline: var(--cp-gutter);
}

/* Page-level, on <body>, so the header and the content share one measure.
   A single wide wrap in a normal-width page would leave the header narrower
   than the content beneath it. */
.cp--wide {
    --cp-measure: var(--cp-measure-wide);
}

.cp a.cp-skip {
    position: absolute;
    left: 20px;
    top: -100px;
    background: var(--cp-accent);
    color: var(--cp-on-accent);
    padding: 10px;
    z-index: 20;
}

.cp a.cp-skip:focus { top: 10px; }

@media (max-width: 600px) {
    .cp-wrap { padding-inline: 20px; }
    .cp-lead { font-size: 18px; }
}