/*
 * BNS HNF — RTL overrides
 *
 * WHY direction:ltr + flex-direction:row-reverse?
 * ─────────────────────────────────────────────────────────────────────────
 * The <header> carries dir="rtl", which causes CSS direction:rtl to be
 * *inherited* by every child flex container (.bns-hnf-inner, .bns-hnf-actions,
 * #prk_hamburger). With direction:rtl inherited, flex-direction:row-reverse
 * cancels out (double reversal = back to LTR). And relying on direction:rtl
 * alone to visually swap flex items is fragile across browsers/themes.
 *
 * The only unambiguous solution:
 *   1. Reset direction:ltr on each flex container   → stops the interference.
 *   2. Apply flex-direction:row-reverse              → first DOM child moves to
 *                                                     the right, last to the left.
 *   3. Restore direction:rtl on Arabic text nodes   → text renders correctly.
 */

/* ── .bns-hnf-inner ─────────────────────────────────────────────────── */
/*   DOM order: [logo] [actions]                                          */
/*   After row-reverse: logo → RIGHT edge │ actions → LEFT edge          */
#bns-hnf-header[dir="rtl"] .bns-hnf-inner {
	direction:      ltr;
	flex-direction: row-reverse;
}

/* ── .bns-hnf-actions ───────────────────────────────────────────────── */
/*   DOM order: [lang-switcher?] [lang-pill] [hamburger]                 */
/*   After row-reverse: hamburger → LEFT (outer edge) │ pill → its right */
#bns-hnf-header[dir="rtl"] .bns-hnf-actions {
	direction:      ltr;
	flex-direction: row-reverse;
}

/* ── #prk_hamburger ─────────────────────────────────────────────────── */
/*   DOM order: [MENU label] [bars]                                       */
/*   After row-reverse: bars → LEFT │ MENU label → right of bars         */
#bns-hnf-header[dir="rtl"] #prk_hamburger {
	direction:      ltr;
	flex-direction: row-reverse;
}

/* Restore RTL direction on the Arabic MENU text so it renders correctly */
#bns-hnf-header[dir="rtl"] .bns-hamburger-label {
	direction: rtl;
}

/* Logo image: anchor to the right edge instead of left */
#bns-hnf-header[dir="rtl"] .bns-hnf-logo img {
	object-position: right center;
}

/* ── Overlay panel ───────────────────────────────────────────────────── */

body.bns-hnf-rtl .bns-overlay-close {
	right: auto;
	left:  clamp(16px, 4vw, 48px);
}

body.bns-hnf-rtl .bns-overlay-nav a {
	direction:  rtl;
	text-align: right;
}

body.bns-hnf-rtl .bns-overlay-nav a::after {
	left:  auto;
	right: 0;
}

/* ── Typography ─────────────────────────────────────────────────────── */

body.bns-hnf-rtl .bns-overlay-nav a,
body.bns-hnf-rtl .bns-lang-switcher a,
body.bns-hnf-rtl .bns-hamburger-label {
	font-family:    'Source Sans Pro', 'Noto Sans Arabic', sans-serif;
	letter-spacing: 0;
}

body.bns-hnf-rtl .bns-header-lang .bns-lang-item {
	letter-spacing: 0;
}