/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   AFRICAN JOURNAL OF EDUCATION, SCIENCE AND TECHNOLOGY      ║
 * ║   AJEST — Premium Brand Stylesheet  v5.0                    ║
 * ║   OJS 3.3.x+ Compatible  |  Bootstrap 5 Enhanced            ║
 * ║   v5: Dropdown fully visible · header overflow:visible fix  ║
 * ║       Full responsive: 1280·1024·992·768·600·480·360px      ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ── Bootstrap 5 CDN ── */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,600;0,9..40,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');


/* ══════════════════════════════════════════════════
   §1  BRAND TOKENS
═══════════════════════════════════════════════════ */
:root {
  /* ── Blue/Green Palette ── */
  /* Deep blues (header, footers, nav backgrounds) */
  --navy:           #0A2342;   /* deep ocean blue */
  --navy-mid:       #0D3460;   /* rich mid-navy */
  --navy-soft:      #1A4F8C;   /* softer bright navy */

  /* Accent greens (replaces terra/orange) */
  --terra:          #1A7A4A;   /* forest green */
  --terra-dark:     #145C38;   /* deep forest */
  --terra-deeper:   #0E4028;   /* darkest green */
  --terra-light:    #E3F5EC;   /* pale mint */

  /* Mid-tone teal/cyan (replaces gold) */
  --gold:           #2AB8B0;   /* vibrant teal */
  --gold-deep:      #1E8F88;   /* deep teal */
  --gold-pale:      #E8F9F8;   /* pale aqua */

  /* Neutral backgrounds */
  --ivory:          #F4F8FC;   /* cool off-white */
  --white:          #FFFFFF;
  --ink:            #0D1F35;   /* deep blue-black */
  --muted:          #4A6380;   /* blue-grey */
  --smoke:          #E8EFF6;   /* cool light grey */
  --border-light:   #C8D9EC;
  --border-mid:     #A8C0D8;

  /* Typography */
  --ff-display:  'Fraunces', Georgia, serif;
  --ff-body:     'Libre Baskerville', Georgia, serif;
  --ff-ui:       'DM Sans', system-ui, sans-serif;

  /* Bootstrap overrides */
  --bs-primary:           #1A7A4A;
  --bs-primary-rgb:       26, 122, 74;
  --bs-body-font-family:  'Libre Baskerville', Georgia, serif;
  --bs-body-color:        #0D1F35;
  --bs-body-bg:           #F4F8FC;
  --bs-link-color:        #1A7A4A;

  /* Shadows */
  --shadow-sm:   0 2px 8px  rgba(10,35,66,0.10);
  --shadow-md:   0 6px 24px rgba(10,35,66,0.16);
  --shadow-lg:   0 16px 48px rgba(10,35,66,0.24);

  /* Radii */
  --r-sm:  4px;
  --r-md:  10px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t:    0.22s;
}


/* ══════════════════════════════════════════════════
   §2  GLOBAL BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background-color: linear-gradient(135deg, #0B3C5D, #1ABC9C);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

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

a {
  color: var(--terra);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
a:hover { color: var(--terra-dark); }

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

*:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
  border-radius: var(--r-sm) !important;
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dropDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}


/* ══════════════════════════════════════════════════
   §3  KILL OJS WATERMARK — COMPLETELY
═══════════════════════════════════════════════════ */
.pkp_powered_by,
.pkp_brand_footer,
a[href*="pkp.sfu.ca"],
a[href*="pkp.sfu"],
img[src*="ojs_brand"],
img[src*="pkp_brand"],
.pkp_brand,
.ojs_brand,
p.pkp_powered_by,
footer a[href*="pkp"],
footer a[href*="sfu"],
footer img[src*="pkp"],
footer img[src*="ojs"],
.pkp_structure_footer img[alt*="OJS"],
.pkp_structure_footer img[alt*="PKP"],
a[title*="Open Journal Systems"],
a[title*="Public Knowledge Project"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}


/* ══════════════════════════════════════════════════
   §4  TOP USER NAV BAR (Register / Login)
═══════════════════════════════════════════════════ */
.pkp_navigation_user,
.pkp_site_nav_bar {
  background-color: linear-gradient(135deg, #0B3C5D, #1ABC9C);
  border-bottom: 1px solid rgba(42,184,176,0.20) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;   /* push content to right side */
  width: 100% !important;
}

/* The wrapper that contains the ul — push to the right */
#navigationUserWrapper,
.pkp_navigation_user_wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  width: 100% !important;
}

.pkp_navigation_user ul,
#navigationUser {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  list-style: none !important;
  margin: 0 0 0 auto !important;   /* auto left margin pushes to right */
  padding: 0 1.5rem 0 0 !important;
  gap: 0 !important;
}

.pkp_navigation_user ul li a {
  font-family: var(--ff-ui) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.6) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 8px 14px !important;
  display: block !important;
  text-decoration: none !important;
  transition: color var(--t) var(--ease),
              background-color var(--t) var(--ease) !important;
}

.pkp_navigation_user ul li a:hover {
  color: var(--gold) !important;
  background-color: rgba(255,255,255,0.08) !important;
}

/* Login button styled distinctly */
.pkp_navigation_user ul li:last-child a {
  background-color: var(--terra) !important;
  color: var(--white) !important;
  padding: 8px 20px !important;
}

.pkp_navigation_user ul li:last-child a:hover {
  background-color: var(--terra-dark) !important;
  color: var(--white) !important;
}


/* ══════════════════════════════════════════════════
   §5  MASTHEAD / HEADER
═══════════════════════════════════════════════════ */

/*
 * CRITICAL: overflow must be VISIBLE so the nav dropdown
 * (which lives inside this header in OJS HTML) can extend
 * below the header box without being clipped.
 * z-index must be HIGH so the nav bar and its dropdowns
 * sit above all page content sections.
 */
