/*
 * Hadara Accessibility — صفحة بيان إتاحة الوصول
 * كل الألوان والحدود تأتي من الإعدادات عبر متغيّرات --hadara-st-* المطبوعة inline،
 * فلا قيمة لونية ثابتة هنا إطلاقًا. ثلاثة تخطيطات تتشارك المكوّنات نفسها.
 *
 * ملاحظة تصادم: صفحات Elementor تحمل `.elementor a{box-shadow:none}` وأولويتها
 * تتغلّب على أي محدّد بصنف واحد على <a>، لذلك كل محدّدات الروابط هنا بصنفين.
 */

.hadara-st {
	box-sizing: border-box;
	max-width: 1080px;
	margin-inline: auto;
	padding: clamp(18px, 4vw, 42px);
	background: var(--hadara-st-bg);
	border: var(--hadara-st-bw) solid var(--hadara-st-border);
	border-radius: var(--hadara-st-radius);
	box-shadow: var(--hadara-st-shadow);
	color: var(--hadara-st-text);
	line-height: 1.9;
	text-align: start;
}

.hadara-st *,
.hadara-st *::before,
.hadara-st *::after { box-sizing: border-box; }

/* ── الترويسة ── */

.hadara-st__head {
	position: relative;
	margin-block-end: clamp(20px, 3vw, 34px);
	padding: clamp(16px, 3vw, 30px);
	padding-inline-start: clamp(60px, 8vw, 96px);
	background: var(--hadara-st-card);
	border: var(--hadara-st-bw) solid var(--hadara-st-border);
	border-radius: var(--hadara-st-radius);
	box-shadow: var(--hadara-st-shadow);
}

.hadara-st__head::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 6px;
	background: var(--hadara-st-accent);
	border-start-end-radius: var(--hadara-st-radius);
	border-end-end-radius: var(--hadara-st-radius);
}

.hadara-st__mark {
	position: absolute;
	inset-block-start: clamp(16px, 3vw, 30px);
	inset-inline-start: clamp(16px, 3vw, 26px);
	display: grid;
	place-items: center;
	width: clamp(38px, 5vw, 52px);
	height: clamp(38px, 5vw, 52px);
	background: var(--hadara-st-head);
	color: var(--hadara-st-card);
	border: 2px solid var(--hadara-st-accent);
	border-radius: 50%;
}

.hadara-st__mark svg { width: 62%; height: 62%; }

.hadara-st__title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: clamp(21px, 3.2vw, 31px) !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	color: var(--hadara-st-head) !important;
}

.hadara-st__lead {
	margin: 0 !important;
	font-size: clamp(14px, 1.6vw, 17px) !important;
	line-height: 1.85 !important;
	color: var(--hadara-st-text) !important;
	opacity: .88;
}

/* ── التخطيط ── */

.hadara-st__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); }

.hadara-st--split .hadara-st__layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }

@media (max-width: 860px) {
	.hadara-st--split .hadara-st__layout { grid-template-columns: minmax(0, 1fr); }
}

/* ── الفهرس الجانبي ── */

.hadara-st__toc {
	position: sticky;
	inset-block-start: 24px;
	padding: 16px 18px;
	background: var(--hadara-st-card);
	border: var(--hadara-st-bw) solid var(--hadara-st-border);
	border-radius: var(--hadara-st-radius);
	box-shadow: var(--hadara-st-shadow);
}

.hadara-st__toc-title {
	margin: 0 0 8px !important;
	padding-block-end: 8px;
	border-block-end: 2px solid var(--hadara-st-accent);
	font-size: 14px !important;
	font-weight: 800 !important;
	color: var(--hadara-st-head) !important;
}

.hadara-st__toc ol { margin: 0 !important; padding-inline-start: 18px !important; }
.hadara-st__toc li { margin-block-end: 6px; font-size: 14px; line-height: 1.6; }

.hadara-st .hadara-st__toc a {
	color: var(--hadara-st-head) !important;
	text-decoration: none !important;
	border-block-end: 1px solid transparent;
}

.hadara-st .hadara-st__toc a:hover,
.hadara-st .hadara-st__toc a:focus-visible { border-block-end-color: var(--hadara-st-accent); }

/* ── الكتل ── */

.hadara-st__blocks { display: grid; gap: clamp(12px, 2vw, 20px); }

.hadara-st__block {
	position: relative;
	padding: clamp(16px, 2.4vw, 26px);
	padding-inline-start: clamp(52px, 6vw, 72px);
	background: var(--hadara-st-card);
	border: var(--hadara-st-bw) solid var(--hadara-st-border);
	border-radius: var(--hadara-st-radius);
	box-shadow: var(--hadara-st-shadow);
	scroll-margin-block-start: 90px;
}

.hadara-st__num {
	position: absolute;
	inset-block-start: clamp(16px, 2.4vw, 26px);
	inset-inline-start: clamp(14px, 2vw, 22px);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--hadara-st-accent);
	color: var(--hadara-st-head);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

.hadara-st__block-title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: clamp(16px, 2vw, 21px) !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	color: var(--hadara-st-head) !important;
}

.hadara-st__block-body p {
	margin: 0 0 10px !important;
	font-size: clamp(14px, 1.5vw, 16px) !important;
	line-height: 1.95 !important;
	color: var(--hadara-st-text) !important;
}

.hadara-st__block-body p:last-child { margin-block-end: 0 !important; }
.hadara-st__block-body ul,
.hadara-st__block-body ol { margin: 0 0 10px !important; padding-inline-start: 22px !important; }

.hadara-st .hadara-st__block-body a {
	color: var(--hadara-st-head) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	font-weight: 700 !important;
}

/* التخطيط الثالث: خطّ زمني متصل يربط الأقسام. */
.hadara-st--stacked .hadara-st__blocks { position: relative; padding-inline-start: 18px; }

.hadara-st--stacked .hadara-st__blocks::before {
	content: "";
	position: absolute;
	inset-block: 14px;
	inset-inline-start: 0;
	width: 3px;
	background: var(--hadara-st-accent);
	border-radius: 3px;
}

.hadara-st--stacked .hadara-st__block { border-inline-start-width: 5px; }

/* التخطيط الأول: بطاقتان في الصف على الشاشات العريضة. */
@media (min-width: 900px) {
	.hadara-st--cards .hadara-st__blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── التذييل ── */

.hadara-st__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-block-start: clamp(18px, 2.5vw, 28px);
	padding: 14px clamp(14px, 2vw, 22px);
	background: var(--hadara-st-card);
	border: var(--hadara-st-bw) dashed var(--hadara-st-border);
	border-radius: var(--hadara-st-radius);
	font-size: 13px;
	line-height: 1.8;
	color: var(--hadara-st-text);
}

.hadara-st__date { font-weight: 700; color: var(--hadara-st-head); }

.hadara-st :focus-visible {
	outline: 3px solid var(--hadara-st-accent);
	outline-offset: 3px;
}