/* =========================================================
   Header Manager – Zeina layout
   Buttons are overlaid on the header image (#page-header).
   ========================================================= */

#page-header .hb-bar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--header-height);
	padding: 20px 10px;
	pointer-events: none;
}

#page-header .hb-bar--top    { align-items: flex-start; }
#page-header .hb-bar--bottom { align-items: flex-end; }

#page-header .hb-coins {
	position: absolute;
	top: clamp(10px, 2vw, 18px);
	inset-inline-end: clamp(12px, 3vw, 32px);
	z-index: 4;
	max-width: calc(100% - 24px);
}

@media (max-width: 1089px) {
	#page-header .hb-coins {
		display: none;
	}
}

@media (max-width: 767px) {
	#page-header .hb-bar {
		height: var(--header-height-sm);
	}

	#page-header .hb-hide-mobile {
		display: none;
	}
}

/* Particles sit above the header image and below the header content */
#page-header .header-section {
	isolation: isolate;
}

#page-header .header-section .header-image {
	position: relative;
	z-index: 0;
}

#page-header .header-section .hm-particles {
	z-index: 2;
}