@charset "utf-8";

/* IMPORTANT: @import rules must be the first statements in the file (only
   @charset may precede them). If anything else comes before them, browsers
   silently ignore the imports entirely. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300..900&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ==========================================================================
   REMAH JOURNAL — PROFESSIONAL THEME SYSTEM v2
   Academic, editorial look: deep forest green + warm gold accent,
   card-based article listings, refined sidebar blocks, polished footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* -- Palette -- */
  --color-primary:        #1f6e46;   /* Deep editorial green (header/nav) */
  --color-primary-dark:   #164f33;   /* Darker shade — borders, footer */
  --color-primary-light:  #2f9e66;   /* Lighter accent green — hovers, links */
  --color-accent:         #c9a227;   /* Warm gold — used sparingly for prestige */
  --color-accent-dark:    #a9861c;

  --color-surface:        #ffffff;
  --color-surface-alt:    #f6f8f6;   /* Soft off-white page background */
  --color-border:         #e2e6e3;

  --color-text:           #202623;
  --color-text-muted:     #5b645d;
  --color-text-light:     #ffffff;
  --color-text-light-70:  rgba(255, 255, 255, 0.82);
  --color-text-light-50:  rgba(255, 255, 255, 0.6);

  /* -- Typography -- */
  --font-family-base: "Cairo", "Segoe UI", sans-serif;       /* Body text — clean, modern, full Arabic + Latin */
  --font-family-heading: "Amiri", "Georgia", serif;          /* Headings — classic academic serif, Arabic + Latin */
  --font-size-base: 16px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-base: 1.7;

  /* -- Layout -- */
  --spacing-base: 1rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(20, 40, 30, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 40, 30, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 40, 30, 0.12);
  --transition-speed: 0.25s;
  --max-width: 1220px;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY & RESETS
   -------------------------------------------------------------------------- */

/* Force Cairo everywhere EXCEPT icon fonts. Icon fonts (Font Awesome,
   OJS's own icon classes, etc.) render glyphs by mapping a special
   character code to a shape in their OWN font — if we force Cairo onto
   them too, Cairo has no glyph for that code point and you get an empty
   box (☐) instead of the icon. The :not() list below skips any element
   whose class looks icon-related, so the theme's real icon font still
   applies to it and its ::before/::after content. */
*:not([class*="icon" i]):not([class*="fa-" i]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.material-icons):not(.glyphicon),
*:not([class*="icon" i]):not([class*="fa-" i]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.material-icons):not(.glyphicon)::before,
*:not([class*="icon" i]):not([class*="fa-" i]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.material-icons):not(.glyphicon)::after {
  font-family: var(--font-family-base) !important;
  font-optical-sizing: auto;
  font-style: normal;
  box-sizing: border-box;
}

/* Belt-and-suspenders fix for icons: OJS already bundles its own working
   icon font (Font Awesome 4, font-family "FontAwesome") — this rule forces
   THAT correct name back onto any .fa / fa-* element, with !important,
   placed after the rule above so it always wins regardless of source
   order elsewhere on the page. This is what actually fixes the empty-box
   icons (fa-book, fa-eye, etc.) */
.fa,
.fa::before,
.fa::after,
[class^="fa-"],
[class*=" fa-"],

[class^="fa-"]::before,
[class*=" fa-"]::before {
  font-family: "FontAwesome" !important;
}

/* Headings, nav brand, and article/section/issue titles use the serif
   heading font for a more editorial, academic-journal feel.
   !important is needed because OJS's own theme CSS is more specific
   than a bare "*" selector and would otherwise win. */
h1, h2, h3, h4, h5, h6,
.pkp_site_name,
.pkp_site_name a,
.footer-col h3,
.obj_article_summary .title,
.tocArticle .title,
.tocArticle .obj_article_details h3,
.sidebar .pkp_block h2,
.sidebar h2,
.obj_issue_summary .title,
.obj_issue_summary .series,
.issue .title,
.page .issues_archive .title,
#issuesForYear .title {
  font-family: var(--font-family-heading) !important;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  line-height: var(--line-height-base);
}

::selection {
  background-color: var(--color-accent);
  color: #1a1a1a;
}

a {
  color: var(--color-primary);
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--color-primary-light);
}

