/*
OJS Journal Style Sheet
File: OJS_Journal_Style_Sheet.css
Instructions:
1. Paste the contents of this file into OJS Admin → Appearance → Stylesheet (Advanced → Journal style sheet) OR add as a custom CSS file in your theme.
2. This stylesheet targets common elements used in OJS 3.4 but is intentionally written using conservative selectors to avoid breaking core structure. If your theme uses very different class names, let me know and I can adapt.
3. This sheet imports Google Fonts. If your server blocks external fonts, replace with local fonts or remove the @import lines.

Design goals: modern, readable, scholarly — Merriweather for headings, Open Sans for body text. Navy primary, soft greys, teal accent.
*/

/* -----------------------------
   Fonts & Base Variables
   ----------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Open+Sans:wght@300;400;600;700&display=swap');

:root{
  --primary-navy: #0b3d66;         /* primary brand color */
  --accent-teal:  #138f8f;         /* accent */
  --muted-gray:   #6b7280;         /* metadata/text-gray */
  --bg-light:      #ffffff;        /* page background */
  --panel-bg:      #f7f8fa;        /* light panel background */
  --divider:       #e6e9ef;        /* subtle border */
  --max-width:     1100px;         /* content width */
  --radius:        10px;
  --readability-line-height: 1.72;
}

html,body{
  height:100%;
}
body{
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #111827;
  background: var(--bg-light);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: var(--readability-line-height);
  margin:0;
}

/* -----------------------------
   Page container & grid
   ----------------------------- */
.site{
  display:block;
}

.main_container, .page_content, #main-content{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 20px;
}

/* Make sure sidebars and blocks have breathing room */
.sidebar, .pkp_navigation, .blocks, .pkp_block{
  background: transparent;
}

/* -----------------------------
   Header
   ----------------------------- */
.header, header.site-header, .journalHeader{
  background: linear-gradient(180deg, rgba(11,61,102,0.04), rgba(11,61,102,0.00));
  border-bottom: 1px solid var(--divider);
  padding: 18px 0;
}

.header .container, .journalHeader .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.journalLogo img, .site_logo img{ 
  max-height:68px;
  width:auto;
}

.site_title, .journalTitle, .site_title a{
  font-family: 'Merriweather', Georgia, serif;
  font-size: 20px;
  color: var(--primary-navy);
  text-decoration: none;
  font-weight:700;
}

/* Top navigation styles */
.nav_primary, .main_navigation, nav.primary{
  display:flex;
  gap:14px;
  align-items:center;
  font-weight:600;
}

.nav_primary a, .main_navigation a{
  color: var(--primary-navy);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 8px;
}

.nav_primary a:hover, .main_navigation a:hover{
  background: rgba(19,143,143,0.08);
}

/* -----------------------------
   Hero / Current issue module
   ----------------------------- */
.issue_preview{
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 18px;
  margin: 20px 0;
  border: 1px solid var(--divider);
}

.issue_preview h2{
  font-family: 'Merriweather', serif;
  font-size: 1.6rem;
  margin:0 0 6px 0;
  color: var(--primary-navy);
}

.issue_preview .meta{
  color: var(--muted-gray);
  font-size:0.95rem;
}

/* -----------------------------
   Article listing (TOC / issue page)
   ----------------------------- */
.toc_list, .issue_toc, .articles, .article_list{
  list-style:none;
  padding:0;
  margin:0;
}

.toc_list li, .issue_toc li, .article_list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding: 12px 8px;
  border-bottom:1px solid var(--divider);
}

.toc_list li:last-child, .issue_toc li:last-child{
  border-bottom:none;
}

.article_title, .summary_title, .title a{
  font-family: 'Merriweather', serif;
  font-size:1.03rem;
  color: var(--primary-navy);
  text-decoration:none;
}

.article_title a:hover, .title a:hover{
  text-decoration:underline;
}

.article_authors, .author_list, .authors{
  color: var(--muted-gray);
  font-size:0.92rem;
}

.article_snippet{
  color: #222;
  margin-top:6px;
  font-size:0.96rem;
}

/* Badge for article type (research / review / editorial) */
.article_type_badge{
  background: rgba(11,61,102,0.06);
  color: var(--primary-navy);
  padding:6px 8px;
  border-radius: 20px;
  font-size:0.8rem;
  font-weight:600;
}

/* -----------------------------
   Article page / full text
   ----------------------------- */
.article_page, .article, .article_details, .article_full{
  background: var(--bg-light);
  padding: 18px;
  border-radius: 8px;
}

.article_title_h1, .pkp_content_main h1, h1.article_title{
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  margin: 6px 0 8px 0;
  color: var(--primary-navy);
  line-height:1.15;
}

.article_authors_block, .authors_info{
  margin-bottom: 12px;
}

.author_name{
  display:inline-block;
  font-weight:600;
}

