/*
Theme Name: Msimamo
Theme URI: https://msimamo.com/
Description: Matchday board for East African football. Table first, built for a 94% mobile audience on slow connections.
Author: Msimamo
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: msimamo
*/

/* Ground is a deep pitch green, not black: the audience reads outdoors on
   phones in daylight, where pure black burns contrast and eats battery on the
   OLED half of the fleet without helping legibility. Club colours are avoided
   on purpose, Simba red and Yanga yellow both read as taking a side. */
:root {
	--ms-ink: #10201a;
	--ms-paper: #f4f1e8;
	--ms-card: #fffdf7;
	--ms-rule: #d8d2c2;
	--ms-green: #0d5c3f;
	--ms-green-dark: #063a28;
	--ms-amber: #c8891a;
	--ms-muted: #6a6656;
	--ms-win: #1b7a4f;
	--ms-loss: #a8362a;
	--ms-shell: 980px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--ms-paper);
	color: var(--ms-ink);
	font: 16px/1.6 "Noto Serif", Georgia, "Times New Roman", serif;
	-webkit-text-size-adjust: 100%;
}
a { color: var(--ms-green); }
img { max-width: 100%; height: auto; }

.ms-shell { max-width: var(--ms-shell); margin: 0 auto; padding: 0 16px; }

/* Headings take the compressed, verb-initial capital register the Tanzanian
   sports press actually prints, so the type has to hold caps without falling
   apart on a 360px screen. */
h1, h2, h3, .ms-board__head {
	font-family: "Archivo Narrow", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .01em;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(26px, 6vw, 40px); }
h2 { font-size: clamp(20px, 4.4vw, 27px); }

.ms-top { background: var(--ms-green-dark); color: #f4f1e8; }
.ms-top__bar { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.ms-brand { font-family: "Archivo Narrow", "Arial Narrow", Arial, sans-serif; font-weight: 700;
	font-size: 25px; text-transform: uppercase; letter-spacing: .03em; color: #fff; text-decoration: none; }
.ms-brand span { color: var(--ms-amber); }
.ms-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ms-nav a { color: #e6e2d4; text-decoration: none; font-family: "Archivo Narrow", Arial, sans-serif;
	text-transform: uppercase; font-size: 14px; letter-spacing: .05em; padding: 4px 0; }
.ms-nav a:hover, .ms-nav .current-menu-item > a { color: var(--ms-amber); }

.ms-main { padding: 22px 0 48px; }
.ms-layout { display: grid; gap: 26px; }
@media (min-width: 860px) { .ms-layout { grid-template-columns: 1fr 320px; } }

/* Board: the table is the product, so it gets the card and the page does not. */
.ms-board { background: var(--ms-card); border: 1px solid var(--ms-rule); border-radius: 3px;
	padding: 14px 14px 8px; margin: 0 0 22px; }
.ms-board__head { font-size: 19px; text-transform: uppercase; margin-bottom: 10px;
	display: flex; align-items: baseline; gap: 10px; }
.ms-board__season { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 12px; color: var(--ms-muted); letter-spacing: .04em; }

.ms-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.ms-table th { text-align: right; font-family: "Archivo Narrow", Arial, sans-serif;
	font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ms-muted);
	padding: 0 4px 7px; border-bottom: 2px solid var(--ms-ink); }
.ms-table td { text-align: right; padding: 7px 4px; border-bottom: 1px solid var(--ms-rule); }
.ms-table__pos { text-align: left !important; width: 26px; color: var(--ms-muted); }
.ms-table__club { text-align: left !important; font-weight: 600; }
.ms-table__pts { font-weight: 700; }
.ms-table tbody tr:nth-child(-n+2) .ms-table__pos { color: var(--ms-green); font-weight: 700; }
.ms-tag { font-size: 10px; color: var(--ms-amber); margin-left: 5px; letter-spacing: .05em; }

.ms-fixtures { list-style: none; margin: 0; padding: 0; }
.ms-fixtures__day { font-family: "Archivo Narrow", Arial, sans-serif; text-transform: uppercase;
	font-size: 11px; letter-spacing: .08em; color: var(--ms-muted);
	padding: 12px 0 5px; border-bottom: 1px solid var(--ms-rule); }
.ms-fixtures__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ms-rule); font-size: 15px; }
.ms-fixtures__home { text-align: right; }
.ms-fixtures__away { text-align: left; }
.ms-fixtures__mid { font-family: ui-monospace, Consolas, monospace; font-size: 13px;
	color: var(--ms-muted); min-width: 46px; text-align: center; }
