/*
 * Table block (ported from webangon-blocks' webangon-table, extended for
 * comparison tables). Defaults use the Kit colours and sit in :where() or on
 * custom properties, so the block's Style-tab values always win.
 *
 * Below 768px, with "Stack on Phones" on (.wb-table--stack), each row becomes a
 * card and every cell shows its column heading from data-label.
 */
:where(.wb-table) {
	--wbt-bg: var(--wab-color-white, #fff);
	--wbt-line: var(--wab-color-mist, #e3ecf8);
	--wbt-radius: 14px;
	--wbt-ink: var(--wab-color-ink, #0a1633);
	--wbt-note: var(--wab-color-text, #4a5672);
	--wbt-head-bg: transparent;
	--wbt-group-bg: var(--wab-color-off-white, #f5f8fc);
	--wbt-hl: color-mix(in srgb, var(--wab-color-accent, #006ffe) 7%, #fff);
	--wbt-hl-bar: var(--wab-color-accent, #006ffe);
	--wbt-badge-bg: var(--wab-color-accent, #006ffe);
	--wbt-badge: #fff;
	--wbt-yes: var(--wab-color-accent, #006ffe);
	--wbt-yes-bg: color-mix(in srgb, var(--wab-color-accent, #006ffe) 14%, #fff);
	--wbt-no: #9aa6bb;
	--wbt-icon: 26px;
	margin: 0;
}
.wb-table__frame {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--wbt-line);
	border-radius: var(--wbt-radius);
	background: var(--wbt-bg);
}
.wb-table--flat .wb-table__frame {
	border: 0;
}
.wb-table__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	color: var(--wbt-ink);
}
.wb-table__table th,
.wb-table__table td {
	border: 0;
	vertical-align: middle;
	background: transparent;
}
:where(.wb-table__table) th,
:where(.wb-table__table) td {
	padding: 15px 20px;
	font-size: 15px;
	line-height: 1.4;
}
.wb-table__table .is-left { text-align: left; }
.wb-table__table .is-center { text-align: center; }
.wb-table__table .is-right { text-align: right; }

/* Rows: a line between rows; Column Lines adds vertical lines. */
.wb-table__table tbody tr > * {
	border-top: 1px solid var(--wbt-line);
}
.wb-table--lines .wb-table__table th + th,
.wb-table--lines .wb-table__table th + td,
.wb-table--lines .wb-table__table td + td {
	border-left: 1px solid var(--wbt-line);
}

/* Heading row. */
.wb-table__head th {
	vertical-align: bottom;
	background: var(--wbt-head-bg);
}
:where(.wb-table__head) th {
	padding: 22px 20px 18px;
}
:where(.wb-table__head) .wb-table__text {
	font-size: 18px;
	font-weight: 700;
}
:where(.wb-table__head th:first-child) .wb-table__text {
	color: var(--wbt-note);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
:where(.wb-table__head) .wb-table__note {
	color: var(--wbt-ink);
	font-size: 15px;
	font-weight: 600;
}

/* Text, note, badge. */
.wb-table__text,
.wb-table__note,
.wb-table__badge {
	display: block;
}
:where(.wb-table__table tbody th) .wb-table__text {
	font-weight: 600;
}
:where(.wb-table__table td) .wb-table__text {
	font-weight: 600;
}
.wb-table__note {
	margin-top: 2px;
	color: var(--wbt-note);
}
:where(.wb-table__table tbody) .wb-table__note {
	font-size: 13px;
	font-weight: 400;
}
.wb-table__badge {
	width: fit-content;
	margin: 0 0 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wbt-badge-bg);
	color: var(--wbt-badge);
}
.is-center > .wb-table__badge { margin-left: auto; margin-right: auto; }
.is-right > .wb-table__badge { margin-left: auto; }
:where(.wb-table__badge) {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Group rows. */
.wb-table__group th {
	background: var(--wbt-group-bg);
	text-align: left;
}
:where(.wb-table__group) th {
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--wbt-note);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Highlighted column. */
.wb-table__table .is-hl {
	background: var(--wbt-hl);
}
.wb-table__head .is-hl {
	box-shadow: inset 0 3px 0 var(--wbt-hl-bar);
}

/* Icons. */
.wb-table__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wbt-icon);
	height: var(--wbt-icon);
	border-radius: 50%;
	vertical-align: middle;
}
.wb-table__icon svg {
	width: 54%;
	height: 54%;
}
.wb-table__icon--yes {
	background: var(--wbt-yes-bg);
	color: var(--wbt-yes);
}
.wb-table__icon--no {
	color: var(--wbt-no);
}

/* Phones, Stack on Phones off: tighter cells so the columns fit. */
@media (max-width: 767px) {
	:where(.wb-table:not(.wb-table--stack) .wb-table__table) th,
	:where(.wb-table:not(.wb-table--stack) .wb-table__table) td {
		padding: 13px 8px;
		font-size: 14px;
	}
	:where(.wb-table:not(.wb-table--stack) .wb-table__table) tr > :first-child {
		padding-left: 14px;
	}
	:where(.wb-table:not(.wb-table--stack) .wb-table__head) th {
		padding-top: 18px;
		padding-bottom: 14px;
	}
	:where(.wb-table:not(.wb-table--stack) .wb-table__head) .wb-table__text { font-size: 15px; }
	:where(.wb-table:not(.wb-table--stack) .wb-table__head th:first-child) .wb-table__text { font-size: 11px; }
	:where(.wb-table:not(.wb-table--stack)) .wb-table__badge { font-size: 9px; padding: 2px 7px; }
	:where(.wb-table:not(.wb-table--stack) .wb-table__table tbody) .wb-table__note { font-size: 12px; }
	:where(.wb-table:not(.wb-table--stack) .wb-table__group) th { padding-top: 9px; padding-bottom: 9px; font-size: 11px; }

	/* Stack on Phones: each row becomes a labelled card. */
	.wb-table--stack .wb-table__frame {
		border: 0;
		background: transparent;
		overflow: visible;
	}
	.wb-table--stack .wb-table__head {
		display: none;
	}
	.wb-table--stack .wb-table__table,
	.wb-table--stack .wb-table__table tbody,
	.wb-table--stack .wb-table__table tr,
	.wb-table--stack .wb-table__table th,
	.wb-table--stack .wb-table__table td {
		display: block;
		width: auto;
	}
	.wb-table--stack .wb-table__table colgroup {
		display: none;
	}
	.wb-table--stack .wb-table__table tr {
		margin-bottom: 12px;
		overflow: hidden;
		border: 1px solid var(--wbt-line);
		border-radius: var(--wbt-radius);
		background: var(--wbt-bg);
	}
	.wb-table--stack .wb-table__group {
		border: 0;
		background: transparent;
	}
	.wb-table--stack .wb-table__table tbody tr > * {
		border-top: 0;
		border-left: 0;
		text-align: left;
	}
	.wb-table--stack .wb-table__table tbody tr > * + * {
		border-top: 1px solid var(--wbt-line);
	}
	.wb-table--stack .wb-table__table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: var(--wbt-note);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
	}
}