/**
 * Eckdaten table — front end.
 *
 * Every value is a custom property on `.sh-eckdaten`, so the whole table can be
 * retuned from Elementor's custom CSS without touching the plugin:
 *
 *     .sh-eckdaten { --sh-eckdaten-size: 20px; --sh-eckdaten-label-color: #6f6a66; }
 *
 * Defaults are the values measured on the live site's own features table:
 * Fira Sans 300 at 24px, #3a3a3a on a 1px #dcdcdc rule, 26px of air per row,
 * a 35/65 split. Nothing here is invented.
 */

.sh-eckdaten {
	--sh-eckdaten-font: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sh-eckdaten-size: 24px;
	--sh-eckdaten-size-tablet: 22px;
	--sh-eckdaten-size-mobile: 20px;
	--sh-eckdaten-line: 1.45;
	--sh-eckdaten-weight: 300;

	--sh-eckdaten-label-color: #3a3a3a;
	--sh-eckdaten-label-weight: var(--sh-eckdaten-weight);
	--sh-eckdaten-value-color: #3a3a3a;
	--sh-eckdaten-link-color: #8b6a58;

	--sh-eckdaten-rule: #dcdcdc;
	--sh-eckdaten-rule-width: 1px;

	--sh-eckdaten-row-padding: 26px;
	--sh-eckdaten-row-padding-mobile: 18px;
	--sh-eckdaten-column-gap: 24px;
	--sh-eckdaten-label-width: 35%;

	font-family: var(--sh-eckdaten-font);
	font-weight: var(--sh-eckdaten-weight);
	font-size: var(--sh-eckdaten-size);
	line-height: var(--sh-eckdaten-line);
	color: var(--sh-eckdaten-value-color);
	max-width: 100%;
}

/*
 * The table is dropped into containers this plugin does not control. Themes
 * that still default to `content-box` would otherwise let a padded cell push
 * the table wider than its column and scroll the whole page sideways.
 */
.sh-eckdaten,
.sh-eckdaten * {
	box-sizing: border-box;
}

.sh-eckdaten .sh-eckdaten__table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	background: none;
	margin: 0;
	table-layout: fixed;
}

.sh-eckdaten .sh-eckdaten__row {
	border: 0;
	border-bottom: var(--sh-eckdaten-rule-width) solid var(--sh-eckdaten-rule);
	background: none;
}

/*
 * Themes style bare `td` freely — Hello Elementor's ancestors gave every cell a
 * border and a striped background, which is what this table looked like before
 * the stylesheet reached it. Scoped by the wrapper so these resets out-specify
 * a plain `table td` rule, while staying a single class below the Elementor
 * controls, which write `.elementor-element-<id> .sh-eckdaten__label`.
 */
.sh-eckdaten .sh-eckdaten__label,
.sh-eckdaten .sh-eckdaten__value {
	border: 0;
	background: none;
	padding: var(--sh-eckdaten-row-padding) 0;
	vertical-align: top;
	text-align: left;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.sh-eckdaten__label {
	width: var(--sh-eckdaten-label-width);
	padding-right: var(--sh-eckdaten-column-gap);
	color: var(--sh-eckdaten-label-color);
	font-weight: var(--sh-eckdaten-label-weight);
	hyphens: auto;
}

.sh-eckdaten__value {
	color: var(--sh-eckdaten-value-color);
}

/* ------------------------------------------------- markup inside a value -- */

/*
 * Values carry the field allowlist: p, br, strong, b, em, i, sup, sub,
 * ul, ol, li, a. All of it has to sit on the row's own baseline.
 */

.sh-eckdaten__value > :first-child {
	margin-top: 0;
}

.sh-eckdaten__value > :last-child {
	margin-bottom: 0;
}

.sh-eckdaten__value p {
	margin: 0 0 0.5em;
}

.sh-eckdaten__value ul,
.sh-eckdaten__value ol {
	margin: 0 0 0.5em;
	padding-left: 1.2em;
}

.sh-eckdaten__value li {
	margin: 0 0 0.15em;
}

.sh-eckdaten__value a {
	color: var(--sh-eckdaten-link-color);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sh-eckdaten__value strong,
.sh-eckdaten__value b {
	font-weight: 500;
}

/*
 * `170 m²` and `843 m³` arrive as real `<sup>` markup — the superscript is the
 * unit, not decoration. Left alone it stretches the line box and the rows stop
 * sharing a rhythm, so it is sized and pulled back onto the line.
 */
.sh-eckdaten__value sup,
.sh-eckdaten__value sub {
	font-size: 0.65em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

.sh-eckdaten__value sup {
	top: -0.5em;
}

.sh-eckdaten__value sub {
	bottom: -0.25em;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
	.sh-eckdaten {
		font-size: var(--sh-eckdaten-size-tablet);
	}
}

/*
 * Stacked: label above value, full width, one rule per pair. Long German labels
 * such as "Heizung / Verteilung" cannot share a 390px line with their value.
 *
 * Scoped to `--auto-stack`, which the shortcode adds and the Elementor widget
 * does not. The widget offers stacking as a responsive control instead, so the
 * client picks the breakpoint in the panel; a fixed one here would fight it.
 *
 * The breakpoint is a literal because a media query cannot read a custom
 * property. To move it for the shortcode, re-declare this block in your own CSS
 * at the width you want; everything else here is a variable and needs no such
 * copying.
 *
 * `display: block` on table elements drops their implicit roles in some
 * browsers, which is why the markup carries explicit role attributes — the
 * table stays a table to a screen reader in both layouts.
 */
@media (max-width: 600px) {
	.sh-eckdaten--auto-stack {
		font-size: var(--sh-eckdaten-size-mobile);
	}

	.sh-eckdaten--auto-stack .sh-eckdaten__table,
	.sh-eckdaten--auto-stack .sh-eckdaten__table > tbody,
	.sh-eckdaten--auto-stack .sh-eckdaten__row,
	.sh-eckdaten--auto-stack .sh-eckdaten__label,
	.sh-eckdaten--auto-stack .sh-eckdaten__value {
		display: block;
		width: 100%;
	}

	.sh-eckdaten--auto-stack .sh-eckdaten__row {
		padding: var(--sh-eckdaten-row-padding-mobile) 0;
	}

	.sh-eckdaten--auto-stack .sh-eckdaten__label,
	.sh-eckdaten--auto-stack .sh-eckdaten__value {
		padding: 0;
	}

	.sh-eckdaten--auto-stack .sh-eckdaten__label {
		margin-bottom: 0.25em;
		padding-right: 0;
		opacity: 0.75;
	}
}

/* Nothing below the last row — the section's own padding takes over. */
.sh-eckdaten .sh-eckdaten__row:last-child {
	border-bottom-width: 0;
}

/* Editor-only, when there is no property or no Eckdaten to show. */
.sh-eckdaten--placeholder {
	padding: 16px 20px;
	border: 1px dashed var(--sh-eckdaten-rule);
	color: var(--sh-eckdaten-label-color);
	font-size: 14px;
}

@media print {
	.sh-eckdaten__row {
		break-inside: avoid;
	}
}