/**
 * grantcookie/compare-table — the full plan comparison matrix.
 */

/* `clip` rather than `hidden`: both round off the corners, but `hidden` makes
   the card a scroll container, and a sticky table head then resolves its offset
   against the card instead of the page. */

.gc-compare {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--xl );
	background: var( --wp--preset--color--base );
	overflow: clip;
}

/* Four columns of prose do not fit a phone. The table keeps its shape and the
   card scrolls, which stays readable where a reflowed table does not. The
   region is focusable so it can also be scrolled from the keyboard.

   Above the width where the table fits, the scroller is switched off entirely.
   A horizontal scroller is a scrollport on BOTH axes, so a sticky head inside
   one is pushed down by its own `top` value and covers the first row — which is
   exactly what it did. */

.gc-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media ( min-width: 60rem ) {
	.gc-compare__scroll {
		overflow: visible;
	}
}

.gc-compare__scroll:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: -2px;
}

.gc-compare__table {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: var( --wp--preset--font-size--small );
}

/* The feature column carries the reading weight, so it takes the space the
   plan columns do not need. */

.gc-compare__table th:first-child {
	width: 34%;
}

.gc-compare__table thead th:not(:first-child),
.gc-compare__table td {
	width: calc( 66% / var( --gc-compare-columns, 3 ) );
	text-align: center;
}

/* ---- Head ---------------------------------------------------------------- */

.gc-compare__table thead th {
	padding: var( --wp--preset--spacing--40 ) 1rem 1.15rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
	background: var( --wp--preset--color--base );
	vertical-align: bottom;
}

/* Offset by the site header so the plan names park below it rather than
   underneath it once the page is scrolled. Only where the scroller is off —
   see the note above. */

@media ( min-width: 60rem ) {
	.gc-compare.is-sticky thead th {
		position: sticky;
		/* The token is the clearance heroes reserve, which rounds a little under
		   the bar's real height — fine for a hero, six pixels of overlap here. */
		top: calc( var( --wp--custom--header--height ) + 0.75rem );
		z-index: 2;
		box-shadow: 0 1px 0 var( --wp--preset--color--line );
	}
}

.gc-compare__table thead th.is-highlight {
	color: var( --wp--preset--color--primary );
}

/* ---- Group rows ---------------------------------------------------------- */

.gc-compare__group th {
	padding: 0.85rem var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--surface-alt );
	text-align: left;
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
	border-block: 1px solid var( --wp--preset--color--line );
}

/* ---- Feature rows -------------------------------------------------------- */

.gc-compare__table tbody tr:not(.gc-compare__group) th,
.gc-compare__table tbody td {
	padding: 0.95rem 1rem;
	border-bottom: 1px solid var( --wp--preset--color--line );
	vertical-align: middle;
}

.gc-compare__table tbody tr:not(.gc-compare__group) th {
	padding-inline: var( --wp--preset--spacing--40 );
	text-align: left;
	font-weight: 500;
	color: var( --wp--preset--color--contrast );
}

.gc-compare__table tbody td {
	color: var( --wp--preset--color--ink-soft );
}

.gc-compare__table tbody tr:not(.gc-compare__group):hover td,
.gc-compare__table tbody tr:not(.gc-compare__group):hover th {
	background: var( --wp--preset--color--surface );
}

.gc-compare__table tbody tr:last-child th,
.gc-compare__table tbody tr:last-child td {
	border-bottom: 0;
}

/* A faint tint down the recommended plan, so the eye can follow one column
   without a heavy border cutting the table into pieces. */

.gc-compare__table td.is-highlight {
	background: color-mix( in srgb, var( --wp--preset--color--primary-soft ) 55%, transparent );
}

.gc-compare__table tbody tr:not(.gc-compare__group):hover td.is-highlight {
	background: var( --wp--preset--color--primary-soft );
}

/* ---- Cell marks ---------------------------------------------------------- */

.gc-compare__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 50%;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.gc-compare__tick svg {
	width: 1rem;
	height: 1rem;
}

.gc-compare__dash {
	display: inline-block;
	width: 0.85rem;
	height: 2px;
	border-radius: 1px;
	background: var( --wp--preset--color--line );
	vertical-align: middle;
}

/* ---- Info hint ----------------------------------------------------------- */

.gc-compare__info {
	display: inline-flex;
	margin-inline-start: 0.35rem;
	color: var( --wp--preset--color--ink-faint );
	vertical-align: -0.15em;
	cursor: help;
}

.gc-compare__info:hover,
.gc-compare__info:focus-visible {
	color: var( --wp--preset--color--primary );
}

.gc-compare__info svg {
	width: 0.9rem;
	height: 0.9rem;
}

@media ( max-width: 781px ) {
	.gc-compare__table thead th {
		font-size: var( --wp--preset--font-size--small );
	}

}

/* A scroll container still refuses to shrink below its content unless its
   automatic minimum size is released. Without this the table's 44rem min-width
   pushed the whole page sideways on a phone — 284px of horizontal overflow on
   /pricing/ at 390px — instead of scrolling inside its own card. */

.gc-compare,
.gc-compare__scroll {
	min-width: 0;
}