/*
  National Security: Journal of the National Defence University–Kenya
  OJS 3.5 — Default Theme
  Consolidated stylesheet
  Goals: retain the existing layout and light-blue institutional branding;
  strengthen headings and article links; improve homepage text readability;
  coordinate the footer with the header.
*/

/* =========================================================
   1. BRAND VARIABLES
   ========================================================= */
:root {
  --ndu-blue: #A0D2F0;
  --ndu-navy: #003366;
  --ndu-link: #005A9C;
  --ndu-link-hover: #003366;
  --ndu-text: #263445;
  --ndu-muted: #4B5563;
  --ndu-footer-light: #D9EAF6;
  --ndu-white: #FFFFFF;
  --ndu-title-font: Georgia, "Times New Roman", serif;
  --ndu-ui-font: Arial, Helvetica, sans-serif;
}

/* =========================================================
   2. HEADER AND JOURNAL IDENTITY
   The current OJS setup uses a logo-only masthead.
   ========================================================= */
.pkp_structure_head {
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--ndu-blue) !important;
}

.pkp_site_name_wrapper,
.pkp_site_name {
  background-color: var(--ndu-blue) !important;
  margin: 0;
  box-sizing: border-box;
}

.pkp_site_name_wrapper {
  min-height: 0;
  padding: 0;
}

.pkp_site_name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}

/* Keep the textual masthead hidden because the uploaded logo contains it. */
.pkp_site_name .is_text {
  display: none !important;
}

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

/* =========================================================
   3. NAVIGATION
   ========================================================= */
.pkp_navigation_primary_wrapper {
  background-color: var(--ndu-blue) !important;
}

.pkp_navigation_primary > li > a,
.pkp_user_nav > li > a {
  color: #0F172A;
  font-family: var(--ndu-ui-font);
  font-weight: 700;
  text-decoration: none;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_user_nav > li > a:hover,
.pkp_user_nav > li > a:focus {
  color: var(--ndu-navy);
  text-decoration: underline;
}

.pkp_navigation_primary > li > a.is_current {
  color: var(--ndu-navy);
  font-weight: 700;
}

.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper button {
  color: #0F172A;
  font-weight: 700;
}

/* =========================================================
   4. GENERAL TYPOGRAPHY AND HEADINGS
   ========================================================= */
body {
  color: #111827;
  font-family: var(--ndu-ui-font);
}

.pkp_page_title,
.pkp_section_title,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
  color: var(--ndu-navy);
  font-family: var(--ndu-title-font);
  font-weight: 700;
  line-height: 1.3;
}

.pkp_page_title {
  margin-bottom: 1rem;
}

/* =========================================================
   5. HOMEPAGE TEXT
   Left alignment is used on homepage descriptions for easier
   on-screen reading. Full-text article content is not changed.
   ========================================================= */
.pkp_page_index .pkp_page_content p,
.pkp_page_index .pkp_page_content li,
.pkp_page_index .current_issue .description,
.pkp_page_index .current_issue .description p,
.pkp_page_index .cmp_announcements p,
.pkp_page_index .obj_announcement_summary p,
.pkp_page_index .obj_article_summary .description {
  text-align: left;
  text-justify: auto;
  hyphens: auto;
  line-height: 1.6;
  color: var(--ndu-text);
}

/* Homepage About section: readable line spacing and normal word spacing. */
.pkp_page_index .pkp_page_content {
  line-height: 1.6;
}

/* Keep headings left-aligned, never justified. */
.pkp_page_index h1,
.pkp_page_index h2,
.pkp_page_index h3,
.pkp_page_index h4 {
  text-align: left;
}

/* =========================================================
   6. ARTICLE, ISSUE AND ANNOUNCEMENT TITLES
   ========================================================= */
.obj_article_summary .title,
.obj_article_summary .title a,
.obj_issue_summary .title,
.obj_issue_summary .title a,
.current_issue .title,
.current_issue .title a,
.cmp_announcements .title,
.cmp_announcements .title a,
.obj_announcement_summary .title,
.obj_announcement_summary .title a {
  color: var(--ndu-link);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus,
.obj_issue_summary .title a:hover,
.obj_issue_summary .title a:focus,
.current_issue .title a:hover,
.current_issue .title a:focus,
.cmp_announcements .title a:hover,
.cmp_announcements .title a:focus,
.obj_announcement_summary .title a:hover,
.obj_announcement_summary .title a:focus {
  color: var(--ndu-link-hover);
  text-decoration: underline;
}

/* Section headings on the homepage. */
.pkp_page_index .current_issue > h2,
.pkp_page_index .current_issue > h3,
.pkp_page_index .cmp_announcements > h2,
.pkp_page_index .cmp_announcements > h3 {
  color: var(--ndu-navy);
  font-weight: 700;
}

/* =========================================================
   7. BUTTONS AND ACTIONS
   ========================================================= */
.pkp_button_primary {
  background-color: var(--ndu-navy);
  border-color: var(--ndu-navy);
  font-family: var(--ndu-ui-font);
  font-weight: 700;
}

.pkp_button_primary:hover,
.pkp_button_primary:focus {
  background-color: #00264D;
  border-color: #00264D;
}

.pkp_button {
  border-radius: 4px;
}

/* Keep ordinary links in the journal's blue palette. */
.pkp_page_content a,
.pkp_structure_main a {
  color: var(--ndu-link);
}

.pkp_page_content a:hover,
.pkp_page_content a:focus,
.pkp_structure_main a:hover,
.pkp_structure_main a:focus {
  color: var(--ndu-link-hover);
}

/* =========================================================
   8. SIDEBAR BLOCKS
   ========================================================= */
.pkp_block .title,
.pkp_block h2,
.pkp_block h3 {
  color: var(--ndu-navy);
  font-family: var(--ndu-title-font);
  font-weight: 700;
}

.pkp_block a {
  color: var(--ndu-link);
}

.pkp_block a:hover,
.pkp_block a:focus {
  color: var(--ndu-link-hover);
}

/* =========================================================
   9. FOOTER
   Matches the institutional header while keeping footer text
   legible and the OJS/PKP attribution secondary.
   ========================================================= */
.pkp_structure_footer {
  background-color: var(--ndu-blue) !important;
  border-top: 2px solid var(--ndu-navy);
  width: 100%;
  margin: 30px 0 0;
  padding: 0;
  box-sizing: border-box;
}

.pkp_structure_footer .pkp_footer_content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 18px;
  background: transparent;
  box-sizing: border-box;
  text-align: center;
  color: #0F172A;
  font-family: var(--ndu-ui-font);
  font-size: 14px;
  line-height: 1.8;
}

