/*
Theme Name: Ahdal Final
Description: التصميم المعتمد لموقع روض الشعر والنثر — قالب مستقل بالكامل، صفر ارتباط بأي قالب قديم
Version: 3.0
*/

:root{
  --wine:         #5b1626;
  --wine-deep:    #390d18;
  --gold:         #c6a15b;
  --gold-soft:    #e8d19f;
  --gold-deep:    #9c7a3c;
  --parchment:    #f8f1de;
  --parchment-2:  #f0e6c9;
  --paper:        #fffdf6;
  --ink:          #241a12;
  --ink-soft:     #6e5f4a;
  --line:         #e2d3ab;

  --radius-lg:  22px;
  --radius-md:  14px;
  --shadow-soft: 0 18px 46px -22px rgba(36,26,18,0.35);
  --shadow-gold: 0 0 0 1px var(--gold-soft), 0 18px 40px -20px rgba(198,161,91,0.45);
  --wrap: 1180px;
  --measure: 760px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(198,161,91,0.10), transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(91,22,38,0.06), transparent 50%),
    var(--parchment);
  color: var(--ink);
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 18px;
  line-height: 2;
}

h1, h2, h3, h4{ font-family: 'Aref Ruqaa', serif; color: var(--wine); font-weight: 700; margin: 0 0 .5em; line-height: 1.4; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; display: block; }

