/*
 * tablepress-skin.css — restyle TablePress tables to the canonical .data-table
 * look used everywhere else in the theme (Frank, 2026-06-06).
 *
 * Loaded ONLY where TablePress's own default.css is present (article/page
 * content with a table) and enqueued as a DEPENDENCY of `tablepress-default`,
 * so it loads AFTER it. That ordering is the whole point: default.css declares
 * TablePress's theming custom properties on `.tablepress`, so a remap in the
 * sitewide bundle (which loads earlier) loses the equal-specificity tie. Loaded
 * after, the remap below wins — and because TablePress consumes those variables
 * (including for the DataTables controls: sort arrows, search box, pagination,
 * "showing N entries"), recoloring the variables reskins the whole table AND
 * its controls in one place. We deliberately KEEP default.css (it provides the
 * functional control styling); this sheet only changes the look.
 *
 * Mirrors style.css `.data-table`: mono-uppercase header, sans body, 14px
 * cells, hairline dividers, navy hover, no zebra striping, mobile h-scroll.
 * See docs/decisions.md 2026-06-06 "TablePress tables reskinned to .data-table".
 */

/* 1. Remap TablePress's theme variables to design tokens. Equal specificity to
 *    default.css's `.tablepress { ... }` declaration, but later source order, so
 *    these win. Covers striping, hover, borders, header, and DataTables chrome. */
.tablepress {
	--head-bg-color: var(--bg-header-row);
	--head-text-color: var(--ink-3);
	--head-active-bg-color: var(--bg-header-row);
	--head-active-text-color: var(--ink-2);
	--head-sort-arrow-color: var(--ink-3);
	--text-color: var(--text);
	--odd-bg-color: transparent;
	--even-bg-color: transparent;
	--hover-bg-color: rgba(12, 35, 64, 0.025);
	--hover-text-color: var(--text);
	--border-color: var(--line-soft);
	font-family: var(--font-sans);
}

/* 2. Typography + spacing the variables don't cover, matching .data-table.
 *    Child combinators (0,1,3) + later source order beat default.css and any
 *    generic article-table header rule. */
.tablepress > thead > tr > th,
.tablepress > tfoot > tr > th {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: var(--tracking-mono-loose);
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 700;
	text-align: left;
	background: var(--bg-header-row);
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 10px 14px 12px;
}
.tablepress > tbody > tr > td,
.tablepress > tbody > tr > th {
	padding: 14px;
	/* In article `the_content` the cells inherit the prose font (Roboto Slab,
	 * serif, line-height 1.7); set the sans body font directly on the cells so
	 * they read identically to `.data-table` elsewhere. */
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--text);
	font-weight: 500;
	vertical-align: middle;
	/* Match .data-table's single soft bottom divider. !important is required:
	 * TablePress's `tablepress-default-inline-css` block forces
	 * `border-bottom: 1px solid #eee !important` on `.tablepress th, .tablepress td`,
	 * which an ordinary rule (even at higher specificity) can't beat. */
	border: 0 !important;
	border-bottom: 1px solid var(--line-soft) !important;
}
.tablepress > tbody > tr:last-child > * {
	border-bottom: 0 !important;
}
/* Cell links use the canonical navy, no-underline treatment (matches
 * `.data-table tbody a`), not the default green underlined article link. */
.tablepress > tbody a {
	color: var(--nd-navy);
	font-weight: 600;
	text-decoration: none;
}
.tablepress > tbody a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* 3. Wide tables scroll horizontally on phones — same primitive as
 *    `.roster-table` (the table is its own scroll container, so it works whether
 *    or not Jannah's single.js has wrapped it in `.table-is-responsive`). */
@media (max-width: 760px) {
	.tablepress {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}