.pkp_structure_head,
header.pkp_structure_head,
#headerWrapper {
  background: linear-gradient(135deg, #0B3C5D 0%, #1D6F8C 50%, #1ABC9C 100%) !important;
  border-bottom: none !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;      /* ← MUST be visible — hidden clips dropdown */
  z-index: 1000 !important;          /* ← above page content sections */
  display: block !important;
  min-height: 88px !important;
}

/* Mesh radial glow — contained inside a clipping wrapper via inset pseudo */
.pkp_structure_head::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
   radial-gradient(ellipse at 80% 50%, rgba(21, 101, 192, 0.25) 0%, transparent 55%),
  radial-gradient(ellipse at 15% 80%, rgba(46, 204, 113, 0.18) 0%, transparent 45%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  /* clip the decorative glow to just the header area */
  overflow: hidden !important;
}

/* Diagonal stripe texture — teal tint, scoped to header area */
.pkp_structure_head::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 40% !important; height: 100% !important;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 8px,
    rgba(42,184,176,0.05) 8px,
    rgba(42,184,176,0.05) 16px
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

/* Header inner layout */
.pkp_structure_head,
header.pkp_structure_head,
#headerWrapper {
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1.5rem 2rem !important;
}

/* Logo */
.pkp_site_name img,
#headerLogo img,
.pkp_structure_head img[src*="pageHeader"] {
  max-height: 120px !important;
  width: auto !important;
  filter: drop-shadow(10px 12px 20px rgba(0,0,0,0.4)) !important;
  border-radius: var(--r-sm) !important;
}

/* Journal name text */

.pkp_site_name,
.pkp_site_name_wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1.5rem 2rem !important;
}
.pkp_site_name_value,
.pkp_site_name h1,
.pkp_site_name h1 a,
.pkp_site_name a,
.pkp_site_name span,
.site_name {
  font-family: var(--ff-display) !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 900 !important;
  color: var(--white) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}

.pkp_structure_page {
  max-width: 100% !important;
  overflow: visible !important;   /* never clip nav dropdown */
}

/* Head wrapper — must also allow overflow */
.pkp_head_wrapper,
#headerNavigationContainer {
  overflow: visible !important;
  position: relative !important;
  z-index: 1000 !important;
}


/* Gold–terra accent bar below title */

/* ── Pre-empt any OJS/Bootstrap collapse rules on nav lists ── */
.pkp_nav_list > li {
  position: relative !important;
  overflow: visible !important;
}

.pkp_nav_list > li > ul,
nav.pkp_navigation_primary li > ul {
  max-height: none !important;
  overflow: visible !important;
  display: block !important;   /* OJS sometimes hides with display:none on non-hover — JS controls this */
}

.pkp_navigation_primary {
  width: 100% !important;
  display: flex !important;
  overflow: visible !important;
}

.pkp_site_name h1::after,
.pkp_site_name_value::after {
  content: 'AFRICAN JOURNAL OF EDUCATION, SCIENCE AND TECHNOLOGY' !important;
  display: block !important;
  width: 72px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--gold), var(--terra)) !important;
  border-radius: var(--r-pill) !important;
  margin-top: 7px !important;
}

.pkp_site_name_subtitle,
.tagline {
  font-family: var(--ff-ui) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  display: block !important;
  margin-top: 4px !important;
}


/* ══════════════════════════════════════════════════
   §6  NAVIGATION BAR + DROPDOWNS
   ── Modelled on NJC pattern, AJEST blue/green palette
═══════════════════════════════════════════════════ */

