/* =====================================================
   JHCR Custom OJS Styling
   Designed for FEI/KJMR-like academic journal appearance
   ===================================================== */

:root {
  --jhcr-navy: #0b3558;
  --jhcr-blue: #0f5f9c;
  --jhcr-light-blue: #eaf4fb;
  --jhcr-sky: #22a7d8;
  --jhcr-gold: #d6a832;
  --jhcr-text: #1f2933;
  --jhcr-muted: #5f6c7b;
  --jhcr-border: #d9e2ec;
  --jhcr-white: #ffffff;
  --jhcr-bg: #f6f9fc;
}

/* Overall page content */
.jhcr-page {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--jhcr-text);
  line-height: 1.75;
  background: var(--jhcr-white);
  padding: 5px 0 20px 0;
}

/* Hero heading box */
.jhcr-hero-box {
  background: linear-gradient(135deg, var(--jhcr-navy), var(--jhcr-blue));
  color: var(--jhcr-white);
  padding: 32px 36px;
  border-radius: 10px;
  margin-bottom: 28px;
  box-shadow: 0 8px 20px rgba(11, 53, 88, 0.18);
}

.jhcr-hero-box h1 {
  color: var(--jhcr-white);
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 15px 0;
  letter-spacing: 0.3px;
}

.jhcr-hero-box p {
  color: var(--jhcr-white);
  font-size: 16px;
  margin: 0;
  text-align: justify;
}

/* Sections */
.jhcr-section {
  background: var(--jhcr-white);
  border: 1px solid var(--jhcr-border);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 22px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
}

.jhcr-section h2 {
  color: var(--jhcr-navy);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--jhcr-light-blue);
  position: relative;
}

.jhcr-section h2:after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: var(--jhcr-sky);
  position: absolute;
  bottom: -2px;
  left: 0;
}

.jhcr-section h3 {
  color: var(--jhcr-blue);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.jhcr-section p {
  font-size: 15.5px;
  color: var(--jhcr-text);
  text-align: justify;
  margin-bottom: 12px;
}

/* Lists */
.jhcr-list {
  margin: 10px 0 10px 22px;
  padding: 0;
}

.jhcr-list li {
  margin-bottom: 9px;
  font-size: 15.5px;
  color: var(--jhcr-text);
}

/* Cards */
.jhcr-card,
.jhcr-profile-card,
.jhcr-contact-card {
  background: var(--jhcr-bg);
  border-left: 5px solid var(--jhcr-blue);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 14px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.jhcr-profile-card.featured {
  background: linear-gradient(135deg, #f7fbff, #eaf4fb);
  border-left: 6px solid var(--jhcr-gold);
}

.jhcr-profile-card h3 {
  color: var(--jhcr-navy);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.jhcr-profile-card p,
.jhcr-contact-card p,
.jhcr-card p {
  margin: 5px 0;
  text-align: left;
}

/* Grid layout */
.jhcr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.jhcr-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.jhcr-scope-card {
  background: #ffffff;
  border: 1px solid var(--jhcr-border);
  border-top: 4px solid var(--jhcr-blue);
  border-radius: 9px;
  padding: 18px 20px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.04);
}

.jhcr-scope-card h3 {
  color: var(--jhcr-navy);
  font-size: 18px;
  margin-bottom: 10px;
}

.jhcr-scope-card p {
  font-size: 15px;
  color: var(--jhcr-text);
  margin: 0;
}

/* Decision cards */
.jhcr-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 15px;
}

.jhcr-decision-card {
  background: var(--jhcr-light-blue);
  border: 1px solid var(--jhcr-border);
  border-radius: 8px;
  padding: 18px;
}

.jhcr-decision-card h3 {
  color: var(--jhcr-navy);
  margin-bottom: 8px;
}

.jhcr-decision-card p {
  margin: 0;
  text-align: left;
}

/* Notes */
.jhcr-note {
  background: #fff8e5;
  border-left: 5px solid var(--jhcr-gold);
  border-radius: 7px;
  padding: 16px 18px;
  margin: 15px 0;
  color: #4f3b00;
  font-size: 15px;
}

/* Tables */
.jhcr-table-wrapper {
  overflow-x: auto;
  margin-top: 15px;
}

.jhcr-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 15px;
}

.jhcr-table th {
  background: var(--jhcr-navy);
  color: #ffffff;
  padding: 14px;
  text-align: left;
  font-weight: 700;
}

.jhcr-table td {
  border: 1px solid var(--jhcr-border);
  padding: 13px 14px;
  vertical-align: top;
}

.jhcr-table tr:nth-child(even) {
  background: #f7fbff;
}

/* Links */
.jhcr-page a {
  color: var(--jhcr-blue);
  font-weight: 700;
  text-decoration: none;
}

.jhcr-page a:hover {
  color: var(--jhcr-navy);
  text-decoration: underline;
}

/* OJS menu/header polish */
.pkp_navigation_primary_wrapper {
  background: var(--jhcr-navy);
}

.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 700;
}

