/* ==========================================================================
   Impressum + Privacy — brand red, everything in white.

   The white lockup sits exactly where the red one sits on the homepage
   (41u, 35u, 116u wide), so moving between the pages it doesn't jump.
   Type is the homepage's: bold caps with the nav's tracking for the title,
   the enquiry labels' wide tracking for the small headings, regular text for
   the rest. Lots of red around a narrow column is the whole design.
   ========================================================================== */

:root {
	--as-u: min(100vw / 440, 100dvh / 760);
	--as-legal-gutter: calc(var(--as-u) * 41);
}
@media not all and (max-aspect-ratio: 1/1) {
	:root { --as-u: min(100vw / 998, 100dvh / 560); }
}

/* The whole page is red, including overscroll. */
html:has(.as-legal),
body:has(.as-legal) { background: var(--wp--preset--color--red); }

.wp-site-blocks > .as-legal { margin-block-start: 0; }

.as-legal {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	padding: calc(var(--as-u) * 35) var(--as-legal-gutter) clamp(28px, 5vh, 48px);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--helvetica);
	-webkit-font-smoothing: antialiased;
}
.as-legal > * { margin-block: 0; }

.as-legal ::selection {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
}
.as-legal :focus-visible { outline-color: var(--wp--preset--color--white); }

/* Lockup, top left. */
.as-legal .as-legal__lockup {
	width: calc(var(--as-u) * 116);          /* exactly the homepage lockup, at every size */
	margin: 0;
}
.as-legal .as-legal__lockup a { display: block; }
.as-legal .as-legal__lockup img {
	display: block;
	width: 100%;
	height: auto;
}

/* The text column: narrow, set well down the page, aligned under the lockup. */
.as-legal .as-legal__body {
	width: 100%;
	max-width: 600px;
	margin-top: clamp(72px, 18vh, 180px);
	margin-bottom: clamp(72px, 12vh, 140px);
}
.as-legal .as-legal__body > * { margin-block: 0; }

.as-legal .as-legal__title {
	color: inherit;
	font-size: clamp(30px, 4.2vw, 54px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
}

/* Running text. (WordPress gives every paragraph a class, so these key on the body.) */
.as-legal .as-legal__body p {
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--tracking--input);
}
.as-legal .as-legal__body p + p { margin-top: .6em; }

/* Small bold caps: the lead line, the section headings, the date line. */
.as-legal .as-legal__body .as-legal__lead,
.as-legal .as-legal__body .as-legal__section,
.as-legal .as-legal__body .as-legal__meta {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}
.as-legal .as-legal__body .as-legal__lead { margin-top: 20px; margin-bottom: 44px; opacity: var(--wp--custom--form--label-opacity); }
.as-legal .as-legal__body .as-legal__section { margin-top: 56px; margin-bottom: 18px; color: inherit; }
.as-legal .as-legal__body .as-legal__section + p { margin-top: 0; }
.as-legal .as-legal__body .as-legal__meta { margin-top: 56px; opacity: var(--wp--custom--form--label-opacity); }

.as-legal a { color: inherit; }

/* Foot: the two legal pages, in the homepage nav's type. */
.as-legal .as-legal__nav {
	margin-top: auto;
	gap: 0;
}
.as-legal .as-legal__nav .wp-block-navigation__container { gap: 28px; }
.as-legal .as-legal__nav .wp-block-navigation-item__content {
	padding: 0;
	color: var(--wp--preset--color--white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--nav);
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity .18s linear;
}
.as-legal .as-legal__nav .wp-block-navigation-item__content:hover,
.as-legal .as-legal__nav .current-menu-item .wp-block-navigation-item__content { opacity: .72; }

@media (prefers-reduced-motion: reduce) {
	.as-legal .as-legal__nav .wp-block-navigation-item__content { transition: none; }
}

/* Elementor still prints its popup / header / footer templates into the page; its
   CSS and JS are removed here (functions.php), so hide what it leaves behind. */
[data-elementor-type],
.elementor-location-popup,
.elementor-location-header,
.elementor-location-footer { display: none !important; }