/* ── Wrapper row: MUST allow dropdown overflow ── */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row {
  background-color: var(--navy-soft) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* ── Nav bar container ── */ ----- commeee
.pkp_navigation_primary_row,
.pkp_navigation_primary,
nav.pkp_navigation_primary,
.pkp_nav_list,
ul.pkp_nav_list {
  background-color: var(--navy-soft) !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  /* display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  position: relative !important;
  overflow: visible !important;           */
  z-index: 1000 !important;
  box-shadow: 0 3px 16px rgba(10,35,66,0.30) !important;
  border-bottom: 2px solid var(--navy) !important;
} 

/* ── Inner list ── */
.pkp_navigation_primary_row > .pkp_nav_list,
nav.pkp_navigation_primary > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

/* ── Each top-level <li> ── */
.pkp_nav_list > li,
nav.pkp_navigation_primary > ul > li,
.pkp_navigation_primary > ul > li,
.pkp_navigation_primary > li {
  position: relative !important;
  margin: 0 !important;
  list-style: none !important;
}

/* ── Top-level nav links ── */
.pkp_nav_list > li > a,
nav.pkp_navigation_primary > ul > li > a,
.pkp_navigation_primary > ul > li > a,
nav.pkp_navigation_primary li > a,
.pkp_navigation_primary a {
  font-family: var(--ff-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.93) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 10px 18px !important;
  display: block !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease,
              color 0.25s ease,
              border-bottom-color 0.25s ease !important;
  position: relative !important;
  border-bottom: 3px solid transparent !important;
  line-height: 1.2 !important;
}

/* ── HOVER / FOCUS — teal underline + darker blue bg, never white ── */
.pkp_nav_list > li > a:hover,
.pkp_nav_list > li > a:focus,
nav.pkp_navigation_primary > ul > li > a:hover,
nav.pkp_navigation_primary > ul > li > a:focus,
.pkp_navigation_primary > ul > li > a:hover,
.pkp_navigation_primary a:hover,
.pkp_navigation_primary a:focus {
  background-color: var(--terra) !important;   /* forest green highlight */
  color: var(--white) !important;
  border-bottom-color: var(--gold) !important; /* teal underline */
  text-decoration: none !important;
}

/* ── Active / current page ── */
.pkp_nav_list > li.current > a,
nav.pkp_navigation_primary > ul > li.current > a,
.pkp_nav_list > li.active > a {
  background-color: var(--terra-deeper) !important;
  color: var(--white) !important;
  border-bottom-color: var(--gold) !important;
}

/* ── Chevron on items that have a dropdown ── */
.pkp_nav_list > li:has(ul) > a::after {
  content: ' ▾' !important;
  font-size: 0.6rem !important;
  opacity: 0.75 !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

/* ══════════════════════════════════════════════════
   DROPDOWN MENU
   position:absolute takes it OUT of flow → overlays page
   z-index:99999 beats every section/card/hero
═══════════════════════════════════════════════════ */
.pkp_nav_list > li > ul,
nav.pkp_navigation_primary > ul > li > ul,
.pkp_navigation_primary > ul > li > ul,
nav.pkp_navigation_primary li ul,
.pkp_navigation_primary li ul,
.pkp_nav_list .pkp_dropdown {
  /* position: absolute !important; */
  /* top: 100% !important;
  left: 11% !important; */
  /* min-width: 210px !important;  */
  background-color: var(--navy-mid) !important;  
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 3px solid var(--gold) !important;  
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  box-shadow: 0 10px 36px rgba(10,35,66,0.45) !important;
  z-index: 99999 !important;
  /* list-style: none !important; */
  padding: 5px 0 !important;
  margin: 0 !important;
  /* overflow: visible !important; */
  animation: dropDown 0.2s ease both !important;
}

/* ── Dropdown <li> ── */
.pkp_nav_list > li > ul > li,
nav.pkp_navigation_primary li ul > li {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
}

/* ── Dropdown links ── */
.pkp_nav_list > li > ul > li > a,
nav.pkp_navigation_primary li ul > li > a,
.pkp_navigation_primary li ul li a,
.pkp_nav_list .pkp_dropdown li a {
  font-family: var(--ff-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.88) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 10px 18px !important;
  display: block !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  transition: background-color 0.2s ease,
              color 0.2s ease,
              padding-left 0.2s ease !important;
}

/* ── Dropdown link hover — green, never white ── */
.pkp_nav_list > li > ul > li > a:hover,
.pkp_nav_list > li > ul > li > a:focus,
nav.pkp_navigation_primary li ul > li > a:hover,
nav.pkp_navigation_primary li ul > li > a:focus,
.pkp_navigation_primary li ul li a:hover,
.pkp_nav_list .pkp_dropdown li a:hover {
  background-color: var(--terra) !important;   /* forest green */
  color: var(--white) !important;
  padding-left: 24px !important;               /* subtle slide-right */
  text-decoration: none !important;
}

/* Remove separator from last item */
.pkp_nav_list > li > ul > li:last-child > a,
nav.pkp_navigation_primary li ul > li:last-child > a {
  border-bottom: none !important;
}


/* ══════════════════════════════════════════════════
   §7  HOMEPAGE HERO
═══════════════════════════════════════════════════ */

/*
 * z-index: 1 keeps the hero BELOW the nav dropdown (z-index: 99999)
 * position: relative is needed so z-index takes effect
 */
#homepageAbout,
.pkp_page_index .about_journal,
.pkpJournalDescription {
  background:
    linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #0D5C4A 100%) !important;
  color: var(--white) !important;
  padding: 5rem 2.5rem !important;
  position: relative !important;
  z-index: 1 !important;             /* ← below nav dropdown */
  overflow: hidden !important;
  border-bottom: none !important;
  animation: fadeUp 0.6s var(--ease) both !important;
}

#homepageAbout::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 72% 38%, rgba(26,122,74,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 16% 78%, rgba(42,184,176,0.14) 0%, transparent 45%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#homepageAbout::after {
  content: 'A' !important;
  position: absolute !important;
  right: -30px !important; top: -50px !important;
  font-family: var(--ff-display) !important;
  font-size: 28rem !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.022) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}

#homepageAbout > * { position: relative !important; z-index: 1 !important; }

/* Live badge */
.hero-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(232,184,75,0.14) !important;
  border: 1px solid rgba(232,184,75,0.38) !important;
  color: var(--gold) !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 1.25rem !important;
}

.hero-live-badge::before {
  content: '●' !important;
  font-size: 0.45rem !important;
  animation: pulseDot 1.8s infinite !important;
}

#homepageAbout h2,
#homepageAbout .page_title {
  font-family: var(--ff-display) !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  color: var(--white) !important;
  line-height: 1.15 !important;
  margin-bottom: 1.2rem !important;
}

#homepageAbout p {
  font-family: var(--ff-body) !important;
  font-size: 1rem !important;
  color: rgba(255,255,255,0.82) !important;
  max-width: 640px !important;
  line-height: 1.85 !important;
}


/* ══════════════════════════════════════════════════
   §8  SECTION HEADINGS
═══════════════════════════════════════════════════ */
#homepageIssue h2,
.pkp_page_index h2,
.pkp_structure_content h2:not(.pkp_screen_reader) {
  font-family: var(--ff-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.85rem !important;
  border-bottom: 2px solid var(--border-light) !important;
  position: relative !important;
}

#homepageIssue h2::after,
.pkp_page_index h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 56px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--terra), var(--gold)) !important;
  border-radius: var(--r-pill) !important;
}

#homepageIssue,
.pkp_page_index .current_issue {
  background-color: var(--ivory) !important;
  padding: 3.5rem 2.5rem !important;
}


/* ══════════════════════════════════════════════════
   §9  ARTICLE CARDS
═══════════════════════════════════════════════════ */
.cmp_article_summary,
.obj_article_summary,
.pkp_article_summary {
  background-color: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-left: 4px solid var(--terra) !important;
  border-radius: var(--r-lg) !important;
  padding: 1.5rem 1.75rem !important;
  margin-bottom: 1rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              border-left-color var(--t) var(--ease) !important;
  animation: fadeUp 0.45s var(--ease) both !important;
}

