/*
 * Header and footer of all pages (.plan/startseite-wordpress.md), after the Figma design
 * "Hebammenkongress.at (Copy)", frames 246:497 and 300:18: page edge 40 px at 1728 px, content
 * from 180 px. The header: smiley to the start page, the links in one row on the right (the page
 * shown underlined, black stays readable on the green at the right); for now the links sit behind the menu button at every width (site-menu.css). The footer:
 * newsletter, the wordmark on its white band to the right edge, the Gremium logo, links.
 */

:root {
	--text-edge: clamp(1rem, 2.315vw, 2.5rem);   /* 40 px at 1728 */
	--text-start: clamp(1rem, 10.4vw, 11.25rem); /* 180 px at 1728 */
	--text-column: 43.25rem;                     /* 692 px: the column of the text pages */
}

@media (max-width: 900px) {
	:root {
		--text-start: var(--text-edge);
		--text-column: 100%;
	}
}

/* Header */

.site-header {
	position: relative;
	z-index: 5;
	box-sizing: border-box;
	display: flex;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	max-width: none;
	margin: 0;
	/* No room above or below: the smiley (45 px) gives the height, the links sit in its middle
	   (Dennis, 13.11.). */
	padding: 0 var(--text-edge);
	/* Transparent: on the start page the band runs behind the header (Dennis, 13.11.). */
	background: none;
}

.site-header-home img {
	display: block;
	width: 45px;
	height: 45px;
	/* A little away from the top edge of the window, without making the header taller. */
	transform: translateY(0.5rem);
}

.site-header-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.25rem, 2.5vw, 2.5rem);
	justify-content: flex-end;
	font-family: var(--font-base);
	font-weight: 500;
}

.site-header-nav a {
	color: #1e1e1e;
	font-size: clamp(1.25rem, 1.75vw, 1.875rem);
	letter-spacing: 0.03em;
	line-height: 2.5rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-header-nav a:hover,
.site-header-nav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.site-header-nav a:focus-visible,
.site-header-home:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

/* Phones: the header stays at the top while scrolling, on frosted glass in the colours of the
   page's gradient (Dennis, 13.11.). */
@media (max-width: 768px) {
	.site-header {
		position: sticky;
		top: 0;
		/* Smiley and button sit 8 px low (see above): room below them, so the background covers them. */
		padding-bottom: 1rem;
		/* Frosted glass: the page's gradient, half see-through, what scrolls below blurred. No
		   saturation boost: over the page's own gradient the header then has exactly its
		   colours (Dennis, 13.11.). */
		background: linear-gradient(90deg, rgb(153 153 255 / 0.55) 44.231%, rgb(155 255 140 / 0.55) 81.731%);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

/* WordPress's toolbar (logged in) is fixed from 601 px on: the header stays below it. */
@media (min-width: 601px) and (max-width: 768px) {
	.site-header {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

@media (max-width: 900px) {
	.site-header-home img {
		width: 36px;
		height: 36px;
	}
}

/* Footer */

.text-footer {
	margin-top: 10rem;
	padding: 0 0 2.4rem var(--text-edge);
	overflow: hidden;
	color: #1e1e1e;
	font-family: var(--font-base);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75rem;
}

.text-footer a {
	color: inherit;
}

.text-footer-newsletter {
	display: inline-block;
	margin-bottom: 2.6rem;
	color: #fff !important;
	font-size: 1.875rem;
	line-height: 1.2;
	text-transform: uppercase;
}

/* 1813 × 80 px in the frame, from 40 px to beyond the right edge */
.text-footer-wordmark {
	display: block;
	margin-bottom: 2.6rem;
}

.text-footer-wordmark img {
	display: block;
	width: 1813px;
	max-width: none;
	height: 80px;
}

.text-footer-logo img {
	display: block;
	width: 398px;
	max-width: 100%;
	height: auto;
}

.text-footer-links {
	margin: 2.5rem 0 1.75rem;
	text-transform: uppercase;
}

.text-footer-links a:first-child {
	text-transform: none;
}

.text-footer-copyright {
	margin: 0;
}

@media (max-width: 900px) {
	.text-footer {
		margin-top: 6rem;
		padding-right: var(--text-edge);
		font-size: 0.875rem;
		line-height: 1.5rem;
	}

	.text-footer-newsletter {
		margin-bottom: 1.75rem;
		font-size: 1.375rem;
	}

	.text-footer-wordmark {
		margin-bottom: 1.75rem;
	}

	.text-footer-wordmark img {
		width: 906px;
		height: 40px;
	}

	.text-footer-logo img {
		width: 260px;
	}

	.text-footer-links {
		margin-top: 1.75rem;
	}
}

/* Phones (up to 768 px, where the start page turns its band upright): the smiley of the header and
   the menu button beside it as large as the smiley at the start of the band on the start page
   (in band-mobile.png a circle of 125 px, its centre 64 px from the left edge of the image, and
   the band starts 0.75 rem from the screen edge, 0.66 rem up to 420 px): same size, and the logo
   right above it. The band is scaled to cover its box: up to 560 px
   in portrait the box is 104vh high (6.5vh × 16), above it at least 1100 px and screen-wide
   (front-page.css). Same size on every page, so the header does not change. */
@media (max-width: 768px) {
	:root {
		--header-icon: max(8.53vw, 54.4px); /* 125 / 1466 × 100vw, 125 / 2529 × 1100px */
		--header-side: 0.75rem;             /* where the band starts (front-page.css, --hero-side) */
	}

	.site-header {
		padding-right: var(--header-side);
		padding-left: var(--header-side);
	}

	.site-header-home img {
		width: var(--header-icon);
		height: var(--header-icon);
	}

	/* The lines of the menu button in proportion to the smiley (38 to 45, site-menu.css). */
	.site-header .site-menu {
		--burger-h: calc(var(--header-icon) * 38 / 45);
	}
}

@media (max-width: 560px) and (max-aspect-ratio: 1) {
	:root {
		--header-icon: 5.14vh; /* 125 / 2529 × 104vh */
	}
}

@media (max-width: 420px) {
	:root {
		--header-side: 0.66rem;
	}
}