/* ==========================================================================
   طبقة التصميم الشاملة — موقع المرجع الديني الشيخ صالح الطائي
   تُحمَّل بعد style.css وتعتمد على متغيّراته.
   كل قسم مستقل — احذف أي قسم لا تريده دون أن يتأثر الباقي.
   ========================================================================== */

/* ==========================================================================
   1) لمسات عامة
   ========================================================================== */
::selection {
	background: var(--mar-gold);
	color: var(--mar-navy-900);
}

html {
	scroll-behavior: smooth;
	scrollbar-color: var(--mar-navy-500) var(--mar-cream);
}

body {
	background: var(--mar-cream);
}

/* شريط تمرير أنيق (متصفحات WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--mar-cream); }
::-webkit-scrollbar-thumb {
	background: #C3CDD9;
	border-radius: 99px;
	border: 3px solid var(--mar-cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--mar-navy-500); }

/* ==========================================================================
   2) قراءة المقال — أهم صفحة بالموقع

   مهم: الموقع مبني بـ Elementor، فالمحتوى لا يخرج داخل ‎.entry-content‎
   بل داخل ‎.elementor-widget-theme-post-content‎. نستهدف الاثنين معاً
   بـ ‎:is()‎ حتى تعمل القواعد سواء كانت الصفحة من Elementor أو من القالب.
   ========================================================================== */
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) {
	font-size: 17.5px;
	line-height: 2.05;
	color: #26303C;
}

/* عرض مريح للقراءة: السطر الطويل يتعب العين */
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) > * {
	max-width: 72ch;
	margin-inline: auto;
}

/* الصور والجداول تأخذ العرض الكامل */
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) > :is(figure, table, .wp-block-image, .wp-block-table, .wp-block-file) {
	max-width: 100%;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) p {
	margin: 0 0 1.15em;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) :is(h2, h3, h4) {
	margin: 1.9em 0 .7em;
	color: var(--mar-navy-900);
	scroll-margin-top: 90px;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) h2 { font-size: 1.5em; }
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) h3 { font-size: 1.28em; }
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) h4 { font-size: 1.12em; }

/* خط ذهبي صغير تحت عناوين المستوى الثاني */
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: .45em;
	background: var(--mar-gold);
	border-radius: 2px;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) :is(ul, ol) {
	padding-inline-start: 1.5em;
	margin: 0 0 1.15em;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) li { margin-bottom: .4em; }
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) ul li::marker { color: var(--mar-gold); }
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) ol li::marker { color: var(--mar-navy-500); font-weight: 700; }

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) img {
	border-radius: var(--mar-radius);
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) figcaption {
	font-size: 14px;
	color: var(--mar-text-mut);
	text-align: center;
	margin-top: .6em;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--mar-border), transparent);
	margin: 2.4em 0;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) blockquote {
	border-inline-start: 4px solid var(--mar-gold);
	background: var(--mar-cream);
	margin: 1.6em 0;
	padding: 1em 1.4em;
	border-radius: var(--mar-radius);
	color: var(--mar-navy-900);
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95em;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) :is(th, td) {
	border: 1px solid var(--mar-border);
	padding: .6em .8em;
}

:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) th {
	background: var(--mar-cream);
	font-family: var(--mar-font-head);
}

/* آيات قرآنية داخل المقال */
:is(.entry-content, .elementor-widget-theme-post-content .elementor-widget-container) :is(.quran, .aya) {
	font-family: var(--mar-font-quran);
	font-size: 1.3em;
	line-height: 2.15;
	color: var(--mar-navy-900);
	background: var(--mar-cream);
	border-radius: var(--mar-radius);
	padding: .7em 1.1em;
	display: inline-block;
}

/* ==========================================================================
   3) عنوان المقال وبياناته
   ========================================================================== */
.single .entry-title,
.elementor-widget-theme-post-title h1 {
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.5;
	color: var(--mar-navy-900);
}

.post-meta,
.entry-meta,
.elementor-post-info {
	font-size: 14px;
	color: var(--mar-text-mut);
}

.elementor-post-info__item + .elementor-post-info__item::before {
	color: var(--mar-border);
}

/* ==========================================================================
   4) بطاقات الأرشيف العامة (خارج كروت PDF)
   ========================================================================== */