.cmp_article_summary:hover,
.obj_article_summary:hover,
.pkp_article_summary:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-left-color: var(--gold) !important;
}

.cmp_article_summary .title a,
.obj_article_summary .title a,
.pkp_article_summary .title a,
.cmp_article_summary h3 a,
.obj_article_summary h3 a {
  font-family: var(--ff-display) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: color var(--t) var(--ease) !important;
}

.cmp_article_summary .title a:hover,
.obj_article_summary .title a:hover {
  color: var(--terra) !important;
}

.cmp_article_summary .authors,
.obj_article_summary .authors {
  font-family: var(--ff-ui) !important;
  font-size: 0.8rem !important;
  color: var(--muted) !important;
  margin-top: 0.35rem !important;
  font-style: italic !important;
}

.cmp_article_summary .pages,
.obj_article_summary .pages {
  font-family: var(--ff-ui) !important;
  font-size: 0.75rem !important;
  color: var(--muted) !important;
}

/* Section pill label */
.section_title,
.pkp_structure_content .issue_toc h2 {
  font-family: var(--ff-ui) !important;
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  background: linear-gradient(90deg, var(--navy), var(--navy-soft)) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: var(--r-pill) !important;
  display: inline-block !important;
  margin: 1.4rem 0 0.65rem 0 !important;
}


/* ══════════════════════════════════════════════════
   §10  GALLEY BUTTONS (PDF / HTML)
═══════════════════════════════════════════════════ */
.galley_link,
.obj_galley_link,
a.galley_link,
.pkp_galley_link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.69rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 5px 14px !important;
  border-radius: var(--r-pill) !important;
  text-decoration: none !important;
  margin-right: 5px !important;
  margin-top: 8px !important;
  transition: all var(--t) var(--ease) !important;
}

a.galley_link[href*="pdf"],
.galley_link.pdf {
  background-color: var(--terra) !important;
  color: var(--white) !important;
  box-shadow: 0 2px 8px rgba(201,75,31,0.28) !important;
}

a.galley_link[href*="pdf"]:hover,
.galley_link.pdf:hover {
  background-color: var(--terra-dark) !important;
  box-shadow: 0 4px 14px rgba(201,75,31,0.45) !important;
  transform: translateY(-1px) !important;
}

a.galley_link[href*="html"],
.galley_link.html {
  background-color: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--border-mid) !important;
}

a.galley_link[href*="html"]:hover {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border-color: var(--navy) !important;
}


/* ══════════════════════════════════════════════════
   §11  ARTICLE DETAIL PAGE
═══════════════════════════════════════════════════ */
.pkp_page_article .article_details,
.obj_article_details {
  background-color: var(--white) !important;
  border-radius: var(--r-xl) !important;
  padding: 2.5rem !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border-light) !important;
}

.pkp_page_article h1.page_title,
.obj_article_details h1,
.article_details h1 {
  font-family: var(--ff-display) !important;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
  font-weight: 900 !important;
  color: var(--navy) !important;
  line-height: 1.25 !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 2px solid var(--border-light) !important;
  position: relative !important;
}

.pkp_page_article h1.page_title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important; left: 0 !important;
  width: 64px !important; height: 2px !important;
  background: linear-gradient(90deg, var(--terra), var(--gold)) !important;
  border-radius: var(--r-pill) !important;
}

/* Abstract */
.article_abstract,
.abstract,
#abstract,
.pkp_abstract {
  background: linear-gradient(135deg, #FAF5F0, var(--ivory)) !important;
  border: 1px solid var(--border-light) !important;
  border-left: 5px solid var(--terra) !important;
  border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
  padding: 1.75rem 2rem !important;
  margin: 1.5rem 0 !important;
}

.article_abstract h3,
.abstract h3 {
  font-family: var(--ff-ui) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--terra) !important;
  margin-bottom: 0.75rem !important;
}

.article_abstract p,
.abstract p {
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.85 !important;
  color: var(--ink) !important;
}

/* Keywords */
.article_keywords .value span,
.keywords .value span {
  display: inline-block !important;
  background-color: var(--gold-pale) !important;
  color: var(--gold-deep) !important;
  border: 1px solid rgba(232,184,75,0.4) !important;
  padding: 3px 11px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  margin: 2px !important;
}

.doi a { color: var(--terra) !important; font-family: var(--ff-ui) !important; font-size: 0.8rem !important; }


/* ══════════════════════════════════════════════════
   §12  BUTTONS
═══════════════════════════════════════════════════ */
.pkpButton,
.pkp_button,
.btn-primary,
button.pkpButton,
a.pkpButton,
input[type="submit"],
input[type="button"],
.cmp_button {
  font-family: var(--ff-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--terra) !important;
  color: var(--white) !important;
  border: 2px solid var(--terra) !important;
  border-radius: var(--r-md) !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all var(--t) var(--ease) !important;
  box-shadow: 0 3px 12px rgba(201,75,31,0.28) !important;
}

.pkpButton:hover,
.btn-primary:hover,
a.pkpButton:hover,
input[type="submit"]:hover {
  background-color: var(--terra-dark) !important;
  border-color: var(--terra-dark) !important;
  color: var(--white) !important;
  box-shadow: 0 6px 20px rgba(201,75,31,0.45) !important;
  transform: translateY(-2px) !important;
}

/* Ghost */
.pkp_button_offset,
a.pkp_button_offset,
.btn-outline-primary {
  background-color: transparent !important;
  color: var(--navy) !important;
  border: 2px solid var(--navy) !important;
  box-shadow: none !important;
}

.pkp_button_offset:hover,
a.pkp_button_offset:hover {
  background-color: var(--navy) !important;
  color: var(--white) !important;
}

