/*
 * Kontradiktion — chrome: the sticky top bar (brand + menu) and the footer.
 * Part of the split stylesheet set — see base.css for the map and load order.
 */

/* --- Chrome: a sticky top bar — brand (left) + menu (right) --- */
.k-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--k-header-h);
	padding: 0 1.5rem;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--k-rule);
}
/* Logged-in staff see the WP admin bar (fixed at the very top): stick below it. */
body.admin-bar .k-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* Compact stacked wordmark used as the logo mark in the bar. */
.k-brand {
	flex: 0 0 auto;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 0.55rem;
	letter-spacing: 0.28em;
	padding: 0.5rem 0;
}
.k-brand .k-wordmark__row {
	line-height: 1.1;
}
.k-nav {
	flex: 0 1 auto;
}
.k-nav__list,
.k-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.k-footer__list {
	justify-content: center;
}
.k-nav__list a,
.k-footer__list a,
.k-nav .sub-menu a {
	text-decoration: none;
	opacity: 0.85;
}
.k-nav__list a:hover,
.k-footer__list a:hover {
	opacity: 1;
}

/* Arkiv dropdown */
.k-nav .menu-item-has-children {
	position: relative;
}
.k-nav .menu-item-has-children > a::after {
	content: " \25BE";
	font-size: 0.7em;
	opacity: 0.6;
}
.k-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%; /* flush with the parent — no gap, so hover doesn't drop */
	right: 0; /* #ARKIV is the rightmost item: anchor right so the panel opens
	             leftward and never overflows the viewport (no h-scrollbar) */
	left: auto;
	transform: none;
	margin: 0;
	padding: 1rem 0;
	min-width: 13rem;
	list-style: none;
	background: var(--k-bg);
	border: 1px solid var(--k-rule);
	z-index: 30;
}
/* Desktop opens on hover/focus; touch opens on tap via .is-open (toggled by the
   nav script in footer.php). Either way it stays a floating panel, so the slim
   sticky bar never grows to swallow the whole archive list. */
.k-nav .menu-item-has-children:hover > .sub-menu,
.k-nav .menu-item-has-children:focus-within > .sub-menu,
.k-nav .menu-item-has-children.is-open > .sub-menu {
	display: block;
}
.k-nav .sub-menu li {
	padding: 0.4rem 1.5rem;
	white-space: nowrap;
	text-align: center;
	letter-spacing: 0.12em;
}

/* Signature stacked wordmark — KONT / R AD / I K T / I O N, a spaced grid-like
   stack (DESIGN.md visual profile), used as the compact .k-brand logo in the bar.
   Rows are centred so the trailing letter-spacing can't drag them off-axis. */
.k-wordmark__stack {
	display: inline-block;
}
.k-wordmark__row {
	display: block;
	text-align: center;
	line-height: 1.25;
}

/* --- Footer --- */
.k-footer {
	border-top: 1px solid var(--k-rule);
	margin-top: 4rem;
	padding: 3rem 1.5rem 3.5rem;
	text-align: center;
	color: var(--k-muted);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: center;
}
.k-footer__colophon {
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}
.k-footer__text {
	margin: 0;
	max-width: 42rem;
	font-size: 0.85rem;
	line-height: 1.7;
}
.k-footer__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.k-footer__social a {
	text-decoration: none;
	opacity: 0.85;
}
.k-footer__social a:hover {
	opacity: 1;
}

/* ===========================================================================
   Piece chrome (adr/0008, revised 2026-08-14) — on a PIECE the work opens the
   page and there is NO top bar at all: navigation lives in a fixed bar at the
   bottom (‹ #8 · 3/7 ›) plus the footer. The landing is untouched — it keeps
   the normal sticky header above.

   The bar used to auto-hide and reveal on pointer/scroll/focus. The reveal
   paths fought each other (a scroll up showed it, the next mouse move took it
   away) and it is now simply not rendered on a piece — see templates/header.php.
   Nothing here needs a script: the bottom bar is plain markup, so it survives
   scripting being off, which is what made the auto-hiding version defensible in
   the first place.
   =========================================================================== */

/* The bar's height is a token because the piece media budget is measured
   against it (piece.css: --k-media-max-h) and the footer has to clear it. Set
   it here, next to the bar, so the number and the thing it measures cannot
   drift apart. box-sizing so the token IS the rendered height, padding and
   border included — there is no global reset on this site. */
body.k-piece-surface {
	--k-piecebar-h: 4rem;
}

/* --- The persistent bottom bar: ‹  #8 · 3/7  › --- */
.k-piecebar {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	min-height: var(--k-piecebar-h);
	padding: 0.6rem var(--k-gutter);
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--k-rule);
}
/* Keep the footer clear of the fixed bar, so the last line of the colophon is
   never trapped underneath it. */
body.k-piece-surface .k-footer {
	padding-bottom: calc(var(--k-piecebar-h) + 1.5rem);
}
.k-piecebar__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--k-rule);
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.k-piecebar__arrow:hover,
.k-piecebar__arrow:focus-visible {
	background: var(--k-fg);
	color: var(--k-bg);
}
/* First/last piece: the arrow stays as a placeholder so the triad keeps its
   shape and the edition button doesn't jump between pages. */
.k-piecebar__arrow.is-disabled {
	opacity: 0.25;
	border-style: dashed;
}
.k-piecebar__edition {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	min-width: 4.5rem;
	text-align: center;
	text-decoration: none;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--k-muted);
	transition: color 0.2s ease;
}
.k-piecebar__edition:hover,
.k-piecebar__edition:focus-visible {
	color: var(--k-fg);
}
.k-piecebar__ed {
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	color: var(--k-fg);
}
@media (prefers-reduced-motion: reduce) {
	.k-piecebar__arrow,
	.k-piecebar__edition {
		transition: none;
	}
}