/* ==========================================================================
   Touchline site pages - Overview and Quick start & FAQ
   ==========================================================================

   Shared by /football/touchline/ and /football/touchline/guide/.

   These two pages are where the design system came from. Everything generic
   in the original prototype stylesheet - the palette, type, buttons, cards,
   badges, callouts, steps, recipes, the table of contents - was extracted
   into cp-tokens.css, cp-base.css and cp-components.css, and the markup now
   uses those classes directly. What is left here is only what is specific to
   these two pages: the hero and its illustrative preview, the closing
   call-to-action, the guide layout, and a small sub-navigation that keeps
   Overview / Quick start / Open Touchline reachable now that the site header
   has replaced the prototype's own.

   Every colour is a token. That is what gives these pages light mode.

   The board at /football/touchline/match-alerts/ has its own stylesheet,
   touchline.css, and is not touched by this file.
   ========================================================================== */

/* --- Sub-navigation ----------------------------------------------------- */
/* The site header owns primary navigation now. This slim bar carries the
   three links the prototype header used to, so the section still hangs
   together. */

.tl-subnav {
    border-bottom: 1px solid var(--cp-line);
    background: var(--cp-surface);
}

.tl-subnav .cp-wrap {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: var(--cp-space-5);
    flex-wrap: wrap;
}

.tl-subnav__title {
    font-size: var(--cp-text-xs);
    letter-spacing: 0.15em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cp-muted);
    margin-right: auto;
}

.cp .tl-subnav a:not(.cp-btn) {
    font-size: var(--cp-text-sm);
    color: var(--cp-muted);
    text-decoration: none;
}

.cp .tl-subnav a[aria-current="page"] { color: var(--cp-accent-ink); }

/* --- Hero --------------------------------------------------------------- */

.hero {
    padding: 85px 0 70px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 55px;
    align-items: center;
}

.hero h1 em { font-style: normal; color: var(--cp-accent-ink); }

.actions {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.hero .actions { gap: 12px; margin: 30px 0 18px; }

/* The illustrative match preview. */

.preview {
    border: 1px solid var(--cp-accent-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow);
    transform: rotate(-1deg);
}

.previewhead {
    padding: 16px 22px;
    border-bottom: 1px solid var(--cp-line);
    display: flex;
    justify-content: space-between;
    font-size: var(--cp-text-sm);
}

.fixture { padding: 30px 22px; text-align: center; }

.score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.score b    { font-size: 40px; letter-spacing: -2px; white-space: nowrap; }
.score span { font-size: var(--cp-text-base); }

.previewstats {
    display: flex;
    justify-content: center;
    gap: 32px;
    color: var(--cp-muted);
    font-size: 13px;
}

.previewstats strong { display: block; color: var(--cp-ink); font-size: 23px; }

.rule {
    padding: 20px 22px;
    background: var(--cp-surface-2);
    border-top: 1px solid var(--cp-line);
}

.rule p { margin-bottom: 10px; font-size: var(--cp-text-sm); }

.cp .rule code {
    display: block;
    background: none;
    padding: 0;
    color: var(--cp-ink);
    font: 14px/1.8 var(--cp-font-mono);
}

/* --- Sections ----------------------------------------------------------- */

section.block {
    padding: 75px 0;
    border-bottom: 1px solid var(--cp-line);
}

.sectionintro {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 35px;
}

.sectionintro p { max-width: 470px; color: var(--cp-muted); }

.number {
    font-size: var(--cp-text-sm);
    color: var(--cp-accent-ink);
    display: block;
    margin-bottom: 25px;
}

.rulegrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.rulecard {
    padding: 25px;
    border-left: 3px solid var(--cp-accent);
    background: var(--cp-surface);
}

.rulecard p { color: var(--cp-muted); margin: 0; }

/* --- Closing call-to-action --------------------------------------------- */
/* A lime panel with dark ink, in both themes. The button inverts: dark fill,
   lime text - 14:1 either way. */

.closing {
    margin: 65px 0;
    background: var(--cp-accent);
    color: var(--cp-on-accent);
    padding: 45px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
}

.closing p  { margin: 0; max-width: 650px; }
.closing h2 { margin-bottom: 12px; }

.cp .closing .cp-btn {
    background: var(--cp-on-accent);
    border-color: var(--cp-on-accent);
    color: var(--cp-accent);
    flex-shrink: 0;
}

/* --- Footer ------------------------------------------------------------- */

.tl-foot {
    border-top: 1px solid var(--cp-line);
    padding: 28px 0;
    color: var(--cp-muted);
    font-size: var(--cp-text-sm);
}

.tl-foot .cp-wrap {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.tl-foot .links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

.cp .tl-foot a { font-size: var(--cp-text-sm); color: var(--cp-muted); text-decoration: none; }

/* --- Guide page --------------------------------------------------------- */

/* The site header is sticky and about 78px tall - something the prototype
   never had. Both the in-page anchors and the sticky table of contents have
   to clear it, or the first thing lands underneath the header. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.cp .guide-layout .cp-toc { top: 100px; }

.guidehead { padding: 65px 0 40px; }
.guidehead h1 { font-size: clamp(42px, 5vw, 62px); }

.guide-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 65px;
    padding-bottom: 65px;
}

.guidecontent section { margin: 0 0 55px; }
.guidecontent h2 { font-size: 32px; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 950px) {
    .hero { grid-template-columns: 1fr; gap: 35px; }
    .preview { max-width: 600px; transform: none; }
    .guide-layout { grid-template-columns: 1fr; gap: 30px; }
    .sectionintro { display: block; }
    .closing { align-items: start; flex-direction: column; }
}

@media (max-width: 600px) {
    .hero { padding-top: 45px; }
    .rulegrid { grid-template-columns: 1fr; }
    section.block { padding: 48px 0; }
    .closing { padding: 28px; }
    .score span { font-size: var(--cp-text-sm); }
    .previewstats { gap: 20px; }
    .guidehead { padding-top: 40px; }
    .tl-subnav .cp-wrap { gap: var(--cp-space-3); }
}