/************************************************
 * ADVANCED RESEARCH & DEVELOPMENT JOURNAL (ARD)
 * COMPLETE FINAL OJS STYLESHEET
 ************************************************/

/****************************************
 * 1. GOOGLE FONTS
 ****************************************/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Source+Serif+4:wght@400;500;600&family=Inter:wght@500;600&display=swap');

/****************************************
 * 2. COLOR PALETTE
 ****************************************/
:root {
  --ard-navy: #0E2A47;
  --ard-gold: #C9A24D;
  --ard-cream: #F6EED6;
  --ard-border: #E4D8B8;
}

/****************************************
 * 3. BODY & CONTENT
 ****************************************/
body, p, div, span, li, td, th {
  font-family: "Source Serif 4", serif !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #222 !important;
}

p {
  text-align: justify !important;
  margin-bottom: 16px !important;
}

a {
  color: var(--ard-navy) !important;
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline !important;
}

.pkp_page_index .homepage_image img {
    display:block;
    width: 95%;
    height: auto;
    margin: 20px;
}
/****************************************
 * 4. HEADINGS
 ****************************************/
h1, h2, h3, h4, h5 {
  font-family: "Merriweather", serif !important;
  font-weight: 700 !important;
  color: var(--ard-navy) !important;
}

/****************************************
 * 5. HEADER — LOGO & TITLE
 ****************************************/
#headerNavigationContainer .pkp_head_wrapper {
  background: #ffffff;
  border-top: 4px solid var(--ard-gold);
  border-bottom: 4px solid var(--ard-gold);
}

#headerNavigationContainer .pkp_site_name_wrapper {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
}

#headerNavigationContainer .pkp_site_name a.is_img img {
  max-height: 110px !important;
}

#headerNavigationContainer h1.pkp_screen_reader {
  display: none !important;
}

#headerNavigationContainer .pkp_site_name_wrapper::after {
  content: "Advanced Research & Development Journal";
  font-family: "Merriweather", serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: linear-gradient(90deg, var(--ard-navy), var(--ard-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 10px;
}

/****************************************
 * 6. PREMIUM NAVIGATION MENU
 ****************************************/
.pkp_navigation_primary_wrapper {
  background: linear-gradient(90deg, #0E2A47, #123A63);
  border-top: 3px solid var(--ard-gold);
  border-bottom: 3px solid var(--ard-gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
}

.pkp_navigation_primary {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  margin: 0 !important;
  padding: 0px 0 !important;
  list-style: none;
}

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

.pkp_navigation_primary > li {
  position: relative;
}

.pkp_navigation_primary > li > a {
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
}

/* Hover & Active */
.pkp_navigation_primary > li:hover > a,
.pkp_navigation_primary > li.current > a {
  background: linear-gradient(135deg, var(--ard-gold), #e6c36a);
  color: #0E2A47 !important;
  box-shadow: 0 4px 10px rgba(201,162,77,0.6);
  transform: translateY(-2px);
}

/* Caret */
.pkp_navigation_primary > li.has_submenu > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.pkp_navigation_primary > li.has_submenu:hover > a::after {
  transform: rotate(-135deg);
}
.pkp_navigation_primary_row {
    background: #fff;
    padding-left: 0.000rem;
    padding-right: 0.000rem;
}

/****************************************
 * 7. DROPDOWN MENU
 ****************************************/
.pkp_navigation_primary li ul {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 230px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--ard-border);
  padding: 8px 0 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  z-index: 999;
  animation: fadeSlide 0.25s ease;
}

.pkp_navigation_primary li ul li a {
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  color: var(--ard-navy) !important;
  transition: all 0.25s ease;
}

.pkp_navigation_primary li ul li a:hover {
  background: linear-gradient(90deg, rgba(201,162,77,0.25), rgba(201,162,77,0.1));
  padding-left: 26px !important;
}

/* Dropdown animation */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/****************************************
 * 8. SEARCH BUTTON
 ****************************************/
.pkp_navigation_search_wrapper {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.pkp_navigation_search_wrapper .pkp_search_desktop {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--ard-cream) !important;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.pkp_navigation_search_wrapper .pkp_search_desktop:hover {
  background: rgba(255,255,255,0.15);
}

/****************************************
 * 9. CONTENT SPACING
 ****************************************/
.pkp_structure_main,
.pkp_page_content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pkp_structure_breadcrumb {
  margin: 6px 0 !important;
}

/****************************************
 * 10. SIDEBAR
 ****************************************/
.pkp_structure_sidebar,
.pkp_structure_sidebar * {
  text-align: left !important;
}

.pkp_structure_sidebar ul {
  padding-left: 18px !important;
}

/****************************************
 * 11. FOOTER
 ****************************************/
.pkp_footer,
.pkp_footer_content,
.pkp_footer_content * {
  text-align: center !important;
  float: none !important;
}

.pkp_brand_footer,
.pkp_footer_content .pkp_footer_brand,
.pkp_footer_content .pkp_brand_text,
.pkp_footer_content .pkp_workflow_link {
  display: none !important;
}

/****************************************
 * 12. MOBILE OPTIMIZATION
 ****************************************/
@media (max-width: 768px) {
  #headerNavigationContainer .pkp_site_name_wrapper::after {
    font-size: 22px;
  }

  .pkp_navigation_primary {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pkp_navigation_search_wrapper {
    position: static;
    transform: none;
    margin-left: 10px;
  }
}








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


.cmp_breadcrumbs {
    display: none;
}