/**
 * Al-Ansar Redesign — Header Component
 * مصدر: html/index.html سطور 155-240 + 879-915 (انظر components/header.md)
 *
 * @since Redesign 1.0
 */

#ar-site-header{
	position:fixed; inset-inline:0; top:0; z-index:100;
	padding-block:26px;
	font-family:var(--ar-font-body);
	transition:background .5s var(--ar-ease), box-shadow .5s var(--ar-ease), padding .5s var(--ar-ease), border-color .5s var(--ar-ease);
	border-bottom:1px solid transparent;
}
#ar-site-header .ar-wrap-wide{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

#ar-site-header .ar-brandmark{ display:flex; align-items:center; gap:12px; }
#ar-site-header .ar-brandmark img{ height:52px; width:auto; max-width:200px; filter:drop-shadow(0 4px 10px rgba(0,25,10,.25)); }

.ar-mainnav{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.ar-nav-item{ position:relative; }
.ar-nav-item.has-dropdown .ar-nav-link,
.ar-dropdown-item.has-sub .ar-dropdown-link{
	cursor: default;
}
.ar-nav-link{
	display:inline-flex; align-items:center; gap:6px;
	font-family:var(--ar-font-body);
	font-size:14.5px; font-weight:700; color:rgba(255,255,255,.88);
	position:relative; padding-bottom:4px; transition:color .5s var(--ar-ease);
}
.ar-nav-link::after{
	content:''; position:absolute; right:0; bottom:0; width:0; height:2px; background:var(--ar-gold-500);
	transition:width .3s var(--ar-ease);
}
.ar-nav-link:hover::after{ width:100%; }
.ar-nav-link .ar-caret{ width:9px; height:9px; flex-shrink:0; transition:transform .3s var(--ar-ease); }
.ar-nav-item.has-dropdown:hover .ar-nav-link .ar-caret,
.ar-nav-item.has-dropdown:focus-within .ar-nav-link .ar-caret{ transform:rotate(180deg); }

.ar-dropdown{
	position:absolute; top:calc(100% + 20px); inset-inline-start:-14px;
	background:rgba(3,36,15,.97); backdrop-filter:blur(14px);
	border:1px solid rgba(255,255,255,.1); border-radius:14px;
	padding:10px; min-width:200px;
	opacity:0; visibility:hidden; transform:translateY(8px);
	transition:opacity .3s var(--ar-ease), transform .3s var(--ar-ease), visibility .3s;
	box-shadow:0 20px 45px -20px rgba(0,0,0,.55);
	z-index:50;
}
.ar-nav-item.has-dropdown:hover .ar-dropdown,
.ar-nav-item.has-dropdown:focus-within .ar-dropdown{
	opacity:1; visibility:visible; transform:translateY(0);
}
.ar-dropdown > a,
.ar-dropdown .ar-dropdown-link{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:10px 14px; border-radius:8px; font-size:14px; font-weight:600;
	color:rgba(255,255,255,.82); transition:background .25s var(--ar-ease), color .25s var(--ar-ease);
	white-space:nowrap; text-decoration:none;
}
.ar-dropdown > a:hover,
.ar-dropdown .ar-dropdown-link:hover{ background:rgba(255,255,255,.08); color:#fff; }

.ar-dropdown-item{
	position:relative;
}
.ar-dropdown-item .ar-caret-sub{
	width:9px; height:9px; flex-shrink:0; opacity:.7;
}
/* In RTL the path already points left (toward flyout). In LTR flip it to point right. */
html[dir="ltr"] .ar-dropdown-item .ar-caret-sub{ transform:scaleX(-1); }

.ar-dropdown-sub{
	position:absolute; top:-10px; inset-inline-start:100%; margin-inline-start:6px;
	background:rgba(3,36,15,.97); backdrop-filter:blur(14px);
	border:1px solid rgba(255,255,255,.1); border-radius:14px;
	padding:10px; min-width:180px;
	opacity:0; visibility:hidden; transform:translateX(-6px);
	transition:opacity .3s var(--ar-ease), transform .3s var(--ar-ease), visibility .3s;
	box-shadow:0 20px 45px -20px rgba(0,0,0,.55);
	z-index:60;
}
html[dir="ltr"] .ar-dropdown-sub{ transform:translateX(6px); }

.ar-dropdown-item.has-sub:hover > .ar-dropdown-sub,
.ar-dropdown-item.has-sub:focus-within > .ar-dropdown-sub{
	opacity:1; visibility:visible; transform:translateX(0);
}
.ar-dropdown-sub a{
	display:block; padding:10px 14px; border-radius:8px; font-size:14px; font-weight:600;
	color:rgba(255,255,255,.82); transition:background .25s var(--ar-ease), color .25s var(--ar-ease);
	white-space:nowrap; text-decoration:none;
}
.ar-dropdown-sub a:hover{ background:rgba(255,255,255,.08); color:#fff; }


.ar-header-actions{ display:flex; align-items:center; gap:14px; }
.ar-header-actions .ar-btn-primary{ padding:13px 26px; font-size:14px; }

.ar-burger{ display:none; width:24px; height:18px; position:relative; background:none; border:none; padding:0; cursor:pointer; }
.ar-burger span{ position:absolute; inset-inline:0; height:2px; background:#fff; border-radius:2px; transition:.4s var(--ar-ease); }
.ar-burger span:nth-child(1){ top:0; }
.ar-burger span:nth-child(2){ top:8px; }
.ar-burger span:nth-child(3){ top:16px; }
.ar-burger.is-open span:nth-child(1){ top:8px; transform:rotate(45deg); }
.ar-burger.is-open span:nth-child(2){ opacity:0; }
.ar-burger.is-open span:nth-child(3){ top:8px; transform:rotate(-45deg); }

#ar-site-header.scrolled{
	background:rgba(3,36,15,.94); backdrop-filter:blur(14px);
	box-shadow:0 8px 30px -18px rgba(0,25,10,.45);
	padding-block:16px; border-color:rgba(255,255,255,.08);
}

/* الرئيسية شفافة فوق الهيرو، الصفحات الداخلية بلا هيرو غامق تحتاج خلفية دائمة لضمان تباين واضح */
#ar-site-header.is-inner-page{
	background:rgba(3,36,15,.94); backdrop-filter:blur(14px);
	box-shadow:0 8px 30px -18px rgba(0,25,10,.45);
}

.ar-compass{
	position:fixed; inset-inline-end:32px; bottom:32px; z-index:90;
	width:48px; height:48px; border-radius:50%;
	background:rgba(3,36,15,.85); backdrop-filter:blur(10px);
	display:flex; align-items:center; justify-content:center;
	opacity:0; transform:translateY(12px);
	transition:opacity .4s var(--ar-ease), transform .4s var(--ar-ease);
	pointer-events:none;
}
.ar-compass.show{ opacity:1; transform:translateY(0); }
.ar-compass img{ width:20px; height:auto; transition:transform .1s linear; }
@media (max-width:900px){ .ar-compass{ display:none; } }

@media (max-width:1024px){
	.ar-dropdown{
		position:static; opacity:1; visibility:visible; transform:none;
		background:transparent; border:none; box-shadow:none; backdrop-filter:none;
		padding:2px 0 2px 18px; margin-top:6px; min-width:0;
	}
	.ar-nav-item.has-dropdown .ar-nav-link .ar-caret{ display:none; }
	.ar-dropdown > a,
	.ar-dropdown .ar-dropdown-link{ padding:10px 0; font-size:15px; white-space:normal; }

	.ar-dropdown-item{ width:100%; }
	.ar-dropdown-item .ar-caret-sub{ display:none; }
	.ar-dropdown-sub{
		position:static; opacity:1; visibility:visible; transform:none;
		background:transparent; border:none; box-shadow:none; backdrop-filter:none;
		padding:2px 0 2px 16px; margin-top:2px; min-width:0;
	}
	.ar-dropdown-sub a{ padding:8px 0; font-size:14px; white-space:normal; }

	.ar-mainnav{ display:none; }
	.ar-mainnav.ar-mobile-open{
		display:flex; position:fixed; inset-inline:0; top:0; padding:100px 24px 40px;
		flex-direction:column; align-items:flex-start; gap:6px;
		background:rgba(5,20,10,.98); z-index:99; height:100vh; overflow-y:auto;
	}
	.ar-mainnav.ar-mobile-open .ar-nav-link{
		width:100%; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:18px;
	}
	.ar-mainnav.ar-mobile-open .ar-nav-item{ width:100%; }
	.ar-burger{ display:block; }
}