/* ==========================================================================
   IJRHSC - Standalone Journal Stylesheet for OJS Dashboard Upload
   Journal: International Journal for Research in Health and Social Care
   Upload Path: Dashboard -> Settings -> Website -> Appearance -> Advanced -> Journal stylesheet
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────
   1. Google Fonts & Universal Responsive Reset
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   2. Design Tokens & Color Palette
   ───────────────────────────────────────────────────────────── */
:root {
  /* Brand Palette */
  --ijr-primary: #0D6E8C;
  /* Primary Blue */
  --ijr-primary-dark: #09536a;
  --ijr-primary-light: #e6f4f8;
  --ijr-health-green: #2E9E6F;
  /* Health Green */
  --ijr-health-light: #eaf7f1;
  --ijr-light-green: #6CC7A1;
  /* Light Green */
  --ijr-dark-navy: #0B3A5B;
  /* Dark Navy */
  --ijr-sky-blue: #3B82F6;
  /* Sky Blue */
  --ijr-teal: #14B8A6;
  /* Teal */
  --ijr-lavender: #8B5CF6;
  /* Lavender */
  --ijr-coral: #F87171;
  /* Coral */

  /* Neutral Palette */
  --ijr-text-main: #1F2937;
  /* Main Text */
  --ijr-text-secondary: #64748B;
  /* Secondary Text */
  --ijr-text-muted: #94A3B8;
  --ijr-border: #CBD5E1;
  /* Border */
  --ijr-border-light: #E2E8F0;
  --ijr-bg-page: #F3F4F6;
  /* Page Background */
  --ijr-bg-card: #FFFFFF;
  --ijr-white: #FFFFFF;
  /* White */

  /* Functional Colors */
  --ijr-bg-nav: #0B3A5B;
  /* Navigation Bar */
  --ijr-accent: #14B8A6;
  /* Accents */

  /* Typography Variables */
  --ijr-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ijr-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shadows & Radius */
  --ijr-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --ijr-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ijr-shadow-lg: 0 10px 30px rgba(11, 58, 91, 0.12);
  --ijr-radius-sm: 6px;
  --ijr-radius-md: 10px;
  --ijr-radius-lg: 16px;
}

/* ─────────────────────────────────────────────────────────────
   3. Global Page Defaults & Float Resets
   ───────────────────────────────────────────────────────────── */
body {
  font-family: var(--ijr-font-sans) !important;
  font-size: 15px !important;
  color: var(--ijr-text-main) !important;
  background-color: var(--ijr-bg-page) !important;
  line-height: 1.68 !important;
  -webkit-font-smoothing: antialiased;
}

.pkp_structure_page,
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  float: none !important;
  min-width: 0 !important;
}

.pkp_structure_page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100% !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.page_title,
.title {
  font-family: var(--ijr-font-heading) !important;
  color: var(--ijr-dark-navy) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
}

h1,
.page_title {
  font-size: 26px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--ijr-primary-light) !important;
}

h2 {
  font-size: 20px !important;
  margin-top: 22px !important;
  margin-bottom: 12px !important;
}

h3 {
  font-size: 17px !important;
  margin-top: 18px !important;
  margin-bottom: 10px !important;
}

p {
  font-family: var(--ijr-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ijr-text-main) !important;
  margin-bottom: 14px !important;
}

