/* ========== إعدادات عامة ========== */
*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 font-size: 16px;
}

body {
 margin: 0;
 padding: 0;
 direction: rtl;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", "Arial", sans-serif;
 background: linear-gradient(to bottom, #420000 0%, #000000 100%);
 background-attachment: fixed;
 background-color: #f5f5f5;
 color: #111;
}

/* روابط عامة */
a {
 color: #111;
 text-decoration: none;
}
a:hover {
 color: #c62828;
}

/* أزرار عامة */
button {
 font-family: inherit;
}

/* ========== الهيدر ========== */

/* شريط أعلى الهيدر */
.top-bar {
 background-color: #111;
 color: #fff;
 font-size: 0.8rem;
 padding: 6px 15px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.top-bar-left {
 opacity: 0.9;
}

.top-bar-right {
 display: flex;
 gap: 10px;
}

.social-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 26px;
 height: 26px;
 border-radius: 50%;
 background-color: #333;
 color: #fff;
 font-size: 0.7rem;
 transition: background-color 0.2s ease, transform 0.2s ease;
}
.social-icon:hover {
 background-color: #c62828;
 transform: translateY(-1px);
}

.top-bar-right .social-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 margin-left: 5px;
 color: #fff;
 font-size: 15px;
 text-decoration: none;
 transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
}

.top-bar-right .social-icon .icon-svg {
 width: 18px;
 height: 18px;
}

