/**
 * KrautPress Network Bar – base styles.
 *
 * Adjust through the custom properties instead of overriding selectors:
 *
 * .kpnb { --kpnb-background: #000; }
 *
 * The bar sits inside themes we don't control, so it is defensive:
 * - Typography is set on every element directly instead of inherited, so
 *   global element rules like `a:where(:not(.wp-element-button))` don't win.
 * - Link and list rules use a three-class prefix (`.kpnb .kpnb__inner …`),
 *   which outranks typical theme selectors such as
 *   `a[href^="https://"]:not([href*="example.com"])::after` (0,2,2).
 * - Pseudo-elements on links and list items are cleared, so themes can't add
 *   external-link arrows, bullets or icons.
 *
 * No web fonts, no JavaScript, no tracking.
 */

.kpnb {
	--kpnb-background: #15171a;
	--kpnb-color: #c9cbc5;
	--kpnb-color-current: #fff;
	--kpnb-font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	--kpnb-font-size: 12px;
	--kpnb-line-height: 1.5;
	--kpnb-max-width: 1200px;
	--kpnb-padding-block: 7px;
	--kpnb-padding-inline: 24px;
	--kpnb-gap: 20px;

	background: var(--kpnb-background);
	box-sizing: border-box;
	color: var(--kpnb-color);
	display: block;
	font-family: var(--kpnb-font-family);
	font-size: var(--kpnb-font-size);
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	line-height: var(--kpnb-line-height);
	margin: 0;
	padding: 0;
	text-align: start;
	text-transform: none;
	width: 100%;
}

.kpnb *,
.kpnb *::before,
.kpnb *::after {
	box-sizing: inherit;
}

/* Layout */

.kpnb .kpnb__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--kpnb-gap);
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--kpnb-max-width);
	padding: var(--kpnb-padding-block) var(--kpnb-padding-inline);
}

.kpnb .kpnb__inner .kpnb__nav {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.kpnb .kpnb__inner .kpnb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--kpnb-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kpnb .kpnb__inner .kpnb__item {
	background: none;
	border: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kpnb .kpnb__inner .kpnb__item::marker {
	content: none;
}

/* Links: reset everything themes commonly set on `a` */

.kpnb .kpnb__inner a.kpnb__link,
.kpnb .kpnb__inner a.kpnb__switcher {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--kpnb-color);
	display: inline-flex;
	font-family: var(--kpnb-font-family);
	font-size: var(--kpnb-font-size);
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	line-height: var(--kpnb-line-height);
	margin: 0;
	min-height: 24px;
	padding: 0;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	transition: none;
}

/* No icons, bullets or external-link arrows from themes */

.kpnb .kpnb__inner .kpnb__item::before,
.kpnb .kpnb__inner .kpnb__item::after,
.kpnb .kpnb__inner a.kpnb__link::before,
.kpnb .kpnb__inner a.kpnb__link::after,
.kpnb .kpnb__inner a.kpnb__switcher::before,
.kpnb .kpnb__inner a.kpnb__switcher::after {
	background: none;
	content: none;
	display: none;
}

/* States */

.kpnb .kpnb__inner a.kpnb__link:hover,
.kpnb .kpnb__inner a.kpnb__switcher:hover,
.kpnb .kpnb__inner .kpnb__item.is-current a.kpnb__link {
	color: var(--kpnb-color-current);
}

.kpnb .kpnb__inner .kpnb__item.is-current a.kpnb__link {
	font-weight: 700;
}

.kpnb .kpnb__inner a.kpnb__link:hover,
.kpnb .kpnb__inner a.kpnb__switcher:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kpnb .kpnb__inner a.kpnb__link:focus-visible,
.kpnb .kpnb__inner a.kpnb__switcher:focus-visible {
	border-radius: 2px;
	box-shadow: none;
	color: var(--kpnb-color-current);
	outline: 2px solid var(--kpnb-color-current);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.kpnb {
		border-block-end: 1px solid CanvasText;
	}
}