/**
 * Luminous Immersion - Child Theme Styles
 * Extends Immersion theme with reactive 3D hero
 *
 * @author RC3ID - Universitas Padjadjaran
 * @version 1.0.0
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES
   ============================================================================= */

:root {
  /* RC3ID Brand Colors */
  --luminous-primary: #BD272D;
  --luminous-primary-light: #E04048;
  --luminous-primary-dark: #9A1F24;
  --luminous-secondary: #d4af37;
  --luminous-accent: #FF6B6B;
  --luminous-bg-dark: #0a0a0a;
  --luminous-bg-darker: #050505;
  --luminous-text-light: #ffffff;
  --luminous-text-muted: #b0b0b0;
  --luminous-glow: 0 0 20px rgba(189, 39, 45, 0.4);
  --luminous-transition: 300ms ease;
}

/* =============================================================================
   HIDE ORIGINAL IMMERSION HEADER ON HOMEPAGE
   ============================================================================= */

/* HIDE all OJS navigation and headers on homepage */
body.page_index .pkp_structure_head,
body.page_index .siteNav,
body.page_index header.header,
body.page_index header.main-header,
body.page_index .pkp_navigation_primary,
body.page_index .pkp_navigation_user,
body.page_index .pkp_site_name,
body.page_index .cmp_skip_to_content {
  display: none !important;
  visibility: hidden !important;
}

/* Hide the floating journal title box */
body.page_index .immersion-header-image,
body.page_index .page_index_journal .homepage_image {
  display: none !important;
}

/* Make the header background transparent on homepage */
body.page_index .pkp_structure_head .pkp_head_wrapper,
body.page_index .headerImg {
  background: transparent !important;
}

/* Hide the journal title in header (we show it in hero) */
body.page_index .pkp_site_name {
  opacity: 0;
  pointer-events: none;
}

/* Style navigation links for visibility on dark hero */
body.page_index .pkp_navigation_primary a,
body.page_index .pkp_navigation_user a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.page_index .pkp_navigation_primary a:hover,
body.page_index .pkp_navigation_user a:hover {
  color: var(--luminous-accent) !important;
}

/* Navigation buttons on homepage */
body.page_index .pkp_navigation_primary .pkp_nav_list li a {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.page_index .pkp_navigation_primary .pkp_nav_list li a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* =============================================================================
   REACTIVE HERO SECTION - FULL SCREEN
   ============================================================================= */

.luminous-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  background: linear-gradient(135deg, var(--luminous-bg-darker) 0%, var(--luminous-bg-dark) 50%, #111936 100%);
  overflow: hidden;
  margin-top: 0;
}

/* Split Layout - Left Side (Visual) */
.luminous-hero-visual {
  position: relative;
  flex: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luminous-hero-visual #luminous-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Floating Title on Canvas */
.floating-title {
  position: relative;
  z-index: 10;
  text-align: left;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.floating-title h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.floating-title h1 .line1,
.floating-title h1 .line2 {
  display: block;
}

.floating-title h1 .and {
  font-style: italic;
  opacity: 0.8;
}

.floating-title .rc3id-logo {
  height: 80px;
  width: auto;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

.luminous-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(79, 125, 243, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(100, 255, 218, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

#luminous-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Split Layout - Right Side (Content) */
.luminous-hero-content {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 4rem 3rem;
  max-width: 500px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.luminous-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--luminous-primary-light);
  margin-bottom: 1rem;
}

.luminous-hero-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--luminous-text-light);
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.luminous-hero-content h2 .highlight {
  background: linear-gradient(135deg, var(--luminous-primary-light), var(--luminous-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.luminous-hero-content h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--luminous-text-light);
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.luminous-hero-content h1 .highlight {
  background: linear-gradient(135deg, var(--luminous-primary-light), var(--luminous-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.luminous-hero-content .tagline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--luminous-text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.8;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Feature List - CRITICAL: constrains SVG icons */
.luminous-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.luminous-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--luminous-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
}

.luminous-features li svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex-shrink: 0 !important;
  color: var(--luminous-accent);
  margin-top: 2px;
}

.luminous-features li strong {
  color: var(--luminous-text-light);
}

/* CTA Button Group */
.luminous-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.luminous-cta-primary {
  background: linear-gradient(135deg, var(--luminous-primary), var(--luminous-primary-dark));
}

.luminous-cta-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.luminous-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Stats Section */
.luminous-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.luminous-stat {
  text-align: center;
}

.luminous-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--luminous-text-light);
}

.luminous-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--luminous-text-muted);
  margin-top: 0.25rem;
}

.luminous-hero-badges {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.luminous-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  color: var(--luminous-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--luminous-transition);
}

.luminous-badge:hover {
  background: rgba(79, 125, 243, 0.2);
  border-color: rgba(79, 125, 243, 0.4);
  color: var(--luminous-text-light);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.luminous-badge svg {
  width: 18px;
  height: 18px;
  color: var(--luminous-secondary);
}

.luminous-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 2.5rem;
  background: linear-gradient(135deg, var(--luminous-primary), var(--luminous-primary-dark));
  color: var(--luminous-text-light) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--luminous-transition);
  box-shadow: var(--luminous-glow), 0 10px 40px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
}

.luminous-cta:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 50px rgba(79, 125, 243, 0.6), 0 20px 50px rgba(0, 0, 0, 0.4);
}

.luminous-cta svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex-shrink: 0 !important;
  transition: transform var(--luminous-transition);
}

.luminous-cta:hover svg {
  transform: translateX(6px);
}

.luminous-scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--luminous-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.7;
  animation: luminous-float 3s ease-in-out infinite;
}

.luminous-scroll-indicator::after {
  content: '';
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--luminous-primary), transparent);
}

@keyframes luminous-float {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
  50% { transform: translateX(-50%) translateY(-10px); opacity: 1; }
}

/* =============================================================================
   RECENT ARTICLES CAROUSEL
   ============================================================================= */

.luminous-recent-articles {
  background: #0a0a0a;
  padding: 80px 40px;
}

.luminous-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.luminous-section-header h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.luminous-section-header p {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  color: var(--luminous-text-muted);
  margin: 0;
}

.articles-carousel-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.carousel-nav {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  cursor: pointer;
/* Full width container for 3x2 grid */
body .luminous-recent-articles .articles-carousel-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.carousel-nav:hover:not(.disabled) {
  background: var(--luminous-primary);
  border-color: var(--luminous-primary);
}

.carousel-nav.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-nav svg {
  width: 24px !important;
  height: 24px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-track {
  flex: 1;
  display: flex;
  overflow: hidden;
  transition: transform 0.5s ease;
}

/* Track - full width with smooth transition */
body .luminous-recent-articles .carousel-track {
  display: flex !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.carousel-set {
  flex: 0 0 100% !important;
  width: 100% !important;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  min-height: calc(100vh - 100px);
  padding: 20px 40px;
  box-sizing: border-box;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .carousel-set {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .carousel-set {
    grid-template-columns: 1fr;
  }

  .carousel-nav {
    display: none;
  }
}

/* Article Card */
.luminous-article-card {
  background: #151515;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.luminous-article-card:hover {
  transform: translateY(-4px);
  border-color: var(--luminous-primary);
/* Larger cards for 3x2 grid */
body .luminous-recent-articles .article-card,
body .luminous-recent-articles .luminous-article-card {
  height: auto !important;
  min-height: 280px !important;
  aspect-ratio: auto !important;
}
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.luminous-article-card .card-image {
  height: 120px;
  background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
  background-size: cover;
  background-position: center;
}

.luminous-article-card .card-content {
  padding: 20px;
}

.luminous-article-card .card-category {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--luminous-primary);
  margin-bottom: 8px;
}

.luminous-article-card .card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.luminous-article-card .card-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.luminous-article-card .card-title a:hover {
  color: var(--luminous-primary-light);
}

.luminous-article-card .card-abstract {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--luminous-text-muted);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.luminous-article-card .card-authors {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--luminous-text-muted);
  margin: 0;
}

/* Skeleton Placeholder Card */
.luminous-article-card.skeleton {
  background: #151515;
}

.luminous-article-card.skeleton .card-content {
  padding: 24px;
}

.skeleton-title,
.skeleton-text {
  background: linear-gradient(90deg, #252525 25%, #303030 50%, #252525 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-title {
  height: 20px;
  width: 80%;
  margin-bottom: 12px;
}

.skeleton-text {
  height: 14px;
  width: 60%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   SUBMISSION GUIDELINES SECTION
   ============================================================================= */

.luminous-submission-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
  padding: 80px 40px;
}

.luminous-guidelines-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 48px;
}

@media (max-width: 1024px) {
  .luminous-guidelines-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .luminous-guidelines-grid {
    grid-template-columns: 1fr;
  }
}

.luminous-guideline-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.luminous-guideline-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--luminous-primary);
  transform: translateY(-4px);
}

.luminous-guideline-card .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background: rgba(189, 39, 45, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luminous-guideline-card .icon svg {
  width: 28px !important;
  height: 28px !important;
  color: var(--luminous-primary);
}

.luminous-guideline-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.luminous-guideline-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--luminous-text-muted);
  line-height: 1.6;
  margin: 0;
}

