/* ==========================================================
   Ninevah Journal of Legal Studies - OJS stylesheet (clean v5)
   Paste into: Settings > Website > Appearance > Advanced >
   "Journal style sheet".
   Sections: 1 Tokens | 2 Base | 3 Layout | 4 Header | 5 Nav
             6 Sidebar | 7 Content | 8 Hero | 9 Footer | 10 RTL
             11 Responsive | 12 Motion
   ========================================================== */

/* Fonts. For speed and reliability, self-host these two families
   on your server and replace this @import (use font-display: swap). */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');

/* ---------- 1. Tokens ---------- */
:root {
  --nj-ink:    #25331a;  /* headings, footer */
  --nj-green:  #3d5226;  /* primary, nav, links */
  --nj-green-2:#55703a;  /* hover */
  --nj-gold:   #c4a04e;  /* accent */
  --nj-gold-l: #efe3bf;  /* soft gold tint */
  --nj-bg:     #f4f1e6;  /* page background */
  --nj-card:   #fffdf7;
  --nj-text:   #26291f;
  --nj-muted:  #6b6e58;
  --nj-line:   #ddd8c3;
  --nj-radius: 6px;
  --nj-width:  1180px;
  --nj-shadow: 0 8px 28px rgba(37, 51, 26, .16);
}

/* ---------- 2. Base ---------- */
html { font-size: 16px; }
body {
  background: var(--nj-bg) !important;
  color: var(--nj-text);
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5,
.pkp_site_name, .page_title, .obj_article_summary .title {
  font-family: 'Amiri', 'Noto Naskh Arabic', Georgia, serif;
  color: var(--nj-ink);
  line-height: 1.4;
}
a { color: var(--nj-green); text-decoration: none; transition: color .15s; }
a:hover, a:focus { color: var(--nj-gold); }
:focus-visible { outline: 2px solid var(--nj-gold); outline-offset: 2px; }

/* ---------- 3. Layout: one consistent width ---------- */
.pkp_structure_page, .container, .pkp_structure_content, #wrapper, .wrapper {
  max-width: var(--nj-width);
  margin-inline: auto;
}

/* ---------- 4. Header ----------
   Banner takes the full width on its own row; ISSN line sits under it. */
html body :is(header, #header, .pkp_structure_head, .site-header) {
  padding: 0 !important;
  background: var(--nj-bg) !important;
  box-shadow: 0 1px 0 var(--nj-line);
  position: relative;
}
html body :is(header, #header, .pkp_structure_head) :is(.container, .row) {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: var(--nj-width) !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

/* Any wrapper that directly contains the banner image */
html body :is(header, #header, .pkp_structure_head) :is(div, a, h1, h2, span, figure):has(> img) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: -2 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
html body :is(header, #header, .pkp_structure_head) img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;      /* banner is ~3:1, never crop */
  object-fit: contain;
  margin: 0 !important;
  border-radius: 0 0 var(--nj-radius) var(--nj-radius);
}

/* ISSN row */
html body :is(header, #header) [class*="issn" i] {
  flex: 0 0 100% !important;
  order: 0 !important;
  width: 100% !important;
  text-align: center !important;
  background: var(--nj-card);
  color: var(--nj-muted);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .6rem 1rem !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--nj-line);
  direction: ltr;
}

/* Login / Register as pill buttons */
.pkp_navigation_user, #navigationUser, .user-links {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  padding: .6rem 1.25rem;
  font-size: .95rem;
  font-weight: 500;
}
:is(.pkp_navigation_user, #navigationUser, .user-links) a {
  color: var(--nj-green);
  padding: .2rem .9rem;
  border: 1px solid var(--nj-line);
  border-radius: 999px;
}
:is(.pkp_navigation_user, #navigationUser, .user-links) a:hover {
  background: var(--nj-green);
  border-color: var(--nj-green);
  color: #fff;
}

/* Logged-in user menu floats over the banner, top corner */
html body :is(header, #header) :is(.pkp_navigation_user_wrapper, #navigationUserWrapper, .user-menu) {
  position: absolute !important;
  top: 12px;
  inset-inline-start: 16px;
  z-index: 20;
  background: rgba(255, 253, 247, .92);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(37, 51, 26, .15);
}

/* ---------- 5. Primary navigation ---------- */
html body :is(nav, nav.navbar, header nav, #navbar, .navbar, .navbar-default,
              .pkp_navigation_primary_row, .pkp_navigation_primary_wrapper) {
  background: var(--nj-green) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 3px solid var(--nj-gold) !important;
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(37, 51, 26, .18);
}
html body :is(nav, .navbar) a {
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  background: transparent !important;
}
html body :is(nav, .navbar) a:hover { color: var(--nj-gold-l) !important; }