.elementor-post,
.elementor-posts .elementor-post__card {
	background: var(--mar-paper);
	border: 1px solid var(--mar-border);
	border-radius: var(--mar-radius-lg);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .2s ease, border-color .25s ease;
}

.elementor-post:hover,
.elementor-posts .elementor-post__card:hover {
	box-shadow: var(--mar-shadow-lg);
	transform: translateY(-3px);
	border-color: var(--mar-navy-500);
}

.elementor-post__title,
.elementor-post__title a {
	font-family: var(--mar-font-head);
	line-height: 1.55;
}

.elementor-post__excerpt p {
	color: var(--mar-text-mut);
	font-size: 15px;
	line-height: 1.85;
}

.elementor-post__read-more {
	font-family: var(--mar-font-head);
	font-weight: 600;
}

.elementor-post__meta-data {
	font-size: 13.5px;
	color: var(--mar-text-mut);
}

/* ==========================================================================
   5) القائمة الجانبية / الودجتات
   الشكل القديم: مربّعات رمادية مسطّحة. الجديد: بطاقة نظيفة.
   ========================================================================== */
.widget,
.elementor-widget-sidebar .widget {
	background: var(--mar-paper);
	border: 1px solid var(--mar-border);
	border-radius: var(--mar-radius-lg);
	padding: 20px 22px;
	margin-bottom: 20px;
	box-shadow: var(--mar-shadow);
}

.widget-title,
.widget h2,
.widget h3 {
	font-family: var(--mar-font-head);
	font-size: 17px;
	color: var(--mar-navy-900);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mar-cream);
	position: relative;
}

.widget-title::after,
.widget h2::after,
.widget h3::after {
	content: "";
	position: absolute;
	bottom: -2px;
	inset-inline-start: 0;
	width: 46px;
	height: 2px;
	background: var(--mar-gold);
}

.widget ul { list-style: none; margin: 0; padding: 0; }

.widget ul li {
	border-bottom: 1px solid var(--mar-cream);
}

.widget ul li:last-child { border-bottom: 0; }

.widget ul li a {
	display: block;
	padding: 10px 0;
	color: var(--mar-navy-700);
	font-size: 15px;
	transition: color .2s ease, padding-inline-start .2s ease;
}

.widget ul li a:hover {
	color: var(--mar-navy-500);
	padding-inline-start: 6px;
}

.widget ul li a::before {
	content: "‹";
	color: var(--mar-gold);
	margin-inline-end: 8px;
	font-weight: 700;
}

/* عدّاد التصنيفات */
.widget_categories li { display: flex; justify-content: space-between; align-items: center; }

/* ==========================================================================
   6) أزرار Elementor — توحيدها مع هوية الموقع
   ========================================================================== */
.elementor-button {
	font-family: var(--mar-font-head);
	border-radius: var(--mar-radius);
	transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease;
}

.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--mar-shadow-lg);
}

/* ==========================================================================
   7) أزرار المشاركة الاجتماعية — تهدئة الألوان الصارخة
   ========================================================================== */
.elementor-share-btn,
.elementor-grid-item .elementor-share-btn {
	border-radius: var(--mar-radius);
	transition: transform .18s ease, opacity .2s ease;
}

.elementor-share-btn:hover { transform: translateY(-2px); opacity: .92; }

/* ==========================================================================
   8) نموذج البحث
   ========================================================================== */
.search-form,
.elementor-search-form__container {
	border-radius: 99px;
	overflow: hidden;
	border: 1px solid var(--mar-border);
	background: var(--mar-paper);
}

.search-field,
.elementor-search-form__input {
	font-family: var(--mar-font-body);
	font-size: 15px;
	padding: 12px 18px;
	border: 0;
	background: transparent;
	color: var(--mar-text);
}

.search-field::placeholder,
.elementor-search-form__input::placeholder { color: #93A0AF; }

.search-submit,
.elementor-search-form__submit {
	background: var(--mar-navy-700);
	color: #fff;
	border: 0;
	padding: 0 22px;
	font-family: var(--mar-font-head);
	cursor: pointer;
	transition: background-color .2s ease;
}

.search-submit:hover,
.elementor-search-form__submit:hover { background: var(--mar-navy-900); }

/* ==========================================================================
   9) ترقيم الصفحات العام
   ========================================================================== */
.pagination,
.elementor-pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 30px 0;
}

