/*
 * OSL Table – fixed styling, shared by the V4 table and (since 1.1.2) the
 * V3 OSL Table widget, so both look identical.
 * Scoped to classes (not #blogtable) so several tables can share a page.
 * Colours use the V4 variables, with the V3 values as fallbacks.
 * All cells left-aligned in primary-800; header row and first column 600,
 * other cells 400.
 */

.osl-atomic-table {
	--osl-table-header-bg: #F8F8F6;
	--osl-table-text: var(--primary-800, #30343F);
	--osl-table-border: var(--primary-100, #E5E5E5);

	border: 1px solid var(--osl-table-border) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #fff !important;
}

/* Kill WP/Elementor/theme table defaults */
.osl-atomic-table .osl-atomic-table__table,
.osl-atomic-table thead,
.osl-atomic-table tbody,
.osl-atomic-table tr,
.osl-atomic-table th,
.osl-atomic-table td {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

.osl-atomic-table .osl-atomic-table__table {
	width: 100% !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	table-layout: fixed !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* No zebra striping or hover backgrounds */
.osl-atomic-table tbody tr:nth-child(odd),
.osl-atomic-table tbody tr:nth-child(even),
.osl-atomic-table tr:hover,
.osl-atomic-table td:hover,
.osl-atomic-table th:hover {
	background: transparent !important;
	background-color: transparent !important;
}

/* Header row */
.osl-atomic-table thead tr,
.osl-atomic-table thead tr:nth-child(odd),
.osl-atomic-table thead tr:nth-child(even) {
	background: var(--osl-table-header-bg) !important;
	background-color: var(--osl-table-header-bg) !important;
}

.osl-atomic-table th,
.osl-atomic-table td {
	border-bottom: 1px solid var(--osl-table-border) !important;
	max-width: 180px !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	white-space: normal !important;
	vertical-align: middle !important;
	text-align: left !important;
	color: var(--osl-table-text) !important;
	font-family: Figtree, sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}

.osl-atomic-table th {
	padding: 20px 24px !important;
}

.osl-atomic-table td {
	padding: 16px 24px !important;
}

/* Header row and first column: 600; every other cell: 400 */
.osl-atomic-table th,
.osl-atomic-table td:first-child {
	font-weight: 600 !important;
}

.osl-atomic-table th a,
.osl-atomic-table td a {
	color: inherit !important;
}

/* V3 cells come from a text editor: block tags (p, h1–h6) and pasted
   <span style="font-weight: …"> must follow the cell's own typography. */
.osl-atomic-table th :is(p, h1, h2, h3, h4, h5, h6),
.osl-atomic-table td :is(p, h1, h2, h3, h4, h5, h6) {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.osl-atomic-table th span,
.osl-atomic-table td span {
	font-weight: inherit !important;
	color: inherit !important;
}

/* Last row: no bottom border */
.osl-atomic-table tbody tr:last-child td {
	border-bottom: none !important;
}

/* Mobile (<=767px): ~2.5 columns visible, horizontal scroll */
@media (max-width: 767px) {
	.osl-atomic-table {
		border-radius: 8px !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.osl-atomic-table .osl-atomic-table__table {
		width: auto !important;
	}

	.osl-atomic-table th,
	.osl-atomic-table td {
		width: 40vw !important;
		min-width: 40vw !important;
		max-width: 40vw !important;
		padding: 12px !important;
		font-size: 12px !important;
		line-height: 16px !important;
	}
}