/*
 * BJNRD public OJS pages
 * Designed for OJS 3.3.0.13 and the current BJNRD frontend theme.
 * This stylesheet affects the public journal pages only when uploaded as the
 * journal stylesheet in Settings > Website > Appearance > Advanced.
 */

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

:root {
  --bjnrd-navy: #03254d;
  --bjnrd-navy-2: #07376c;
  --bjnrd-blue: #0878d4;
  --bjnrd-blue-light: #eaf5ff;
  --bjnrd-ink: #0a2148;
  --bjnrd-text: #263347;
  --bjnrd-muted: #667483;
  --bjnrd-line: #dce4eb;
  --bjnrd-page: #f5f8fb;
  --bjnrd-white: #ffffff;
  --bjnrd-serif: "Libre Baskerville", Georgia, serif;
  --bjnrd-sans: "Inter", Arial, sans-serif;
}

/* Basic page reset */

html {
  background: var(--bjnrd-page);
}

body {
  color: var(--bjnrd-text) !important;
  background: var(--bjnrd-page) !important;
  font-family: var(--bjnrd-sans) !important;
  font-size: 15px;
  line-height: 1.7;
}

.pkp_structure_page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--bjnrd-page) !important;
  box-shadow: none !important;
}

/* Remove vertical decorations inherited from the previous custom theme. */

.pkp_structure_page::before,
.pkp_structure_page::after,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_main > .page::before,
.pkp_structure_main > .page::after {
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

a {
  color: #0569bd;
}

a:hover,
a:focus {
  color: var(--bjnrd-navy-2);
}

/* Simple white journal header */

.pkp_structure_head {
  width: 100% !important;
  margin: 0 !important;
  background: var(--bjnrd-white) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bjnrd-line) !important;
  box-shadow: none !important;
}

.pkp_head_wrapper {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.bjnrd_header_top {
  width: min(1200px, calc(100% - 48px)) !important;
  min-height: 104px;
  margin: 0 auto !important;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px;
}

.pkp_site_name_wrapper {
  width: min(610px, 62vw) !important;
  max-width: 610px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_site_name {
  padding: 0 !important;
  text-align: left !important;
}

.pkp_site_name > a {
  display: block !important;
  padding: 0 !important;
}

.pkp_site_name img {
  width: auto !important;
  max-width: 100% !important;
  max-height: 80px !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: left center;
}

.bjnrd_header_actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px;
}

.pkp_navigation_user_wrapper {
  position: static !important;
  top: auto !important;
  right: auto !important;
  padding: 0 !important;
}

.pkp_navigation_user {
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_user > li > a {
  padding: 7px 9px !important;
  color: var(--bjnrd-ink) !important;
  font: 600 13px/1.2 var(--bjnrd-sans) !important;
  text-decoration: none !important;
}

.bjnrd_search {
  width: 230px !important;
  margin: 0 !important;
}

.bjnrd_search input[type="text"],
.bjnrd_search input[type="search"] {
  min-height: 40px;
  padding: 8px 43px 8px 13px !important;
  background: #fff !important;
  border: 1px solid #ccd7df !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-family: var(--bjnrd-sans) !important;
}

.bjnrd_search button {
  min-width: 40px;
  min-height: 40px;
  color: #fff !important;
  background: var(--bjnrd-navy-2) !important;
  border-radius: 0 5px 5px 0 !important;
}

/* Navy navigation bar matching the static homepage */

.pkp_site_nav_menu {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--bjnrd-navy), var(--bjnrd-navy-2)) !important;
  border: 0 !important;
}

.pkp_navigation_primary_row {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.pkp_navigation_primary_wrapper {
  width: 100% !important;
  padding: 0 !important;
}

.pkp_navigation_primary {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
}

.pkp_navigation_primary > li > a {
  padding: 17px 18px !important;
  color: rgba(255,255,255,.94) !important;
  border: 0 !important;
  font: 600 13px/1.2 var(--bjnrd-sans) !important;
  letter-spacing: .01em;
  text-decoration: none !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}

.pkp_navigation_primary ul {
  padding: 8px !important;
  background: #fff !important;
  border: 1px solid var(--bjnrd-line) !important;
  border-radius: 5px !important;
  box-shadow: 0 14px 28px rgba(3,37,77,.16) !important;
}

.pkp_navigation_primary ul a {
  padding: 9px 12px !important;
  color: var(--bjnrd-ink) !important;
  border-radius: 3px;
  font-family: var(--bjnrd-sans) !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
  color: var(--bjnrd-navy) !important;
  background: var(--bjnrd-blue-light) !important;
}

/* Remove the public sidebar and make content full width */

.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
  display: none !important;
}