a {
  color: var(--ijr-primary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

a:hover,
a:focus {
  color: var(--ijr-teal);
  text-decoration: none;
}

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

/* ─────────────────────────────────────────────────────────────
   4. Header & Branding with Hero Image Background & Dark Overlay
   ───────────────────────────────────────────────────────────── */

header.pkp_structure_head,
.pkp_structure_head,
#headerNavigationContainer {
  background: linear-gradient(135deg, rgba(11, 58, 91, 0.78) 0%, rgba(13, 110, 140, 0.72) 100%),
    url('https://images.pexels.com/photos/34642911/pexels-photo-34642911.jpeg') center/cover no-repeat,
    var(--ijr-dark-navy) !important;
  border-bottom: 2px solid var(--ijr-teal) !important;
  box-shadow: var(--ijr-shadow-lg) !important;
  position: relative !important;
  z-index: 1000 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.pkp_head_wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
}

/* Brand Row (Desktop) */
.pkp_site_name_wrapper,
.ijrhsc-brand-bar,
.ijrhsc-brand-container {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.pkp_site_name {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Brand Link */
.pkp_site_name a,
.pkp_site_name a.is_img,
.pkp_site_name a.is_text,
.ijrhsc-brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  max-width: 100% !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Logo Image */
.pkp_site_name a img,
.pkp_site_name a.is_img img,
.ijrhsc-logo-img {
  max-height: 82px !important;
  max-width: 130px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: var(--ijr-radius-sm);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  flex-shrink: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Journal Title Text */
.pkp_site_name a.is_img::after {
  content: "International Journal for Research in Health and Social Care" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: var(--ijr-font-heading) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.015em !important;
  max-width: 620px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  text-transform: none !important;
}

.pkp_site_name a.is_text,
.ijrhsc-journal-name,
.ijrhsc-logo-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: var(--ijr-font-heading) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
  max-width: 620px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  text-transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   5. Navigation Bar (Row 2: Dark Nav Bar)
   ───────────────────────────────────────────────────────────── */

.pkp_navigation_primary_row,
.ijrhsc-nav-wrapper {
  background: rgba(11, 58, 91, 0.85) !important;
  backdrop-filter: blur(8px);
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_primary_wrapper,
.ijrhsc-nav-bar {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

ul.pkp_navigation_primary,
ul.ijrhsc-nav,
ul.ijrhsc-nav-list {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

ul.pkp_navigation_primary>li,
ul.ijrhsc-nav>li,
ul.ijrhsc-nav-list>li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.pkp_navigation_primary>li>a,
ul.ijrhsc-nav>li>a,
ul.ijrhsc-nav-list>li>a {
  display: flex !important;
  align-items: center !important;
  padding: 13px 15px !important;
  font-family: var(--ijr-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
  border-radius: var(--ijr-radius-sm) !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

ul.pkp_navigation_primary>li>a:hover,
ul.ijrhsc-nav>li>a:hover,
ul.ijrhsc-nav-list>li>a:hover,
ul.pkp_navigation_primary>li.active>a,
ul.ijrhsc-nav>li.active>a {
  background: rgba(20, 184, 166, 0.25) !important;
  color: var(--ijr-light-green) !important;
}

/* Dropdowns */
ul.pkp_navigation_primary ul,
ul.ijrhsc-nav ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--ijr-dark-navy) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--ijr-radius-md) !important;
  box-shadow: var(--ijr-shadow-lg) !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
  z-index: 1000 !important;
  list-style: none !important;
  display: none;
}

ul.pkp_navigation_primary li:hover>ul,
ul.ijrhsc-nav li:hover>ul {
  display: block !important;
}

ul.pkp_navigation_primary ul li a,
ul.ijrhsc-nav ul li a {
  padding: 9px 18px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-transform: none !important;
  display: block !important;
  font-weight: 500 !important;
}

ul.pkp_navigation_primary ul li a:hover,
ul.ijrhsc-nav ul li a:hover {
  background: var(--ijr-primary) !important;
  color: var(--ijr-white) !important;
  padding-left: 22px !important;
}

/* Search Bar Component */
.ijrhsc-search-form {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ijrhsc-search-inner {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50px !important;
  padding: 3px 6px 3px 14px !important;
  transition: all 0.25s ease !important;
}

.ijrhsc-search-inner:focus-within {
  border-color: var(--ijr-teal) !important;
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25) !important;
}

.pkp_search input[type="text"],
.ijrhsc-search-input {
  border: none !important;
  background: transparent !important;
  padding: 5px 6px 5px 0 !important;
  font-family: var(--ijr-font-sans) !important;
  font-size: 13.5px !important;
  color: #FFFFFF !important;
  outline: none !important;
  width: 160px !important;
  transition: width 0.25s ease !important;
  box-shadow: none !important;
}

.pkp_search input[type="text"]::placeholder,
.ijrhsc-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

.pkp_search input[type="text"]:focus,
.ijrhsc-search-input:focus {
  width: 200px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ijrhsc-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

.ijrhsc-search-btn svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
}

.ijrhsc-search-btn:hover,
.ijrhsc-search-btn:focus {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(1.08) !important;
}

/* User Account Links */
.pkp_navigation_user_wrapper {
  margin-left: auto !important;
}

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

ul.pkp_navigation_user>li>a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: var(--ijr-radius-sm) !important;
}

ul.pkp_navigation_user>li>a:hover {
  color: var(--ijr-teal) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.pkp_site_nav_toggle,
button.pkp_site_nav_toggle,
.ijrhsc-toggler {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   5B. IJRHSC Homepage Hero Section (Text Left, Cover Right)
   ───────────────────────────────────────────────────────────── */

.page_index_journal .pkp_structure_main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ijrhsc-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 60%, #E6F4F8 100%) !important;
  border: 1px solid var(--ijr-border-light) !important;
  border-radius: var(--ijr-radius-lg) !important;
  box-shadow: var(--ijr-shadow-md) !important;
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ijrhsc-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ijrhsc-hero-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 36px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 40px 36px !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

/* Hero Left Text Area */
.ijrhsc-hero-text {
  flex: 1 1 60% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.ijrhsc-hero-badges {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

.ijrhsc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ijr-primary) !important;
  background: rgba(13, 110, 140, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  letter-spacing: 0.02em !important;
}

.ijrhsc-badge svg {
  color: var(--ijr-teal) !important;
}

.ijrhsc-badge-sep {
  display: none !important;
}

.ijrhsc-hero-title {
  font-family: var(--ijr-font-heading) !important;
  font-size: clamp(22px, 3.2vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--ijr-dark-navy) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  letter-spacing: -0.02em !important;
}

.ijrhsc-hero-desc {
  font-family: var(--ijr-font-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: var(--ijr-text-main) !important;
  margin: 0 0 24px 0 !important;
  max-width: 620px !important;
}

.ijrhsc-hero-btns {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.ijrhsc-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, var(--ijr-health-green) 0%, #22845c 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--ijr-font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--ijr-radius-sm) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(46, 158, 111, 0.35) !important;
  transition: all 0.25s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.ijrhsc-btn-primary:hover,
.ijrhsc-btn-primary:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(46, 158, 111, 0.45) !important;
  color: #FFFFFF !important;
}

.ijrhsc-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  background: transparent !important;
  color: var(--ijr-primary) !important;
  border: 2px solid var(--ijr-primary) !important;
  font-family: var(--ijr-font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--ijr-radius-sm) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.ijrhsc-btn-outline:hover,
.ijrhsc-btn-outline:focus {
  background: var(--ijr-primary-light) !important;
  border-color: var(--ijr-primary-dark) !important;
  color: var(--ijr-primary-dark) !important;
  transform: translateY(-2px) !important;
}

/* Hero Right Cover Area */
.ijrhsc-hero-cover-wrapper {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ijrhsc-hero-cover-card {
  background: var(--ijr-white) !important;
  padding: 8px !important;
  border-radius: var(--ijr-radius-md) !important;
  box-shadow: 0 12px 32px rgba(11, 58, 91, 0.18) !important;
  border: 1px solid var(--ijr-border-light) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ijrhsc-hero-cover-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(11, 58, 91, 0.24) !important;
}

.ijrhsc-cover-img {
  width: 230px !important;
  max-width: 230px !important;
  height: auto !important;
  max-height: 330px !important;
  object-fit: cover !important;
  border-radius: var(--ijr-radius-sm) !important;
  display: block !important;
}

/* Feature Cards Bar */
.ijrhsc-features-bar {
  background: #FFFFFF !important;
  border-top: 1px solid var(--ijr-border-light) !important;
  width: 100% !important;
}

.ijrhsc-features-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.ijrhsc-feature-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 22px 20px !important;
  border-right: 1px solid var(--ijr-border-light) !important;
  transition: background 0.2s ease !important;
}

.ijrhsc-feature-card:last-child {
  border-right: none !important;
}

.ijrhsc-feature-card:hover {
  background: var(--ijr-primary-light) !important;
}

.ijrhsc-feature-icon {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ijr-primary) !important;
}

.ijrhsc-feature-text h3 {
  font-family: var(--ijr-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ijr-dark-navy) !important;
  margin: 0 0 4px 0 !important;
}

.ijrhsc-feature-text p {
  font-size: 13px !important;
  color: var(--ijr-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Hero Mobile & Tablet Responsiveness */
@media (max-width: 991px) {
  .ijrhsc-hero-container {
    flex-direction: column-reverse !important;
    align-items: center !important;
    text-align: center !important;
    padding: 28px 20px !important;
    gap: 24px !important;
  }

  .ijrhsc-hero-text {
    align-items: center !important;
  }

  .ijrhsc-hero-badges {
    justify-content: center !important;
  }

  .ijrhsc-hero-btns {
    justify-content: center !important;
    width: 100% !important;
  }

  .ijrhsc-cover-img {
    width: 190px !important;
    max-width: 190px !important;
  }

  .ijrhsc-features-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ijrhsc-feature-card:nth-child(2) {
    border-right: none !important;
  }

  .ijrhsc-feature-card:nth-child(3),
  .ijrhsc-feature-card:nth-child(4) {
    border-top: 1px solid var(--ijr-border-light) !important;
  }
}

@media (max-width: 640px) {
  .ijrhsc-hero-title {
    font-size: 22px !important;
  }

  .ijrhsc-hero-desc {
    font-size: 14px !important;
  }

  .ijrhsc-hero-btns {
    flex-direction: column !important;
  }

  .ijrhsc-btn-primary,
  .ijrhsc-btn-outline {
    width: 100% !important;
    justify-content: center !important;
  }

  .ijrhsc-cover-img {
    width: 160px !important;
    max-width: 160px !important;
  }

  .ijrhsc-features-container {
    grid-template-columns: 1fr !important;
  }

  .ijrhsc-feature-card {
    border-right: none !important;
    border-top: 1px solid var(--ijr-border-light) !important;
  }

  .ijrhsc-feature-card:first-child {
    border-top: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. Content & Sidebar (Desktop 2-Column Row Layout)
   ───────────────────────────────────────────────────────────── */

.pkp_structure_content {
  max-width: 1240px !important;
  margin: 16px auto 28px auto !important;
  padding: 0 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 1 0 auto;
}

@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .pkp_structure_content.has_sidebar .pkp_structure_main {
    flex: 1 1 auto !important;
    width: calc(100% - 344px) !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 24px !important;
  }
}

.pkp_structure_main {
  background: var(--ijr-white) !important;
  padding: 20px 18px !important;
  border-radius: var(--ijr-radius-md) !important;
  box-shadow: var(--ijr-shadow-sm) !important;
  border: 1px solid var(--ijr-border) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pkp_structure_sidebar.left::before,
.pkp_structure_sidebar.right::before,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
  border-left: none !important;
  border-right: none !important;
  border: none !important;
  display: none !important;
  content: none !important;
  width: 0 !important;
}

/* Homepage main container reset so Hero and cards have NO outer wrapping border */
body.pkp_page_index .pkp_structure_main,
.pkp_page_index .pkp_structure_main,
.page_index_journal .pkp_structure_main,
.pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 2-Column Section After Full-Width Hero */
.ijrhsc-homepage-body {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
  margin-top: 20px !important;
  box-sizing: border-box !important;
}

.ijrhsc-homepage-main {
  flex: 1 1 auto !important;
  width: calc(100% - 344px) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.ijrhsc-homepage-sidebar {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  position: sticky !important;
  top: 24px !important;
}

.additional_content,
.ijrhsc-about-card,
.current_issue,
.cmp_announcements {
  background: var(--ijr-white) !important;
  padding: 24px 28px !important;
  border-radius: var(--ijr-radius-md) !important;
  box-shadow: var(--ijr-shadow-sm) !important;
  border: 1px solid var(--ijr-border) !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

.additional_content.ijrhsc-about-card {
  margin: 0 !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
  padding: 24px 28px !important;
}

.additional_content.ijrhsc-about-card p {
  margin: 0 !important;
  color: #374151 !important;
  line-height: 1.7 !important;
  font-size: 16px !important;
  font-family: var(--ijr-font-sans) !important;
}

.additional_content p {
  font-family: var(--ijr-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ijr-text-main) !important;
  margin-bottom: 0 !important;
}

@media (max-width: 991px) {
  .ijrhsc-homepage-body {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .ijrhsc-homepage-main {
    width: 100% !important;
  }

  .ijrhsc-homepage-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
  }
}

/* Sidebar Cards */
.pkp_structure_sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pkp_block,
.block_custom,
.custom_block {
  background: var(--ijr-white) !important;
  border: 1px solid var(--ijr-border) !important;
  border-radius: var(--ijr-radius-md) !important;
  padding: 20px !important;
  margin: 0 0 20px 0 !important;
  box-shadow: var(--ijr-shadow-sm) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.pkp_block:hover,
.block_custom:hover {
  box-shadow: var(--ijr-shadow-md) !important;
  border-color: var(--ijr-teal) !important;
}

.pkp_block .title,
.block_custom .title {
  font-family: var(--ijr-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ijr-dark-navy) !important;
  border-bottom: 2px solid var(--ijr-primary-light) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.pkp_structure_sidebar img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--ijr-radius-sm);
  display: block;
  margin: 0 auto 12px auto;
}

.pkp_structure_sidebar table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  margin: 10px 0 !important;
  font-size: 13px !important;
}

.pkp_structure_sidebar th,
.pkp_structure_sidebar td {
  padding: 7px 9px !important;
  border: 1px solid var(--ijr-border-light) !important;
}

.pkp_structure_sidebar th {
  background: var(--ijr-primary-light) !important;
  color: var(--ijr-dark-navy) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   7. PERFECT CENTERED FOOTER
   ───────────────────────────────────────────────────────────── */

.pkp_structure_footer_wrapper,
footer.pkp_structure_footer_wrapper,
.ijrhsc-footer {
  background: var(--ijr-dark-navy) !important;
  color: rgba(255, 255, 255, 0.9) !important;

  margin-top: 50px !important;
  border-top: 4px solid var(--ijr-primary) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.pkp_structure_footer,
.ijrhsc-footer-container {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 20px !important;
  width: 100% !important;
}

.pkp_footer_content,
.ijrhsc-footer-grid,
.pkp_footer_content>div,
.pkp_footer_content>section {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-align: center !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

.pkp_footer_content h1,
.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4,
.pkp_footer_content strong {
  color: #FFFFFF !important;
  font-family: var(--ijr-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 auto 10px auto !important;
  text-align: center !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.pkp_footer_content p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  margin: 0 auto 12px auto !important;
  text-align: center !important;
  max-width: 760px !important;
}

.pkp_footer_content a,
.pkp_structure_footer a,
.ijrhsc-footer a {
  color: var(--ijr-light-green) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.pkp_footer_content a:hover,
.pkp_structure_footer a:hover,
.ijrhsc-footer a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

.pkp_brand_footer,
.ijrhsc-footer-bottom {
  width: 100% !important;
  max-width: 860px !important;
  margin: 20px auto 0 auto !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
}

.pkp_brand_footer a,
.pkp_brand_footer img {
  display: inline-block !important;
  margin: 0 auto !important;
  max-height: 32px !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease;
}

.pkp_brand_footer a:hover img {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   8. BULLETPROOF MOBILE HEADER & RELIABLE MENU TOGGLER (≤ 991px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

  /* Reset header container heights to prevent any vertical cutoff */
  header.pkp_structure_head,
  .pkp_structure_head,
  #headerNavigationContainer,
  .pkp_head_wrapper,
  .pkp_site_name_wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Brand Container: Column Layout with Order */
  .pkp_site_name_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 16px 16px 14px 16px !important;
    background: transparent !important;
    position: static !important;
  }

  /* Logo & Title ALWAYS FIRST at top (order: 1) */
  .pkp_site_name {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pkp_site_name a,
  .pkp_site_name a.is_img,
  .pkp_site_name a.is_text,
  .ijrhsc-brand-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    float: none !important;
  }

  /* Logo Image - Visible & No overlap */
  .pkp_site_name a img,
  .pkp_site_name a.is_img img,
  .ijrhsc-logo-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 54px !important;
    max-width: 72px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: static !important;
    float: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  }

  /* Title Text - Clean 2 lines on dark overlay */
  .pkp_site_name a.is_img::after {
    content: "International Journal for Research in Health and Social Care" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    font-family: var(--ijr-font-heading) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #FFFFFF !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  .pkp_site_name a.is_text,
  .ijrhsc-journal-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    font-family: var(--ijr-font-heading) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #FFFFFF !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  /* Hamburger Toggle ALWAYS SECOND below title (order: 2) */
  .pkp_site_nav_toggle,
  button.pkp_site_nav_toggle,
  .ijrhsc-toggler {
    order: 2 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    background: rgba(11, 58, 91, 0.95) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: var(--ijr-radius-sm) !important;
    color: #FFFFFF !important;
    font-family: var(--ijr-font-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    margin: 10px 0 0 0 !important;
    padding: 0 16px !important;
    float: none !important;
    z-index: 100 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease !important;
    outline: none !important;
  }

  .pkp_site_nav_toggle:hover,
  .pkp_site_nav_toggle:focus {
    background: rgba(13, 110, 140, 0.98) !important;
    border-color: var(--ijr-teal) !important;
    color: #FFFFFF !important;
  }

  /* Reset default PKP hidden text / clipped span on toggle button */
  .pkp_site_nav_toggle span {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
  }

  .pkp_site_nav_toggle:not(.pkp_site_nav_toggle--transform):not(.is_active):not(.open) span::before {
    content: "☰" !important;
    font-size: 18px !important;
    margin-right: 6px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    display: inline-block !important;
  }

  .pkp_site_nav_toggle:not(.pkp_site_nav_toggle--transform):not(.is_active):not(.open) span::after {
    display: none !important;
  }

  /* Active / Transformed (Opened) Toggle Button */
  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform,
  .pkp_site_nav_toggle.is_active,
  .pkp_site_nav_toggle.open {
    background: #0D6E8C !important;
    border-color: var(--ijr-teal) !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.4) !important;
  }

  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform span,
  .pkp_site_nav_toggle.is_active span,
  .pkp_site_nav_toggle.open span {
    border: none !important;
  }

  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform span::before,
  .pkp_site_nav_toggle.is_active span::before,
  .pkp_site_nav_toggle.open span::before {
    content: "✕" !important;
    font-size: 18px !important;
    margin-right: 6px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: none !important;
    display: inline-block !important;
  }

  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform span::after,
  .pkp_site_nav_toggle.is_active span::after,
  .pkp_site_nav_toggle.open span::after {
    display: none !important;
  }

  /* Closed Nav Menu */
  .pkp_site_nav_menu:not(.is_open):not(.open):not(.active):not(.pkp_site_nav_menu--isOpen):not(.ijrhsc-nav-open),
  .ijrhsc-nav-bar:not(.is_open):not(.open):not(.active):not(.pkp_site_nav_menu--isOpen):not(.ijrhsc-nav-open) {
    display: none !important;
  }

  /* Fully Functional Open Nav Menu Drawer */
  .pkp_site_nav_menu.is_open,
  .pkp_site_nav_menu.open,
  .pkp_site_nav_menu.active,
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen,
  .pkp_site_nav_menu.ijrhsc-nav-open,
  .pkp_site_nav_menu[aria-expanded="true"],
  .ijrhsc-nav-bar.is_open,
  .ijrhsc-nav-bar.open,
  .ijrhsc-nav-bar.active,
  .ijrhsc-nav-bar.pkp_site_nav_menu--isOpen,
  .ijrhsc-nav-bar.ijrhsc-nav-open,
  .pkp_site_nav_toggle.pkp_site_nav_toggle--transform~.pkp_site_nav_menu,
  .pkp_site_nav_toggle.is_active~.pkp_site_nav_menu,
  .pkp_site_nav_toggle.is_open~.pkp_site_nav_menu,
  .pkp_site_nav_toggle.open~.pkp_site_nav_menu,
  .pkp_site_nav_toggle[aria-expanded="true"]~.pkp_site_nav_menu,
  .pkp_structure_head.is_open .pkp_site_nav_menu,
  .pkp_head_wrapper.is_open .pkp_site_nav_menu,
  #headerNavigationContainer.is_open .pkp_site_nav_menu,
  .pkp_site_nav_menu:focus-within {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #0B3A5B !important;
    border: 1.5px solid rgba(20, 184, 166, 0.4) !important;
    border-radius: var(--ijr-radius-md) !important;
    padding: 10px 0 !important;
    margin: 10px 0 16px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
    overflow: visible !important;
  }

  /* Primary Nav Rows & Wrappers */
  .pkp_site_nav_menu .pkp_navigation_primary_row,
  .pkp_site_nav_menu .ijrhsc-nav-row,
  .pkp_site_nav_menu .pkp_navigation_primary_wrapper,
  .ijrhsc-nav-bar .pkp_navigation_primary_row,
  .ijrhsc-nav-bar .ijrhsc-nav-row,
  .ijrhsc-nav-bar .pkp_navigation_primary_wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: static !important;
  }

  /* Primary Nav List (All Menu Items) */
  ul.pkp_navigation_primary,
  ul.ijrhsc-nav,
  ul.ijrhsc-nav-list,
  #navigationPrimary {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: static !important;
    background: transparent !important;
  }

  ul.pkp_navigation_primary>li,
  ul.ijrhsc-nav>li,
  ul.ijrhsc-nav-list>li,
  #navigationPrimary>li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: static !important;
  }

  ul.pkp_navigation_primary>li:last-child,
  ul.ijrhsc-nav>li:last-child,
  #navigationPrimary>li:last-child {
    border-bottom: none !important;
  }

  /* Navigation Links - Crisp White Text with Smooth Hover */
  ul.pkp_navigation_primary>li>a,
  ul.ijrhsc-nav>li>a,
  ul.ijrhsc-nav-list>li>a,
  #navigationPrimary>li>a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 13px 18px !important;
    font-family: var(--ijr-font-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.4 !important;
    height: auto !important;
    position: static !important;
    border: none !important;
    outline: none !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  ul.pkp_navigation_primary>li>a:hover,
  ul.pkp_navigation_primary>li>a:focus,
  ul.pkp_navigation_primary>li>a:active,
  ul.ijrhsc-nav>li>a:hover,
  ul.ijrhsc-nav>li>a:focus,
  #navigationPrimary>li>a:hover {
    background: rgba(20, 184, 166, 0.25) !important;
    color: #6CC7A1 !important;
    padding-left: 24px !important;
  }

  /* Submenus on Mobile */
  ul.pkp_navigation_primary ul,
  ul.ijrhsc-nav ul,
  #navigationPrimary ul {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    list-style: none !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  ul.pkp_navigation_primary ul li,
  ul.ijrhsc-nav ul li,
  #navigationPrimary ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  ul.pkp_navigation_primary ul li a,
  ul.ijrhsc-nav ul li a,
  #navigationPrimary ul li a {
    display: block !important;
    padding: 10px 24px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: none !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
  }

  ul.pkp_navigation_primary ul li a:hover,
  ul.ijrhsc-nav ul li a:hover {
    background: var(--ijr-primary) !important;
    color: #FFFFFF !important;
    padding-left: 28px !important;
  }

  /* User Account Links on Mobile */
  .pkp_navigation_user_wrapper,
  #navigationUserWrapper {
    display: block !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 12px 16px 6px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  ul.pkp_navigation_user,
  #navigationUser {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  ul.pkp_navigation_user>li,
  #navigationUser>li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  ul.pkp_navigation_user>li>a,
  #navigationUser>li>a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    font-family: var(--ijr-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--ijr-radius-sm) !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
  }

  ul.pkp_navigation_user>li>a:hover,
  #navigationUser>li>a:hover {
    background: var(--ijr-teal) !important;
    color: #FFFFFF !important;
  }

  /* Actions (Submit Manuscript & Search on Mobile) */
  .ijrhsc-header-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .ijrhsc-submit-btn,
  #submit-manuscript-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 11px 18px !important;
    background: linear-gradient(135deg, var(--ijr-health-green) 0%, #22845c 100%) !important;
    color: #FFFFFF !important;
    font-family: var(--ijr-font-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: var(--ijr-radius-sm) !important;
    box-shadow: 0 4px 12px rgba(46, 158, 111, 0.35) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }

  .ijrhsc-search-form {
    width: 100% !important;
  }

  .ijrhsc-search-inner {
    width: 100% !important;
    display: flex !important;
  }

  .ijrhsc-search-input {
    width: 100% !important;
  }

  /* Content & Sidebar Mobile Stack */
  .pkp_structure_content,
  .pkp_structure_content.has_sidebar {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    margin: 16px auto !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .pkp_structure_content.has_sidebar .pkp_structure_main,
  .pkp_structure_main {
    width: 100% !important;
    padding: 20px 16px !important;
  }

  .pkp_structure_content.has_sidebar .pkp_structure_sidebar,
  .pkp_structure_sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin: 0 !important;
  }

  .pkp_block,
  .block_custom,
  .custom_block {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
  }

  .page table,
  .additional_content table,
  .pkp_structure_main table,
  .pkp_structure_sidebar table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   9. SMALL SMARTPHONES (MAX-WIDTH: 640px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  .pkp_site_name_wrapper {
    padding: 14px 12px 12px 12px !important;
  }

  .pkp_site_name a.is_img::after,
  .pkp_site_name a.is_text {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
  }

  .pkp_site_name a img,
  .ijrhsc-logo-img {
    max-height: 44px !important;
    max-width: 55px !important;
  }

  .pkp_search input[type="text"],
  .ijrhsc-search-input {
    width: 100% !important;
  }

  .pkp_structure_content,
  .pkp_structure_content.has_sidebar {
    padding: 12px !important;
    margin: 10px auto !important;
  }

  .pkp_structure_main {
    padding: 16px 14px !important;
  }

  .pkp_footer_content {
    font-size: 13.5px !important;
  }
}