/* Consistent, visible focus ring for accessibility (keyboard nav) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. SITE HEADER & BRANDING
   -------------------------------------------------------------------------- */
.pkp_structure_head {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-bottom: 3px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}

.pkp_site_name a {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
}

/* ISSN injection under the journal name (desktop only) */
@media (min-width: 992px) {
  .pkp_site_name .is_img::after {
    content: "مجلة رماح للبحوث والدراسات \A ISSN Print: 2392-5418  |  ISSN Online: 7423-2520";
    display: block;
    margin-top: 8px;
    font-size: 0.92rem;
    color: var(--color-text-light-70);
    white-space: pre-line;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    letter-spacing: 0.2px;
  }
}

/* --------------------------------------------------------------------------
   4. NAVIGATION SYSTEM
   -------------------------------------------------------------------------- */
.pkp_navigation_primary_wrapper {
  background-color: var(--color-primary-dark);
  color: var(--color-text-light);
  padding-left: 0;
  padding-right: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 992px) {
  .pkp_navigation_primary > li > a {
    position: relative;
    margin: 0.35rem 0.35em 0;
    padding: 0.75rem 0.9em;
    color: var(--color-text-light-70);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                background-color var(--transition-speed) ease;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    color: var(--color-text-light);
    border-bottom-color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  /* Highlight the active page's link */
  .pkp_navigation_primary > li.current > a {
    color: var(--color-text-light);
    border-bottom-color: var(--color-accent);
  }
}

/* Search bar alignment + refinement */
@media (min-width: 992px) {
  .pkp_navigation_search_wrapper {
    float: left;
    margin: 0;
    padding: 0;
    border: none;
  }
}

.pkp_search input[type="text"] {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-light);
}


.pkp_search input[type="text"]::placeholder {
  color: var(--color-text-light-50);
}

body[dir="rtl"] .pkp_head_wrapper .pkp_search {
  left: 0;
  right: auto;
  text-align: left;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   5. HOMEPAGE — ABOUT / CURRENT ISSUE / SIDEBAR
   -------------------------------------------------------------------------- */

/* "About the journal" intro block gets a card treatment */
#homepageAbout,
.page_index .journal_description {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
}

.page_index h2,
.pkp_structure_main h2 {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1.4rem;
}

.page_index h2::after,
.pkp_structure_main h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0; /* mirrors correctly under RTL via the block below */
  width: 60px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px;
}

body[dir="ltr"] .page_index h2::after,
body[dir="ltr"] .pkp_structure_main h2::after {
  right: auto;
  left: 0;
}

/* Journal cover image — subtle frame + lift on hover */
.page_index img,
.sidebar img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.page_index img:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Article listing — turn each entry into a clean card */
.obj_article_summary,
.obj_issue_toc .tocArticle {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.obj_article_summary:hover,
.obj_issue_toc .tocArticle:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.obj_article_summary .title,
.tocArticle .title,
.tocArticle .obj_article_details h3 {
  font-weight: var(--font-weight-bold);
  font-size: 1.08rem;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}

.obj_article_summary .title a,
.tocArticle .title a {
  color: var(--color-primary-dark);
}

.obj_article_summary .title a:hover,
.tocArticle .title a:hover {
  color: var(--color-primary-light);
}

.obj_article_summary .authors,
.tocArticle .authors {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

/* Page-range badge (e.g. "21-42") */
.obj_article_summary .pages,
.tocArticle .pages {
  display: inline-block;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-inline-end: 0.5rem;
}

/* PDF / galley download links styled as pill buttons */
.galleys_links,
.tocArticle .galleys_links {
  margin-top: 0.9rem;
}

.galleys_links a,
.tocArticle .galleys_links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--color-primary);
  color: var(--color-text-light) !important;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.galleys_links a:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-1px);
}

/* Table of Contents spacing */
.obj_issue_toc .galleys_links {
  margin-top: calc(var(--spacing-base) * 1.4);
}

/* Issue archive listing (issue/archive page) — same card treatment as articles */
.obj_issue_summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.obj_issue_summary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.obj_issue_summary .cover img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.obj_issue_summary .title {
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin-bottom: 0.3rem;
}

