/**
 * JEME Official Institutional Theme Stylesheet
 * Journal of Energy Management and Economics
 * Basrah University for Oil and Gas
 * WCAG 2.1 AA Compliant - Visual Identity Standard 2026
 */

:root {
  --jeme-deep-oil-blue: #0A2239;
  --jeme-dark-emerald: #0D5C75;
  --jeme-light-emerald: #178582;
  --jeme-industrial-gray: #F4F6F8;
  --jeme-industrial-border: #E2E8F0;
  --jeme-amber-orange: #E06A3B;
  --jeme-dark-orange: #B04A22;
  --jeme-charcoal: #1E293B;
  --jeme-dark-footer: #061321;
  --jeme-white: #FFFFFF;
  --jeme-radius-sm: 4px;
  --jeme-radius-md: 8px;
  --jeme-radius-lg: 12px;
  --jeme-shadow-sm: 0 1px 3px rgba(10, 34, 57, 0.08);
  --jeme-shadow-md: 0 4px 12px rgba(10, 34, 57, 0.12);
  --jeme-transition: all 0.25s ease-in-out;
}

/* ==========================================================================
   1. Typography & Global Resets
   ========================================================================== */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--jeme-charcoal);
  background-color: #FAFAFA;
  line-height: 1.65;
  font-size: 15px;
}

/* Arabic Language Support (RTL) */
html[lang="ar"], body.rtl, [dir="rtl"] {
  font-family: 'IBM Plex Sans Arabic', 'Cairo', -apple-system, sans-serif;
  text-align: right;
  direction: rtl;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--jeme-deep-oil-blue);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.3;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700;
}

a {
  color: var(--jeme-dark-emerald);
  text-decoration: none;
  transition: var(--jeme-transition);
}

a:hover, a:focus {
  color: var(--jeme-dark-orange);
  text-decoration: underline;
}

/* Selection */
::selection {
  background: var(--jeme-dark-emerald);
  color: var(--jeme-white);
}

/* ==========================================================================
   2. Header & Navigation Bar
   ========================================================================== */

.pkp_structure_head,
.navbar-default,
header.pkp_nav_header,
.app__header {
  background-color: var(--jeme-deep-oil-blue) !important;
  border-bottom: 3px solid var(--jeme-dark-emerald);
  box-shadow: var(--jeme-shadow-md);
}

/* Top Institutional Ribbon */
.jeme-institutional-bar {
  background-color: #051422;
  color: #94A3B8;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.jeme-institutional-bar a {
  color: #CBD5E1;
  margin: 0 8px;
}

.jeme-institutional-bar a:hover {
  color: #FFFFFF;
}

/* Brand Name / Journal Title */
.navbar-brand,
.pkp_site_name,
.pkp_site_name a {
  color: #FFFFFF !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

html[lang="ar"] .navbar-brand,
html[lang="ar"] .pkp_site_name a {
  font-family: 'Cairo', sans-serif;
  font-size: 22px;
}

/* Navigation Links */
.navbar-default .navbar-nav > li > a,
.pkp_navigation_primary > li > a,
.pkp_nav_menu > li > a {
  color: #E2E8F0 !important;
  font-weight: 500;
  font-size: 14px;
  padding: 15px 16px;
  transition: var(--jeme-transition);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.pkp_navigation_primary > li > a:hover {
  color: #FFFFFF !important;
  background-color: rgba(13, 92, 117, 0.6) !important;
  border-bottom: 3px solid var(--jeme-amber-orange);
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--jeme-deep-oil-blue);
  border: 1px solid var(--jeme-dark-emerald);
  box-shadow: var(--jeme-shadow-md);
  border-radius: var(--jeme-radius-sm);
}

.dropdown-menu > li > a {
  color: #E2E8F0;
  padding: 10px 18px;
  font-size: 13.5px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--jeme-dark-emerald);
  color: #FFFFFF;
}

/* User & Language Navigation */
.pkp_navigation_user > li > a,
.navbar-right > li > a {
  color: #CBD5E1 !important;
  font-size: 13px;
}

/* ==========================================================================
   3. Buttons & Interactive Elements (WCAG Compliant)
   ========================================================================== */

/* Primary CTA Button (Amber Orange) */
.btn-primary,
.btn-submit,
a.btn-primary,
button.btn-primary {
  background-color: var(--jeme-amber-orange) !important;
  border-color: var(--jeme-amber-orange) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: var(--jeme-radius-sm);
  padding: 9px 20px;
  box-shadow: 0 2px 4px rgba(224, 106, 59, 0.25);
  transition: var(--jeme-transition);
}

.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover {
  background-color: var(--jeme-dark-orange) !important;
  border-color: var(--jeme-dark-orange) !important;
  box-shadow: 0 4px 8px rgba(176, 74, 34, 0.35);
  transform: translateY(-1px);
}

