/*
Theme Name: IGNBA
Description: Front office theme for the IGNBA fantasy GM league. Pairs with the IGNBA League plugin, which provides the teams, players, contracts, picks and trades this theme displays.
Version: 0.2.0
Requires PHP: 7.4
Author: IGNBA
Text Domain: ignba
*/

/* ── Tokens ─────────────────────────────────────────────────────────────
   Light is the default; dark follows the OS unless a visitor picks one with
   the header toggle (stored as data-theme on <html>). */

:root {
	--bg: #f4f5f7;
	--bg-card: #ffffff;
	--bg-sunk: #eceef2;
	--border: #dde1e7;
	--border-strong: #c6ccd5;
	--text: #14171c;
	--text-2: #424955;
	--text-muted: #6a7280;
	--link: #1f5fd1;
	--accent: #e0482b;
	--accent-ink: #ffffff;
	--ok: #1d8a4e;
	--warn: #b7791f;
	--bad: #c62f2f;

	/* Contract types: tints for chips, matching the sheet's legend hues. */
	--ct-player_option: #1f9d55;
	--ct-team_option: #0e8fa8;
	--ct-qualifying_offer: #b89100;
	--ct-cap_hold: #7b818c;
	--ct-vet_min: #d97706;
	--ct-bae: #3b6fd8;
	--ct-extension: #c0269e;
	--ct-two_way: #5b6472;

	--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--wrap: 1200px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0e1014;
		--bg-card: #171a20;
		--bg-sunk: #111318;
		--border: #262b33;
		--border-strong: #343a45;
		--text: #eef0f3;
		--text-2: #c3c8d0;
		--text-muted: #8b929d;
		--link: #7aa7ff;
		--accent: #ff6a4d;
		--ok: #3ccf7a;
		--warn: #f0b347;
		--bad: #ff6b6b;
		--ct-player_option: #3ccf7a;
		--ct-team_option: #35c6e0;
		--ct-qualifying_offer: #e8c547;
		--ct-cap_hold: #9aa1ad;
		--ct-vet_min: #f59e3b;
		--ct-bae: #7aa7ff;
		--ct-extension: #f062c9;
		--ct-two_way: #9aa1ad;
		--shadow: none;
	}
}

:root[data-theme="dark"] {
	--bg: #0e1014;
	--bg-card: #171a20;
	--bg-sunk: #111318;
	--border: #262b33;
	--border-strong: #343a45;
	--text: #eef0f3;
	--text-2: #c3c8d0;
	--text-muted: #8b929d;
	--link: #7aa7ff;
	--accent: #ff6a4d;
	--ok: #3ccf7a;
	--warn: #f0b347;
	--bad: #ff6b6b;
	--ct-player_option: #3ccf7a;
	--ct-team_option: #35c6e0;
	--ct-qualifying_offer: #e8c547;
	--ct-cap_hold: #9aa1ad;
	--ct-vet_min: #f59e3b;
	--ct-bae: #7aa7ff;
	--ct-extension: #f062c9;
	--ct-two_way: #9aa1ad;
	--shadow: none;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.55 var(--font-body);
	font-feature-settings: "tnum" 1;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.1;
	margin: 0 0 .5em;
}
h1 { font-size: 2.4rem; text-transform: uppercase; }
h2 { font-size: 1.5rem; text-transform: uppercase; }
h3 { font-size: 1.15rem; }

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

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ── Header / nav ─────────────────────────────────────────────────────── */

.site-header {
	background: #101318;
	color: #fff;
	border-bottom: 3px solid var(--accent);
	position: sticky;
	top: 0;
	z-index: 20;
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 58px; }
.site-brand {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: .04em;
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
}
.site-brand:hover { text-decoration: none; }
.site-brand span { color: var(--accent); }

.site-nav { flex: 1; min-width: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; flex-wrap: wrap; }
.site-nav a {
	display: block;
	padding: .45rem .65rem;
	border-radius: var(--radius-sm);
	color: #c9ced6;
	font-weight: 600;
	font-size: .88rem;
}
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a, .site-nav .is-current > a {
	color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none;
}