.pkp_structure_content,
.pkp_structure_content.has_sidebar {
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: 1120px !important;
  min-height: 520px;
  margin: 0 auto !important;
  padding: 52px 0 80px !important;
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

.pkp_structure_main,
.has_sidebar .pkp_structure_main {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Clean content card */

.pkp_structure_main > .page {
  padding: clamp(24px, 4vw, 48px) !important;
  background: #fff !important;
  border: 1px solid var(--bjnrd-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(8,43,80,.07) !important;
}

.page > h1,
.page > h2,
.page h1,
.page h2,
.page h3,
.obj_issue_toc .heading .title,
.obj_article_details .page_title {
  color: var(--bjnrd-ink) !important;
  font-family: var(--bjnrd-serif) !important;
}

.page > h1,
.page h1 {
  margin-top: 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 3px solid var(--bjnrd-blue) !important;
  font-size: clamp(1.85rem, 4vw, 2.55rem) !important;
  line-height: 1.25 !important;
}

.page p,
.page li,
.page dd,
.page td {
  color: var(--bjnrd-text);
  font-family: var(--bjnrd-sans) !important;
}

.page img {
  max-width: 100%;
  height: auto;
}

/* Forms, buttons and search */

.cmp_button,
.page button,
.page input[type="submit"],
.page .submit,
.obj_galley_link,
.block_make_submission a {
  color: #fff !important;
  background: var(--bjnrd-navy-2) !important;
  border: 1px solid var(--bjnrd-navy-2) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--bjnrd-sans) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.cmp_button:hover,
.page button:hover,
.page input[type="submit"]:hover,
.obj_galley_link:hover {
  background: var(--bjnrd-blue) !important;
  border-color: var(--bjnrd-blue) !important;
}

.page input[type="text"],
.page input[type="email"],
.page input[type="password"],
.page input[type="search"],
.page select,
.page textarea {
  max-width: 100%;
  padding: 10px 12px !important;
  background: #fff !important;
  border: 1px solid #cbd6df !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--bjnrd-sans) !important;
}

.page input:focus,
.page select:focus,
.page textarea:focus {
  border-color: var(--bjnrd-blue) !important;
  outline: 3px solid rgba(8,120,212,.15) !important;
}

/* Archive, issue and article lists */

.issues_archive,
.obj_issue_summary,
.obj_article_summary,
.obj_issue_toc {
  font-family: var(--bjnrd-sans) !important;
}

.obj_issue_summary,
.obj_article_summary {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--bjnrd-line) !important;
}

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

.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_issue_summary .description {
  color: var(--bjnrd-muted) !important;
}

/* Breadcrumbs */

.cmp_breadcrumbs {
  margin-bottom: 24px !important;
  padding: 10px 14px !important;
  background: #edf5fb !important;
  border-radius: 4px !important;
  font-family: var(--bjnrd-sans) !important;
  font-size: 13px !important;
}

/* Simple footer */

.pkp_structure_footer_wrapper {
  margin: 0 !important;
  color: rgba(255,255,255,.86) !important;
  background: linear-gradient(90deg, var(--bjnrd-navy), var(--bjnrd-navy-2)) !important;
  border: 0 !important;
}

/*
 * The previous BJNRD theme adds a separate brown footer-bottom layer.
 * Make every custom footer layer transparent so the navy wrapper shows.
 */

.pkp_structure_footer_wrapper .bjnrd_footer,
.pkp_structure_footer_wrapper .bjnrd_footer_main,
.pkp_structure_footer_wrapper .bjnrd_footer_top,
.pkp_structure_footer_wrapper .bjnrd_footer_bottom,
.pkp_structure_footer_wrapper .bjnrd_footer_copyright,
.pkp_structure_footer_wrapper .bjnrd_footer_credits,
.pkp_structure_footer_wrapper .footer_bottom,
.pkp_structure_footer_wrapper .footer_copyright,
.pkp_structure_footer_wrapper [class*="footer_bottom"],
.pkp_structure_footer_wrapper [class*="footer-bottom"],
.pkp_structure_footer_wrapper [class*="copyright"] {
  color: rgba(255,255,255,.86) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pkp_structure_footer_wrapper .bjnrd_footer_bottom,
.pkp_structure_footer_wrapper .footer_bottom,
.pkp_structure_footer_wrapper [class*="footer_bottom"],
.pkp_structure_footer_wrapper [class*="footer-bottom"] {
  margin: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  border-top: 1px solid rgba(255,255,255,.16) !important;
}

.pkp_structure_footer,
.bjnrd_footer {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 36px 0 !important;
  color: rgba(255,255,255,.86) !important;
  background: transparent !important;
}

.pkp_structure_footer a,
.bjnrd_footer a {
  color: #fff !important;
}

/* Tablet and mobile */

@media (max-width: 900px) {
  .bjnrd_header_top {
    width: min(100% - 28px, 1200px) !important;
    min-height: 78px;
    padding: 8px 0 !important;
  }

  .pkp_site_name_wrapper {
    width: min(72vw, 520px) !important;
  }

  .pkp_site_name img {
    max-height: 62px !important;
  }

  .bjnrd_header_actions {
    display: none !important;
  }

  .pkp_site_nav_toggle {
    position: static !important;
    margin: 0 12px 0 0 !important;
    color: var(--bjnrd-navy) !important;
  }

  .pkp_site_nav_menu {
    padding: 10px 14px !important;
  }

  .pkp_navigation_primary_row {
    width: 100% !important;
  }

  .pkp_navigation_primary {
    display: block !important;
  }

  .pkp_navigation_primary > li > a {
    padding: 12px !important;
  }

  .pkp_structure_content,
  .pkp_structure_content.has_sidebar {
    width: min(100% - 28px, 1120px) !important;
    padding: 28px 0 52px !important;
  }

  .pkp_structure_main > .page {
    padding: 24px 20px !important;
  }

  .pkp_structure_footer,
  .bjnrd_footer {
    width: min(100% - 28px, 1200px) !important;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 14px;
  }

  .pkp_site_name_wrapper {
    width: calc(100% - 54px) !important;
  }

  .pkp_site_name img {
    max-height: 52px !important;
  }

  .pkp_structure_main > .page {
    padding: 20px 16px !important;
    border-radius: 5px !important;
  }

  .page > h1,
  .page h1 {
    font-size: 1.65rem !important;
  }

  .obj_issue_summary,
  .obj_article_summary {
    display: block !important;
  }
}

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