/**
 * Global structural layout: site header and its mobile menu behavior.
 * See docs/RESPONSIVE.md for the documented header nav breakpoint.
 */

/*
 * Rendered header height, derived from the header's own sizes: the
 * tallest of logo, CTA and the two-line brand text (whose rem sizes grow
 * with a larger browser default font), plus vertical padding and the two
 * 1px hairlines. Lets the Hero fill exactly the rest of the first screen
 * and offsets anchor jumps below the sticky header. The brand sizes are
 * defined here once and used by the brand itself.
 *
 * Header breakpoints are in em (D-034): media queries resolve em against
 * the browser's default font size, so with a larger default font the
 * header switches to the burger earlier instead of overflowing. At the
 * default 16px they are exactly the former 360 / 768 / 1280px.
 */
:root {
	--header-name-size: clamp(1.125rem, 2.5vw + 0.75rem, 1.75rem);
	--header-tagline-size: clamp(0.8125rem, 1.5vw + 0.65rem, 0.9375rem);
	--header-brand-text: calc(1.15 * (var(--header-name-size) + var(--header-tagline-size)));
	/* CTA: 0.9375rem text at line-height 1.2, 8px padding, 2px borders. */
	--header-cta: calc(0.9375rem * 1.2 + 2 * var(--space-2) + 4px);
	--site-header-height: calc(max(clamp(38px, 10vw, 56px), 46px, var(--header-brand-text), var(--header-cta)) + 2 * var(--space-3) + 2px);
}

@media (width < 22.5em) {
	:root {
		/* Smaller CTA below 360px; the 40px burger is then the tallest item. */
		--site-header-height: calc(max(clamp(38px, 10vw, 56px), 40px, var(--header-brand-text), var(--header-cta)) + 2 * var(--space-3) + 2px);
	}
}

@media (width >= 80em) {
	:root {
		/* Desktop: slightly larger 60px logo, smaller brand name. */
		--header-name-size: 1.3125rem;
		--site-header-height: calc(max(60px, var(--header-brand-text), var(--header-cta)) + 2 * var(--space-3) + 2px);
	}
}

/* Anchor targets land below the sticky header (native jumps; the homepage
   smooth-scroll script reads the same value). */
html {
	scroll-padding-top: var(--site-header-height);
}

/*
 * Sticky frosted-glass bar floating over the top of the page: the negative
 * bottom margin lets the first section (hero image, offers intro, …) run
 * underneath, as in the header reference. #main compensates on regular
 * pages (below), so their content stays exactly where it was.
 */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	isolation: isolate;
	margin-bottom: calc(-1 * var(--site-header-height));
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 0 var(--color-rule-soft);
}

/* The glass lives on its own layer, so the header is not a backdrop root
   and the mobile menu panel can blur the page itself. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(247, 243, 236, 0.7);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
	pointer-events: none;
}

/* Without backdrop-filter support: near-opaque, readability first. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header::before,
	.site-header__nav {
		background-color: rgba(247, 243, 236, 0.95);
	}
}

/* Regular pages start below the floating header, exactly as before.
   Front page (hero) and the offers page (intro) run underneath it and
   carry the offset inside their first section instead. */
#main {
	padding-top: var(--site-header-height);
}

.home #main,
#main.offers-page,
#main.error-page {
	padding-top: 0;
}

/* 404 page (D-037): the two ways on, below the intro text. */
.error-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-6);
	margin: var(--space-7) 0 0;
}

.site-header__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--space-3) var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	text-decoration: none;
	color: var(--color-text);
}

/* The logo's <picture> only picks the file; the img stays the flex item. */
.site-header__brand picture {
	display: contents;
}

.site-header__logo {
	width: clamp(38px, 10vw, 56px);
	height: clamp(38px, 10vw, 56px);
	flex-shrink: 0;
}

.site-header__brand-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.15;
	min-width: 0;
}

.site-header__brand-name,
.site-header__brand-tagline {
	white-space: nowrap;
}

.site-header__brand-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--header-name-size);
}

.site-header__brand-name-short {
	display: none;
}

.site-header__brand-tagline {
	font-size: var(--header-tagline-size);
	color: var(--color-green-900);
}

/* ---------- Navigation (shared) ---------- */

.site-header__menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__menu li {
	position: relative;
	display: flex;
}

.site-header__menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 400;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

/* Fine orange line directly below the label (as wide as the text): full
   for the current page, faint on hover. */