.pkp_navigation_primary > li > a:hover {
  background: var(--jhcr-blue);
  color: #ffffff !important;
}

.pkp_structure_head {
  border-bottom: 4px solid var(--jhcr-gold);
}

.pkp_site_name .is_img img {
  max-height: 130px;
  width: auto;
}

/* Footer polish */
.pkp_structure_footer_wrapper {
  background: var(--jhcr-navy);
  color: #ffffff;
}

.pkp_structure_footer_wrapper a {
  color: #ffffff;
}

/* Buttons */
.cmp_button,
.cmp_form .buttons button,
.page_lost_password .buttons button {
  background: var(--jhcr-blue);
  color: #ffffff;
  border-radius: 5px;
  border: none;
  font-weight: 700;
}

.cmp_button:hover,
.cmp_form .buttons button:hover {
  background: var(--jhcr-navy);
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .jhcr-hero-box {
    padding: 24px 22px;
  }

  .jhcr-hero-box h1 {
    font-size: 27px;
  }

  .jhcr-section {
    padding: 20px 18px;
  }

  .jhcr-grid,
  .jhcr-scope-grid,
  .jhcr-decision-grid {
    grid-template-columns: 1fr;
  }

  .jhcr-section h2 {
    font-size: 21px;
  }

  .pkp_site_name .is_img img {
    max-height: 90px;
  }
}
/* ================================
   JHCR HTML HOMEPAGE DESIGN
   FEI/KJMR Style
   ================================ */

.jhcr-home {
  font-family: Arial, Helvetica, sans-serif;
  color: #1f2933;
  background: #ffffff;
}

/* Hero Section */
.jhcr-home-hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(135deg, #071f36 0%, #0b3558 45%, #0f5f9c 100%);
  color: #ffffff;
  padding: 48px 42px;
  border-radius: 14px;
  margin-bottom: 26px;
  overflow: hidden;
  position: relative;
}

.jhcr-home-hero:before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

.jhcr-home-hero-left {
  position: relative;
  z-index: 2;
}

.jhcr-home-badge {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}

.jhcr-home-hero h1 {
  color: #ffffff;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 18px 0;
}

.jhcr-home-hero p {
  color: #eef7ff;
  font-size: 17px;
  line-height: 1.8;
  text-align: justify;
  max-width: 760px;
  margin-bottom: 24px;
}

.jhcr-home-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.jhcr-btn-primary,
.jhcr-btn-secondary {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

.jhcr-btn-primary {
  background: #d6a832;
  color: #0b3558 !important;
}

.jhcr-btn-secondary {
  background: transparent;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.55);
}

.jhcr-btn-primary:hover,
.jhcr-btn-secondary:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* AI Circle */
.jhcr-home-hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.jhcr-ai-circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.28), transparent 25%),
    linear-gradient(135deg, rgba(34,167,216,0.35), rgba(255,255,255,0.08));
  border: 2px solid rgba(255,255,255,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.20);
  text-align: center;
  padding: 22px;
}

.jhcr-logo-frame {
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.22);
  margin-bottom: 14px;
  overflow: hidden;
}

.jhcr-circle-logo {
  max-width: 155px;
  max-height: 155px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.jhcr-ai-circle small {
  font-size: 14px;
  color: #eaf4fb;
  text-align: center;
  line-height: 1.5;
  font-weight: 600;
}

/* Info Strip */
.jhcr-home-info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #d9e2ec;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 28px;
}

.jhcr-home-info-strip div {
  background: #f6f9fc;
  padding: 20px;
  text-align: center;
}

.jhcr-home-info-strip strong {
  display: block;
  color: #0b3558;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.jhcr-home-info-strip span {
  color: #1f2933;
  font-size: 15px;
}

/* Section */
.jhcr-home-section {
  margin-bottom: 30px;
}

.jhcr-home-section-title {
  border-left: 6px solid #0b3558;
  padding: 10px 0 10px 20px;
  margin-bottom: 22px;
}

.jhcr-home-section-title h2 {
  color: #0b3558;
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 8px 0;
}

