/* Header, mobile menu, footer and system pages. Logical properties only. */

:root {
	--wak-header-h: 72px;
	--wak-header-h-small: 60px;
	--wak-logo-h: 44px;
	--wak-logo-h-small: 36px;
	--wak-bar-top: 0px;
}

@media (min-width: 960px) {
	:root {
		--wak-header-h: 104px;
		--wak-header-h-small: 72px;
		--wak-logo-h: 60px;
		--wak-logo-h-small: 44px;
	}
}

.admin-bar { --wak-bar-top: 32px; }

@media (max-width: 782px) {
	.admin-bar { --wak-bar-top: 46px; }
}

html body { padding-block-start: var(--wak-header-h); }

/* Skip link */

.wak-skip {
	position: fixed;
	inset-block-start: calc(var(--wak-bar-top) + 12px);
	inset-inline-start: 12px;
	z-index: 200;
	padding-block: 10px;
	padding-inline: 18px;
	background: var(--wak-burgundy);
	border-radius: 999px;
	color: var(--wak-cream);
	font-size: 14px;
	text-decoration: none;
	transform: translateY(-200%);
}

.wak-skip:focus {
	outline-color: var(--wak-accent);
	transform: none;
}

/* Header */

.wak-header {
	position: fixed;
	inset-block-start: var(--wak-bar-top);
	inset-inline: 0;
	z-index: 100;
	color: var(--wak-accent);
	background: var(--wak-bg);
	border-block-end: 1px solid transparent;
	transition: border-color .4s var(--wak-ease);
}

.wak-header.is-scrolled { border-block-end-color: var(--wak-line); }

.wak-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	block-size: var(--wak-header-h);
	padding-inline: var(--wak-frame);
	transition: block-size .5s var(--wak-ease);
}

.wak-header.is-scrolled .wak-header__bar { block-size: var(--wak-header-h-small); }

.wak-header__logo {
	display: block;
	position: relative;
	z-index: 2;
	inline-size: fit-content;
	border-radius: 4px;
	line-height: 0;
}

.wak-header__logo svg {
	inline-size: auto;
	block-size: var(--wak-logo-h);
	fill: currentColor;
	transition: block-size .5s var(--wak-ease);
}

.wak-header.is-scrolled .wak-header__logo svg { block-size: var(--wak-logo-h-small); }

