/*
 * KHIDMATUNA — Custom Journal Style Sheet
 * Target: Open Journal Systems 3.3.0.13
 * Palette: Deep Navy · Teal · Warm Gold · White
 * Revision: r12 — optional two-column Additional Content hero with editable
 * cover, gold/white headline and CTA links. Body text remains 13px; the
 * hero headline and cover type deliberately follow the larger reference.
 * Additional Content replaces the Journal Summary visually on the homepage.
 * Retains the navy banner header, bordered article rows, 240px sidebar,
 * top-right account links, and compact Call for Papers.
 * Additional Content must be filled in through the OJS homepage settings.
 * Reordering uses CSS flex order; HTML reading/tab order is not changed.
 *
 * Upload through:
 * Settings > Website > Appearance > Advanced > Journal Style Sheet
 *
 * Replace the previous Journal Style Sheet with this complete CSS file.
 * Designed for the OJS 3.3 Default Theme and themes using its frontend markup.
 *
 * LOGIN IN TWO PLACES (one-time OJS setting; no template editing):
 * Settings > Website > Setup > Navigation Menus > Primary Navigation Menu > Edit.
 * Move Login and Register from Unassigned Menu Items to Assigned Menu Items,
 * at the top level, then Save. Keep them assigned to User Navigation Menu too.
 * If absent, use Navigation Menu Items > Add Item and select the built-in
 * Login / Register type. Built-in account links follow OJS login-state rules.
 * CSS styles both menus but cannot create or duplicate working links.
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  --kh-navy: #062f3a;
  --kh-navy-dark: #04242d;
  --kh-teal: #0d7c78;
  --kh-teal-dark: #09635f;
  --kh-teal-soft: #dcefeb;
  --kh-gold: #f2bd58;
  --kh-cream: #f7f4ec;
  --kh-white: #ffffff;
  --kh-text: #17333a;
  --kh-muted: #61747a;
  --kh-line: #d8e3e0;
  --kh-shadow: 0 16px 42px rgba(4, 47, 58, 0.10);
  --kh-radius: 8px;
  --kh-serif: "Lora", Georgia, "Times New Roman", serif;
  --kh-sans: "Source Sans 3", Arial, Helvetica, sans-serif;
  --kh-container: 1240px;
  --kh-gutter: 30px;
  --kh-sidebar: 240px;
  --kh-column-gap: 30px;
}

/* =========================================================
   1. GLOBAL FOUNDATION
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #eef4f3;
  color: var(--kh-text);
  font-family: var(--kh-sans);
  font-size: 13px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--kh-sans);
}

a {
  color: var(--kh-teal);
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease;
}

a:hover,
a:focus {
  color: var(--kh-teal-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.page_title,
.current_issue_title,
.obj_issue_toc .title,
.obj_article_details .page_title {
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-weight: 600;
  line-height: 1.2;
}

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

::selection {
  background: var(--kh-gold);
  color: var(--kh-navy-dark);
}

.pkp_structure_page {
  max-width: 1480px;
  margin: 0 auto;
  background: var(--kh-white);
  box-shadow: 0 0 0 1px rgba(6, 47, 58, 0.04), var(--kh-shadow);
}

/* Accessible keyboard focus */
.pkp_structure_page a:focus-visible,
.pkp_structure_page button:focus-visible,
.pkp_structure_page input:focus-visible,
.pkp_structure_page select:focus-visible,
.pkp_structure_page textarea:focus-visible {
  outline: 3px solid rgba(242, 189, 88, 0.75);
  outline-offset: 3px;
}

/* =========================================================
   2. HEADER / 3. NAVIGATION
   Navy header, full-width uploaded banner, white navigation below it.
   Add real menu links in Website > Setup > Navigation Menus:
   About | Current Issue | Archives | Focus & Scope | Editorial Team |
   Submit a Manuscript. CSS cannot create working navigation links.
   Keep Register / Login in the OJS User Navigation Menu.
   ========================================================= */

.pkp_structure_head {
  position: relative;
  z-index: 10;
  border: 0;
  background: var(--kh-navy);
  box-shadow: none;
}

.pkp_structure_head::before {
  content: none;
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper,
.pkp_structure_content,
.pkp_structure_footer {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--kh-container);
  margin-right: auto;
  margin-left: auto;
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  position: relative;
  padding-right: var(--kh-gutter);
  padding-left: var(--kh-gutter);
}

.pkp_site_name_wrapper {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.pkp_site_name {
  margin: 0;
  padding: 22px 0;
  text-align: left;
}

.pkp_site_name .is_text,
.pkp_site_name > a {
  display: block;
  padding: 0;
  color: var(--kh-white);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.015em;
  text-decoration: none;
  text-shadow: none;
  overflow-wrap: anywhere;
}

.pkp_site_name .is_img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.pkp_site_name .is_img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
}

.pkp_navigation_primary_row {
  border: 0;
  border-radius: 6px 6px 0 0;
  background: var(--kh-white);
  box-shadow: none;
}