/* Gold Make a Submission button */
.pkp_block_make_submission .pkpButton,
a.pkpButton.makeSubmission {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)) !important;
  color: var(--navy) !important;
  border-color: var(--gold-deep) !important;
  box-shadow: 0 4px 16px rgba(232,184,75,0.42) !important;
}

.pkp_block_make_submission .pkpButton:hover,
a.pkpButton.makeSubmission:hover {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold)) !important;
  color: var(--navy) !important;
  box-shadow: 0 6px 22px rgba(232,184,75,0.60) !important;
}


/* ══════════════════════════════════════════════════
   §13  SIDEBAR BLOCKS
═══════════════════════════════════════════════════ */
.pkp_block {
  background-color: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-lg) !important;
  padding: 1.4rem 1.5rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: visible !important;          
  transition: box-shadow var(--t) var(--ease) !important;
}

.pkp_block:hover { box-shadow: var(--shadow-md) !important; }

.pkp_block .title,
.pkp_block > h2 {
  font-family: var(--ff-ui) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: var(--terra) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.65rem !important;
  border-bottom: 2px solid var(--border-light) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pkp_block .title::before,
.pkp_block > h2::before {
  content: '' !important;
  width: 16px !important; height: 3px !important;
  background: linear-gradient(90deg, var(--terra), var(--gold)) !important;
  border-radius: var(--r-pill) !important;
  flex-shrink: 0 !important;
}

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

.pkp_block ul li {
  padding: 7px 0 !important;
  border-bottom: 1px dashed var(--border-light) !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.84rem !important;
}

.pkp_block ul li:last-child { border-bottom: none !important; }

.pkp_block ul li a {
  color: var(--navy) !important;
  font-weight: 500 !important;
  transition: color var(--t) var(--ease) !important;
}

.pkp_block ul li a:hover { color: var(--terra) !important; text-decoration: none !important; }

/* Make Submission block */
.pkp_block_make_submission {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%) !important;
  border-color: transparent !important;
  text-align: center !important;
  padding: 2rem 1.5rem !important;
}

.pkp_block_make_submission .title,
.pkp_block_make_submission > h2 {
  color: rgba(255,255,255,0.65) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}


/* ══════════════════════════════════════════════════
   §14  ANNOUNCEMENTS
═══════════════════════════════════════════════════ */
#homepageAnnouncements,
.pkp_block_announcements {
  background-color: var(--white) !important;
  padding: 3rem 2.5rem !important;
  border-top: 1px solid var(--border-light) !important;
}

.obj_announcement_summary,
.announcement_summary {
  display: flex !important;
  gap: 1.2rem !important;
  padding: 1.2rem 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  animation: fadeUp 0.4s var(--ease) both !important;
}

.announcement_date,
.obj_announcement_summary .date {
  flex-shrink: 0 !important;
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px !important;
  text-align: center !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  min-width: 58px !important;
}

.obj_announcement_summary .title a,
.announcement_title a {
  font-family: var(--ff-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}

.obj_announcement_summary .title a:hover,
.announcement_title a:hover { color: var(--terra) !important; }


/* ══════════════════════════════════════════════════
   §15  FORMS & INPUTS
═══════════════════════════════════════════════════ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
  font-family: var(--ff-ui) !important;
  font-size: 0.9rem !important;
  color: var(--ink) !important;
  background-color: var(--white) !important;
  border: 1.5px solid var(--border-mid) !important;
  border-radius: var(--r-md) !important;
  padding: 11px 15px !important;
  width: 100% !important;
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease) !important;
  outline: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--terra) !important;
  box-shadow: 0 0 0 3px rgba(201,75,31,0.12) !important;
}

label,
.form-label,
.pkpFormField__label {
  font-family: var(--ff-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 5px !important;
  display: block !important;
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--terra) !important; width: auto !important; }

/* Login / Register panels */
.pkp_page_login .login,
.pkp_page_register .register {
  max-width: 500px !important;
  margin: 3rem auto !important;
  background-color: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-top: 4px solid var(--terra) !important;
  border-radius: var(--r-xl) !important;
  padding: 2.75rem 2.5rem !important;
  box-shadow: var(--shadow-lg) !important;
  animation: fadeUp 0.5s var(--ease) both !important;
}

.pkp_page_login h1.page_title,
.pkp_page_register h1.page_title {
  font-family: var(--ff-display) !important;
  font-size: 1.9rem !important;
  font-weight: 900 !important;
  color: var(--navy) !important;
  text-align: center !important;
  margin-bottom: 1.75rem !important;
}


/* ══════════════════════════════════════════════════
   §16  PAGE TITLES & TYPOGRAPHY
═══════════════════════════════════════════════════ */
h1.page_title,
.pkp_page > h1 {
  font-family: var(--ff-display) !important;
  font-size: clamp(1.0rem, 3.0vw, 2.0rem) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.2 !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1.1rem !important;
  border-bottom: 2px solid var(--border-light) !important;
  position: relative !important;
}

h1.page_title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important; left: 0 !important;
  width: 56px !important; height: 2px !important;
  background: linear-gradient(90deg, var(--terra), var(--gold)) !important;
  border-radius: var(--r-pill) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display) !important;
  color: var(--navy) !important;
  line-height: 1.3 !important;
}

h2 { font-size: 1.5rem !important; font-weight: 700 !important; }
h3 { font-size: 1.2rem !important; font-weight: 600 !important; }
h4 { font-family: var(--ff-ui) !important; font-size: 1rem !important; font-weight: 700 !important; }

p { font-family: var(--ff-body) !important; line-height: 1.85 !important; color: var(--ink) !important; }

/* Breadcrumbs */
.pkp_breadcrumbs,
nav[aria-label="breadcrumb"] {
  font-family: var(--ff-ui) !important;
  font-size: 0.78rem !important;
  color: var(--muted) !important;
  padding: 0.65rem 0 !important;
  margin-bottom: 1.5rem !important;
}

