/* =========================================================
   UOBRJ Combined Stylesheet (v2)
   Includes:
   1) Editorial Team block styles (.et-*)
   2) About page styles (v2) (.uobrj2-*)
   ========================================================= */

/* =========================
   1) Editorial Team block
   ========================= */
.et-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  margin-bottom:16px;
}

.et-head{ margin-bottom:14px; }
.et-title{
  font-size:18px;
  font-weight:850;
  letter-spacing:.2px;
  color:#0f172a;
}
.et-subtitle{
  font-size:12.5px;
  color:#64748b;
  margin-top:4px;
}

/* Sections */
.et-section{
  padding:12px 0;
  border-top:1px solid rgba(15,23,42,.06);
}
.et-section:first-of-type{ border-top:0; padding-top:6px; }

.et-section-title{
  font-size:12.5px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:#334155;
  margin-bottom:10px;
}

/* Layout */
.et-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

/* In main column allow 2 columns on wider screens */
@media (min-width: 900px){
  .pkp_structure_main .et-grid{ grid-template-columns:1fr 1fr; }
}

/* Person cards */
.et-person{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(248,250,252,.92), rgba(255,255,255,1));
  border:1px solid rgba(15,23,42,.07);
  box-shadow:0 6px 18px rgba(2,6,23,.05);
}

.et-person--featured{
  background:linear-gradient(180deg, rgba(239,246,255,.9), rgba(255,255,255,1));
  border-color:rgba(37,99,235,.18);
}

.et-person--mini{ padding:10px; }

/* Round framed avatars */
.et-avatar{
  width:74px;
  height:74px;
  border-radius:999px;
  padding:3px;
  background:conic-gradient(from 180deg, #2563eb, #06b6d4, #22c55e, #f59e0b, #2563eb);
  flex:0 0 auto;
  position:relative;
}
.et-avatar::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(37,99,235,.22), transparent 55%);
  pointer-events:none;
}
.et-avatar img{
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:cover;
  display:block;
  background:#e2e8f0;
  border:3px solid #fff;
}

.et-avatar--mini{
  width:58px;
  height:58px;
}

/* Text */
.et-info{ min-width:0; }
.et-name{
  font-size:14.5px;
  font-weight:900;
  color:#0f172a;
  line-height:1.2;
}
.et-role{
  font-size:12px;
  font-weight:900;
  color:#2563eb;
  margin-top:2px;
}
.et-aff{
  font-size:12px;
  color:#64748b;
  margin-top:6px;
  line-height:1.25;
}

/* Buttons */
.et-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.06);
}
.et-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:850;
  text-decoration:none !important;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0f172a !important;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.et-btn:hover{
  background:#f8fafc;
  box-shadow:0 10px 22px rgba(2,6,23,.08);
  transform:translateY(-1px);
}
.et-btn--primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff !important;
}
.et-btn--primary:hover{ background:#1d4ed8; }


/* =========================
   2) About Page (Modern v2)
   ========================= */

/* Theme-safe variables */
:root{
  --uobrj2-ink: #0b1220;
  --uobrj2-muted: #516075;
  --uobrj2-line: rgba(2,6,23,.10);
  --uobrj2-card: #ffffff;
  --uobrj2-soft: rgba(248,250,252,1);
  --uobrj2-accent: #2563eb;
  --uobrj2-accent2:#f97316;
}

/* Contain styles to the About content only */
.uobrj2-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 0 12px;
}

.uobrj2-hero{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--uobrj2-line);
  background:
    radial-gradient(900px circle at 20% 10%, rgba(37,99,235,.22), transparent 55%),
    radial-gradient(800px circle at 85% 30%, rgba(249,115,22,.18), transparent 55%),
    radial-gradient(700px circle at 55% 120%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,1));
  box-shadow:
    0 20px 50px rgba(2,6,23,.10),
    0 1px 0 rgba(255,255,255,.9) inset;
  padding: 26px 20px;
}

.uobrj2-hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55), transparent 45%);
  pointer-events:none;
}

.uobrj2-kicker{
  position: relative;
  z-index: 1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.22);
  background: rgba(37,99,235,.08);
  color: rgba(37,99,235,.98);
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 12px;
}

