/**
 * levels-content-api on the levels-2026 theme (includes/compat-content-api.php).
 * Loaded only after a levels-content-api stylesheet, front end and block editor.
 * Values come from the theme tokens (theme/assets/css/tokens.css); no colour literals.
 */

/* ---------- 1. Oxygen / Automatic.css variables the plugin's CSS reads ----------
   The plugin writes var(--base-xs, <fallback>) and friends. On the Oxygen shell
   these resolve to the site's ACSS values; the fallbacks are close but not equal
   (rail links 15 px instead of 20 px, breadcrumb 14 instead of 16). Every value
   below equals live levels.dev (measured 2026-10-03) and follows the scheme. */
:root,
.editor-styles-wrapper {
	--base-xs: var(--lvl-fs-xs);
	--base-lg: var(--lvl-fs-lg);
	--base-20: var(--lvl-space-20);
	--base-40: var(--lvl-space-40);
	--base-100: var(--lvl-space-100);
	--violet: var(--lvl-color-violet);
	--brand-rose: var(--lvl-color-brand-rose);
	--brand-violet: var(--lvl-color-brand-violet);
	--text-black-brand: var(--lvl-color-black-brand);
	--text-shade-white: var(--lvl-color-shade-white);
	--text-color: var(--lvl-color-text);
	--check-icon: var(--lvl-icon-check);
}

/* ---------- 2. Cases written through levels-content-api (body.lvl-case-page) ----------
   Case_Layout composes the body on the site grid (live: 1400 px at 1440, the
   Oxygen inner wrap); the theme's case template frames acf/lvl-* cases with a
   75 px foot only. Same box as live: container width, 20 px gutter. */
.lvl-case-page .lvl-casestudy__body {
	max-width: var(--lvl-container-max);
	margin-inline: auto;
	padding-inline: var(--lvl-container-pad);
}

/* The plugin restyles Oxygen's hero (.js-case-h1.case-headline, .js-case-label);
   here the theme's hero classes carry it. */
.lvl-case-page .lvl-casestudy__title {
	font-size: clamp(2rem, 1.35rem + 2.75vw, 3.5rem);
	line-height: 1.12;
	text-wrap: balance;
}

.lvl-case-page:not(.dark-mode) .lvl-casestudy__label {
	color: var(--lvl-case-ink);
}

.lvl-case-page:not(.dark-mode) .lvl-casestudy__label::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-bottom: 0.875rem;
	background: var(--lvl-case-teal-mark);
}

/* Live: the Oxygen link colour of the case body (text colour) beats the plugin's
   accent on "Screenshot in voller Größe ansehen". Kept as live shows it. */
.lvl-case-page .lvl-casestudy__body .lvl-case-media__full {
	color: var(--lvl-color-text);
}

/* ---------- 3. Landing pages: core/table in the landing column ----------
   landing.css scopes these to .ct-inner-content (the Oxygen element around
   post_content). On the theme the landing body sits in div.lvl-main inside
   main.lvl-site-main; same specificity as the original rules. */
.lvl-main .wp-block-table {
	max-width: min(var(--lvl-land-column), calc(100% - 2 * var(--lvl-land-gutter)));
	margin-inline: auto;
	overflow: visible;
}

.lvl-main .wp-block-table table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--lvl-land-text);
}

.lvl-main .wp-block-table th,
.lvl-main .wp-block-table td {
	padding: 0.9rem 1.2rem 0.9rem 0;
	text-align: start;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--lvl-land-line);
	color: inherit;
}

.lvl-main .wp-block-table thead th {
	font-size: var(--lvl-land-small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	color: var(--lvl-land-dim);
}

.lvl-main .wp-block-table tbody th {
	font-weight: 400;
}

/* Phones: the plugin drops the 75 px under the case body (Oxygen #div_block-26-56). */
@media (max-width: 767px) {
	.lvl-case-page .lvl-casestudy__body {
		padding-bottom: 0;
	}
}