/* ==========================================================================
   The Co-operative University of Kenya — OJS 3.4 brand stylesheet
   Target: Default theme. Upload via Website > Appearance > Advanced.
   Context: Site level (journals.cuk.ac.ke)
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted to avoid third-party requests. Upload the .woff2 files to
   /public/site/fonts/ and they will resolve from the paths below.
   If you would rather load from Google, delete this block and uncomment the
   @import at the bottom of this file — but note that sends every visitor's IP
   to a third party, which is worth a look under the Data Protection Act 2019.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lora';
  src: url('/public/site/fonts/lora-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/public/site/fonts/lora-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/public/site/fonts/lora-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/public/site/fonts/poppins-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/public/site/fonts/poppins-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --cuk-navy:        #0D509F;
  --cuk-navy-deep:   #0B3A73;
  --cuk-orange:      #F38121;
  --cuk-green:       #13A751;
  --cuk-accent:      var(--cuk-orange);
  --cuk-ink:         #1A2432;
  --cuk-muted:       #5C6B7F;
  --cuk-rule:        #DFE5EC;
  --cuk-wash:        #F4F6F9;
  --cuk-serif:       'Lora', Georgia, 'Times New Roman', serif;
  --cuk-sans:        'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* --- Base ---------------------------------------------------------------- */
body {
  font-family: var(--cuk-serif);
  color: var(--cuk-ink);
  font-size: 16px;
  line-height: 1.7;
  background: var(--cuk-wash);
  border-top: 5px solid var(--cuk-navy-deep);
}

/* Main column reads as a sheet of paper on the wash. */
.pkp_structure_page {
  background: transparent;
  overflow-x: hidden;
}
.pkp_structure_content {
  background: transparent;
}
.pkp_structure_main {
  background: #FFFFFF;
  border: 1px solid var(--cuk-rule);
  border-radius: 2px;
  padding: 2rem 2.25rem;
}

/* Accessibility headings must stay clipped — if one becomes visible it
   appears as stray text in the top-left corner. */
.pkp_screen_reader,
.pkp_helpers_hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