.pagination .page-numbers,
.elementor-pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	border-radius: var(--mar-radius);
	border: 1px solid var(--mar-border);
	background: var(--mar-paper);
	color: var(--mar-navy-700);
	font-size: 15px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pagination .page-numbers:hover,
.elementor-pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--mar-cream);
	border-color: var(--mar-navy-500);
}

.pagination .page-numbers.current,
.elementor-pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--mar-navy-700);
	border-color: var(--mar-navy-700);
	color: #fff;
}

/* ==========================================================================
   10) التنقّل بين المقالات (السابق / التالي)
   ========================================================================== */
.post-navigation,
.elementor-post-navigation {
	border-top: 1px solid var(--mar-border);
	border-bottom: 1px solid var(--mar-border);
	padding: 18px 0;
	margin: 34px 0;
}

.elementor-post-navigation__link a {
	font-family: var(--mar-font-head);
	color: var(--mar-navy-700);
}

.elementor-post-navigation__link a:hover { color: var(--mar-gold); }

.elementor-post-navigation__prev--label,
.elementor-post-navigation__next--label {
	color: var(--mar-text-mut);
	font-size: 13px;
}

/* ==========================================================================
   11) التعليقات
   ========================================================================== */
.comments-area {
	background: var(--mar-paper);
	border: 1px solid var(--mar-border);
	border-radius: var(--mar-radius-lg);
	padding: 26px;
	margin-top: 34px;
}

.comment-list { list-style: none; padding: 0; }

.comment-body {
	border-bottom: 1px solid var(--mar-cream);
	padding: 16px 0;
}

.comment-author .fn { font-family: var(--mar-font-head); color: var(--mar-navy-900); }

.comment-metadata { font-size: 13px; color: var(--mar-text-mut); }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--mar-border);
	border-radius: var(--mar-radius);
	padding: 11px 14px;
	font-family: var(--mar-font-body);
	font-size: 15px;
	background: var(--mar-cream);
	transition: border-color .2s ease, background-color .2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--mar-navy-500);
	background: var(--mar-paper);
	outline: none;
}

.comment-form .submit {
	background: var(--mar-navy-700);
	color: #fff;
	border: 0;
	border-radius: var(--mar-radius);
	padding: 12px 30px;
	font-family: var(--mar-font-head);
	font-size: 16px;
	cursor: pointer;
	transition: background-color .2s ease, transform .18s ease;
}

.comment-form .submit:hover { background: var(--mar-navy-900); transform: translateY(-2px); }

/* ==========================================================================
   12) الفوتر
   ========================================================================== */
.elementor-location-footer,
.site-footer {
	background: var(--mar-navy-900);
	color: #B9CBE2;
}

.elementor-location-footer a,
.site-footer a { color: #B9CBE2; transition: color .2s ease; }

.elementor-location-footer a:hover,
.site-footer a:hover { color: var(--mar-gold-soft); }

.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.site-footer h3,
.site-footer h4 { color: #fff; }

/* ==========================================================================
   13) صفحة 404 والبحث الفارغ
   ========================================================================== */
.error404 .entry-content,
.search-no-results .entry-content {
	text-align: center;
	padding: 50px 20px;
}

.error404 .entry-title,
.search-no-results .page-title {
	font-size: clamp(26px, 4vw, 40px);
	color: var(--mar-navy-900);
}

/* ==========================================================================
   14) زر العودة للأعلى
   ========================================================================== */
.mar-back-to-top {
	position: fixed;
	inset-inline-end: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--mar-navy-700);
	color: #fff;
	border: 0;
	display: grid;
	place-items: center;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
	box-shadow: var(--mar-shadow-lg);
	z-index: 90;
}

.mar-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.mar-back-to-top:hover { background: var(--mar-navy-900); }

/* ==========================================================================
   15) تحسينات الجوال
   ========================================================================== */
@media (max-width: 767px) {
	.entry-content,
	.elementor-widget-theme-post-content .elementor-widget-container {
		font-size: 16.5px;
		line-height: 1.95;
	}

	.widget { padding: 16px 18px; }

	.comments-area { padding: 18px; }

	/* أهداف لمس مريحة */
	.widget ul li a { padding: 12px 0; }
}