/* explainer.css — shared layout for BALLKNW long-form explainer and reference
   pages (football-terms, what-is-a-*, free-football-manager).

   Only rules common to two or more of those pages live here. Page-specific
   components stay in that page's own <style> block. Anything already provided
   by styles.css — notably .faq-item — is deliberately not repeated. */

/* ── PAGE SHELL ── */
.guide-content{max-width:760px;margin:0 auto;padding:0 16px;line-height:1.75}
.guide-content h1{
  font-size:clamp(1.85rem,5.5vw,2.6rem);font-weight:900;
  letter-spacing:-.03em;line-height:1.12;margin:36px 0 12px;text-align:center;
}
.standfirst{text-align:center;color:var(--muted);font-size:1.05rem;max-width:58ch;margin:0 auto 8px}
.byline{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.04em;margin-bottom:26px;opacity:.75}

/* ── SECTIONS ── */
.guide-section{margin:38px 0}
.guide-section h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:var(--lime)}
.guide-section h3{font-size:1.18rem;font-weight:700;margin:24px 0 8px}
.guide-section p{color:var(--muted);margin:12px 0}

/* ── SHORT-ANSWER BOX ── */
.answer-box{
  background:linear-gradient(180deg,rgba(44,185,78,.10),rgba(44,185,78,.04));
  border:1px solid rgba(44,185,78,.28);border-radius:14px;padding:22px 24px;margin:26px 0;
}
.answer-box .lbl{
  font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);margin-bottom:8px;
}
.answer-box p{margin:0;font-size:16px;color:var(--white);line-height:1.65}
.answer-box .term{font-weight:800;color:var(--lime)}

/* ── TABLE OF CONTENTS ── */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 22px;margin:24px 0}
.toc h2{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin:0 0 9px}
.toc ol{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px}
.toc li{margin:4px 0}
.toc a{color:var(--muted);border-bottom:1px solid transparent}
.toc a:hover{color:var(--white);border-bottom-color:var(--lime)}

/* ── DATA TABLES ──
   .tbl-wrap keeps wide tables scrolling inside their own container so the
   page body never scrolls horizontally on narrow screens. */
.tbl-wrap{overflow-x:auto;margin:18px 0}
table.data{width:100%;border-collapse:collapse;min-width:540px;font-size:14px}
table.data th,table.data td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
table.data thead th{background:var(--surface);color:var(--lime);font-weight:700;font-size:12.5px;letter-spacing:.03em}
/* first cell of each body row is a row header, not a column one */
table.data tbody th{font-weight:700;color:var(--white);font-size:14px}
table.data.nowrap-first tbody th{white-space:nowrap}

/* ── PULL QUOTES / ASIDES ── */
blockquote{border-left:3px solid var(--lime);padding:2px 0 2px 16px;margin:18px 0;color:var(--muted);font-style:italic}
.callout{border-left:3px solid var(--lime);padding:4px 0 4px 16px;margin:20px 0;color:var(--muted);font-size:14.5px}
.note{
  font-size:13px;color:var(--muted);background:rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:10px;padding:13px 16px;margin:22px 0;
}

/* ── FAQ ──
   styles.css already defines .faq-item and its summary/marker rules; only the
   stacking margin is added here. */
.faq-item{margin:10px 0}

/* ── LISTS ──
   Guide copy uses plain <ul>/<ol>; without this they inherit the reset and
   lose their markers and indent. */
.guide-section ul,.guide-section ol{color:var(--muted);margin:12px 0;padding-left:22px}
.guide-section li{margin:6px 0}
.guide-section li::marker{color:var(--lime)}

/* ── PLATFORM SWITCH ──
   Row of sibling-page chips on the "best FM games for <platform>" articles. */
.platform-switch{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 30px}
.platform-switch a{font-size:13px;font-weight:700;color:var(--muted);background:var(--glass);border:1px solid var(--border);padding:8px 14px;border-radius:10px}
.platform-switch a.on{color:#052411;background:linear-gradient(135deg,var(--lime),var(--emerald));border-color:transparent}

/* ── TIP CARDS ──
   Small titled cards used for step-by-step or "one idea per card" passages. */
.tool{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:10px 0}
.tool h3{margin:0 0 5px;color:var(--lime);font-weight:700;font-size:15px}
.tool p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── GUIDE INDEX GRID ──
   The football-guides.html hub: one card per article. */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:18px 0}
.guide-card{
  display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:15px 16px;
  text-decoration:none;transition:border-color .15s ease,transform .15s ease;
}
.guide-card:hover{border-color:var(--lime);transform:translateY(-2px)}
.guide-card-title{color:var(--white);font-weight:700;font-size:15px;line-height:1.3}
.guide-card-desc{color:var(--muted);font-size:13px;line-height:1.5}

/* ── CLOSING CTA ── */
.end-cta{
  text-align:center;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:32px 20px;margin:44px 0 20px;
}
.end-cta h3{margin:0 0 10px}
.end-cta a{color:var(--lime)}