h1, h2, h3, h4, h5,
.obj_article_summary .title,
.obj_issue_summary .title {
  font-family: var(--cuk-serif);
  font-weight: 600;
  color: var(--cuk-navy-deep);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

a { color: var(--cuk-navy); text-decoration: none; }
a:hover, a:focus { color: var(--cuk-orange); }

/* Prose links get a rule that thickens on hover — quieter than a colour flip
   and keeps long abstracts readable. */
.obj_article_details .abstract a,
.pkp_page_index .about_site a,
.cmp_announcements a,
.pkp_footer_content a {
  text-decoration: underline;
  text-decoration-color: var(--cuk-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.12s ease;
}
.obj_article_details .abstract a:hover,
.pkp_page_index .about_site a:hover,
.cmp_announcements a:hover,
.pkp_footer_content a:hover {
  text-decoration-thickness: 3px;
}

/* Keyboard focus must stay visible everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.cmp_button:focus-visible {
  outline: 3px solid var(--cuk-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Header -------------------------------------------------------------- */
.pkp_structure_head {
  background: var(--cuk-wash);
  border-bottom: none;
  box-shadow: none;
}
.pkp_head_wrapper {
  background: transparent;
  padding-top: 1.5rem;
  padding-bottom: 0;
}
/* Utility row (Register / Login) */
.pkp_navigation_user_wrapper {
  background: transparent;
  border-bottom: none;
}
.pkp_navigation_user > li > a {
  font-family: var(--cuk-sans);
  font-size: 0.82rem;
  color: var(--cuk-muted);
}
.pkp_navigation_user > li > a:hover { color: var(--cuk-navy); }
.pkp_site_name_wrapper { padding: 0; }
.pkp_site_name .is_img img {
  max-height: 78px;
  width: auto;
}
.pkp_site_name .is_text {
  font-family: var(--cuk-serif);
  font-weight: 600;
  color: var(--cuk-navy-deep);
  font-size: 1.6rem;
}

/* Primary navigation */
.pkp_navigation_primary_row {
  position: relative;
  background: var(--cuk-navy-deep);
  border-top: none;
  border-bottom: 3px solid var(--cuk-accent);
  margin-top: 1rem;
}
/* Bleed the band past the container to the window edges. The parent clips
   the overflow, so this adds no horizontal scrollbar. */
.pkp_navigation_primary_row::before,
.pkp_navigation_primary_row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -3px;
  width: 100vw;
  background: var(--cuk-navy-deep);
  border-bottom: 3px solid var(--cuk-accent);
  box-sizing: border-box;
  pointer-events: none;
}
.pkp_navigation_primary_row::before { right: 100%; }
.pkp_navigation_primary_row::after  { left: 100%; }
.pkp_navigation_primary > li > a {
  font-family: var(--cuk-sans);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.015em;
  color: #FFFFFF;
  padding: 0.95rem 1.15rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.pkp_navigation_primary > li.current > a {
  border-bottom-color: #FFFFFF;
}
.pkp_navigation_primary_row .pkp_search a,
.pkp_navigation_primary_row .pkp_search button {
  color: #FFFFFF;
}
.pkp_navigation_primary .dropdown-menu {
  border: 1px solid var(--cuk-rule);
  border-top: 3px solid var(--cuk-accent);
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(11, 58, 115, 0.10);
}
/* Search field in the header */
.pkp_search input[type="text"] {
  font-family: var(--cuk-sans);
  border: 1px solid var(--cuk-rule);
  border-radius: 2px;
}

/* --- Breadcrumbs --------------------------------------------------------- */
.cmp_breadcrumbs {
  font-family: var(--cuk-sans);
  font-size: 0.8rem;
  color: var(--cuk-muted);
  letter-spacing: 0.01em;
}
.cmp_breadcrumbs a { color: var(--cuk-muted); }
.cmp_breadcrumbs a:hover { color: var(--cuk-navy); }

/* --- Article and issue records ------------------------------------------
   The left rule carries the journal's accent colour. On the site index,
   where both journals appear in one list, it says which journal a record
   belongs to before the reader parses the title.
   ------------------------------------------------------------------------- */
.obj_article_summary,
.obj_issue_summary {
  border-bottom: 1px solid var(--cuk-rule);
  border-left: 3px solid transparent;
  padding: 1.4rem 0 1.4rem 1.25rem;
  margin-bottom: 0;
  transition: border-left-color 0.15s ease, background 0.15s ease;
}
.obj_article_summary:hover,
.obj_issue_summary:hover {
  border-left-color: var(--cuk-accent);
  background: var(--cuk-wash);
}
.obj_article_summary > .title,
.obj_article_summary > h2 {
  font-family: var(--cuk-serif);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}
.obj_article_summary > .title a { color: var(--cuk-navy-deep); }
.obj_article_summary > .title a:hover { color: var(--cuk-navy); }
.obj_article_summary .authors,
.obj_article_summary .meta,
.obj_article_summary .published,
.obj_article_summary .pages {
  font-family: var(--cuk-sans);
  font-size: 0.82rem;
  color: var(--cuk-muted);
  letter-spacing: 0.01em;
}
.obj_article_summary .subtitle {
  font-family: var(--cuk-serif);
  font-style: italic;
  color: var(--cuk-muted);
}

/* Cover thumbnails */
.obj_issue_summary .cover img,
.obj_article_summary .cover img {
  border: 1px solid var(--cuk-rule);
  border-radius: 2px;
}

/* --- Article detail page ------------------------------------------------- */
.obj_article_details .page_title {
  font-family: var(--cuk-serif);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--cuk-navy-deep);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.obj_article_details .subtitle {
  font-family: var(--cuk-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--cuk-muted);
}
.obj_article_details .authors .author .name {
  font-family: var(--cuk-sans);
  font-weight: 500;
  color: var(--cuk-ink);
}
.obj_article_details .authors .author .affiliation,
.obj_article_details .authors .author .orcid {
  font-family: var(--cuk-sans);
  font-size: 0.85rem;
  color: var(--cuk-muted);
}
.obj_article_details .abstract {
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 68ch;
}
.obj_article_details .main_entry h2,
.obj_article_details .entry_details h2,
.obj_article_details .item > .label {
  font-family: var(--cuk-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cuk-muted);
  border-bottom: 1px solid var(--cuk-rule);
  padding-bottom: 0.4rem;
}

/* Galley links — the primary action on an article page. */
.galleys_links .obj_galley_link,
.obj_galley_link {
  font-family: var(--cuk-sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  background: var(--cuk-navy);
  color: #FFFFFF;
  border: none;
  border-radius: 2px;
  padding: 0.6rem 1.1rem;
  transition: background 0.15s ease;
}
.galleys_links .obj_galley_link:hover,
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--cuk-navy-deep);
  color: #FFFFFF;
}

/* --- Sidebar blocks ------------------------------------------------------ */
.pkp_block {
  font-family: var(--cuk-sans);
  font-size: 0.9rem;
  border: 1px solid var(--cuk-rule);
  border-left: 3px solid var(--cuk-accent);
  border-radius: 2px;
  padding: 0 0 0.9rem 0;
  margin-bottom: 1.25rem;
  background: #FFFFFF;
  overflow: hidden;
}
.pkp_block .title {
  font-family: var(--cuk-sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cuk-navy-deep);
  background: var(--cuk-wash);
  border-bottom: 1px solid var(--cuk-rule);
  padding: 0.7rem 1rem;
  margin: 0 0 0.8rem 0;
}
.pkp_block .content,
.pkp_block ul,
.pkp_block p { padding-left: 1rem; padding-right: 1rem; }
.pkp_block ul { list-style: none; padding-left: 0; }
.pkp_block li { margin-bottom: 0.4rem; }

/* --- Buttons and forms --------------------------------------------------- */
.cmp_button,
.pkp_button,
button.submitFormButton,
input[type="submit"] {
  font-family: var(--cuk-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--cuk-navy);
  border: 1px solid var(--cuk-navy);
  color: #FFFFFF;
  border-radius: 2px;
  padding: 0.6rem 1.2rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cmp_button:hover,
.pkp_button:hover,
button.submitFormButton:hover,
input[type="submit"]:hover {
  background: var(--cuk-navy-deep);
  border-color: var(--cuk-navy-deep);
  color: #FFFFFF;
}
input[type="text"], input[type="email"], input[type="password"],
select, textarea {
  font-family: var(--cuk-sans);
  border: 1px solid var(--cuk-rule);
  border-radius: 2px;
  padding: 0.5rem 0.65rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cuk-navy);
}

/* --- Pagination and tables ----------------------------------------------- */
.cmp_pagination {
  font-family: var(--cuk-sans);
  font-size: 0.86rem;
  color: var(--cuk-muted);
}
table.pkp_table, .pkp_structure_main table {
  border-collapse: collapse;
  width: 100%;
}
.pkp_structure_main table th {
  font-family: var(--cuk-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cuk-muted);
  border-bottom: 2px solid var(--cuk-rule);
  text-align: left;
  padding: 0.6rem 0.5rem;
}
.pkp_structure_main table td {
  border-bottom: 1px solid var(--cuk-rule);
  padding: 0.6rem 0.5rem;
}

/* --- Footer -------------------------------------------------------------- */
.pkp_structure_footer_wrapper,
.pkp_footer {
  background: var(--cuk-navy-deep);
  color: #D8E2F0;
  border-top: 3px solid var(--cuk-accent);
}
.pkp_footer_content {
  font-family: var(--cuk-sans);
  font-size: 0.9rem;
  color: #D8E2F0;
}
.pkp_footer_content a,
.pkp_brand_footer a { color: #FFFFFF; }
.pkp_footer_content a:hover { color: var(--cuk-orange); }
.pkp_brand_footer {
  background: var(--cuk-navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pkp_brand_footer img { opacity: 0.75; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
  body { font-size: 15px; }
  .pkp_site_name .is_img img { max-height: 54px; }
  .obj_article_details .page_title { font-size: 1.45rem; }
  .obj_article_summary,
  .obj_issue_summary { padding-left: 0.9rem; }
  .pkp_navigation_primary > li > a { padding: 0.7rem 0.8rem; }
}

/* --- Motion and print ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media print {
  .pkp_structure_sidebar,
  .pkp_navigation_primary_row,
  .pkp_structure_footer_wrapper { display: none; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: none; color: #000; }
}

/* Fallback if you choose not to self-host — uncomment and delete the
   @font-face block at the top of this file.
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Poppins:wght@400;500&display=swap');
*/

/* ==========================================================================
   Site index only.
   OJS loads this stylesheet on every journal page too, so each rule below is
   scoped to pages with no journal navigation — that is, the directory page.
   ========================================================================== */

body:not(:has(#navigationPrimary)) .pkp_structure_head {
  background: #FFFFFF;
  border-bottom: 3px solid var(--cuk-accent);
}
body:not(:has(#navigationPrimary)) .pkp_head_wrapper {
  padding-top: 2.75rem;
  padding-bottom: 2.5rem;
  text-align: center;
}
body:not(:has(#navigationPrimary)) .pkp_site_name_wrapper {
  float: none;
  display: block;
  text-align: center;
}
body:not(:has(#navigationPrimary)) .pkp_site_name .is_img img {
  max-height: 110px;
  margin: 0 auto;
}
body:not(:has(#navigationPrimary)) .pkp_navigation_user_wrapper {
  text-align: right;
}

/* Journal directory entries read as cards, not list rows. */
body:not(:has(#navigationPrimary)) .obj_journal_summary {
  background: #FFFFFF;
  border: 1px solid var(--cuk-rule);
  border-left: 4px solid var(--cuk-accent);
  border-radius: 2px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.15s ease;
}
body:not(:has(#navigationPrimary)) .obj_journal_summary:hover {
  box-shadow: 0 4px 18px rgba(11, 58, 115, 0.09);
}
body:not(:has(#navigationPrimary)) .obj_journal_summary .title,
body:not(:has(#navigationPrimary)) .obj_journal_summary h2 {
  font-family: var(--cuk-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--cuk-navy-deep);
  margin-bottom: 0.75rem;
}
body:not(:has(#navigationPrimary)) .obj_journal_summary .description {
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 70ch;
}
body:not(:has(#navigationPrimary)) .obj_journal_summary .links a {
  font-family: var(--cuk-sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-right: 1.5rem;
  padding-top: 0.5rem;
}

@media (max-width: 767px) {
  body:not(:has(#navigationPrimary)) .pkp_head_wrapper {
    padding-top: 1.75rem; padding-bottom: 1.5rem;
  }
  body:not(:has(#navigationPrimary)) .pkp_site_name .is_img img {
    max-height: 76px;
  }
  body:not(:has(#navigationPrimary)) .obj_journal_summary {
    padding: 1.25rem 1.1rem;
  }
}