.ms-fixtures__mid.is-score { background: var(--ms-ink); color: #fff; border-radius: 2px;
	padding: 3px 7px; font-weight: 700; }

.ms-checked { font-size: 12px; color: var(--ms-muted); margin: 10px 0 4px;
	font-family: ui-monospace, Consolas, monospace; }
.ms-empty { color: var(--ms-muted); font-style: italic; }

.ms-card { background: var(--ms-card); border: 1px solid var(--ms-rule); padding: 14px; margin-bottom: 18px; }
.ms-feed { list-style: none; margin: 0; padding: 0; }
.ms-feed li { padding: 11px 0; border-bottom: 1px solid var(--ms-rule); }
.ms-feed li:last-child { border-bottom: 0; }
.ms-feed a { text-decoration: none; color: var(--ms-ink); font-weight: 600; }
.ms-feed a:hover { color: var(--ms-green); }
.ms-feed time { display: block; font-size: 11px; color: var(--ms-muted);
	font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }

.ms-article { background: var(--ms-card); border: 1px solid var(--ms-rule); padding: 20px; }
.ms-article table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0;
	font-variant-numeric: tabular-nums; display: block; overflow-x: auto; }
.ms-article th, .ms-article td { border-bottom: 1px solid var(--ms-rule); padding: 7px 6px; text-align: left; }
.ms-article th { font-family: "Archivo Narrow", Arial, sans-serif; font-size: 11px;
	text-transform: uppercase; letter-spacing: .06em; color: var(--ms-muted); }
.ms-article .src { font-size: 12px; color: var(--ms-muted);
	font-family: ui-monospace, Consolas, monospace; border-top: 1px solid var(--ms-rule); padding-top: 10px; }