/* Secondary Button (Emerald) */
.btn-secondary,
.btn-default,
a.btn-default {
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--jeme-dark-emerald) !important;
  color: var(--jeme-dark-emerald) !important;
  font-weight: 600;
  border-radius: var(--jeme-radius-sm);
  padding: 8px 18px;
  transition: var(--jeme-transition);
}

.btn-secondary:hover,
.btn-default:hover,
a.btn-default:hover {
  background-color: var(--jeme-dark-emerald) !important;
  color: #FFFFFF !important;
}

/* Galley / Download PDF Button */
.obj_galley_link,
a.obj_galley_link,
.galley_link {
  background: linear-gradient(135deg, var(--jeme-dark-emerald) 0%, #083b4c 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 18px;
  border-radius: var(--jeme-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  box-shadow: var(--jeme-shadow-sm);
}

.obj_galley_link:hover {
  background: var(--jeme-dark-orange) !important;
  color: #FFFFFF !important;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(176, 74, 34, 0.3);
}

/* ==========================================================================
   4. Article Cards & Lists
   ========================================================================== */

.obj_article_summary,
.article-summary,
.c-card--article,
.panel-default {
  background-color: #FFFFFF;
  border: 1px solid var(--jeme-industrial-border) !important;
  border-radius: var(--jeme-radius-md);
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: var(--jeme-shadow-sm);
  transition: var(--jeme-transition);
  position: relative;
}

.obj_article_summary:hover,
.article-summary:hover {
  border-color: var(--jeme-dark-emerald) !important;
  box-shadow: var(--jeme-shadow-md);
  transform: translateY(-2px);
}

/* Article Title */
.obj_article_summary .title,
.article-summary-title,
.article-summary .title a {
  color: var(--jeme-deep-oil-blue) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 6px;
  margin-bottom: 10px;
}

.obj_article_summary .title a:hover {
  color: var(--jeme-dark-orange) !important;
}

/* Authors */
.obj_article_summary .authors,
.article-summary-authors {
  color: #475569;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
}

/* Badges & Tags */
.badge,
.badge-secondary,
.jeme-badge {
  background-color: var(--jeme-industrial-gray);
  color: var(--jeme-dark-emerald);
  border: 1px solid var(--jeme-industrial-border);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}

.badge-oa,
.badge-diamond {
  background-color: rgba(23, 133, 130, 0.12);
  color: var(--jeme-dark-emerald);
  border: 1px solid rgba(23, 133, 130, 0.3);
  font-weight: 700;
}

/* DOI text link */
.doi, .item.doi a {
  color: var(--jeme-dark-orange);
  font-family: 'Inter', monospace;
  font-size: 13px;
  font-weight: 600;
}

/* ==========================================================================
   5. Article Details Page (Single Article View)
   ========================================================================== */

.obj_article_details {
  background: #FFFFFF;
  border: 1px solid var(--jeme-industrial-border);
  border-radius: var(--jeme-radius-md);
  padding: 35px;
  margin-top: 20px;
  box-shadow: var(--jeme-shadow-sm);
}

.obj_article_details .page_title {
  color: var(--jeme-deep-oil-blue);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 15px;
}

/* Metadata Box (Received, Accepted, Published) */
.jeme-metadata-box,
.article-details-block {
  background-color: var(--jeme-industrial-gray);
  border-radius: var(--jeme-radius-md);
  border-left: 4px solid var(--jeme-dark-emerald);
  padding: 18px 22px;
  margin: 25px 0;
}

html[lang="ar"] .jeme-metadata-box {
  border-left: none;
  border-right: 4px solid var(--jeme-dark-emerald);
}

.jeme-metadata-item {
  display: inline-block;
  margin-right: 25px;
  font-size: 13.5px;
  color: #334155;
}

html[lang="ar"] .jeme-metadata-item {
  margin-right: 0;
  margin-left: 25px;
}

.jeme-metadata-label {
  font-weight: 700;
  color: var(--jeme-deep-oil-blue);
}

/* Abstract Box */
.item.abstract {
  margin: 25px 0;
  padding: 20px 0;
  border-top: 1px solid var(--jeme-industrial-border);
  border-bottom: 1px solid var(--jeme-industrial-border);
}

.item.abstract h2 {
  font-size: 18px;
  color: var(--jeme-dark-emerald);
  margin-bottom: 12px;
}

.item.abstract p {
  color: var(--jeme-charcoal);
  font-size: 15.5px;
  line-height: 1.75;
  text-align: justify;
}

/* License & Copyright Block */
.item.copyright {
  background-color: rgba(23, 133, 130, 0.08);
  border: 1px dashed var(--jeme-light-emerald);
  border-radius: var(--jeme-radius-sm);
  padding: 14px 18px;
  margin-top: 25px;
  font-size: 13.5px;
  color: #1E293B;
}

/* ==========================================================================
   6. Sidebar Blocks
   ========================================================================== */

.pkp_structure_sidebar .pkp_block {
  background: #FFFFFF;
  border: 1px solid var(--jeme-industrial-border);
  border-radius: var(--jeme-radius-md);
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: var(--jeme-shadow-sm);
}

.pkp_structure_sidebar .title {
  color: var(--jeme-deep-oil-blue);
  font-size: 16px;
  font-weight: 700;
  border-bottom: 2px solid var(--jeme-dark-emerald);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

/* ==========================================================================
   7. Footer
   The journal footer (Settings > Website > Appearance > Footer) is written as
   three columns (.jeme-footer) and a bottom line (.jeme-footer__bottom).
   ========================================================================== */

.pkp_structure_footer_wrapper {
  background-color: var(--jeme-dark-footer);
  border-top: 4px solid var(--jeme-dark-emerald);
  margin-top: 60px;
}

.pkp_structure_footer,
footer {
  background-color: var(--jeme-dark-footer) !important;
  color: #94A3B8;
  padding: 40px 0 20px 0;
  font-size: 14px;
}

.pkp_structure_footer .pkp_footer_content {
  padding: 0 30px;
}

.jeme-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}

.jeme-footer h4,
.pkp_structure_footer h4 {
  color: #F8FAFC;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--jeme-light-emerald);
  display: inline-block;
}

.jeme-footer p {
  margin: 0 0 10px 0;
  line-height: 1.8;
}

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

.jeme-footer li {
  margin: 0 0 8px 0;
  line-height: 1.6;
}

.jeme-footer__label {
  color: #64748B;
  display: inline-block;
  min-width: 70px;
}

.jeme-footer__bottom {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: #64748B;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.jeme-footer__bottom p {
  margin: 0;
}

.pkp_structure_footer a,
footer a {
  color: #CBD5E1;
  text-decoration: none;
  transition: var(--jeme-transition);
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus,
footer a:hover {
  color: var(--jeme-amber-orange);
  text-decoration: underline;
}

.pkp_structure_footer hr,
footer hr {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 25px 0 15px 0;
}

/* The "powered by OJS" mark stays, smaller and calmer */
.pkp_brand_footer {
  padding: 16px 30px 0 30px;
  opacity: 0.6;
}

.pkp_brand_footer img {
  max-width: 110px;
  filter: brightness(0) invert(1);   /* the dark OJS mark, readable on the dark footer */
}

@media (max-width: 992px) {
  .jeme-footer {
    grid-template-columns: 1fr 1fr;
  }
  .jeme-footer > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 576px) {
  .jeme-footer {
    grid-template-columns: 1fr;
  }
  .pkp_structure_footer .pkp_footer_content {
    padding: 0 16px;
  }
}

/* ==========================================================================
   8. Mobile Responsiveness
   ========================================================================== */

@media (max-width: 768px) {
  .navbar-brand {
    font-size: 17px !important;
  }
  .jeme-hero-banner {
    padding: 20px !important;
  }
  .obj_article_summary {
    padding: 16px;
  }
  .obj_article_details {
    padding: 20px;
  }
  .jeme-metadata-item {
    display: block;
    margin: 6px 0;
  }
}

/* ==========================================================================
   9. Mixed-language text
   Each reference, title or abstract paragraph takes the direction of its own
   first letters: Arabic references on an English page (and English ones on an
   Arabic page) keep their punctuation and year ranges in the right order.
   ========================================================================== */

.item.references .value p,
.item.abstract .value p,
.obj_article_summary .title,
.cmp_article_list .title {
  unicode-bidi: plaintext;
}

/* ==========================================================================
   10. Article page layout
   Beside the sidebar the main column is too narrow for OJS's two-column
   article layout (60% text + a 300px details panel): the panel dropped below
   and left the abstract in a thin strip. Text first, full width; the details
   (PDF, issue, licence, how to cite) below it in a responsive grid.
   ========================================================================== */

.obj_article_details .main_entry,
.obj_article_details .entry_details {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
}

.obj_article_details .entry_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--jeme-industrial-border) !important;
  padding-top: 16px;
}

.obj_article_details .entry_details .item {
  padding-left: 0;
  padding-right: 0;
}

.obj_article_details .entry_details .item.citation,
.obj_article_details .entry_details .item.copyright {
  grid-column: 1 / -1;
}

.obj_article_details .entry_details .item.cover_image img {
  max-width: 180px;
  height: auto;
}

/* ==========================================================================
   11. Hidden helper text on Arabic pages
   OJS hides screen-reader text and skip links 2000px off-screen; on right-to-left
   pages that made the search page 3,220px wide (a horizontal scrollbar). They are
   hidden in place instead, still read by screen readers, and the skip links still
   appear on keyboard focus.
   ========================================================================== */

[dir="rtl"] .pkp_screen_reader,
[dir="rtl"] .cmp_skip_to_content a:not(:focus),
[dir="rtl"] .page_search .from label,
[dir="rtl"] .page_search .to label {
  position: absolute !important;
  left: auto !important;
  right: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Long URLs in references and citations wrap instead of widening the page on phones */
.obj_article_details .item.references,
.obj_article_details .item.citation,
.obj_article_details .item.abstract {
  overflow-wrap: anywhere;
}