/**
 * Monte Cook Games 2020 (store) - 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, and bump
 * CHILD_THEME_MCG_2020_VERSION in functions.php, which is the only
 * cache-buster this install has.
 *
 * Enqueued from functions.php, after style.css. Mirrors the file of the same
 * name in the MARKETING install's copy of this theme. The comparison table
 * section below is a straight port of that file, because the Kadence table
 * block on the Cypher Tools product was copied over from the announcement
 * article and carries the same mcg-compare-table class. Keep the two in sync.
 */

/* =============================================================
 * Feature list
 *
 * Apply by putting "mcg-feature-list" in a core List block's
 * Advanced > Additional CSS class(es) field.
 *
 * Written for items shaped as a bold lead-in followed by a
 * paragraph of copy. The lead-in is promoted to its own line and
 * the bullet is dropped, which is what buys back the vertical
 * space: a wrapped bullet item spends its first line on two or
 * three words beside a marker.
 *
 * Every selector compounds .mcg-feature-list onto .wp-block-list
 * rather than standing alone. Astra and the theme stylesheet
 * reach these elements as ".entry-content ul li", specificity
 * (0,1,2), which beats a lone ".mcg-feature-list li" at (0,1,1).
 * Compounded, the li rules sit at (0,2,1) and win.
 * ============================================================= */

.wp-block-list.mcg-feature-list {
	margin: 1.3rem 0 0;
	padding: 0;
	list-style: none;
}

.wp-block-list.mcg-feature-list li {
	margin: 0;
	padding: 0.8rem 0 0.85rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.95rem;
	line-height: 1.45;
}

.wp-block-list.mcg-feature-list li:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* The lead-in. :first-child rather than any strong, so a bolded phrase
   further into the copy is left alone. */
.wp-block-list.mcg-feature-list li > strong:first-child {
	display: block;
	margin-bottom: 0.2rem;
	color: #3a3a3a;
	font-size: 1.02rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

/* Core puts a parenthetical aside at the end of two of these items. Nothing
   to do but keep it from being mistaken for the next item. */
.wp-block-list.mcg-feature-list li em {
	color: inherit;
}

@media (max-width: 782px) {

	.wp-block-list.mcg-feature-list li {
		padding: 0.7rem 0 0.75rem;
		font-size: 0.92rem;
	}

	.wp-block-list.mcg-feature-list li > strong:first-child {
		font-size: 1rem;
	}
}

/* =============================================================
 * 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;
}

/* The pill below is an inline-block, so it is the CELL's text-align that
   positions it, not the has-text-align-center class on the paragraph - that
   one only centres the text inside the pill. Without this the pills sit 17px
   left of the tier names above them. */
.kb-table-container.mcg-compare-table .kb-table tr:nth-child(2) td:not(:first-child) {
	text-align: center;
}

.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;
}

/* --- Store-only: the narrow container ---
 *
 * On the marketing article this table has the full content width. Here it
 * sits in the 60% column of a 40/60 row, so the block's own 70/15/15 split
 * leaves about 90px for a tier name and "Explorer" wraps to two lines.
 * Widen the two tier columns and trim the heading until it fits with room
 * to spare. No white-space: nowrap - Kadence gives the container
 * overflow-x: auto, so text that did not fit would produce a horizontal
 * scrollbar instead of a wrap, which is the worse of the two.
 *
 * This block has no counterpart in the marketing copy of this file. */

.kb-table-container.mcg-compare-table .kb-table tr > *:first-child {
	width: 58%;
}

.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: 21%;
}

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

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

/* --- 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;
	}
}