/**
 * عناصر «انضم للدليل» اللي بتظهر في الموقع كله: الزرار العائم
 * وعنصر القائمة المميّز.
 *
 * ملف صغير ومكتفٍ بذاته عشان لما يشتغل على الموقع كله مانحمّلش
 * ستايل الدليل بالكامل (30 كيلو) على كل مقال.
 */

/* ------------------------------------------------------------------ *
 * عنصر القائمة
 * ------------------------------------------------------------------ */

.td-menu-item > a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--brand-color, #0abfae);
	color: #fff !important;
	border-radius: 999px;
	padding: 7px 16px !important;
	line-height: 1.5 !important;
	font-weight: 700;
	transition: background 0.16s ease;
}

.td-menu-item > a:hover,
.td-menu-item > a:focus {
	background: var(--dark-brand-color, #008d7c);
	color: #fff !important;
}

/* داخل القائمة الرئيسية بتاعة Jannah العناصر بتاخد ارتفاع كامل،
   فبنوسّط الزرار رأسيًا بدل ما يتمدّد على طول الشريط. */
#main-nav .td-menu-item,
.td-menu-item {
	display: flex;
	align-items: center;
}

#main-nav .td-menu-item > a::after,
.td-menu-item > a::after { content: none !important; }

.td-menu-item svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* في القوائم الجانبية والموبايل بيرجع عنصر عادي بعرض كامل */
.mobile-menu .td-menu-item > a,
#mobile-menu .td-menu-item > a,
.side-aside .td-menu-item > a {
	display: flex !important;
	justify-content: center;
	margin: 8px 14px;
}

/* ------------------------------------------------------------------ *
 * ودجت الانضمام
 * ------------------------------------------------------------------ */

.td-joinw {
	background: linear-gradient(155deg, var(--brand-color, #0abfae) 0%, var(--dark-brand-color, #008d7c) 100%);
	color: #fff;
	border-radius: 14px;
	padding: 22px 20px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(44, 47, 52, 0.06), 0 12px 28px rgba(10, 191, 174, 0.18);
}

.td-joinw__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.td-joinw__icon svg { width: 24px; height: 24px; }

.td-joinw__heading {
	display: block;
	margin-bottom: 7px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
}

.td-joinw__text {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

.td-joinw__btn {
	display: block;
	padding: 12px 18px;
	border-radius: 8px;
	background: #fff;
	color: var(--dark-brand-color, #008d7c) !important;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none !important;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.td-joinw__btn:hover,
.td-joinw__btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* الودجت بيرسم بطاقته بنفسه، فبنشيل أي إطار أو خلفية من القالب */
.td-joinw--card { margin-top: 20px; }

.td-joinw-widget {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------ *
 * الزرار العائم
 * ------------------------------------------------------------------ */

.td-float {
	position: fixed;
	inset-block-end: 22px;
	inset-inline-start: 22px;
	z-index: 9990;

	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100vw - 44px);
	padding: 12px 20px;
	border-radius: 999px;

	background: var(--brand-color, #0abfae);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(10, 191, 174, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);

	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.td-float:hover,
.td-float:focus {
	color: #fff;
	background: var(--dark-brand-color, #008d7c);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(10, 191, 174, 0.42), 0 3px 8px rgba(0, 0, 0, 0.14);
}

.td-float:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.td-float svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

.td-float span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* على الموبايل بيبقى أيقونة بس، عشان مايغطّيش المحتوى */
@media (max-width: 600px) {
	.td-float {
		inset-block-end: 16px;
		inset-inline-start: 16px;
		padding: 14px;
		gap: 0;
	}

	.td-float span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}

	.td-float svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.td-float { transition: none; }
	.td-float:hover,
	.td-float:focus { transform: none; }
}