.site-header__menu a::after {
	content: "";
	position: absolute;
	left: var(--nav-line-inset, 0px);
	right: var(--nav-line-inset, 0px);
	bottom: var(--nav-line-offset, 0px);
	height: 2px;
	background-color: var(--color-orange-600);
	opacity: 0;
	transform: scaleX(0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-header__menu a:hover {
	color: var(--color-green-900);
}

.site-header__menu a:hover::after {
	opacity: 0.3;
	transform: scaleX(1);
}

/* Current page (WordPress sets aria-current="page"). */
.site-header__menu a[aria-current="page"] {
	color: var(--color-green-900);
	font-weight: 500;
}

.site-header__menu a[aria-current="page"]::after {
	opacity: 1;
	transform: scaleX(1);
}

.site-header__menu a:focus-visible {
	outline: 2px solid var(--color-orange-600);
	outline-offset: -2px;
}

/* ---------- Emergency CTA ---------- */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

/* Header-only shape: crisp, near-rectangular (the global pill button
   component stays untouched). */
.site-header__cta {
	gap: 10px;
	/* 46px drives the header height below 1280px (see --site-header-height). */
	min-height: 46px;
	padding: var(--space-2) var(--space-5);
	border-radius: 2px;
	/* Fine light inner edge ties the orange field into the glass bar. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	transition: background-color 0.15s ease;
}

.site-header__cta:hover {
	filter: none;
	background-color: var(--color-action-hover);
}

.site-header__cta:focus-visible {
	filter: none;
	background-color: var(--color-action-hover);
	outline: 2px solid var(--color-green-900);
	outline-offset: 2px;
}

.site-header__cta-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--color-white);
}

.site-header__cta-label-short {
	display: none;
}

/* ---------- Burger ---------- */

.site-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
	display: block;
	width: 20px;
	height: 1.25px;
	border-radius: 1px;
	background-color: var(--color-green-900);
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.site-header__menu-icon {
	position: relative;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-header__menu-icon::before {
	top: -6px;
}

.site-header__menu-icon::after {
	top: 6px;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon {
	background-color: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ---------- Mobile / tablet (below 80em = 1280px at 16px): collapsed menu ---------- */

@media (width < 80em) {
	.site-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		/* Entries line up with the bar's container, also when the burger
		   shows on viewports wider than it (larger default font, D-034). */
		padding: var(--space-1) max(var(--container-padding), calc((100% - var(--container-max-width)) / 2 + var(--container-padding))) var(--space-3);
		/* Compact glass panel continuing the bar: translucent warm white
		   with its own blur (possible because the bar's glass is a pseudo
		   layer, not a backdrop root). */
		background-color: rgba(250, 247, 242, 0.82);
		-webkit-backdrop-filter: blur(20px) saturate(1.2);
		backdrop-filter: blur(20px) saturate(1.2);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
		border-bottom: 1px solid rgba(255, 255, 255, 0.55);
		box-shadow: 0 1px 0 var(--color-rule-soft);
	}

	.site-header--menu-open .site-header__nav {
		display: block;
	}

	.site-header__menu {
		flex-direction: column;
	}

	.site-header__menu li {
		border-bottom: 1px solid var(--color-rule-soft);
	}

	.site-header__menu li:last-child {
		border-bottom: none;
	}

	/* Rows of 44px; the active line sits right under the label. */
	.site-header__menu a {
		--nav-line-offset: 7px;
		min-height: 44px;
		font-size: 1rem;
	}

	.site-header__menu-toggle {
		display: inline-flex;
	}
}

@media (width < 48em) {
	.site-header__brand-name-full {
		display: none;
	}

	.site-header__brand-name-short {
		display: inline;
	}

	.site-header__cta {
		gap: 6px;
		padding-inline: var(--space-4);
	}

	.site-header__cta-label-full {
		display: none;
	}

	.site-header__cta-label-short {
		display: inline;
	}

	.site-header__cta-icon {
		width: 16px;
		height: 16px;
	}
}

@media (width < 22.5em) {
	.site-header__cta {
		min-height: 40px;
		padding: var(--space-2) var(--space-3);
	}
}

/* ---------- Desktop (from 80em = 1280px at 16px): light editorial bar with fine dividers ---------- */

@media (width >= 80em) {
	.site-header__inner {
		height: calc(var(--site-header-height) - 2px);
		padding-block: 0;
		gap: 0;
	}

	.site-header__brand {
		flex-shrink: 0;
		padding-right: var(--space-5);
	}

	/*
	 * Fixed sizes (brand name: --header-name-size above): brand, five menu
	 * items and the CTA must not grow with the viewport. The bar is the
	 * site container (1280px) at the default font size; with a larger
	 * default font its text needs more room, so it may grow to 80em — the
	 * same width at which this layout starts (D-034).
	 */
	.site-header__inner {
		max-width: max(var(--container-max-width), 80em);
	}

	.site-header__logo {
		width: 60px;
		height: 60px;
	}

	.site-header__nav {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: auto;
		padding-inline: var(--space-3);
	}

	/* Short, quiet dividers before the navigation and before the CTA. */
	.site-header__nav::before,
	.site-header__actions::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 28px;
		transform: translateY(-50%);
		background-color: var(--color-rule-soft);
	}

	.site-header__menu {
		align-items: center;
	}

	/* Very fine dividers between the menu items. */
	.site-header__menu li + li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 14px;
		transform: translateY(-50%);
		background-color: var(--color-rule-soft);
	}

	/* Label with a small gap to its own underline (not the bar's edge). */
	.site-header__menu a {
		--nav-line-inset: 15px;
		--nav-line-offset: 2px;
		padding: 8px 15px;
		font-size: 0.9375rem;
	}

	/* Desktop height comes from the 60px logo; the CTA can be lighter. */
	.site-header__cta {
		min-height: 44px;
		padding-inline: var(--space-4);
	}

	.site-header__actions {
		position: relative;
		padding-left: var(--space-5);
	}
}

/* ---------- Site Footer ---------- */

/*
 * Footer after docs/references/footer-reference.png (D-025), refined:
 * brand with the cream/orange logo; "Kontakt" right-aligned (orange line
 * on its left) level with "Eisenhüttenstadt"; four small orange icons with
 * a quiet, slightly tracked Plex label, set close together.
 *
 * Brand metrics are custom properties so the eyebrow can be placed on the
 * location line by calculation (no magic offsets) at every width.
 *
 * Breakpoints in em, like the header (D-034/D-035): exactly 440 / 480 /
 * 768 / 960 / 1024px at the default 16px; with a larger default font the
 * footer rearranges later, so brand and contact items always fit.
 */
.site-footer {
	/* Light orange for hover text on the green: ≥ 4.5:1 (about 5.5:1). */
	--footer-accent-light: color-mix(in srgb, var(--color-accent) 60%, var(--color-white));
	--footer-rule: color-mix(in srgb, var(--color-white) 20%, transparent);
	--footer-logo-w: clamp(56px, 6.5vw, 76px);
	--footer-logo-h: calc(var(--footer-logo-w) * 257 / 320);
	--footer-name-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	--footer-name-line: 1.15;
	--footer-loc-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem);
	--footer-loc-line: 1.4;
	--footer-text-h: calc(var(--footer-name-size) * var(--footer-name-line) + var(--space-1) + var(--footer-loc-size) * var(--footer-loc-line));
	/* Top of the location line within the brand (text block centred beside the logo). */
	--footer-loc-top: calc(max(0px, (var(--footer-logo-h) - var(--footer-text-h)) / 2) + var(--footer-name-size) * var(--footer-name-line) + var(--space-1));

	background-color: var(--color-green-900);
	color: var(--color-white);
	padding-block: clamp(56px, 7vw, 96px) clamp(32px, 4vw, 56px);
}

.site-footer__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/*
 * Narrow phones: brand, then "Kontakt" right-aligned on its own line, then
 * the icons centred. The contact wrapper is dissolved so heading and list
 * can take their own grid areas.
 */
.site-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"brand"
		"heading"
		"list";
	gap: var(--space-4);
	margin-bottom: clamp(24px, 3vw, 36px);
}

.site-footer__contact-area {
	display: contents;
}

.site-footer__brand {
	grid-area: brand;
}

.site-footer__brand-row {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.4vw, 20px);
}

