@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

/* JEIDS - Journal of Engineering Informatics and Data Systems
   Accent: --blue #253f74
   Magazine alignment with ijpress.com landing
   Tokens lifted verbatim from IJPRESS/LANDING PAGE/SAMPLE PAGE/ijpress-scholarly-launch-sample.html lines 21-41
   2026-04-30 */

/* ---------- tokens ---------- */
:root {
  --paper:     #fbf8f1;
  --paper-2:   #f0eadf;
  --ink:       #18212b;
  --muted:     #667180;
  --line:      #d9d0c2;
  --line-dark: #afa390;
  --white:     #ffffff;
  --charcoal:  #111820;

  --teal:  #135e59;
  --blue:  #253f74;
  --red:   #8e2f2f;
  --plum:  #5c4267;
  --gold:  #b9852c;
  --green: #647745;
  --rose:  #c46155;

  --accent:    var(--blue);

  --shadow:    0 24px 60px rgba(24, 33, 43, 0.12);
  --shadow-sm: 0 2px 6px rgba(24, 33, 43, 0.06);
  --serif:     "Libre Baskerville", Georgia, serif;
  --sans:      "IBM Plex Sans", Arial, sans-serif;
  --mono:      "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ---------- light reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
a { transition: color 0.15s ease; }

/* ---------- body / page ---------- */
html { scroll-behavior: smooth; }

body,
.pkp_structure_page {
  background:
    linear-gradient(90deg, rgba(24,33,43,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(24,33,43,0.03) 1px, transparent 1px),
    var(--paper) !important;
  background-size: 42px 42px !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

.pkp_structure_main { background: transparent !important; }

a { color: var(--accent) !important; }
a:hover { color: var(--ink) !important; }

h1, h2, h3, h4 {
  font-family: var(--serif) !important;
  font-weight: 700;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
}
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 0.6em; }
h2 { font-size: 1.5rem; line-height: 1.2; margin: 1.4em 0 0.5em; }
h3 { font-size: 1.2rem; margin: 1.2em 0 0.4em; }

/* ---------- header chrome (dark nav — matches parent pattern) ---------- */
.pkp_structure_head {
  background: var(--charcoal) !important;
  border-bottom: 4px solid var(--accent) !important;
  box-shadow: none !important;
}

.pkp_head_wrapper {
  background: var(--charcoal) !important;
  padding: 8px 0 !important;
}

.pkp_navigation_primary_row {
  background: var(--charcoal) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.pkp_site_name a,
.pkp_site_name,
.pkp_site_name .is_text {
  font-family: var(--serif) !important;
  color: var(--paper) !important;
  letter-spacing: -0.01em;
}

.pkp_site_name img {
  max-height: 78px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1.5px solid var(--accent);
  display: block;
}

.pkp_navigation_primary,
nav.cmp_navigation_primary,
.pkp_navigation_user {
  font-family: var(--sans) !important;
  font-size: 14px;
  background: var(--charcoal) !important;
}

.pkp_navigation_primary > ul,
nav.cmp_navigation_primary > ul {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.pkp_navigation_primary a,
.pkp_navigation_primary > li > a,
nav.cmp_navigation_primary a,
.pkp_navigation_user a {
  color: rgba(255,255,255,0.9) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}

.pkp_navigation_primary a:hover,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li:hover > a,
nav.cmp_navigation_primary a:hover,
.pkp_navigation_user a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}

.pkp_navigation_primary li.has_submenu > a::after {
  content: " \25BE";
  color: rgba(255,255,255,0.5);
  font-size: 0.8em;
}

.pkp_navigation_primary ul ul,
.pkp_navigation_primary ul.dropdown,
.pkp_navigation_primary li ul {
  background: var(--charcoal) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: var(--shadow);
  border-radius: 0 !important;
}

.pkp_navigation_primary ul ul a {
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
}

.pkp_navigation_primary ul ul a:hover {
  color: var(--accent) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* ---------- breadcrumbs ---------- */
.cmp_breadcrumbs,
.pkp_breadcrumb {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.cmp_breadcrumbs a,
.pkp_breadcrumb a { color: var(--muted) !important; }
.cmp_breadcrumbs a:hover,
.pkp_breadcrumb a:hover { color: var(--accent) !important; }

/* ---------- homepage hero / about / additional content ---------- */
.homepage_about,
.additional_content,
.page_content,
.page_index_journal {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-sm);
  padding: 36px 40px !important;
  margin-bottom: 24px !important;
}

/* hide .page_index_journal when empty (no content set yet) */
.page_index_journal:empty,
.page_index_journal:not(:has(*)) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.page_content > h2:first-child,
.homepage_about > h2:first-child {
  margin-top: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.page_content p,
.homepage_about p { color: var(--ink); }

/* ---------- issue + article cards ---------- */
.obj_issue_summary,
.cmp_issue_summary,
.obj_article_summary,
.cmp_article_summary {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--shadow-sm);
}

.obj_issue_summary .title,
.obj_article_summary .title {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
}

.obj_article_summary .meta {
  font-family: var(--mono) !important;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.obj_article_summary .galleys_links a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin-right: 6px;
}

.obj_article_summary .galleys_links a:hover {
  background: var(--accent);
  color: var(--white) !important;
  border-color: var(--accent);
}

/* OA corner-tag */
.obj_article_summary[data-oa]::before,
.obj_issue_summary[data-oa]::before {
  content: "OA";
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--accent);
  color: var(--white);
  padding: 4px 8px;
}

/* ---------- sidebar blocks ---------- */
.pkp_structure_main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  float: none !important;
}

.pkp_structure_sidebar {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.pkp_structure_sidebar .pkp_block:not(.block_browse) {
  display: none !important;
}

.pkp_structure_sidebar .pkp_block {
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--accent);
  background: var(--white);
  padding: 22px;
  box-shadow: var(--shadow);
}

.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .pkp_block h2,
.pkp_structure_sidebar .pkp_block h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}

.pkp_structure_sidebar .pkp_block ul {
  margin: 0;
  padding-left: 18px;
}

.pkp_structure_sidebar .pkp_block li {
  margin: 8px 0;
}

/* ---------- forms / buttons ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: var(--sans) !important;
  border: 1px solid var(--line-dark) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  background: var(--white) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(24, 33, 43, 0.1);
}

button,
.pkp_button,
input[type="submit"],
.cmp_button {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  background: var(--accent) !important;
  color: var(--white) !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover,
.pkp_button:hover,
input[type="submit"]:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}

.pkp_button_secondary,
.cmp_button_secondary {
  background: var(--white) !important;
  color: var(--ink) !important;
  border-color: var(--line-dark) !important;
}

/* ---------- pagination ---------- */
.cmp_pagination,
.pkp_pagination {
  font-family: var(--mono) !important;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp_pagination a,
.pkp_pagination a {
  border: 1px solid var(--line-dark);
  padding: 6px 12px;
  margin: 0 4px;
  color: var(--ink) !important;
}

.cmp_pagination .current {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  padding: 6px 12px;
}

/* ---------- footer ---------- */
.pkp_structure_footer_wrapper,
footer.pkp_structure_footer {
  background: var(--charcoal) !important;
  color: rgba(255,255,255,0.78) !important;
  font-family: var(--sans);
  font-size: 14px;
  border-top: 4px solid var(--accent);
  padding: 48px 0 24px !important;
  margin-top: 48px;
}

.pkp_brand_footer { color: rgba(255,255,255,0.6); }

footer h4 {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--white) !important;
  margin: 0 0 14px !important;
  font-weight: 600;
}

footer a { color: rgba(255,255,255,0.78) !important; }
footer a:hover { color: var(--white) !important; text-decoration: underline; }

footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin: 0 0 6px; }
footer p { margin: 0 0 10px; line-height: 1.5; }