.uobrj2-title{
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--uobrj2-ink);
  font-weight: 950;
  line-height: 1.05;
  font-size: clamp(24px, 3.2vw, 40px);
}

.uobrj2-lead{
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  max-width: 78ch;
  color: var(--uobrj2-muted);
  font-size: 15.5px;
  line-height: 1.75;
}

.uobrj2-actions{
  position: relative;
  z-index: 1;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.uobrj2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none !important;
  border: 1px solid rgba(2,6,23,.14);
  background: rgba(255,255,255,.9);
  color: var(--uobrj2-ink) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  transition: transform .08s ease, box-shadow .16s ease, background .16s ease;
}

.uobrj2-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  background:#fff;
}

.uobrj2-btn--primary{
  background: var(--uobrj2-accent);
  border-color: var(--uobrj2-accent);
  color:#fff !important;
}
.uobrj2-btn--primary:hover{ background:#1d4ed8; }

/* Stats strip */
.uobrj2-stats{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 900px){
  .uobrj2-stats{ grid-template-columns: repeat(3, 1fr); }
}

.uobrj2-stat{
  border-radius: 18px;
  border: 1px solid var(--uobrj2-line);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,1));
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
  padding: 14px 14px;
}

.uobrj2-stat .uobrj2-stat__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(37,99,235,.95);
  margin: 0 0 6px;
}
.uobrj2-stat .uobrj2-stat__value{
  font-size: 14.5px;
  font-weight: 900;
  color: var(--uobrj2-ink);
  margin: 0;
}
.uobrj2-stat .uobrj2-stat__desc{
  margin: 6px 0 0;
  color: var(--uobrj2-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Content grid */
.uobrj2-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

@media (min-width: 980px){
  .uobrj2-grid{ grid-template-columns: 1.15fr .85fr; }
}

.uobrj2-card{
  border-radius: 18px;
  border: 1px solid var(--uobrj2-line);
  background: var(--uobrj2-card);
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  padding: 18px 16px;
}

.uobrj2-card h2{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
  color: var(--uobrj2-ink);
  line-height: 1.2;
}

.uobrj2-card p{
  margin: 0 0 10px;
  color: var(--uobrj2-muted);
  line-height: 1.8;
  font-size: 14.7px;
}

.uobrj2-bullets{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display:grid;
  gap: 10px;
}

.uobrj2-bullet{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(248,250,252,.75), rgba(255,255,255,1));
}

.uobrj2-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.22);
  color: rgba(37,99,235,.98);
  font-weight: 900;
  flex: 0 0 auto;
}

.uobrj2-bullet strong{
  display:block;
  color: var(--uobrj2-ink);
  font-weight: 950;
  margin-bottom: 2px;
}
.uobrj2-bullet span{
  display:block;
  color: var(--uobrj2-muted);
  font-size: 13.6px;
  line-height: 1.6;
}

/* Highlight callout */
.uobrj2-callout{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(249,115,22,.40);
  background:
    radial-gradient(circle at 15% 30%, rgba(249,115,22,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,247,237,1), rgba(255,255,255,1));
  color: var(--uobrj2-ink);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
}

.uobrj2-callout strong{
  display:block;
  font-weight: 950;
  margin-bottom: 6px;
}
.uobrj2-callout p{
  margin: 0;
  color: var(--uobrj2-muted);
  line-height: 1.7;
  font-size: 14.6px;
}

/* Governance timeline */
.uobrj2-timeline{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.uobrj2-step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(248,250,252,.75), rgba(255,255,255,1));
  box-shadow: 0 12px 28px rgba(2,6,23,.07);
}

.uobrj2-dot{
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--uobrj2-accent);
  box-shadow: 0 0 0 7px rgba(37,99,235,.14);
  flex: 0 0 auto;
}

.uobrj2-step h3{
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 950;
  color: var(--uobrj2-ink);
}

.uobrj2-step p{
  margin: 0;
  color: var(--uobrj2-muted);
  font-size: 14.4px;
  line-height: 1.75;
}

/* Small spacing safety inside OJS content */
.uobrj2-wrap :where(h1,h2,h3,p,ul,li){ max-width: 100%; }

/* ==========================================
   HOMEPAGE TOPBAR + SLIDER (ADDITIONAL CONTENT)
   ========================================== */