.pkp_structure_footer .pkp_footer_content strong,
.pkp_structure_footer .pkp_footer_content b {
  color: var(--ndu-navy);
  font-weight: 700;
}

.pkp_structure_footer .pkp_footer_content a {
  color: var(--ndu-navy);
  font-weight: 600;
  text-decoration: underline;
}

.pkp_structure_footer .pkp_footer_content a:hover,
.pkp_structure_footer .pkp_footer_content a:focus {
  color: #000000;
}

.pkp_structure_footer .pkp_brand_footer {
  text-align: center;
  padding: 8px 16px 16px;
}

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

/* Copyright line already used by the existing footer styling. */
.pkp_structure_footer::after {
  content: "© 2026 National Defence University–Kenya. All rights reserved. Published by the National Defence University–Kenya.";
  display: block;
  margin: 0;
  padding: 12px 16px;
  background: var(--ndu-footer-light);
  color: #30465C;
  font-family: var(--ndu-ui-font);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  box-sizing: border-box;
}

/* =========================================================
   10. OPTIONAL FOOTER SOCIAL ICONS
   ========================================================= */
.ndu-footer-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.ndu-footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--ndu-white);
  color: var(--ndu-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ndu-footer-social a:hover,
.ndu-footer-social a:focus-visible {
  background-color: var(--ndu-navy);
  color: var(--ndu-white);
}

/* =========================================================
   11. RESPONSIVE ADJUSTMENTS
   ========================================================= */
@media (max-width: 768px) {
  .pkp_site_name {
    padding: 10px 12px;
  }

  .pkp_site_name .is_img img,
  .pkp_site_name img {
    max-height: 72px;
  }

  .pkp_navigation_primary > li > a,
  .pkp_user_nav > li > a {
    font-size: 0.9rem;
  }

  .pkp_structure_footer .pkp_footer_content {
    padding: 22px 16px 14px;
    font-size: 13px;
  }

  .pkp_structure_footer .pkp_brand_footer {
    padding: 8px 12px 14px;
  }

  .pkp_structure_footer .pkp_brand_footer img {
    max-height: 36px;
  }

  .pkp_structure_footer::after {
    padding: 10px 12px;
    font-size: 11px;
  }
}

/* =========================================================
   12. HOMEPAGE HIGHLIGHT — COMPACT IMAGE
   Intended for the Editorial Board Capacity-Building Workshop
   highlight. Keeps the image proportional and limits its size.
   ========================================================= */

/* Common highlight container variants used by OJS themes/plugins */
.pkp_page_index .cmp_highlights img,
.pkp_page_index .pkp_highlights img,
.pkp_page_index .pkp_highlight img,
.pkp_page_index .highlights img,
.pkp_page_index .highlight img,
.pkp_page_index .highlight-item img,
.pkp_page_index .pkp_page_content .highlight img {
  width: auto;
  max-width: 360px;
  max-height: 240px;
  height: auto;
  object-fit: contain;
}

/* If the highlight uses a dedicated image column, prevent it
   from forcing the full row to remain excessively tall. */
.pkp_page_index .cmp_highlights,
.pkp_page_index .pkp_highlights,
.pkp_page_index .pkp_highlight,
.pkp_page_index .highlights,
.pkp_page_index .highlight,
.pkp_page_index .highlight-item {
  box-sizing: border-box;
}

/* Smaller image and safer spacing on phones/tablets */
@media (max-width: 768px) {
  .pkp_page_index .cmp_highlights img,
  .pkp_page_index .pkp_highlights img,
  .pkp_page_index .pkp_highlight img,
  .pkp_page_index .highlights img,
  .pkp_page_index .highlight img,
  .pkp_page_index .highlight-item img,
  .pkp_page_index .pkp_page_content .highlight img {
    max-width: 100%;
    max-height: 220px;
  }
}