/* wildcard footer descendant color overrides — safety net for OJS wrapper variants */
.pkp_structure_footer_wrapper,
.pkp_structure_footer_wrapper p,
.pkp_structure_footer_wrapper li,
.pkp_structure_footer_wrapper span,
.pkp_structure_footer_wrapper div {
  color: rgba(255,255,255,0.78) !important;
}
.pkp_structure_footer_wrapper h4,
.pkp_structure_footer h4 {
  color: var(--white) !important;
}
.pkp_structure_footer_wrapper a {
  color: rgba(255,255,255,0.78) !important;
}
.pkp_structure_footer_wrapper a:hover {
  color: var(--white) !important;
}

.ijp-footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}

.ijp-footer-grid h4 {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  margin: 0 0 14px !important;
  font-weight: 600 !important;
}

.ijp-footer-grid .issn {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 959px) {
  .ijp-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
  .ijp-footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- read-pane (article body) — quiet zone ---------- */
.obj_galley_link, .article_details, .article_full {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  padding: 40px 48px !important;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink) !important;
}

.article_full h1,
.article_full h2,
.article_full h3 { font-family: var(--serif) !important; }

.article_full a { color: var(--accent) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.abstract,
.article_abstract {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 18px;
  margin: 18px 0;
}

/* ---------- announcements ---------- */
.cmp_announcement,
.obj_announcement_summary {
  background: var(--paper-2) !important;
  border-left: 4px solid var(--accent) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px;
  font-family: var(--sans);
}

.cmp_announcement .title { font-family: var(--serif); color: var(--ink); }

.cmp_announcement .date_posted {
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ut width override ---------- */
.pkp_structure_content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px;
  display: block;
}

.pkp_structure_content:has(.pkp_structure_sidebar .block_browse) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}

.pkp_structure_content:has(.pkp_structure_sidebar .block_browse) .pkp_structure_main {
  width: auto !important;
  max-width: none !important;
}

/* ---------- mobile breakpoints ---------- */
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  .page_content,
  .homepage_about,
  .additional_content { padding: 24px 22px !important; }
  .pkp_structure_content { padding: 18px; }
  .pkp_structure_content:has(.pkp_structure_sidebar .block_browse) { display: block; }
  .pkp_structure_sidebar { margin-top: 24px; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}