/* =========================
   UOBRJ TOP BAR (LIGHT BLUE)
========================= */
.uobrj-topbar{
  background: linear-gradient(90deg,rgba(33, 165, 217, 1) 0%, rgba(38, 194, 255, 1) 67%);
  border: 1px solid rgba(0,0,0,.06);
  border-left: 0; border-right: 0;
  margin: 0 0 14px 0;
}
.uobrj-topbar__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.uobrj-topbar__left{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items:center;
}
.uobrj-topbar__item{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none !important;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.uobrj-topbar__item:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.uobrj-ico{
  width: 30px; height: 30px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: rgba(239, 203, 0, 1);
}
.uobrj-ico svg{ width: 16px; height: 16px; fill: #fff; }
.uobrj-topbar__text{
  color:#0B2239;
  font-size: 14px;
  line-height: 1.2;
}
.uobrj-topbar__badge{
  color:#0B2239;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(30,136,229,.12);
  border: 1px solid rgba(30,136,229,.18);
}


:root{
  --uobrj-blue: #0A9AE6;
  --uobrj-blue2:#21B3F1;
  --uobrj-gold:#F4B400;
  --uobrj-ink:#0F172A;
  --uobrj-muted:#475569;
}

/* wrapper */
.uobrj-hero{
  padding: 18px 0 34px;
}

.uobrj-hero__inner{
  max-width: 1320px;   /* try 1280 / 1320 / 1400 */
max-hieght:1120px
  padding-left: 12px;  /* slightly less side padding */
  padding-right: 12px;
}

/* slider shell */
.uobrj-slider{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
  background:
    radial-gradient(1200px 420px at 20% 15%, rgba(33,179,241,.18), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(244,180,0,.12), transparent 60%),
    #f8fbff;
}

/* radio toggles hidden */
.uobrj-slide__toggle{ display:none; }

/* slide rail */
.uobrj-slides{
  display:flex;
  width:300%;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

/* movement */
#uobrjSlide1:checked ~ .uobrj-slides{ transform: translateX(0%); }
#uobrjSlide2:checked ~ .uobrj-slides{ transform: translateX(-33.333%); }
#uobrjSlide3:checked ~ .uobrj-slides{ transform: translateX(-66.666%); }

/* each slide */
.uobrj-slide{
  width:33.333%;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  padding: 36px 32px;
  min-height: 320px;
  align-items:center;
}

/* animated entrance per slide change (CSS-only) */
#uobrjSlide1:checked ~ .uobrj-slides .uobrj-slide--1 .uobrj-slide__content,
#uobrjSlide2:checked ~ .uobrj-slides .uobrj-slide--2 .uobrj-slide__content,
#uobrjSlide3:checked ~ .uobrj-slides .uobrj-slide--3 .uobrj-slide__content{
  animation: uobrjIn 700ms ease both;
}

@keyframes uobrjIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* text */
.uobrj-kicker{
  display:inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(10,154,230,.14);
  border: 1px solid rgba(10,154,230,.25);
  color: #0b6ea6;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  margin-bottom: 12px;
}

.uobrj-title{
  color: var(--uobrj-ink);
  font-size: 44px;
  line-height: 1.06;
  margin: 0 0 10px;
  font-weight: 900;
}

.uobrj-highlight{
  display:inline-block;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(244,180,0,.20);
  border: 1px solid rgba(244,180,0,.30);
}

.uobrj-subtitle{
  margin: 0 0 18px;
  color: var(--uobrj-muted);
  font-size: 16px;
  max-width: 540px;
}

/* buttons */
.uobrj-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.uobrj-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration:none !important;
}

.uobrj-btn--primary{
  background: linear-gradient(90deg, var(--uobrj-blue), var(--uobrj-blue2));
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(2, 132, 199, .22);
}

.uobrj-btn--ghost{
  background: #ffffff;
  color: #0b6ea6 !important;
  border: 1px solid rgba(10,154,230,.25);
}

/* right visual */
.uobrj-slide__visual{
  position: relative;
  height: 260px;
}

.uobrj-glass{
  position:absolute;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(148, 163, 184, .25);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}

.uobrj-glass--a{
  width: 92%;
  height: 68%;
  top: 10%;
  right: 0;
}

.uobrj-glass--b{
  width: 78%;
  height: 18%;
  top: 6%;
  right: 6%;
  opacity: .9;
}

/* floating orbs */
.uobrj-orb{
  position:absolute;
  border-radius: 999px;
  opacity: .92;
  animation: uobrjFloat 6s ease-in-out infinite;
}

.uobrj-orb--1{
  width: 92px; height: 92px;
  background: rgba(10,154,230,.22);
  left: 2%;
  bottom: 12%;
}

.uobrj-orb--2{
  width: 54px; height: 54px;
  background: rgba(244,180,0,.25);
  right: 10%;
  bottom: 6%;
  animation-duration: 7.5s;
}

@keyframes uobrjFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}