.jhcr-home-section-title p {
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

/* Cards */
.jhcr-home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.jhcr-home-card {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-top: 5px solid #0f5f9c;
  border-radius: 10px;
  padding: 22px;
  min-height: 190px;
  box-shadow: 0 5px 16px rgba(0,0,0,0.05);
}

.jhcr-home-card h3 {
  color: #0b3558;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 12px 0;
}

.jhcr-home-card p {
  color: #1f2933;
  font-size: 15px;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

/* Highlight */
.jhcr-home-highlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: #0b3558;
  color: #ffffff;
  padding: 34px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.jhcr-home-highlight h2 {
  color: #ffffff;
  font-size: 28px;
  margin: 0 0 14px 0;
}

.jhcr-home-highlight p {
  color: #eef7ff;
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
  margin: 0;
}

.jhcr-home-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: center;
}

.jhcr-home-points span {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
}

/* Bottom Cards */
.jhcr-home-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.jhcr-home-bottom-card {
  background: #f6f9fc;
  border-left: 6px solid #d6a832;
  padding: 24px;
  border-radius: 10px;
}

.jhcr-home-bottom-card h3 {
  color: #0b3558;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px 0;
}

.jhcr-home-bottom-card p {
  font-size: 15.5px;
  line-height: 1.75;
  text-align: justify;
  margin-bottom: 12px;
}

.jhcr-home-bottom-card a {
  color: #0f5f9c;
  font-weight: 800;
  text-decoration: none;
}

.jhcr-home-bottom-card a:hover {
  text-decoration: underline;
}

/* Mobile */
@media screen and (max-width: 900px) {
  .jhcr-home-hero,
  .jhcr-home-highlight,
  .jhcr-home-bottom {
    grid-template-columns: 1fr;
  }

  .jhcr-home-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .jhcr-home-info-strip {
    grid-template-columns: 1fr 1fr;
  }

  .jhcr-ai-circle {
    width: 220px;
    height: 220px;
  }
}

@media screen and (max-width: 600px) {
  .jhcr-home-hero {
    padding: 30px 24px;
  }

  .jhcr-home-hero h1 {
    font-size: 30px;
  }

  .jhcr-home-card-grid,
  .jhcr-home-info-strip,
  .jhcr-home-points {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   JHCR HOMEPAGE UPGRADE OVERRIDES
   Paste this at the END of existing CSS.
   Do not delete previous CSS.
   ===================================================== */

/* Overall homepage refinement */
.jhcr-home {
  max-width: 100%;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--jhcr-text);
  background: #ffffff;
}

/* Hero section upgraded */
.jhcr-home-hero {
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 38px !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.14), transparent 23%),
    radial-gradient(circle at 70% 65%, rgba(34,167,216,0.22), transparent 30%),
    linear-gradient(135deg, #071f36 0%, #0b3558 48%, #0f5f9c 100%) !important;
  padding: 56px 46px !important;
  border-radius: 16px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 10px 32px rgba(11, 53, 88, 0.18) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Decorative background circles */
.jhcr-home-hero:before {
  content: "" !important;
  position: absolute !important;
  right: -130px !important;
  top: -130px !important;
  width: 390px !important;
  height: 390px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 50% !important;
}

.jhcr-home-hero:after {
  content: "" !important;
  position: absolute !important;
  right: 95px !important;
  bottom: -75px !important;
  width: 260px !important;
  height: 260px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 50% !important;
}

/* Hero text block */
.jhcr-home-hero-left {
  position: relative !important;
  z-index: 2 !important;
}

.jhcr-home-badge {
  background: rgba(255,255,255,0.13) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  padding: 9px 17px !important;
  border-radius: 30px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 22px !important;
  color: #ffffff !important;
  display: inline-block !important;
}

.jhcr-home-hero h1 {
  color: #ffffff !important;
  font-size: 46px !important;
  line-height: 1.14 !important;
  font-weight: 900 !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: 0.2px !important;
}

.jhcr-home-hero p {
  color: #eef7ff !important;
  font-size: 16.6px !important;
  line-height: 1.82 !important;
  text-align: justify !important;
  max-width: 780px !important;
  margin-bottom: 16px !important;
}

/* Buttons */
.jhcr-home-actions {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
}

.jhcr-btn-primary,
.jhcr-btn-secondary {
  display: inline-block !important;
  padding: 13px 22px !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out !important;
}

.jhcr-btn-primary {
  background: var(--jhcr-gold) !important;
  color: var(--jhcr-navy) !important;
  box-shadow: 0 8px 18px rgba(214,168,50,0.25) !important;
}

.jhcr-btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
}

.jhcr-btn-primary:hover,
.jhcr-btn-secondary:hover {
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  opacity: 0.95 !important;
}

/* Right logo area */
.jhcr-home-hero-right {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Main circle */
.jhcr-ai-circle {
  width: 315px !important;
  height: 315px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.34), transparent 25%),
    linear-gradient(135deg, rgba(34,167,216,0.38), rgba(255,255,255,0.08)) !important;
  border: 2px solid rgba(255,255,255,0.38) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 20px 46px rgba(0,0,0,0.24) !important;
  text-align: center !important;
  padding: 22px !important;
  overflow: hidden !important;
}

