/* ===== Journal Global Styles - journal-style.css =====
   Ready to upload: Appearance -> Advanced -> Add CSS (OJS 3)
   Layout: 70% content (left) / 30% sidebar (right)
   Max width: 1140px, responsive, sidebar fixed within page body
   Primary color: #003366 (dark blue) - change as needed
   Author: Generated by ChatGPT (GPT-5 Thinking mini)
   ================================================== */

/* ---------- CSS Reset / Box-sizing ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ---------- Page container (follow OJS body, centered) ---------- */
/* Ensure this wrapper targets the main content area - adjust selector if your theme uses different wrapper */
#content-wrapper,
.content-wrapper,
.journal-home .content-wrapper {
  display: flex;
  gap: 24px;
  margin: 0 auto;
  max-width: 1140px; /* central width */
  padding: 20px 16px;
  align-items: flex-start;
  width: 100%;
}

/* If OJS wraps content inside a page class, prefer that */
.pkp_structure_main .content,
.pkp_structure_main .page {
  width: 100%;
}

/* ---------- Main content & Sidebar proportions (70/30) ---------- */
#main-content,
.main-content,
.pkp_page_content,
.page_content {
  flex: 7 1 0%;
  min-width: 0; /* prevent overflow */
}

#sidebar,
.sidebar,
.pkp_sidebar,
.page_sidebar {
  flex: 3 1 0%;
  min-width: 240px; /* reasonable minimum */
}

/* If your theme uses columns, force ordering: main first, sidebar right */
#content-wrapper > #main-content {
  order: 1;
}
#content-wrapper > #sidebar {
  order: 2;
}

/* ---------- Typography ---------- */
body, .pkp_body, .pkp_structure_main {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #222;
  line-height: 1.68;
  font-size: 15px;
}

h1, h2, h3, h4, h5 {
  color: #111;
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

/* Paragraphs and lists */
#main-content p,
#main-content li,
.main-content p,
.main-content li {
  font-size: 15px;
  color: #333;
  margin-bottom: 1rem;
}

/* Links */
a {
  color: #003366;
  text-decoration: none;
}

a:hover, a:focus {
  color: #0059a3;
  text-decoration: underline;
}

/* ---------- Header / Banner ---------- */
/* A flexible header/banner area supporting an image or color background */
.site-header,
.header-banner,
.pkp_site_header {
  width: 100%;
  display: block;
  background-color: #f6f6f6;
}

/* Banner container inside header */
.header-banner .banner-inner,
.site-header .banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Banner image (supports responsive cover) */
.header-banner img.banner-image,
.site-header img.banner-image {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* Optional: background image fill (use .header-banner.bg) */
.header-banner.bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: white;
}

/* Header title that sits beside banner */
.header-title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

/* Small site subtitle */
.header-subtitle {
  font-size: 13px;
  color: #666;
}

/* ---------- Journal Info box (top of main content) ---------- */
.journal-info {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  padding: 18px;
  margin-bottom: 22px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* Article/Issue cover thumbnails inside main content */
.cover-thumb {
  max-width: 240px;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 12px;
  border-radius: 6px;
  object-fit: cover;
}

/* ---------- Indexing & Abstracting Logos ---------- */
.indexing-section {
  margin-top: 22px;
  margin-bottom: 24px;
}

.indexing-section h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

.indexing-logos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.indexing-logos a {
  display: inline-block;
  padding: 6px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}

.indexing-logos img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.indexing-logos img:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

/* ---------- Sidebar Cards (header colored) ---------- */
.sidebar-card {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.sidebar-card .card-header {
  padding: 12px 14px;
  background: #003366; /* primary color */
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .6px;
}

.sidebar-card .card-body {
  padding: 12px 14px;
}

/* List style inside sidebar */
.sidebar-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sidebar-card ul li {
  margin-bottom: 8px;
}

.sidebar-card ul li a {
  color: #333;
  font-size: 14px;
  display: inline-block;
}

.sidebar-card ul li a:hover {
  color: #003366;
  text-decoration: underline;
}

/* Specific card accent classes (changing header color) */
.sidebar-card.download-template .card-header { background: #006699; }
.sidebar-card.reference-tools .card-header { background: #994400; }
.sidebar-card.issn-info .card-header { background: #333333; }
.sidebar-card.login-register .card-header { background: #007700; }
.sidebar-card.visitors-authors .card-header { background: #990066; }

/* ---------- Download / Reference links ---------- */
.sidebar-card .card-body a {
  color: #003366;
  font-size: 14px;
}

/* ---------- ISSN card text ---------- */
.sidebar-card.issn-info .card-body p {
  margin: 0;
  color: #333;
}

/* ---------- Login/Register small links ---------- */
.sidebar-card.login-register .card-body a {
  margin-right: 8px;
}

/* ---------- Visitors & Authors ---------- */
.sidebar-card.visitors-authors .card-body p {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Profile & Author Photos (circular) ---------- */
/* Use class .avatar, .author-photo, .profile-photo on images */
.avatar,
.author-photo,
.profile-photo,
.editor-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  display: inline-block;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Smaller avatar */
.avatar-sm {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* Centered staff card */
.staff-card {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Staff text */
.staff-card .staff-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.staff-card .staff-info p {
  margin: 0;
  color: #666;
  font-size: 13px;
}

/* ---------- Article metadata, authors list ---------- */
.article-authors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.article-authors .author {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------- Borders that keep content inside body ---------- */
/* Make sure large elements don't overflow the page */
.pkp_page,
.page,
#page,
.pkp_structure_main,
.pkp_structure_content {
  overflow-x: hidden;
}

/* ---------- Fixes for OJS default layout issues ---------- */
/* Ensure content wrapper doesn't break page container */
#content-wrapper {
  box-sizing: border-box;
  width: 100%;
}

/* If theme uses a side-floating sidebar, force relative positioned inside container */
#sidebar {
  position: relative;
  right: 0;
}

/* Remove any negative margins from widgets that push them outside */
.sidebar .widget, #sidebar .widget, .sidebar-card {
  margin-right: 0 !important;
}

/* ---------- Breadcrumbs and small UI ---------- */
.breadcrumb, .pkp_breadcrumbs, .pkp_breadcrumbs a {
  color: #666;
  font-size: 13px;
}

/* ---------- Buttons ---------- */
.btn, button, .pkp_button {
  display: inline-block;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
  background: #003366;
  color: #fff;
  border: none;
  cursor: pointer;
}

.btn.secondary {
  background: #f4f4f4;
  color: #333;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* maintain comfortable gaps */
  #content-wrapper {
    padding: 16px;
    gap: 18px;
  }
  .avatar { width: 80px; height: 80px; }
}

@media (max-width: 900px) {
  /* stack vertically on smaller screens */
  #content-wrapper {
    display: block;
  }
  #main-content, #sidebar {
    width: 100%;
    flex: none;
  }
  .sidebar-card { margin-bottom: 14px; }
  .indexing-logos { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .avatar { width: 64px; height: 64px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
}

/* ---------- Utilities ---------- */
/* small muted text */
.text-muted { color: #777; font-size: 13px; }

/* helper to hide on mobile */
.hide-mobile { display: inline-block; }
@media (max-width: 900px) { .hide-mobile { display: none; } }

/* ---------- End of file ---------- */