.pkp_navigation_primary_wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.pkp_navigation_primary {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkp_navigation_primary > li > a {
  box-sizing: border-box;
  position: relative;
  display: block;
  margin: 0;
  padding: 18px 12px;
  border: 0;
  color: var(--kh-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  border: 0;
  border-radius: 5px;
  background: var(--kh-teal-soft);
  color: var(--kh-teal-dark);
}

.pkp_navigation_primary ul {
  padding: 8px;
  border: 1px solid var(--kh-line);
  border-radius: 6px;
  background: var(--kh-white);
  box-shadow: var(--kh-shadow);
}

.pkp_navigation_primary ul a {
  display: block;
  padding: 10px 13px;
  border-radius: 4px;
  color: var(--kh-text);
  font-size: 13px;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
  background: var(--kh-teal-soft);
  color: var(--kh-teal-dark);
}

/* Keep existing account/submission links visually consistent with the
   reference navigation. CSS does not create or remove real menu entries. */
.pkp_navigation_primary > li > a[href*="/login"],
.pkp_navigation_primary > li > a[href*="/user/register"],
.pkp_navigation_primary > li > a[href*="/about/submissions"],
.pkp_navigation_primary > li > a[href*="/submission/wizard"],
.pkp_navigation_primary > li > a.kh-nav-submit {
  margin: 0;
  padding: 18px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--kh-navy);
  font-weight: 700;
}

.pkp_navigation_primary > li > a[href*="/login"]:hover,
.pkp_navigation_primary > li > a[href*="/login"]:focus,
.pkp_navigation_primary > li > a[href*="/user/register"]:hover,
.pkp_navigation_primary > li > a[href*="/user/register"]:focus,
.pkp_navigation_primary > li > a[href*="/about/submissions"]:hover,
.pkp_navigation_primary > li > a[href*="/about/submissions"]:focus,
.pkp_navigation_primary > li > a[href*="/submission/wizard"]:hover,
.pkp_navigation_primary > li > a[href*="/submission/wizard"]:focus,
.pkp_navigation_primary > li > a.kh-nav-submit:hover,
.pkp_navigation_primary > li > a.kh-nav-submit:focus {
  background: var(--kh-teal-soft);
  color: var(--kh-teal-dark);
}

.pkp_navigation_search_wrapper a {
  color: var(--kh-navy);
  font-size: 13px;
  font-weight: 600;
}

.pkp_site_nav_toggle {
  color: var(--kh-white);
}

.pkp_site_nav_toggle > span,
.pkp_site_nav_toggle > span::before,
.pkp_site_nav_toggle > span::after {
  background: var(--kh-white);
}

@media (min-width: 992px) {
  .pkp_head_wrapper,
  .has_site_logo .pkp_head_wrapper {
    display: block;
    padding-top: 55px;
    padding-bottom: 0;
  }

  .pkp_head_wrapper::before,
  .pkp_head_wrapper::after {
    display: none;
    content: none;
  }

  .pkp_site_name_wrapper {
    float: none;
    width: 100%;
    padding: 0;
  }

  .pkp_site_name {
    padding: 26px 0 60px;
  }

  .pkp_site_nav_menu {
    position: static;
    display: block;
    float: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .pkp_navigation_primary_row {
    position: static;
    margin: 0;
    padding: 8px 12px;
  }

  .pkp_navigation_primary_wrapper {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0;
  }

  .pkp_navigation_primary {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    max-width: 100%;
  }

  .pkp_navigation_primary > li {
    position: relative;
    float: none;
    margin: 0;
    padding: 0;
  }

  .pkp_navigation_primary > li:first-child > a,
  .pkp_navigation_primary > li:last-child > a {
    margin-right: 0;
    margin-left: 0;
  }

  .pkp_navigation_search_wrapper {
    position: static;
    float: none;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0;
  }

  /* Anchor to the shared header/content edge, directly above the sidebar. */
  .pkp_navigation_user_wrapper {
    box-sizing: border-box;
    position: absolute !important;
    z-index: 30;
    top: 10px !important;
    right: var(--kh-gutter) !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - var(--kh-gutter) - var(--kh-gutter));
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    text-align: right;
  }

  .pkp_navigation_user_wrapper > .pkp_navigation_user {
    box-sizing: border-box;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
  }

  /* Native OJS clearfix pseudo-elements otherwise become flex items. */
  .pkp_navigation_user_wrapper > .pkp_navigation_user::before,
  .pkp_navigation_user_wrapper > .pkp_navigation_user::after,
  .pkp_navigation_primary_wrapper::before,
  .pkp_navigation_primary_wrapper::after {
    display: none;
    content: none;
  }

  .pkp_navigation_user_wrapper > ul > li {
    position: relative;
    float: none;
    margin: 0;
    padding: 0;
  }

  .pkp_navigation_user_wrapper > ul > li > a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 0;
    padding: 7px 13px;
    border: 1px solid var(--kh-gold);
    border-radius: 4px;
    background: transparent;
    color: var(--kh-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
  }

  .pkp_navigation_user_wrapper > ul > li:last-child > a {
    margin-right: 0;
  }

  .pkp_navigation_user_wrapper > ul > li > a[href*="/login"],
  .pkp_navigation_user_wrapper > ul > li > a[href*="/dashboard"],
  .pkp_navigation_user_wrapper > ul > li > a[href*="/submissions"] {
    background: transparent;
    border-color: var(--kh-gold);
    color: var(--kh-gold);
  }

  .pkp_navigation_user_wrapper > ul > li > a:hover,
  .pkp_navigation_user_wrapper > ul > li > a:focus {
    background: var(--kh-gold);
    border-color: var(--kh-gold);
    color: var(--kh-navy-dark);
  }

  .pkp_navigation_user ul {
    right: 0;
    left: auto;
    min-width: 190px;
    max-width: min(320px, calc(100vw - 60px));
    padding: 8px;
    border: 1px solid var(--kh-line);
    background: var(--kh-white);
    text-align: left;
  }

  .pkp_navigation_user ul a {
    display: block;
    padding: 9px 12px;
    color: var(--kh-navy);
    overflow-wrap: anywhere;
  }

  .pkp_navigation_user ul a:hover,
  .pkp_navigation_user ul a:focus {
    background: var(--kh-teal-soft);
    color: var(--kh-teal-dark);
  }

  /* Keyboard access works alongside the native OJS dropdown script. */
  .pkp_navigation_primary > li:focus-within > ul {
    display: block;
    left: 0;
  }

  .pkp_navigation_user > li:focus-within > ul {
    display: block;
    right: 0;
    left: auto;
  }
}

/* =========================================================
   4. CONTENT LAYOUT AND BREADCRUMBS
   Flex order is explicit, regardless of sidebar DOM order.
   ========================================================= */

.pkp_structure_content {
  padding: 42px var(--kh-gutter) 70px;
  border: 0;
}

.pkp_structure_main {
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
}

/* Default-theme pseudo-elements draw the old vertical separator lines. */
.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;
  content: none;
  border: 0;
  box-shadow: none;
}

@media (min-width: 992px) {
  .pkp_structure_content {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--kh-column-gap);
  }

  .pkp_structure_content > .pkp_structure_main {
    order: 1;
    flex: 1 1 0%;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  .pkp_structure_content > .pkp_structure_sidebar {
    box-sizing: border-box;
    order: 2;
    flex: 0 0 var(--kh-sidebar);
    float: none;
    width: var(--kh-sidebar);
    min-width: 0;
    max-width: var(--kh-sidebar);
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}

.cmp_breadcrumbs {
  margin-bottom: 30px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--kh-line);
  color: var(--kh-muted);
  font-size: 13px;
}

.cmp_breadcrumbs a {
  color: var(--kh-teal);
  font-weight: 600;
}

