/* ==========================================================
   EAJESS - AJOL-style layout on the OJS 3.5 Default theme  (v5)
   Primary colour #002C40.
   Works WITH the theme's own stylesheet: it re-lays out the header, the
   content columns and the footer, and hides the skip links, the
   "Open Menu" button and the OJS/PKP footer branding.
   Upload at: Settings > Website > Appearance > Advanced > Journal style sheet
   ========================================================== */

:root {
  --navy: #002C40;
  --navy-hover: #0b4a68;
  --tint: #e9f0f4;
  --line: #d3dde3;
  --muted: #5c6d77;
  --accent: #f0a30a;
  --page: #eef2f5;
  --wrap: 1180px;
}

body { background: var(--page) !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Hidden: skip links, "Open Menu", PKP/OJS branding ---------- */
.cmp_skip_to_content,
.pkp_brand_footer,
a#siteNav,
a[href="#pkp_content_main"],
a[href="#siteNav"],
a[href="#homepageIssue"],
a[href="#pkp_content_footer"],
a[href*="aboutThisPublishingSystem"] {
  display: none !important;
}

/* ---------- Page frame ---------- */
html body .pkp_structure_page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- Header ----------
   Layout: [ user links, right ] / [ journal name ] / [ menu bar ]
   The <nav> wrapper is dissolved (display: contents) so its children become
   flex items of the header and can simply be put in order. No absolute
   positioning, so nothing in the theme can push them around. */
html body .pkp_structure_head {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--navy) !important;
  border: 0 !important;
  border-bottom: 4px solid var(--accent) !important;
  box-shadow: none !important;
}

html body .pkp_head_wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: auto !important;
  max-width: var(--wrap) !important;
  margin: 0 auto !important;
  padding: 8px 20px 0 !important;
  background: none !important;
}

html body .pkp_site_nav_menu {
  display: contents !important;
}

/* 1. user links: slim strip, right-aligned, above the name */
html body #navigationUserWrapper,
html body .pkp_navigation_user_wrapper {
  order: -1;
  align-self: stretch !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  background: none !important;
  border: 0 !important;
  text-align: right !important;
  transform: none !important;
  z-index: 70;
}

html body #navigationUser {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end !important;
  box-sizing: border-box;
  width: 100% !important;
  gap: 2px;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body #navigationUser > li {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

html body #navigationUser > li > a {
  display: block !important;
  padding: 4px 10px !important;
  background: none !important;
  border: 0 !important;
  color: #cfe1ea !important;
  font-size: .85rem !important;
  text-decoration: none !important;
}

html body #navigationUser > li > a:hover,
html body #navigationUser > li > a:focus { color: #fff !important; text-decoration: underline !important; }

html body #navigationUser ul {
  right: 0;
  left: auto;
  background: #fff !important;
  border: 1px solid var(--line) !important;
}

html body #navigationUser ul a { color: var(--navy) !important; }

/* 2. journal name */
html body .pkp_site_name_wrapper {
  order: 0;
  position: static !important;
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .pkp_site_name {
  position: static !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 0 20px !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-align: left !important;
}

html body .pkp_site_name .is_text,
html body .pkp_site_name > a {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: #fff !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

html body .pkp_site_name img { max-height: 90px !important; width: auto !important; }

/* 3. menu bar: left-aligned, tight, always visible */
html body .pkp_navigation_primary_row {
  order: 1;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .2) !important;
}

html body .pkp_navigation_primary_wrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #navigationPrimary {
  display: flex !important;
  flex: 1 1 0;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  min-width: 0;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

html body #navigationPrimary > li {
  display: block !important;
  position: relative;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #navigationPrimary > li > a {
  display: block !important;
  margin: 0 !important;
  padding: 14px 11px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

html body #navigationPrimary > li > a:hover,
html body #navigationPrimary > li > a:focus,
html body #navigationPrimary > li:hover > a {
  background: rgba(255, 255, 255, .1) !important;
  border-bottom-color: var(--accent) !important;
  color: #fff !important;
}

html body #navigationPrimary ul {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 26px rgba(0, 44, 64, .22);
  z-index: 60;
}

html body #navigationPrimary ul a {
  padding: 10px 14px !important;
  color: var(--navy) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html body #navigationPrimary ul a:hover { background: var(--tint) !important; }

