/*
Theme Name: Klasemen Balap
Theme URI: https://klasemenbalap.com/
Description: Pit-wall timing board for Indonesian motorsport. Dark surface, tabular figures, session times in WIB.
Author: Klasemen Balap
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: klasemenbalap
*/

/* A timing screen, not a magazine. Dark because that is what a pit wall and
   every live-timing app look like, and because the traffic peaks at night in
   WIB when a European race is on. Figures are the content, so they get the
   monospace and the alignment; prose gets whatever is left. */
:root {
	--kb-bg: #0d0f12;
	--kb-panel: #15181d;
	--kb-panel-2: #1c2027;
	--kb-line: #262b33;
	--kb-text: #e8ebef;
	--kb-dim: #8d95a1;
	--kb-red: #e0243c;
	--kb-amber: #f0a020;
	--kb-green: #27b473;
	--kb-shell: 1080px;
	--kb-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
	--kb-sans: "Inter Tight", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0; background: var(--kb-bg); color: var(--kb-text);
	font: 16px/1.65 var(--kb-sans);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--kb-amber); }
img { max-width: 100%; height: auto; }
.kb-wrap { max-width: var(--kb-shell); margin: 0 auto; padding: 0 18px; }

h1, h2, h3 { font-family: var(--kb-sans); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(25px, 5.4vw, 38px); }
h2 { font-size: clamp(19px, 3.6vw, 25px); }

/* Header carries a red kerb stripe: the one piece of racing furniture that is
   not a logo and not a flag. */
.kb-masthead { background: var(--kb-panel); border-bottom: 3px solid var(--kb-red); }
.kb-masthead__inner { display: flex; align-items: center; gap: 18px; padding: 13px 0; flex-wrap: wrap; }
.kb-logo { font-family: var(--kb-sans); font-weight: 800; font-size: 21px; letter-spacing: -.02em;
	color: var(--kb-text); text-decoration: none; text-transform: uppercase; }
.kb-logo b { color: var(--kb-red); }
.kb-menu { margin-left: auto; display: flex; flex-wrap: wrap; gap: 3px 18px; }
.kb-menu a { color: var(--kb-dim); text-decoration: none; font-size: 14px; font-weight: 500; padding: 5px 0; }
.kb-menu a:hover, .kb-menu .current-menu-item > a { color: var(--kb-text); }

.kb-body { padding: 24px 0 52px; }
.kb-cols { display: grid; gap: 24px; }
@media (min-width: 900px) { .kb-cols { grid-template-columns: minmax(0,1fr) 340px; } }

.kb-panel { background: var(--kb-panel); border: 1px solid var(--kb-line); border-radius: 6px;
	padding: 16px; margin: 0 0 20px; }
.kb-panel__title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .09em; color: var(--kb-dim); margin: 0 0 12px; }
.kb-panel__title::before { content: ""; width: 3px; height: 14px; background: var(--kb-red); border-radius: 1px; }

.kb-grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kb-grid th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--kb-dim);
	text-align: right; padding: 0 6px 8px; border-bottom: 1px solid var(--kb-line); font-weight: 600; }
.kb-grid td { padding: 8px 6px; border-bottom: 1px solid var(--kb-line); text-align: right; font-size: 14px; }
.kb-grid tr:last-child td { border-bottom: 0; }
.kb-pos { text-align: left !important; width: 30px; font-family: var(--kb-mono); font-size: 13px; color: var(--kb-dim); }
.kb-who { text-align: left !important; font-weight: 600; }
.kb-who small { display: block; font-size: 11px; color: var(--kb-dim); font-weight: 400; }
.kb-pts { font-family: var(--kb-mono); font-weight: 700; color: var(--kb-text); }
.kb-grid tr:first-child .kb-pos { color: var(--kb-amber); }
.kb-delta { font-family: var(--kb-mono); font-size: 11px; }
.kb-delta.up { color: var(--kb-green); }
.kb-delta.down { color: var(--kb-red); }

/* Session board: the "jam berapa" answer, which is the reason this page exists. */
.kb-sessions { list-style: none; margin: 0; padding: 0; }
.kb-sessions li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
	padding: 10px 0; border-bottom: 1px solid var(--kb-line); }
.kb-sessions li:last-child { border-bottom: 0; }
.kb-sessions .kb-ses { font-size: 14px; }
.kb-sessions .kb-time { font-family: var(--kb-mono); font-size: 15px; font-weight: 700; color: var(--kb-amber); }
.kb-sessions .kb-time span { font-size: 10px; color: var(--kb-dim); margin-left: 4px; font-weight: 400; }
.kb-sessions li.is-race .kb-ses { font-weight: 700; }
.kb-sessions li.is-race .kb-time { color: var(--kb-red); }

.kb-round { border: 1px solid var(--kb-line); border-radius: 6px; padding: 14px; background: var(--kb-panel-2);
	margin-bottom: 16px; }
.kb-round__flag { font-family: var(--kb-mono); font-size: 11px; letter-spacing: .12em; color: var(--kb-red); }
.kb-round__name { font-size: 18px; font-weight: 700; margin: 3px 0 2px; }
.kb-round__where { font-size: 13px; color: var(--kb-dim); }

.kb-stamp { font-family: var(--kb-mono); font-size: 11.5px; color: var(--kb-dim); margin: 12px 0 0; }
.kb-none { color: var(--kb-dim); font-style: italic; }