.author_affiliation{
  display:block;
  color: var(--muted-gray);
  font-size:0.92rem;
}

.pub-id-doi, .doi, .articleDOI{
  display:inline-block;
  margin-left:6px;
  color: var(--accent-teal);
  font-weight:600;
  text-decoration:none;
}

.abstract, .articleAbstract, .abstract p{
  font-style: italic;
  background: linear-gradient(90deg, rgba(19,143,143,0.03), rgba(11,61,102,0.01));
  padding: 12px;
  border-radius: 6px;
  color: #111827;
}

.article_fulltext, .article_full_text, .pkp_article_content{
  margin-top: 18px;
  text-align: justify;
  font-size: 1rem;
}

.article_fulltext p{
  margin: 0 0 12px 0;
}

/* Headings inside articles */
.article_fulltext h2, .article_fulltext h3{
  font-family: 'Merriweather', serif;
  color: var(--primary-navy);
  margin-top:22px;
}

/* Figures & tables */
.figure, .table, .fig, .pkp_table{
  border: 1px solid var(--divider);
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  margin: 12px 0;
}

.figure img{ max-width:100%; height:auto; display:block; margin:0 auto; }

.fig_caption, .table_caption{
  font-size:0.9rem;
  color: var(--muted-gray);
  margin-top:8px;
}

/* References and citations */
.references, .article_references, .refs_list{
  padding-left: 18px;
  margin-top: 14px;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
}

.references li{
  margin: 8px 0;
  font-size: 0.95rem;
}

/* Download & share bar */
.article_tools{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top: 14px;
}

.btn, .pkp_button, button, .action_button{
  background: var(--primary-navy);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor:pointer;
  font-weight:600;
}

.btn.secondary, .btn--secondary{
  background: transparent;
  color: var(--primary-navy);
  border: 1px solid rgba(11,61,102,0.12);
}

.btn:hover, .pkp_button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11,61,102,0.06);
}

/* -----------------------------
   Forms & submission guidelines
   ----------------------------- */
.form_row, .pkp_form_row, .pkp_form .form-group{
  margin-bottom: 12px;
}

label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

input[type="text"], input[type="email"], textarea, select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--divider);
  border-radius:8px;
  font-size:1rem;
}

/* Submission guidelines page */
.submission_guidelines{
  background: var(--panel-bg);
  padding: 16px;
  border-radius: 8px;
  border:1px solid var(--divider);
}

.submission_guidelines h3{ font-family: 'Merriweather', serif; color:var(--primary-navy); }

.requirements_list li{ margin:8px 0; }

/* -----------------------------
   Footer
   ----------------------------- */
.site_footer, .pkp_footer, footer.site-footer{
  border-top: 1px solid var(--divider);
  padding:18px 0 36px 0;
  margin-top: 28px;
  color: var(--muted-gray);
  font-size:0.95rem;
}

.site_footer .container, footer .container{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }

.footer_left, .footer_right{
  min-width: 220px;
}

.footer_contact{ font-size:0.9rem; color:var(--muted-gray); }

/* -----------------------------
   Accessibility helpers
   ----------------------------- */
a{ color: var(--primary-navy); }
a:focus{ outline: 3px solid rgba(19,143,143,0.16); outline-offset: 3px; }

/* make font sizes pleasant on mobile */
@media screen and (max-width: 880px){
  :root{ --max-width: 900px; }
  .main_container, .page_content{ padding: 18px 14px; }
  .article_title_h1{ font-size:1.5rem; }
  .journalLogo img{ max-height:56px; }
  .nav_primary{ display:flex; flex-wrap:wrap; gap:8px; }
  .toc_list li{ flex-direction:column; align-items:flex-start; }
}

@media screen and (max-width: 520px){
  :root{ --max-width: 100%; }
  .main_container{ padding:12px; }
  .article_title_h1{ font-size:1.35rem; }
  .issue_preview{ padding:12px; }
}

/* -----------------------------
   Utility classes (easy to apply in OJS templates)
   ----------------------------- */
.center{ text-align:center; }
.small-muted{ color:var(--muted-gray); font-size:0.9rem; }
.kicker{ text-transform:uppercase; letter-spacing:1px; font-size:0.78rem; color:var(--muted-gray); }

/* Change font color in dashboard text */
body.pkp_op_workflow, 
body.pkp_op_submissions, 
body.pkp_op_dashboard {
  color: #1b3a57 !important; /* dark navy text */
}

/* Change headings color */
h1, h2, h3, .pkpHeader__title {
  color: #0b5e88 !important;
}

/* Change sidebar menu text color */
.pkp_navigation_user a,
.pkp_navigation_sidebar a {
  color: #0b3d66 !important;
}

/* Change hover color for links */
a:hover {
  color: #138f8f !important;
}


/* end of stylesheet */