/* ألوان كل منصة */
.social-facebook { background: #1877F2; }
.social-x { background: #000000; }
.social-yt { background: #FF0000; }
.social-ig { 
 background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf, #4f5bd5);
}

/* هوفر */
.top-bar-right .social-icon:hover {
 transform: translateY(-1px);
 box-shadow: 0 2px 6px rgba(0,0,0,0.3);
 opacity: 0.9;
}

/* منتصف الهيدر */
.middle-header {
 background-color: #ffffff;
 padding: 20px 15px 15px;
 border-bottom: 1px solid #e0e0e0;
}

.site-title {
 display: flex;
 align-items: baseline;
 justify-content: flex-start;
 gap: 12px;
}

.site-name {
 font-size: 2rem;
 font-weight: 800;
 letter-spacing: 1px;
 color: #111;
}

.site-tagline {
 font-size: 0.95rem;
 color: #777;
}

/* شريط القائمة الرئيسية */
.nav-bar {
 background-color: #c62828; /* لون أحمر داكن للمجلة */
 color: #fff;
 position: relative;
 z-index: 50;
 box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.nav-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 15px;
 min-height: 48px;
}

/* جزء اليسار: الهوم + المنيو */
.nav-left {
 display: flex;
 align-items: center;
 gap: 20px;
}

/* زر الهوم */
.nav-home {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 4px 10px;
 border-radius: 3px;
 color: #fff;
 font-weight: 700;
 font-size: 0.9rem;
 background-color: rgba(0,0,0,0.15);
 transition: background-color 0.2s ease, transform 0.1s ease;
}
.nav-home .home-icon {
 font-size: 1rem;
}
.nav-home:hover {
 background-color: rgba(0,0,0,0.3);
 transform: translateY(-1px);
}

/* القائمة الرئيسية – ديسكتوب */
.main-menu {
 display: flex;
 align-items: center;
 gap: 15px;
 font-size: 0.9rem;
}
.main-menu a {
 color: #fff;
 font-weight: 500;
 position: relative;
 padding: 4px 0;
}
.main-menu a::after {
 content: "";
 position: absolute;
 right: 0;
 bottom: -3px;
 width: 0;
 height: 2px;
 background-color: #fff;
 transition: width 0.2s ease;
}
.main-menu a:hover::after {
 width: 100%;
}

/* جزء اليمين: بحث + هامبورغر */
.nav-right {
 display: flex;
 align-items: center;
 gap: 10px;
}

/* زر بحث (بدون نص – فقط أيقونة) */
.icon-btn {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 border: none;
 background-color: rgba(0,0,0,0.15);
 cursor: pointer;
 position: relative;
}
.icon-btn::before {
 content: "🔍";
 font-size: 0.95rem;
}
.icon-btn:hover {
 background-color: rgba(0,0,0,0.3);
}

/* زر الهامبورغر */
.hamburger {
 width: 32px;
 height: 32px;
 border-radius: 4px;
 border: none;
 background-color: rgba(0,0,0,0.15);
 cursor: pointer;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 4px;
 padding: 0 6px;
}
.hamburger span {
 display: block;
 height: 2px;
 width: 100%;
 background-color: #fff;
 border-radius: 1px;
}

/* شريط البحث المنسدل */
.search-bar {
 max-height: 0;
 overflow: hidden;
 background-color: #b71c1c;
 transition: max-height 0.25s ease;
}
.search-bar.open {
 max-height: 80px;
}
.search-bar form {
 display: flex;
 gap: 8px;
 padding: 8px 15px 12px;
}
.search-bar input[type="text"] {
 flex: 1;
 padding: 6px 8px;
 border-radius: 3px;
 border: none;
 font-size: 0.9rem;
}
.search-bar button {
 padding: 6px 12px;
 border-radius: 3px;
 border: none;
 background-color: #fff;
 color: #b71c1c;
 font-weight: 600;
 cursor: pointer;
}

/* Sticky عند السكروول */
.nav-bar.is-sticky {
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 animation: fadeInDown 0.25s ease;
}
@keyframes fadeInDown {
 from { transform: translateY(-100%); }
 to { transform: translateY(0); }
}

/* حتى لا يقفز المحتوى عند ثبات الهيدر – سنضيف padding-top في main عبر JS أو يدوي إذا لزم */

/* ========== قائمة الموبايل الجانبية ========== */
.mobile-sidebar {
 position: fixed;
 top: 0;
 bottom: 0;
 right: -260px; /* مخفية */
 width: 260px;
 background-color: #ffffff;
 box-shadow: -2px 0 6px rgba(0,0,0,0.2);
 z-index: 120;
 display: flex;
 flex-direction: column;
 transition: right 0.25s ease;
}
.mobile-sidebar.open {
 right: 0;
}

.sidebar-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 14px;
 border-bottom: 1px solid #eee;
 background-color: #c62828;
 color: #fff;
}
.sidebar-site-name {
 font-weight: 700;
}
.sidebar-close {
 border: none;
 background: transparent;
 color: #fff;
 font-size: 1.4rem;
 cursor: pointer;
}

.sidebar-menu {
 padding: 10px 14px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 font-size: 0.9rem;
}
.sidebar-menu a {
 padding: 5px 0;
 border-bottom: 1px solid #f0f0f0;
 color: #111;
}
.sidebar-menu a:last-child {
 border-bottom: none;
}

.sidebar-social {
 margin-top: auto;
 padding: 12px 14px;
 border-top: 1px solid #eee;
 display: flex;
 gap: 8px;
}

.sidebar-social .social-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 color: #fff;
 text-decoration: none;
 transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
}

.sidebar-social .icon-svg {
 width: 18px;
 height: 18px;
}

/* ألوان كل منصة */
.social-facebook { background: #1877F2; }
.social-x { background: #000000; }
.social-yt { background: #FF0000; }
.social-ig { 
 background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf, #4f5bd5);
}

.sidebar-social .social-icon:hover {
 transform: translateY(-1px);
 box-shadow: 0 2px 6px rgba(0,0,0,0.3);
 opacity: 0.9;
}

/* خلفية داكنة عند فتح القائمة */
.overlay {
 position: fixed;
 inset: 0;
 background-color: rgba(0,0,0,0.4);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease;
 z-index: 100;
}
.overlay.visible {
 opacity: 1;
 visibility: visible;
}

/* ========== المحتوى الرئيسي ========== */
.home-main {
 max-width: 1200px; /* أو القيمة التي تناسبك */
 margin: 20px auto 40px; /* تترك فراغ من الأطراف لتظهر الخلفية */
 background-color: #ffffff;
 padding: 15px 10px 25px;
 box-shadow: 0 4px 14px rgba(0,0,0,0.35);
 border-radius: 4px;
}

/* مساحات الإعلانات */
.ad-container {
 margin-bottom: 15px;
}
.ad-placeholder {
 background-color: #e0e0e0;
 color: #555;
 font-size: 0.85rem;
 text-align: center;
 padding: 12px;
 border-radius: 3px;
 border: 1px dashed #bbb;
}

/* إعلان أعلى Sticky (يمكن لاحقًا جعله position:sticky) */
.ad-top-sticky {
 position: sticky;
 top: 60px; /* أسفل الهيدر */
 z-index: 10;
}

/* شبكة المقالات 3×3 */
.posts-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 15px;
}

/* كرت المقال */
.post-card {
 background-color: #fff;
 border-radius: 4px;
 overflow: hidden;
 box-shadow: 0 1px 3px rgba(0,0,0,0.06);
 display: flex;
 flex-direction: column;
 height: 100%;
}

.post-card .post-thumb {
 display: block;
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9; /* غيّرها لـ 1 / 1 لو تريد صور مربعة */
 overflow: hidden;
 background: #eee;
}

.post-thumb img {
 width: 100%;
 display: block;
}
.thumb-placeholder {
 background-color: #ddd;
 color: #666;
 text-align: center;
 padding: 35px 10px;
 font-size: 0.85rem;
}

/* أعلى بيانات المقال (تصنيف + تاريخ) */
.post-meta-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 8px 10px 0;
 font-size: 0.75rem;
 color: #757575;
}

.post-category {
 background-color: #c62828;
 color: #fff;
 padding: 2px 6px;
 border-radius: 2px;
 font-size: 0.7rem;
}

.post-title {
 font-size: 0.95rem;
 line-height: 1.4;
 padding: 6px 10px 10px;
 margin: 0;
}
.post-title a {
 color: #111;
}
.post-title a:hover {
 color: #c62828;
}

/* إعلان أسفل الشبكة */
.ad-bottom-auto {
 margin-top: 20px;
}

/* ========== الفوتر ========== */
.site-footer {
 background-color: #111;
 color: #eee;
 padding-top: 15px;
 margin-top: 40px;
 position: relative;
}

/* أعلى الفوتر – روابط أقسام */
.footer-top {
 border-bottom: 1px solid #333;
 padding: 10px 15px;
}
.footer-links {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 15px;
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 font-size: 0.85rem;
}
.footer-links a {
 color: #eee;
}
.footer-links a:hover {
 color: #c62828;
}

/* أسفل الفوتر – حقوق + صفحات قانونية */
.footer-bottom {
 max-width: 1200px;
 margin: 0 auto;
 padding: 10px 15px 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 0.8rem;
}
.footer-left a {
 color: #aaa;
}
.footer-left a:hover {
 color: #fff;
}

/* ========== الأيقونات العائمة ========== */
.floating-icon {
 position: fixed;
 right: 15px;
 width: 46px;
 height: 46px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 text-decoration: none;
 cursor: pointer;
 box-shadow: 0 2px 8px rgba(0,0,0,0.25);
 z-index: 999;
 border: none;
}

/* خصائص الماسنجر والواتساب والصعود للأعلى */
/* ماسنجر – يمين */
.floating-icon.messenger {
 bottom: 140px;
 background: transparent; /* الخلفية من الـ SVG */
 padding: 0;
}

.floating-icon .messenger-svg {
 width: 38px;
 height: 38px;
 display: block;
}

/* واتساب – وسط */
.floating-icon.whatsapp {
 bottom: 80px;
 background: transparent; /* الخلفية من الـ SVG */
 padding: 0;
}

.floating-icon .whatsapp-svg {
 width: 38px;
 height: 38px;
 display: block;
}

/* سهم الصعود – يسار */
.floating-icon.scroll-top {
 left: 20px;
 bottom: 20px;
 background-color: #c62828;
 color: #fff;
 font-size: 1.1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease;
}
.floating-icon.scroll-top.visible {
 opacity: 1;
 visibility: visible;
}

/* ========== استجابات (Responsive) ========== */

/* تابلت (عرض أقل من 992px): شبكة 2×N */
@media (max-width: 991px) {
 .posts-grid {
 grid-template-columns: repeat(2, 1fr);
 }

 .site-title {
 flex-direction: column;
 align-items: flex-start;
 gap: 4px;
 }

 .footer-bottom {
 flex-direction: column;
 gap: 6px;
 text-align: center;
 }

 .nav-inner {
 padding: 0 10px;
 }
}

/* موبايل (أقل من 768px): شبكة 1×N + إخفاء منيو الديسكتوب */
@media (max-width: 767px) {
 .main-menu {
 display: none; /* المنيو الأساسية – نخفيها على الموبايل */
 }

 .nav-inner {
 min-height: 44px;
 }

 .site-name {
 font-size: 1.6rem;
 }

 .home-main {
 padding: 0 10px;
 }

 .posts-grid {
 grid-template-columns: 1fr;
 }

 .top-bar {
 font-size: 0.75rem;
 padding: 4px 10px;
 }

 .footer-links {
 justify-content: center;
 text-align: center;
 }
}

/* شاشات كبيرة جداً */
@media (min-width: 1200px) {
 .home-main {
 max-width: 1200px;
 }
}

/* غلاف للصورة لضبط النسبة والقص */
.post-thumbnail-wrapper {
 position: relative;
 width: 100%;
 overflow: hidden;
 border-radius: 6px; /* اختياري */
}

/* نسبة العرض/الارتفاع للصورة – عدّلها حسب ما يعجبك */
.post-thumbnail-wrapper::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 – يمكن تجربة 66.66% أو 75% */
}

.post-thumbnail-wrapper img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover; /* قص لطيف يحافظ على جمالية الصورة */
}

/* لضبط العنصر البديل عند عدم وجود صورة */
.post-thumbnail-wrapper .thumb-placeholder {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}