/* ABOUTME: Styles for the content-with-table section layout. */
/* ABOUTME: Table styling, scroll wrapper, and responsive column adjustments. */
.section--content_with_table table {
	width: 100%;
	border-spacing: 0px;
}

.section--content_with_table thead th {
	text-align: left;
}
.section--content_with_table td {
	vertical-align: top;
	padding: 5px;
	padding-top: 10px;
	padding-bottom: 25px;
}

td:has(.svg-icon) {
	display: flex;
	max-width: 210px;
	gap: 5px;
	flex-direction: row;
	flex-wrap: wrap;
}
.section--content_with_table tbody tr + tr td {
	border-top: 1px solid black;
}

.section--content_with_table table .svg-icon {
	background-color: var(--color-light-turquoise);
	padding: 7px;
	width: fit-content;
	border-radius: 5px;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.section--content_with_table table .svg-icon svg {
	width: 40px;
	height: auto;
}

.table-scroll-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

@media screen and (max-width: 768px) {
	.table-scroll-wrapper table {
		min-width: 500px;
		font-size: 0.85rem;
	}

	.table-scroll-wrapper {
		box-shadow: inset -20px 0 15px -15px rgba(0, 0, 0, 0.15);
		margin: 0 calc(-1 * var(--outer-margin));
		width: calc(100% + 2 * var(--outer-margin));
	}

	/* Icon tables: stack cells vertically instead of scrolling */
	/* .table-scroll-wrapper table:has(td .svg-icon) {
		min-width: unset;
	} */

	.table-scroll-wrapper table:has(td .svg-icon) thead th:nth-child(2) {
		display: none;
	}

	/* .table-scroll-wrapper table:has(td .svg-icon) tr {
		display: flex;
		flex-wrap: wrap;
	} */

	.table-scroll-wrapper table:has(td .svg-icon) td:first-child {
		flex-basis: 100%;
	}

	.table-scroll-wrapper table:has(td .svg-icon) td:nth-child(2) {
		flex-basis: 100%;
		padding-top: 0;
	}
}