.nav-toggle, .theme-toggle {
	background: none; border: 1px solid rgba(255, 255, 255, .2); color: #fff;
	border-radius: var(--radius-sm); padding: .35rem .6rem; cursor: pointer; font: inherit; font-size: .85rem;
}
.nav-toggle { display: none; }

@media (max-width: 900px) {
	.nav-toggle { display: inline-block; margin-left: auto; }
	.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #101318; padding: .5rem 16px 1rem; border-bottom: 3px solid var(--accent); }
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; }
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.site-main { padding: 2rem 0 4rem; }

.page-head { margin-bottom: 1.5rem; }
.page-head p { color: var(--text-muted); margin: 0; }
.eyebrow {
	font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--text-muted); margin-bottom: .35rem;
}

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-teams { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.1rem 1.2rem;
	min-width: 0;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head a { font-size: .85rem; font-weight: 600; }

.section { margin-top: 2rem; }

.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }

/* ── Team badge ───────────────────────────────────────────────────────── */

.team-badge { display: inline-block; vertical-align: middle; object-fit: contain; flex-shrink: 0; }
img.team-badge { background: none; }
/* Logos on the colored team banner get a light plate so dark logos stay visible. */
.team-hero img.team-badge { background: rgba(255, 255, 255, .92); border-radius: 50%; padding: 8px; box-sizing: content-box; }
.team-badge--disc {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--team); color: #fff; font-family: var(--font-display);
	font-weight: 700; letter-spacing: .02em;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.team-inline { display: inline-flex; align-items: center; gap: .45rem; color: inherit; font-weight: 600; }

/* ── Player photo ─────────────────────────────────────────────────────── */

/* ESPN headshots are landscape with the face near the top, so crop from there. */
.player-photo {
	display: inline-block; vertical-align: middle; flex-shrink: 0;
	border-radius: 50%; object-fit: cover; object-position: 50% 15%;
	background: var(--bg-sunk); border: 1px solid var(--border);
}
.player-photo--initials {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--text-muted); font-weight: 700; letter-spacing: .02em;
}
.player-name { display: inline-flex; align-items: center; gap: .55rem; }
.player-hero { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.player-hero .player-photo { border-width: 3px; }

/* ── Chips ────────────────────────────────────────────────────────────── */

.chip {
	display: inline-block; padding: .08rem .5rem; border-radius: 999px;
	font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
	border: 1px solid var(--border-strong); color: var(--text-2);
}
.chip--under_cap { color: var(--ok); border-color: currentColor; }
.chip--over_cap  { color: var(--text-2); }
.chip--tax       { color: var(--warn); border-color: currentColor; }
.chip--apron1    { color: var(--bad); border-color: currentColor; }
.chip--apron2    { color: #fff; background: var(--bad); border-color: var(--bad); }
.chip--frozen    { color: var(--ct-bae); border-color: currentColor; }
.chip--forfeited { color: var(--bad); border-color: currentColor; }

/* ── Tables ───────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.2rem; padding: 0 1.2rem; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.data thead th {
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--text-muted); border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
table.data tbody tr:hover { background: var(--bg-sunk); }
table.data tfoot td, table.data tr.total td { font-weight: 700; border-top: 1px solid var(--border-strong); }
table.data th[data-sort] { cursor: pointer; user-select: none; }
table.data th[data-sort]::after { content: " ↕"; opacity: .35; }
table.data th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
table.data th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
table.data .sub td { color: var(--text-muted); font-size: .82rem; }
table.data td.player-cell { min-width: 170px; }

/* A salary cell carries its contract type as a left bar plus a tiny tag. */
.sal { position: relative; }
.sal[data-ct]:not([data-ct="guaranteed"]) { box-shadow: inset 3px 0 0 var(--ct); }
.sal .ct-tag {
	display: inline-block; margin-right: .4rem; padding: .1rem .3rem; border-radius: 3px;
	font-size: .62rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2;
	color: var(--ct); background: color-mix(in srgb, var(--ct) 14%, transparent);
	text-transform: uppercase; vertical-align: 1px;
}
.sal[data-ct="player_option"]    { --ct: var(--ct-player_option); }
.sal[data-ct="team_option"]      { --ct: var(--ct-team_option); }
.sal[data-ct="qualifying_offer"] { --ct: var(--ct-qualifying_offer); }
.sal[data-ct="cap_hold"]         { --ct: var(--ct-cap_hold); }
.sal[data-ct="vet_min"]          { --ct: var(--ct-vet_min); }
.sal[data-ct="bae"]              { --ct: var(--ct-bae); }
.sal[data-ct="extension"]        { --ct: var(--ct-extension); }
.sal[data-ct="two_way"]          { --ct: var(--ct-two_way); }

.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--text-2); margin: .75rem 0 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--ct); display: inline-block; }