.obj_issue_summary .series {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   6. SIDEBAR BLOCKS (Keywords, Most Read, Archive by Year, etc.)
   -------------------------------------------------------------------------- */
.sidebar .pkp_block,
.pkp_block.block_information,
.pkp_block.block_custom {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.sidebar .pkp_block h2,
.sidebar h2 {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  text-transform: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
  display: inline-block;
}

/* "Most Read" list — numbered rank badges + view counts */
.pkp_block .most_read_item,
.sidebar ol li,
.sidebar ul li {
  list-style: none;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.9rem;
}

.sidebar ol li:last-child,
.sidebar ul li:last-child {
  border-bottom: none;
}

.sidebar .pub_id,
.sidebar .views,
.sidebar .value {
  display: inline-block;
  color: var(--color-accent-dark);
  font-weight: var(--font-weight-bold);
  font-size: 0.85rem;
}

/* Issue archive by year — de-clutter into a simple accented list */
.sidebar .issues_by_year a {
  display: block;
  padding: 0.35rem 0;
  color: var(--color-text-muted);
}

.sidebar .issues_by_year a:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   7. UTILITIES & OVERRIDES
   -------------------------------------------------------------------------- */
.pkp_brand_footer img {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. PROFESSIONAL FOOTER
   -------------------------------------------------------------------------- */
.pkp_structure_footer_wrapper {
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, #123c28 100%);
  color: #e0e0e0;
  padding: 3.5rem 0 2rem;
  border-top: 4px solid var(--color-accent);
  font-family: var(--font-family-base);
}

.pkp_brand_footer {
  display: none !important;
}

.custom-footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  text-align: right; /* RTL alignment */
}

.footer-col h3 {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5rem;
  display: inline-block;
}

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

.footer-col ul li {
  margin-bottom: 0.75rem;
}

.footer-col ul li a {
  position: relative;
  color: #b9d8c5;
  text-decoration: none;
  transition: color var(--transition-speed) ease, padding var(--transition-speed) ease;
  font-size: 0.94rem;
}

.footer-col ul li a:hover {
  color: #fff;
  padding-right: 6px; /* subtle RTL hover shift */
}

.footer-col p {
  line-height: 1.7;
  font-size: 0.9rem;
  color: #cfd8d2;
  margin-bottom: 0.9rem;
}

.footer-col p strong {
  color: #fff;
}

/* Copyright bar */
.footer-copyright {
  max-width: var(--max-width);
  margin: 2.5rem auto 0;
  padding: 1.5rem 15px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

body[dir="rtl"] .custom-footer-container {
  direction: rtl;
  text-align: right;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE TWEAKS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .pkp_structure_head {
    padding: 0.75rem 0;
  }

  #homepageAbout,
  .page_index .journal_description,
  .obj_article_summary,
  .sidebar .pkp_block {
    padding: 1rem 1.15rem;
  }

  .custom-footer-container {
    text-align: center;
    gap: 2rem;
  }

  .footer-col h3::after {
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   10. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .pkp_structure_head,
  .pkp_navigation_primary_wrapper,
  .pkp_structure_footer_wrapper,
  .sidebar {
    display: none !important;
  }

  .obj_article_summary {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}



@media (min-width: 768px) {
    body[dir="rtl"] .obj_article_summary {
        padding-right: 0;
        padding-left: 5em;
        padding: 10px;
    }
}


.pkp_block .title {
    display: block;
    margin-bottom: .714rem;
    margin-top: 0;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    font-size: 1.143rem;
    font-weight: 700;
    line-height: 1.43rem;
    color: rgba(0, 0, 0, 0.54);
    background-color: #ededed;
    padding: 10px;
    border-radius: 10px;
}



@media (min-width: 992px) {
    .pkp_block {
        padding: 2.143rem;
        background-color: #fff;
        margin: 10px;
      
		
    }
}


.pkp_site_nav_menu a {
    display: inline-block;
    padding: .125rem 0;
    color: rgb(255 255 255 / 84%);
    text-decoration: none;
    padding: 5px;
}


.pkp_site_nav_toggle>span:before, .pkp_site_nav_toggle>span:after {
   
    background: rgb(255 255 255 / 84%);
} 


.pkp_site_nav_toggle>span {
    
    border-bottom: 3px solid rgb(255 255 255 / 84%);
    
}