html body .pkp_navigation_search_wrapper {
  flex: 0 0 auto;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .pkp_navigation_search_wrapper a,
html body .pkp_search {
  display: block !important;
  padding: 14px 11px !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html body .pkp_navigation_search_wrapper a:hover { color: var(--accent) !important; }

/* ---------- Content: main column left, sidebar right ---------- */
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after { display: none !important; }

html body .pkp_structure_content {
  display: flex !important;
  align-items: flex-start;
  gap: 30px;
  float: none !important;
  box-sizing: border-box;
  width: calc(100% - 32px) !important;
  max-width: var(--wrap) !important;
  margin: 24px auto !important;
  padding: 28px 24px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
}

html body .pkp_structure_main {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .pkp_structure_sidebar {
  order: 2;
  flex: 0 0 300px;
  float: none !important;
  width: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ---------- Homepage: cover image left, "About the Journal" right ---------- */
.homepage_image {
  float: none !important;
  width: auto !important;
  max-width: 260px;
  margin: 0 0 24px !important;
}

.homepage_image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 44, 64, .22);
}

.page_index_journal { overflow-wrap: break-word; }

.page_index_journal:has(> .homepage_about) {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 28px;
  align-items: start;
}

.page_index_journal:has(> .homepage_about) > .homepage_image { grid-column: 1; grid-row: 1; max-width: none; margin: 0 !important; }
.page_index_journal:has(> .homepage_about) > .homepage_about { grid-column: 2; grid-row: 1; min-width: 0; }
.page_index_journal:has(> .homepage_about) > :not(.homepage_image):not(.homepage_about) { grid-column: 1 / -1; }

.current_issue { clear: both; margin-top: 8px; }

.homepage_about > h2,
.page_index_journal h2 { color: var(--navy); }

.homepage_about > h2 {
  margin-top: 0;
  padding-left: .6em;
  border-left: 4px solid var(--accent);
}

.current_issue > h2 {
  margin: 0 0 14px;
  padding: .55em .9em;
  background: var(--navy);
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* ---------- Sidebar blocks: boxes with a navy title bar ---------- */
html body .pkp_structure_sidebar .pkp_block {
  margin: 0 0 20px !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px;
  overflow: hidden;
}

html body .pkp_structure_sidebar .pkp_block .title {
  display: block;
  margin: 0 !important;
  padding: .6em .95em !important;
  background: var(--navy) !important;
  color: #fff !important;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pkp_structure_sidebar .pkp_block > *:not(.title) { padding: .8em .95em; margin: 0; }

/* ---------- Article links and buttons ---------- */
.obj_galley_link {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--navy-hover) !important;
  border-color: var(--navy-hover) !important;
  color: #fff !important;
}

/* ---------- Footer: navy band ---------- */
html body .pkp_structure_footer_wrapper {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--navy) !important;
  border: 0 !important;
  border-top: 4px solid var(--accent) !important;
  color: #d7e5ec !important;
}

html body .pkp_structure_footer {
  float: none !important;
  width: auto !important;
  max-width: var(--wrap) !important;
  margin: 0 auto !important;
  padding: 26px 20px !important;
  background: none !important;
}

.pkp_footer_content,
.pkp_footer_content p,
.pkp_footer_content li { color: #d7e5ec !important; }
.pkp_footer_content a { color: #fff !important; }
.pkp_footer_content a:hover { color: var(--accent) !important; }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  html body .pkp_structure_content { flex-direction: column; gap: 24px; padding: 20px 16px !important; }
  html body .pkp_structure_sidebar { flex-basis: auto; width: 100% !important; }
  .page_index_journal:has(> .homepage_about) { grid-template-columns: minmax(0, 1fr); }
  .page_index_journal:has(> .homepage_about) > .homepage_image { grid-column: 1; grid-row: auto; max-width: 220px; margin: 0 auto 18px !important; }
  .page_index_journal:has(> .homepage_about) > .homepage_about { grid-column: 1; grid-row: auto; }
}

@media (max-width: 700px) {
  html body .pkp_head_wrapper { padding-top: 6px !important; }
  html body .pkp_site_name .is_text, html body .pkp_site_name > a { font-size: 1.4rem !important; }
  html body #navigationPrimary > li > a { padding: 11px 10px !important; }
}

/* ==========================================================
   Phones and tablets (up to 991px): hamburger menu, bigger links
   The theme's own script opens and closes the menu by toggling the
   class pkp_site_nav_menu--isOpen; we only draw the button and the list.
   ========================================================== */
@media (min-width: 992px) {
  html body .pkp_site_nav_toggle { display: none !important; }
}

@media (max-width: 991px) {
  html body .pkp_head_wrapper { padding-top: 0 !important; }

  /* hamburger button, top right: three bars, turns into an X when open */
  html body .pkp_site_nav_toggle {
    display: block !important;
    position: absolute !important;
    top: 10px !important;
    right: 16px !important;
    left: auto !important;
    width: 46px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden;
    cursor: pointer;
    z-index: 90;
  }

  /* the "Open Menu" text stays for screen readers but is not shown */
  html body .pkp_site_nav_toggle span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  html body .pkp_site_nav_toggle::before {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    right: 11px !important;
    top: 12px !important;
    width: auto !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 2px;
    background: #fff !important;
    box-shadow: 0 8px 0 #fff, 0 16px 0 #fff !important;
    transform: none !important;
  }

  html body .pkp_site_nav_toggle::after { display: none !important; content: none !important; }

  html body .pkp_head_wrapper:has(.pkp_site_nav_menu--isOpen) .pkp_site_nav_toggle::before,
  html body .pkp_site_nav_toggle.pkp_site_nav_toggle--transform::before {
    top: 20px !important;
    box-shadow: none !important;
    transform: rotate(45deg) !important;
  }

  html body .pkp_head_wrapper:has(.pkp_site_nav_menu--isOpen) .pkp_site_nav_toggle::after,
  html body .pkp_site_nav_toggle.pkp_site_nav_toggle--transform::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    right: 11px !important;
    top: 20px !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 2px;
    background: #fff !important;
    transform: rotate(-45deg) !important;
  }

  /* journal name: wraps, and leaves room for the button */
  html body .pkp_site_name { padding: 14px 64px 16px 0 !important; }

  /* menu: closed until the button is tapped */
  html body .pkp_site_nav_menu { display: none !important; }
  html body .pkp_site_nav_menu.pkp_site_nav_menu--isOpen { display: contents !important; }

  /* open menu: a stacked list with big tap targets */
  html body .pkp_navigation_primary_wrapper { flex-direction: column !important; align-items: stretch !important; }
  html body #navigationPrimary { flex: none !important; flex-direction: column !important; width: 100% !important; }
  html body #navigationPrimary > li { width: 100%; }

  html body #navigationPrimary > li > a {
    padding: 14px 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
    font-size: 1.05rem !important;
  }

  html body .pkp_navigation_search_wrapper a,
  html body .pkp_search {
    padding: 14px 4px !important;
    font-size: 1.05rem !important;
  }

  /* submenus (About, and the user menu): plain indented lists, not floating white boxes */
  html body #navigationPrimary ul,
  html body #navigationUser ul {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body #navigationPrimary ul a,
  html body #navigationUser ul a {
    display: block !important;
    padding: 11px 4px !important;
    background: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    color: #dbe8ee !important;
    font-size: 1rem !important;
  }

  html body #navigationPrimary ul a:hover,
  html body #navigationUser ul a:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
  }

  /* user links (Register / Login, or admin menu): under the menu, left-aligned */
  html body #navigationUserWrapper {
    order: 2;
    text-align: left !important;
    padding: 6px 0 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }

  html body #navigationUser { flex-direction: column; justify-content: flex-start !important; gap: 0; }

  html body #navigationUser > li > a {
    padding: 12px 4px !important;
    color: #fff !important;
    font-size: 1.05rem !important;
  }
}

/* Phone header: let the journal name use as many lines as it needs
   (the theme gives the mobile header a fixed height, which pushed the second
   line of the title out of the navy band) */
@media (max-width: 991px) {
  html body .pkp_structure_head,
  html body .pkp_head_wrapper,
  html body .pkp_site_name_wrapper,
  html body .pkp_site_name {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body .pkp_site_name_wrapper { padding: 0 !important; }

  html body .pkp_site_name .is_text,
  html body .pkp_site_name > a {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  html body .pkp_site_name { padding: 16px 64px 16px 0 !important; }
}