/**
 * Monte Cook Games 2020 - hand-written custom CSS.
 *
 * Lives outside the legacy Grunt/node-sass pipeline that builds style.css
 * from style.scss. Nothing compiles this file, so edit it directly.
 *
 * Enqueued from functions.php, after style.css.
 */

/* =============================================================
 * Feature comparison table
 *
 * Apply by putting "mcg-compare-table" in a Kadence Table block's
 * Advanced > Additional CSS class(es) field. Everything here is
 * presentation only, so the copy inside the block stays editable.
 *
 * Every selector is anchored on .kb-table-container.mcg-compare-table
 * rather than .mcg-compare-table alone. Kadence prints its own
 * per-block CSS inline in the body, after this file, at the same
 * specificity, so the extra class is what wins the cascade.
 * ============================================================= */

.kb-table-container.mcg-compare-table {
	margin: 2.5rem 0;
}

/* Drop the 1px border the theme puts on every table, plus any cell borders. */
.kb-table-container.mcg-compare-table .kb-table,
.kb-table-container.mcg-compare-table .kb-table tr,
.kb-table-container.mcg-compare-table .kb-table th,
.kb-table-container.mcg-compare-table .kb-table td {
	border: 0;
}

/* "separate" is what lets the striped rows take a border-radius. */
.kb-table-container.mcg-compare-table .kb-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.kb-table-container.mcg-compare-table .kb-table th,
.kb-table-container.mcg-compare-table .kb-table td {
	padding: 0.95rem 1.1rem;
	vertical-align: middle;
}

.kb-table-container.mcg-compare-table .kb-table th > *,
.kb-table-container.mcg-compare-table .kb-table td > * {
	margin: 0;
}

/* --- Row 1: the tier names --- */

.kb-table-container.mcg-compare-table .kb-table tr:first-child th {
	padding-bottom: 0.35rem;
	background-color: #fff;
}

.kb-table-container.mcg-compare-table .kb-table tr:first-child th h4 {
	font-size: 1.45rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: #3a3a3a;
}

/* --- Row 2: the price labels, rendered as pills --- */

/* The white backgrounds on rows 1 and 2 are deliberate. The block has
   "Sticky First Row" switched on, but Kadence gives its own container
   overflow-x: auto, which makes it a scroll container and stops the
   header sticking to the viewport at all. If that overflow is ever
   dropped and the header starts sticking, these keep the feature rows
   from showing through it. */
.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2) td {
	padding-top: 0;
	padding-bottom: 1.15rem;
	background-color: #fff;
	border-bottom: 2px solid #e5e5e5;
}

.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2) td:not(:first-child) p {
	display: inline-block;
	padding: 0.25em 0.95em 0.3em;
	border-radius: 999px;
	background-color: #ececee;
	color: #4b4f58;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.5;
}

.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2) td:last-child p {
	background-color: #0274be;
	color: #fff;
}

/* --- Rows 3 and down: the features --- */

/* On a table cell, height reads as a minimum. Setting one keeps the rows
   that carry a "(new!)" note the same height as the rows that do not. */
.kb-table-container.mcg-compare-table .kb-table tr:nth-child(n+3) td {
	height: 4.35rem;
}

.kb-table-container.mcg-compare-table .kb-table tr:nth-child(n+3) td:first-child {
	font-size: 1rem;
	line-height: 1.45;
	color: #3a3a3a;
}

/* Subtle zebra striping, starting on the first feature row. */
.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2n+3) td {
	background-color: #f5f5f5;
}

.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2n+3) td:first-child {
	border-radius: 6px 0 0 6px;
}

.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2n+3) td:last-child {
	border-radius: 0 6px 6px 0;
}

.kb-table-container.mcg-compare-table .kb-table tr:nth-child(n+3):hover td {
	background-color: #eaf2f8;
}

/* Stack each checkmark over its "(new!)" or "(soon!)" note, so the ticks
   stay in one straight column all the way down the table. */
.kb-table-container.mcg-compare-table .kb-table tr:nth-child(n+3) td:not(:first-child) p {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1em;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: #6a6f78;
}

/* WordPress core sizes emoji at 1em !important, which is too small here. */
.kb-table-container.mcg-compare-table .kb-table img.emoji {
	width: 1.35rem !important;
	height: 1.35rem !important;
	vertical-align: middle;
}

/* --- Narrow screens --- */

@media (max-width: 782px) {

	.kb-table-container.mcg-compare-table .kb-table th,
	.kb-table-container.mcg-compare-table .kb-table td {
		padding: 0.75rem 0.55rem;
	}

	/* The 70/15/15 split set on the block leaves the tier names too narrow
	   to fit on a phone, so give the two tier columns more room. */
	.kb-table-container.mcg-compare-table .kb-table tr > *:first-child {
		width: 54%;
	}

	.kb-table-container.mcg-compare-table .kb-table tr > *:nth-child(2),
	.kb-table-container.mcg-compare-table .kb-table tr > *:nth-child(3) {
		width: 23%;
	}

	.kb-table-container.mcg-compare-table .kb-table tr:first-child th h4 {
		font-size: 1.1rem;
	}

	.kb-table-container.mcg-compare-table .kb-table tr:nth-child(n+3) td {
		height: auto;
	}

	.kb-table-container.mcg-compare-table .kb-table tr:nth-child(n+3) td:first-child {
		font-size: 0.9rem;
		line-height: 1.35;
	}

	.kb-table-container.mcg-compare-table .kb-table tr:nth-child(n+3) td:not(:first-child) p {
		font-size: 0.68rem;
	}

	.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2) td:not(:first-child) p {
		padding: 0.25em 0.6em 0.3em;
		font-size: 0.62rem;
		letter-spacing: 0.1em;
	}

	.kb-table-container.mcg-compare-table .kb-table img.emoji {
		width: 1.15rem !important;
		height: 1.15rem !important;
	}
}