.page_title {
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.pkp_page_index .homepage_image {
  margin: 0 0 45px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--kh-navy);
  box-shadow: var(--kh-shadow);
}

.pkp_page_index .homepage_image img {
  display: block;
  width: 100%;
}

.pkp_page_index .journal_description,
.pkp_page_index .additional_content {
  margin: 0 0 48px;
  padding: 34px 38px;
  border: 1px solid var(--kh-line);
  border-left: 5px solid var(--kh-teal);
  border-radius: var(--kh-radius);
  background: var(--kh-white);
  box-shadow: 0 12px 34px rgba(4, 47, 58, 0.06);
}

.pkp_page_index .journal_description p:last-child,
.pkp_page_index .additional_content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   HOMEPAGE BRAND EXPERIENCE — MODERN ACADEMIC / COMMUNITY IMPACT
   ========================================================= */

/* In OJS 3.3, the journal description may use either class below,
   depending on the active theme. This treatment turns it into a hero. */
.pkp_page_index .homepage_about,
.pkp_page_index .journal_description,
.pkp_page_index .additional_content {
  position: relative;
  isolation: isolate;
  margin: 0 0 46px;
  padding: clamp(36px, 6vw, 68px);
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 189, 88, 0.17), transparent 31%),
    radial-gradient(circle at 78% 110%, rgba(13, 124, 120, 0.42), transparent 36%),
    var(--kh-navy);
  color: #d8e8e8;
  box-shadow: 0 24px 60px rgba(4, 47, 58, 0.19);
}

.pkp_page_index .homepage_about::before,
.pkp_page_index .journal_description::before,
.pkp_page_index .additional_content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--kh-gold), var(--kh-teal));
}

.pkp_page_index .homepage_about::after,
.pkp_page_index .journal_description::after,
.pkp_page_index .additional_content::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -145px;
  right: -120px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.pkp_page_index .homepage_about h1,
.pkp_page_index .homepage_about h2,
.pkp_page_index .homepage_about h3,
.pkp_page_index .journal_description h1,
.pkp_page_index .additional_content h1,
.pkp_page_index .journal_description h2,
.pkp_page_index .additional_content h2,
.pkp_page_index .journal_description h3,
.pkp_page_index .additional_content h3 {
  max-width: 820px;
  margin: 0 0 20px;
  color: var(--kh-white);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.pkp_page_index .homepage_about > p,
.pkp_page_index .journal_description > p,
.pkp_page_index .additional_content > p {
  max-width: 780px;
  color: #d8e8e8;
  font-size: 13px;
  line-height: 1.75;
}

.pkp_page_index .homepage_about a,
.pkp_page_index .journal_description a,
.pkp_page_index .additional_content a {
  color: var(--kh-gold);
  font-weight: 700;
}

.pkp_page_index .homepage_about table,
.pkp_page_index .journal_description table,
.pkp_page_index .additional_content table {
  width: 100%;
  margin: 28px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.055);
}

.pkp_page_index .homepage_about table td,
.pkp_page_index .homepage_about table th,
.pkp_page_index .journal_description table td,
.pkp_page_index .additional_content table td,
.pkp_page_index .journal_description table th,
.pkp_page_index .additional_content table th {
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #e6f0f0;
  font-size: 13px;
}

.pkp_page_index .homepage_about table tr:last-child td,
.pkp_page_index .journal_description table tr:last-child td,
.pkp_page_index .additional_content table tr:last-child td {
  border-bottom: 0;
}

/* Reusable components for content entered in Website > Appearance >
   Homepage Additional Content. */
.kh-home-section {
  margin: 70px 0;
}

.kh-home-section__eyebrow {
  margin: 0 0 12px;
  color: var(--kh-teal-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.kh-home-section__title {
  margin: 0 0 16px;
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.kh-home-section__lead {
  max-width: 760px;
  margin: 0 0 30px;
  color: var(--kh-muted);
  font-size: 13px;
}

.kh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.kh-hero-actions a,
.kh-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid var(--kh-gold);
  border-radius: 5px;
  background: var(--kh-gold);
  color: var(--kh-navy-dark) !important;
  font-family: var(--kh-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kh-hero-actions a:nth-child(even),
.kh-button--outline {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--kh-white) !important;
}

.kh-journal-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  border-left: 1px solid rgba(255, 255, 255, 0.17);
  list-style: none;
}

.kh-journal-facts li {
  min-width: 0;
  padding: 16px 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.17);
  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
  color: var(--kh-white);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.kh-scope-grid,
.kh-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--kh-line);
  border-left: 1px solid var(--kh-line);
}

