/*
 * هيدر روم لاين — نسخة القالب الابن المطابقة لمرجع index.html.
 *
 * كل المحددات تبدأ بـ rl- لتجنب التأثير في Blocksy أو محتوى الصفحة.
 */

.rl-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid rgba(20, 20, 20, 0.08);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 30px rgba(20, 20, 20, 0.06);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.rl-container {
	width: min(100% - 32px, var(--rl-container, 1180px));
	margin-inline: auto;
}

.rl-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 68px;
}

.rl-brand,
.rl-header-inner .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	margin-inline: auto;
	order: 2;
}

.rl-brand img,
.rl-header-inner .custom-logo {
	width: auto;
	max-width: 132px;
	max-height: 44px;
}

.rl-menu-toggle,
.rl-menu-close,
.rl-nav-backdrop {
	border: 0;
	cursor: pointer;
}

.rl-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	order: 1;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--rl-color-line, #e7e1dc);
	border-radius: var(--rl-radius-sm, 8px);
	color: var(--rl-color-ink, #141414);
	background: #ffffff;
}

.rl-menu-toggle span:not(.screen-reader-text) {
	width: 20px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

.rl-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	order: 3;
	min-height: 42px;
	padding: 10px 12px;
	border: 1px solid var(--rl-color-primary, #ed1f25);
	border-radius: var(--rl-radius-sm, 8px);
	color: #ffffff;
	background: var(--rl-color-primary, #ed1f25);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.rl-header-cta:hover {
	border-color: var(--rl-color-primary-dark, #b9151b);
	background: var(--rl-color-primary-dark, #b9151b);
	transform: translateY(-2px);
}

.rl-main-nav {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 1200;
	display: block;
	width: min(84vw, 340px);
	height: 100dvh;
	min-height: 100dvh;
	padding: 22px;
	overflow-y: auto;
	background: #ffffff;
	box-shadow: -24px 0 60px rgba(20, 20, 20, 0.2);
	transform: translateX(105%);
	visibility: hidden;
	transition: transform 220ms ease, visibility 220ms ease;
}

.rl-main-nav__list {
	display: grid;
	gap: 10px;
	justify-content: stretch;
	padding: 0;
	margin: 0;
	list-style: none;
}

.rl-main-nav__list a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--rl-color-line, #e7e1dc);
	border-radius: var(--rl-radius-sm, 8px);
	color: var(--rl-color-ink, #141414);
	background: #ffffff;
	box-shadow: 0 10px 24px rgba(20, 20, 20, 0.05);
	font-size: 0.95rem;
	font-weight: 700;
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.rl-main-nav__list a:hover,
.rl-main-nav__list .current-menu-item > a,
.rl-main-nav__list .current-menu-ancestor > a,
.rl-main-nav__list a.is-active {
	border-color: rgba(237, 31, 37, 0.18);
	color: var(--rl-color-primary, #ed1f25);
	background: rgba(237, 31, 37, 0.08);
}

.rl-mobile-nav-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.rl-mobile-nav-head strong {
	font-size: 1.25rem;
}

.rl-menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--rl-color-line, #e7e1dc);
	border-radius: var(--rl-radius-sm, 8px);
	color: var(--rl-color-primary, #ed1f25);
	background: rgba(237, 31, 37, 0.08);
	font-weight: 800;
}

.rl-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: rgba(0, 0, 0, 0.46);
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease, visibility 220ms ease;
}

body.rl-nav-open {
	overflow: hidden;
}

body.rl-nav-open .rl-main-nav {
	transform: translateX(0);
	visibility: visible;
}

body.rl-nav-open .rl-nav-backdrop {
	opacity: 1;
	visibility: visible;
}

.rl-menu-toggle:focus-visible,
.rl-menu-close:focus-visible,
.rl-header-cta:focus-visible,
.rl-main-nav__list a:focus-visible {
	outline: 3px solid rgba(237, 31, 37, 0.42);
	outline-offset: 3px;
}

.skip-link {
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 2000;
	transform: translateY(-140%);
	padding: 10px 14px;
	border-radius: var(--rl-radius-sm, 8px);
	color: #ffffff;
	background: var(--rl-color-primary, #ed1f25);
	transition: transform 180ms ease;
}

.skip-link:focus {
	transform: translateY(0);
}

@media (min-width: 1081px) {
	.rl-header-inner {
		gap: 20px;
		min-height: 78px;
	}

	.rl-brand,
	.rl-header-inner .custom-logo-link {
		order: 1;
		margin-inline: 0;
	}

	.rl-brand img,
	.rl-header-inner .custom-logo {
		max-width: 150px;
		max-height: 52px;
	}

	.rl-menu-toggle,
	.rl-mobile-nav-head,
	.rl-nav-backdrop {
		display: none;
	}

	.rl-main-nav {
		position: static;
		z-index: auto;
		width: auto;
		height: auto;
		min-height: 0;
		padding: 0;
		overflow: visible;
		background: transparent;
		box-shadow: none;
		transform: none;
		visibility: visible;
	}

	.rl-main-nav__list {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	.rl-main-nav__list a {
		width: auto;
		min-height: 44px;
		padding: 8px 10px;
		border: 0;
		box-shadow: none;
	}

	.rl-header-cta {
		order: 3;
		min-height: 44px;
		padding: 10px 16px;
		font-size: 0.95rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rl-main-nav,
	.rl-nav-backdrop,
	.rl-header-cta,
	.rl-main-nav__list a,
	.skip-link {
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rl-site-header {
		background: #ffffff;
	}
}