.pkp_breadcrumbs a { color: var(--terra) !important; }
.pkp_breadcrumbs a:hover { color: var(--terra-dark) !important; }


/* ══════════════════════════════════════════════════
   §17  TABLES
═══════════════════════════════════════════════════ */
.table,
table {
  width: 100% !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.88rem !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: 1.5rem !important;
}

.table thead,
table thead { background: linear-gradient(90deg, var(--navy), var(--navy-soft)) !important; }

.table thead th,
table thead th {
  padding: 13px 17px !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  border: none !important;
}

.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) { background-color: var(--smoke) !important; }

.table tbody tr:hover,
table tbody tr:hover { background-color: var(--terra-light) !important; }

.table tbody td,
table tbody td {
  padding: 11px 17px !important;
  border-color: var(--border-light) !important;
  vertical-align: middle !important;
  color: var(--ink) !important;
}


/* ══════════════════════════════════════════════════
   §18  EDITORIAL TEAM
═══════════════════════════════════════════════════ */
.pkp_page_editorial_team .member {
  background-color: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-xl) !important;
  padding: 1.75rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) var(--ease) !important;
  text-align: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.pkp_page_editorial_team .member::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--terra), var(--gold)) !important;
}

.pkp_page_editorial_team .member:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.pkp_page_editorial_team .member img {
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--gold) !important;
  margin: 0 auto 1rem auto !important;
  box-shadow: 0 4px 14px rgba(232,184,75,0.32) !important;
}

.pkp_page_editorial_team .member .name {
  font-family: var(--ff-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.pkp_page_editorial_team .member .role {
  font-family: var(--ff-ui) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--terra) !important;
}


/* ══════════════════════════════════════════════════
   §19  ARCHIVES
═══════════════════════════════════════════════════ */
.pkp_page_issue_archive .obj_issue_summary {
  background-color: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-lg) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) var(--ease) !important;
}

.pkp_page_issue_archive .obj_issue_summary:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}

.pkp_page_issue_archive .obj_issue_summary .title a {
  font-family: var(--ff-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.pkp_page_issue_archive .obj_issue_summary .title a:hover {
  color: var(--terra) !important;
}

.issue_cover img,
.obj_issue_summary img {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease) !important;
}

.issue_cover img:hover,
.obj_issue_summary img:hover {
  transform: scale(1.03) !important;
  box-shadow: var(--shadow-lg) !important;
}


/* ══════════════════════════════════════════════════
   §20  NOTIFICATIONS
═══════════════════════════════════════════════════ */
.pkp_notification,
.alert {
  font-family: var(--ff-ui) !important;
  font-size: 0.87rem !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  border-left: 5px solid !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

.alert-success, .notifySuccess {
  background-color: #EDFAF3 !important;
  border-left-color: #27AE60 !important;
  color: #1A6B3C !important;
}

.alert-danger, .notifyError {
  background-color: #FEF0F0 !important;
  border-left-color: #E74C3C !important;
  color: #7B1F1F !important;
}

.alert-warning, .notifyWarning {
  background-color: var(--gold-pale) !important;
  border-left-color: var(--gold-deep) !important;
  color: #7A5200 !important;
}

.alert-info, .notifyInfo {
  background-color: #EBF4FB !important;
  border-left-color: #2980B9 !important;
  color: #1A4E72 !important;
}


/* ══════════════════════════════════════════════════
   §21  PAGINATION
═══════════════════════════════════════════════════ */
.pagination {
  gap: 4px !important;
  justify-content: center !important;
  margin: 2rem 0 !important;
}

.page-link,
.pkp_pagination a {
  font-family: var(--ff-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--border-mid) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 14px !important;
  transition: all var(--t) var(--ease) !important;
  text-decoration: none !important;
}

.page-link:hover {
  background-color: var(--terra) !important;
  color: var(--white) !important;
  border-color: var(--terra) !important;
}

.page-item.active .page-link {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border-color: var(--navy) !important;
}


/* ══════════════════════════════════════════════════
   §22  FOOTER
═══════════════════════════════════════════════════ */
.pkp_structure_footer,
footer,
#footerWrapper {
  background-color: var(--navy) !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 3.5rem 2rem 2rem !important;
  margin-top: 3.5rem !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: none !important;
}

/* Animated shimmer top border */
.pkp_structure_footer::before,
footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--terra) 0%, var(--gold) 50%, var(--terra) 100%) !important;
  background-size: 200% auto !important;
  animation: shimmer 4s linear infinite !important;
}

/* Ghost AJEST text */
.pkp_structure_footer::after,
footer::after {
  content: 'AJEST' !important;
  position: absolute !important;
  bottom: -18px !important; right: -16px !important;
  font-family: var(--ff-display) !important;
  font-size: 13rem !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.025) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.pkp_structure_footer a,
footer a {
  color: rgba(255,255,255,0.55) !important;
  transition: color var(--t) var(--ease) !important;
  text-decoration: none !important;
}

.pkp_structure_footer a:hover,
footer a:hover { color: var(--gold) !important; }

.pkp_structure_footer h3,
.pkp_structure_footer h4,
footer h3, footer h4 {
  font-family: var(--ff-ui) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--gold) !important;
  margin-bottom: 0.9rem !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(232,184,75,0.25) !important;
}

.pkp_structure_footer ul,
footer ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.pkp_structure_footer ul li,
footer ul li {
  padding: 5px 0 !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.83rem !important;
  color: rgba(255,255,255,0.55) !important;
  border-bottom: 1px dashed rgba(255,255,255,0.07) !important;
}

.pkp_structure_footer ul li:last-child,
footer ul li:last-child { border-bottom: none !important; }

