/* =========================================================
TUAHJ – Journal of Arts and Humanities
Custom CSS Template for OJS 3.x
========================================================= */
/* =========================================================
1.	GOOGLE FONT – UNIFIED ARABIC FONT
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
/* =========================================================
2. COLOR VARIABLES
========================================================= */
{
--tuahj-dark-brown: #5F4C3A;
--tuahj-main-brown: #7A5A3A;
--tuahj-light-brown: #9B7652;
--tuahj-gold: #B4965A;
--tuahj-light-gold: #D6BD88;
--tuahj-cream: #FCF8F1;
--tuahj-beige: #F5EFE6;
--tuahj-light-beige: #EEE5D8;
--tuahj-text: #3E3025;
--tuahj-white: #FFFFFF;
}
/* =========================================================
3. GLOBAL TYPOGRAPHY
IMPORTANT: ONE UNIFIED ARABIC FONT
========================================================= */
html,
body,
button,
input,
select,
textarea,
a,
p,
span,
div,
li,
td,
th,
label,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Cairo", Arial, sans-serif !important;
}
body {
background: var(--tuahj-cream) !important;
color: var(--tuahj-text) !important;
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
4. LINKS
========================================================= */
a {
color: var(--tuahj-main-brown);
transition: all 0.25s ease;
}
a,
a {
color: var(--tuahj-gold);
}
/* =========================================================
5. MAIN HEADER
========================================================= */
.pkp_structure_head,
.pkp_site_name {
background-color: var(--tuahj-cream);
}
/* Keep logo proportional */
.pkp_site_name .is_img img {
max-width: 100%;
height: auto;
}
/* Journal title */
.pkp_site_name .is_text {
color: var(--tuahj-dark-brown) !important;
font-family: "Cairo", Arial, sans-serif !important;
font-weight: 700;
}
/* =========================================================
6. NAVIGATION BAR
========================================================= */
.pkp_navigation_primary_wrapper {
background: var(--tuahj-dark-brown) !important;
}
.pkp_navigation_primary > li > a {
color: var(--tuahj-white) !important;
font-family: "Cairo", Arial, sans-serif !important;
font-weight: 600;
padding: 15px 18px;
}
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a {
background: var(--tuahj-main-brown) !important;
color: var(--tuahj-white) !important;
}
/* Active menu */
.pkp_navigation_primary .is_open > a,
.pkp_navigation_primary .is_current > a {
background: var(--tuahj-gold) !important;
color: var(--tuahj-white) !important;
}
/* =========================================================
7. DROPDOWN MENU
========================================================= */
.pkp_navigation_primary ul {
background: var(--tuahj-white) !important;
border-top: 3px solid var(--tuahj-gold);
}
.pkp_navigation_primary ul a {
color: var(--tuahj-dark-brown) !important;
font-family: "Cairo", Arial, sans-serif !important;
}
.pkp_navigation_primary ul a {
background: var(--tuahj-beige) !important;
color: var(--tuahj-main-brown) !important;
}
/* =========================================================
8. MAIN CONTENT AREA
========================================================= */
.pkp_structure_content {
background: var(--tuahj-cream) !important;
}
.pkp_structure_main {
background: var(--tuahj-white);
padding: 25px;
}
/* =========================================================
9. PAGE TITLES
========================================================= */
.pkp_page_title,
.page_title {
color: var(--tuahj-dark-brown) !important;
font-family: "Cairo", Arial, sans-serif !important;
font-weight: 700 !important;
}
.pkp_page_title::after,
.page_title::after {
content: "";
display: block;
width: 70px;
height: 3px;
background: var(--tuahj-gold);
margin-top: 12px;
}
/* =========================================================
10. HEADINGS
========================================================= */
h1, h2, h3, h4, h5, h6 {
color: var(--tuahj-dark-brown);
font-family: "Cairo", Arial, sans-serif !important;
font-weight: 700;
}
/* =========================================================
11. SIDEBAR
========================================================= */
.pkp_structure_sidebar {
background: var(--tuahj-beige);
padding: 20px;
}
.pkp_block .title {
color: var(--tuahj-dark-brown) !important;
font-family: "Cairo", Arial, sans-serif !important;
font-weight: 700;
border-bottom: 2px solid var(--tuahj-gold);
padding-bottom: 8px;
}
.pkp_block a {
color: var(--tuahj-main-brown) !important;
font-family: "Cairo", Arial, sans-serif !important;
}
.pkp_block a {
color: var(--tuahj-gold) !important;
}
/* =========================================================
12. BUTTONS
========================================================= */
.cmp_button,
.pkp_button,
button,
input[type="submit"] {
background: var(--tuahj-main-brown) !important;
color: var(--tuahj-white) !important;
border: none !important;
border-radius: 4px;
font-family: "Cairo", Arial, sans-serif !important;
font-weight: 600;
padding: 10px 18px;
transition: all 0.25s ease;
}
.cmp_button,
.pkp_button,
button,
input[type="submit"] {
background: var(--tuahj-gold) !important;
}
/* =========================================================
13. EDITORIAL BOARD / LISTS / TABLES
========================================================= */
table {
font-family: "Cairo", Arial, sans-serif !important;
}
table td,
table th {
border-color: var(--tuahj-light-gold) !important;
padding: 12px;
}
table th {
background: var(--tuahj-beige);
color: var(--tuahj-dark-brown);
font-weight: 700;
}
/* Editorial names */
.obj_issue_toc .title,
.obj_article_summary .title,
.obj_article_details .title {
color: var(--tuahj-dark-brown) !important;
font-family: "Cairo", Arial, sans-serif !important;
font-weight: 700;
}
/* =========================================================
14. ARTICLE LISTS
========================================================= */
.obj_article_summary {
border-bottom: 1px solid var(--tuahj-light-gold);
padding: 20px 0;
}
.obj_article_summary .title a {
color: var(--tuahj-dark-brown) !important;
}
.obj_article_summary .title a {
color: var(--tuahj-gold) !important;
}
/* =========================================================
15. FORMS
========================================================= */
input,
textarea,
select {
border: 1px solid var(--tuahj-light-brown) !important;
border-radius: 3px;
font-family: "Cairo", Arial, sans-serif !important;
padding: 8px;
}
input,
textarea,
select {
border-color: var(--tuahj-gold) !important;
outline: none;
}
/* =========================================================
16. FOOTER
========================================================= */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
background: var(--tuahj-dark-brown) !important;
color: var(--tuahj-cream) !important;
font-family: "Cairo", Arial, sans-serif !important;
}
.pkp_structure_footer a {
color: var(--tuahj-light-gold) !important;
}
.pkp_structure_footer a {
color: var(--tuahj-white) !important;
}
/* =========================================================
17. RTL SUPPORT
========================================================= */
[dir="rtl"] {
direction: rtl;
text-align: right;
}
[dir="rtl"] .pkp_navigation_primary,
[dir="rtl"] .pkp_structure_sidebar {
font-family: "Cairo", Arial, sans-serif !important;
}
/* =========================================================
18. MOBILE DESIGN
========================================================= */
@media (max-width: 900px) {
body {
    font-size: 15px;
}

.pkp_structure_main {
    padding: 18px;
}

.pkp_navigation_primary > li > a {
    padding: 12px;
}

.pkp_page_title,
.page_title {
    font-size: 26px !important;
}

.pkp_structure_sidebar {
    margin-top: 20px;
}
}
@media (max-width: 600px) {
body {
    font-size: 15px;
}

.pkp_page_title,
.page_title {
    font-size: 22px !important;
}

.pkp_structure_main {
    padding: 15px;
}

.pkp_block {
    margin-bottom: 20px;
}

table {
    font-size: 13px;
}
}
/* =========================================================
TUAHJ – HEADER AND NAVIGATION FIX
========================================================= */
/* الخلفية الرئيسية للموقع */
body {
background-color: #f7f3ed !important;
background-image: url("PUT-YOUR-BUILDING-IMAGE-URL-HERE") !important;
background-position: center top !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
/* طبقة شفافة حتى تبقى الخلفية ظاهرة */
.pkp_structure_page {
background: rgba(247, 243, 237, 0.94) !important;
}
/* =========================================================
HEADER
إزالة الفراغ الكبير حول الشعار
========================================================= */
.pkp_site_name_wrapper,
.pkp_site_name {
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
/* منطقة الشعار */
.pkp_site_name .is_img {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* الشعار */
.pkp_site_name .is_img img {
display: block !important;
width: auto !important;
max-width: 220px !important;
max-height: 125px !important;
height: auto !important;
margin: 8px auto !important;
padding: 0 !important;
object-fit: contain !important;
}
/* =========================================================
إذا كان Header يحتوي على مساحة فارغة
========================================================= */
.pkp_header_branding {
min-height: 0 !important;
padding: 8px 20px !important;
background-color: rgba(250, 247, 241, 0.96) !important;
}
/* إزالة المساحة البيضاء الكبيرة */
.pkp_header_content {
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* =========================================================
NAVIGATION BAR
========================================================= */
.pkp_navigation_primary_wrapper {
position: relative !important;
z-index: 9999 !important;
background: #6b5540 !important;
}
.pkp_navigation_primary {
position: relative !important;
z-index: 9999 !important;
background: #6b5540 !important;
}
/* عناصر القائمة */
.pkp_navigation_primary > li > a {
color: #ffffff !important;
font-family: "Noto Kufi Arabic", "Cairo", Arial, sans-serif !important;
font-weight: 600 !important;
}
/* عند المرور أو الضغط */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a[aria-expanded="true"] {
background-color: #8a6b4d !important;
color: #ffffff !important;
}
/* =========================================================
إصلاح القائمة المنسدلة
========================================================= */
.pkp_navigation_primary li {
position: relative !important;
}
/* القائمة الفرعية */
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary ul ul {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
min-width: 240px !important;

background: #ffffff !important;
border: 1px solid #c6a464 !important;

padding: 8px 0 !important;
margin: 0 !important;

z-index: 99999 !important;

box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
}
/* عناصر القائمة المنسدلة */
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary ul ul a {
display: block !important;
color: #5f4631 !important;
background: #ffffff !important;

padding: 12px 20px !important;

font-family: "Noto Kufi Arabic", "Cairo", Arial, sans-serif !important;
text-align: right !important;

white-space: nowrap !important;
}
/* Hover */
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary ul ul a {
background: #f2e8da !important;
color: #7b5b37 !important;
}
/* =========================================================
مهم جداً:
منع القائمة المنسدلة من الاختفاء خلف المحتوى
========================================================= */
.pkp_header {
position: relative !important;
z-index: 10000 !important;
overflow: visible !important;
}
.pkp_header_content {
overflow: visible !important;
}
.pkp_header_nav {
position: relative !important;
z-index: 10001 !important;
overflow: visible !important;
}
.pkp_navigation_primary_wrapper {
overflow: visible !important;
}
/* =========================================================
RESPONSIVE – MOBILE
========================================================= */
@media (max-width: 768px) {
.pkp_site_name .is_img img {
    max-width: 150px !important;
    max-height: 95px !important;
}

.pkp_header_branding {
    padding: 5px 10px !important;
}

.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary ul ul {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    box-shadow: none !important;
}
}
/* ==========================================
FIX LOGO AREA - REMOVE BEIGE BACKGROUND
========================================== */
.pkp_header_branding,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
background: transparent !important;
background-color: transparent !important;
}
/* إزالة أي إطار أو ظل حول الشعار */
.pkp_site_name {
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
}
/* الشعار فقط */
.pkp_site_name .is_img img {
display: block !important;
background: transparent !important;
max-width: 240px !important;
max-height: 160px !important;
width: auto !important;
height: auto !important;
margin: 5px auto !important;
padding: 0 !important;
}
/* ==========================================
FIX DROPDOWN MENU POSITION
تظهر القائمة تحت "الرئيسية" وليس للأعلى
========================================== */
/* عنصر القائمة الرئيسي */
.pkp_navigation_primary > li {
position: relative !important;
}
/* القائمة المنسدلة */
.pkp_navigation_primary > li > .dropdown-menu,
.pkp_navigation_primary > li > ul {
position: absolute !important;
top: calc(100% + 0px) !important;
bottom: auto !important;

right: 0 !important;
left: auto !important;

transform: none !important;

min-width: 260px !important;
margin: 0 !important;

z-index: 999999 !important;

background: #ffffff !important;
border: 1px solid #c8ad82 !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
/* منع أي قاعدة تجعل القائمة تصعد للأعلى */
.pkp_navigation_primary .dropdown-menu {
bottom: auto !important;
top: 100% !important;
}
/* التأكد من عدم قطع القائمة */
.pkp_header,
.pkp_header_content,
.pkp_header_nav,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary {
overflow: visible !important;
}
/* عناصر القائمة المنسدلة */
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary ul ul a {
display: block !important;
background: #ffffff !important;
color: #654f3a !important;
padding: 15px 25px !important;

text-align: right !important;
direction: rtl !important;

font-family: "Noto Kufi Arabic", "Cairo", sans-serif !important;

border-bottom: 1px solid #eee4d7 !important;
}
/* عند المرور */
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary ul ul a {
background: #f5ede2 !important;
color: #8b653b !important;
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 768px) {
.pkp_navigation_primary > li > .dropdown-menu,
.pkp_navigation_primary > li > ul {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 100% !important;
}

.pkp_site_name .is_img img {
    max-width: 170px !important;
    max-height: 110px !important;
}
}
/* =========================================================
FINAL HEADER FIX
REMOVE LARGE CENTER LOGO
KEEP BUILDING BACKGROUND
========================================================= */
/* إزالة مساحة الشعار الكبيرة من منتصف الهيدر */
.pkp_header_branding {
display: none !important;
}
/* إلغاء أي مساحة فارغة كانت مخصصة للشعار */
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* إظهار خلفية المبنى بوضوح */
.pkp_structure_page {
background: rgba(247, 243, 237, 0.88) !important;
}
/* الحفاظ على الهيدر فوق المحتوى */
.pkp_header {
position: relative !important;
z-index: 10000 !important;
overflow: visible !important;
}
/* القائمة البنية */
.pkp_navigation_primary_wrapper {
background: #6b5540 !important;
position: relative !important;
z-index: 10001 !important;
}
/* إصلاح القائمة المنسدلة */
.pkp_navigation_primary,
.pkp_navigation_primary > li {
position: relative !important;
overflow: visible !important;
}
/* ظهور القائمة تحت العنصر وليس فوقه */
.pkp_navigation_primary > li > ul,
.pkp_navigation_primary > li > .dropdown-menu {
position: absolute !important;
top: 100% !important;
bottom: auto !important;
right: 0 !important;
left: auto !important;
transform: none !important;
z-index: 999999 !important;
overflow: visible !important;
}
/* إزالة الخلفية البيج من أي منطقة متبقية */
.pkp_header_content {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
background: transparent !important;
}
/* تكبير منطقة صورة البنر */
.pkp_site_name_wrapper {
min-height: 250px !important;
background-size: cover !important;
background-position: center center !important;
}
/* زيادة ارتفاع الهيدر */
.pkp_structure_head {
min-height: 250px !important;
}
/* الحفاظ على تناسب صورة الخلفية */
.pkp_site_name {
min-height: 250px !important;
display: flex !important;
align-items: center !important;
}
/* إخفاء الشعار المنفصل إذا كان موجوداً */
.pkp_site_name .is_img {
display: none !important;
}
/* ===== ترتيب الهيدر: صورة المبنى ثم القائمة البنية ===== */
/* الهيدر بالكامل */
.pkp_structure_head {
margin: 0 !important;
padding: 0 !important;
}
/* منطقة صورة المبنى */
.pkp_site_name_wrapper {
position: relative !important;
display: block !important;
height: 330px !important;
min-height: 330px !important;
margin: 0 !important;
padding: 0 !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* إلغاء أي تموضع للقائمة فوق الصورة */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary {
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin: 0 !important;
}
/* الشريط البني */
.pkp_navigation_primary_wrapper {
display: block !important;
width: 100% !important;
background: #725b46 !important;
clear: both !important;
}
/* بداية المحتوى مباشرة بعد الشريط */
.pkp_structure_content {
margin-top: 0 !important;
}
/* =========================================================
FINAL MOBILE FIX – TUAHJ JOURNAL
إصلاح ظهور الموقع على الهاتف
أضف هذا الكود في نهاية CSS
========================================================= */
@media (max-width: 768px) {
/* -----------------------------------------
   1. إصلاح البنر – إظهار الصورة كاملة
   ----------------------------------------- */

.pkp_site_name_wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    /* نفس تناسب صورة البنر */
    aspect-ratio: 1728 / 762 !important;

    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head {
    min-height: 0 !important;
    height: auto !important;
}

.pkp_site_name {
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* إخفاء أي شعار منفصل فوق البنر */
.pkp_site_name .is_img {
    display: none !important;
}


/* -----------------------------------------
   2. منع قص الصفحة أو خروجها عن شاشة الهاتف
   ----------------------------------------- */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* -----------------------------------------
   3. المحتوى الرئيسي على الهاتف
   ----------------------------------------- */

.pkp_structure_main {
    padding: 20px 16px !important;
}

.pkp_structure_sidebar {
    padding: 15px !important;
}

p,
li {
    font-size: 16px !important;
    line-height: 1.9 !important;
}

h1,
h2,
h3,
h4 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}


/* -----------------------------------------
   4. إصلاح الجداول
   ----------------------------------------- */

table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 13px !important;
}


/* -----------------------------------------
   5. القائمة البنية على الهاتف
   ----------------------------------------- */

.pkp_navigation_primary_wrapper {
    width: 100% !important;
    margin: 0 !important;
    background: #725b46 !important;
}

.pkp_navigation_primary {
    width: 100% !important;
    max-width: 100% !important;
}


/* -----------------------------------------
   6. القائمة المنسدلة في الهاتف
   ----------------------------------------- */

.pkp_navigation_primary > li > ul,
.pkp_navigation_primary > li > .dropdown-menu,
.pkp_navigation_primary ul ul {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
    transform: none !important;
}

.pkp_navigation_primary ul a {
    white-space: normal !important;
    padding: 14px 18px !important;
    text-align: right !important;
}


/* -----------------------------------------
   7. الصور داخل المحتوى
   ----------------------------------------- */

.pkp_structure_main img,
.pkp_structure_sidebar img,
.pkp_block img {
    max-width: 100% !important;
    height: auto !important;
}
}
/* =====================================================
MOBILE RESPONSIVE FIX – BANNER + MENU
===================================================== */
@media screen and (max-width: 768px) {
/* منع التمرير الأفقي */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* =========================
   JOURNAL HEADER / BANNER
   ========================= */

.pkp_structure_head {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.pkp_site_name,
.pkp_site_name_wrapper .pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name img,
.pkp_site_name_wrapper img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* =========================
   MOBILE MENU
   لا نغيّر position الخاصة بـ OJS
   ========================= */

.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    z-index: 9999 !important;
}

.pkp_navigation_primary,
.pkp_nav_list {
    z-index: 10000 !important;
}

.pkp_navigation_primary a,
.pkp_navigation_primary button,
.pkp_navigation_primary li {
    pointer-events: auto !important;
}

/* منع المحتوى من الظهور فوق القائمة */
.pkp_structure_content,
.pkp_structure_page {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================
   MAIN CONTENT
   ========================= */

.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_main {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* الصور داخل المحتوى */
.pkp_structure_main img,
.pkp_structure_sidebar img,
.pkp_block img {
    max-width: 100% !important;
    height: auto !important;
}
}
/* === إخفاء اسم المجلة الأبيض فوق البنر === */
.pkp_site_name .is_text {
  display: none !important;
}

/* === توحيد لون شريط الـ Navigation === */
.pkp_navigation_primary_wrapper {
  background-color: #725b46 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_primary {
  background-color: #725b46 !important;
  /* === توحيد لون شريط Navigation === */

.pkp_navigation_primary_wrapper {
    background-color: #725b46 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary {
    background-color: #725b46 !important;
}
.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  background-color: #725b46 !important;
  padding: 12px 18px;
  text-decoration: none;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background-color: #8a735d !important;
  color: #ffffff !important;
}

/* القوائم المنسدلة */
.pkp_navigation_primary ul {
  background-color: #725b46 !important;
  border: none !important;
}

.pkp_navigation_primary ul li a {
  color: #ffffff !important;
  background-color: #725b46 !important;
}

/* === لون الفوتر === */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  background-color: #5f4c3a !important;
  color: #ffffff !important;
}

.pkp_structure_footer a {
  color: #ffffff !important;
  text-decoration: none;
}

.pkp_structure_footer a:hover {
  text-decoration: underline;
}
/* =========================================================
   TUAHJ JOURNAL
   FINAL MOBILE NAVIGATION FIX
   OJS NATIVE MENU + BROWN COLOR
   ========================================================= */

@media screen and (max-width: 768px) {

    /* =========================================
       MOBILE NAVIGATION CONTAINER
       ========================================= */

    .pkp_site_nav_menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #725b46 !important;
        background-image: none !important;

        z-index: 99999 !important;

        overflow: visible !important;
    }


    /* =========================================
       NAVIGATION ROW
       ========================================= */

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #725b46 !important;
        background-image: none !important;
    }


    /* =========================================
       MAIN NAVIGATION
       ========================================= */

    #navigationPrimary,
    .pkp_navigation_primary {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #725b46 !important;
        background-image: none !important;

        list-style: none !important;
    }


    /* =========================================
       MAIN MENU ITEMS
       ========================================= */

    #navigationPrimary > li,
    .pkp_navigation_primary > li {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #725b46 !important;
        border: 0 !important;
    }


    /* =========================================
       MAIN MENU LINKS
       ========================================= */

    #navigationPrimary > li > a,
    .pkp_navigation_primary > li > a {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 15px 20px !important;

        background: #725b46 !important;
        color: #ffffff !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.16) !important;

        text-align: right !important;

        text-decoration: none !important;

        cursor: pointer !important;
        pointer-events: auto !important;
    }


    /* =========================================
       HOVER / ACTIVE
       ========================================= */

    #navigationPrimary > li > a:hover,
    #navigationPrimary > li > a:focus,
    #navigationPrimary > li > a:active,
    #navigationPrimary > li.is_current > a,
    #navigationPrimary > li > a[aria-expanded="true"] {

        background: #8a6b4d !important;
        color: #ffffff !important;
    }


    /* =================================================
       IMPORTANT:
       SUBMENUS ARE HIDDEN BY DEFAULT
       ================================================= */

    #navigationPrimary > li > ul,
    #navigationPrimary > li > .dropdown-menu,
    .pkp_navigation_primary > li > ul,
    .pkp_navigation_primary > li > .dropdown-menu {

        display: none !important;

        position: static !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #725b46 !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;

        overflow: hidden !important;
    }


    /* =================================================
       ONLY OPEN SUBMENU IS DISPLAYED
       OJS CONTROLS THE .open CLASS
       ================================================= */

    #navigationPrimary > li.open > ul,
    #navigationPrimary > li.open > .dropdown-menu,
    .pkp_navigation_primary > li.open > ul,
    .pkp_navigation_primary > li.open > .dropdown-menu {

        display: block !important;

        position: static !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        background: #725b46 !important;
        background-image: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    /* =================================================
       SUBMENU ITEMS
       ================================================= */

    #navigationPrimary > li > ul > li,
    #navigationPrimary > li > .dropdown-menu > li,
    .pkp_navigation_primary > li > ul > li,
    .pkp_navigation_primary > li > .dropdown-menu > li {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #725b46 !important;

        border: 0 !important;
    }


    /* =================================================
       SUBMENU LINKS
       ================================================= */

    #navigationPrimary > li > ul > li > a,
    #navigationPrimary > li > .dropdown-menu > li > a,
    .pkp_navigation_primary > li > ul > li > a,
    .pkp_navigation_primary > li > .dropdown-menu > li > a {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 13px 35px !important;

        background: #725b46 !important;
        color: #ffffff !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.12) !important;

        text-align: right !important;

        text-decoration: none !important;

        pointer-events: auto !important;
        cursor: pointer !important;
    }


    /* =================================================
       SUBMENU HOVER
       ================================================= */

    #navigationPrimary > li > ul > li > a:hover,
    #navigationPrimary > li > .dropdown-menu > li > a:hover,
    .pkp_navigation_primary > li > ul > li > a:hover,
    .pkp_navigation_primary > li > .dropdown-menu > li > a:hover {

        background: #8a6b4d !important;
        color: #ffffff !important;
    }


    /* =================================================
       SEARCH
       ================================================= */

    .pkp_navigation_search_wrapper {

        width: 100% !important;

        background: #725b46 !important;
        background-image: none !important;

        border: 0 !important;
    }


    .pkp_navigation_search_wrapper a {

        color: #ffffff !important;
        pointer-events: auto !important;
    }


    /* =================================================
       USER NAVIGATION
       ================================================= */

    .pkp_navigation_user_wrapper {

        background: #725b46 !important;
        background-image: none !important;
    }

    .pkp_navigation_user a {

        color: #ffffff !important;
        pointer-events: auto !important;
    }


    /* =================================================
       REMOVE WHITE BACKGROUNDS INSIDE MOBILE MENU
       ================================================= */

    .pkp_site_nav_menu *,
    .pkp_navigation_primary *,
    #navigationPrimary * {

        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu ul,
    .pkp_site_nav_menu li {

        background-color: #725b46 !important;
        background-image: none !important;
    }

}
/* =========================================================
   TUAHJ JOURNAL
   DESKTOP ONLY
   FINAL NAVIGATION + FOOTER COLOR
   MOBILE IS NOT TOUCHED
   ========================================================= */

@media only screen and (min-width: 769px) {

    /* =====================================================
       1. MAIN NAVIGATION BAR
       ===================================================== */

    .pkp_site_nav_menu,
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary,
    #navigationPrimary {

        background-color: #725b46 !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
    }


    /* =====================================================
       2. EVERY MAIN NAVIGATION ITEM
       ===================================================== */

    .pkp_navigation_primary > li,
    .pkp_navigation_primary > li.is_current,
    .pkp_navigation_primary > li.is_open,
    #navigationPrimary > li,
    #navigationPrimary > li.is_current,
    #navigationPrimary > li.is_open {

        background-color: #725b46 !important;
        background-image: none !important;
        border: none !important;
        box-shadow: none !important;
    }


    /* =====================================================
       3. EVERY MAIN NAVIGATION LINK
       INCLUDING CURRENT / OPEN / ACTIVE
       ===================================================== */

    .pkp_navigation_primary > li > a,
    .pkp_navigation_primary > li > a:visited,
    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus,
    .pkp_navigation_primary > li > a:active,
    .pkp_navigation_primary > li.is_current > a,
    .pkp_navigation_primary > li.is_open > a,
    .pkp_navigation_primary > li > a[aria-expanded="true"],

    #navigationPrimary > li > a,
    #navigationPrimary > li > a:visited,
    #navigationPrimary > li > a:hover,
    #navigationPrimary > li > a:focus,
    #navigationPrimary > li > a:active,
    #navigationPrimary > li.is_current > a,
    #navigationPrimary > li.is_open > a,
    #navigationPrimary > li > a[aria-expanded="true"] {

        background-color: #725b46 !important;
        background-image: none !important;

        color: #ffffff !important;

        border: none !important;
        box-shadow: none !important;
    }


    /* =====================================================
       4. REMOVE THE LIGHTER BROWN BOXES
       ===================================================== */

    .pkp_navigation_primary > li > a span,
    .pkp_navigation_primary > li > a strong,
    #navigationPrimary > li > a span,
    #navigationPrimary > li > a strong {

        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }


    /* =====================================================
       5. SEARCH AREA
       ===================================================== */

    .pkp_navigation_search_wrapper,
    .pkp_navigation_search_wrapper a {

        background-color: #725b46 !important;
        background-image: none !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
    }


    /* =====================================================
       6. DROPDOWN MENUS
       ===================================================== */

    .pkp_navigation_primary > li > ul,
    .pkp_navigation_primary > li > .dropdown-menu,
    #navigationPrimary > li > ul,
    #navigationPrimary > li > .dropdown-menu {

        background-color: #725b46 !important;
        background-image: none !important;

        border: none !important;
        box-shadow: none !important;
    }


    .pkp_navigation_primary > li > ul > li,
    .pkp_navigation_primary > li > .dropdown-menu > li,
    #navigationPrimary > li > ul > li,
    #navigationPrimary > li > .dropdown-menu > li {

        background-color: #725b46 !important;
        background-image: none !important;
        border: none !important;
    }


    .pkp_navigation_primary > li > ul a,
    .pkp_navigation_primary > li > .dropdown-menu a,
    #navigationPrimary > li > ul a,
    #navigationPrimary > li > .dropdown-menu a {

        background-color: #725b46 !important;
        background-image: none !important;

        color: #ffffff !important;

        border: none !important;
        box-shadow: none !important;
    }


    /* =====================================================
       7. FOOTER – BROWN
       ===================================================== */

    .pkp_structure_footer_wrapper,
    .pkp_structure_footer,
    .pkp_footer {

        background-color: #5F4C3A !important;
        background-image: none !important;

        color: #FCF8F1 !important;

        border: none !important;
        box-shadow: none !important;
    }


    /* Footer inner containers */

    .pkp_structure_footer_wrapper .container,
    .pkp_structure_footer .container,
    .pkp_footer .container {

        background-color: #5F4C3A !important;
        background-image: none !important;

        color: #FCF8F1 !important;
    }


    /* Footer blocks */

    .pkp_structure_footer_wrapper .pkp_block,
    .pkp_structure_footer .pkp_block,
    .pkp_footer .pkp_block {

        background-color: #5F4C3A !important;
        background-image: none !important;

        color: #FCF8F1 !important;

        border: none !important;
    }


    /* Footer text */

    .pkp_structure_footer_wrapper p,
    .pkp_structure_footer p,
    .pkp_footer p,
    .pkp_structure_footer_wrapper h1,
    .pkp_structure_footer_wrapper h2,
    .pkp_structure_footer_wrapper h3,
    .pkp_structure_footer_wrapper h4 {

        color: #FCF8F1 !important;
    }


    /* Footer links */

    .pkp_structure_footer_wrapper a,
    .pkp_structure_footer a,
    .pkp_footer a {

        color: #D6BD88 !important;
        background-color: transparent !important;
    }

}
/* === خيارات القائمة داخل شريط الـ Navigation === */
.pkp_navigation_primary > li > a {
  color: #725b46 !important;   /* النص بني */
  background-color: #ffffff !important; /* خلفية بيضاء لتمييز النص */
  padding: 12px 18px;
  text-decoration: none;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background-color: #8a735d !important; /* بني أفتح عند المرور */
  color: #ffffff !important;            /* النص أبيض عند المرور */
}