.site-footer__logo {
	display: block;
	flex-shrink: 0;
	width: var(--footer-logo-w);
	height: auto;
}

.site-footer__org {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-family: var(--font-heading);
	font-size: var(--footer-name-size);
	line-height: var(--footer-name-line);
	font-weight: 700;
}

.site-footer__org-name-short {
	display: none;
}

/* Spaced capitals under the name, like the mockup. */
.site-footer__org-location {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--footer-loc-size);
	line-height: var(--footer-loc-line);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

/*
 * Eyebrow like .section-intro__eyebrow, in a light tone on the green;
 * right-aligned with the orange line on its left. Its box has the height
 * of the location line, so both centre on the same axis.
 */
.site-footer__contact-heading {
	grid-area: heading;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: calc(var(--footer-loc-size) * var(--footer-loc-line));
	margin-block: 0;
	color: color-mix(in srgb, var(--color-white) 85%, transparent);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	/*
	 * Cancel the tracking after the last letter, then add the label's own
	 * trailing tracking: the "T" ends exactly where "Instagram" ends.
	 */
	margin-right: calc(0.06 * 0.9375rem - 0.14em);
}

/* Fixed width, not flex-basis: Safari leaves flex-basis out of the
   heading's intrinsic width and would push the word past the edge. */
.site-footer__contact-heading::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background-color: var(--color-accent);
}

