/*
 * Every table on the site.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* --------------------------------------------------------------------- table */

.ghizo-table-scroll {
	/* A table is the one thing that legitimately cannot shrink. Let it scroll in
	   its own box rather than making the whole page scroll sideways. */
	overflow-x: auto;
	margin-top: var(--wp--preset--spacing--30);
}

/*
 * The class lands on the table itself in hand written markup and on the figure
 * core wraps a table block in, so anything that sizes a table has to name the
 * table. On the figure the width floor was a floor on the scroll box, and the
 * scroll box is the one element that has to be allowed to be narrower than what
 * it holds: a 26rem figure pushed the whole page sideways at 375.
 */
table.ghizo-table,
.ghizo-table > table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	min-width: 26rem;
	width: 100%;
}

/*
 * Core's table block boxes every cell and rules the head off at 3px, in the text
 * colour. The house table is one hairline per row, so the box is cleared rather
 * than recoloured.
 */
.ghizo-table th,
.ghizo-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.7rem 1rem 0.7rem 0;
	text-align: left;
	vertical-align: top;
}

.ghizo-table thead {
	border-bottom: 0;
}

.ghizo-table thead th {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ghizo-table td:not(:first-child) {
	font-feature-settings: 'tnum';
}

/* ------------------------------------------------------------ comparison table */

.ghizo-compare th[scope='row'] {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	padding-right: var(--wp--preset--spacing--30);
	width: 55%;
}

.ghizo-compare td {
	white-space: nowrap;
}

.ghizo-yes {
	color: var(--wp--preset--color--navy-deep);
	font-weight: 600;
}

/*
 * The tick is decorative: "Yes" is already in the cell, so the glyph is not
 * carrying the meaning on its own.
 */
.ghizo-yes::before {
	content: '';
	display: inline-block;
	width: 0.85rem;
	height: 0.45rem;
	margin-right: 0.45rem;
	border-left: 2px solid var(--wp--preset--color--blue);
	border-bottom: 2px solid var(--wp--preset--color--blue);
	transform: rotate(-45deg) translateY(-0.15rem);
}

.ghizo-no {
	color: var(--wp--preset--color--ink-muted);
}

/* --------------------------------------------------------- the comparison */

.ghizo-rival th[scope='row'] {
	width: 34%;
}

.ghizo-rival td {
	font-feature-settings: 'tnum';
}

/* What their price actually covers, under the number, so the comparison is not
   quietly flattering us by leaving the site count out. */
.ghizo-rival td span {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	margin-top: 0.15rem;
}

.ghizo-source {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--micro);
	margin-top: var(--wp--preset--spacing--20);
	max-width: 60ch;
}