/* dots */
.uobrj-dots{
  position:absolute;
  left: 26px;
  bottom: 16px;
  display:flex;
  gap:10px;
}

.uobrj-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(2,132,199,.25);
  border: 1px solid rgba(2,132,199,.30);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}

#uobrjSlide1:checked ~ .uobrj-dots label[for="uobrjSlide1"],
#uobrjSlide2:checked ~ .uobrj-dots label[for="uobrjSlide2"],
#uobrjSlide3:checked ~ .uobrj-dots label[for="uobrjSlide3"]{
  background: rgba(244,180,0,.95);
  transform: scale(1.2);
  border-color: rgba(244,180,0,.85);
}

/* responsive */
@media (max-width: 992px){
  .uobrj-slide{ grid-template-columns: 1fr; }
  .uobrj-slide__visual{ height: 180px; }
  .uobrj-title{ font-size: 36px; }
}

@media (max-width: 520px){
  .uobrj-slide{ padding: 26px 18px; }
  .uobrj-title{ font-size: 30px; }
  .uobrj-dots{ left: 18px; }
}
/* ==========================================
   HOMEPAGE: CURRENT ISSUE (HealthSciences)
   Targets: .pkp_page_index .issue_wrapper
   ========================================== */

/* Make sure the wrapper behaves like a centered section */
.pkp_page_index .issue_wrapper{
  max-width: var(--uobrj-shell) !important;
  margin: 22px auto 34px !important;
  padding: 0 var(--uobrj-pad) !important;
}

/* Turn the issue block into a modern card */
.pkp_page_index .issue_wrapper .obj_issue_toc{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  background:
    radial-gradient(900px 380px at 18% 20%, rgba(10,154,230,.14), transparent 60%),
    radial-gradient(900px 380px at 90% 20%, rgba(244,180,0,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fbff) !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .12) !important;
  padding: 26px 22px !important;
}

/* Decorative soft glow */
.pkp_page_index .issue_wrapper .obj_issue_toc::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 25% 25%, rgba(33,179,241,.18), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(244,180,0,.14), transparent 60%);
  pointer-events:none;
}

/* ---- Headings / labels (covers multiple OJS versions) ---- */
.pkp_page_index .issue_wrapper :is(h2,h3,.title,.section-title,.heading){
  position: relative;
  z-index: 1;
}

/* The "Current Issue" label */
.pkp_page_index .issue_wrapper :is(h2,h3,.current_issue_title,.issue_toc_title,.heading){
  margin: 0 0 10px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  color: #0F172A !important;
}

/* If the theme renders "Current Issue" as a small grey badge, upgrade it */
.pkp_page_index .issue_wrapper :is(.current_issue_title,.issue_toc_title,.heading) span,
.pkp_page_index .issue_wrapper :is(.current_issue_title,.issue_toc_title,.heading){
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Issue identification line (Vol/No/Year etc.) */
.pkp_page_index .issue_wrapper :is(.issue_toc .description, .description, .published, .meta, .sub_title, .subtitle){
  position: relative;
  z-index: 1;
  color: rgba(15,23,42,.72) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
}

/* ---- Article list inside current issue ---- */
.pkp_page_index .issue_wrapper :is(.toc, .issue_toc, .sections, .cmp_article_list, .articles){
  position: relative;
  z-index: 1;
  margin-top: 10px !important;
}

/* Each article card (covers common core classes) */
.pkp_page_index .issue_wrapper :is(.obj_article_summary, .article_summary, .media, .tocArticle){
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.08) !important;
  padding: 18px 16px !important;
  margin: 14px 0 !important;
}

