/* One compact header across the network. The logo returns home; the menu holds
 * secondary navigation on desktop and all navigation on small screens. */
:root {
	--glass: rgba(255, 255, 255, 0.62);
	--glass-border: rgba(255, 255, 255, 0.72);
	--glass-highlight: rgba(255, 255, 255, 0.9);
	--shadow-header: 0 18px 54px rgba(17, 17, 17, 0.12), inset 0 1px 0 var(--glass-highlight);
}

:root[data-theme="dark"] {
	--glass: rgba(20, 20, 23, 0.64);
	--glass-border: rgba(255, 255, 255, 0.16);
	--glass-highlight: rgba(255, 255, 255, 0.14);
	--shadow-header: 0 20px 58px rgba(0, 0, 0, 0.44), inset 0 1px 0 var(--glass-highlight);
}

.network-header,
.network-dialog,
.content-card,
.mentorat-card,
.editorial-shortcut {
	border-color: var(--glass-border);
	background:
		linear-gradient(135deg, color-mix(in srgb, #ffffff 58%, transparent), transparent 46%),
		var(--glass);
	box-shadow: var(--shadow-header);
	backdrop-filter: saturate(175%) blur(30px);
	-webkit-backdrop-filter: saturate(175%) blur(30px);
}

:root[data-theme="dark"] .network-header,
:root[data-theme="dark"] .network-dialog,
:root[data-theme="dark"] .content-card,
:root[data-theme="dark"] .mentorat-card,
:root[data-theme="dark"] .editorial-shortcut {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 46%),
		var(--glass);
}
.network-tools > .icon-button[data-notification-open] {
	display: none;
}

.network-search-trigger {
	width: 48px;
	justify-content: center;
	padding: 0;
}

.network-search-trigger span {
	display: none;
}

.network-theme-switch {
	width: 48px;
	min-width: 48px;
	height: 48px;
	min-height: 48px;
	padding: 0;
	border-radius: 50%;
}

.network-theme-switch__button {
	display: none !important;
}

.network-theme-cycle {
	display: inline-grid;
	width: 48px;
	height: 48px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.network-theme-cycle:hover {
	background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.network-theme-cycle svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.network-theme-cycle[data-mode="auto"] .theme-icon--light,
.network-theme-cycle[data-mode="auto"] .theme-icon--dark,
.network-theme-cycle[data-mode="light"] .theme-icon--auto,
.network-theme-cycle[data-mode="light"] .theme-icon--dark,
.network-theme-cycle[data-mode="dark"] .theme-icon--auto,
.network-theme-cycle[data-mode="dark"] .theme-icon--light {
	display: none;
}

@media (min-width: 981px) {
	.network-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding-inline: 22px 18px;
		gap: clamp(12px, 1.5vw, 24px);
	}

	.network-nav {
		justify-content: center;
		gap: clamp(12px, 1.5vw, 24px);
	}

	/* On desktop, all navigation remains immediately visible. */
	.network-nav a:nth-child(1),
	.network-nav a:nth-child(4),
	.network-nav a:nth-child(5) {
		display: flex;
	}

	.network-menu-toggle {
		display: none !important;
	}
}

@media (max-width: 980px) {
	/* This menu expands inside the document, it is not a full-screen overlay.
	 * Keep the page scrollable while it is open. */
	body.menu-open {
		overflow: auto;
	}

	/* The parent theme keeps its legacy notification and two-button theme
	 * controls. On mobile, expose only search and the compact theme cycler. */
	.network-tools > * {
		display: none !important;
	}

	.network-tools > .network-search-trigger,
	.network-tools > .network-theme-switch {
		display: inline-grid !important;
		place-items: center;
	}

	.network-theme-switch > * {
		display: none !important;
	}

	.network-theme-switch > .network-theme-cycle {
		display: inline-grid !important;
	}

	.network-tools {
		gap: 6px;
	}
}

@media (max-width: 560px) {
	.network-tools {
		gap: 3px;
	}

	.network-search-trigger,
	.network-theme-switch,
	.network-theme-cycle {
		width: 44px;
		min-width: 44px;
		height: 44px;
		min-height: 44px;
	}
}