/* "Kontakt" leads to the Kontakt page: same look, light orange on
   hover/focus like the legal links; the padding enlarges the click area
   without moving the word (cancelled by the negative margin). */
.site-footer__contact-heading-link {
	margin-block: calc(-1 * var(--space-2));
	padding-block: var(--space-2);
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer__contact-heading-link:hover,
.site-footer__contact-heading-link:focus-visible {
	color: var(--footer-accent-light);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__contact-heading-link {
		transition: none;
	}
}

.site-footer__contact {
	grid-area: list;
	justify-self: center;
	font-style: normal;
}


/* Phones: a compact 2×2, centred. */
.site-footer__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: var(--space-2) var(--space-7);
}

.site-footer__contact-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-2);
	color: color-mix(in srgb, var(--color-white) 90%, transparent);
	text-align: center;
	text-decoration: none;
}

/* Orange icons (3.3:1 on the green); cream on hover/focus. */
.site-footer__icon {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--color-accent);
	transition: color 0.2s ease;
}

/* Same family as "Eisenhüttenstadt", quietly tracked. */
.site-footer__contact-label {
	position: relative;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* Hover/focus: a short cream bar under the label (not a text underline). */
.site-footer__contact-label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background-color: var(--color-background);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.site-footer__contact-link:hover .site-footer__icon,
.site-footer__contact-link:focus-visible .site-footer__icon {
	color: var(--color-background);
}

.site-footer__contact-link:hover .site-footer__contact-label::after,
.site-footer__contact-link:focus-visible .site-footer__contact-label::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__icon,
	.site-footer__contact-label::after {
		transition: none;
	}
}

.site-footer a:focus-visible {
	outline: 2px solid var(--color-background);
	outline-offset: 4px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--footer-rule);
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
	color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__legal-links {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.site-footer__legal-links a {
	display: inline-block;
	padding-block: var(--space-2);
	color: var(--color-white);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* No underline — the link takes the light orange. */
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
	color: var(--footer-accent-light);
}

.site-footer__legal-divider {
	width: 1px;
	height: 18px;
	background-color: color-mix(in srgb, var(--color-white) 60%, transparent);
}

/* The full name needs the room beside the contact block (from 960px). */
@media (width < 60em) {
	.site-footer__org-name-full {
		display: none;
	}

	.site-footer__org-name-short {
		display: inline;
	}
}

/*
 * From 440px: "Kontakt" moves beside the brand, right-aligned on the
 * location line; the icons stay centred below.
 */
@media (width >= 27.5em) {
	.site-footer__main {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"brand heading"
			"list list";
		column-gap: var(--space-4);
		row-gap: var(--space-5);
	}

	.site-footer__contact-heading {
		align-self: start;
		margin-top: var(--footer-loc-top);
	}
}

/* From 480px: the four contact items in one row, close together. */
@media (width >= 30em) {
	.site-footer__contact-list {
		display: flex;
		gap: var(--space-4) clamp(24px, 3vw, 40px);
	}

	.site-footer__icon {
		width: 28px;
		height: 28px;
	}

	.site-footer__contact-label {
		font-size: 0.9375rem;
	}
}

/*
 * From 768px (tablet and up): brand left, contact block right — "Kontakt"
 * on the location line, the icons below it, both flush with the legal
 * links.
 */
@media (width >= 48em) {
	.site-footer__main {
		grid-template-columns: auto auto;
		grid-template-areas:
			"brand heading"
			"brand list";
		justify-content: space-between;
		column-gap: var(--space-6);
		row-gap: var(--space-3);
	}

	.site-footer__brand {
		align-self: start;
	}

	.site-footer__contact {
		justify-self: end;
	}

	.site-footer__contact-heading::before {
		width: 48px;
	}
}

@media (width >= 64em) {
	.site-footer {
		--footer-logo-w: 76px;
		--footer-name-size: 1.75rem;
		--footer-loc-size: 0.9375rem;
	}

	.site-footer__main {
		column-gap: var(--space-7);
	}
}