/* ==========================================================================
   JoCATiA – complete custom stylesheet for OJS 3.5 (Default theme)
   ONE FILE. Upload at: Website > Appearance > Advanced > Journal style sheet
   After saving: Administration > Clear Template Cache, then hard-refresh.

   Contents
   0.  Design tokens (variables)
   1.  Global safety and base
   2.  Header, logo, navigation
   3.  Homepage banner and announcements
   4.  Current issue and section headings
   5.  Article summaries and galley buttons
   6.  Article detail page
   7.  Issue archive
   8.  Sidebar blocks and "Latest publications" feeds
   9.  Journal partner logos
   10. Footer
   11. Accessibility
   12. Tablet and mobile
   13. Print
   ========================================================================== */


/* 0. Design tokens ------------------------------------------------------- */
:root {
  --jc-primary: #006798;
  --jc-primary-dark: #004c70;
  --jc-accent: #f2a900;
  --jc-text: #222;
  --jc-muted: #666;
  --jc-border: #e5e5e5;
  --jc-bg-soft: #f7f9fb;
  --jc-radius: 4px;
}


/* 1. Global safety and base --------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  color: var(--jc-text);
  line-height: 1.6;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
  box-sizing: border-box;
  min-width: 0;
}

/* Long words, DOIs and URLs never break the layout */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_footer_content {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

a {
  transition: color 0.15s ease, background-color 0.15s ease;
}


/* 2. Header, logo, navigation ------------------------------------------- */
.pkp_site_name {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
  max-height: 120px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.pkp_navigation_primary_wrapper {
  max-width: 100%;
}

.pkp_navigation_primary > li > a {
  white-space: nowrap;
}

.pkp_navigation_primary ul {
  max-width: 100%;
}

/* Dropdown menus stay inside the viewport */
.pkp_navigation_primary ul ul {
  min-width: 12rem;
  max-width: 90vw;
}


/* 3. Homepage banner and announcements ---------------------------------- */
.homepage_image img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.cmp_announcements .obj_announcement_summary {
  padding: 1rem 0;
  border-bottom: 1px solid var(--jc-border);
}

.cmp_announcements .obj_announcement_summary .date {
  font-size: 0.85rem;
  color: var(--jc-muted);
}


/* 4. Current issue and section headings --------------------------------- */
.current_issue .cover img,
.current_issue .obj_issue_toc .cover img {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto 1rem;
  border-radius: var(--jc-radius);
}

.current_issue .current_issue_title {
  margin-bottom: 0.5rem;
}

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
  margin: 2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--jc-primary);
  font-size: 1.15rem;
}


/* 5. Article summaries and galley buttons ------------------------------- */
.obj_article_summary {
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.obj_article_summary .title,
.obj_article_summary .title a {
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 600;
  hyphens: auto;
}

/* Normalise titles that carry stray <b>/<strong> markup in metadata */
.obj_article_summary .title strong,
.obj_article_summary .title b {
  font-weight: inherit;
}

.obj_article_summary .authors {
  margin: 0.35rem 0;
  font-size: 0.9rem;
  color: #444;
}

.obj_article_summary .pages {
  font-size: 0.85rem;
  color: var(--jc-muted);
}

.obj_article_summary .galleys_links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.obj_galley_link {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: var(--jc-radius);
  white-space: nowrap;
}


/* 6. Article detail page ------------------------------------------------- */
.obj_article_details .page_title {
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.obj_article_details .authors {
  padding: 0;
  list-style: none;
}

.obj_article_details .item.abstract,
.obj_article_details .item.keywords,
.obj_article_details .item.references {
  margin-bottom: 1.5rem;
}

.obj_article_details .item.abstract p {
  text-align: justify;
  hyphens: auto;
}

.obj_article_details .item.doi a {
  word-break: break-all;
}

.obj_article_details .entry_details .item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
}

.obj_article_details .cover_image img,
.obj_article_details .entry_details .cover_image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--jc-radius);
}

/* Wide tables in abstracts or galleys scroll inside their own box */
.obj_article_details table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}


/* 7. Issue archive ------------------------------------------------------- */
.page_issue_archive .issues_archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page_issue_archive .obj_issue_summary {
  padding: 1rem;
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius);
  background: #fff;
}

.page_issue_archive .obj_issue_summary .cover img {
  display: block;
  margin: 0 auto 0.75rem;
  max-width: 180px;
}


/* 8. Sidebar blocks and "Latest publications" feeds --------------------- */
.pkp_structure_sidebar .pkp_block {
  padding: 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius);
  background: #fff;
}

.pkp_structure_sidebar .pkp_block .title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

.block_web_feed ul,
.pkp_block.block_web_feed ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.block_web_feed img {
  width: 32px;
  height: auto;
}


/* 9. Journal partner logos (hotlinked from external server) ------------- */
.additional_content img,
.pkp_block img[src*="pubs.ufs.ac.za"],
.pkp_structure_main img[src*="pubs.ufs.ac.za"] {
  display: inline-block;
  height: 48px;
  width: auto;
  max-width: 100%;
  margin: 0.5rem 0.75rem 0.5rem 0;
  object-fit: contain;
  vertical-align: middle;
}

/* Hide the broken-image icon if a hotlinked logo fails to load (Firefox) */
img[src*="pubs.ufs.ac.za"]:-moz-broken {
  display: none;
}


/* 10. Footer ------------------------------------------------------------- */
.pkp_structure_footer_wrapper {
  margin-top: 2rem;
}

.pkp_footer_content {
  padding: 1.5rem 1rem;
}

.pkp_brand_footer img {
  max-width: 130px;
  height: auto;
}


/* 11. Accessibility ------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--jc-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}


/* 12. Tablet and mobile -------------------------------------------------- */
@media (max-width: 991px) {
  .pkp_structure_content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .pkp_structure_main,
  .pkp_structure_sidebar {
    float: none;
    width: 100%;
  }

  .homepage_image img {
    max-height: 260px;
  }
}

@media (max-width: 600px) {
  .pkp_site_name .is_img img,
  .pkp_site_name img {
    max-height: 80px;
  }

  .obj_article_summary .title,
  .obj_article_summary .title a {
    font-size: 1rem;
  }

  .obj_article_details .page_title {
    font-size: 1.3rem;
  }

  .obj_galley_link {
    padding: 0.4rem 1rem;
  }

  .additional_content img {
    height: 40px;
  }

  .page_issue_archive .issues_archive {
    grid-template-columns: 1fr;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}


/* 13. Print -------------------------------------------------------------- */
@media print {
  .pkp_structure_sidebar,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user_wrapper,
  .pkp_structure_footer_wrapper,
  .galleys_links {
    display: none !important;
  }

  .pkp_structure_main {
    width: 100%;
    float: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}