/*
 * blue Tables
 *
 * Anpassbar im Theme über CSS-Variablen:
 *   --blue-tables-accent  Linie unter der Kopfzeile (Standard: --color-primary)
 *   --blue-tables-head-bg Hintergrund der Kopfzeile
 *   --blue-tables-stripe  Hintergrund jeder zweiten Zeile (Stil „Gestreift“)
 *   --blue-tables-bg      Hintergrund der Karten und der fixierten Spalte
 *   --blue-tables-border  Rahmenfarbe
 *   --blue-tables-radius  Eckenradius der Karten
 *
 * Größen bewusst in em: Das Theme setzt html { font-size: 10px }.
 */

/* 1. Scrollen statt Layout sprengen – alle Tabellen, auch Altinhalte. */
.wp-block-table,
.blue-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.blue-table-scroll {
	margin-bottom: 1.5em;
}

.blue-table-scroll > table {
	margin-bottom: 0;
}

/*
 * 2. Grundgestaltung für core/table. Das Theme lädt die Core-Block-Styles
 *    nicht und setzt figure { line-height: 0 } – daher hier vollständig.
 *    Altinhalte (.blue-table-scroll) bleiben ungestylt: dort stecken oft
 *    Layout-Tabellen.
 */
.wp-block-table {
	margin: 0 0 1.5em;
	line-height: 1.5;
}

.blue-table-module .wp-block-table {
	margin-bottom: 0;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 0.9375em;
	line-height: 1.5;
}

.wp-block-table.has-fixed-layout table,
.wp-block-table table.has-fixed-layout {
	table-layout: fixed;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.6em 0.8em;
	border: 0;
	border-bottom: 1px solid var(--blue-tables-border, #e1e3e6);
	text-align: left;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: break-word;
}

.wp-block-table thead th,
.wp-block-table thead td {
	background: var(--blue-tables-head-bg, #f3f4f6);
	border-bottom: 2px solid var(--blue-tables-accent, var(--color-primary, #333));
	font-weight: 600;
	vertical-align: bottom;
}

.wp-block-table tfoot td,
.wp-block-table tfoot th {
	border-top: 2px solid var(--blue-tables-border, #e1e3e6);
	border-bottom: 0;
	font-weight: 600;
}

/* Spaltenausrichtung aus dem Block (Core-Klassen, im Theme nicht geladen). */
.wp-block-table .has-text-align-left {
	text-align: left;
}

.wp-block-table .has-text-align-center {
	text-align: center;
}

.wp-block-table .has-text-align-right {
	text-align: right;
}

/* Rechtsbündig = in der Regel Zahlen: „-56,0 %“ nicht umbrechen. */
.wp-block-table td.has-text-align-right,
.wp-block-table th.has-text-align-right {
	white-space: nowrap;
}

/* Core-Stil „Gestreift“. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--blue-tables-stripe, #f8f9fa);
}

.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	margin-top: 0.6em;
	font-size: 0.875em;
	line-height: 1.5;
	color: var(--color-body-font, inherit);
	opacity: 0.75;
}

/* 3. Stil „Erste Spalte fixieren“ – für Vergleichstabellen. */
.wp-block-table.is-style-sticky-first th:first-child,
.wp-block-table.is-style-sticky-first td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--blue-tables-bg, #fff);
	box-shadow: 1px 0 0 var(--blue-tables-border, #e1e3e6);
}

.wp-block-table.is-style-sticky-first thead th:first-child,
.wp-block-table.is-style-sticky-first thead td:first-child {
	background: var(--blue-tables-head-bg, #f3f4f6);
}

@media (max-width: 620px) {
	.wp-block-table table {
		font-size: 0.875em;
	}

	/* Spalten nicht zusammenquetschen, sondern scrollen lassen. */
	.wp-block-table.is-style-sticky-first th,
	.wp-block-table.is-style-sticky-first td {
		min-width: 7em;
	}

	/*
	 * 4. Stil „Mobil als Karten“. Die Klasse .blue-table-cards setzt erst der
	 *    Render-Filter – fehlt die Kopfzeile oder gibt es verbundene Zellen,
	 *    bleibt es beim Scrollen.
	 */
	.blue-table-cards {
		overflow-x: visible;
	}

	.blue-table-cards table,
	.blue-table-cards tbody,
	.blue-table-cards tfoot,
	.blue-table-cards tr,
	.blue-table-cards td,
	.blue-table-cards th {
		display: block;
		width: auto;
	}

	.blue-table-cards table {
		font-size: 0.9375em;
		border: 0;
	}

	/* Kopfzeile nur visuell ausblenden – bleibt für Screenreader erhalten. */
	.blue-table-cards thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.blue-table-cards tbody tr,
	.blue-table-cards tfoot tr {
		margin: 0 0 1em;
		padding: 0.75em 1em;
		border: 1px solid var(--blue-tables-border, #e1e3e6);
		border-radius: var(--blue-tables-radius, 6px);
		background: var(--blue-tables-bg, #fff);
	}

	/* Spezifischer als die Ausrichtungsklassen aus dem Block. */
	.wp-block-table.blue-table-cards tbody td,
	.wp-block-table.blue-table-cards tbody th,
	.wp-block-table.blue-table-cards tfoot td,
	.wp-block-table.blue-table-cards tfoot th {
		position: relative;
		padding: 0.25em 0 0.25em 40%;
		border: 0;
		text-align: left;
		white-space: normal;
	}

	.blue-table-cards [data-label]::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		width: calc(40% - 1em);
		font-weight: 600;
		text-align: left;
	}

	/* Zellen ohne Label sowie die erste Spalte (Kartentitel) volle Breite. */
	.wp-block-table.blue-table-cards [data-label=""],
	.wp-block-table.blue-table-cards tr > :first-child {
		padding-left: 0;
	}

	.blue-table-cards [data-label=""]::before,
	.blue-table-cards tr > :first-child::before {
		content: none;
	}

	.blue-table-cards tr > :first-child {
		padding-bottom: 0.5em;
		font-weight: 700;
		font-size: 1.05em;
	}
}