.luminous-submission-cta {
  text-align: center;
}

/* =============================================================================
   TYPOGRAPHY ENHANCEMENTS
   ============================================================================= */

.page .page_title,
.page h1 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* =============================================================================
   ENHANCED ARTICLE CARDS
   ============================================================================= */

.obj_article_summary {
  transition: all var(--luminous-transition);
  border-radius: 12px;
}

.obj_article_summary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.obj_article_summary .title a {
  font-family: 'Playfair Display', Georgia, serif;
  transition: color var(--luminous-transition);
}

.obj_article_summary .title a:hover {
  color: var(--luminous-primary);
}

/* =============================================================================
   BUTTON ENHANCEMENTS
   ============================================================================= */

.cmp_button,
.pkp_button,
button[type="submit"],
input[type="submit"] {
  transition: all var(--luminous-transition);
  border-radius: 8px;
}

.cmp_button:hover,
.pkp_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* PDF/Download buttons */
.obj_galley_link {
  transition: all var(--luminous-transition);
  border-radius: 8px;
}

.obj_galley_link:hover {
  transform: translateY(-2px);
  box-shadow: var(--luminous-glow);
}

/* =============================================================================
   NAVIGATION ENHANCEMENTS
   ============================================================================= */

.pkp_navigation_primary a {
  transition: all var(--luminous-transition);
}

.pkp_navigation_primary a:hover {
  color: var(--luminous-primary) !important;
}

/* =============================================================================
   FOOTER - MODERN DESIGN
   ============================================================================= */

.pkp_structure_footer_wrapper {
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 !important;
}

.pkp_structure_footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 2rem 3rem;
}

/* Hide default OJS footer content */
.pkp_structure_footer .pkp_footer_content {
  display: none;
}

/* Custom CETID Footer */
.cetid-footer {
  color: #ffffff;
}

.cetid-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

@media (max-width: 768px) {
  .cetid-footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Brand Section */
.cetid-footer-brand h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #a8b2d1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cetid-footer-brand .cetid-footer-tagline {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 400px;
}

.cetid-footer-brand .cetid-publisher {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cetid-footer-brand .cetid-publisher-name {
  color: #9ca3af;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.cetid-footer-brand .cetid-university {
  color: #6b7280;
  font-size: 0.85rem;
}

/* Footer Links Sections */
.cetid-footer-section h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--luminous-primary, #4f7df3);
  margin-bottom: 1.5rem;
}

.cetid-footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cetid-footer-section li {
  margin-bottom: 1rem;
}

.cetid-footer-section a {
  color: #9ca3af;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cetid-footer-section a:hover {
  color: #ffffff;
}

.cetid-footer-section a svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Footer Bottom Bar */
.cetid-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cetid-footer-copyright {
  color: #4b5563;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cetid-footer-badges {
  display: flex;
  gap: 0.75rem;
}

.cetid-footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.cetid-footer-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

/* Email link style */
.cetid-footer-email {
  color: var(--luminous-primary, #4f7df3) !important;
}

.cetid-footer-email:hover {
  color: var(--luminous-accent, #64ffda) !important;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 1024px) {
  .luminous-hero {
    flex-direction: column;
  }

  .luminous-hero-visual {
    flex: none;
    min-height: 50vh;
  }

  .luminous-hero-content {
    flex: none;
    max-width: 100%;
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .luminous-hero {
    min-height: auto;
    flex-direction: column;
  }

  .luminous-hero-visual {
    min-height: 60vh;
  }

  .luminous-hero-content {
    padding: 1.5rem;
  }

  .floating-title h1 {
    font-size: 1.5rem;
  }

  .luminous-hero-content h2 {
    font-size: 1.3rem;
  }

  .luminous-hero-badges {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .luminous-cta-group {
    flex-direction: column;
  }

  .luminous-cta {
    width: 100%;
    justify-content: center;
  }

  .luminous-stats {
    gap: 1rem;
  }

  .luminous-stat-value {
    font-size: 1.2rem;
  }

  .luminous-scroll-indicator {
    display: none;
  }

  body.page_index .pkp_structure_head,
  body.page_index header.main-header {
    position: fixed !important;
  }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  .luminous-hero,
  #luminous-canvas {
    display: none !important;
  }
}

/* =============================================================================
   HIDE OJS DEFAULT FOOTER SECTIONS ON HOMEPAGE
   ============================================================================= */

/* Hide Information section (For Readers, For Authors, For Librarians) */
body.page_index .pkp_block_information,
body.page_index .block_information,
body.page_index [class*="information"],
body.page_index footer .information {
  display: none !important;
}

/* Hide Browse/Categories section */
body.page_index .pkp_block_browse,
body.page_index .block_browse,
body.page_index [class*="browse"],
body.page_index footer .browse,
body.page_index .categories,
body.page_index [class*="categories"] {
  display: none !important;
}

/* Hide specific footer links */
body.page_index footer a[href*="/information/readers"],
body.page_index footer a[href*="/information/authors"],
body.page_index footer a[href*="/information/librarians"],
body.page_index footer a[href*="/issue/archive-DISABLED"] {
  display: none !important;
}

/* Hide entire sidebar blocks on homepage */
body.page_index .pkp_block,
body.page_index .sidebar,
body.page_index aside {
  display: none !important;
}

/* Target the footer columns that contain these sections */
body.page_index .footer-info-section,
body.page_index footer .col:has(a[href*="information"]),
body.page_index footer div:has(> h4:contains("Information")),
body.page_index footer div:has(> h4:contains("Browse")) {
  display: none !important;
}

/* More aggressive footer hiding for homepage */
body.page_index .pkp_structure_footer .pkp_footer_content > div:not(:first-child) {
  display: none !important;
}

/* Hide footer nav lists with these specific items */
body.page_index footer nav,
body.page_index footer ul:has(a[href*="readers"]),
body.page_index footer ul:has(a[href*="authors"]),
body.page_index footer ul:has(a[href*="librarians"]) {
  display: none !important;
}

/* =============================================================================
   RECENT ARTICLES - FULL WIDTH DARK SECTION
   ============================================================================= */

/* Full-width container */
.luminous-recent-articles {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background: #111111 !important;
  padding: 80px 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Inner content wrapper */
.luminous-recent-articles .carousel-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
  position: relative !important;
}

/* Section header */
.luminous-recent-articles .section-header {
  text-align: center !important;
  margin-bottom: 50px !important;
}

.luminous-recent-articles .section-header h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #ffffff !important;
  margin: 0 0 15px 0 !important;
}

.luminous-recent-articles .section-header p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1rem !important;
  color: #888888 !important;
  margin: 0 !important;
}

/* Carousel track - 3x2 grid */
.luminous-recent-articles .carousel-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(2, auto) !important;
  gap: 24px !important;
}

