/* Fixed Navigation - Top Navbar | GPL-2.0-only
 * Copyright (c) 2026 CAForum
 *
 * Prosilver colours and dynamic wrap alignment.
 * Smooth transition effects.
 * Top navigation only.
 * JavaScript controls fixed positioning and dimensions.
 */

html:has(#nav-main) {
	--fnb-icon-size: 12px;
	--fnb-row-height: 28px;
	--fnb-username-height: 24px;
	--fnb-header-clearance: 80px;

	height: auto;
	min-height: 100%;
	overflow-y: scroll;
	scrollbar-gutter: stable;
	scroll-padding-top: var(--fnb-header-clearance);

	/* Keep the original phpBB document structure. */
	body#phpbb {
		min-height: 100vh;
		min-height: 100dvh;
	}

	#wrap > #page-header {
		display: block;
	}

	/* Top navbar appearance. */
	#page-header > .navbar {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: 11;
		box-sizing: border-box;
		width: auto;
		margin: 0;
		padding: calc(2px + env(safe-area-inset-top, 0px))
			max(10px, env(safe-area-inset-right, 0px))
			2px max(10px, env(safe-area-inset-left, 0px));
		overflow: visible;

		/* Prosilver colours. */
		background: #CADCEB;
		color: #105289;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		box-shadow: 0 3px 10px rgb(0 0 0 / 12%);
		opacity: 1;

		> .inner > .linklist {
			padding-block: 1px;

			> li {
				min-height: var(--fnb-row-height);
				line-height: var(--fnb-row-height);
				padding-top: 0;
			}

			> li > a,
			> .breadcrumbs .crumb > a {
				color: #105289;
				vertical-align: top;

				> .icon {
					color: inherit;
				}
			}
		}

		.navlinks {
			border-top-color: #fff;
		}

		a {
			display: inline-flex;
			align-items: center;
			min-height: var(--fnb-row-height);
			vertical-align: middle;
			gap: 0.25em;
			color: #105289;
			text-decoration: none;

			&:hover,
			&:focus-visible {
				color: #D31141;
				text-decoration: none;

				> span:not(.icon):not(.badge) {
					text-decoration: underline;
				}
			}

			> .icon {
				flex-shrink: 0;
				font-size: var(--fnb-icon-size);
				line-height: 1;
			}
		}

		/* Dropdown panels retain their theme colours. */
		.dropdown-contents {
			max-height: max(60px, min(300px, calc(100vh - var(--fnb-header-clearance) - 40px)));
			max-height: max(60px, min(300px, calc(100dvh - var(--fnb-header-clearance) - 40px)));
			overflow-y: auto;
			overscroll-behavior: contain;

			a {
				display: flex;
				min-height: 0;
			}

			a.notification-block {
				display: block;
			}
		}

		.dropdown-extended .footer > a {
			display: block;
			min-height: 0;
		}
	}

	/* Header spacing. */
	#page-header > .headerbar {
		margin-top: 8px;
	}

	/* Member trigger. */
	#nav-main > #username_logged_in {
		display: flex;
		align-items: center;
		margin-top: -1px;
		line-height: normal;

		> .header-profile {
			display: flex;
			align-items: center;
			min-height: var(--fnb-row-height);
			line-height: normal;

			> .header-avatar {
				box-sizing: border-box;
				height: var(--fnb-username-height);
				min-height: 0;
				margin: 0;
				padding: 0 6px;
				line-height: 1;

				> img {
					margin-block: 0;
				}

				> span::after {
					content: none;
				}
			}
		}
	}

	/* Search in the breadcrumb row. */
	#page-header > .headerbar #search-box {
		display: none;
	}

	#nav-breadcrumbs > .fixednav-search {
		display: flex;
		align-items: center;

		.search-box {
			float: none;
			margin: 2px 0 0;
		}

		.inputbox {
			border-radius: 4px 0 0 4px;
		}

		a {
			display: block;
			min-height: 0;
			border-radius: 0 4px 4px 0;

			> .icon {
				font-size: 14px;
			}
		}
	}

	/* Fixed navbar: opaque and aligned with #wrap. */
	#page-header > .navbar > .inner.static {
		position: fixed;
		top: 0;
		z-index: 50;
		opacity: 1 !important;
		background: #CADCEB;
		animation: fnb-slide-in .22s ease-out both;
	}

	#page-header > .navbar > .inner.static:hover {
		opacity: 1 !important;
	}

	/* Inner content follows the navbar width. */
	#page-header > .navbar > .inner.static > .static-inner {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin: 0;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.not-static .static-inner {
		padding: 0;
	}

	/* Return transition. */
	#page-header > .navbar.fnb-returning {
		animation: fnb-slide-back .18s ease-out both;
	}

	/* Entry animation. */
	@keyframes fnb-slide-in {
		from {
			opacity: .85;
			transform: translateY(-8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Return animation. */
	@keyframes fnb-slide-back {
		from {
			opacity: .85;
		}

		to {
			opacity: 1;
		}
	}

	@media (max-width: 700px) {

		/* Icons only in the top row. */
		#nav-main > li > a > span:not(.icon):not(.badge) {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
		}

		#nav-breadcrumbs > .fixednav-search {
			display: none;
		}
	}

	@media screen and (max-height: 360px), print {
		scroll-padding-top: 0;

		#page-header > .navbar {
			position: static;
			box-shadow: none;
		}
	}

	@media print {
		overflow-y: visible;
		scrollbar-gutter: auto;

		body#phpbb {
			min-height: 0;
		}
	}

	/* Respect reduced-motion preferences. */
	@media (prefers-reduced-motion: reduce) {
		#page-header > .navbar > .inner.static,
		#page-header > .navbar.fnb-returning {
			animation: none;
		}
	}
}