/**
 * css/brand.css
 *
 * Single source of truth for Science Journal Hub's brand tokens
 * (color + typography), shared between the standalone homepage
 * (plugins/themes/bootstrap3/templates/frontend/pages/indexSite.tpl)
 * and the rest of the site (bootstrap3/flatly theme chrome).
 *
 * Loaded by:
 *  - indexSite.tpl                         (directly, <link>)
 *  - BootstrapThreeThemePlugin::init()     (via addStyle, on every other page)
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --sjh-primary: #0F6E56;
  --sjh-primary-dark: #0A4C3B;
  --sjh-gold: #AD812A;
  --sjh-text-dark: #17231F;
  --sjh-text-light: #F4F6F3;
  --sjh-font-body: 'IBM Plex Sans', sans-serif;
  --sjh-font-display: 'Source Serif 4', Georgia, serif;
}

/* ----------------------------------------------------------------
 * Overrides applied to interior pages (bootstrap3 / flatly theme)
 * so they share the homepage's color and typography instead of
 * flatly's default navy (#2C3E50) and system font stack.
 * These rules only affect the theme chrome, not the homepage,
 * which already uses the tokens above natively.
 * ---------------------------------------------------------------- */

body {
  font-family: var(--sjh-font-body);
}

h1, h2, h3, h4, h5,
.pkp_page_title,
.page_title {
  font-family: var(--sjh-font-display);
}

/* Primary navigation bar (only matters for any page still rendered by the
   unmodified PKP core header.tpl rather than this theme's own header.tpl —
   see .sjh-navbar below for the theme's actual navbar styling). */
.pkp_structure_head {
  background-color: var(--sjh-primary) !important;
  border-color: var(--sjh-primary-dark) !important;
}

.pkp_navigation_primary_row a {
  color: var(--sjh-text-light) !important;
}

.pkp_navigation_primary_row a:hover,
.pkp_navigation_primary_row a:focus {
  color: #ffffff !important;
  background-color: var(--sjh-primary-dark) !important;
}

/* Buttons, links and accents */
.btn-primary,
a.pkp_button.pkp_button_primary,
.pkp_button.pkp_button_primary {
  background-color: var(--sjh-primary) !important;
  border-color: var(--sjh-primary-dark) !important;
  font-family: var(--sjh-font-body);
}

.btn-primary:hover,
a.pkp_button.pkp_button_primary:hover {
  background-color: var(--sjh-primary-dark) !important;
}

a {
  color: var(--sjh-primary);
}

a:hover,
a:focus {
  color: var(--sjh-primary-dark);
}

/* ----------------------------------------------------------------
 * Theme header/footer chrome (bootstrap3 theme override), built
 * with plain Bootstrap 3 markup instead of the incomplete "Unify"
 * utility framework it replaced.
 * ---------------------------------------------------------------- */

.sjh-topbar {
  background-color: var(--sjh-text-dark);
  padding: 8px 0;
  font-size: 13px;
}

.sjh-topbar-link {
  color: #f8f9fa !important;
  text-decoration: none;
}

.sjh-topbar-link:hover,
.sjh-topbar-link:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

.sjh-navbar {
  background-color: #ffffff;
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
}

.sjh-brand {
  display: flex !important;
  align-items: center;
  gap: 11px;
}

/* Source file (image/logo.png) is a flat icon+wordmark lockup — illegible
   once scaled to navbar height. Crop to just the mark (same math as the
   homepage: source is 1536x1024, mark occupies roughly x:82-782 y:140-840)
   and set the wordmark as real text instead. */
.sjh-brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  background-image: url('/image/logo.png');
  background-repeat: no-repeat;
  background-size: 92px 61.3px;
  background-position: -5px -8.4px;
}

.sjh-brand-name {
  font-family: var(--sjh-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--sjh-text-dark);
  white-space: nowrap;
}

.sjh-navbar .navbar-nav > li > a {
  font-family: var(--sjh-font-body);
  font-weight: 600;
  color: var(--sjh-text-dark);
}

.sjh-navbar .navbar-nav > li > a:hover,
.sjh-navbar .navbar-nav > li > a:focus {
  color: var(--sjh-primary);
  background-color: transparent;
}

.sjh-navbar .dropdown-menu {
  font-size: 0.95rem;
}

.sjh-footer {
  background-color: var(--sjh-primary-dark);
  color: rgba(255, 255, 255, 0.8);
  padding: 48px 0;
}

.sjh-footer-col {
  margin-bottom: 32px;
}

.sjh-footer-heading {
  font-family: var(--sjh-font-display);
  font-size: 1.05rem;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 10px;
  margin: 0 0 16px;
}

.sjh-footer-text {
  font-size: 0.875rem;
  text-align: justify;
}

.sjh-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.sjh-footer-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
}

.sjh-footer-links a,
.sjh-footer-address a {
  color: rgba(255, 255, 255, 0.8);
}

.sjh-footer-links a:hover,
.sjh-footer-address a:hover,
.sjh-social-link:hover {
  color: var(--sjh-primary);
}

.sjh-footer-address p {
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.sjh-footer-bottom {
  background-color: #0A362A;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  padding: 16px 0;
}

.sjh-footer-bottom a {
  color: rgba(255, 255, 255, 0.6);
}

.sjh-footer-bottom a:hover {
  color: #ffffff;
}

.sjh-social-link {
  color: rgba(255, 255, 255, 0.6);
  margin-left: 14px;
  font-size: 1.1rem;
}

/* ----------------------------------------------------------------
 * Generic content pages (About, Journals, Register, Indexing,
 * Charges, Announcements, Contact...) — these all share the same
 * #main-content.page / .page-header markup from OJS core, but had no
 * real typography, spacing or container treatment beyond the raw
 * page title. Applies once, to every menu page.
 * ---------------------------------------------------------------- */

.pkp_structure_content.container {
  padding-top: 40px;
  padding-bottom: 64px;
}

#main-content.page {
  font-family: var(--sjh-font-body);
  color: var(--sjh-text-dark);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 74ch;
}

#main-content.page .page-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #DCE3DD;
}

#main-content.page .page-header h1 {
  font-family: var(--sjh-font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--sjh-text-dark);
  margin: 0;
}

#main-content.page h2 {
  font-family: var(--sjh-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 1.8em 0 0.6em;
}

#main-content.page p {
  margin: 0 0 1.1em;
}

#main-content.page ul,
#main-content.page ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

#main-content.page a {
  color: var(--sjh-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}

#main-content.page a:hover {
  text-decoration-color: currentColor;
}

#main-content.page img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.5em 0;
}

/* Empty menu pages (no content set yet, e.g. Announcements) shouldn't
   read as broken — a short placeholder is clearer than a bare title
   followed by nothing. */
#main-content.page:not(:has(.page-header + *)) .page-header {
  border-bottom: none;
  margin-bottom: 8px;
}