/* Rectangular white frame inside circle for your wide JHCR logo */
.jhcr-logo-frame {
  width: 230px !important;
  height: 138px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.24) !important;
  margin-bottom: 15px !important;
  overflow: hidden !important;
}

/* Logo image fit */
.jhcr-circle-logo {
  max-width: 205px !important;
  max-height: 108px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.jhcr-ai-circle small {
  color: #eaf4fb !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

/* Info strip upgrade */
.jhcr-home-info-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: var(--jhcr-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 32px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
}

.jhcr-home-info-strip div {
  background: #f6f9fc !important;
  padding: 23px 18px !important;
  text-align: center !important;
  min-height: 92px !important;
}

.jhcr-home-info-strip strong {
  display: block !important;
  color: var(--jhcr-navy) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.4px !important;
}

.jhcr-home-info-strip span {
  display: block !important;
  color: var(--jhcr-text) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Section title upgrade */
.jhcr-home-section {
  margin-bottom: 34px !important;
}

.jhcr-home-section-title {
  border-left: 6px solid var(--jhcr-navy) !important;
  padding: 10px 0 10px 20px !important;
  margin-bottom: 24px !important;
}

.jhcr-home-section-title h2 {
  color: var(--jhcr-navy) !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  margin: 0 0 9px 0 !important;
}

.jhcr-home-section-title p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  text-align: justify !important;
  margin: 0 !important;
}

/* About box for elaborated HTML */
.jhcr-home-about-box {
  background: #f6f9fc !important;
  border-left: 6px solid var(--jhcr-blue) !important;
  padding: 25px 28px !important;
  border-radius: 11px !important;
  box-shadow: 0 5px 16px rgba(0,0,0,0.045) !important;
}

.jhcr-home-about-box p {
  font-size: 15.8px !important;
  line-height: 1.78 !important;
  text-align: justify !important;
  margin-bottom: 12px !important;
}

/* Cards */
.jhcr-home-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 19px !important;
}

.jhcr-home-card {
  background: #ffffff !important;
  border: 1px solid var(--jhcr-border) !important;
  border-top: 5px solid var(--jhcr-blue) !important;
  border-radius: 11px !important;
  padding: 23px !important;
  min-height: 215px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.055) !important;
  transition: all 0.25s ease-in-out !important;
}

.jhcr-home-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 26px rgba(11,53,88,0.11) !important;
}

.jhcr-home-card h3 {
  color: var(--jhcr-navy) !important;
  font-size: 18.5px !important;
  font-weight: 900 !important;
  margin: 0 0 12px 0 !important;
}

.jhcr-home-card p {
  color: var(--jhcr-text) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  text-align: justify !important;
  margin: 0 !important;
}

/* Highlight section */
.jhcr-home-highlight {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 26px !important;
  background:
    radial-gradient(circle at 95% 10%, rgba(255,255,255,0.12), transparent 22%),
    linear-gradient(135deg, var(--jhcr-navy), #082a48) !important;
  color: #ffffff !important;
  padding: 38px !important;
  border-radius: 15px !important;
  margin-bottom: 34px !important;
  box-shadow: 0 8px 24px rgba(11,53,88,0.16) !important;
}

.jhcr-home-highlight h2 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  margin: 0 0 14px 0 !important;
}

.jhcr-home-highlight p {
  color: #eef7ff !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
  text-align: justify !important;
  margin-bottom: 12px !important;
}

.jhcr-home-points {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 13px !important;
  align-content: center !important;
}

.jhcr-home-points span {
  background: rgba(255,255,255,0.13) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  padding: 15px !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: #ffffff !important;
}

/* Publication information block */
.jhcr-publication-info {
  background: #f6f9fc !important;
  border: 1px solid var(--jhcr-border) !important;
  border-radius: 13px !important;
  padding: 30px !important;
  margin-bottom: 34px !important;
  box-shadow: 0 5px 16px rgba(0,0,0,0.04) !important;
}

.jhcr-publication-info h2 {
  color: var(--jhcr-navy) !important;
  font-size: 29px !important;
  font-weight: 900 !important;
  margin: 0 0 22px 0 !important;
}

.jhcr-publication-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.jhcr-publication-grid div {
  background: #ffffff !important;
  border-left: 5px solid var(--jhcr-blue) !important;
  padding: 18px !important;
  border-radius: 9px !important;
}

.jhcr-publication-grid strong {
  display: block !important;
  color: var(--jhcr-navy) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
}

.jhcr-publication-grid span {
  display: block !important;
  font-size: 15px !important;
  color: var(--jhcr-text) !important;
  line-height: 1.5 !important;
}