.filter-input {
	width: 100%; max-width: 320px; padding: .5rem .7rem; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text); font: inherit;
}

/* ── Stat tiles ───────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; }
.tile-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.tile-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.1; margin-top: .15rem; }
.tile-sub { font-size: .78rem; color: var(--text-muted); }

/* ── Team page header ─────────────────────────────────────────────────── */

.team-hero {
	background: linear-gradient(120deg, var(--team) 0%, color-mix(in srgb, var(--team) 55%, #000) 100%);
	color: #fff;
	padding: 1.75rem 0;
	margin-top: -2rem;
	margin-bottom: 1.5rem;
}
.team-hero .wrap { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.team-hero h1 { margin: 0; }
.team-hero .eyebrow, .team-hero .muted { color: rgba(255, 255, 255, .75); }
.team-hero .chip { border-color: rgba(255, 255, 255, .5); color: #fff; }

/* ── Team cards (index) ───────────────────────────────────────────────── */

.team-card { display: flex; flex-direction: column; gap: .6rem; border-top: 4px solid var(--team); }
.team-card-head { display: flex; align-items: center; gap: .7rem; }
.team-card-head a { color: inherit; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; line-height: 1.05; }
.team-card dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0; font-size: .85rem; }
.team-card dt { color: var(--text-muted); }
.team-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Trades ───────────────────────────────────────────────────────────── */

.trade { display: grid; gap: .75rem; }
.trade-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .75rem; }
.trade-side h4 { margin: 0 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; }
.trade-side ul { margin: 0; padding-left: 1.1rem; }
.trade-side li { margin: .1rem 0; }
.trade-date { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Lists ────────────────────────────────────────────────────────────── */

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: .45rem 0; border-bottom: 1px solid var(--border); display: flex; gap: .6rem; align-items: center; }
.list-plain li:last-child { border-bottom: 0; }
.list-plain .grow { flex: 1; min-width: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.tabs a {
	padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border-strong);
	color: var(--text-2); font-weight: 600; font-size: .85rem;
}
.tabs a.is-active { background: var(--text); color: var(--bg); border-color: var(--text); text-decoration: none; }

/* ── Games, standings, leaders ────────────────────────────────────────── */

.scoreboard { display: grid; gap: .75rem; }
.scoreboard-team { display: flex; align-items: center; gap: .9rem; }
.scoreboard-name a { color: inherit; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }
.scoreboard-score { margin-left: auto; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--text-muted); line-height: 1; }
.scoreboard-team.is-winner .scoreboard-score { color: var(--text); }
table.linescore { max-width: 520px; }
.game-line { display: inline-flex; align-items: center; gap: .6rem; color: inherit; font-variant-numeric: tabular-nums; }
.game-line .is-winner { font-weight: 700; }
table.data tr.cutline td { border-bottom: 2px solid var(--border-strong); }
.leaders li { gap: .5rem; }

/* ── Content (posts/pages) ────────────────────────────────────────────── */

.entry { max-width: 760px; }
.entry-content { font-size: 1.02rem; }
.entry-content table { border-collapse: collapse; }
.entry-content td, .entry-content th { border: 1px solid var(--border); padding: .4rem .6rem; }
.post-list { display: grid; gap: 1rem; }
.post-card h2 { font-size: 1.35rem; margin-bottom: .25rem; }
.post-card h2 a { color: inherit; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--border); padding: 1.5rem 0 2.5rem; color: var(--text-muted); font-size: .85rem; }

@media (max-width: 600px) {
	h1 { font-size: 1.9rem; }
	.card { padding: 1rem; }
	.table-wrap { margin: 0 -1rem; padding: 0 1rem; }
}