/* Title bar of every page (fragments/header.html): brand, register and login, the signed-in
   icons and their menus. Target design: board "Startseite" in the theme artifact (ADR 0003).
   Hooks kept for JS and Selenium: .sticky-header (height maths), .nav-brand, #login-dp*. */

/* Bar height: 2.75rem touch targets plus padding. Fixed elements below the bar (exposé info
   panel, homewantad.css) place themselves with it. */
:root {
	--hwa-header-height: 4rem;
}

@media (min-width: 768px) {
	:root {
		--hwa-header-height: 4.5rem;
	}
}

.hwa-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	min-height: var(--hwa-header-height);
	padding: 0.625rem 1rem;
}

.hwa-header .nav-header {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hwa-header .nav-brand {
	display: flex;
	align-items: center;
	min-height: 2.75rem; /* touch target */
	padding: 0 0.5rem;
	color: var(--hwa-on-deep-muted);
	font-size: var(--hwa-fs-body);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--hwa-radius);
}

.hwa-header .nav-brand:hover {
	color: var(--hwa-on-deep);
}

.hwa-header .nav-brand[disabled] {
	color: var(--hwa-on-deep-muted);
	cursor: default;
}

/* The iron blue ring of the theme would vanish on the deep blue bar. */
.hwa-header a:focus-visible {
	outline: 2px solid var(--hwa-on-deep);
	outline-offset: 2px;
}

/* ---------- Brand ---------- */

.hwa-brand {
	gap: 0.5rem;
	padding-left: 0;
	color: var(--hwa-on-deep);
}

.hwa-brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 0.5625rem;
	background: var(--hwa-lime); /* lime box, iron-blue mark (logo variant E) */
}

.hwa-brand-mark img {
	width: 1.3125rem;
	height: auto;
}

.hwa-brand-name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hwa-on-deep);
}

.hwa-brand-demo {
	padding: 0.125rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--hwa-on-deep);
	border: 1px solid var(--hwa-on-deep-muted);
	border-radius: 999px;
}

/* ---------- Environment marker outside production (board "Leisten", variant B) ---------- */

/* The bar keeps the production colour so reviews show the real design; an amber stripe and
   badge mark every other profile. */
.hwa-env-dev {
	box-shadow: inset 0 4px 0 var(--hwa-env);
}

.hwa-env-badge {
	margin-left: 0.25rem;
	padding: 0.125rem 0.625rem;
	color: var(--hwa-env-ink);
	background: var(--hwa-env);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
}

/* Phones have no room for the badge: it stays for screen readers only, and the Demo pill
   takes the amber colour instead (user, 2026-10-12). */
@media (max-width: 575.98px) {
	.hwa-env-badge {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hwa-env-dev .hwa-brand-demo {
		color: var(--hwa-env-ink);
		background: var(--hwa-env);
		border-color: var(--hwa-env);
	}
}

/* ---------- Register and login ---------- */

.hwa-header .hwa-nav-link {
	padding: 0 0.875rem;
	color: var(--hwa-on-deep);
	font-size: 0.9375rem;
}

/* On the login page itself the link is disabled and stays muted, as before. */
.hwa-header .hwa-nav-link[disabled] {
	color: var(--hwa-on-deep-muted);
}

.hwa-header .dropdown-toggle::after {
	color: var(--hwa-on-deep-muted);
}

.hwa-btn-register {
	--bs-btn-color: var(--hwa-lime-ink);
	--bs-btn-bg: var(--hwa-lime);
	--bs-btn-border-color: var(--hwa-lime);
	--bs-btn-hover-color: var(--hwa-lime-ink);
	--bs-btn-hover-bg: var(--hwa-lime-hover);
	--bs-btn-hover-border-color: var(--hwa-lime-hover);
	--bs-btn-active-color: var(--hwa-lime-ink);
	--bs-btn-active-bg: var(--hwa-lime-hover);
	--bs-btn-active-border-color: var(--hwa-lime-hover);
	--bs-btn-padding-x: 1.125rem;
	--bs-btn-padding-y: 0.5rem;
	--bs-btn-font-size: 0.9375rem;
	--bs-btn-font-weight: 600;
	margin-right: 0.25rem;
}

/* ---------- Signed in: icons, badges, menus ---------- */

.hwa-header .nav-brand i {
	padding: 0.5rem;
	font-size: 1.5rem;
}

.hwa-header .badge {
	margin-top: 0;
	color: var(--hwa-lime-ink);
	background-color: var(--hwa-lime);
	font-weight: 700;
}

.hwa-header .caret {
	display: inline-block;
	margin-left: 0.125rem;
	border-top: 6px solid;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	color: var(--hwa-on-deep-muted);
}

.hwa-header .dropdown-menu {
	right: 0;
	left: inherit;
	/* Inside .navbar Bootstrap 5 places menus by CSS only (no Popper, data-bs-offset ignored): the
	   menu would start 2px below the touch target, i.e. inside the bar. Start at its lower edge. */
	margin-top: calc((var(--hwa-header-height) - 2.75rem) / 2);
}

.hwa-header .dropdown-menu>li>a>i,
.hwa-header .dropdown-menu>li>a>span {
	display: table-cell;
	vertical-align: middle;
	line-height: 30px;
}

.hwa-header .dropdown-menu>li>a>i {
	padding-right: 15px;
	font-size: 25px;
}

/* Signed in, the icons need the room of the brand name on phones (as the old icon-only logo). */
@media (max-width: 575.98px) {
	/* Hidden visually only, so the home link keeps its name for screen readers. */
	.hwa-header-bar:has(.btn-group) .hwa-brand-name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hwa-header .nav-brand i {
		padding: 0.5rem 0.25rem;
	}
}

@media (min-width: 768px) {
	.hwa-header-bar {
		padding: 0.875rem 3rem;
	}

	.hwa-brand-mark {
		width: 2.375rem;
		height: 2.375rem;
		border-radius: 0.625rem;
	}

	.hwa-brand-mark img {
		width: 1.5rem;
	}

	.hwa-brand-name {
		font-size: 1.1875rem;
	}
}