.kh-scope-card,
.kh-benefit-card {
  min-height: 175px;
  padding: 24px;
  border-right: 1px solid var(--kh-line);
  border-bottom: 1px solid var(--kh-line);
  background: var(--kh-white);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.kh-scope-card:hover,
.kh-benefit-card:hover {
  z-index: 1;
  background: var(--kh-cream);
  transform: translateY(-3px);
}

.kh-scope-card span,
.kh-benefit-card span {
  display: block;
  margin-bottom: 22px;
  color: var(--kh-teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.kh-scope-card strong,
.kh-benefit-card strong {
  display: block;
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.kh-scope-card p,
.kh-benefit-card p {
  margin: 8px 0 0;
  color: var(--kh-muted);
  font-size: 13px;
  line-height: 1.55;
}

.kh-indexing {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.kh-indexing a,
.kh-indexing span {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--kh-line);
  border-radius: 6px;
  background: var(--kh-white);
  color: var(--kh-navy);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 7px 20px rgba(4, 47, 58, 0.045);
}

.kh-call-for-papers {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 28px auto 20px;
  padding: 22px 24px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--kh-teal);
  color: #e8f5f2;
  text-align: center;
  box-shadow: 0 6px 18px rgba(4, 47, 58, 0.08);
}

.kh-call-for-papers::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--kh-gold);
}

.kh-call-for-papers h2,
.kh-call-for-papers h3 {
  margin: 0 auto 10px;
  color: var(--kh-white);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.kh-call-for-papers p {
  max-width: 540px;
  margin: 0 auto 12px;
  color: #e8f5f2;
  font-size: 13px;
  line-height: 1.55;
}

.kh-call-for-papers .kh-button {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 14px;
  border-color: var(--kh-gold);
  background: var(--kh-gold);
  font-size: 13px;
  line-height: 1.4;
}

.kh-call-for-papers .kh-home-section__eyebrow {
  margin-bottom: 8px;
  font-size: 13px;
}

.kh-call-for-papers p:last-child {
  margin-bottom: 0;
}

.kh-call-for-papers img {
  display: block;
  width: auto;
  max-width: min(100%, 280px);
  height: auto;
  margin: 0 auto;
}

/* =========================================================
   5. CURRENT ISSUE
   ========================================================= */

.pkp_page_index .current_issue {
  margin-top: 30px;
  padding: 28px;
  border: 1px solid var(--kh-line);
  border-radius: 12px;
  background: var(--kh-cream);
}

.pkp_page_index .current_issue > h2,
.current_issue_title {
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--kh-gold);
  color: var(--kh-navy);
  font-size: 13px;
}

.pkp_page_index .current_issue .current_issue_title {
  color: var(--kh-teal-dark);
}

.pkp_page_index .current_issue .read_more {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  padding: 12px 18px;
  border: 0;
  border-radius: 5px;
  background: var(--kh-navy);
  color: var(--kh-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pkp_page_index .current_issue .read_more:hover,
.pkp_page_index .current_issue .read_more:focus {
  background: var(--kh-teal);
  color: var(--kh-white);
  transform: translateY(-2px);
}

/* =========================================================
   6. ISSUE TABLE OF CONTENTS AND VERTICAL ARTICLE LIST
   ========================================================= */

.obj_issue_toc {
  margin-top: 15px;
}

.obj_issue_toc .heading {
  margin-bottom: 35px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--kh-line);
}

.obj_issue_toc .cover {
  margin-right: 32px;
}

.obj_issue_toc .cover img {
  border-radius: 6px;
  box-shadow: 0 14px 35px rgba(4, 47, 58, 0.18);
}

.obj_issue_toc .published,
.obj_issue_toc .description {
  color: var(--kh-muted);
}

.obj_issue_toc .section {
  margin: 30px 0 0;
  padding: 0;
  border: 0;
}

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
  margin: 0;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid #ccd7d3;
  background: transparent;
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
}

.obj_issue_toc .articles {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  columns: auto;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  counter-reset: khidmatuna-article;
}

.obj_issue_toc .articles > li {
  box-sizing: border-box;
  display: block;
  float: none;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.obj_issue_toc .articles > li:last-child {
  margin-bottom: 0;
}

.obj_article_summary {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 26px 22px 26px 66px;
  border: 1px solid var(--kh-line);
  border-radius: 6px;
  background: var(--kh-white);
  box-shadow: none;
  counter-increment: khidmatuna-article;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.obj_article_summary::before {
  content: counter(khidmatuna-article, decimal-leading-zero);
  position: absolute;
  top: 30px;
  left: 20px;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: var(--kh-teal);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.obj_article_summary::after {
  display: none;
  content: none;
}

.obj_article_summary:hover {
  border-color: #b7cfca;
  background: #f3f8f6;
  box-shadow: none;
  transform: none;
}

.obj_article_summary .title {
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
}

.obj_article_summary .title a {
  color: var(--kh-navy);
  text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
  color: var(--kh-teal);
}

.obj_article_summary .meta {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
}

.obj_article_summary .authors {
  flex: 1 1 100%;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--kh-muted);
  font-size: 13px;
  line-height: 1.6;
}

.obj_article_summary .pages {
  position: static;
  float: none;
  width: auto;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  color: var(--kh-muted);
  font-size: 13px;
  text-align: left;
}

.obj_article_summary .galleys_links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.obj_article_summary .galleys_links > li {
  margin: 0;
  padding: 0;
  border: 0;
}

.obj_galley_link,
.obj_article_summary .galleys_links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-right: 7px;
  padding: 7px 14px;
  border: 1px solid var(--kh-teal);
  border-radius: 4px;
  background: transparent;
  color: var(--kh-teal-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obj_galley_link:hover,
.obj_galley_link:focus,
.obj_article_summary .galleys_links a:hover,
.obj_article_summary .galleys_links a:focus {
  border-color: var(--kh-teal);
  background: var(--kh-teal);
  color: var(--kh-white);
}

/* =========================================================
   7. ARTICLE DETAIL PAGE
   ========================================================= */

.obj_article_details .page_title {
  max-width: 880px;
  font-size: 13px;
}

.obj_article_details .authors,
.obj_article_details .item.authors,
.obj_article_details .item.abstract,
.obj_article_details .item.references,
.obj_article_details .item.keywords,
.obj_article_details .item.doi {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--kh-line);
}

.obj_article_details .item .label {
  margin-bottom: 10px;
  color: var(--kh-teal-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.obj_article_details .abstract {
  color: var(--kh-text);
  font-size: 13px;
  line-height: 1.85;
}

.obj_article_details .main_entry {
  padding-right: 38px;
}

.obj_article_details .entry_details {
  padding: 25px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius);
  background: var(--kh-cream);
}

/* =========================================================
   8. SIDEBAR
   ========================================================= */

.pkp_structure_sidebar {
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow-wrap: anywhere;
}

.pkp_structure_sidebar .pkp_block {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pkp_structure_sidebar .pkp_block .title {
  display: block;
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 4px;
  background: var(--kh-navy);
  color: var(--kh-white);
  font-family: var(--kh-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pkp_structure_sidebar .pkp_block .content {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  box-shadow: none;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.pkp_structure_sidebar .pkp_block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkp_structure_sidebar .pkp_block li {
  padding: 6px 0;
  border: 0;
}

/* Remove decorative sidebar rules, including custom-block separators. */
.pkp_structure_sidebar hr,
.pkp_structure_sidebar .pkp_block::before,
.pkp_structure_sidebar .pkp_block::after {
  display: none;
}

.pkp_structure_sidebar .block_browse .current a {
  border-left: 0;
}

.pkp_structure_sidebar .pkp_block a {
  color: var(--kh-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.pkp_structure_sidebar .pkp_block a:hover,
.pkp_structure_sidebar .pkp_block a:focus {
  color: var(--kh-teal);
}

/* Fit fixed-width custom-block content without hiding it or adding scrollbars. */
.pkp_structure_sidebar img,
.pkp_structure_sidebar iframe,
.pkp_structure_sidebar input,
.pkp_structure_sidebar select {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100% !important;
}

.pkp_structure_sidebar img {
  height: auto !important;
}

.pkp_structure_sidebar table {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
  border: 0;
}

.pkp_structure_sidebar td,
.pkp_structure_sidebar th {
  padding: 4px;
  border: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.pkp_structure_sidebar .block_make_submission a {
  display: block;
  padding: 12px;
  border: 0;
  border-radius: 5px;
  background: var(--kh-gold);
  color: var(--kh-navy-dark);
  font-weight: 700;
  text-align: center;
  text-transform: none;
}

.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission a:focus {
  background: var(--kh-teal);
  color: var(--kh-white);
}

/* =========================================================
   9. BUTTONS, FORMS, PAGINATION, AND NOTICES
   ========================================================= */

.cmp_button,
.pkp_button,
button.submit,
input[type="submit"] {
  padding: 11px 18px;
  border: 1px solid var(--kh-navy);
  border-radius: 5px;
  background: var(--kh-navy);
  color: var(--kh-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

.cmp_button:hover,
.cmp_button:focus,
.pkp_button:hover,
.pkp_button:focus,
button.submit:hover,
button.submit:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  border-color: var(--kh-teal);
  background: var(--kh-teal);
  color: var(--kh-white);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  border: 1px solid #bccdca;
  border-radius: 5px;
  background: var(--kh-white);
  color: var(--kh-text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--kh-teal);
  box-shadow: 0 0 0 3px rgba(13, 124, 120, 0.12);
}

.cmp_pagination {
  margin-top: 35px;
  padding-top: 20px;
  border-top: 1px solid var(--kh-line);
}

.cmp_pagination a,
.cmp_pagination .current {
  display: inline-grid;
  min-width: 38px;
  min-height: 38px;
  place-items: center;
  border-radius: 4px;
}

.cmp_pagination .current {
  background: var(--kh-navy);
  color: var(--kh-white);
}

.cmp_notification {
  border-left: 5px solid var(--kh-teal);
  border-radius: 5px;
  background: var(--kh-teal-soft);
  color: var(--kh-text);
}

/* =========================================================
   10. ARCHIVE — COMPACT LIST, DIFFERENT FROM HOMEPAGE
   ========================================================= */

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .issues_archive {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kh-line);
  list-style: none;
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) auto;
  gap: 25px;
  align-items: center;
  margin: 0;
  padding: 25px 8px;
  border: 0;
  border-bottom: 1px solid var(--kh-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.2s ease, padding 0.2s ease;
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary:hover {
  padding-right: 16px;
  padding-left: 16px;
  background: var(--kh-cream);
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .cover {
  grid-column: 1;
  grid-row: 1 / span 4;
  width: 105px;
  margin: 0;
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .cover img {
  display: block;
  width: 100%;
  max-height: 145px;
  object-fit: cover;
  border: 1px solid var(--kh-line);
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(4, 47, 58, 0.12);
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .title {
  grid-column: 2;
  margin: 0 0 6px;
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .title a {
  color: var(--kh-navy);
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .title a:hover,
:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .title a:focus {
  color: var(--kh-teal);
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .series,
:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .published,
:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .description {
  grid-column: 2;
  margin: 3px 0;
  color: var(--kh-muted);
  font-size: 13px;
  line-height: 1.55;
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .description p {
  margin: 0;
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .read_more {
  grid-column: 3;
  grid-row: 1 / span 4;
  align-self: center;
  padding: 9px 13px;
  border: 1px solid var(--kh-teal);
  border-radius: 4px;
  color: var(--kh-teal-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .read_more:hover,
:is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .read_more:focus {
  background: var(--kh-teal);
  color: var(--kh-white);
}

/* =========================================================
   11. ANNOUNCEMENTS — EDITORIAL TIMELINE CARDS
   ========================================================= */

.pkp_page_announcement .cmp_announcements,
.pkp_page_announcements .cmp_announcements {
  position: relative;
  margin-top: 15px;
  padding-left: 34px;
}

.pkp_page_announcement .cmp_announcements::before,
.pkp_page_announcements .cmp_announcements::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 2px;
  background: linear-gradient(var(--kh-gold), var(--kh-teal-soft));
}

.obj_announcement_summary {
  position: relative;
  margin: 0 0 22px;
  padding: 27px 30px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius);
  background: var(--kh-white);
  box-shadow: 0 10px 28px rgba(4, 47, 58, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

.obj_announcement_summary::before {
  content: "";
  position: absolute;
  top: 31px;
  left: -33px;
  width: 13px;
  height: 13px;
  border: 4px solid var(--kh-white);
  border-radius: 50%;
  background: var(--kh-gold);
  box-shadow: 0 0 0 1px var(--kh-gold);
}

.obj_announcement_summary:hover {
  border-color: #b7cfca;
  box-shadow: 0 16px 38px rgba(4, 47, 58, 0.11);
  transform: translateY(-3px);
}

.obj_announcement_summary .date,
.obj_announcement_full .date {
  display: inline-block;
  margin: 0 0 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--kh-teal-soft);
  color: var(--kh-teal-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.obj_announcement_summary .title,
.obj_announcement_summary h2,
.obj_announcement_summary h3,
.obj_announcement_full .page_title {
  margin: 0 0 10px;
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.obj_announcement_summary .title a,
.obj_announcement_summary h2 a,
.obj_announcement_summary h3 a {
  color: var(--kh-navy);
}

.obj_announcement_summary .title a:hover,
.obj_announcement_summary h2 a:hover,
.obj_announcement_summary h3 a:hover {
  color: var(--kh-teal);
}

.obj_announcement_summary .description,
.obj_announcement_summary .summary {
  color: var(--kh-muted);
  font-size: 13px;
}

.obj_announcement_summary .read_more {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--kh-teal);
  color: var(--kh-teal-dark);
  font-size: 13px;
  font-weight: 700;
}

.obj_announcement_full {
  padding: 35px;
  border: 1px solid var(--kh-line);
  border-top: 5px solid var(--kh-gold);
  border-radius: var(--kh-radius);
  background: var(--kh-white);
  box-shadow: var(--kh-shadow);
}

/* Compact homepage Call for Paper previews. Full announcement pages keep
   their existing readable layout. */
.pkp_page_index .cmp_announcements > .obj_announcement_summary,
.pkp_page_index .cmp_announcements .obj_announcement_summary {
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 6px;
  box-shadow: none;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary::before {
  display: none;
  content: none;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary:hover {
  transform: none;
  box-shadow: none;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary h2,
.pkp_page_index .cmp_announcements .obj_announcement_summary h3,
.pkp_page_index .cmp_announcements .obj_announcement_summary .title {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary .date {
  margin-bottom: 8px;
  padding: 3px 8px;
  font-size: 13px;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary .summary,
.pkp_page_index .cmp_announcements .obj_announcement_summary .description {
  font-size: 13px;
  line-height: 1.5;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary p {
  margin: 6px 0;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary .read_more {
  margin-top: 6px;
  font-size: 13px;
}

.pkp_page_index .cmp_announcements .obj_announcement_summary img {
  display: block;
  width: auto;
  max-width: min(100%, 240px);
  height: auto;
}

/* =========================================================
   12. EDITORIAL TEAM AND REVIEWER PAGES
   ========================================================= */

.page_editorial_team .editorial_team,
.pkp_page_about .editorial_team {
  margin-top: 25px;
}

.page_editorial_team .editorial_team h2,
.page_editorial_team .editorial_team h3,
.pkp_page_about .editorial_team h2,
.pkp_page_about .editorial_team h3,
.page_custom .page_content > h2,
.page_custom .page_content > h3 {
  margin: 38px 0 18px;
  padding: 13px 18px;
  border-left: 5px solid var(--kh-gold);
  background: var(--kh-navy);
  color: var(--kh-white);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
}

.page_editorial_team .editorial_team > ul,
.page_editorial_team .editorial_team > div > ul,
.pkp_page_about .editorial_team > ul,
.pkp_page_about .editorial_team > div > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.page_editorial_team .editorial_team li,
.pkp_page_about .editorial_team li {
  position: relative;
  min-height: 120px;
  margin: 0;
  padding: 23px 23px 20px 28px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius);
  background: linear-gradient(135deg, var(--kh-white), #f8fbfa);
  box-shadow: 0 8px 24px rgba(4, 47, 58, 0.05);
}

.page_editorial_team .editorial_team li::before,
.pkp_page_about .editorial_team li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: var(--kh-radius) 0 0 var(--kh-radius);
  background: linear-gradient(var(--kh-gold), var(--kh-teal));
}

.page_editorial_team .editorial_team li strong,
.pkp_page_about .editorial_team li strong {
  display: block;
  margin-bottom: 5px;
  color: var(--kh-navy);
  font-family: var(--kh-serif);
  font-size: 13px;
  font-weight: 600;
}

.page_editorial_team .editorial_team li a,
.pkp_page_about .editorial_team li a {
  display: inline-block;
  margin-top: 7px;
  color: var(--kh-teal-dark);
  font-size: 13px;
  font-weight: 700;
}

/* Reviewer lists are often entered through a custom page as a table. */
.page_custom .page_content table {
  width: 100%;
  margin: 20px 0 35px;
  overflow: hidden;
  border: 1px solid var(--kh-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--kh-radius);
  background: var(--kh-white);
  box-shadow: 0 10px 28px rgba(4, 47, 58, 0.06);
}

.page_custom .page_content table th {
  padding: 13px 15px;
  border: 0;
  border-bottom: 2px solid var(--kh-gold);
  background: var(--kh-navy);
  color: var(--kh-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.page_custom .page_content table td {
  padding: 14px 15px;
  border: 0;
  border-bottom: 1px solid var(--kh-line);
  color: var(--kh-text);
  font-size: 13px;
  vertical-align: top;
}

.page_custom .page_content table tbody tr:nth-child(even) td {
  background: #f7faf9;
}

.page_custom .page_content table tbody tr:hover td {
  background: var(--kh-teal-soft);
}

.page_custom .page_content table tbody tr:last-child td {
  border-bottom: 0;
}

.page_custom .page_content table a {
  color: var(--kh-teal-dark);
  font-weight: 700;
}

/* =========================================================
   13. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper {
  border: 0;
  background: var(--kh-navy-dark);
  color: #bdd0d2;
}

.pkp_structure_footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 50px 30px;
}

.pkp_footer_content {
  color: #bdd0d2;
  font-size: 13px;
}

.pkp_footer_content a {
  color: var(--kh-gold);
}

.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
  color: var(--kh-white);
}

.pkp_brand_footer {
  margin-top: 25px;
  opacity: 0.78;
}

/* =========================================================
   11. TABLET AND MOBILE
   ========================================================= */

@media (max-width: 991px) {
  :root {
    --kh-gutter: 22px;
  }

  .pkp_site_name_wrapper {
    position: relative;
    height: auto;
    min-height: 76px;
  }

  .pkp_site_name {
    position: relative;
    left: auto;
    right: auto;
    margin-left: 46px;
    white-space: normal;
    overflow: visible;
  }

  .pkp_site_nav_toggle {
    top: 50%;
    transform: translateY(-50%);
  }

  .pkp_site_nav_menu {
    box-sizing: border-box;
    max-width: 100%;
  }

  .pkp_head_wrapper {
    padding-right: 22px;
    padding-left: 22px;
  }

  .pkp_site_name {
    padding-top: 27px;
    padding-bottom: 23px;
  }

  .pkp_navigation_primary_row {
    border-radius: 0;
  }

  .pkp_navigation_primary > li > a {
    color: var(--kh-navy);
  }

  .pkp_structure_content {
    padding: 42px 22px 62px;
  }

  .pkp_structure_content {
    display: flex;
    flex-direction: column;
  }

  .pkp_structure_content > .pkp_structure_main,
  .pkp_structure_content > .pkp_structure_sidebar {
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .pkp_structure_content > .pkp_structure_main { order: 1; }
  .pkp_structure_content > .pkp_structure_sidebar {
    order: 2;
    margin-top: 35px;
  }

  .pkp_site_nav_menu {
    background: var(--kh-white);
  }

  .pkp_site_nav_menu .pkp_navigation_user > li > a {
    color: var(--kh-navy);
  }

  .pkp_site_nav_menu .pkp_navigation_user {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .pkp_navigation_primary > li > a[href*="/login"],
  .pkp_navigation_primary > li > a[href*="/user/register"] {
    display: inline-block;
    margin: 5px 0;
  }

  .pkp_site_nav_menu .pkp_navigation_user > li > a:hover,
  .pkp_site_nav_menu .pkp_navigation_user > li > a:focus {
    background: var(--kh-teal-soft);
    color: var(--kh-teal-dark);
  }

  .obj_article_details .main_entry {
    padding-right: 25px;
  }

  .kh-journal-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kh-scope-grid,
  .kh-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --kh-gutter: 18px;
  }

  body {
    font-size: 13px;
  }

  .pkp_structure_page {
    width: 100%;
    box-shadow: none;
  }

  .pkp_head_wrapper {
    padding-right: 18px;
    padding-left: 18px;
  }

  .pkp_site_name {
    padding-top: 25px;
    padding-bottom: 22px;
  }

  .pkp_site_name .is_text,
  .pkp_site_name > a {
    font-size: 13px;
  }

  .pkp_site_name .is_img img {
    max-height: none;
  }

  .pkp_structure_content {
    padding: 34px 18px 50px;
  }

  .pkp_structure_main,
  .pkp_structure_sidebar {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .pkp_structure_sidebar {
    margin-top: 45px;
  }

  .pkp_page_index .journal_description,
  .pkp_page_index .additional_content,
  .pkp_page_index .current_issue {
    padding: 24px 21px;
  }

  .pkp_page_index .homepage_about,
  .pkp_page_index .journal_description,
  .pkp_page_index .additional_content {
    padding: 32px 23px;
    border-radius: 8px;
  }

  .pkp_page_index .homepage_about h1,
  .pkp_page_index .homepage_about h2,
  .pkp_page_index .homepage_about h3,
  .pkp_page_index .journal_description h1,
  .pkp_page_index .journal_description h2,
  .pkp_page_index .journal_description h3 {
    font-size: 13px;
  }

  .kh-hero-actions {
    flex-direction: column;
  }

  .kh-hero-actions a,
  .kh-button {
    width: 100%;
  }

  .kh-journal-facts,
  .kh-scope-grid,
  .kh-benefit-grid {
    grid-template-columns: 1fr;
  }

  .kh-scope-card,
  .kh-benefit-card {
    min-height: 0;
  }

  .obj_issue_toc .cover {
    float: none;
    max-width: 230px;
    margin: 0 auto 25px;
  }

  .obj_article_summary {
    min-height: 0;
    padding: 22px 12px 22px 44px;
  }

  .obj_issue_toc .articles {
    grid-template-columns: 1fr;
  }

  .obj_article_summary::before {
    top: 27px;
    left: 10px;
  }

  .obj_article_summary .title {
    font-size: 13px;
  }

  .obj_article_details .main_entry {
    padding-right: 0;
  }

  .obj_article_details .entry_details {
    margin-top: 30px;
  }

  :is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }

  :is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary:hover {
    padding-right: 8px;
    padding-left: 8px;
  }

  :is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .cover {
    width: 78px;
  }

  :is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .cover img {
    max-height: 110px;
  }

  :is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .title {
    font-size: 13px;
  }

  :is(.pkp_page_issue_archive, .pkp_page_issue.pkp_op_archive) .obj_issue_summary .read_more {
    display: none;
  }

  .pkp_page_announcement .cmp_announcements,
  .pkp_page_announcements .cmp_announcements {
    padding-left: 24px;
  }

  .obj_announcement_summary {
    padding: 22px 20px;
  }

  .obj_announcement_summary::before {
    left: -25px;
  }

  .page_editorial_team .editorial_team > ul,
  .page_editorial_team .editorial_team > div > ul,
  .pkp_page_about .editorial_team > ul,
  .pkp_page_about .editorial_team > div > ul {
    grid-template-columns: 1fr;
  }

  .page_custom .page_content {
    overflow-x: auto;
  }

  .page_custom .page_content table {
    min-width: 580px;
  }

  .pkp_structure_footer {
    padding: 38px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* =========================================================
   14. TEXT SIZE — 13 PX ON DESKTOP, TABLET, AND MOBILE
   Covers theme defaults and font sizes pasted into the OJS rich-text editor.
   Images (including the journal banner) keep their existing dimensions.
   Icon pseudo-elements, screen-reader positioning, and navigation-toggle
   geometry are not reset by this typography rule.
   ========================================================= */

.pkp_structure_page,
.pkp_structure_page :is(
  h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, td, th,
  div, section, article, aside, header, footer, nav,
  strong, em, b, small, big, label, legend, figcaption, blockquote,
  input, button, select, option, textarea,
  span:not(.pkp_site_nav_toggle > span), [style*="font-size"]
) {
  font-size: 13px !important;
}

/* =========================================================
   15. HOMEPAGE — ADDITIONAL CONTENT IN THE SUMMARY POSITION
   OJS 3.3.0.13 Default Theme: .page_index_journal contains homepage_image,
   homepage_about, cmp_announcements, current_issue, and additional_content.
   The direct-main selector supports themes omitting the page wrapper.
   This does not affect the journal's separate About page.
   Modern browsers support :has(); without it the original summary remains.
   ========================================================= */

/* Only activate the replacement when OJS renders Additional Content. */
.pkp_page_index :is(.page_index_journal, .pkp_structure_main):has(> .additional_content:not(:empty)) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Preserve the homepage image above the replacement summary area. */
.pkp_page_index :is(.page_index_journal, .pkp_structure_main):has(> .additional_content:not(:empty)) > .homepage_image {
  order: -2;
}

.pkp_page_index :is(.page_index_journal, .pkp_structure_main):has(> .additional_content:not(:empty)) > .additional_content {
  box-sizing: border-box;
  order: -1;
  flex: 0 0 auto;
  float: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
}

/* The journal summary is hidden only on this homepage, not deleted. */
.pkp_page_index :is(.page_index_journal, .pkp_structure_main):has(> .additional_content:not(:empty)) > :is(.homepage_about, .journal_description) {
  display: none !important;
}

/* =========================================================
   16. ADDITIONAL CONTENT — JOURNAL SUMMARY COLOURS
   Shared hero rules above supply the background, top accent, ornament,
   radius, spacing and table styling. Keep text pasted from the OJS editor
   readable on that dark background, including nested coloured spans.
   ========================================================= */

.pkp_page_index .additional_content [style*="color"]:not(a, h1, h2, h3, h4, h5, h6) {
  color: inherit !important;
}

.pkp_page_index .additional_content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--kh-white) !important;
}

.pkp_page_index .additional_content a,
.pkp_page_index .additional_content a:visited {
  color: var(--kh-gold) !important;
}

.pkp_page_index .additional_content a:hover,
.pkp_page_index .additional_content a:focus {
  color: var(--kh-white) !important;
}

/* Gold buttons retain dark, legible labels. */
.pkp_page_index .additional_content a.kh-button {
  color: var(--kh-navy-dark) !important;
}

/* Override white cell backgrounds copied into the editor. */
.pkp_page_index .additional_content table {
  background: rgba(255, 255, 255, 0.055) !important;
}

.pkp_page_index .additional_content table :is(thead, tbody, tfoot, tr, td, th) {
  background: transparent !important;
  color: #e6f0f0 !important;
}

/* =========================================================
   17. TWO-COLUMN ADDITIONAL CONTENT — REFERENCE HERO
   Requires the companion khidmatuna-additional-content.html fragment.
   Base text remains 13px. The hero headline and cover lettering are larger
   to reproduce the reference. The rest of the journal keeps its layout.
   ========================================================= */

.pkp_page_index .additional_content:has(> .kh-hero) {
  container-type: inline-size;
  container-name: kh-additional;
  padding: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(ellipse at 14% 110%, rgba(242, 189, 88, 0.09), transparent 44%),
    var(--kh-navy);
}

.pkp_page_index .additional_content:has(> .kh-hero)::before {
  display: none;
}

.pkp_page_index .additional_content .kh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.85fr);
  align-items: center;
  gap: clamp(22px, 3.5cqi, 46px);
  width: 100%;
  margin: 0;
}

.pkp_page_index .additional_content .kh-hero-copy {
  min-width: 0;
}

.pkp_page_index .additional_content .kh-hero .kh-hero-eyebrow {
  margin: 0 0 16px;
  color: #a2e0de;
  font-family: var(--kh-sans);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pkp_page_index .additional_content .kh-hero .kh-hero-title {
  max-width: 100%;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff !important;
  font-family: var(--kh-serif);
  font-size: clamp(36px, 5.8cqi, 70px) !important;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: none;
  overflow-wrap: normal;
}

.pkp_page_index .additional_content .kh-hero .kh-hero-title em {
  color: var(--kh-gold) !important;
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  font-style: italic;
}

.pkp_page_index .additional_content .kh-hero .kh-hero-description {
  max-width: 560px;
  margin: 0 0 28px;
  color: #d8e8e8;
  font-size: 13px !important;
  line-height: 1.9;
}

.pkp_page_index .additional_content .kh-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}

.pkp_page_index .additional_content .kh-hero a.kh-hero-button {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  max-width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(216, 232, 232, 0.35);
  border-radius: 4px;
  color: #fff !important;
  background: transparent;
  font-family: var(--kh-sans);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-transform: none;
}

.pkp_page_index .additional_content .kh-hero a.kh-hero-button-primary {
  border-color: var(--kh-gold);
  background: var(--kh-gold);
  color: var(--kh-navy-dark) !important;
}

.pkp_page_index .additional_content .kh-hero a.kh-hero-button:hover,
.pkp_page_index .additional_content .kh-hero a.kh-hero-button:focus {
  border-color: var(--kh-gold);
  background: #ffe0a0;
  color: var(--kh-navy-dark) !important;
}

.pkp_page_index .additional_content .kh-hero-cover {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: 100%;
  max-width: 370px;
  min-width: 0;
  margin: 0;
  padding: clamp(22px, 2.7cqi, 34px);
  overflow: hidden;
  background: var(--kh-cream);
  color: var(--kh-navy);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.pkp_page_index .additional_content .kh-hero-cover::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid #cdd5cf;
  pointer-events: none;
}

.pkp_page_index .additional_content .kh-hero .kh-hero-cover :is(p, span) {
  color: var(--kh-navy) !important;
}

.pkp_page_index .additional_content .kh-hero .kh-cover-ribbon {
  position: absolute;
  z-index: 2;
  top: 29px;
  right: -48px;
  width: 185px;
  padding: 8px 0;
  transform: rotate(45deg);
  background: var(--kh-gold);
  color: var(--kh-navy) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
}

.pkp_page_index .additional_content .kh-hero .kh-cover-journal {
  margin: 0;
  padding: 8px 0 18px;
  border-bottom: 1px solid #c9d2cc;
  font-family: var(--kh-serif);
  font-size: clamp(17px, 2.8cqi, 28px) !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.055em;
}

.pkp_page_index .additional_content .kh-cover-art {
  position: relative;
  aspect-ratio: 1.2;
  margin: 24px 0 22px;
  overflow: hidden;
  background: var(--kh-navy);
}

.pkp_page_index .additional_content .kh-cover-art::before,
.pkp_page_index .additional_content .kh-cover-art::after {
  content: "";
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border: 1px solid #88b6b1;
  border-radius: 50%;
}

.pkp_page_index .additional_content .kh-cover-art::before {
  top: 0;
  left: 8%;
}

.pkp_page_index .additional_content .kh-cover-art::after {
  top: -27%;
  left: -15%;
  width: 91%;
  border-color: rgba(242, 189, 88, 0.7);
}

.pkp_page_index .additional_content .kh-cover-sun {
  position: absolute;
  right: -12%;
  bottom: -17%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--kh-gold);
}

.pkp_page_index .additional_content .kh-hero .kh-cover-volume {
  margin: 0 0 4px;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pkp_page_index .additional_content .kh-cover-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 7px 12px;
  margin-bottom: 25px;
}

.pkp_page_index .additional_content .kh-hero .kh-cover-date {
  margin: 0;
  font-family: var(--kh-serif);
  font-size: clamp(23px, 3.5cqi, 34px) !important;
  line-height: 1.3;
}

.pkp_page_index .additional_content .kh-hero .kh-cover-issn {
  margin: 0;
  color: #61747a !important;
  font-size: 13px !important;
  line-height: 1.6;
}

@container kh-additional (max-width: 560px) {
  .pkp_page_index .additional_content .kh-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pkp_page_index .additional_content .kh-hero-cover {
    justify-self: center;
    max-width: 340px;
  }
}

@media (max-width: 600px) {
  .pkp_page_index .additional_content .kh-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .pkp_page_index .additional_content .kh-hero .kh-hero-title {
    font-size: clamp(34px, 9vw, 48px) !important;
  }

  .pkp_page_index .additional_content .kh-hero a.kh-hero-button {
    flex: 1 1 100%;
    width: 100%;
  }

  .pkp_page_index .additional_content .kh-hero-cover {
    justify-self: center;
    max-width: 340px;
  }
}