/* Article cards */
.luminous-recent-articles .luminous-article-card {
  background: #1a1a1a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.luminous-recent-articles .luminous-article-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Card image area */
.luminous-recent-articles .card-image {
  width: 100% !important;
  height: 160px !important;
  background: #2a2a2a !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Card content */
.luminous-recent-articles .card-content {
  padding: 20px !important;
}

/* Skeleton placeholder lines */
.luminous-recent-articles .skeleton-line {
  height: 14px !important;
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}

.luminous-recent-articles .skeleton-line:last-child {
  width: 70% !important;
  margin-bottom: 0 !important;
}

.luminous-recent-articles .skeleton-line.short {
  width: 60% !important;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Card title */
.luminous-recent-articles .card-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
}

.luminous-recent-articles .card-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.luminous-recent-articles .card-title a:hover {
  color: var(--luminous-primary, #BD272D) !important;
}

/* Card abstract */
.luminous-recent-articles .card-abstract {
  font-size: 0.875rem !important;
  color: #888888 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Navigation arrows */
.luminous-recent-articles .carousel-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.luminous-recent-articles .carousel-nav:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.luminous-recent-articles .carousel-nav.prev {
  left: 10px !important;
}

.luminous-recent-articles .carousel-nav.next {
  right: 10px !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, auto) !important;
  }
  
  .luminous-recent-articles .carousel-container {
    padding: 0 40px !important;
  }
}

@media (max-width: 640px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  
  .luminous-recent-articles {
    padding: 60px 0 !important;
  }
  
  .luminous-recent-articles .carousel-container {
    padding: 0 20px !important;
  }
  
  .luminous-recent-articles .section-header h2 {
    font-size: 2rem !important;
  }
}

/* =============================================================================
   RECENT ARTICLES CARDS - LARGER WITH IMAGE AREA
   ============================================================================= */

/* Override card styles for larger appearance */
.luminous-recent-articles .luminous-article-card {
  background: #1a1a1a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  min-height: 240px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card image area - visible placeholder */
.luminous-recent-articles .luminous-article-card .card-image {
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  background: #2a2a2a !important;
  flex-shrink: 0 !important;
}

/* Card content area */
.luminous-recent-articles .luminous-article-card .card-content {
  padding: 16px 20px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Skeleton lines - larger and more visible */
.luminous-recent-articles .skeleton-line {
  height: 12px !important;
  background: #444444 !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

.luminous-recent-articles .skeleton-line.short {
  width: 65% !important;
  margin-bottom: 0 !important;
}

/* Carousel container - ensure full width and proper padding */
.luminous-recent-articles .carousel-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 80px !important;
  position: relative !important;
}

/* Section header styling */
.luminous-recent-articles .section-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.luminous-recent-articles .section-header h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.5rem !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
}

.luminous-recent-articles .section-header p {
  font-size: 1rem !important;
  color: #777777 !important;
  margin: 0 !important;
}

/* Carousel track - 3 columns */
.luminous-recent-articles .carousel-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* Navigation buttons positioning */
.luminous-recent-articles .carousel-nav {
  position: absolute !important;
  top: 55% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.luminous-recent-articles .carousel-nav svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
}

.luminous-recent-articles .carousel-nav.prev {
  left: 20px !important;
}

.luminous-recent-articles .carousel-nav.next {
  right: 20px !important;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .luminous-recent-articles .carousel-container {
    padding: 0 50px !important;
  }
}

@media (max-width: 600px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: 1fr !important;
  }
  
  .luminous-recent-articles .section-header h2 {
    font-size: 1.8rem !important;
  }
}

/* =============================================================================
   FIX: RECENT ARTICLES - FULL WIDTH CARDS
   ============================================================================= */

/* Main section - full viewport width */
.luminous-recent-articles {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background: #111111 !important;
  padding: 60px 0 80px !important;
}

/* Carousel container - wider */
.luminous-recent-articles .carousel-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Grid track - full width */
.luminous-recent-articles .carousel-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Cards - fill grid cells */
.luminous-recent-articles .luminous-article-card {
  width: 100% !important;
  min-height: 220px !important;
  background: #1e1e1e !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #2a2a2a !important;
}

/* Image area */
.luminous-recent-articles .card-image {
  width: 100% !important;
  height: 120px !important;
  background: #2a2a2a !important;
  flex-shrink: 0 !important;
}

/* Content area */
.luminous-recent-articles .card-content {
  padding: 16px !important;
  flex: 1 !important;
}

/* Skeleton text lines */
.luminous-recent-articles .skeleton-line {
  height: 10px !important;
  background: #3a3a3a !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}

.luminous-recent-articles .skeleton-line.short {
  width: 60% !important;
}

/* Navigation arrows - positioned outside cards */
.luminous-recent-articles .carousel-nav.prev {
  left: 15px !important;
}

.luminous-recent-articles .carousel-nav.next {
  right: 15px !important;
}

/* Responsive - 2 columns on tablet */
@media (max-width: 992px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .luminous-recent-articles .carousel-container {
    padding: 0 40px !important;
  }
}

/* Responsive - 1 column on mobile */
@media (max-width: 576px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: 1fr !important;
  }
  .luminous-recent-articles .carousel-container {
    padding: 0 20px !important;
  }
}

/* =============================================================================
   FINAL FIX: TARGET ACTUAL CLASS NAMES
   ============================================================================= */

/* Section header - actual class name */
.luminous-recent-articles .luminous-section-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.luminous-recent-articles .luminous-section-header h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.5rem !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
}

.luminous-recent-articles .luminous-section-header p {
  font-size: 1rem !important;
  color: #777777 !important;
  margin: 0 !important;
}

/* Container - actual class name */
.luminous-recent-articles .articles-carousel-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
  position: relative !important;
}

/* Grid - remove carousel-set wrapper styling issues */
.luminous-recent-articles .carousel-set {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, 1fr) !important; gap: 16px !important; min-height: calc(100vh - 150px) !important; padding: 20px 40px !important;
}

/* Track as grid */
.luminous-recent-articles .carousel-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* Cards - bigger with visible structure */
.luminous-recent-articles .luminous-article-card {
  background: #1e1e1e !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Add pseudo-element for image placeholder area */
.luminous-recent-articles .luminous-article-card::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 120px !important;
  background: #2a2a2a !important;
  flex-shrink: 0 !important;
}

/* Card content */
.luminous-recent-articles .luminous-article-card .card-content {
  padding: 16px 20px 20px !important;
  flex: 1 !important;
}

/* Skeleton title and text */
.luminous-recent-articles .skeleton-title,
.luminous-recent-articles .skeleton-text {
  height: 12px !important;
  background: #3a3a3a !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}

.luminous-recent-articles .skeleton-title {
  width: 90% !important;
}

.luminous-recent-articles .skeleton-text {
  width: 65% !important;
  margin-bottom: 0 !important;
}

/* Navigation positioning */
.luminous-recent-articles .carousel-nav {
  position: absolute !important;
  top: 55% !important;
  z-index: 10 !important;
}

.luminous-recent-articles .carousel-nav.prev {
  left: 10px !important;
}

.luminous-recent-articles .carousel-nav.next {
  right: 10px !important;
}

/* Responsive */
@media (max-width: 900px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================================
   RECENT ARTICLES - FULL SCREEN GRID LIKE LUMINA FESTIVAL
   ============================================================================= */

/* Hide old section header */
.luminous-recent-articles .luminous-section-header {
  display: none !important;
}

/* Full viewport width section */
.luminous-recent-articles {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background: #0a0a0a !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Container - no padding, full width */
.luminous-recent-articles .articles-carousel-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide navigation arrows */
.luminous-recent-articles .carousel-nav {
  display: none !important;
}

/* Grid - 3 columns, edge to edge */
.luminous-recent-articles .carousel-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  width: 100% !important;
}

/* Carousel set - display contents */
.luminous-recent-articles .carousel-set {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, 1fr) !important; gap: 16px !important; min-height: calc(100vh - 150px) !important; padding: 20px 40px !important;
}

/* Remove ::before pseudo element */
.luminous-recent-articles .luminous-article-card::before {
  display: none !important;
}

/* Cards - Large hero-style tiles */
.luminous-recent-articles .luminous-article-card {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  min-height: 280px !important;
  background: #1a1a1a !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  display: block !important;
}

/* Background image placeholder */
.luminous-recent-articles .luminous-article-card .card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%) !important;
}

