/* ==========================================================================
   Khwarizmi Journal Visual Identity CSS - Header & Border Fix
   Font: Cairo | Palette: Deep Brown (#3D2E1E), Gold (#A88B4A), Cream (#F3EFE6)
   ========================================================================== */

/* 1. استدعاء خط القاهرة Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap');

:root {
    --kjiss-primary: #3D2E1E;        /* بني داكن رئيسي من الشعار */
    --kjiss-primary-hover: #291E13;  /* بني أغمق */
    --kjiss-gold: #A88B4A;           /* ذهبي/زيتوني من الشعار */
    --kjiss-gold-light: #CBB47B;     /* ذهبي فاتح للمؤثرات */
    --kjiss-bg: #F8F6F0;             /* خلفية بيج كريمية */
    --kjiss-header-bg: #F3EFE6;      /* لون خلفية هيدر الشعار */
    --kjiss-text: #2D2A26;           /* لون النصوص الأساسي */
    --kjiss-font: 'Cairo', sans-serif;
}

/* 2. إعدادات الخط الشاملة */
body, html, p, div, span, a, input, button, select, textarea {
    font-family: var(--kjiss-font) !important;
}

body {
    background-color: var(--kjiss-bg) !important;
}

/* ==========================================================================
   3. تغطية الهيدر الكامل بلون خلفية الشعار البيج (إزالة الأزرق)
   ========================================================================== */

.pkp_structure_head,
.pkp_head_wrapper,
header.pkp_structure_head,
.pkp_site_name_wrapper {
    background-color: var(--kjiss-header-bg) !important;
    border: none !important;
    box-shadow: none !important;
}

/* شريط المستخدم العلوي (admin / notifications) */
.pkp_navigation_user_wrapper,
.pkp_navigation_user {
    background-color: transparent !important;
}

.pkp_navigation_user a,
.pkp_navigation_user span {
    color: var(--kjiss-primary) !important;
    font-weight: 600 !important;
}

.pkp_navigation_user a:hover {
    color: var(--kjiss-gold) !important;
}

/* ==========================================================================
   4. شريط التصفح (Navbar) وإزالة الحدود المزدوجة
   ========================================================================== */

/* الحاوية الرئيسية لشريط الملاحة */
nav.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary {
    background-color: var(--kjiss-primary) !important;
    border: none !important; /* إزالة الحدود المزدوجة */
    box-shadow: none !important;
}

/* إزالة أي خطوط صفراء/ذهبية إضافية أسفل القائمة أو الهيدر */
.pkp_structure_head::after,
.pkp_navigation_primary_wrapper::after,
.pkp_navigation_primary::after,
.pkp_nav_path {
    border: none !important;
    box-shadow: none !important;
}

/* خط فاصل واحد فقط أسفل النافبار كاملاً */
nav.pkp_navigation_primary_wrapper {
    border-bottom: 3px solid var(--kjiss-gold) !important;
}

/* روابط شريط الملاحة الرئيسية */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary a {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 1.05rem;
    padding: 12px 20px !important;
    transition: all 0.3s ease-in-out;
    border: none !important;
}

/* حالة التمرير والتركيز (Hover) */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.has-submenu:hover > a,
.pkp_navigation_primary a:hover {
    color: #FFFFFF !important;
    background-color: var(--kjiss-gold) !important;
}

/* القوائم المنسدلة (Submenus) */
.pkp_navigation_primary ul {
    background-color: var(--kjiss-primary) !important;
    border-top: 3px solid var(--kjiss-gold) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.pkp_navigation_primary ul a {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.pkp_navigation_primary ul a:hover {
    background-color: var(--kjiss-gold) !important;
    color: #FFFFFF !important;
}

/* زر البحث */
.pkp_navigation_primary .search_link,
.pkp_navigation_primary a.search {
    color: #FFFFFF !important;
}

/* ==========================================================================
   5. إخفاء شعار PKP من الفوتر
   ========================================================================== */

.pkp_brand_footer,
.pkp_footer_content .sub_status,
a.pkp_brand_link,
.pkp_structure_footer .pkp_brand_footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. الأزرار والعناصر التفاعلية
   ========================================================================== */

.cmp_button, 
a.cmp_button,
button, 
.btn-primary,
.pkp_button {
    background-color: var(--kjiss-primary) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--kjiss-primary) !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    transition: all 0.3s ease-in-out !important;
}

.cmp_button:hover, 
button:hover, 
.btn-primary:hover,
.pkp_button:hover {
    background-color: var(--kjiss-gold) !important;
    border-color: var(--kjiss-gold) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(168, 139, 74, 0.3);
}

/* ==========================================================================
   7. تصميم الفوتر المخصص (Custom Footer)
   ========================================================================== */

.pkp_structure_footer_wrapper {
    background-color: var(--kjiss-primary) !important;
    color: #F8F6F0 !important;
    border-top: 5px solid var(--kjiss-gold) !important;
    padding: 45px 0 20px 0 !important;
    margin-top: 60px;
}

.kjiss-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.kjiss-footer-col h4 {
    color: var(--kjiss-gold) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    position: relative;
    padding-bottom: 8px;
}

.kjiss-footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background-color: var(--kjiss-gold);
}

.kjiss-footer-col p, 
.kjiss-footer-col li {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #E2DDD5;
}

.kjiss-footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kjiss-footer-col ul li {
    margin-bottom: 10px;
}

.kjiss-footer-col ul li a {
    color: #E2DDD5 !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.kjiss-footer-col ul li a:hover {
    color: var(--kjiss-gold) !important;
    padding-right: 5px;
}

.kjiss-footer-bottom {
    max-width: 1200px;
    margin: 30px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.85rem;
    color: #C5BFAF;
}

@media (max-width: 768px) {
    .kjiss-footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}