/* ==========================================================================
   Al Fajar — top bar, masthead, mega menu, mobile drawer
   Source: "ALFAJAR-HOMEPAGE copy.html" (light masthead variant).
   ========================================================================== */

/* ---------- top bar ---------- */
.topbar { background: var(--surface-2); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--accent-text); }
.topbar-l,
.topbar-r { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.topbar .sep { width: 1px; height: 12px; background: var(--border-strong); }

.lang { display: inline-flex; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.lang a { padding: .15rem .5rem; }
.lang a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }

@media (max-width: 820px) {
	.topbar-l .hide-sm { display: none; }
}

/* ---------- masthead ---------- */
.masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 90;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
}

/* The admin bar stops being fixed below 600px. */
@media (max-width: 600px) {
	.masthead { top: 0; }
}

.masthead > .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 82px; }

/* ---------- brand lockup (shared with the footer) ---------- */
.brand { display: flex; flex: none; align-items: center; gap: .85rem; padding-block: .4rem; text-decoration: none; }

.brand-mark {
	flex: none;
	width: 44px;
	height: 57px;
	background: url("../img/logo-dark.png") center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .brand-mark { background-image: url("../img/logo-light.png"); }
}
:root[data-theme="dark"] .brand-mark { background-image: url("../img/logo-light.png"); }

.brand .custom-logo { display: block; width: auto; max-height: 57px; }

.brand-type { display: flex; flex-direction: column; line-height: var(--lh-none); }
.brand-type strong {
	color: var(--text);
	font-family: var(--display);
	font-size: 1.18rem;
	font-weight: var(--fw-extrabold);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.brand-type span {
	margin-top: .32rem;
	color: var(--accent-text);
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: var(--ls-brand);
	text-transform: uppercase;
}

/* ---------- primary nav ---------- */
.nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: auto; }
.nav > li { position: relative; }

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .7rem .78rem;
	border-radius: var(--r-sm);
	color: var(--text-mid);
	font-size: .925rem;
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: color .16s, background-color .16s;
}

.nav-link:hover,
.nav > li:hover > .nav-link,
.nav > li:focus-within > .nav-link,
.nav-link[aria-current="page"] { color: var(--accent-text); background: var(--surface-2); }

/* Physical borders on purpose: the rotated box draws a down-chevron in both directions. */
.nav-link .chev {
	width: 9px;
	height: 9px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	opacity: .6;
	transform: rotate(45deg) translateY(-2px);
}

/* ---------- mega menu ---------- */
.mega {
	position: absolute;
	top: calc(100% + 1px);
	inset-inline-start: 0;
	z-index: 95;
	min-width: min(640px, 88vw);
	padding: 1.5rem;
	border: 1px solid var(--border);
	border-top: 2px solid var(--accent);
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .18s, transform .18s, visibility .18s;
}

.nav > li:hover > .mega,
.nav > li:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }

.mega-end { inset-inline-start: auto; inset-inline-end: 0; }
.mega-narrow { min-width: min(420px, 88vw); }

.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }

.mega h3 {
	margin-bottom: .8rem;
	color: var(--accent-text);
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps-wide);
	text-transform: uppercase;
}

.mega ul { display: flex; flex-direction: column; gap: .1rem; }

.mega a:not(.btn) {
	display: block;
	margin-inline: -.55rem;
	padding: .42rem .55rem;
	border-radius: var(--r-sm);
	color: var(--text);
	font-size: .92rem;
	text-decoration: none;
}

.mega a:not(.btn) small { display: block; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
.mega a:not(.btn):hover,
.mega a[aria-current="page"] { background: var(--accent-subtle); color: var(--text); }

.mega-feature {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .95rem 1.1rem;
	border: 1px solid rgba(206, 164, 73, .28);
	border-radius: var(--r);
	background: var(--accent-subtle);
}

.mega-feature div { min-width: 0; }
.mega-feature strong { display: block; color: var(--text); font-size: .95rem; }
.mega-feature p { color: var(--text-muted); font-size: .82rem; }

/* ---------- header actions ---------- */
.head-act { display: flex; flex: none; align-items: center; gap: .6rem; }
.masthead .btn-ghost { color: var(--text); border-color: var(--border-strong); }

.burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: transparent;
	cursor: pointer;
}

.burger span,
.burger span::before,
.burger span::after { display: block; width: 19px; height: 1.6px; background: var(--text); }
.burger span { position: relative; }
.burger span::before,
.burger span::after { content: ""; position: absolute; inset-inline-start: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

@media (max-width: 1080px) {
	.nav,
	.head-act .btn { display: none; }
	.burger { display: inline-flex; }
	.masthead > .wrap { justify-content: space-between; }
	.head-act { margin-inline-start: auto; }
}

/* ---------- mobile drawer ---------- */
.drawer { display: none; background: var(--surface); border-top: 1px solid var(--border); }
.drawer[data-open="true"] { display: block; }

@media (min-width: 1081px) {
	.drawer[data-open="true"] { display: none; }
}

.drawer .wrap { padding-block: 1.25rem 1.75rem; }
.drawer details { border-bottom: 1px solid var(--border); }

.drawer summary,
.drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .95rem .2rem;
	color: var(--text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.drawer-link { border-bottom: 1px solid var(--border); }

.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; color: var(--accent-text); font-family: var(--mono); }
.drawer details[open] summary::after { content: "\2013"; }

.drawer details ul { display: flex; flex-direction: column; gap: .2rem; padding: 0 .2rem 1rem; }
.drawer details a { display: block; padding: .4rem 0; color: var(--text-mid); font-size: .93rem; text-decoration: none; }
.drawer details a[aria-current="page"] { color: var(--accent-text); }

.drawer .drawer-cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
.drawer .btn-ghost { color: var(--text); border-color: var(--border-strong); }