/* Article title */
.pkp_page_index .issue_wrapper :is(.obj_article_summary .title, .article_summary .title, .tocArticle .title, .obj_article_summary h3){
  font-weight: 950 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
}

/* Article meta/abstract */
.pkp_page_index .issue_wrapper :is(.obj_article_summary .meta, .obj_article_summary .subtitle, .obj_article_summary .authors, .obj_article_summary .pages, .obj_article_summary p){
  color: rgba(15,23,42,.72) !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
}

/* Links inside current issue */
.pkp_page_index .issue_wrapper a{
  color: #0A9AE6 !important;
  text-decoration: none !important;
}
.pkp_page_index .issue_wrapper a:hover{
  text-decoration: underline !important;
}

/* ---- "View All Issues" button (usually at bottom) ---- */
.pkp_page_index .issue_wrapper :is(a.cmp_button, a.button, .cmp_button a, .issue_wrapper a[href*="issue/archive"]){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(10,154,230,.25) !important;
  background: linear-gradient(90deg, #0A9AE6, #21B3F1) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(10,154,230,.18) !important;
}
.pkp_page_index .issue_wrapper :is(a.cmp_button, a.button, .cmp_button a, .issue_wrapper a[href*="issue/archive"]):hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(10,154,230,.22) !important;
}

/* ---- Mobile spacing ---- */
@media (max-width: 700px){
  .pkp_page_index .issue_wrapper .obj_issue_toc{
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }
}
/* =========================================================
   UOBRJ MODERN FOOTER (HealthSciences/OJS)
   Paste at the VERY END of your CSS
   ========================================================= */

/* Base footer background + spacing */
.site-footer{
  position: relative;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(33,179,241,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 30%, rgba(244,180,0,.12), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #07101b 100%);
  color: rgba(255,255,255,.86);
  padding: 56px 0 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

/* subtle pattern */
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.05), transparent 45%);
  pointer-events:none;
}

/* widen footer container */
.site-footer .container{
  max-width: 1280px;
}

/* -------------------------------
   MAIN FOOTER GRID (sidebar blocks)
   ------------------------------- */

/* This is where OJS prints your blocks like Journal Menu, Submission block, etc. */
.site-footer .site-footer-sidebar .row{
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr; /* Brand | Menu | CTA */
  gap: 22px;

  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: stretch;
}

/* Make each "column" behave as a card */
.site-footer .site-footer-sidebar .row > *{
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-width: 0 !important;
}

