/*
 * emo2026, SEO page text and SEO H1.
 *
 * Loaded on pages that carry either (inc/seo-text.php). The text is long
 * reading matter at the end of a key page, so it gets a calm editorial
 * column: one measure, left aligned, generous rhythm, nothing that
 * competes with the product sections above it.
 */

/* ---------- SEO H1 in the hero ----------
 * The short display title above it stays the big line; the H1 carries
 * the keyword sentence at tagline size in ink, and the original tagline
 * below steps down one size so the order reads title, H1, tagline. */
.emo-seo-h1 {
	margin: var(--space-4) auto 0;
	max-width: 34em;
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 500;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-primary);
	text-wrap: balance;
}

.emo-seo-h1 + .product-line__tagline,
.emo-seo-h1 + .content-hero__subhead,
.emo-seo-h1 + .esb-hero__tagline {
	margin-top: var(--space-3);
	font-size: var(--font-size-21);
}

/* The emoswitch blue hero is left aligned, and so is its H1. */
.esb-hero .emo-seo-h1 {
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 833px) {
	.emo-seo-h1 { font-size: var(--font-size-21); }

	.emo-seo-h1 + .product-line__tagline,
	.emo-seo-h1 + .content-hero__subhead,
	.emo-seo-h1 + .esb-hero__tagline {
		font-size: var(--font-size-18);
	}
}

/* ---------- the text section ---------- */
.seo-text {
	padding: var(--space-10) var(--layout-gutter) var(--space-11);
	border-top: 1px solid var(--grey-100);
	background: var(--color-bg-base);
	font-family: var(--font-sans);
	color: var(--color-text-primary);
}

.seo-text__inner {
	max-width: 46rem;
	margin: 0 auto;
	font-size: var(--font-size-18);
	line-height: 1.6;
}

.seo-text__inner > :first-child { margin-top: 0; }

.seo-text p {
	margin: 0 0 var(--space-4);
	color: var(--color-text-secondary);
}

.seo-text strong { color: var(--color-text-primary); font-weight: 600; }

.seo-text h2 {
	margin: var(--space-9) 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	text-wrap: balance;
}

.seo-text h3 {
	margin: var(--space-6) 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--font-size-18);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-text-primary);
}

/* Answers sit tight under their question. */
.seo-text h3 + p { margin-top: 0; }

.seo-text ul {
	margin: 0 0 var(--space-5);
	padding-left: 1.25em;
	color: var(--color-text-secondary);
}

.seo-text li { margin: 0 0 var(--space-1); }
.seo-text li::marker { color: var(--color-accent); }

.seo-text a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-link) 40%, transparent);
	text-underline-offset: 3px;
}

.seo-text a:hover,
.seo-text a:focus-visible {
	color: var(--color-link-hover);
	text-decoration-color: currentColor;
}

/* The "which solution" table on the products page. */
.seo-text table {
	width: 100%;
	margin: 0 0 var(--space-5);
	border-collapse: collapse;
	font-size: var(--font-size-16);
}

.seo-text th,
.seo-text td {
	padding: var(--space-2) var(--space-3) var(--space-2) 0;
	border-bottom: 1px solid var(--grey-100);
	text-align: left;
	vertical-align: top;
}

.seo-text th {
	font-weight: 600;
	color: var(--color-text-primary);
}

.seo-text td { color: var(--color-text-secondary); }

/* The closing link list ("Weiterführende Seiten") reads as a row of
 * links rather than another bullet list. */
.seo-text h2:last-of-type + ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	padding: 0;
	list-style: none;
}

.seo-text h2:last-of-type + ul li { margin: 0; }

@media (max-width: 640px) {
	.seo-text { padding: var(--space-8) var(--space-4) var(--space-9); }
	.seo-text__inner { font-size: var(--font-size-16); }
	.seo-text h2 { font-size: var(--font-size-21); margin-top: var(--space-8); }
}

@media print {
	.seo-text { border-top: 0; padding: 0; }
}