/* Gold underline on top-level items */
:is(.pkp_navigation_primary, .navbar-nav) > li > a {
  position: relative;
  padding: 1rem 1.25rem;
}
:is(.pkp_navigation_primary, .navbar-nav) > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 1.25rem;
  bottom: .55rem;
  height: 2px;
  background: var(--nj-gold);
  transform: scaleX(0);
  transition: transform .2s ease;
}
:is(.pkp_navigation_primary, .navbar-nav) > li > a:hover::after,
:is(.pkp_navigation_primary, .navbar-nav) > li > a:focus::after,
:is(.pkp_navigation_primary, .navbar-nav) > li:is(.current, .active) > a::after {
  transform: scaleX(1);
}

/* Fallback: any bar wrapping the menu links (kills stray yellow) */
html body :is(div, section, ul):has(a[href*="issue/archive"]):not(:has(img, main, aside, footer, h1, .pkp_structure_main, #main)) {
  background: var(--nj-green) !important;
  background-image: none !important;
  border-bottom: 3px solid var(--nj-gold) !important;
}

/* Dropdowns: dark readable text always */
html body :is(.dropdown-menu, [class*="dropdown"] > ul, header ul ul, nav ul ul, .pkp_navigation_user ul) {
  background: var(--nj-card) !important;
  border: 1px solid var(--nj-line) !important;
  border-top: 3px solid var(--nj-gold) !important;
  border-radius: 0 0 var(--nj-radius) var(--nj-radius) !important;
  padding: 0 !important;
  min-width: 220px;
  box-shadow: 0 10px 24px rgba(37, 51, 26, .18);
}
html body :is(.dropdown-menu, [class*="dropdown"] ul, header ul ul, nav ul ul, .pkp_navigation_user ul) li :is(a, span, button) {
  display: block !important;
  color: var(--nj-text) !important;
  -webkit-text-fill-color: var(--nj-text) !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nj-line) !important;
  border-radius: 0 !important;
  padding: .6rem 1rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: start !important;
  text-shadow: none !important;
  white-space: nowrap;
}
html body :is(.dropdown-menu, [class*="dropdown"] ul, header ul ul, nav ul ul) li:last-child > a {
  border-bottom: 0 !important;
}
html body :is(.dropdown-menu, [class*="dropdown"] ul, header ul ul, nav ul ul) li a:is(:hover, :focus) {
  background: var(--nj-gold-l) !important;
  color: var(--nj-ink) !important;
  -webkit-text-fill-color: var(--nj-ink) !important;
}
html body :is(.dropdown-menu, header ul ul) :is(.badge, [class*="count"], [class*="notif"]) {
  display: inline-block !important;
  background: var(--nj-green) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 999px;
  padding: 0 .55rem !important;
  border: 0 !important;
}

/* Search */
:is(.pkp_navigation_search_wrapper, .pkp_search, .navbar-form, #search) input[type="text"] {
  border: 1px solid transparent;
  border-radius: var(--nj-radius);
  padding: .45rem .8rem;
  font-family: inherit;
  min-width: 200px;
}
html body nav :is(button, input[type="submit"]),
:is(.pkp_navigation_search_wrapper, .pkp_search, .navbar-form, #search) button {
  min-width: 70px;
  background: var(--nj-gold) !important;
  color: var(--nj-ink) !important;
  border: 0 !important;
  border-radius: var(--nj-radius);
  padding: .45rem 1rem;
  font-weight: 600;
  cursor: pointer;
}
html body nav :is(button, input[type="submit"]):hover { background: var(--nj-gold-l) !important; }

/* ---------- 6. Sidebar blocks ---------- */
.pkp_structure_sidebar .pkp_block, .sidebar .block, aside .panel, #sidebar .block {
  background: var(--nj-card);
  border: 1px solid var(--nj-line);
  border-top: 3px solid var(--nj-gold);
  border-radius: var(--nj-radius);
  padding: 0;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.pkp_block .title, .block .title, .panel-heading, #sidebar .block h2 {
  background: var(--nj-green) !important;
  color: #fff !important;
  font-family: 'Amiri', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  padding: .6rem 1rem;
}
.pkp_block .content, .block .content, .panel-body { padding: .75rem 1rem; }
.pkp_block ul, .block ul { list-style: none; margin: 0; padding: 0; }
.pkp_block li a, .block li a {
  display: block;
  padding: .45rem .25rem;
  border-bottom: 1px solid var(--nj-line);
  font-size: .98rem;
}
.pkp_block li:last-child a, .block li:last-child a { border-bottom: 0; }
.pkp_block li a:hover, .block li a:hover {
  color: var(--nj-gold);
  padding-inline-start: .6rem;
  transition: padding .15s;
}
.block_language_toggle .current a, .language-toggle .current a, .pkp_block .current > a {
  color: var(--nj-green);
  font-weight: 600;
}