.ms-article .related { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ms-article .related a { display: inline-block; background: var(--ms-paper); border: 1px solid var(--ms-rule);
	padding: 6px 11px; font-size: 13px; text-decoration: none; }

.ms-meta { font-size: 12px; color: var(--ms-muted); font-family: ui-monospace, Consolas, monospace;
	letter-spacing: .04em; margin-bottom: 14px; }

.ms-foot { background: var(--ms-green-dark); color: #cfc9b6; margin-top: 40px; padding: 24px 0; font-size: 13px; }
.ms-foot a { color: #e6e2d4; }
.ms-foot__note { max-width: 62ch; margin: 10px 0 0; line-height: 1.5; }

@media (max-width: 520px) {
	.ms-hide-s { display: none; }
	.ms-table { font-size: 13px; }
	.ms-board { padding: 11px 11px 6px; }
}
:focus-visible { outline: 2px solid var(--ms-amber); outline-offset: 2px; }

/* ---- club dossier ---- */
.ms-club__strip { display: flex; align-items: center; gap: 14px; padding: 0 0 12px;
	border-bottom: 2px solid var(--ms-ink); margin-bottom: 12px; }
.ms-club__pos { font-family: "Archivo Narrow", Arial, sans-serif; font-weight: 700; font-size: 34px;
	line-height: 1; color: var(--ms-green); min-width: 44px; text-align: center; }
.ms-club__name { font-family: "Archivo Narrow", Arial, sans-serif; font-weight: 700;
	font-size: 23px; text-transform: uppercase; line-height: 1.1; }
.ms-club__sub { font-size: 13px; color: var(--ms-muted); }

/* ---- club index ---- */
.ms-clubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
	grid-template-columns: 1fr; }
@media (min-width: 620px) { .ms-clubs { grid-template-columns: 1fr 1fr; gap: 1px 18px; } }
.ms-clubs a { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline;
	padding: 9px 0; border-bottom: 1px solid var(--ms-rule); text-decoration: none; color: var(--ms-ink); }
.ms-clubs a:hover { color: var(--ms-green); }
.ms-clubs__n { color: var(--ms-muted); font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.ms-clubs__p { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- prose and faq ---- */
.ms-prose p { margin: 0 0 1em; }
.ms-prose p:last-child { margin-bottom: 0; }
.ms-prose h3 { font-size: 17px; margin-top: 1.4em; }
.ms-faq__item { border-bottom: 1px solid var(--ms-rule); padding: 11px 0; }
.ms-faq__item:last-child { border-bottom: 0; }
.ms-faq__item summary { cursor: pointer; font-weight: 600; font-family: "Archivo Narrow", Arial, sans-serif;
	font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ms-faq__item summary::after { content: "+"; color: var(--ms-amber); font-weight: 700; }
.ms-faq__item[open] summary::after { content: "3"; }
.ms-faq__item p { margin: 9px 0 0; font-size: 15px; color: var(--ms-ink); }

/* ---- match page ---- */
.ms-match__head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
	padding: 4px 0 14px; border-bottom: 2px solid var(--ms-ink); }
.ms-match__side { text-align: right; }
.ms-match__side--away { text-align: left; }
.ms-match__side a { font-family: "Archivo Narrow", Arial, sans-serif; font-weight: 700; font-size: 18px;
	text-transform: uppercase; text-decoration: none; color: var(--ms-ink); line-height: 1.15; display: block; }
.ms-match__side a:hover { color: var(--ms-green); }
.ms-match__side small { display: block; font-size: 11px; color: var(--ms-muted);
	font-family: ui-monospace, Consolas, monospace; }
.ms-match__mid { font-family: ui-monospace, Consolas, monospace; font-size: 14px; color: var(--ms-muted); }
.ms-match__mid.is-final { background: var(--ms-ink); color: #fff; font-size: 20px; font-weight: 700;
	padding: 6px 12px; border-radius: 2px; }
.ms-match__when { font-family: ui-monospace, Consolas, monospace; font-size: 12px;
	color: var(--ms-muted); margin: 10px 0 4px; }

.ms-formlist { list-style: none; margin: 0; padding: 0; }
.ms-formlist li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 9px 0; border-bottom: 1px solid var(--ms-rule); font-size: 15px; }
.ms-form i { display: inline-block; width: 21px; height: 21px; line-height: 21px; text-align: center;
	font-style: normal; font-size: 11px; font-weight: 700; border-radius: 2px; margin-left: 3px; color: #fff; }
.ms-form i.is-w { background: var(--ms-win); }
.ms-form i.is-d { background: var(--ms-muted); }
.ms-form i.is-l { background: var(--ms-loss); }

.ms-matchlist { list-style: none; margin: 0; padding: 0; }
.ms-matchlist a { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: baseline;
	padding: 10px 0; border-bottom: 1px solid var(--ms-rule); text-decoration: none; color: var(--ms-ink); }
.ms-matchlist a:hover { color: var(--ms-green); }
.ms-matchlist__d { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--ms-muted); }
.ms-matchlist__t { font-weight: 600; }
.ms-matchlist__s { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
@media (max-width: 520px) { .ms-matchlist a { grid-template-columns: 1fr auto; }
	.ms-matchlist__d { grid-column: 1 / -1; } }

.ms-match__note { font-size: 15px; color: var(--ms-ink); background: var(--ms-paper);
	border-left: 3px solid var(--ms-green); padding: 11px 14px; margin: 16px 0 0; }