.skip-link{ position:absolute; right:-999px; top:0; background:var(--wine); color:#fff; padding:10px 16px; z-index:999; }
.skip-link:focus{ right:0; }

/* ==================== الهيدر ==================== */
.masthead{
  position: relative;
  background: linear-gradient(180deg, var(--wine) 0%, var(--wine-deep) 100%);
  color: #fff;
  padding: 54px 24px 34px;
  text-align: center;
}
.masthead::before{
  content:""; position:absolute; inset:12px; border:1px solid rgba(232,209,159,0.3); border-radius:22px; pointer-events:none;
}
.site-name{ font-size: clamp(30px, 6vw, 54px); color:#fff; margin-bottom: 10px; }
p.site-name{ margin: 0 0 10px; }
.site-name a{ color: #fff; }
.site-tagline{ color: rgba(255,255,255,.82); font-size: 15px; max-width: 520px; margin: 0 auto 6px; }
.site-author{ color: var(--gold-soft); font-size: 14px; font-family:'Aref Ruqaa', serif; }

.header-tools{
  max-width: var(--wrap); margin: 22px auto 0; padding: 0 24px;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.15); padding-top:16px;
}
.header-tools a{ color: rgba(255,255,255,.85); font-size: 14.5px; }
.header-tools a:hover{ color: var(--gold-soft); }
.site-search-form{ display:flex; }
.site-search-form input{
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius: 20px 0 0 20px; padding: 7px 14px; font-family: inherit; width: 160px;
}
.site-search-form input::placeholder{ color: rgba(255,255,255,.6); }
.site-search-form button{
  background: var(--gold); border:none; color: var(--wine-deep); border-radius:0 20px 20px 0; padding:7px 12px; cursor:pointer;
}

.crumb-nav{ font-size:14px; color: rgba(255,255,255,.75); display:flex; justify-content:center; gap:8px; margin-top:14px; }
.crumb-nav a{ color: var(--gold-soft); }

/* ==================== شبكة الأقسام (الرئيسية) ==================== */
.sections-wrap{ max-width: var(--wrap); margin: 24px auto 0; padding: 0 24px 80px; position:relative; z-index:2; }
.sections-intro{ text-align:center; max-width: var(--measure); margin: 0 auto 44px; color: var(--ink-soft); font-size:16px; }

.sections-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.section-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 24px 26px; text-align:center; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.section-card:hover{ transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.section-card h2{ font-size: 22px; margin-bottom: 8px; }
.section-card p{ color: var(--ink-soft); font-size: 13.5px; margin:0; }
.section-card.alt{ background: linear-gradient(180deg, var(--paper), var(--parchment-2)); }

/* ==================== صفحة التصنيف (قائمة المنشورات) ==================== */
.page-body{ max-width: var(--wrap); margin:0 auto; padding: 46px 24px 80px; }
.page-title{ text-align:center; font-size: 30px; margin-bottom: 36px; }

.post-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-card{
  display:block; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 22px 20px; text-align:center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover{ transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.post-card h2{ font-size: 19px; margin: 0; }

.empty-note{ text-align:center; color: var(--ink-soft); padding: 30px 10px; }
.pagination-row{ text-align:center; margin-top:34px; display:flex; justify-content:center; gap:12px; }
.pagination-row a, .pagination-row span{ padding:8px 16px; border:1px solid var(--line); border-radius:20px; font-size:13.5px; }

/* ==================== عرض المقال/القصيدة (single) ==================== */
.reading-view{
  max-width: var(--measure); margin: 0 auto; background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: 44px clamp(20px,6vw,58px); box-shadow: var(--shadow-soft);
}
.post-cat-label{ text-align:center; color: var(--gold-deep); font-size:13px; margin-bottom:10px; letter-spacing:1px; }
.post-title{ text-align:center; font-size: clamp(26px, 4vw, 34px); margin-bottom: 30px; }
.post-content{ font-size: 20px; line-height: 2.3; text-align:center; }
.post-content p{ margin: 0; line-height: 2.2; }

/* تنسيق الصدر والعجز — تلقائي من فلتر functions.php */
.hemistich{ display: inline; }
.hemistich-sep{ color: var(--gold-deep); font-weight: 700; margin: 0 10px; }

/* ==================== الصفحات الثابتة ==================== */
.static-page{
  max-width: var(--measure); margin:0 auto; background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: 40px clamp(20px,6vw,54px); box-shadow: var(--shadow-soft);
}
.static-page .post-title{ text-align:center; }
.static-page .post-content{ text-align: right; font-size:18px; }

.back-row{ text-align:center; margin-top: 44px; }
.back-link{
  display:inline-block; border:1.5px solid var(--wine); color: var(--wine); padding:11px 28px;
  border-radius:30px; font-size:14px; font-weight:700; transition: background .2s ease, color .2s ease;
}
.back-link:hover{ background: var(--wine); color:#fff; }

/* ==================== الفوتر ==================== */
.site-footer{ background: var(--wine-deep); color: rgba(255,255,255,.72); text-align:center; padding: 38px 20px; }
.site-footer .foot-name{ font-family:'Aref Ruqaa', serif; color:#fff; font-size:21px; margin-bottom:8px; }
.site-footer .foot-url{ font-size:12px; letter-spacing:2px; opacity:.7; }

/* ==================== التجاوب ==================== */
@media (max-width: 980px){
  .sections-grid, .post-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  body{ font-size:16.5px; }
  .masthead{ padding: 42px 18px 26px; }
  .header-tools{ gap: 10px; }
  .sections-grid, .post-grid{ grid-template-columns: 1fr; }
  .reading-view, .static-page{ padding: 26px 18px; }
  .post-content{ font-size: 18px; }

  /* القاعدة القديمة هنا أُزيلت لتجنب التعارض مع القاعدة الأحدث في الأسفل */
}

.ahdal-byline{ display:block; text-align:center; margin-bottom:10px; }
.poem-author{ display:block; text-align:center; margin-bottom:14px; }
.topic-title{ text-align:center; margin: 40px 0 18px; }
.topic-grid{ display:grid; grid-template-columns: repeat(3, minmax(200px,1fr)); gap: 18px; margin-bottom: 10px; }
.section-card h2, .post-card h2{ overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 600px){ .topic-grid{ grid-template-columns: 1fr; } }
.site-search-form{ display:flex; align-items:center; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius: 20px; overflow:hidden; }
.site-search-form input{ background: transparent; border:none; color:#fff; padding: 7px 14px; font-family: inherit; width: 160px; }
.site-search-form input::placeholder{ color: rgba(255,255,255,.6); }
.site-search-form button{ background: var(--gold); border:none; color: var(--wine-deep); padding:7px 14px; cursor:pointer; }
@media (max-width: 768px) { .poem-line { margin-bottom: 25px !important; } }

/* === تقليص المسافات للهيدر والفوتر === */

/* تقليص الهيدر */
.masthead {
    padding-top: 25px !important; 
    padding-bottom: 15px !important; 
}
.site-name {
    margin-bottom: 5px !important;
}
p.site-name {
    margin: 0 0 5px !important;
}
.site-tagline {
    margin-bottom: 2px !important;
}
.header-tools {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* تقليص الفوتر */
.site-footer {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
.site-footer .foot-name {
    margin-bottom: 2px !important;
}

/* === توحيد المسافات بين الرئيسية والصفحات الفرعية === */
h1.site-name, p.site-name, div.site-name, .site-name {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
}

h2.site-tagline, p.site-tagline, div.site-tagline, .site-tagline {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}
h1.site-name, .site-name { font-weight: 400 !important; }
@media (max-width: 768px) { .header-tools a { margin: 0 10px !important; } }

/* === أزرار متجاوبة ديناميكياً مع حجم الخط (بوحدة em) === */
@media (max-width: 768px) {
    /* الفراغ بين الأزرار يعتمد على حجم الخط */
    .sections-grid, .post-grid {
        gap: 0.8em !important;
    }
    
    /* الفراغ الداخلي للزر الرئيسي (0.8em من الأعلى والأسفل، و 1em من اليمين واليسار) */
    .section-card {
        padding: 0.8em 1em !important;
    }
    
    /* الفراغ الداخلي للزر الفرعي (أنحف قليلاً) */
    .post-card {
        padding: 0.7em 0.9em !important;
    }
}

/* === زيادة تنحيف الأزرار في الجوال إلى أقصى حد أنيق === */
@media (max-width: 768px) {
    /* تقليل الفراغ الخارجي بين الأزرار أكثر */
    .sections-grid, .post-grid {
        gap: 0.6em !important;
    }
    
    /* عصر الفراغ الداخلي للزر الرئيسي (0.4em فقط من الأعلى والأسفل) */
    .section-card {
        padding: 0.4em 0.8em !important;
    }
    
    /* عصر الفراغ الداخلي للزر الفرعي */
    .post-card {
        padding: 0.3em 0.7em !important;
    }
    
    /* إلغاء المسافات الافتراضية للنص داخل الزر لضمان عدم تمدده */
    .section-card h2, .post-card h2 {
        margin-top: 0.1em !important;
        margin-bottom: 0.1em !important;
    }
}

/* === ضغط الأزرار على حافة النص تماماً في الجوال === */
@media (max-width: 768px) {
    /* الفراغ بين الأزرار */
    .sections-grid, .post-grid {
        gap: 0.5em !important;
    }
    
    /* عصر الفراغ الداخلي للزر ليكون على الحافة */
    .section-card, .post-card {
        padding: 0.2em 0.5em !important;
        min-height: auto !important;
    }
    
    /* تصفير هوامش النص وتقليل المساحة المخفية فوق وتحت الحروف */
    .section-card h2, .post-card h2 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }
}

/* === توحيد الضغط للصفحات الفرعية والتصنيفات في الجوال === */
@media (max-width: 768px) {
    /* تقليص الفراغ بين الأزرار في الصفحات الفرعية */
    .topic-grid {
        gap: 0.5em !important;
    }
    
    /* عصر الزر الفرعي ليكون على الحافة */
    .topic-grid .post-card {
        padding: 0.2em 0.5em !important;
        min-height: auto !important;
    }
    
    /* تصفير هوامش النص داخل الزر الفرعي */
    .topic-grid h2, .topic-grid .post-card h2 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }
    
    /* تقليص المسافات الكبيرة حول العناوين (مثل كلمة: العلم) */
    .topic-title {
        margin-top: 15px !important;
        margin-bottom: 8px !important;
    }
}

/* === ربط حجم الزر بحجم النص بشكل متناسق (الجوال) === */
@media (max-width: 768px) {
    /* توحيد الفراغ الخارجي بين جميع الأزرار بنسبة مرنة */
    .sections-grid, .post-grid, .topic-grid {
        gap: 0.6em !important;
    }
    
    /* جعل الحواف تأخذ نسبة مريحة من حجم الخط تتمدد وتتقلص معه */
    .section-card, .post-card, .topic-grid .post-card {
        padding: 0.5em 0.8em !important;
        min-height: auto !important;
    }
    
    /* إعطاء مساحة تنفس للخط العربي لكي لا تُقطع الحروف */
    .section-card h2, .post-card h2, .topic-grid h2, .topic-grid .post-card h2 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.5 !important;
    }
}

/* === فصل تنسيق الرئيسية عن الفرعية وتقليص مسافات العناوين (الجوال) === */
@media (max-width: 768px) {
    
    /* 1. الرئيسية (الخارجية) - ملمومة جداً على الحافة */
    .sections-grid { gap: 0.5em !important; }
    .section-card { padding: 0.2em 0.5em !important; min-height: auto !important; }
    .section-card h2 { margin: 0 !important; padding: 0 !important; line-height: 1.1 !important; }

    /* 2. الفرعية (الداخلية) - متناسبة مع حجم الخط ومريحة للحروف كما هي الآن */
    .post-grid, .topic-grid { gap: 0.6em !important; }
    .post-card, .topic-grid .post-card { padding: 0.5em 0.8em !important; min-height: auto !important; }
    .post-card h2, .topic-grid .post-card h2 { margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; }

    /* 3. تقليص الفراغات الكبيرة حول العناوين الداخلية (مثل: العلم، روضة الشعر الهادف) */
    .topic-title, .page-title, .sections-intro {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* === القضاء على الفراغ العلوي للحاوية فوق عنوان الصفحة في الجوال === */
@media (max-width: 768px) {
    .page-body {
        padding-top: 15px !important; /* تقليص الفراغ العلوي للحاوية */
    }
    .page-title {
        margin-top: 0 !important; /* ضمان عدم وجود هامش فوق العنوان */
    }
}

/* === تصميم العناوين الفرعية (مثل: العلم) لتصبح شارة أنيقة === */
.topic-title {
    display: table !important; /* لجعل حجم الخلفية على مقاس الكلمة بالضبط */
    margin: 15px auto 12px auto !important; /* توسيط العنصر في منتصف الشاشة */
    padding: 2px 30px 8px 30px !important; /* مساحة مريحة حول الكلمة */
    background-color: rgba(198, 161, 91, 0.15) !important; /* خلفية ذهبية شفافة جداً */
    border: 1px solid var(--gold-soft) !important; /* إطار ذهبي ناعم */
    border-radius: 25px !important; /* حواف دائرية (شكل بيضاوي) */
    color: var(--wine) !important; /* لون الخط العنابي */
    font-size: 1.25em !important; /* حجم خط متناسق */
    box-shadow: 0 4px 12px rgba(91, 22, 38, 0.05) !important; /* ظل خفيف وراقي */
}

/* === تحديث العناوين الفرعية: خلفية عنابية بارزة وخط أبيض === */
.topic-title {
    display: table !important;
    margin: 15px auto 12px auto !important;
    padding: 2px 30px 8px 30px !important;
    background: var(--wine) !important; /* لون الهيدر العنابي */
    border: 1px solid var(--gold) !important; /* إطار ذهبي أنيق للبروز */
    border-radius: 25px !important;
    color: #ffffff !important; /* خط أبيض ساطع */
    font-size: 1.25em !important;
    box-shadow: 0 5px 15px rgba(91, 22, 38, 0.3) !important; /* ظل داكن قليلاً */
}

/* === إجبار جميع الأقسام الفرعية (مثل منوعات شعرية) لتتطابق مع روضة الشعر === */
@media (max-width: 768px) {
    /* تحويل جميع حاويات التصنيفات والأرشيف إلى نفس النظام */
    .post-grid, .topic-grid, .archive-grid, .category-grid, .category .site-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6em !important;
    }
    
    /* توحيد الفراغ الداخلي لكل الأزرار الفرعية بلا استثناء وإلغاء الهوامش المزعجة */
    .post-card, .category .post-card {
        padding: 0.4em 0.8em !important;
        min-height: auto !important;
        margin-bottom: 0 !important; /* هذا السطر هو الذي سيقضي على الفراغ الكبير في منوعات شعرية */
    }
    
    /* ضبط خطوط جميع الأزرار لتكون مريحة وغير مقطوعة */
    .post-card h2, .category .post-card h2 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
    }
}

/* === تقليص المسافات حول العنوان الرئيسي (روضة الشعر الهادف) في الكمبيوتر لتطابق الجوال === */
@media (min-width: 769px) {
    /* الفراغ بين الهيدر العنابي والعنوان */
    .page-body {
        padding-top: 25px !important; 
    }
    
    /* الفراغ فوق وتحت العنوان الرئيسي (مثل: روضة الشعر الهادف) */
    .page-title, .archive-title, .sections-intro {
        margin-top: 0 !important;
        margin-bottom: 10px !important; 
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* رفع شارة (العلم) لتلتصق أكثر بالعنوان الرئيسي */
    .topic-title {
        margin-top: 15px !important; 
    }
}

/* === ضغط أزرار الأقسام الفرعية في شاشات الكمبيوتر (بدون المساس بالرئيسية) === */
@media (min-width: 769px) {
    /* تقليص الفراغ بين الأزرار في الشبكات الفرعية */
    .topic-grid, .category-grid, .archive-grid, .post-grid {
        gap: 0.8em !important; 
    }
    
    /* عصر الفراغ الداخلي للزر الفرعي (من الأعلى والأسفل) ليكون ملموماً */
    .topic-grid .post-card, 
    .category-grid .post-card, 
    .archive-grid .post-card,
    .post-grid .post-card,
    .category .post-card {
        padding: 0.4em 0.8em !important; 
        min-height: auto !important;
    }
    
    /* ضبط النص داخل الزر الفرعي ليتناسب مع الحجم الجديد */
    .topic-grid .post-card h2, 
    .category-grid .post-card h2, 
    .archive-grid .post-card h2,
    .post-grid .post-card h2,
    .category .post-card h2 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.5 !important;
    }
}

/* === الخيار 1: بطاقات بارزة بحافة عنابية (الرئيسية فقط) === */
.section-card {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-right: 6px solid var(--wine) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.section-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(91, 22, 38, 0.15) !important;
}

/* === الخيار 3: أزرار شفافة بإطار عنابي (للصفحات الفرعية فقط) === */
.post-card {
    background: transparent !important;
    border: 2px solid var(--wine) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

/* تأثير التعبئة باللون العنابي عند اللمس/الماوس */
.post-card:hover {
    background: var(--wine) !important;
}

/* جعل النصوص والأرقام تتفاعل بنعومة */
.post-card h2, .post-card h2 a, .post-card .card-text, .post-card .card-num {
    transition: all 0.3s ease !important;
}

/* تحويل الخطوط للأبيض عند التمرير ليظهر بوضوح فوق الخلفية العنابية */
.post-card:hover h2, .post-card:hover h2 a, .post-card:hover .card-text, .post-card:hover .card-num {
    color: #ffffff !important;
}

/* === إجبار جميع النصوص داخل الزر الفرعي على التحول للأبيض عند اللمس === */
.post-card:hover h2, 
.post-card:hover h2 a, 
.post-card:hover a, 
.post-card:hover span,
.post-card:hover .card-title-wrap,
.post-card:hover .card-num,
.post-card:hover .card-text {
    color: #ffffff !important;
}

/* === القوة القصوى: إجبار كل العناصر المكتوبة داخل الزر على التحول للأبيض عند اللمس === */
.post-card:hover,
.post-card:hover * {
    color: #ffffff !important;
}

/* === إخضاع أزرار روضة الشعر الهادف (topic-grid) للتصميم الشفاف وتغيير لون النص === */
.topic-grid .post-card {
    background: transparent !important;
    border: 2px solid var(--wine) !important;
    box-shadow: none !important;
}

.topic-grid .post-card:hover {
    background: var(--wine) !important;
}

.topic-grid .post-card:hover,
.topic-grid .post-card:hover * {
    color: #ffffff !important;
}

/* === إعادة اللون الأبيض كخلفية أساسية للأزرار الفرعية === */
.post-card, .topic-grid .post-card {
    background: #ffffff !important; /* إرجاع اللون الأبيض بدلاً من الشفاف */
}

/* === استعادة الشكل الأصلي الفخم للأزرار الفرعية (اللون الطبيعي والظل) === */
.post-card, .topic-grid .post-card, .category .post-card {
    background: #ffffff !important;
    border: none !important; /* مسح الإطار العنابي في الحالة الطبيعية */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important; /* إرجاع الظل الطبيعي للزر */
    border-radius: 8px !important; /* إرجاع الحواف الناعمة */
    transition: all 0.3s ease !important;
}

/* تأثير التمرير (يتغير للعنابي ويرتفع قليلاً) */
.post-card:hover, .topic-grid .post-card:hover, .category .post-card:hover {
    background: var(--wine) !important;
    box-shadow: 0 8px 20px rgba(91, 22, 38, 0.2) !important; /* زيادة الظل عند اللمس */
    transform: translateY(-2px) !important; /* حركة ناعمة للأعلى */
}

/* تحويل النص للأبيض الساطع عند اللمس */
.post-card:hover *, .topic-grid .post-card:hover *, .category .post-card:hover * {
    color: #ffffff !important;
}

/* === دمج البرواز العنابي (خيار 3) مع اللون الطبيعي للأزرار الفرعية === */
.post-card, .topic-grid .post-card, .category .post-card {
    background: #ffffff !important; /* اللون الطبيعي للزر */
    border: 2px solid var(--wine) !important; /* البرواز العنابي المطلوب */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important; /* الظل الخفيف */
}

/* === إرجاع لون الخلفية للأزرار الفرعية إلى اللون السكري الدافئ الأصلي === */
.post-card, .topic-grid .post-card, .category .post-card {
    background: #fdfcf8 !important; /* لون سكري دافئ ومريح للعين بدلاً من الأبيض الفاقع */
}

/* === تغيير لون الإطار للأزرار الفرعية ليكون بيج/ذهبي داكن قليلاً === */
.post-card, .topic-grid .post-card, .category .post-card {
    border: 2px solid #b09671 !important; /* لون ذهبي رملي داكن وأنيق */
}

/* === توحيد ألوان أزرار الصفحة الرئيسية مع الأزرار الفرعية === */
.section-card {
    background: #fdfcf8 !important; /* الخلفية السكرية الدافئة */
    border: 2px solid #b09671 !important; /* الإطار الذهبي الرملي الداكن */
}

/* === تجربة العكس للرئيسية: خلفية عنابية وخط أبيض (الحالة الطبيعية) === */
.section-card {
    background: var(--wine) !important;
    border: 2px solid var(--wine) !important; /* إطار عنابي للحفاظ على تماسك الحجم */
}

/* إجبار النصوص في الرئيسية على اللون الأبيض */
.section-card h2, 
.section-card h2 a, 
.section-card .card-text {
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* === عند التمرير للرئيسية: خلفية سكرية وخط عنابي === */
.section-card:hover {
    background: #fdfcf8 !important; /* لون الخلفية السكري الدافئ */
    border: 2px solid var(--wine) !important; /* الإطار يبقى عنابي ليعطي تحديداً جميلاً */
}

/* إجبار النصوص عند التمرير للعودة للون العنابي */
.section-card:hover h2, 
.section-card:hover h2 a, 
.section-card:hover .card-text {
    color: var(--wine) !important;
}

/* === إجبار أزرار الرئيسية على (خلفية عنابية + نص أبيض) في الحالة الطبيعية === */
.section-card {
    background: var(--wine) !important;
    border: 2px solid var(--wine) !important;
}

/* تحويل كل شيء داخل الزر إلى الأبيض */
.section-card,
.section-card * {
    color: #ffffff !important;
}

/* === عند التمرير: (خلفية بيج + إطار ذهبي داكن + نص عنابي) === */
.section-card:hover {
    background: #fdfcf8 !important; /* الخلفية البيج/السكرية */
    border: 2px solid #b09671 !important; /* الإطار الذهبي الرملي */
}

/* تحويل كل شيء داخل الزر إلى العنابي عند اللمس */
.section-card:hover,
.section-card:hover * {
    color: var(--wine) !important;
}

/* === الخيار 3: أزرار شفافة بإطار عنابي (الرئيسية فقط) === */
.section-card {
    background: transparent !important;
    border: 2px solid var(--wine) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}
.section-card:hover {
    background: var(--wine) !important;
}
.section-card h2, .section-card h2 a {
    transition: all 0.3s ease !important;
}
.section-card:hover h2, .section-card:hover h2 a {
    color: #ffffff !important;
}

/* === ترتيب شريط البحث في صفحة الخطأ 404 === */
.error404 .search-form {
    display: flex !important;
    align-items: stretch !important;
    max-width: 450px !important;
    margin: 30px auto !important;
    background: #ffffff !important; /* خلفية بيضاء واضحة للحقل */
    border: 2px solid var(--wine) !important; /* إطار عنابي أنيق */
    border-radius: 30px !important; /* حواف دائرية (كبسولة) */
    overflow: hidden !important;
}

/* ضبط حقل الكتابة ليصبح مقروءاً بوضوح */
.error404 .search-form input.search-field,
.error404 .search-form input[type="search"] {
    background: transparent !important;
    border: none !important;
    color: var(--wine) !important; /* لون النص الذي سيكتبه الزائر عنابي */
    padding: 12px 25px !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 1.1em !important;
}

/* توضيح كلمة (ابحث في الموقع...) المخفية */
.error404 .search-form input.search-field::placeholder,
.error404 .search-form input[type="search"]::placeholder {
    color: rgba(91, 22, 38, 0.6) !important; /* عنابي فاتح */
}

/* ترتيب زر البحث ودمجه في الكبسولة */
.error404 .search-form button.search-submit,
.error404 .search-form input[type="submit"] {
    background: var(--wine) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 30px !important;
    cursor: pointer !important;
    border-radius: 0 !important; 
    transition: all 0.3s ease !important;
}

/* حركة الزر عند لمسه */
.error404 .search-form button.search-submit:hover,
.error404 .search-form input[type="submit"]:hover {
    background: #b09671 !important; /* يصير لونه ذهبي/بيج غامق */
}

/* توضيح الجملة الأساسية (المعذرة، الصفحة اللي تدور عليها...) */
.error404 .page-content p {
    color: var(--wine) !important;
    font-size: 1.25em !important;
    font-weight: bold !important;
    margin-bottom: 25px !important;
}

/* === إصلاح شكل مربع البحث المتداخل في صفحة 404 وتوضيحه === */
.error404 .search-form {
    position: relative !important;
    display: block !important;
    max-width: 500px !important;
    margin: 30px auto !important;
    background: #ffffff !important; /* خلفية بيضاء ساطعة */
    border: 2px solid var(--wine) !important;
    border-radius: 40px !important; /* شكل بيضاوي كامل */
    overflow: hidden !important;
}

/* إصلاح تداخل النص وتوضيح اللون */
.error404 .search-form label {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.error404 .search-form input[type="search"] {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    color: var(--wine) !important; /* لون النص عنابي */
    padding: 15px 70px 15px 25px !important; /* فراغ كبير من اليسار لكي لا يدخل النص تحت الزر */
    font-size: 1.1em !important;
    box-shadow: none !important;
}

/* توضيح النص المخفي (ابحث في الموقع) */
.error404 .search-form input[type="search"]::-webkit-input-placeholder,
.error404 .search-form input[type="search"]::-moz-placeholder {
    color: rgba(91, 22, 38, 0.7) !important; 
    opacity: 1 !important;
}

/* إجبار زر البحث على الاصطفاف في الجانب الأيسر (أو الأيمن حسب اتجاه الموقع) */
.error404 .search-form button.search-submit,
.error404 .search-form input[type="submit"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important; /* تثبيت الزر في أقصى اليسار */
    bottom: 0 !important;
    height: 100% !important;
    width: 60px !important;
    background: var(--wine) !important;
    border: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

/* تغيير لون الزر عند اللمس */
.error404 .search-form button.search-submit:hover,
.error404 .search-form input[type="submit"]:hover {
    background: #b09671 !important;
}

/* === الإصلاح النهائي لشريط البحث في صفحة 404 بناءً على ملف 404.php === */
.page-body .search-form {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    background: #ffffff !important; /* خلفية بيضاء واضحة */
    border: 2px solid var(--wine) !important; /* إطار عنابي */
    border-radius: 40px !important; /* كبسولة دائرية */
    overflow: hidden !important;
}

/* إعطاء حقل البحث المساحة الأكبر */
.page-body .search-form label {
    flex-grow: 1 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* توضيح النص المكتوب داخل الحقل */
.page-body .search-form input.search-field,
.page-body .search-form input[type="search"] {
    background: transparent !important;
    border: none !important;
    color: var(--wine) !important; /* لون النص عنابي ليكون مقروءاً */
    padding: 10px 15px !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

/* توضيح كلمة (ابحث في الموقع) */
.page-body .search-form input.search-field::-webkit-input-placeholder,
.page-body .search-form input[type="search"]::-webkit-input-placeholder {
    color: rgba(91, 22, 38, 0.6) !important; 
}
.page-body .search-form input.search-field::-moz-placeholder,
.page-body .search-form input[type="search"]::-moz-placeholder {
    color: rgba(91, 22, 38, 0.6) !important; 
}

/* ترتيب زر البحث بجانب الحقل وليس فوقه */
.page-body .search-form button.search-submit,
.page-body .search-form input[type="submit"] {
    position: relative !important; /* إلغاء التموضع المطلق المزعج */
    background: var(--wine) !important; /* لون الزر عنابي */
    color: #ffffff !important;
    border: none !important;
    padding: 0 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: auto !important;
    height: auto !important;
}

/* تغيير لون الزر للذهبي عند التمرير */
.page-body .search-form button.search-submit:hover,
.page-body .search-form input[type="submit"]:hover {
    background: #b09671 !important;
}

/* === الحل الجذري الأخير لشريط بحث 404 باستخدام التموضع المطلق (Absolute) === */

/* 1. تحويل الفورم إلى كبسولة ثابتة الأبعاد تتجاهل محتواها الداخلي */
.page-body form {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 45px !important; /* ارتفاع ثابت وأنيق للكبسولة */
    background: #ffffff !important; 
    border: 2px solid var(--wine) !important;
    border-radius: 25px !important; /* شكل بيضاوي */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. إجبار حقل النص على تعبئة الكبسولة بالكامل وترك مساحة للزر في اليسار */
.page-body form input[type="search"],
.page-body form input[type="text"],
.page-body form input.search-field {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    color: var(--wine) !important;
    padding: 0 15px 0 55px !important; /* 55 بكسل فارغة من اليسار كي لا يدخل النص تحت الزر */
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 16px !important;
    line-height: 45px !important;
}

/* 3. تلوين كلمة (ابحث في الموقع) */
.page-body form input::-webkit-input-placeholder { color: rgba(91,22,38,0.6) !important; }
.page-body form input::-moz-placeholder { color: rgba(91,22,38,0.6) !important; }

/* 4. إجبار الزر على التثبيت كقطعة واحدة في أقصى اليسار */
.page-body form button,
.page-body form input[type="submit"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important; /* تثبيت في أقصى اليسار */
    width: 50px !important; /* عرض الزر */
    height: 100% !important; /* نفس ارتفاع الكبسولة */
    background: var(--wine) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important; /* إجبار الزر ليكون فوق حقل النص دائماً */
}

/* 5. تغيير لون الزر عند اللمس */
.page-body form button:hover,
.page-body form input[type="submit"]:hover {
    background: #b09671 !important;
}

/* 6. إخفاء أي نصوص زائدة يولدها القالب (مثل كلمة Search للوصوليات) */
.page-body form label span.screen-reader-text {
    display: none !important;
}

/* === الخيار 3: الزر المجسم 3D === */
.section-card {
    border-radius: 12px !important;
    /* قاعدة عنابية داكنة جداً تحت الزر */
    box-shadow: 0 6px 0px rgba(60, 10, 20, 1) !important; 
    transform: translateY(0) !important;
    margin-bottom: 6px !important; /* لترك مساحة للظل */
}
.section-card:hover {
    /* القاعدة تصير ذهبية داكنة وينضغط الزر للأسفل */
    box-shadow: 0 2px 0px #8c7657 !important; 
    transform: translateY(4px) !important; 
}

/* === ضغط حجم الأزرار الرئيسية المجسمة (3D) في الجوال فقط === */
@media (max-width: 768px) {
    .section-card {
        padding: 6px 10px !important; /* عصر الفراغ الداخلي لضغط الزر */
        border-radius: 8px !important; /* تصغير الحواف لتناسب الحجم الجديد */
        box-shadow: 0 4px 0px rgba(60, 10, 20, 1) !important; /* تقليل عمق الـ 3D ليتناسب مع شاشة الجوال */
        margin-bottom: 5px !important; 
    }
    
    .section-card h2, .section-card h2 a {
        font-size: 1.05em !important; /* تصغير حجم الخط قليلاً ليتناسق مع الزر */
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* تعديل مسافة ضغطة الزر في الجوال لتكون أنعم */
    .section-card:hover {
        box-shadow: 0 1px 0px #8c7657 !important;
        transform: translateY(3px) !important;
    }
}

/* === عصر الفراغ العلوي والسفلي لأزرار الرئيسية في الجوال === */
@media (max-width: 768px) {
    .section-card {
        padding-top: 8px !important;     /* تقليل الفراغ العلوي */
        padding-bottom: 8px !important;  /* تقليل الفراغ السفلي */
        min-height: auto !important;     /* كسر حماية القالب لأي ارتفاع أدنى مفروض */
        height: auto !important;
    }
    
    /* تصفير هوامش النصوص من الداخل لضمان عدم تمدد الزر */
    .section-card h2, 
    .section-card h2 a, 
    .section-card .card-title-wrap,
    .section-card p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* === ضغط أقصى لأزرار الرئيسية في الجوال (عصر نهائي) === */
@media (max-width: 768px) {
    .section-card {
        padding-top: 4px !important;     /* تقليل الفراغ لدرجة قصوى */
        padding-bottom: 4px !important;
        display: flex !important;        /* استخدام الصندوق المرن */
        align-items: center !important;  /* توسيط النص عمودياً بالقوة */
        justify-content: center !important; /* توسيط النص أفقياً */
        min-height: 38px !important;     /* تحديد ارتفاع أدنى صغير جداً */
    }
    
    .section-card h2, 
    .section-card h2 a {
        line-height: 1 !important;       /* إلغاء أي تباعد بين السطور المخفية */
        font-size: 0.95em !important;    /* تصغير الخط شعرة ليتناسب مع الضغط */
    }
}

/* === تصغير الظل السفلي المجسم (3D) في شاشات الكمبيوتر فقط === */
@media (min-width: 769px) {
    .section-card {
        box-shadow: 0 4px 0px rgba(60, 10, 20, 1) !important; /* تقليل الظل من 6 إلى 4 بكسل */
        margin-bottom: 4px !important; /* تعديل الهامش ليتناسب مع الظل الجديد */
    }
    
    /* تعديل حركة الضغطة عند التمرير لتكون أنعم */
    .section-card:hover {
        box-shadow: 0 1px 0px #8c7657 !important; /* تقليل الظل المتبقي عند الضغط */
        transform: translateY(3px) !important; /* تقليل مسافة النزول للأسفل */
    }
}

/* === تطبيق تأثير المجسم (3D) الناعم على الأزرار الفرعية === */

/* للكمبيوتر: ظل 2 بكسل (نصف حجم الرئيسية تقريباً) */
@media (min-width: 769px) {
    .post-card, .topic-grid .post-card, .category .post-card {
        box-shadow: 0 2px 0px #8c7657 !important; /* ظل ذهبي داكن يتناسق مع الإطار */
        transform: translateY(0) !important;
        margin-bottom: 2px !important;
    }
    
    /* حركة الانضغاط للأسفل عند اللمس مع الحفاظ على اللون العنابي */
    .post-card:hover, .topic-grid .post-card:hover, .category .post-card:hover {
        box-shadow: 0 0px 0px #8c7657 !important; /* يختفي الظل كأن الزر انضغط */
        transform: translateY(2px) !important; /* ينزل الزر للأسفل */
        background: var(--wine) !important; 
    }
}

/* للجوال: ظل 1.5 بكسل (خفيف جداً ومناسب للشاشات الصغيرة) */
@media (max-width: 768px) {
    .post-card, .topic-grid .post-card, .category .post-card {
        box-shadow: 0 1.5px 0px #8c7657 !important;
        transform: translateY(0) !important;
        margin-bottom: 1.5px !important;
    }
    
    .post-card:hover, .topic-grid .post-card:hover, .category .post-card:hover {
        box-shadow: 0 0px 0px #8c7657 !important;
        transform: translateY(1.5px) !important;
        background: var(--wine) !important;
    }
}

/* === تصميم أزرار التحكم بحجم الخط في المقالات (منسجم مع هوية الموقع) === */
.font-resizer-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
    padding: 10px 22px !important;
    background: var(--parchment) !important;
    border: 1px solid var(--gold-soft) !important;
    border-radius: 999px !important;
    max-width: fit-content !important;
    box-shadow: 0 4px 15px rgba(36,26,18,0.08) !important;
}

.font-resizer-wrap .resizer-title {
    font-weight: 700 !important;
    color: var(--wine) !important;
    font-size: 14px !important;
    font-family: 'Amiri', serif !important;
}

.font-resizer-wrap button {
    background: #ffffff !important;
    color: var(--wine) !important;
    border: 1.5px solid var(--wine) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.font-resizer-wrap button:hover {
    background: var(--wine) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(91,22,38,0.25) !important;
}

#font-increase { font-size: 15px !important; }
#font-reset { font-size: 13px !important; }
#font-decrease { font-size: 11px !important; }

@media (max-width: 600px) {
    .font-resizer-wrap {
        padding: 8px 16px !important;
        gap: 8px !important;
    }
    .font-resizer-wrap button {
        width: 30px !important;
        height: 30px !important;
    }
}

/* === سحب صندوق التحكم بالخط للأعلى بالقرب من الحافة === */
.font-resizer-wrap {
    /* الترتيب: (أعلى) (يمين) (أسفل) (يسار) */
    /* الهامش السلبي -20 يسحبه للأعلى، و 20 للأسفل تبعده عن العنوان */
    margin: -20px auto 20px auto !important; 
}

/* تعديل المسافة لتكون متناسبة وأقل حدة في شاشات الجوال */
@media (max-width: 768px) {
    .font-resizer-wrap {
        margin: -10px auto 15px auto !important; 
    }
}

/* === سحب صندوق التحكم بالخط للأعلى بالقرب من الحافة === */
.font-resizer-wrap {
    /* الترتيب: (أعلى) (يمين) (أسفل) (يسار) */
    /* الهامش السلبي -20 يسحبه للأعلى، و 20 للأسفل تبعده عن العنوان */
    margin: -20px auto 20px auto !important; 
}

/* تعديل المسافة لتكون متناسبة وأقل حدة في شاشات الجوال */
@media (max-width: 768px) {
    .font-resizer-wrap {
        margin: -10px auto 15px auto !important; 
    }
}

/* === محاذاة الأشطر الشعرية بأعمدة متوازية عبر القصيدة كاملة (الكمبيوتر فقط) === */
.poem-container {
    width: 100%;
}
.poem-line {
    display: flex;
    justify-content: center;
    align-items: baseline;
    white-space: nowrap;
}
.hemistich {
    display: inline;
    white-space: nowrap;
}
.hemistich-sep {
    display: inline-block;
    white-space: pre;
    margin: 0;
}

/* الجوال يبقى بسلوكه الحالي المضبوط (شطر تحت شطر) بدون تأثر بنظام الأعمدة */
@media (max-width: 600px) {
    .poem-line {
        display: block !important;
    }
    .hemistich {
        display: block !important;
        width: auto !important;
        white-space: normal !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }
    .hemistich-sep {
        display: none !important;
    }
}

/* ============================================================
   تصميم مميز للأزرار الرئيسية — طابع "بوابة" مستوحى من الأقواس التراثية
   ============================================================ */
.section-card {
    position: relative !important;
    background: linear-gradient(160deg, #fffdf6 0%, #f3e6c4 100%) !important;
    border: 2px solid var(--gold-deep) !important;
    border-radius: 60px 60px 14px 14px !important;
    box-shadow: 0 10px 26px -12px rgba(91,22,38,0.28), inset 0 0 0 1px rgba(198,161,91,0.35) !important;
    padding-top: 34px !important;
    transition: all 0.35s ease !important;
    overflow: visible !important;
}

/* زخرفة معينية صغيرة أعلى منتصف الزر */
.section-card::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: var(--wine);
    border: 2px solid var(--gold-soft);
    border-radius: 3px;
    transition: all 0.35s ease;
}

.section-card h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--wine) !important;
    transition: color 0.35s ease !important;
}

/* حالة التمرير — انقلاب فخم للألوان */
.section-card:hover {
    background: linear-gradient(160deg, var(--wine) 0%, var(--wine-deep) 100%) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 16px 34px -14px rgba(91,22,38,0.5), inset 0 0 0 1px rgba(232,209,159,0.4) !important;
    transform: translateY(-5px) !important;
}

.section-card:hover::before {
    background: var(--gold);
    border-color: #fff;
}

.section-card:hover h2 {
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .section-card {
        border-radius: 40px 40px 10px 10px !important;
        padding-top: 26px !important;
    }
    .section-card::before {
        width: 12px;
        height: 12px;
        top: -7px;
    }
    .section-card h2 {
        font-size: 19px !important;
    }
}

/* === تبرير النثر بخاصية المتصفح الأصلية (نهايات متساوية مضمونة 100%) === */
.post-content > p {
    text-align: justify;
    text-align-last: right;
    text-justify: inter-word;
}

/* الفقرات ذات محاذاة يدوية مخصصة تتبع محاذاتها بالكامل (تلغي تأثير text-align-last) */
.post-content > p[style*="text-align"] {
    text-align-last: inherit;
}

/* مسافة إضافية فوق وتحت السطر الفردي بالتخميس، مع إخفاء النجمتين المحيطتين به */
.poem-single-verse {
    margin-top: 14px !important;
    margin-bottom: 26px !important;
}
.poem-single-verse .hemistich-sep {
    display: none !important;
}

/* منع خروج النثر عن حدود الشاشة عند تكبير الخط بالجوال (يكسر النص الملتصق فقط عند الضرورة القصوى) */
.post-content > p {
    overflow-wrap: break-word;
    word-break: normal;
}