/*
 * European.realestate — tables inside a news article.
 *
 * What the reader gets instead of the block library's grid: one box with a rounded outline, a navy
 * header band, one hairline per row, a tinted stripe on every second row, and a row tint under the
 * pointer. The first cell of a row is the label a reader scans for, so it is navy and semi-bold.
 *
 * Scoped to `.single-article-wrap`: `.post-content-wrap` also wraps the news cards on the listing
 * pages, and nothing here should reach those. Only one rule in this file needs to beat anything —
 * padding, because the parent theme declares `.post-content-wrap table td { padding: 5px }` — so
 * every cell rule carries the scope, and no declaration uses `!important`.
 *
 * Fixing the cause of the old look: `.wp-block-table td, .wp-block-table th { border: 1px solid }`
 * in the block library paints a full grid in the current text colour, and the theme's
 * `.post-content-wrap table td { padding: 5px }` leaves 5px of air in each cell.
 */

.single-article-wrap .post-content-wrap {
	--ere-table-line: #e3e9f0;
	--ere-table-head-bg: #00345d;
	--ere-table-head-ink: #ffffff;
	--ere-table-ink: #1d2f42;
	--ere-table-muted: #5b6b7c;
	--ere-table-zebra: #f6f9fc;
	--ere-table-hover: #eef4fa;
	--ere-table-radius: 12px;
}

/* ---- the box ----------------------------------------------------------- */

.single-article-wrap .post-content-wrap table {
	width: 100%;
	margin: 0 0 26px;
	border: 1px solid var(--ere-table-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--ere-table-radius);
	overflow: hidden;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(16, 32, 48, 0.04), 0 12px 28px -22px rgba(16, 32, 48, 0.35);
	color: var(--ere-table-ink);
	font-size: 16px;
	line-height: 1.55;
}

/* the block library draws a 3px rule under the head; the header band carries that job now */
.single-article-wrap .post-content-wrap table thead,
.single-article-wrap .post-content-wrap table thead tr {
	border: 0;
}

/* ---- the header band --------------------------------------------------- */

.single-article-wrap .post-content-wrap table th {
	padding: 14px 18px;
	border: 0;
	background-color: var(--ere-table-head-bg);
	color: var(--ere-table-head-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: left;
	vertical-align: bottom;
}

.single-article-wrap .post-content-wrap table thead tr:first-child th:first-child {
	border-top-left-radius: calc(var(--ere-table-radius) - 1px);
}

.single-article-wrap .post-content-wrap table thead tr:first-child th:last-child {
	border-top-right-radius: calc(var(--ere-table-radius) - 1px);
}

/* ---- the rows ---------------------------------------------------------- */

.single-article-wrap .post-content-wrap table td {
	padding: 13px 18px;
	border: 0;
	border-top: 1px solid var(--ere-table-line);
	color: var(--ere-table-ink);
	vertical-align: top;
}

.single-article-wrap .post-content-wrap table tbody tr:nth-child(even) td {
	background-color: var(--ere-table-zebra);
}

.single-article-wrap .post-content-wrap table tbody tr:hover td {
	background-color: var(--ere-table-hover);
}

/* the row label */
.single-article-wrap .post-content-wrap table tbody td:first-child {
	color: var(--ere-table-head-bg);
	font-weight: 600;
}

/* the box already draws the bottom edge, so the last row only needs its corners */
.single-article-wrap .post-content-wrap table tbody tr:last-child td:first-child {
	border-bottom-left-radius: calc(var(--ere-table-radius) - 1px);
}

.single-article-wrap .post-content-wrap table tbody tr:last-child td:last-child {
	border-bottom-right-radius: calc(var(--ere-table-radius) - 1px);
}

/* ---- a caption belongs to the table, not to the article flow ----------- */

.single-article-wrap .post-content-wrap table caption,
.single-article-wrap .post-content-wrap .wp-block-table figcaption {
	caption-side: bottom;
	padding: 10px 2px 0;
	color: var(--ere-table-muted);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

/* ---- the "stripes" block style keeps this look, not the library's grey -- */

.single-article-wrap .post-content-wrap .wp-block-table.is-style-stripes {
	border-bottom: 0;
	background-color: transparent;
}

.single-article-wrap .post-content-wrap .wp-block-table.is-style-stripes tbody tr:nth-child(2n + 1) td {
	background-color: var(--ere-table-zebra);
}

/* ---- a narrow screen: the table scrolls sideways, the cells only tighten - */

@media (max-width: 767px) {
	.single-article-wrap .post-content-wrap table {
		font-size: 14.5px;
		/*
		 * The figure is the scroll container: the block library declares
		 * `figure.wp-block-table { overflow-x: auto }`. A table that is free to shrink to the column
		 * width never scrolls, it only gets narrower, so the minimum width is what makes the scroll
		 * real. 600px is three columns of ~186px at the smallest phone width.
		 */
		min-width: 600px;
	}

	.single-article-wrap .post-content-wrap table th,
	.single-article-wrap .post-content-wrap table td {
		padding: 11px 12px;
	}

	.single-article-wrap .post-content-wrap table th {
		font-size: 14px;
	}

	/*
	 * A sideways swipe over the table belongs to the table, not to the browser's back gesture, and the
	 * scroll gets the platform's own momentum.
	 */
	.single-article-wrap .post-content-wrap figure.wp-block-table {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
}