.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list li { padding: 12px 0; border-bottom: 1px solid var(--kb-line); }
.kb-list li:last-child { border-bottom: 0; }
.kb-list a { color: var(--kb-text); text-decoration: none; font-weight: 600; font-size: 15px; }
.kb-list a:hover { color: var(--kb-amber); }
.kb-list time { display: block; font-family: var(--kb-mono); font-size: 11px; color: var(--kb-dim); margin-top: 3px; }

.kb-post { background: var(--kb-panel); border: 1px solid var(--kb-line); border-radius: 6px; padding: 22px; }
.kb-post table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0;
	font-variant-numeric: tabular-nums; display: block; overflow-x: auto; }
.kb-post th, .kb-post td { border-bottom: 1px solid var(--kb-line); padding: 8px 7px; text-align: left; }
.kb-post th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--kb-dim); }
.kb-post .src { font-family: var(--kb-mono); font-size: 11.5px; color: var(--kb-dim);
	border-top: 1px solid var(--kb-line); padding-top: 12px; }
.kb-post .related { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kb-post .related a { background: var(--kb-panel-2); border: 1px solid var(--kb-line); border-radius: 4px;
	padding: 7px 12px; font-size: 13px; text-decoration: none; color: var(--kb-text); }
.kb-byline { font-family: var(--kb-mono); font-size: 11.5px; color: var(--kb-dim); margin-bottom: 16px; }

.kb-crumbs { font-size: 12px; color: var(--kb-dim); margin-bottom: 16px; }
.kb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.kb-crumbs li + li::before { content: "/"; margin-right: 7px; color: var(--kb-line); }
.kb-crumbs a { color: var(--kb-dim); text-decoration: none; }

.kb-footer { border-top: 1px solid var(--kb-line); margin-top: 42px; padding: 26px 0; color: var(--kb-dim); font-size: 13px; }
.kb-footer p { max-width: 64ch; }

@media (max-width: 560px) {
	.kb-drop { display: none; }
	.kb-grid td, .kb-grid th { padding: 7px 4px; font-size: 13px; }
}
:focus-visible { outline: 2px solid var(--kb-amber); outline-offset: 2px; }

/* ---- rider dossier ---- */
.kb-rider__top { display: flex; align-items: center; gap: 16px; padding-bottom: 14px;
	border-bottom: 1px solid var(--kb-line); margin-bottom: 14px; }
.kb-rider__num { font-family: var(--kb-mono); font-weight: 700; font-size: 38px; line-height: 1;
	color: var(--kb-red); min-width: 58px; text-align: center; }
.kb-rider__name { font-size: 24px; margin: 0; }
.kb-rider__team { font-size: 13.5px; color: var(--kb-dim); }
.kb-rider .kb-grid td { text-align: right; }
.kb-rider .kb-grid td.kb-who { color: var(--kb-dim); font-weight: 400; }

/* ---- rider index ---- */
.kb-riders { list-style: none; margin: 0; padding: 0; }
.kb-riders a { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center;
	padding: 10px 0; border-bottom: 1px solid var(--kb-line); text-decoration: none; color: var(--kb-text); }
.kb-riders a:hover { color: var(--kb-amber); }
.kb-riders__no { font-family: var(--kb-mono); font-size: 15px; font-weight: 700; color: var(--kb-dim); text-align: right; }
.kb-riders__nm { font-size: 15px; font-weight: 600; }
.kb-riders__nm small { display: block; font-size: 11.5px; color: var(--kb-dim); font-weight: 400; }
.kb-riders__pt { font-family: var(--kb-mono); font-weight: 700; }

/* ---- prose and faq ---- */
.kb-teks p { margin: 0 0 1em; }
.kb-teks p:last-child { margin-bottom: 0; }
.kb-teks h3 { font-size: 17px; margin-top: 1.4em; }
.kb-faq__q { border-bottom: 1px solid var(--kb-line); padding: 12px 0; }
.kb-faq__q:last-child { border-bottom: 0; }
.kb-faq__q summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none;
	display: flex; justify-content: space-between; gap: 12px; }
.kb-faq__q summary::after { content: "+"; color: var(--kb-red); font-weight: 700; }
.kb-faq__q[open] summary::after { content: "3"; }
.kb-faq__q p { margin: 10px 0 0; font-size: 14.5px; color: var(--kb-dim); }

/* ---- round pages ---- */
.kb-round-page .kb-sessions .kb-ses small { display: block; font-size: 11px; color: var(--kb-dim); }
.kb-rounds { list-style: none; margin: 0; padding: 0; }
.kb-rounds a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
	padding: 11px 0; border-bottom: 1px solid var(--kb-line); text-decoration: none; color: var(--kb-text); }
.kb-rounds a:hover { color: var(--kb-amber); }
.kb-rounds__n { font-family: var(--kb-mono); font-size: 12px; color: var(--kb-dim); text-align: right; }
.kb-rounds__t { font-size: 15px; font-weight: 600; }
.kb-rounds__t small { display: block; font-size: 11.5px; color: var(--kb-dim); font-weight: 400; }
.kb-rounds__d { font-family: var(--kb-mono); font-size: 12px; color: var(--kb-dim); }
.kb-rounds li.is-next .kb-rounds__n { color: var(--kb-red); font-weight: 700; }