/* Title - large, bottom positioned */
.luminous-recent-articles .skeleton-title,
.luminous-recent-articles .card-title {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 30px !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* Hide skeleton text, show as category badge */
.luminous-recent-articles .skeleton-text {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  width: auto !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 4px !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #ffffff !important;
  height: auto !important;
}

.luminous-recent-articles .skeleton-text::before {
  content: 'ARTICLE' !important;
}

/* Hover effect - show abstract overlay */
.luminous-recent-articles .luminous-article-card::after {
  content: 'Click to read this research article on clinical epidemiology and infectious diseases.' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(189, 39, 45, 0.95) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.luminous-recent-articles .luminous-article-card:hover::after {
  opacity: 1 !important;
}

/* Card hover scale effect */
.luminous-recent-articles .luminous-article-card:hover {
  z-index: 10 !important;
}

/* Responsive - 2 columns on tablet */
@media (max-width: 1024px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .luminous-recent-articles .luminous-article-card {
    height: 240px !important;
    min-height: 240px !important;
  }
  
  .luminous-recent-articles .skeleton-title {
    font-size: 1.4rem !important;
    padding: 24px !important;
  }
}

/* Responsive - 1 column on mobile */
@media (max-width: 640px) {
  .luminous-recent-articles .carousel-track {
    grid-template-columns: 1fr !important;
  }
  
  .luminous-recent-articles .luminous-article-card {
    height: 200px !important;
    min-height: 200px !important;
  }
  
  .luminous-recent-articles .skeleton-title {
    font-size: 1.2rem !important;
    padding: 20px !important;
  }
}

/* =============================================================================
   ADD PLACEHOLDER TITLES AT BOTTOM OF CARDS
   ============================================================================= */

/* Position skeleton-title at bottom */
.luminous-recent-articles .skeleton-title {
  position: absolute !important;
  bottom: 30px !important;
  left: 30px !important;
  right: 30px !important;
  background: transparent !important;
  height: auto !important;
  width: auto !important;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Add placeholder title text */
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(1) .skeleton-title::before {
  content: 'COMING SOON' !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(2) .skeleton-title::before {
  content: 'RESEARCH' !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(3) .skeleton-title::before {
  content: 'CLINICAL' !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(4) .skeleton-title::before {
  content: 'EPIDEMIOLOGY' !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(5) .skeleton-title::before {
  content: 'INFECTIOUS' !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(6) .skeleton-title::before {
  content: 'DISEASE' !important;
}

/* Different background gradients for visual variety */
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(1) {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(2) {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%) !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(3) {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f2027 100%) !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(4) {
  background: linear-gradient(135deg, #3d1c3a 0%, #1a0a19 100%) !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(5) {
  background: linear-gradient(135deg, #1f4037 0%, #0d1f1a 100%) !important;
}
.luminous-recent-articles .carousel-set .luminous-article-card:nth-child(6) {
  background: linear-gradient(135deg, #3a1c1c 0%, #1a0a0a 100%) !important;
}

/* Ensure hover overlay covers everything */
.luminous-recent-articles .luminous-article-card:hover .skeleton-title,
.luminous-recent-articles .luminous-article-card:hover .skeleton-text {
  opacity: 0 !important;
}

/* =============================================================================
   MAKE CARDS EVEN TALLER - MATCH LUMINA REFERENCE
   ============================================================================= */

.luminous-recent-articles .luminous-article-card {
  height: 320px !important;
  min-height: 320px !important;
}

/* Bigger title text */
.luminous-recent-articles .skeleton-title {
  font-size: 1.8rem !important;
  bottom: 35px !important;
  left: 35px !important;
}

/* Responsive heights */
@media (max-width: 1024px) {
  .luminous-recent-articles .luminous-article-card {
    height: 280px !important;
    min-height: 280px !important;
  }
}

@media (max-width: 640px) {
  .luminous-recent-articles .luminous-article-card {
    height: 220px !important;
    min-height: 220px !important;
  }
}

/* =============================================================================
   FIX: White navigation text on inside pages (non-homepage)
   ============================================================================= */

/* Main navigation links - white text on dark header */
.main-header__nav a,
.main-header__nav .nav-link,
.pkp_navigation_primary a,
.pkp_navigation_primary .nav-link {
  color: #fff !important;
}

.main-header__nav a:hover,
.main-header__nav .nav-link:hover,
.pkp_navigation_primary a:hover,
.pkp_navigation_primary .nav-link:hover {
  color: rgba(255,255,255,0.8) !important;
}

/* Dropdown menus on inside pages */
.main-header__nav .dropdown-menu,
.main-header__nav .nav-dropdown,
.pkp_navigation_primary .dropdown-menu {
  background: #1a1a1a !important;
}

.main-header__nav .dropdown-menu a,
.main-header__nav .nav-dropdown a,
.pkp_navigation_primary .dropdown-menu a {
  color: #fff !important;
}

.main-header__nav .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* User navigation on inside pages */
.main-header__admin a,
.main-header__admin-link {
  color: #fff !important;
}

/* =============================================================================
   LUMINOUS IMMERSION THEME v3.0.0
   Clean implementation - All previous conflicting rules are overridden
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. LOGIN/REGISTER BUTTONS - Top Right
   ----------------------------------------------------------------------------- */

/* Show parent elements on homepage */
body.page_index header.main-header {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: auto !important;
  background: transparent !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  padding: 15px 20px !important;
}

body.page_index header.main-header .container-fluid {
  display: block !important;
  visibility: visible !important;
  background: transparent !important;
  padding: 0 !important;
  pointer-events: none !important;
}

body.page_index header.main-header .main-header__admin {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  gap: 10px !important;
}

/* Hide everything except user navigation on homepage header */
body.page_index header.main-header .main-header__logo,
body.page_index header.main-header .main-header__nav,
body.page_index header.main-header .main-header__title,
body.page_index header.main-header .pkp_site_name,
body.page_index header.main-header h1,
body.page_index header.main-header > .container-fluid > *:not(.main-header__admin) {
  display: none !important;
}

/* User navigation container */
body.page_index .pkp_navigation_user {
  display: flex !important;
  visibility: visible !important;
  position: static !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

/* All navigation items */
body.page_index .pkp_navigation_user li {
  display: inline-block !important;
  visibility: visible !important;
  margin: 0 !important;
}

/* All navigation links - base style */
body.page_index .pkp_navigation_user li a,
body.page_index .pkp_navigation_user a,
body.page_index .main-header__admin a,
body.page_index .main-header__admin-link {
  display: inline-block !important;
  visibility: visible !important;
  padding: 8px 16px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
  color: #fff !important;
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

body.page_index .pkp_navigation_user li a:hover,
body.page_index .main-header__admin a:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: #fff !important;
}

/* Login button - solid red */
body.page_index .pkp_navigation_user li.nmi_type_user_login a {
  background: #BD272D !important;
  border-color: #BD272D !important;
}

body.page_index .pkp_navigation_user li.nmi_type_user_login a:hover {
  background: #a02025 !important;
  border-color: #a02025 !important;
}

/* Dashboard button when logged in - solid red */
body.page_index .pkp_navigation_user li.nmi_type_user_dashboard a {
  background: #BD272D !important;
  border-color: #BD272D !important;
}

body.page_index .pkp_navigation_user li.nmi_type_user_dashboard a:hover {
  background: #a02025 !important;
  border-color: #a02025 !important;
}

/* -----------------------------------------------------------------------------
   2. INSIDE PAGES - Navigation Fix
   ----------------------------------------------------------------------------- */

/* White navigation text on dark header for inside pages */
.main-header__nav a,
.main-header__nav .nav-link,
.pkp_navigation_primary a {
  color: #fff !important;
}

.main-header__nav a:hover,
.pkp_navigation_primary a:hover {
  color: rgba(255,255,255,0.8) !important;
}

/* User nav on inside pages */
.main-header__admin a,
.main-header__admin-link,
.pkp_navigation_user a {
  color: #fff !important;
}

/* Dropdown menus */
.main-header__nav .dropdown-menu,
.pkp_navigation_primary .dropdown-menu,
.main-header__nav ul ul {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}

.main-header__nav .dropdown-menu a,
.pkp_navigation_primary .dropdown-menu a {
  color: #fff !important;
}

.main-header__nav .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* -----------------------------------------------------------------------------
   3. FOOTER - Black Background
   ----------------------------------------------------------------------------- */

.pkp_structure_footer_wrapper {
  background: #000000 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 3rem 2rem 2rem !important;
}

.pkp_structure_footer_wrapper * {
  color: #ffffff !important;
}

.pkp_structure_footer_wrapper a {
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.pkp_structure_footer_wrapper a:hover {
  color: #BD272D !important;
}

.pkp_structure_footer_wrapper .footer-brand h3,
.pkp_structure_footer_wrapper h3,
.pkp_structure_footer_wrapper h4 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.pkp_structure_footer_wrapper p {
  color: rgba(255,255,255,0.7) !important;
}

/* Footer badges */
.pkp_structure_footer_wrapper .badges,
.pkp_structure_footer_wrapper .footer-badges {
  opacity: 0.8 !important;
}


/* -----------------------------------------------------------------------------
   4. SUBMISSION GUIDELINES - Vertical Timeline
   ----------------------------------------------------------------------------- */

.luminous-timeline-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%) !important;
  padding: 5rem 2rem !important;
  position: relative !important;
}

.luminous-timeline-section .section-header {
  text-align: center !important;
  margin-bottom: 4rem !important;
}

.luminous-timeline-section .section-header h2 {
  color: #fff !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 1rem !important;
}

.luminous-timeline-section .section-header p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 1.1rem !important;
}

.luminous-timeline-section .timeline {
  position: relative !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding-left: 60px !important;
}

.luminous-timeline-section .timeline::before {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 0 !important;
  bottom: 60px !important;
  width: 3px !important;
  background: linear-gradient(to bottom, #BD272D 0%, #BD272D 85%, transparent 100%) !important;
  border-radius: 2px !important;
}

.luminous-timeline-section .timeline-item {
  position: relative !important;
  margin-bottom: 3rem !important;
  padding-left: 30px !important;
}

.luminous-timeline-section .timeline-marker {
  position: absolute !important;
  left: -52px !important;
  top: 5px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.luminous-timeline-section .marker-dot {
  width: 14px !important;
  height: 14px !important;
  background: #BD272D !important;
  border-radius: 50% !important;
  border: 3px solid #1a1a1a !important;
  box-shadow: 0 0 0 3px #BD272D, 0 0 20px rgba(189, 39, 45, 0.4) !important;
}

.luminous-timeline-section .timeline-content {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 1.5rem 2rem !important;
  transition: all 0.3s ease !important;
}

.luminous-timeline-section .timeline-content:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(189, 39, 45, 0.3) !important;
  transform: translateX(5px) !important;
}

.luminous-timeline-section .timeline-content h3 {
  color: #fff !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.luminous-timeline-section .timeline-content p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
}

.luminous-timeline-section .timeline-content strong {
  color: #fff !important;
}

.luminous-timeline-section .timeline-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.luminous-timeline-section .timeline-tags .tag {
  display: inline-block !important;
  padding: 6px 14px !important;
  background: rgba(189, 39, 45, 0.15) !important;
  border: 1px solid rgba(189, 39, 45, 0.4) !important;
  border-radius: 20px !important;
  color: #ff6b6b !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.luminous-timeline-section .timeline-cta {
  text-align: center !important;
  margin-top: 3rem !important;
  padding-left: 0 !important;
}

.luminous-timeline-section .timeline-cta a {
  display: inline-block !important;
  padding: 14px 32px !important;
  background: #BD272D !important;
  color: #fff !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
}

.luminous-timeline-section .timeline-cta a:hover {
  background: #a02025 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(189, 39, 45, 0.3) !important;
}


/* ==========================================================================
   LUMINOUS IMMERSION v3 - PART 3: CAROUSEL WITH GRAYSCALE HOVER EFFECTS
   ========================================================================== */

/* Carousel Container */
.luminous-recent-articles {
  position: relative !important;
  padding: 4rem 0 !important;
  overflow: hidden !important;
}

.luminous-recent-articles .articles-carousel-container {
  position: relative !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
}

/* Carousel Track - slides horizontally */
.luminous-recent-articles .carousel-track {
  display: flex !important;
  width: 300vw !important;
  position: relative !important;
  left: 0 !important;
  transition: left 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Each set contains 6 cards in 3x2 grid */
.luminous-recent-articles .carousel-set {
  width: 100vw !important;
  flex-shrink: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
}

/* Navigation Arrows */
.luminous-recent-articles .carousel-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255,255,255,0.1) !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important;
  transition: all 0.3s ease !important;
}

.luminous-recent-articles .carousel-nav:hover {
  background: rgba(189, 39, 45, 0.8) !important;
  border-color: #BD272D !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.luminous-recent-articles .carousel-nav.prev {
  left: 10px !important;
}

.luminous-recent-articles .carousel-nav.next {
  right: 10px !important;
}

.luminous-recent-articles .carousel-nav svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2 !important;
}

/* Article Cards - Grayscale by default */
.luminous-recent-articles .article-card {
  position: relative !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  filter: grayscale(100%) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  cursor: pointer !important;
  min-height: 280px !important;
}

/* Card Image Container */
.luminous-recent-articles .article-card .card-image {
  position: relative !important;
  height: 160px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
}

.luminous-recent-articles .article-card .card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

/* Card Content */
.luminous-recent-articles .article-card .card-content {
  padding: 1.25rem !important;
  position: relative !important;
}

/* Category Badge - Always visible */
.luminous-recent-articles .article-card .card-category {
  display: inline-block !important;
  padding: 6px 14px !important;
  background: rgba(189, 39, 45, 0.2) !important;
  border: 1px solid rgba(189, 39, 45, 0.4) !important;
  border-radius: 20px !important;
  color: #ff6b6b !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.75rem !important;
}

/* Card Title - Always visible */
.luminous-recent-articles .article-card .card-title {
  color: #fff !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Abstract - Hidden by default, shown on hover */
.luminous-recent-articles .article-card .card-abstract {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: all 0.4s ease !important;
}

/* HOVER EFFECTS - Color + Zoom + Show Abstract */
.luminous-recent-articles .article-card:hover {
  filter: grayscale(0%) !important;
  transform: scale(1.05) translateY(-8px) !important;
  box-shadow: 0 20px 60px rgba(189, 39, 45, 0.3), 0 10px 20px rgba(0,0,0,0.4) !important;
  border-color: rgba(189, 39, 45, 0.5) !important;
  z-index: 10 !important;
}

.luminous-recent-articles .article-card:hover .card-image img {
  transform: scale(1.1) !important;
}

.luminous-recent-articles .article-card:hover .card-abstract {
  max-height: 100px !important;
  opacity: 1 !important;
  margin-top: 0.5rem !important;
}

.luminous-recent-articles .article-card:hover .card-category {
  background: rgba(189, 39, 45, 0.4) !important;
  color: #fff !important;
}

/* Placeholder gradient backgrounds for cards */
.luminous-recent-articles .article-card[data-category="coming-soon"] .card-image {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.luminous-recent-articles .article-card[data-category="research"] .card-image {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.luminous-recent-articles .article-card[data-category="clinical"] .card-image {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.luminous-recent-articles .article-card[data-category="epidemiology"] .card-image {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}

.luminous-recent-articles .article-card[data-category="infectious"] .card-image {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}

.luminous-recent-articles .article-card[data-category="disease"] .card-image {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
}

.luminous-recent-articles .article-card[data-category="tropical"] .card-image {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
}

.luminous-recent-articles .article-card[data-category="outbreak"] .card-image {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
}

.luminous-recent-articles .article-card[data-category="vaccine"] .card-image {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%) !important;
}

.luminous-recent-articles .article-card[data-category="antimicrobial"] .card-image {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%) !important;
}

.luminous-recent-articles .article-card[data-category="surveillance"] .card-image {
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%) !important;
}

.luminous-recent-articles .article-card[data-category="public-health"] .card-image {
  background: linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%) !important;
}

/* Carousel Dots/Indicators */
.luminous-recent-articles .carousel-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 2rem !important;
}

.luminous-recent-articles .carousel-dots .dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.luminous-recent-articles .carousel-dots .dot.active {
  background: #BD272D !important;
  transform: scale(1.2) !important;
}

.luminous-recent-articles .carousel-dots .dot:hover {
  background: rgba(189, 39, 45, 0.6) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .luminous-recent-articles .carousel-set {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .luminous-recent-articles .carousel-set {
    grid-template-columns: 1fr !important;
  }

  .luminous-recent-articles .carousel-nav {
    width: 40px !important;
    height: 40px !important;
  }
}


/* ==========================================================================
   LUMINOUS IMMERSION v3 - GRAYSCALE FIX (HIGH SPECIFICITY)
   ========================================================================== */

/* Force grayscale on ALL article cards in the carousel */
body .luminous-recent-articles .article-card,
body .luminous-recent-articles .luminous-article-card,
body section.luminous-recent-articles div.article-card,
body section.luminous-recent-articles div.luminous-article-card {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Remove grayscale on hover */
body .luminous-recent-articles .article-card:hover,
body .luminous-recent-articles .luminous-article-card:hover,
body section.luminous-recent-articles div.article-card:hover,
body section.luminous-recent-articles div.luminous-article-card:hover {
  filter: grayscale(0%) !important;
  -webkit-filter: grayscale(0%) !important;
  transform: scale(1.05) translateY(-8px) !important;
  box-shadow: 0 20px 60px rgba(189, 39, 45, 0.3), 0 10px 20px rgba(0,0,0,0.4) !important;
  z-index: 10 !important;
}

/* Hide old ARTICLE badge, show category instead */
body .luminous-recent-articles .article-card .card-category,
body .luminous-recent-articles .luminous-article-card .card-category {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
}

/* Force card abstract to be hidden by default, shown on hover */
body .luminous-recent-articles .article-card .card-abstract,
body .luminous-recent-articles .luminous-article-card .card-abstract {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: all 0.4s ease !important;
}

body .luminous-recent-articles .article-card:hover .card-abstract,
body .luminous-recent-articles .luminous-article-card:hover .card-abstract {
  max-height: 100px !important;
  opacity: 1 !important;
}


/* ==========================================================================
   LUMINOUS IMMERSION v3 - CARD REDESIGN (Artist Card Style)
   ========================================================================== */

/* Override all previous card styles */
body .luminous-recent-articles .article-card,
body .luminous-recent-articles .luminous-article-card {
  position: relative !important;
  height: 400px !important;
  min-height: 400px !important;
  width: 100% !important;
  overflow: hidden !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  background: #000 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Image Background - Full bleed */
body .luminous-recent-articles .article-card .card-image,
body .luminous-recent-articles .luminous-article-card .card-image {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}

/* Image itself - grayscale by default */
body .luminous-recent-articles .article-card .card-image::before,
body .luminous-recent-articles .luminous-article-card .card-image::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: inherit !important;
  filter: grayscale(100%) !important;
  opacity: 0.6 !important;
  transform: scale(1) !important;
  transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1) !important;
  will-change: transform, filter, opacity !important;
}

/* Color overlay */
body .luminous-recent-articles .article-card .card-image::after,
body .luminous-recent-articles .luminous-article-card .card-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.3) !important;
  transition: background 0.5s ease !important;
  z-index: 2 !important;
}

/* Hover - Image colorizes and zooms */
body .luminous-recent-articles .article-card:hover .card-image::before,
body .luminous-recent-articles .luminous-article-card:hover .card-image::before {
  filter: grayscale(0%) !important;
  opacity: 0.9 !important;
  transform: scale(1.05) !important;
}

/* Hover - Overlay changes to brand color tint */
body .luminous-recent-articles .article-card:hover .card-image::after,
body .luminous-recent-articles .luminous-article-card:hover .card-image::after {
  background: rgba(189, 39, 45, 0.2) !important;
}

/* Card Content - Positioned over image */
body .luminous-recent-articles .article-card .card-content,
body .luminous-recent-articles .luminous-article-card .card-content {
  position: absolute !important;
  inset: 0 !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  z-index: 10 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
}

/* Top Row - Category Badge */
body .luminous-recent-articles .article-card .card-category,
body .luminous-recent-articles .luminous-article-card .card-category {
  align-self: flex-start !important;
  display: inline-block !important;
  padding: 6px 12px !important;
  font-size: 0.65rem !important;
  font-family: 'Courier New', monospace !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  margin: 0 !important;
}

/* Arrow Icon Container - Top Right (hidden by default) */
body .luminous-recent-articles .article-card::before,
body .luminous-recent-articles .luminous-article-card::before {
  content: "↗" !important;
  position: absolute !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  opacity: 0 !important;
  transform: translate(20px, -20px) !important;
  transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1) !important;
  z-index: 20 !important;
}

/* Arrow appears on hover */
body .luminous-recent-articles .article-card:hover::before,
body .luminous-recent-articles .luminous-article-card:hover::before {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Bottom Content Container */
body .luminous-recent-articles .article-card .card-title,
body .luminous-recent-articles .luminous-article-card .card-title {
  margin-top: auto !important;
  font-family: Montserrat, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: 1.2 !important;
  mix-blend-mode: difference !important;
  transform: translateY(0) !important;
  transition: transform 0.4s ease !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Title moves up on hover */
body .luminous-recent-articles .article-card:hover .card-title,
body .luminous-recent-articles .luminous-article-card:hover .card-title {
  transform: translateY(-5px) !important;
}

/* Abstract - Fades in from below on hover */
body .luminous-recent-articles .article-card .card-abstract,
body .luminous-recent-articles .luminous-article-card .card-abstract {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #BD272D !important;
  margin-top: 0.75rem !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  overflow: hidden !important;
  transition: all 0.4s ease 0.1s !important;
  line-height: 1.4 !important;
}

/* Abstract appears on hover */
body .luminous-recent-articles .article-card:hover .card-abstract,
body .luminous-recent-articles .luminous-article-card:hover .card-abstract {
  max-height: 60px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Remove any transform on card itself */
body .luminous-recent-articles .article-card:hover,
body .luminous-recent-articles .luminous-article-card:hover {
  transform: none !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

/* Carousel Set - 2 columns on desktop for taller cards */
body .luminous-recent-articles .carousel-set {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 16px !important;
}

/* Navigation arrows styling update */
body .luminous-recent-articles .carousel-nav {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

body .luminous-recent-articles .carousel-nav:hover {
  background: #BD272D !important;
  border-color: #BD272D !important;
}

/* Responsive - 2 columns on tablet */
@media (max-width: 1024px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body .luminous-recent-articles .article-card,
  body .luminous-recent-articles .luminous-article-card {
    height: 350px !important;
    min-height: 350px !important;
  }
}

/* Responsive - 1 column on mobile */
@media (max-width: 640px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: 1fr !important;
  }

  body .luminous-recent-articles .article-card,
  body .luminous-recent-articles .luminous-article-card {
    height: 300px !important;
    min-height: 300px !important;
  }

  body .luminous-recent-articles .article-card .card-title,
  body .luminous-recent-articles .luminous-article-card .card-title {
    font-size: 1.25rem !important;
  }
}

/* ==========================================================================
   LUMINOUS IMMERSION v3 - FOOTER BLACK BACKGROUND FIX
   ========================================================================== */

/* Force black background on all footer elements */
body .pkp_structure_footer_wrapper,
body footer,
body .pkp_structure_footer,
body .footer,
body #pkp_content_footer,
body .site-footer,
.pkp_structure_footer_wrapper {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 3rem 2rem !important;
}

/* Footer text and links */
body .pkp_structure_footer_wrapper *,
body footer *,
body .pkp_structure_footer * {
  color: #ffffff !important;
}

body .pkp_structure_footer_wrapper a,
body footer a,
body .pkp_structure_footer a {
  color: #ff6b6b !important;
  text-decoration: none !important;
}

body .pkp_structure_footer_wrapper a:hover,
body footer a:hover,
body .pkp_structure_footer a:hover {
  color: #BD272D !important;
}

/* Footer badges */
body .pkp_structure_footer_wrapper .pkp_footer_content,
body .pkp_structure_footer_wrapper .footer-content {
  color: rgba(255,255,255,0.8) !important;
}


/* ==========================================================================
   LUMINOUS IMMERSION v3.1 - IMPROVEMENTS
   ========================================================================== */

/* ==========================================================================
   1. MONTSERRAT FONT EVERYWHERE
   ========================================================================== */

/* Global font override for homepage sections */
.luminous-hero,
.luminous-hero *,
.luminous-recent-articles,
.luminous-recent-articles *,
.luminous-timeline-section,
.luminous-timeline-section * {
  font-family: 'Montserrat', sans-serif !important;
}

/* Override any Playfair Display */
.luminous-recent-articles .section-header h2,
.luminous-timeline-section .section-header h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
}

/* ==========================================================================
   2. CAROUSEL CARDS - LARGER & FILL TO RIM
   ========================================================================== */

/* Remove padding from section - cards close to top */
body .luminous-recent-articles {
  padding: 0.5rem 0 2rem 0 !important;
  margin-top: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Container - full width with space for nav arrows */
body .luminous-recent-articles .articles-carousel-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 70px !important;
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* Carousel track - allow overflow for edge preview */
body .luminous-recent-articles .carousel-track {
  overflow: visible !important;
}

/* Carousel set - tighter grid, no padding */
body .luminous-recent-articles .carousel-set {
  gap: 0.5rem !important;
  padding: 0 !important;
  width: calc(100vw - 140px) !important;
}

/* Larger cards - 450px height */
body .luminous-recent-articles .article-card,
body .luminous-recent-articles .luminous-article-card {
  height: 450px !important;
  min-height: 450px !important;
}

/* Card image takes more space */
body .luminous-recent-articles .article-card .card-image,
body .luminous-recent-articles .luminous-article-card .card-image {
  height: 100% !important;
}

/* Card content at bottom overlay */
body .luminous-recent-articles .article-card .card-content,
body .luminous-recent-articles .luminous-article-card .card-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1.5rem !important;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%) !important;
}

/* ==========================================================================
   3. EDGE PREVIEW OF ADJACENT SETS
   ========================================================================== */

/* Fade edges to show adjacent sets */
body .luminous-recent-articles::before,
body .luminous-recent-articles::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 80px !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

body .luminous-recent-articles::before {
  left: 0 !important;
  background: linear-gradient(to right, #0D0D0D 0%, rgba(13,13,13,0.8) 50%, transparent 100%) !important;
}

body .luminous-recent-articles::after {
  right: 0 !important;
/* Remove peek preview for full-width 3x2 grid */
body .luminous-recent-articles::before,
body .luminous-recent-articles::after {
  display: none !important;
}
  background: linear-gradient(to left, #0D0D0D 0%, rgba(13,13,13,0.8) 50%, transparent 100%) !important;
}

/* Navigation arrows - position outside the fade */
body .luminous-recent-articles .carousel-nav.prev {
  left: 15px !important;
  z-index: 100 !important;
}

body .luminous-recent-articles .carousel-nav.next {
  right: 15px !important;
  z-index: 100 !important;
}

/* ==========================================================================
   4. HEADER LOGO - ALIGN LEFT
   ========================================================================== */

/* Logo positioning for inside pages */
.pkp_site_name,
.pkp_head_wrapper .pkp_site_name,
header .pkp_site_name {
  text-align: left !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.pkp_site_name a,
.pkp_head_wrapper .pkp_site_name a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.pkp_site_name img,
.pkp_head_wrapper img,
header img {
  margin: 0 !important;
  margin-right: auto !important;
}

/* Fix the header layout */
.pkp_structure_head,
.pkp_head_wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ==========================================================================
   5. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1024px) {
  body .luminous-recent-articles .article-card,
  body .luminous-recent-articles .luminous-article-card {
    height: 380px !important;
    min-height: 380px !important;
  }

  body .luminous-recent-articles .carousel-set {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  body .luminous-recent-articles .article-card,
  body .luminous-recent-articles .luminous-article-card {
    height: 320px !important;
    min-height: 320px !important;
  }

  body .luminous-recent-articles .carousel-set {
    grid-template-columns: 1fr !important;
  }

  body .luminous-recent-articles .articles-carousel-container {
    padding: 0 50px !important;
  }

  body .luminous-recent-articles::before,
  body .luminous-recent-articles::after {
    width: 50px !important;
  }
}

/* ==========================================================================
   6. HEADER LOGO - ALIGN LEFT (INSIDE PAGES)
   ========================================================================== */

/* Main header layout */
.main-header .container-fluid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Logo/title on the left */
.main-header__title {
  text-align: left !important;
  margin: 0 !important;
  margin-right: auto !important;
  order: -1 !important;
}

.main-header__title a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.main-header__title img {
  margin: 0 !important;
  max-height: 50px !important;
}

/* Navigation menu - keep on right */
.main-header nav.main-header__admin {
  order: 1 !important;
  margin-left: auto !important;
}


/* ==========================================================================
   LUMINOUS IMMERSION v3.2 - IMPROVEMENTS
   ========================================================================== */

/* ==========================================================================
   1. CAROUSEL WITH 5% PEEK PREVIEW
   ========================================================================== */

/* Override v3.1 carousel styles for peek preview */
body .luminous-recent-articles {
  padding: 1rem 0 3rem 0 !important;
  margin-top: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Container with space for peek */
body .luminous-recent-articles .articles-carousel-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* Carousel track - flex layout for peek */
body .luminous-recent-articles .carousel-track {
  display: flex !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  overflow: visible !important;
  left: auto !important;
}

/* Carousel set - 90% width leaves 5% peek on each side */
body .luminous-recent-articles .carousel-set {
  flex: 0 0 90% !important;
  width: 90% !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

/* Card height */
body .luminous-recent-articles .article-card,
body .luminous-recent-articles .luminous-article-card {
  height: 380px !important;
  min-height: 380px !important;
}

/* Update fade edges for peek preview */
body .luminous-recent-articles::before,
body .luminous-recent-articles::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5% !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

body .luminous-recent-articles::before {
  left: 0 !important;
  background: linear-gradient(to right, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.7) 40%, transparent 100%) !important;
}

body .luminous-recent-articles::after {
  right: 0 !important;
  background: linear-gradient(to left, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.7) 40%, transparent 100%) !important;
}

/* Navigation arrows - position at edges */
body .luminous-recent-articles .carousel-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 100 !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(189, 39, 45, 0.9) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

body .luminous-recent-articles .carousel-nav:hover {
  background: rgba(189, 39, 45, 1) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

body .luminous-recent-articles .carousel-nav.prev {
  left: 1.5% !important;
}

body .luminous-recent-articles .carousel-nav.next {
  right: 1.5% !important;
}

body .luminous-recent-articles .carousel-nav svg {
  width: 24px !important;
  height: 24px !important;
  stroke: white !important;
}

/* Responsive carousel */
@media (max-width: 1400px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: repeat(3, 1fr) !important;
    flex: 0 0 92% !important;
    width: 92% !important;
  }

  body .luminous-recent-articles .article-card {
    height: 320px !important;
    min-height: 320px !important;
  }
}

@media (max-width: 768px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: repeat(2, 1fr) !important;
    flex: 0 0 94% !important;
    width: 94% !important;
  }

  body .luminous-recent-articles .carousel-nav {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: 1fr !important;
    flex: 0 0 96% !important;
    width: 96% !important;
  }
}

/* ==========================================================================
   2. HEADER LOGO - FIX ASPECT RATIO (NOT SQUISHED)
   ========================================================================== */

/* Fix logo aspect ratio on inside pages */
.main-header__title img,
.main-header__title .is_img img,
.main-header__title a img {
  height: 55px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

.main-header__title {
  min-height: 65px !important;
  display: flex !important;
  align-items: center !important;
}

.main-header__title a {
  display: flex !important;
  align-items: center !important;
}

/* ==========================================================================
   3. NAVIGATION LINKS - SINGLE LINE
   ========================================================================== */

/* Force single-line navigation */
nav.main-header__nav ul,
.cetid-nav-flat,
.pkp_navigation_primary ul,
.main-header__menu ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

nav.main-header__nav ul::-webkit-scrollbar,
.cetid-nav-flat::-webkit-scrollbar,
.pkp_navigation_primary ul::-webkit-scrollbar {
  display: none !important;
}

nav.main-header__nav li,
.cetid-nav-flat li,
.pkp_navigation_primary li {
  flex-shrink: 0 !important;
}

nav.main-header__nav a,
.cetid-nav-flat a,
.pkp_navigation_primary a,
.main-header__menu a {
  font-size: 0.8rem !important;
  padding: 0.5rem 0.6rem !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   4. LOGIN/REGISTER BUTTONS - STYLED ON INSIDE PAGES
   ========================================================================== */

/* Style login/register buttons to match homepage */
.main-header__admin .pkp_navigation_user,
.main-header .luminous-user-greeting,
.pkp_navigation_user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Register button - outline style */
.main-header__admin .pkp_navigation_user li:first-child a,
.luminous-register-btn {
  display: inline-block !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.main-header__admin .pkp_navigation_user li:first-child a:hover,
.luminous-register-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Login button - filled style */
.main-header__admin .pkp_navigation_user li:last-child a,
.luminous-login-btn {
  display: inline-block !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s ease !important;
  background: #BD272D !important;
  border: 2px solid #BD272D !important;
  color: #fff !important;
  text-decoration: none !important;
}

.main-header__admin .pkp_navigation_user li:last-child a:hover,
.luminous-login-btn:hover {
  background: #9A1F24 !important;
  border-color: #9A1F24 !important;
}

/* User greeting buttons when logged in */
.luminous-dashboard-btn,
.luminous-logout-btn {
  display: inline-block !important;
  padding: 0.4rem 1rem !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.luminous-dashboard-btn {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.luminous-dashboard-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.luminous-logout-btn {
  background: rgba(189, 39, 45, 0.2) !important;
  border: 1.5px solid rgba(189, 39, 45, 0.4) !important;
  color: #fff !important;
}

.luminous-logout-btn:hover {
  background: rgba(189, 39, 45, 0.4) !important;
  border-color: rgba(189, 39, 45, 0.7) !important;
}

/* ==========================================================================
   5. INSIDE PAGE HERO SECTION
   ========================================================================== */

/* Hero section for inside pages */
.cetid-page-hero {
  background: linear-gradient(180deg, #0a0a0a 0%, #151515 100%) !important;
  padding: 100px 32px 70px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle pattern overlay */
.cetid-page-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: radial-gradient(circle at 20% 50%, rgba(189, 39, 45, 0.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 50%, rgba(189, 39, 45, 0.05) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

.cetid-hero-content {
  max-width: 1400px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

.cetid-eyebrow {
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3em !important;
  color: #BD272D !important;
  margin-bottom: 20px !important;
  padding: 8px 20px !important;
  border: 1px solid rgba(189, 39, 45, 0.3) !important;
  border-radius: 30px !important;
}

.cetid-page-hero h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(48px, 8vw, 96px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.cetid-hero-subtitle {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 20px !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .cetid-page-hero {
    padding: 80px 20px 50px !important;
  }

  .cetid-page-hero h1 {
    font-size: 40px !important;
  }

  .cetid-eyebrow {
    font-size: 10px !important;
    padding: 6px 14px !important;
  }
}

/* ==========================================================================
   6. HEADER IMPROVEMENTS FOR INSIDE PAGES
   ========================================================================== */

/* Dark header background for inside pages */
body:not(.page_index) .main-header {
  background: #0D0D0D !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.page_index) .main-header .container-fluid {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 0.75rem 2rem !important;
}

/* Ensure menu items are white on dark background */
body:not(.page_index) .main-header__menu a,
body:not(.page_index) nav.main-header__nav a {
  color: rgba(255, 255, 255, 0.85) !important;
}

body:not(.page_index) .main-header__menu a:hover,
body:not(.page_index) nav.main-header__nav a:hover {
  color: #ffffff !important;
}

/* v3.2.1 CAROUSEL FIX - Force 3x2 grid layout */

/* Override all carousel-set rules */
body .luminous-recent-articles .carousel-set,
.luminous-recent-articles .carousel-set {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 20px !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-height: calc(100vh - 150px) !important;
  padding: 30px 50px !important;
  box-sizing: border-box !important;
}

/* Hide peek preview gradients */
body .luminous-recent-articles::before,
body .luminous-recent-articles::after {
  display: none !important;
}

/* Full width container */
body .luminous-recent-articles .articles-carousel-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Track flex */
body .luminous-recent-articles .carousel-track {
  display: flex !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Larger cards */
body .luminous-recent-articles .article-card,
body .luminous-recent-articles .luminous-article-card {
  height: auto !important;
  min-height: 200px !important;
}

/* Responsive */
@media (max-width: 1024px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  body .luminous-recent-articles .carousel-set {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-height: auto !important;
  }
}

/* v3.2.2 - Remove dots, zero padding for larger cards */

/* Hide dot navigator */
body .luminous-recent-articles .carousel-dots,
body .luminous-recent-articles .carousel-indicators,
body .luminous-recent-articles [class*="dots"],
body .luminous-recent-articles [class*="indicator"] {
  display: none !important;
}

/* Zero padding between cards */
body .luminous-recent-articles .carousel-set {
  gap: 0 !important;
  padding: 0 !important;
}

/* Make cards fill available space */
body .luminous-recent-articles .article-card,
body .luminous-recent-articles .luminous-article-card {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Reduce container padding */
body .luminous-recent-articles .articles-carousel-container {
  padding: 0 !important;
}

body .luminous-recent-articles {
  padding: 0 !important;
}

/* ==========================================================================
   LUMINOUS IMMERSION v3.2.3 - HEADER & NAVIGATION IMPROVEMENTS
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. HEADER LAYOUT - Logo + Nav on LEFT, User buttons on RIGHT
   Immersion theme structure: header > .container-fluid > [admin nav, title, main nav]
   ----------------------------------------------------------------------------- */

/* Main header container - use flexbox with row-reverse to flip order */
header.main-header .container-fluid {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 1.5rem !important;
  gap: 0 !important;
}

header.main-header .main-header__title {
  order: 1 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-right: 1.5rem !important;
}

/* Primary Navigation - Second (after logo) - push admin to right */
header.main-header .main-header__nav,
header.main-header nav.main-header__nav,
.main-header .main-header__nav.navbar {
  order: 2 !important;
  flex-grow: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
}

/* User Navigation (Register/Login) - Last (rightmost) */
header.main-header .main-header__admin,
header.main-header nav.main-header__admin,
.main-header .main-header__admin {
  order: 3 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Navbar items - horizontal layout */
header.main-header .main-header__nav .navbar-nav {
  flex-direction: row !important;
  gap: 0.25rem !important;
}

header.main-header .main-header__nav .nav-item {
  margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   2. NAVIGATION FONT SIZE - Increased for readability
   ----------------------------------------------------------------------------- */

.main-header__nav a,
.main-header__nav .nav-link,
.pkp_navigation_primary a,
.pkp_navigation_primary .nav-link,
.pkp_navigation_primary > li > a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 0.5rem 1rem !important;
}

/* -----------------------------------------------------------------------------
   3. SUBMIT BUTTON - Shimmer/Glow Animation
   ----------------------------------------------------------------------------- */

/* Target Submit link in navigation */
.pkp_navigation_primary a[href*="submissions"],
.main-header__nav a[href*="submissions"],
nav a[href*="submissions"] {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #BD272D, #9A1F24) !important;
  color: #fff !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 15px rgba(189, 39, 45, 0.4) !important;
  animation: submit-glow 2s ease-in-out infinite !important;
}

/* Shimmer sweep effect */
.pkp_navigation_primary a[href*="submissions"]::before,
.main-header__nav a[href*="submissions"]::before,
nav a[href*="submissions"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: skewX(-25deg) !important;
  animation: shimmer-sweep 3s infinite !important;
  pointer-events: none !important;
}

/* Hover state */
.pkp_navigation_primary a[href*="submissions"]:hover,
.main-header__nav a[href*="submissions"]:hover,
nav a[href*="submissions"]:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(189, 39, 45, 0.5) !important;
}

/* Glow pulse animation */
@keyframes submit-glow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(189, 39, 45, 0.4);
  }
  50% {
    box-shadow: 0 4px 25px rgba(189, 39, 45, 0.7), 0 0 30px rgba(189, 39, 45, 0.3);
  }
}

/* Shimmer sweep animation */
@keyframes shimmer-sweep {
  0% {
    left: -100%;
  }
  20%, 100% {
    left: 200%;
  }
}

/* -----------------------------------------------------------------------------
   4. GLOBAL FONT - Montserrat Everywhere
   ----------------------------------------------------------------------------- */

body,
body *,
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
label, input, select, textarea, button,
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_block,
.obj_article_summary,
.page_content {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* -----------------------------------------------------------------------------
   5. HIDE SIDEBAR SECTIONS - ALL PAGES (not just homepage)
   ----------------------------------------------------------------------------- */

/* Hide Information block (For Readers, Authors, Librarians) */
.pkp_block_information,
.block_information,
.pkp_block.block_information,
[class*="block_information"],
footer .information,
.footer-info .information {
  display: none !important;
}

/* Hide Browse/Categories sections */
.pkp_block_browse,
.block_browse,
.pkp_block.block_browse,
[class*="block_browse"],
.categories,
[class*="categories"],
footer .browse,
.footer-browse {
  display: none !important;
}

/* Hide specific footer links */
a[href*="/information/readers"],
a[href*="/information/authors"],
a[href*="/information/librarians"] {
  display: none !important;
}

/* Hide "Make a Submission" sidebar block (redundant with nav) */
.pkp_block_make_submission,
.block_make_submission {
  display: none !important;
}