/* ===========================
   JEMNUS OJS 3.3 – Custom Theme
   Dominant color: Green
   Fonts: Montserrat (headings), Open Sans (body)
   Paste this into OJS Admin -> Website -> Appearance -> Stylesheet
   =========================== */

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

/* --- CSS Variables (ubah mudah di sini) --- */
:root{
  --jemnus-green: #0B6B3A;        /* primary green */
  --jemnus-green-dark: #084f2b;
  --jemnus-olive: #2E8B57;        /* accent */
  --jemnus-gold: #E8B923;         /* highlight */
  --jemnus-bg: #ffffff;           
  --jemnus-muted: #6b6b6b;
  --jemnus-border: #e6e6e6;
  --jemnus-max-width: 1200px;
  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- Global --- */
html,body {
  font-family: var(--font-body);
  color: #222;
  background: var(--jemnus-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Limit page width and center */
.site {
  max-width: var(--jemnus-max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Header / Navbar --- */
.pkp_site_header, .pkp_navigation_bar, header.site-header, .site-header {
  background: linear-gradient(90deg,var(--jemnus-green) 0%,var(--jemnus-green-dark) 100%);
  color: #fff;
  border-bottom: 3px solid rgba(0,0,0,0.04);
}

.pkp_site_header .title, .site-title {
  font-family: var(--font-heading);
  font-weight:700;
  font-size:1.5rem;
  color:#fff;
  letter-spacing:0.2px;
}

/* Logo placement: adjust size */
.pkp_site_header .logo, .site-logo img {
  max-height:64px;
  width:auto;
  margin-right: .75rem;
  vertical-align: middle;
}

/* Navigation links */
.pkp_navigation_bar .nav > li > a, .pkp_navigation .nav a {
  color: rgba(255,255,255,0.95);
  font-weight:600;
  text-transform: uppercase;
  font-size:0.85rem;
  padding: 16px 12px;
}
.pkp_navigation_bar .nav > li > a:hover {
  color: var(--jemnus-gold);
}

/* --- Hero / Banner (homepage) --- */
.homepage-banner, .pkp_page_banner, .ojs_homepage_banner {
  background-color: var(--jemnus-green);
  background-image: linear-gradient(rgba(11,107,58,0.92), rgba(8,79,43,0.92));
  color: #fff;
  padding: 48px 20px;
  border-radius: 6px;
  margin: 20px 0;
  display:flex;
  align-items:center;
  gap: 20px;
}
.homepage-banner .banner-content {
  flex: 1;
}
.homepage-banner h1, .homepage-banner .site-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin: 0 0 8px 0;
  line-height:1.05;
}
.homepage-banner p.lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.95);
  margin: 0;
}

/* --- Cards & Article lists --- */
.pkp_block, .card, .article-summary {
  background: #fff;
  border: 1px solid var(--jemnus-border);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(17,17,17,0.03);
  padding: 16px;
  margin-bottom: 16px;
}
.article-summary .title a, .pkp_article_summary .title a {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--jemnus-green-dark);
  text-decoration:none;
}
.article-summary .meta, .pkp_article_summary .meta {
  color: var(--jemnus-muted);
  font-size: 0.9rem;
}

/* Buttons */
.btn, .button, .pkp_button {
  background: var(--jemnus-olive);
  color: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  border: none;
  font-weight:600;
  text-decoration:none;
}
.btn:hover, .button:hover, .pkp_button:hover {
  background: var(--jemnus-green-dark);
  color:#fff;
}

/* --- Sidebar --- */
.sidebar .pkp_block, .sidebar .card {
  background: #fbfbfb;
  border-color: var(--jemnus-border);
}

/* --- Footer --- */
.site-footer, footer#siteFooter, .pkp_footer {
  background: var(--jemnus-green-dark);
  color: rgba(255,255,255,0.95);
  padding: 24px 16px;
  margin-top: 28px;
  font-size: 0.95rem;
}
.site-footer a { color: var(--jemnus-gold); text-decoration: none; }
.site-footer a:hover { color:#fff; text-decoration: underline; }

/* Footer columns */
.site-footer .footer-column {
  margin-bottom: 12px;
}

/* --- Typography adjustments --- */
h1,h2,h3,h4 {
  font-family: var(--font-heading);
  color: var(--jemnus-green-dark);
}
h1 { font-size: 1.8rem; margin-bottom: 0.6rem; }
h2 { font-size: 1.4rem; margin-bottom: 0.45rem; }

p, li {
  font-size: 1rem;
  color: #222;
}

/* --- Tables (article view) --- */
table {
  border-collapse: collapse;
  width: 100%;
}
table th {
  background: var(--jemnus-olive);
  color: #fff;
  padding: 8px;
}
table td {
  border: 1px solid var(--jemnus-border);
  padding: 8px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .homepage-banner {
    flex-direction:column;
    text-align: left;
    padding: 26px 16px;
  }
  .pkp_site_header .title { font-size: 1.25rem; }
  .homepage-banner h1 { font-size: 1.4rem; }
}

/* --- Print rules (clean PDF print from browser) --- */
@media print {
  .pkp_navigation_bar, .site-footer, .sidebar, .btn { display: none !important; }
  body { color:#000; background: #fff; }
}

/* --- Accessibility helpers --- */
a:focus { outline: 3px solid rgba(232,185,35,0.25); outline-offset: 2px; }

/* --- Extra: Tag / badge styles --- */
.label {
  display:inline-block;
  padding:4px 8px;
  border-radius:12px;
  background: rgba(14,88,38,0.12);
  color: var(--jemnus-olive);
  font-weight:600;
  font-size:0.85rem;
}

/* --- Small helpers for OJS-specific selectors (if present) --- */
/* Header title in some OJS installs */
.pkp_site_title, .pkp_site_name { font-family: var(--font-heading); color:#fff; }

/* Article metadata box */
.article .meta-info, .pkp_article .meta-info { color:var(--jemnus-muted); font-size:0.92rem; }

/* Ensure images in articles are responsive */
.article-content img, .pkp_article_content img {
  max-width:100%;
  height:auto;
  display:block;
  margin: 8px 0;
}