/*
 * Heidesee Legal-Hero widget — the title band atop the legal pages.
 *
 * A Taupe surface whose inner wrap mirrors the header/footer wrap (max-width +
 * gutter) so the title lines up under the header logo. The title is anchored to
 * the bottom of the band, and the band carries enough top padding for the
 * transparent global header to float over it. See widgets/class-legal-hero.php.
 */

.hd-legal-hero {
	background-color: var(--hd-legal-hero-bg, var(--c-taupe));
	color: var(--hd-legal-hero-color, var(--c-graphit));
}

/* Full-bleed with the same --gutter inset as the header/homepage content (no
   wrap-max cap) so the title lines up with the header logo and the body on wide
   screens. */
.hd-legal-hero__inner {
	min-height: clamp(260px, 27vw, 392px);
	display: flex;
	align-items: flex-end;
	padding: calc(var(--hd-header-h, 88px) + clamp(32px, 6vw, 96px))
		var(--gutter) clamp(32px, 3.5vw, 48px);
}

.hd-legal-hero__title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: var(--fw-normal);
	font-size: clamp(34px, 4.4vw, 50px);
	line-height: 1.1;
	color: inherit;
}

/* --- Legal content body ---
   The text-editor widget placed under the hero carries the class .hd-legal-body.
   The widget wrapper stays full-bleed (a flex item that stretches); the inner
   Elementor container is what we cap and inset so the copy lines up under the
   title (same wrap + gutter as the header/footer). */
.hd-legal-body {
	align-self: stretch;
	color: var(--c-graphit);
	/* Same --gutter inset as the header/homepage content (no wrap-max cap), so
	   the copy lines up under the title and matches the rest of the site width. */
	padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(64px, 9vw, 128px);
	/* Long legal compounds ("Rechtsprechungs-/Strafverfolgungsbehörden") must
	   wrap — an unbreakable token widened the page and produced a white strip
	   on the right on mobile (customer note 2026-08). */
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Heading hierarchy per the Figma legal page: h2 20 bold versal,
   h3/h4 18 bold — with real top margins so sections read as sections. */
.hd-legal-body h2 {
	margin: clamp(40px, 4vw, 64px) 0 16px;
	font-family: var(--font-base);
	font-weight: var(--fw-bold);
	font-size: 20px;
	line-height: 1.3;
	text-transform: uppercase;
}

.hd-legal-body h3 {
	margin: clamp(28px, 3vw, 44px) 0 12px;
	font-family: var(--font-base);
	font-weight: var(--fw-bold);
	font-size: 18px;
	line-height: 1.3;
}

.hd-legal-body h4 {
	margin: clamp(24px, 2.5vw, 32px) 0 8px;
	font-family: var(--font-base);
	font-weight: var(--fw-bold);
	font-size: 18px;
	line-height: 1.3;
}

.hd-legal-body h2:first-child,
.hd-legal-body h3:first-child {
	margin-top: 0;
}

/* Full-width copy (customer request 2026-08: no measure cap on legal pages) */
.hd-legal-body p {
	margin: 0 0 1em;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* Lists: body rhythm plus clear space below the block */
.hd-legal-body ul,
.hd-legal-body ol {
	margin: 0 0 clamp(20px, 2vw, 28px);
	padding-left: 1.2em;
}

.hd-legal-body li {
	margin-bottom: 8px;
	font-size: var(--fs-body);
	line-height: 20px; /* Figma legal page */
}

.hd-legal-body a {
	color: var(--c-graphit);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hd-legal-body a:hover {
	opacity: 0.6;
}