/*
 * content-tables.css — content tables (the WordPress "table" block) on ANY view.
 *
 * Loaded globally via the assets/css/pages/*.css glob. The prose system in
 * article.css (.ka-prose table) only styles single blog POSTS, so standalone
 * PAGES (e.g. the body-fat guides) fell back to WordPress' default table style:
 *   - is-style-stripes painted alternate rows light grey, which stayed light in
 *     the dark modes → light text on a near-white row = invisible;
 *   - wide tables overflowed the viewport and pushed the whole page sideways on
 *     phones.
 * This file gives the block-level table its own theme-tokened, mode-aware,
 * mobile-scrollable styling everywhere (so it works on pages too).
 */

/* the figure becomes a horizontal-scroll container: a wide table scrolls inside
   it instead of widening the whole page on small screens */
.wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
	color: var(--wp--preset--color--contrast);
}

.wp-block-table th {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--heading);
	font-weight: 700;
}

/* striped rows use a theme surface tint that recolors per mode — never WP's
   hardcoded light grey (the cause of the white-rows-in-dark-mode bug) */
.wp-block-table.is-style-stripes {
	border: 1px solid var(--wp--preset--color--border);
	background-color: transparent;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface-2);
}
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
	border-color: var(--wp--preset--color--border);
}

.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	color: var(--wp--preset--color--contrast-muted);
	font-size: 0.85rem;
	margin-top: 0.5rem;
}

/* on phones keep the table wide enough to stay legible; it scrolls inside its
   figure (above) rather than cramming columns or overflowing the page */
@media (max-width: 600px) {
	.wp-block-table table {
		min-width: 440px;
	}
}