/* ---------- 7. Main content ---------- */
.pkp_structure_main, .main-content, #main {
  background: var(--nj-card);
  border: 1px solid var(--nj-line);
  border-radius: var(--nj-radius);
  padding: 1.5rem 1.75rem;
}
.page_title, .page h1 {
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--nj-gold-l);
}
.obj_article_summary, .obj_issue_summary {
  padding: 1rem 0;
  border-bottom: 1px solid var(--nj-line);
}
.obj_article_summary .title a { font-size: 1.25rem; font-weight: 700; }
.obj_article_summary :is(.authors, .meta) { color: var(--nj-muted); font-size: .95rem; }

/* Buttons */
.obj_galley_link, a.galley-link, .btn, .cmp_button, button.pkp_button {
  display: inline-block;
  background: var(--nj-green);
  color: #fff !important;
  border: 0;
  border-radius: var(--nj-radius);
  padding: .4rem 1.1rem;
  font-weight: 500;
  transition: background .15s, transform .15s;
}
:is(.obj_galley_link, a.galley-link, .btn, .cmp_button, button.pkp_button):hover {
  background: var(--nj-gold);
  color: var(--nj-ink) !important;
}

/* Tables */
table { border-collapse: collapse; width: 100%; }
th { background: var(--nj-bg); color: var(--nj-ink); text-align: start; }
th, td { padding: .6rem .8rem; border: 1px solid var(--nj-line); }

/* ---------- 8. Homepage hero ----------
   Option A: theme's "Homepage Image" field (CSS only)
   Option B: .nj-hero block pasted into Journal Summary */
html body .homepage_image { margin: 0 0 1.5rem !important; padding: 0 !important; }
html body .homepage_image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--nj-radius);
  box-shadow: var(--nj-shadow);
}

.nj-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.75rem;
  border-radius: var(--nj-radius);
  background: var(--nj-ink);
  box-shadow: var(--nj-shadow);
}
.nj-hero > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 340px;
  object-fit: cover;
  object-position: center 45%;
}
.nj-hero__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4rem 2rem 1.75rem;
  background: linear-gradient(to top,
    rgba(37, 51, 26, .94) 0%, rgba(37, 51, 26, .72) 50%, rgba(37, 51, 26, 0) 100%);
}
.nj-hero__body :is(h1, .nj-hero__title) {
  margin: 0 0 .25rem;
  padding: 0;
  border: 0;
  color: #fff;
  font-family: 'Amiri', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.3;
}
.nj-hero__sub { margin: 0 0 1.1rem; color: var(--nj-gold-l); font-size: 1.05rem; line-height: 1.6; }
.nj-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.nj-hero a.nj-btn {
  display: inline-block;
  padding: .55rem 1.5rem;
  border-radius: var(--nj-radius);
  border: 2px solid var(--nj-gold);
  background: var(--nj-gold);
  color: var(--nj-ink) !important;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.nj-hero a.nj-btn:hover { background: var(--nj-gold-l); border-color: var(--nj-gold-l); }
.nj-hero a.nj-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .7); }
.nj-hero a.nj-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* ---------- 9. Footer ---------- */
.pkp_structure_footer_wrapper, footer, #footer {
  background: var(--nj-ink);
  color: #d8dcc8;                 /* olive-tinted, replaces the bluish #c9cde3 */
  margin-top: 2rem;
  border-top: 4px solid var(--nj-gold);
  padding: 1.5rem 0;
}
:is(.pkp_structure_footer_wrapper, footer, #footer) a { color: var(--nj-gold-l); }
:is(.pkp_structure_footer_wrapper, footer, #footer) a:hover { color: #fff; }

/* ---------- 10. RTL refinements ---------- */
[dir="rtl"] body, html[lang^="ar"] body { text-align: right; }
[dir="rtl"] .pkp_navigation_user, html[lang^="ar"] .pkp_navigation_user { justify-content: flex-start; }
html[lang^="ar"] :is(.page_title, .obj_article_summary .title) { letter-spacing: 0; }
[dir="rtl"] :is(input[type="email"], input[type="url"], input[type="password"]) {
  direction: ltr;
  text-align: right;
}
/* Latin text inside Arabic pages (DOI, English titles) */
.doi, [lang="en"] { direction: ltr; unicode-bidi: isolate; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 991px) {
  .pkp_structure_main, .main-content { padding: 1rem; }
  :is(.pkp_navigation_primary, .navbar-nav) > li > a { padding: .75rem 1rem; }
}
@media (max-width: 767px) {
  .nj-hero > img { min-height: 0; }
  .nj-hero__body { position: static; padding: 1.1rem 1rem 1.25rem; background: var(--nj-ink); }
  html body header :is(.pkp_navigation_user_wrapper, #navigationUserWrapper, .user-menu) {
    position: static !important;
    margin: .5rem auto;
  }
}
@media (max-width: 575px) {
  html { font-size: 15px; }
  .page_title, .page h1 { font-size: 1.6rem; }
  .pkp_navigation_user { justify-content: center; }
}

/* ---------- 12. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}