/* Give blocks a modern glass card style */
.site-footer .site-footer-sidebar .pkp_block{
  width: 100%;
  border-radius: 18px;
  padding: 18px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

/* Block titles */
.site-footer .site-footer-sidebar .pkp_block .title,
.site-footer .site-footer-sidebar .pkp_block h2,
.site-footer .site-footer-sidebar .pkp_block h3{
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  margin: 0 0 12px;
  font-size: 15px;
}

/* Body text */
.site-footer .site-footer-sidebar .pkp_block,
.site-footer .site-footer-sidebar .pkp_block p{
  color: rgba(255,255,255,.78);
  font-size: 13.8px;
  line-height: 1.7;
}

/* -------------------------------
   Links / menu styling
   ------------------------------- */
.site-footer a{
  color: rgba(255,255,255,.86) !important;
  text-decoration: none !important;
}

.site-footer a:hover{
  color: #fff !important;
  text-decoration: none !important;
}

/* Menu lists */
.site-footer .site-footer-sidebar ul,
.site-footer .site-footer-sidebar ol{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.site-footer .site-footer-sidebar li{
  margin: 0;
}

/* Make links look like modern pills */
.site-footer .site-footer-sidebar li a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

.site-footer .site-footer-sidebar li a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(33,179,241,.30);
}

/* -------------------------------
   CTA button styling (Make a Submission)
   ------------------------------- */

/* Many OJS blocks render a primary button link, style it as a CTA */
.site-footer .site-footer-sidebar a.pkp_button,
.site-footer .site-footer-sidebar .pkp_block a[href*="submission"],
.site-footer .site-footer-sidebar .pkp_block a[href*="submit"]{
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  width: 100%;
  margin-top: 10px;

  background: linear-gradient(90deg, #0A9AE6, #21B3F1) !important;
  border: 1px solid rgba(33,179,241,.35) !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(10,154,230,.22);
}

.site-footer .site-footer-sidebar a.pkp_button:hover,
.site-footer .site-footer-sidebar .pkp_block a[href*="submission"]:hover,
.site-footer .site-footer-sidebar .pkp_block a[href*="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 65px rgba(10,154,230,.28);
}

/* -------------------------------
   Footer bottom content area (copyright + OJS logo)
   ------------------------------- */
.site-footer .site-footer-content{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.site-footer .site-footer-content .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: center;
}

.site-footer .site-footer-content,
.site-footer .site-footer-content p{
  font-size: 12.8px;
  color: rgba(255,255,255,.70);
}

.site-footer .footer-brand-image{
  opacity: .90;
  filter: grayscale(1) brightness(1.2);
  transition: opacity .2s ease;
  max-width: 120px;
  height: auto;
}
.site-footer .footer-brand-image:hover{ opacity: 1; }

/* -------------------------------
   Responsive
   ------------------------------- */
@media (max-width: 1000px){
  .site-footer .site-footer-sidebar .row{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px){
  .site-footer{/* =========================================================
   UOBRJ About Page – Outstanding Modern CSS
   Targets ONLY your provided markup (.uobrj-about ...)
   Brand palette matches your logo (blue + gold)
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root{
  --uobrj-blue: #0A9AE6;     /* logo blue */
  --uobrj-blue2:#21B3F1;     /* lighter blue */
  --uobrj-gold: #F4B400;     /* logo gold */
  --uobrj-ink:  #0B1220;
  --uobrj-muted:#4B5B73;
  --uobrj-line: rgba(2, 6, 23, .10);
  --uobrj-card: #ffffff;
  --uobrj-soft: #F6FAFF;
  --uobrj-shadow: 0 18px 50px rgba(15, 23, 42, .10);
  --uobrj-radius: 20px;
}

/* prevent layout bugs in OJS content area */
.uobrj-about, .uobrj-about *{ box-sizing:border-box; }
.uobrj-about{ color: var(--uobrj-ink); }
.uobrj-about :where(h1,h2,h3,p,ul,li){ max-width: 100%; }

/* ---------- Section wrapper ---------- */
.uobrj-about{
  width: 100%;
  margin: 0 auto;
  padding: 18px 0 40px;
}

/* ---------- Hero ---------- */
.uobrj-about .uobrj-hero{
  position: relative;
  margin: 0 auto 18px;
  overflow: hidden;
  border-radius: var(--uobrj-radius);
  border: 1px solid var(--uobrj-line);
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(33,179,241,.22), transparent 60%),
    radial-gradient(900px 520px at 88% 0%, rgba(244,180,0,.14), transparent 60%),
    radial-gradient(800px 520px at 55% 120%, rgba(10,154,230,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,250,255,1));
  box-shadow: var(--uobrj-shadow);
}

/* subtle glass sheen */
.uobrj-about .uobrj-hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.70), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.60), transparent 50%);
  pointer-events:none;
}

/* decorative orbs */
.uobrj-about .uobrj-hero::after{
  content:"";
  position:absolute;
  width: 280px;
  height: 280px;
  right: -120px;
  bottom: -140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(33,179,241,.25), rgba(33,179,241,0) 70%);
  filter: blur(1px);
  pointer-events:none;
}

.uobrj-about .uobrj-hero__inner{
  position: relative;
  z-index: 1;
  padding: 28px 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.uobrj-about .uobrj-title{
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.06;
  font-size: clamp(26px, 3.2vw, 44px);
  color: var(--uobrj-ink);
}

.uobrj-about .uobrj-lead{
  margin: 0;
  max-width: 72ch;
  color: rgba(11,18,32,.76);
  font-size: 15.6px;
  line-height: 1.75;
}

/* badges row */
.uobrj-about .uobrj-badges{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.uobrj-about .uobrj-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 11.5px;
  color: rgba(11,18,32,.86);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}

/* add a tiny dot (no extra HTML needed) */
.uobrj-about .uobrj-badge::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--uobrj-blue);
  box-shadow: 0 0 0 5px rgba(10,154,230,.14);
}

