/* Fejléc (partials/header-navbar.php). Külön fájl, nem a SASS-csomag része, így
   módosításhoz nem kell újrafordítani a témát. */

.jph-fejlec {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.jph-fejlec > .container {
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

/* Logó + név */
.jph-fejlec-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	flex: 999 1 0%;
	margin-right: auto;
	padding: 0;
	color: #1d1d1d;
	text-decoration: none;
	white-space: normal;
}

.jph-fejlec-brand:hover,
.jph-fejlec-brand:focus {
	color: #1d1d1d;
}

.jph-fejlec-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 65px;
	max-width: 160px;
}

/* A honlap neve mindig egy sorban, a címsorok betűjével; keskeny képernyőn kisebb, és ha így
   sem fér ki, a vége kipontozva. */
.jph-fejlec-nev {
	min-width: 0;
	overflow: hidden;
	font-family: var(--bs-headings-font-family, inherit);
	font-size: clamp(0.75rem, 0.35rem + 2vw, 1.35rem);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Hamburger: sárga háttér, fekete keret, mindig látszik (a menü mindig összecsukott). */
.jph-fejlec-toggler {
	padding: 0.4rem 0.6rem;
	background-color: #fbcd73;
	border: 2px solid #000;
	border-radius: 0.5rem;
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.jph-fejlec-toggler:focus {
	box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.jph-fejlec .navbar-collapse {
	flex-basis: 100%;
}

/* Gombok a menü helyén: mint a „Pályázati felhívás” gomb (sárga gomb blokkstílus).
   Elrendezés: ha elférnek, a logó és a név mellett, jobbra; ha nem, a logó és a név alá
   kerülnek, és ott kitöltik a sort. A név nagyon nagy növekedési aránya (999) miatt
   egy sorban a szabad hely a névhez kerül, a gombok csak akkor nyúlnak meg, ha
   egyedül vannak a sorban. */
.jph-fejlec-gombok {
	display: flex;
	flex: 1 0 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
}

.jph-fejlec-gomb {
	display: inline-block;
	flex: 1 1 auto;
	padding: 0.7rem 1.4rem;
	font-family: var(--bs-body-font-family, inherit);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: #1d1d1d;
	background-color: #fbcd73;
	border-radius: 0.5rem;
	transition: filter 0.15s ease;
}

.jph-fejlec-gomb:hover,
.jph-fejlec-gomb:focus-visible {
	color: #1d1d1d;
	filter: brightness(0.92);
}

/* Keskeny képernyő: kisebb logó; a név legfeljebb két sorban, a logó mellett. */
@media (max-width: 575.98px) {
	.jph-fejlec-logo {
		max-height: 46px;
	}

	.jph-fejlec-brand {
		gap: 0.5rem;
	}

	/* Gombos fejléc: a név két sorba törhet; a logó és a név legalább ekkora helyet kap,
	   ha a gomb mellette már nem fér el, a gomb a következő sorba kerül. */
	.jph-fejlec-brand:has(+ .jph-fejlec-gombok) {
		flex: 999 1 12.5rem;
	}

	.jph-fejlec-brand:has(+ .jph-fejlec-gombok) .jph-fejlec-nev {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		white-space: normal;
		font-size: 0.9rem;
		line-height: 1.25;
	}

	.jph-fejlec-gomb {
		padding: 0.6rem 1rem;
	}

	/* Két gomb: mindig a logó és a név alatt, egymás mellett. */
	.jph-fejlec-gombok--tobb {
		flex-basis: 100%;
	}
}