/* Editorial focus list */
.jhcr-focus-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.jhcr-focus-list div {
  background: #f6f9fc !important;
  border-left: 5px solid var(--jhcr-gold) !important;
  padding: 16px 18px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  color: var(--jhcr-text) !important;
}

/* Bottom cards */
.jhcr-home-bottom {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

.jhcr-home-bottom-card {
  background: #f6f9fc !important;
  border-left: 6px solid var(--jhcr-gold) !important;
  padding: 26px !important;
  border-radius: 11px !important;
  box-shadow: 0 5px 16px rgba(0,0,0,0.04) !important;
}

.jhcr-home-bottom-card h3 {
  color: var(--jhcr-navy) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  margin: 0 0 12px 0 !important;
}

.jhcr-home-bottom-card p {
  font-size: 15.5px !important;
  line-height: 1.76 !important;
  text-align: justify !important;
  color: var(--jhcr-text) !important;
}

.jhcr-home-bottom-card a {
  color: var(--jhcr-blue) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.jhcr-home-bottom-card a:hover {
  text-decoration: underline !important;
}

/* Header logo refinement */
.pkp_site_name .is_img img {
  max-height: 150px !important;
  width: auto !important;
}

/* Navigation refinement */
.pkp_navigation_primary_wrapper {
  background: var(--jhcr-navy) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: var(--jhcr-blue) !important;
  color: #ffffff !important;
}

/* Responsive improvements */
@media screen and (max-width: 1000px) {
  .jhcr-home-hero {
    grid-template-columns: 1fr !important;
    padding: 42px 32px !important;
  }

  .jhcr-home-hero-right {
    margin-top: 10px !important;
  }

  .jhcr-home-card-grid,
  .jhcr-publication-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media screen and (max-width: 768px) {
  .jhcr-home-hero {
    padding: 34px 24px !important;
  }

  .jhcr-home-hero h1 {
    font-size: 32px !important;
  }

  .jhcr-home-hero p {
    font-size: 15.5px !important;
  }

  .jhcr-home-info-strip,
  .jhcr-home-card-grid,
  .jhcr-home-highlight,
  .jhcr-home-bottom,
  .jhcr-home-points,
  .jhcr-publication-grid {
    grid-template-columns: 1fr !important;
  }

  .jhcr-ai-circle {
    width: 245px !important;
    height: 245px !important;
  }

  .jhcr-logo-frame {
    width: 185px !important;
    height: 112px !important;
  }

  .jhcr-circle-logo {
    max-width: 165px !important;
    max-height: 88px !important;
  }

  .pkp_site_name .is_img img {
    max-height: 95px !important;
  }
}
/* =====================================================
   JHCR FINAL HOMEPAGE FIX OVERRIDES
   Paste at the END of existing CSS. Do not delete old CSS.
   ===================================================== */

/* Fix text spacing and prevent awkward word gaps */
.jhcr-home p,
.jhcr-home div,
.jhcr-home span,
.jhcr-home li {
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

/* Hero paragraph refinement */
.jhcr-home-hero p {
  text-align: left !important;
  word-spacing: normal !important;
  max-width: 760px !important;
}

/* Why Publish section clean layout */
.jhcr-home-highlight {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 32px !important;
  align-items: center !important;
  background: linear-gradient(135deg, #071f36, #0b3558) !important;
  color: #ffffff !important;
  padding: 40px !important;
  border-radius: 14px !important;
  margin: 34px 0 !important;
}

.jhcr-home-highlight h2 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  margin: 0 0 16px 0 !important;
}

.jhcr-home-highlight p {
  color: #eef7ff !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  text-align: left !important;
  margin-bottom: 14px !important;
}

/* Important: this fixes your right side points */
.jhcr-home-points {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-content: center !important;
}

.jhcr-home-points span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  background: rgba(255,255,255,0.13) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
  padding: 14px !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

/* Publication Information proper card grid */
.jhcr-publication-info {
  background: #f6f9fc !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 14px !important;
  padding: 32px !important;
  margin: 34px 0 !important;
  box-shadow: 0 5px 16px rgba(0,0,0,0.045) !important;
}

.jhcr-publication-info h2 {
  color: #0b3558 !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  margin: 0 0 24px 0 !important;
  border-left: 6px solid #0b3558 !important;
  padding-left: 16px !important;
}

.jhcr-publication-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.jhcr-publication-grid div {
  background: #ffffff !important;
  border-left: 5px solid #0f5f9c !important;
  border-radius: 9px !important;
  padding: 18px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.04) !important;
}

.jhcr-publication-grid strong {
  display: block !important;
  color: #0b3558 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.jhcr-publication-grid span {
  display: block !important;
  color: #1f2933 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Editorial Focus section */
.jhcr-focus-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.jhcr-focus-list div {
  background: #f6f9fc !important;
  border-left: 5px solid #d6a832 !important;
  padding: 16px 18px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  color: #1f2933 !important;
  line-height: 1.55 !important;
}

/* Bottom author/contact cards */
.jhcr-home-bottom {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 34px !important;
}

.jhcr-home-bottom-card {
  background: #f6f9fc !important;
  border-left: 6px solid #d6a832 !important;
  border-radius: 12px !important;
  padding: 28px 30px !important;
  box-shadow: 0 5px 16px rgba(0,0,0,0.045) !important;
}

.jhcr-home-bottom-card h3 {
  color: #0b3558 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  margin: 0 0 14px 0 !important;
}

.jhcr-home-bottom-card p {
  color: #1f2933 !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  text-align: left !important;
}

.jhcr-home-bottom-card a {
  color: #0f5f9c !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.jhcr-home-bottom-card a:hover {
  text-decoration: underline !important;
}

/* Mobile Fix */
@media screen and (max-width: 900px) {
  .jhcr-home-highlight,
  .jhcr-home-bottom {
    grid-template-columns: 1fr !important;
  }

  .jhcr-publication-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media screen and (max-width: 600px) {
  .jhcr-home-points,
  .jhcr-publication-grid {
    grid-template-columns: 1fr !important;
  }

  .jhcr-home-highlight,
  .jhcr-publication-info,
  .jhcr-home-bottom-card {
    padding: 24px !important;
  }
}
/* =====================================================
   JHCR CUSTOM HTML HEADER
   Logo + Journal Name Beside Logo
   ===================================================== */

/* Hide default OJS title/logo */
.pkp_site_name {
  display: none !important;
}

/* Header background */
.pkp_structure_head {
  background: #061d33 !important;
  border-bottom: 4px solid #d6a832 !important;
}

.pkp_head_wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #061d33 !important;
}

/* Custom header full width */
.jhcr-custom-header {
  width: 100%;
  background:
    radial-gradient(circle at 92% 15%, rgba(34,167,216,0.18), transparent 24%),
    linear-gradient(135deg, #061d33 0%, #0b3558 55%, #0f5f9c 100%);
  padding: 28px 0;
}

/* Header content alignment */
.jhcr-custom-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Logo box */
.jhcr-custom-logo-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  flex: 0 0 auto;
}

.jhcr-custom-logo {
  max-width: 150px;
  max-height: 105px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Journal title */
.jhcr-custom-title-box {
  border-left: 4px solid #22a7d8;
  padding-left: 24px;
}

.jhcr-custom-title-box h1 {
  color: #ffffff !important;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 8px 0;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.jhcr-custom-title-box p {
  color: #eaf4fb;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.jhcr-custom-title-box span {
  color: #d6a832;
  font-size: 15px;
  font-weight: 700;
}

/* Navigation */
.pkp_navigation_primary_wrapper {
  background: #0b3558 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}

.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: #0f5f9c !important;
  color: #ffffff !important;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .jhcr-custom-header {
    padding: 20px 0;
  }

  .jhcr-custom-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .jhcr-custom-logo {
    max-width: 125px;
    max-height: 85px;
  }

  .jhcr-custom-title-box {
    padding-left: 16px;
  }

  .jhcr-custom-title-box h1 {
    font-size: 27px;
  }

  .jhcr-custom-title-box p {
    font-size: 15px;
  }

  .jhcr-custom-title-box span {
    font-size: 13px;
  }
}
/* =====================================================
   JHCR HEADER LOGO SIZE + REMOVE WHITE BACKGROUND FIX
   Paste at the END of existing CSS
   ===================================================== */

/* Header full area */
.pkp_structure_head {
  background: #061d33 !important;
  border-bottom: 4px solid #d6a832 !important;
}

/* Custom header background */
.jhcr-custom-header {
  width: 100% !important;
  background:
    radial-gradient(circle at 92% 15%, rgba(34,167,216,0.18), transparent 24%),
    linear-gradient(135deg, #061d33 0%, #0b3558 55%, #0f5f9c 100%) !important;
  padding: 28px 0 !important;
}

/* Header content alignment */
.jhcr-custom-header-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 34px !important;
}

/* Remove white box around logo */
.jhcr-custom-logo-box {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

/* Make logo larger */
.jhcr-custom-logo {
  max-width: 260px !important;
  max-height: 135px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Divider line after logo */
.jhcr-custom-title-box {
  border-left: 4px solid #22a7d8 !important;
  padding-left: 30px !important;
}

/* Journal name */
.jhcr-custom-title-box h1 {
  color: #ffffff !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Subtitle */
.jhcr-custom-title-box p {
  color: #eaf4fb !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
}

/* Publisher line */
.jhcr-custom-title-box span {
  color: #d6a832 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Hide default OJS logo/title if still visible */
.pkp_site_name {
  display: none !important;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .jhcr-custom-header-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 0 22px !important;
  }

  .jhcr-custom-logo {
    max-width: 210px !important;
    max-height: 110px !important;
  }

  .jhcr-custom-title-box {
    padding-left: 18px !important;
  }

  .jhcr-custom-title-box h1 {
    font-size: 28px !important;
  }

  .jhcr-custom-title-box p {
    font-size: 15px !important;
  }

  .jhcr-custom-title-box span {
    font-size: 13px !important;
  }
}
/* =====================================================
   JHCR FINAL HEADER + HOME CIRCLE + MENU SPACING FIX
   Paste at the END of existing CSS. Do not delete old CSS.
   ===================================================== */


/* =========================
   HEADER AREA FIX
   ========================= */

.pkp_structure_head {
  background: #061d33 !important;
  border-bottom: 4px solid #d6a832 !important;
}

.jhcr-custom-header {
  width: 100% !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(34,167,216,0.18), transparent 25%),
    linear-gradient(135deg, #061d33 0%, #0b3558 58%, #0f5f9c 100%) !important;
  padding: 30px 0 !important;
}

.jhcr-custom-header-inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 38px !important;
}

/* Remove white background box around header logo */
.jhcr-custom-logo-box {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

/* Increase header logo size */
.jhcr-custom-logo {
  max-width: 360px !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Header title section */
.jhcr-custom-title-box {
  border-left: 4px solid #22a7d8 !important;
  padding-left: 32px !important;
}

.jhcr-custom-title-box h1 {
  color: #ffffff !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

.jhcr-custom-title-box p {
  color: #eaf4fb !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
}

.jhcr-custom-title-box span {
  color: #d6a832 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

/* Hide default OJS site logo/title if visible */
.pkp_site_name {
  display: none !important;
}


/* =========================
   MENU SPACING FIX
   ========================= */

/* Full navigation background */
.pkp_navigation_primary_wrapper {
  background: #0b3558 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  padding: 0 !important;
}

/* Add proper page-width spacing for menu */
.pkp_navigation_primary_row {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding-left: 45px !important;
  padding-right: 45px !important;
}

/* Primary navigation list */
.pkp_navigation_primary {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Menu items */
.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  padding: 16px 18px !important;
}

.pkp_navigation_primary > li:first-child > a {
  margin-left: 0 !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: #0f5f9c !important;
  color: #ffffff !important;
}


/* =========================
   HOMEPAGE HERO RIGHT CIRCLE FIX
   ========================= */

.jhcr-home-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.12), transparent 24%),
    radial-gradient(circle at 70% 60%, rgba(34,167,216,0.20), transparent 32%),
    linear-gradient(135deg, #061d33 0%, #0b3558 50%, #0f5f9c 100%) !important;
}

/* Make the right circle more balanced and matching */
.jhcr-ai-circle {
  width: 335px !important;
  height: 335px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.26), transparent 26%),
    linear-gradient(135deg, rgba(34,167,216,0.28), rgba(11,53,88,0.35)) !important;
  border: 2px solid rgba(180,225,245,0.42) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 20px 46px rgba(0,0,0,0.24) !important;
  text-align: center !important;
  padding: 24px !important;
  overflow: hidden !important;
}

/* Rectangular logo frame inside circle */
.jhcr-logo-frame {
  width: 245px !important;
  height: 145px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.96) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

/* Fit the logo properly inside the frame */
.jhcr-circle-logo {
  max-width: 220px !important;
  max-height: 112px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.jhcr-ai-circle small {
  color: #eaf4fb !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: center !important;
}


/* =========================
   MOBILE RESPONSIVE FIX
   ========================= */

@media screen and (max-width: 900px) {
  .jhcr-custom-header-inner {
    padding: 0 25px !important;
    gap: 22px !important;
  }

  .jhcr-custom-logo {
    max-width: 260px !important;
    max-height: 120px !important;
  }

  .jhcr-custom-title-box h1 {
    font-size: 32px !important;
  }

  .jhcr-custom-title-box p {
    font-size: 16px !important;
  }

  .pkp_navigation_primary_row {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}

@media screen and (max-width: 768px) {
  .jhcr-custom-header-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 22px !important;
  }

  .jhcr-custom-logo {
    max-width: 230px !important;
    max-height: 105px !important;
  }

  .jhcr-custom-title-box {
    padding-left: 18px !important;
  }

  .jhcr-custom-title-box h1 {
    font-size: 28px !important;
  }

  .jhcr-custom-title-box p {
    font-size: 15px !important;
  }

  .jhcr-custom-title-box span {
    font-size: 13px !important;
  }

  .jhcr-ai-circle {
    width: 255px !important;
    height: 255px !important;
  }

  .jhcr-logo-frame {
    width: 190px !important;
    height: 115px !important;
  }

  .jhcr-circle-logo {
    max-width: 170px !important;
    max-height: 88px !important;
  }

  .pkp_navigation_primary_row {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
/* =====================================================
   JHCR FINAL HEADER + HOME CIRCLE + MENU SPACING FIX
   Paste at the END of existing CSS. Do not delete old CSS.
   ===================================================== */


/* =========================
   HEADER AREA FIX
   ========================= */

.pkp_structure_head {
  background: #061d33 !important;
  border-bottom: 4px solid #d6a832 !important;
}

.jhcr-custom-header {
  width: 100% !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(34,167,216,0.18), transparent 25%),
    linear-gradient(135deg, #061d33 0%, #0b3558 58%, #0f5f9c 100%) !important;
  padding: 30px 0 !important;
}

.jhcr-custom-header-inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 38px !important;
}

/* Remove white background box around header logo */
.jhcr-custom-logo-box {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

/* Increase header logo size */
.jhcr-custom-logo {
  max-width: 360px !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Header title section */
.jhcr-custom-title-box {
  border-left: 4px solid #22a7d8 !important;
  padding-left: 32px !important;
}

.jhcr-custom-title-box h1 {
  color: #ffffff !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

.jhcr-custom-title-box p {
  color: #eaf4fb !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
}

.jhcr-custom-title-box span {
  color: #d6a832 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

/* Hide default OJS site logo/title if visible */
.pkp_site_name {
  display: none !important;
}


/* =========================
   MENU SPACING FIX
   ========================= */

/* Full navigation background */
.pkp_navigation_primary_wrapper {
  background: #0b3558 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  padding: 0 !important;
}

/* Add proper page-width spacing for menu */
.pkp_navigation_primary_row {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding-left: 45px !important;
  padding-right: 45px !important;
}

/* Primary navigation list */
.pkp_navigation_primary {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Menu items */
.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  padding: 16px 18px !important;
}

.pkp_navigation_primary > li:first-child > a {
  margin-left: 0 !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: #0f5f9c !important;
  color: #ffffff !important;
}


/* =========================
   HOMEPAGE HERO RIGHT CIRCLE FIX
   ========================= */

.jhcr-home-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.12), transparent 24%),
    radial-gradient(circle at 70% 60%, rgba(34,167,216,0.20), transparent 32%),
    linear-gradient(135deg, #061d33 0%, #0b3558 50%, #0f5f9c 100%) !important;
}

/* Make the right circle more balanced and matching */
.jhcr-ai-circle {
  width: 335px !important;
  height: 335px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.26), transparent 26%),
    linear-gradient(135deg, rgba(34,167,216,0.28), rgba(11,53,88,0.35)) !important;
  border: 2px solid rgba(180,225,245,0.42) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 20px 46px rgba(0,0,0,0.24) !important;
  text-align: center !important;
  padding: 24px !important;
  overflow: hidden !important;
}

/* Rectangular logo frame inside circle */
.jhcr-logo-frame {
  width: 245px !important;
  height: 145px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.96) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

/* Fit the logo properly inside the frame */
.jhcr-circle-logo {
  max-width: 220px !important;
  max-height: 112px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.jhcr-ai-circle small {
  color: #eaf4fb !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: center !important;
}


/* =========================
   MOBILE RESPONSIVE FIX
   ========================= */

@media screen and (max-width: 900px) {
  .jhcr-custom-header-inner {
    padding: 0 25px !important;
    gap: 22px !important;
  }

  .jhcr-custom-logo {
    max-width: 260px !important;
    max-height: 120px !important;
  }

  .jhcr-custom-title-box h1 {
    font-size: 32px !important;
  }

  .jhcr-custom-title-box p {
    font-size: 16px !important;
  }

  .pkp_navigation_primary_row {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}

@media screen and (max-width: 768px) {
  .jhcr-custom-header-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 22px !important;
  }

  .jhcr-custom-logo {
    max-width: 230px !important;
    max-height: 105px !important;
  }

  .jhcr-custom-title-box {
    padding-left: 18px !important;
  }

  .jhcr-custom-title-box h1 {
    font-size: 28px !important;
  }

  .jhcr-custom-title-box p {
    font-size: 15px !important;
  }

  .jhcr-custom-title-box span {
    font-size: 13px !important;
  }

  .jhcr-ai-circle {
    width: 255px !important;
    height: 255px !important;
  }

  .jhcr-logo-frame {
    width: 190px !important;
    height: 115px !important;
  }

  .jhcr-circle-logo {
    max-width: 170px !important;
    max-height: 88px !important;
  }

  .pkp_navigation_primary_row {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}