/* ISSN display */
.pkp_block_issn,
.issn_display {
  font-family: var(--ff-ui) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: 0.08em !important;
}

/* Footer bottom copyright */
.pkp_structure_footer_wrapper,
.footer_bottom,
.pkp_footer_bottom {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  padding-top: 1.5rem !important;
  margin-top: 1.5rem !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.35) !important;
}


/* ══════════════════════════════════════════════════
   §23  BOOTSTRAP COMPONENT OVERRIDES
═══════════════════════════════════════════════════ */
/* Cards */
.card {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: all var(--t) var(--ease) !important;
}

.card:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-2px) !important; }

.card-header {
  background: linear-gradient(90deg, var(--navy), var(--navy-soft)) !important;
  color: var(--white) !important;
  font-family: var(--ff-ui) !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}

.card-footer {
  background-color: var(--smoke) !important;
  border-top: 1px solid var(--border-light) !important;
}

/* Nav tabs */
.nav-tabs { border-bottom: 2px solid var(--border-light) !important; }

.nav-tabs .nav-link {
  font-family: var(--ff-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  border: none !important;
  padding: 10px 20px !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  transition: all var(--t) var(--ease) !important;
}

.nav-tabs .nav-link:hover { color: var(--navy) !important; }

.nav-tabs .nav-link.active {
  color: var(--terra) !important;
  border-bottom-color: var(--terra) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* Modals */
.modal-header {
  background: linear-gradient(135deg, var(--navy), var(--navy-soft)) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}

.modal-title { font-family: var(--ff-display) !important; font-size: 1.3rem !important; font-weight: 700 !important; color: var(--white) !important; }
.modal-content { border: none !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-lg) !important; }

/* Bootstrap badges */
.badge { font-family: var(--ff-ui) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
.bg-primary { background-color: var(--navy) !important; }
.bg-danger   { background-color: var(--terra) !important; }
.bg-warning  { background-color: var(--gold) !important; color: var(--navy) !important; }
.text-primary { color: var(--navy) !important; }


/* ══════════════════════════════════════════════════
   §24  SUBMISSION WIZARD
═══════════════════════════════════════════════════ */
.pkp_page_submission .steps {
  display: flex !important;
  background-color: var(--smoke) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin-bottom: 2.5rem !important;
  border: 1px solid var(--border-light) !important;
}

.steps .step {
  flex: 1 !important;
  text-align: center !important;
  padding: 13px !important;
  font-family: var(--ff-ui) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--muted) !important;
  border-right: 1px solid var(--border-light) !important;
  transition: all var(--t) var(--ease) !important;
}

.steps .step.current {
  background: linear-gradient(135deg, var(--terra), var(--terra-dark)) !important;
  color: var(--white) !important;
}

.steps .step.completed {
  background-color: var(--navy) !important;
  color: rgba(255,255,255,0.85) !important;
}


/* ══════════════════════════════════════════════════
   §25  CUSTOM SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--smoke); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--terra), var(--navy));
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--terra-dark); }

/* ══════════════════════════════════════════════════
   LOGO + JOURNAL NAME + NAV FIX (FULL SYSTEM)
═══════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════
   RESPONSIVE CONTROL
═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   ≤1280px
───────────────────────────────────────────────── */
@media (max-width: 1280px) {

  .pkp_site_name img {
    max-height: 52px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }

  .pkp_nav_list > li > a,
  nav.pkp_navigation_primary li > a {
    padding: 14px 14px !important;
    font-size: 0.80rem !important;
    letter-spacing: 0.06em !important;
  }

  .pkp_nav_list > li > a:hover {
    background: rgba(26,188,156,0.08) !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤1024px
───────────────────────────────────────────────── */
@media (max-width: 1024px) {

  .pkp_site_name img {
    max-height: 50px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .pkp_structure_main,
  #main-content {
    margin: 16px !important;
    padding: 0 12px !important;
  }

  .pkp_site_name,
  #masthead {
    padding: 1.2rem 1.5rem !important;
  }

  .pkp_nav_list > li > a {
    padding: 13px 13px !important;
    font-size: 0.77rem !important;
  }

  .pkp_nav_list > li > ul {
    min-width: 190px !important;
    background: rgba(11,60,93,0.95) !important;
    border-left: 3px solid #1ABC9C !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤992px
───────────────────────────────────────────────── */
@media (max-width: 992px) {

  .pkp_site_name img {
    max-height: 48px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .pkp_site_name,
  #masthead {
    padding: 1rem 1.25rem !important;
  }

  .pkp_nav_list {
    flex-wrap: wrap !important;
  }

  .pkp_nav_list > li > a {
    padding: 12px !important;
    font-size: 0.75rem !important;
  }

  .pkp_nav_list > li > ul {
    z-index: 99999 !important;
    border-left: 3px solid #2ECC71 !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤768px  (KEY MOBILE FIX)
───────────────────────────────────────────────── */
@media (max-width: 768px) {

  .pkp_head_wrapper,
  #masthead {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .pkp_site_name {
    max-width: 100% !important;
  }

  .pkp_site_name img {
    max-height: 45px !important;
  }

  /* Allow FULL journal name wrapping */
  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  nav.pkp_navigation_primary,
  .pkp_nav_list {
    flex-direction: column !important;
    width: 100% !important;
  }

  .pkp_nav_list > li > a {
    padding: 13px 18px !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid rgba(26,188,156,0.15) !important;
  }

  /* 🔥 FIX DROPDOWN ISSUE (no more blocking screen) */
  .pkp_nav_list > li > ul {
    position: relative !important;
    display: none !important;
    margin-left: 1.2rem !important;
    border-left: 3px solid #1ABC9C !important;
    background: rgba(10,25,47,0.4) !important;
  }

  .pkp_nav_list > li:hover > ul,
  .pkp_nav_list > li:focus-within > ul {
    display: block !important;
  }

  .pkp_nav_list > li > ul > li > a {
    padding: 11px 16px !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤600px
───────────────────────────────────────────────── */
@media (max-width: 600px) {

  .pkp_site_name img {
    max-height: 42px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.2rem !important;
  }

  .pkp_nav_list > li > a {
    font-size: 0.83rem !important;
    padding: 12px 16px !important;
  }

  h1.page_title {
    font-size: 1.4rem !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤480px
───────────────────────────────────────────────── */
@media (max-width: 480px) {

  body {
    font-size: 15px !important;
  }

  .pkp_site_name img {
    max-height: 40px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }

  .pkp_nav_list > li > a {
    padding: 11px 14px !important;
    font-size: 0.81rem !important;
  }

  .pkp_nav_list > li > ul > li > a {
    font-size: 0.79rem !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤360px
───────────────────────────────────────────────── */
@media (max-width: 360px) {

  body {
    font-size: 14px !important;
  }

  .pkp_site_name img {
    max-height: 38px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1rem !important;
  }

  .pkp_nav_list > li > a {
    padding: 10px 12px !important;
    font-size: 0.77rem !important;
  }

  .pkp_nav_list > li > ul > li > a {
    font-size: 0.75rem !important;
  }
}
/* ══════════════════════════════════════════════════
   §26  RESPONSIVE — COMPLETE BREAKPOINTS
   Covers: 1280 · 1024 · 992 · 768 · 600 · 480 · 360px
═══════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────
   ≤1280px  Large laptop / small desktop
───────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────
   ≤1280px
───────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────
   ≤1280px
───────────────────────────────────────────────── */
@media (max-width: 1280px) {

  .pkp_nav_list > li > a,
  nav.pkp_navigation_primary li > a {
    padding: 14px 14px !important;
    font-size: 0.80rem !important;
    letter-spacing: 0.06em !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }

  .pkp_nav_list > li > a:hover {
    background: rgba(26,188,156,0.08) !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤1024px
───────────────────────────────────────────────── */
@media (max-width: 1024px) {

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .pkp_structure_main,
  #main-content {
    margin: 16px !important;
    padding: 0 12px !important;
  }

  .pkp_site_name,
  #masthead {
    padding: 1.2rem 1.5rem !important;
  }

  .pkp_nav_list > li > a,
  nav.pkp_navigation_primary li > a {
    padding: 13px 13px !important;
    font-size: 0.77rem !important;
  }

  .pkp_nav_list > li > ul,
  nav.pkp_navigation_primary li ul {
    min-width: 190px !important;
    background: rgba(11,60,93,0.95) !important;
    border-left: 3px solid #1ABC9C !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤992px
───────────────────────────────────────────────── */
@media (max-width: 992px) {

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .pkp_site_name,
  #masthead {
    padding: 1rem 1.25rem !important;
  }

  .pkp_nav_list {
    flex-wrap: wrap !important;
  }

  .pkp_nav_list > li > a {
    padding: 12px !important;
    font-size: 0.75rem !important;
  }

  .pkp_nav_list > li > ul {
    z-index: 99999 !important;
    border-left: 3px solid #2ECC71 !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤768px  (MAIN MOBILE LOGIC)
───────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Journal Name */
  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Header */
  .pkp_site_name,
  #masthead {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  /* Nav layout */
  nav.pkp_navigation_primary,
  .pkp_nav_list {
    flex-direction: column !important;
    width: 100% !important;
  }

  .pkp_nav_list > li > a {
    padding: 13px 18px !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid rgba(26,188,156,0.15) !important;
  }

  /* 🔥 FIXED DROPDOWN */
  .pkp_nav_list > li > ul {
    position: static !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-left: 1.2rem !important;
    border-left: 3px solid #1ABC9C !important;
    background: rgba(10,25,47,0.4) !important;
  }

  /* Open on tap */
  .pkp_nav_list > li:focus-within > ul {
    max-height: 500px;
  }

  .pkp_nav_list > li > ul > li > a {
    padding: 11px 16px !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤600px
───────────────────────────────────────────────── */
@media (max-width: 600px) {

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .pkp_nav_list > li > a {
    font-size: 0.83rem !important;
    padding: 12px 16px !important;
  }

  h1.page_title {
    font-size: 1.4rem !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤480px
───────────────────────────────────────────────── */
@media (max-width: 480px) {

  body {
    font-size: 15px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  .pkp_nav_list > li > a {
    padding: 11px 14px !important;
    font-size: 0.81rem !important;
  }

  .pkp_nav_list > li > ul > li > a {
    font-size: 0.79rem !important;
  }
}


/* ─────────────────────────────────────────────────
   ≤360px
───────────────────────────────────────────────── */
@media (max-width: 360px) {

  body {
    font-size: 14px !important;
  }

  .pkp_site_name h1 a,
  .pkp_site_name a {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .pkp_nav_list > li > a {
    padding: 10px 12px !important;
    font-size: 0.77rem !important;
  }

  .pkp_nav_list > li > ul > li > a {
    font-size: 0.75rem !important;
  }
}


/*
 * ═══════════════════════════════════════════════════
 *  END — AJEST PREMIUM STYLESHEET v5.0
 *  African Journal of Education, Science and Technology
 *  v5 fixes:
 *    1. header overflow changed from hidden → visible
 *       so the About dropdown is never clipped
 *    2. header z-index raised to 1000
 *    3. .pkp_head_wrapper & .pkp_structure_page also
 *       set to overflow:visible — full ancestor chain
 *    4. Hero section z-index:1 keeps it below nav (99999)
 *    5. Full 7-breakpoint responsive coverage added
 *       1280 · 1024 · 992 · 768 · 600 · 480 · 360px
 * ═══════════════════════════════════════════════════
 */