/* make middle badge gold accent automatically */
.uobrj-about .uobrj-badge:nth-child(2)::before{
  background: var(--uobrj-gold);
  box-shadow: 0 0 0 5px rgba(244,180,0,.16);
}

/* ---------- Grid layout ---------- */
.uobrj-about .uobrj-grid{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0; /* keep OJS spacing clean */
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* two columns on wider screens */
@media (min-width: 980px){
  .uobrj-about .uobrj-grid{
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .uobrj-about .uobrj-card--wide{
    grid-column: 1 / -1;
  }
}

/* ---------- Cards ---------- */
.uobrj-about .uobrj-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--uobrj-radius);
  border: 1px solid var(--uobrj-line);
  background: var(--uobrj-card);
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
  padding: 18px 18px;
}

/* top accent line */
.uobrj-about .uobrj-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, var(--uobrj-blue), var(--uobrj-blue2), var(--uobrj-gold));
  opacity: .95;
}

/* gentle background glow */
.uobrj-about .uobrj-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(33,179,241,.14), transparent 70%);
  pointer-events:none;
}

.uobrj-about .uobrj-card h2{
  margin: 6px 0 10px;
  font-size: 18px;
  font-weight: 950;
  color: var(--uobrj-ink);
  letter-spacing: .2px;
}

.uobrj-about .uobrj-card p{
  margin: 0 0 10px;
  color: rgba(11,18,32,.72);
  line-height: 1.85;
  font-size: 14.8px;
}

.uobrj-about .uobrj-card p:last-child{ margin-bottom: 0; }

/* ---------- Lists ---------- */
.uobrj-about .uobrj-list{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}

.uobrj-about .uobrj-list li{
  position: relative;
  padding: 12px 12px 12px 44px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(246,250,255,.9), rgba(255,255,255,1));
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  color: rgba(11,18,32,.78);
  font-size: 14.4px;
  line-height: 1.55;
}

/* custom icon bullet */
.uobrj-about .uobrj-list li::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  background: rgba(10,154,230,.14);
  border: 1px solid rgba(10,154,230,.30);
  box-shadow: 0 0 0 6px rgba(10,154,230,.10);
}

/* ---------- Mission/Goals two columns ---------- */
.uobrj-about .uobrj-two{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}

@media (min-width: 900px){
  .uobrj-about .uobrj-two{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* mini headings */
.uobrj-about .uobrj-mini{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(10,154,230,.95);
}

/* note callout */
.uobrj-about .uobrj-note{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(244,180,0,.55);
  background:
    radial-gradient(circle at 20% 30%, rgba(244,180,0,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,251,235,1), rgba(255,255,255,1));
  color: rgba(11,18,32,.78);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
}

/* ---------- Governance timeline ---------- */
.uobrj-about .uobrj-timeline{
  margin-top: 10px;
  display:grid;
  gap: 12px;
}

/* each step card */
.uobrj-about .uobrj-step{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(246,250,255,.75), rgba(255,255,255,1));
  box-shadow: 0 12px 28px rgba(2,6,23,.07);
  position: relative;
}

/* dot */
.uobrj-about .uobrj-step__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--uobrj-blue);
  box-shadow: 0 0 0 7px rgba(10,154,230,.14);
  margin-top: 7px;
  flex: 0 0 auto;
}

/* connector line between dots (pure CSS) */
.uobrj-about .uobrj-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left: 20px;
  top: 34px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(10,154,230,.35), rgba(10,154,230,0));
  border-radius: 99px;
}

/* step text */
.uobrj-about .uobrj-step__body h3{
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 950;
  color: var(--uobrj-ink);
}

.uobrj-about .uobrj-step__body p{
  margin: 0;
  color: rgba(11,18,32,.72);
  font-size: 14.5px;
  line-height: 1.75;
}

/* ---------- Responsive polish ---------- */
@media (max-width: 520px){
  .uobrj-about .uobrj-hero__inner{ padding: 22px 16px; }
  .uobrj-about .uobrj-card{ padding: 16px 14px; }
  .uobrj-about .uobrj-list li{ padding-left: 42px; }
}

    padding: 40px 0 18px;
  }
  .site-footer .site-footer-sidebar .row{
    grid-template-columns: 1fr;
  }
  .site-footer .site-footer-sidebar .pkp_block{
    padding: 16px;
  }
}