/* القوائم المنسدلة */
.pkp_navigation_primary ul {
  background-color: #ffffff !important;
  border: none !important;
}

.pkp_navigation_primary ul li a {
  color: #725b46 !important;   /* النص بني */
  background-color: #ffffff !important;
}

/* === لون الفوتر === */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  background-color: #725b46 !important; /* بني */
  color: #ffffff !important;            /* النص أبيض */
}

.pkp_structure_footer a {
  color: #ffffff !important;
  text-decoration: none;
}

.pkp_structure_footer a:hover {
  text-decoration: underline;
}

/* =========================================================
   TUAHJ FOOTER - FINAL COMPACT BROWN VERSION
   Targets the actual custom footer structure shown in DevTools:
   .pkp_structure_footer > .tuahj-footer > .footer-col
   ========================================================= */

/* Footer wrapper and custom footer */
.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_structure_footer .tuahj-footer,
.pkp_structure_footer_wrapper .tuahj-footer {
    background: #5F4C3A !important;
    background-color: #5F4C3A !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove large default spacing */
.pkp_structure_footer,
.pkp_structure_footer_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* Main custom footer layout */
.pkp_structure_footer .tuahj-footer,
.pkp_structure_footer_wrapper .tuahj-footer {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 18px 24px 12px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Every footer column */
.pkp_structure_footer .tuahj-footer .footer-col,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col {
    background: transparent !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 8px !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Headings */
.pkp_structure_footer .tuahj-footer .footer-col h1,
.pkp_structure_footer .tuahj-footer .footer-col h2,
.pkp_structure_footer .tuahj-footer .footer-col h3,
.pkp_structure_footer .tuahj-footer .footer-col h4,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col h1,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col h2,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col h3,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col h4 {
    color: #FFFFFF !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
}

/* Normal footer text */
.pkp_structure_footer .tuahj-footer .footer-col p,
.pkp_structure_footer .tuahj-footer .footer-col li,
.pkp_structure_footer .tuahj-footer .footer-col span,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col p,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col li,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col span {
    color: #FFFFFF !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 2px 0 !important;
    padding: 0 !important;
}

/* Links */
.pkp_structure_footer .tuahj-footer .footer-col a,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col a {
    color: #FFFFFF !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.pkp_structure_footer .tuahj-footer .footer-col a:hover,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* Copyright / licence column */
.pkp_structure_footer .tuahj-footer .footer-copyright,
.pkp_structure_footer .tuahj-footer .footer-license,
.pkp_structure_footer_wrapper .tuahj-footer .footer-copyright,
.pkp_structure_footer_wrapper .tuahj-footer .footer-license {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 8px !important;
    margin: 0 !important;
}

/* OJS / PKP column - exact selector confirmed in DevTools */
.pkp_structure_footer .tuahj-footer .footer-col.footer-ojs,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col.footer-ojs {
    background: transparent !important;
    color: #FFFFFF !important;
    padding: 0 8px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* OJS / PKP credit text */
.pkp_structure_footer .tuahj-footer .footer-col.footer-ojs,
.pkp_structure_footer .tuahj-footer .footer-col.footer-ojs p,
.pkp_structure_footer .tuahj-footer .footer-col.footer-ojs span,
.pkp_structure_footer .tuahj-footer .footer-col.footer-ojs a,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col.footer-ojs,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col.footer-ojs p,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col.footer-ojs span,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col.footer-ojs a {
    color: #FFFFFF !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* OJS / PKP logo */
.pkp_structure_footer .tuahj-footer .footer-col.footer-ojs img,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col.footer-ojs img {
    max-width: 90px !important;
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
    margin: 4px auto !important;
}

/* Prevent empty/placeholder blocks from creating large spaces */
.pkp_structure_footer .tuahj-footer .footer-col:empty,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col:empty {
    display: none !important;
}

/* Remove excessive spacing from lists */
.pkp_structure_footer .tuahj-footer ul,
.pkp_structure_footer .tuahj-footer ol,
.pkp_structure_footer_wrapper .tuahj-footer ul,
.pkp_structure_footer_wrapper .tuahj-footer ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style-position: inside !important;
}

/* Keep the footer compact on smaller screens */
@media (max-width: 900px) {
    .pkp_structure_footer .tuahj-footer,
    .pkp_structure_footer_wrapper .tuahj-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 14px 16px 10px !important;
    }
}

@media (max-width: 600px) {
    .pkp_structure_footer .tuahj-footer,
    .pkp_structure_footer_wrapper .tuahj-footer {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 12px 10px 8px !important;
    }

    .pkp_structure_footer .tuahj-footer .footer-col,
    .pkp_structure_footer_wrapper .tuahj-footer .footer-col {
        padding: 0 4px !important;
    }

    .pkp_structure_footer .tuahj-footer .footer-col h1,
    .pkp_structure_footer .tuahj-footer .footer-col h2,
    .pkp_structure_footer .tuahj-footer .footer-col h3,
    .pkp_structure_footer .tuahj-footer .footer-col h4,
    .pkp_structure_footer_wrapper .tuahj-footer .footer-col h1,
    .pkp_structure_footer_wrapper .tuahj-footer .footer-col h2,
    .pkp_structure_footer_wrapper .tuahj-footer .footer-col h3,
    .pkp_structure_footer_wrapper .tuahj-footer .footer-col h4 {
        font-size: 14px !important;
    }
}

/* FINAL OJS CREDIT OVERRIDE */
.pkp_structure_footer .tuahj-footer .footer-col.footer-ojs,
.pkp_structure_footer_wrapper .tuahj-footer .footer-col.footer-ojs {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}