.wak-header__actions {
	display: flex;
	position: relative;
	z-index: 2;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

.wak-lang {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 4px;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
}

.wak-lang:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Desktop navigation */

.wak-nav__list {
	display: flex;
	gap: clamp(20px, 2.6vw, 38px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wak-nav__list a {
	position: relative;
	display: block;
	padding-block: 8px;
	color: var(--wak-text);
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
}

.wak-nav__list a::after {
	content: "";
	position: absolute;
	inset-block-end: 2px;
	inset-inline: 0;
	block-size: 1.5px;
	background: var(--wak-burgundy);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .45s var(--wak-ease);
}

.wak-nav__list a:hover::after,
.wak-nav__list a[aria-current]::after,
.wak-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.wak-nav__extra,
.wak-toggle { display: none; }

/* Mobile navigation */

@media (max-width: 959.98px) {
	.wak-header__bar {
		grid-template-columns: 1fr auto;
		gap: 12px;
	}

	.wak-header__cta { display: none; }

	.wak-toggle {
		display: inline-grid;
		place-content: center;
		gap: 7px;
		inline-size: 48px;
		block-size: 48px;
		margin-inline-end: -8px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 50%;
		color: inherit;
		cursor: pointer;
	}

	.wak-toggle span {
		display: block;
		inline-size: 26px;
		block-size: 2px;
		background: currentColor;
		transition: transform .45s var(--wak-ease);
	}

	.is-open .wak-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
	.is-open .wak-toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

	.wak-header.is-open {
		--wak-focus: var(--wak-cream);
		background: transparent;
		border-block-end-color: transparent;
		color: var(--wak-cream);
	}

	.wak-nav {
		--wak-focus: var(--wak-cream);
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 32px;
		padding-block: calc(var(--wak-bar-top) + var(--wak-header-h) + 24px) 32px;
		padding-inline: var(--wak-gutter);
		overflow-y: auto;
		background: var(--wak-burgundy);
		color: var(--wak-cream);
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path .6s var(--wak-ease), visibility 0s .6s;
	}

	.wak-nav::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: -1;
		block-size: 150px;
		background: currentColor;
		opacity: .07;
		-webkit-mask: var(--wak-pattern) 0 0 / var(--wak-pattern-size);
		mask: var(--wak-pattern) 0 0 / var(--wak-pattern-size);
	}

	.is-open .wak-nav {
		clip-path: inset(0);
		visibility: visible;
		transition: clip-path .6s var(--wak-ease), visibility 0s;
	}

	.wak-nav__list {
		display: block;
		counter-reset: wak-nav;
	}

	.wak-nav__list li {
		counter-increment: wak-nav;
		border-block-end: 1px solid color-mix(in srgb, var(--wak-cream) 22%, transparent);
	}

	.wak-nav__list a {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding-block: 14px;
		color: var(--wak-cream);
		font-size: clamp(32px, 10vw, 52px);
		font-weight: 900;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}

	.wak-nav__list a::after { content: none; }

	.wak-nav__list a::before {
		content: counter(wak-nav, decimal-leading-zero);
		order: 1;
		font-size: 13px;
		font-weight: 400;
		letter-spacing: .08em;
	}

	.wak-nav__extra {
		display: grid;
		gap: 22px;
		justify-items: start;
	}

	.wak-nav__contact {
		display: grid;
		gap: 4px;
		font-size: 15px;
		font-weight: 300;
	}

	.wak-nav__contact a {
		display: flex;
		align-items: center;
		min-block-size: 32px;
		text-decoration: none;
	}

	/* Without JS the toggle cannot work, so the links stay in the page. */
	html:not(.wak-js) .wak-toggle { display: none; }
	html:not(.wak-js) .wak-header { position: static; }
	html:not(.wak-js) body { padding-block-start: 0; }
	html:not(.wak-js) .wak-header__bar { grid-template-columns: 1fr auto; block-size: auto; padding-block: 12px; }
	html:not(.wak-js) .wak-nav {
		position: static;
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 0;
		background: none;
		color: var(--wak-text);
		clip-path: none;
		visibility: visible;
	}
	html:not(.wak-js) .wak-nav::after,
	html:not(.wak-js) .wak-nav__extra { display: none; }
	html:not(.wak-js) .wak-nav__list { display: flex; flex-wrap: wrap; gap: 4px 20px; }
	html:not(.wak-js) .wak-nav__list li { border: 0; }
	html:not(.wak-js) .wak-nav__list a { padding-block: 6px; color: var(--wak-text); font-size: 15px; font-weight: 400; }
	html:not(.wak-js) .wak-nav__list a::before { content: none; }
}

/* Footer */

.wak-footer {
	--wak-focus: var(--wak-cream);
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding-block: clamp(64px, 9vw, 120px) 28px;
	padding-inline: var(--wak-frame);
	background: var(--wak-burgundy);
	border-start-start-radius: clamp(24px, 4vw, 48px);
	border-start-end-radius: clamp(24px, 4vw, 48px);
	color: var(--wak-cream);
}

.wak-footer::before {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: -1;
	block-size: clamp(150px, 18vw, 240px);
	background: currentColor;
	opacity: .09;
	-webkit-mask: var(--wak-pattern) 0 100% / var(--wak-pattern-size), linear-gradient(0deg, var(--wak-text), transparent);
	-webkit-mask-composite: source-in;
	mask: var(--wak-pattern) 0 100% / var(--wak-pattern-size), linear-gradient(0deg, var(--wak-text), transparent);
	mask-composite: intersect;
}

.wak-footer__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.wak-footer__statement {
	flex: 1 1 320px;
	max-inline-size: 9em;
	font-size: clamp(46px, 7.4vw, 96px);
	font-weight: 900;
	line-height: 1.1;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

:lang(en) .wak-footer__statement { letter-spacing: -.02em; }

/* A page that closes on its own call to action needs no second one: the two read as one closing block. */
main:has(> .wak-cta:last-child) + .wak-footer {
	padding-block-start: 0;
	border-radius: 0;
}
main:has(> .wak-cta:last-child) + .wak-footer .wak-footer__lead { display: none; }
main:has(> .wak-cta:last-child) + .wak-footer .wak-footer__cols { margin-block-start: 0; }

.wak-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 40px clamp(32px, 5vw, 72px);
	margin-block-start: clamp(56px, 7vw, 96px);
	padding-block-start: 36px;
	border-block-start: 1px solid color-mix(in srgb, var(--wak-cream) 24%, transparent);
}

.wak-footer__logo {
	display: block;
	inline-size: fit-content;
	line-height: 0;
}

.wak-footer__logo svg {
	inline-size: auto;
	block-size: 88px;
}

.wak-footer h2 {
	margin-block-end: 14px;
	color: inherit;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .02em;
	opacity: .75;
}

.wak-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wak-footer__list a,
.wak-footer__contact a {
	display: flex;
	align-items: center;
	inline-size: fit-content;
	min-block-size: 34px;
	font-size: 15px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.wak-footer__list a:hover,
.wak-footer__contact a:hover,
.wak-footer__bottom a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.wak-footer__contact p {
	margin-block-start: 6px;
	font-size: 15px;
	font-weight: 300;
}

.wak-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-block-start: clamp(40px, 5vw, 72px);
	font-size: 13px;
	font-weight: 300;
}

.wak-footer__bottom a { text-decoration: none; }

@media (max-width: 760px) {
	.wak-footer__cols {
		grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
		column-gap: 24px;
	}
	.wak-footer__logo { grid-column: 1 / -1; }
	.wak-footer__logo svg { block-size: 72px; }
}

/* Entries and lists */

.wak-entry .wak-prose { margin-block-start: clamp(36px, 5vw, 64px); }

.wak-index-grid { margin-block-start: clamp(36px, 5vw, 64px); }

/* 404 */

.wak-404 {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	gap: 24px clamp(32px, 5vw, 64px);
	min-block-size: calc(100svh - var(--wak-header-h));
}

.wak-404__code {
	color: var(--wak-accent);
	direction: ltr;
	font-size: clamp(120px, 23vw, 290px);
	white-space: nowrap;
	font-weight: 900;
	font-variant-numeric: lining-nums;
	line-height: .95;
	unicode-bidi: isolate;
}

.wak-404__body > * + * { margin-block-start: 18px; }

.wak-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 28px !important;
}

/* Side by side when they fit, and always the same width as each other. */
.wak-404__actions .wak-btn { flex: 1 1 200px; justify-content: center; }
@media (min-width: 761px) { .wak-404__actions .wak-btn { flex: 0 0 auto; min-inline-size: 220px; } }

@media (max-width: 760px) {
	.wak-404 {
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
	}
}

.wak-h1 + .wak-lead { margin-block-start: 24px; }