/*
 * Bledkom — the primary navigation must stay on one line
 *
 * Astra lays the desktop menu out as `display:flex; flex-wrap:wrap`, so the
 * moment the seven items are wider than the space beside the logo they fold
 * onto a second row and the header doubles in height. Arabic fits. French does
 * not: the same seven labels come out roughly 200px wider, and the header on
 * /fr/ was two rows tall.
 *
 * Two rules, in order of preference:
 *   1. Never wrap. One row or nothing.
 *   2. If the row is tight, give up type size before giving up the line.
 *
 * Desktop only. Below Astra's 921px breakpoint the menu is the off-canvas
 * panel, where items are stacked on purpose and every rule here would be wrong.
 *
 * `!important` on font-size and padding because Astra writes both from the
 * customiser into inline CSS that loads after any plugin stylesheet.
 *
 * ---------------------------------------------------------------------------
 * Update log
 * ---------------------------------------------------------------------------
 * 0.37.0 — 2026-08-28 — First build. The French menu was wrapping to two rows.
 * ---------------------------------------------------------------------------
 */

@media (min-width: 922px) {

	.main-header-menu {
		flex-wrap: nowrap !important;
	}

	.main-header-menu > .menu-item > .menu-link,
	.main-header-menu > .menu-item > a {
		white-space: nowrap;
	}
}

/* Tight, but still comfortable. */
@media (min-width: 922px) and (max-width: 1350px) {

	.main-header-menu > .menu-item > .menu-link,
	.main-header-menu > .menu-item > a {
		font-size: 15px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* The last step before the burger takes over. */
@media (min-width: 922px) and (max-width: 1150px) {

	.main-header-menu > .menu-item > .menu-link,
	.main-header-menu > .menu-item > a {
		font-size: 14px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* -------------------------------------------------------------------------
 * The bar above the header — 0.51.0
 *
 * Sign in, register and the radio used to sit inside the menu. The menu is a
 * flex row with nine links already in it, so anything added got squeezed —
 * the French «La radio» stacked one letter per line — and three bordered
 * controls between navigation links read as clutter. They live here now.
 *
 * Logical properties throughout, so Arabic and French share the file: the
 * radio sits at the inline start and the account controls at the inline end,
 * which puts them on the correct sides in both directions with no [dir] rule.
 * ---------------------------------------------------------------------- */

.bk-topbar {
	background: var( --bk-palette8, #EEF1F0 );
	border-block-end: 1px solid var( --bk-palette7, #E3E9E8 );
	font-size: 0.85rem;
	line-height: 1.2;
}

.bk-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: 0.35rem 1.25rem;
}

.bk-topbar__start,
.bk-topbar__end {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-inline-size: 0;
}

.bk-acct {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	text-decoration: none !important;
}

/* Ordinary links: whoever needs these already knows they have an account. */
.bk-acct--in,
.bk-acct--out,
.bk-acct--acct {
	color: var( --bk-palette4, #3A4E53 ) !important;
}

.bk-acct--in:hover,
.bk-acct--in:focus-visible,
.bk-acct--out:hover,
.bk-acct--out:focus-visible,
.bk-acct--acct:hover,
.bk-acct--acct:focus-visible {
	color: var( --bk-palette1, #1B6B70 ) !important;
	text-decoration: underline !important;
}

/* Register: the only filled control on the bar. */
.bk-acct--new {
	padding: 0.25rem 0.85rem;
	border-radius: 999px;
	background: var( --bk-palette2, #B8432B );
	color: #FFFFFF !important;
	font-weight: 700;
}

.bk-acct--new:hover,
.bk-acct--new:focus-visible {
	filter: brightness( 0.92 );
	color: #FFFFFF !important;
}

/* The bar is a convenience, not the navigation — it may shrink away. */
@media ( max-width: 480px ) {
	.bk-topbar__inner { padding-inline: 0.75rem; gap: 0.5rem; }
	.bk-topbar { font-size: 0.8rem; }
}