/* ==========================================================================
   PREMIUM STYLESHEET — OJS 3.5.0.4
   Journal: Uganda Pentecostal University Journal of Sustainable Development
   URL:    https://articles.upu.ac.ug/index.php/upu-journal-for-sustainable-deve
   Version: 2.0.0 — Premium Edition
   ========================================================================== */

/* ---------- GOOGLE FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* ── Color Palette ── */
  --color-primary:        #4f46e5;
  --color-primary-hover:  #4338ca;
  --color-primary-light:  #eef2ff;
  --color-primary-muted:  #c7d2fe;
  --color-accent:         #eab308;
  --color-accent-light:   #fefce8;
  --color-success:        #059669;
  --color-warning:        #d97706;
  --color-error:          #dc2626;

  /* ── Neutrals ── */
  --color-bg:             #f9fafb;
  --color-surface:        #ffffff;
  --color-border:         #e5e7eb;
  --color-border-light:   #f3f4f6;
  --color-text:           #1e293b;
  --color-text-secondary: #475569;
  --color-text-muted:     #94a3b8;
  --color-heading:        #0f172a;

  /* ── Typography ── */
  --font-sans:  'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Fluid type scale: min @ 360px → max @ 1440px */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.17vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.77rem + 0.19vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.88rem + 0.28vw, 1.125rem);
  --text-lg:   clamp(1.0625rem, 0.98rem + 0.37vw, 1.3125rem);
  --text-xl:   clamp(1.25rem,   1.13rem + 0.52vw, 1.625rem);
  --text-2xl:  clamp(1.5rem,    1.33rem + 0.74vw, 2rem);
  --text-3xl:  clamp(1.75rem,   1.5rem  + 1.11vw, 2.5rem);
  --text-4xl:  clamp(2.125rem,  1.79rem + 1.48vw, 3.125rem);

  /* ── Spacing scale (4px base) ── */
  --space-1:  0.25rem;  --space-2:  0.5rem;   --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;   --space-12: 3rem;
  --space-16: 4rem;     --space-20: 5rem;     --space-24: 6rem;

  /* ── Radii ── */
  --radius-sm:   0.5rem;   --radius-md:   0.75rem;  --radius-lg:   1rem;
  --radius-xl:   1.25rem;  --radius-2xl:  1.5rem;   --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 20px 35px -12px rgba(79,70,229,0.12);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   400ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 500ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Layout ── */
  --content-max-width: 75rem;
  --sidebar-width:     18rem;
  --reading-width:     42rem;
}

/* ==========================================================================
   2. CSS RESET & BASE
   ========================================================================== */

@layer reset, base, layout, components, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration-thickness: 0.0625em; text-underline-offset: 0.15em; }
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background-color: var(--color-bg);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--color-heading);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl);  }
  h5 { font-size: var(--text-lg);  }
  h6 { font-size: var(--text-base); font-weight: 600; }

  p { margin-bottom: var(--space-4); text-wrap: pretty; }

  ::selection { background-color: var(--color-primary); color: #ffffff; }

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */

@layer layout {
  .pkp_structure_header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xs);
    padding: var(--space-3) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--transition-base), padding var(--transition-base);
  }

  .pkp_site_name { margin: 0; }

  .pkp_site_name a {
    font-family: var(--font-sans);
    font-weight: 750;
    font-size: var(--text-xl);
    color: var(--color-heading);
    text-decoration: none;
    letter-spacing: -0.025em;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .pkp_site_name a:hover { color: var(--color-primary); }

  .pkp_site_name a img {
    max-height: 2.75rem;
    width: auto;
    border-radius: var(--radius-sm);
  }

  .pkp_nav_primary { margin-top: 0.125rem; }

  .pkp_nav_primary ul {
    display: flex;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  .pkp_nav_primary ul li a {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    position: relative;
  }

  .pkp_nav_primary ul li a:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
  }

  .pkp_nav_primary ul li[aria-current="page"] a,
  .pkp_nav_primary ul li.current a {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    font-weight: 600;
  }

  .pkp_nav_primary .dropdown-menu {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2);
    background: var(--color-surface);
    min-width: 14rem;
  }

  .pkp_nav_primary .dropdown-menu a {
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .pkp_nav_primary .dropdown-menu a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
  }

  .navbar-toggler {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    transition: border-color var(--transition-fast);
  }

  .navbar-toggler:hover { border-color: var(--color-primary); }
}

/* ==========================================================================
   4. HOMEPAGE — CURRENT ISSUE HERO
   ========================================================================== */

@layer components {
  .cmp_current_issue {
    background: var(--color-surface);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-10) var(--space-8);
    margin: var(--space-8) 0 var(--space-12);
    border: 1px solid var(--color-border-light);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-slow);
  }

  .cmp_current_issue::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
      var(--color-primary) 0%,
      var(--color-primary) 40%,
      var(--color-accent) 100%);
  }

  .cmp_current_issue:hover { box-shadow: var(--shadow-2xl); }

  .cmp_current_issue .cover { text-align: center; }

  .cmp_current_issue .cover img {
    max-width: 280px;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }

  .cmp_current_issue .cover img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-xl);
  }

  .cmp_current_issue .title {
    font-size: var(--text-3xl);
    font-weight: 750;
    color: var(--color-heading);
    border-left: 5px solid var(--color-primary);
    padding-left: var(--space-5);
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .cmp_current_issue .description {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: var(--reading-width);
    margin-bottom: var(--space-6);
  }

  .cmp_current_issue .description p:last-child { margin-bottom: 0; }

  #homepageAbout {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-12);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
  }

  #homepageAbout h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-primary-muted);
    display: inline-block;
  }

  #homepageAbout p {
    color: var(--color-text-secondary);
    max-width: var(--reading-width);
  }
}

/* ==========================================================================
   5. ARTICLE CARDS (Homepage listing)
   ========================================================================== */

@layer components {
  .articles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--space-8);
    margin-top: var(--space-6);
  }

  .obj_article_summary {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xs);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .obj_article_summary:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary-muted);
  }

  .obj_article_summary::after {
    content: '';
    position: absolute;
    top: var(--space-5); right: var(--space-5);
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary-muted);
    opacity: 0;
    transition: opacity var(--transition-base), background-color var(--transition-base);
  }

  .obj_article_summary:hover::after {
    opacity: 1;
    background-color: var(--color-primary);
  }

  .obj_article_summary .title {
    font-size: var(--text-lg);
    line-height: 1.35;
    margin: 0;
    order: 1;
  }

  .obj_article_summary .title a {
    color: var(--color-heading);
    text-decoration: none;
    font-weight: 650;
    transition: color var(--transition-fast);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

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

  .obj_article_summary .authors {
    order: 2;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .obj_article_summary .pages {
    order: 3;
    margin-top: auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-weight: 500;
    background: var(--color-bg);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    display: inline-block;
    align-self: flex-start;
  }

  .obj_article_summary .cover {
    order: 0;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .obj_article_summary .cover img {
    width: 100% !important;
    max-width: 200px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--transition-slow);
  }

  .obj_article_summary:hover .cover img { transform: scale(1.04); }
}

/* ==========================================================================
   6. ARTICLE DETAIL PAGE
   ========================================================================== */

@layer components {
  .article__details {
    background: var(--color-surface);
    border-radius: var(--radius-3xl);
    padding: var(--space-10) var(--space-8);
    margin-top: var(--space-6);
    margin-bottom: var(--space-12);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
  }

  .article__title {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-heading);
    margin-bottom: var(--space-6);
    text-wrap: balance;
  }

  .article__authors {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--color-primary);
  }

  .article__authors .orcid {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: #a6ce39;
  }

  .article__details .doi,
  .article__details .published,
  .article__details .issue,
  .article__details .section {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
  }

  .article__details .doi a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
  }

  .article__details .doi a:hover { text-decoration: underline; }

  .article__details .keywords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }

  .article__details .keywords .keyword {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .article__details .keywords .keyword:hover {
    background: var(--color-primary);
    color: #ffffff;
  }

  .abstract {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #f8fafc 100%);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    margin: var(--space-8) 0;
    border-left: 4px solid var(--color-primary);
    position: relative;
  }

  .abstract::before {
    content: 'Abstract';
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-3);
  }

  .abstract h3 { display: none; }

  .article__body {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text);
    max-width: var(--reading-width);
    margin: 0 auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .article__body h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
  }

  .article__body h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
  }

  .article__body p { margin-bottom: var(--space-4); }

  .article__body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font-weight: 500;
  }

  .article__body a:hover { color: var(--color-primary-hover); }

  .article__body blockquote {
    border-left: 4px solid var(--color-primary-muted);
    padding: var(--space-3) var(--space-5);
    margin: var(--space-6) 0;
    background: var(--color-bg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-secondary);
  }

  .article__body ul, .article__body ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
  }

  .article__body li { margin-bottom: var(--space-2); }

  .article__details .references {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 2px solid var(--color-border);
  }

  .article__details .references h2,
  .article__details .references h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
  }

  .article__details .references .reference {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
    padding-left: var(--space-5);
    text-indent: -var(--space-5);
    margin-bottom: var(--space-2);
  }

  .article__details .galley-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-6) 0;
  }

  .btn_pdf,
  .obj_galley_link,
  .galley-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                filter var(--transition-fast);
    box-shadow: 0 2px 8px rgba(79,70,229,0.25);
  }

  .btn_pdf:hover,
  .obj_galley_link:hover,
  .galley-link a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(79,70,229,0.35);
    filter: brightness(1.05);
    color: #ffffff;
    text-decoration: none;
  }

  .btn_pdf:active,
  .obj_galley_link:active { transform: translateY(0); }

  .article__details .citation {
    background: var(--color-bg);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono, var(--font-sans));
    font-size: var(--text-sm);
    line-height: 1.7;
    margin: var(--space-6) 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .article__details .license {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-6) 0;
  }

  .article__details .similar-articles {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 2px solid var(--color-border);
  }

  .article__details .similar-articles ul { list-style: none; padding: 0; }

  .article__details .similar-articles li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-sm);
  }

  .article__details .similar-articles li a {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 500;
  }

  .article__details .similar-articles li a:hover { text-decoration: underline; }
}

/* ==========================================================================
   7. ISSUE ARCHIVE
   ========================================================================== */

@layer components {
  .issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--space-8);
  }

  .issue-summary,
  .obj_issue_summary {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    text-align: center;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xs);
  }

  .issue-summary:hover,
  .obj_issue_summary:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }

  .issue-summary .cover,
  .obj_issue_summary .cover {
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .issue-summary .cover img,
  .obj_issue_summary .cover img {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .issue-summary:hover .cover img { transform: scale(1.05); }

  .issue-summary .title,
  .obj_issue_summary .title {
    font-size: var(--text-lg);
    font-weight: 650;
    line-height: 1.3;
    color: var(--color-heading);
    margin-bottom: var(--space-2);
  }

  .issue-summary .title a,
  .obj_issue_summary .title a { text-decoration: none; color: inherit; }

  .issue-summary .title a:hover,
  .obj_issue_summary .title a:hover { color: var(--color-primary); }

  .issue-summary .description,
  .obj_issue_summary .description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .issue-summary .series,
  .obj_issue_summary .series {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-weight: 500;
    margin-top: var(--space-3);
  }
}

/* ==========================================================================
   8. SIDEBAR
   ========================================================================== */

@layer layout {
  .pkp_structure_sidebar { padding-left: var(--space-8); }

  .pkp_block {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-8);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xs);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    transition: box-shadow var(--transition-base);
  }

  .pkp_block:hover { box-shadow: var(--shadow-sm); }

  .pkp_block .title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-heading);
    border-bottom: 3px solid var(--color-primary-muted);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
    display: inline-block;
    letter-spacing: -0.01em;
  }

  .cmp_announcements {
    background: linear-gradient(145deg, var(--color-accent-light) 0%, var(--color-surface) 100%);
    border-left: 5px solid var(--color-accent);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    position: relative;
  }

  .cmp_announcements::before {
    content: '\01F4E2';
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-size: 1.25rem;
  }

  .cmp_announcements .title {
    font-weight: 700;
    color: #92400e;
    margin-bottom: var(--space-2);
  }

  .pkp_block.make_submission {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    border: none;
    box-shadow: var(--shadow-lg);
  }

  .pkp_block.make_submission .title {
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,0.3);
  }

  .pkp_block.make_submission a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: #ffffff;
    color: var(--color-primary);
    font-weight: 600;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .pkp_block.make_submission a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    text-decoration: none;
  }

  .pkp_block.information ul,
  .pkp_block.language_toggle ul { list-style: none; padding: 0; margin: 0; }

  .pkp_block.information ul li,
  .pkp_block.language_toggle ul li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  .pkp_block.information ul li:last-child,
  .pkp_block.language_toggle ul li:last-child { border-bottom: none; }

  .pkp_block.information ul li a,
  .pkp_block.language_toggle ul li a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }

  .pkp_block.information ul li a:hover,
  .pkp_block.language_toggle ul li a:hover {
    color: var(--color-primary);
    padding-left: var(--space-3);
    background: var(--color-primary-light);
  }
}

/* ==========================================================================
   9. BUTTONS & INTERACTIVE ELEMENTS
   ========================================================================== */

@layer components {
  .pkp_button,
  .submit,
  button[type="submit"],
  .cmp_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #ffffff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                filter var(--transition-fast);
    box-shadow: 0 2px 8px rgba(79,70,229,0.2);
  }

  .pkp_button:hover,
  .submit:hover,
  button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79,70,229,0.3);
    filter: brightness(1.05);
    color: #ffffff;
    text-decoration: none;
  }

  .pkp_button:active,
  .submit:active,
  button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(79,70,229,0.2);
  }

  .pkp_button--outline,
  .cmp_button--outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
  }

  .pkp_button--outline:hover,
  .cmp_button--outline:hover {
    background: var(--color-primary);
    color: #ffffff;
  }

  .pkp_button:disabled,
  button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   10. FORM ELEMENTS
   ========================================================================== */

@layer components {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    width: 100%;
    max-width: 100%;
    line-height: 1.5;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
  }

  input::placeholder,
  textarea::placeholder { color: var(--color-text-muted); }

  textarea { min-height: 8rem; resize: vertical; }

  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--color-primary);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
  }

  label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
    display: block;
  }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

@layer layout {
  .pkp_structure_footer {
    background: var(--color-heading);
    color: #cbd5e1;
    margin-top: var(--space-24);
    padding: var(--space-12) 0;
    border-top: none;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }

  .pkp_structure_footer a {
    color: #a5b4fc;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
  }

  .pkp_structure_footer a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  .pkp_structure_footer p {
    margin-bottom: var(--space-3);
    color: #94a3b8;
  }
}

/* ==========================================================================
   12. PAGE-LEVEL ELEMENTS
   ========================================================================== */

@layer components {
  .page_title {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: 750;
    color: var(--color-heading);
    letter-spacing: -0.025em;
    margin-bottom: var(--space-8);
    text-wrap: balance;
  }

  .cmp_breadcrumbs {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
  }

  .cmp_breadcrumbs a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .cmp_breadcrumbs a:hover { color: var(--color-primary); }

  .cmp_breadcrumbs .breadcrumb-separator {
    margin: 0 var(--space-2);
    color: var(--color-text-muted);
  }

  .cmp_pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-10);
    font-family: var(--font-sans);
  }

  .cmp_pagination a,
  .cmp_pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
    text-decoration: none;
    color: var(--color-text-secondary);
  }

  .cmp_pagination a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
  }

  .cmp_pagination .current {
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
  }

  .cmp_notification {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .cmp_notification--success {
    background: #ecfdf5;
    border-left: 4px solid var(--color-success);
    color: #065f46;
  }

  .cmp_notification--warning {
    background: var(--color-accent-light);
    border-left: 4px solid var(--color-accent);
    color: #92400e;
  }

  .cmp_notification--error {
    background: #fef2f2;
    border-left: 4px solid var(--color-error);
    color: #991b1b;
  }

  .cmp_notification--info {
    background: var(--color-primary-light);
    border-left: 4px solid var(--color-primary);
    color: #3730a3;
  }

  .search_results .obj_article_summary { margin-bottom: var(--space-6); }

  .search_results .article_count {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
  }
}

/* ==========================================================================
   13. UTILITY CLASSES
   ========================================================================== */

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
  }

  .skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 10000;
    background: var(--color-primary);
    color: #ffffff;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--transition-fast);
  }

  .skip-to-content:focus { top: var(--space-4); }
}

/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */

@layer components {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

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

  .skeleton {
    background: linear-gradient(90deg, var(--color-border-light) 25%, var(--color-border) 50%, var(--color-border-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
  }

  .obj_article_summary { animation: fadeInUp 0.5s ease both; }

  .articles__grid .obj_article_summary:nth-child(1)  { animation-delay: 0.05s; }
  .articles__grid .obj_article_summary:nth-child(2)  { animation-delay: 0.10s; }
  .articles__grid .obj_article_summary:nth-child(3)  { animation-delay: 0.15s; }
  .articles__grid .obj_article_summary:nth-child(4)  { animation-delay: 0.20s; }
  .articles__grid .obj_article_summary:nth-child(5)  { animation-delay: 0.25s; }
  .articles__grid .obj_article_summary:nth-child(6)  { animation-delay: 0.30s; }
  .articles__grid .obj_article_summary:nth-child(7)  { animation-delay: 0.35s; }
  .articles__grid .obj_article_summary:nth-child(8)  { animation-delay: 0.40s; }
  .articles__grid .obj_article_summary:nth-child(9)  { animation-delay: 0.45s; }
  .articles__grid .obj_article_summary:nth-child(10) { animation-delay: 0.50s; }
}

/* ==========================================================================
   15. DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #0f172a;
    --color-surface:        #1e293b;
    --color-border:         #334155;
    --color-border-light:   #1e293b;
    --color-text:           #e2e8f0;
    --color-text-secondary: #94a3b8;
    --color-text-muted:     #64748b;
    --color-heading:        #f1f5f9;
    --color-primary-light:  #1e1b4b;
    --color-accent-light:   #422006;
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg:  0 10px 15px rgba(0,0,0,0.5);
    --shadow-xl:  0 20px 25px rgba(0,0,0,0.5);
    --shadow-2xl: 0 25px 50px rgba(0,0,0,0.6);
    --shadow-card-hover: 0 20px 35px rgba(79,70,229,0.15);
  }

  .abstract { background: linear-gradient(135deg, var(--color-primary-light) 0%, #1e293b 100%); }
  .cmp_announcements { background: linear-gradient(145deg, var(--color-accent-light) 0%, var(--color-surface) 100%); }
  .pkp_structure_header { background: rgba(30,41,59,0.9); }
  .pkp_block.make_submission { background: linear-gradient(135deg, var(--color-primary) 0%, #312e81 100%); }
  .article__body a { color: #818cf8; }

  .btn_pdf,
  .obj_galley_link,
  .galley-link a {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
  }

  .btn_pdf:hover,
  .obj_galley_link:hover { box-shadow: 0 6px 16px rgba(99,102,241,0.4); }

  :focus-visible { outline-color: #818cf8; }
}

/* ==========================================================================
   16. PRINT STYLES
   ========================================================================== */

@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body { font-size: 12pt; line-height: 1.6; color: #000; }

  .pkp_structure_header,
  .pkp_structure_sidebar,
  .pkp_structure_footer,
  .pkp_nav_primary,
  .btn_pdf,
  .obj_galley_link,
  .cmp_announcements,
  .navbar-toggler,
  .skip-to-content { display: none !important; }

  .article__details { border: none; padding: 0; box-shadow: none; border-radius: 0; }
  .article__title { font-size: 18pt; margin-bottom: 0.5cm; }
  .article__body { font-size: 11pt; line-height: 1.7; max-width: none; }
  a { text-decoration: underline; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  .abstract { border: 1px solid #ccc; padding: 1em; margin: 1em 0; border-left: 4px solid #000; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  h2, h3, h4 { page-break-after: avoid; }
  p, li, blockquote { orphans: 3; widows: 3; }

  @page { margin: 2cm; }
}

/* ==========================================================================
   17. HIGH-CONTRAST MODE
   ========================================================================== */

@media (forced-colors: active) {
  .btn_pdf, .obj_galley_link, .pkp_button { border: 2px solid ButtonText; }
  .obj_article_summary { border: 1px solid ButtonText; }
  .cmp_current_issue::before { background: Highlight; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ==========================================================================
   18. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 992px) {
  .pkp_structure_sidebar { padding-left: 0; margin-top: var(--space-8); }
  .cmp_current_issue { padding: var(--space-6) var(--space-5); margin: var(--space-6) 0; }
  .article__details { padding: var(--space-6) var(--space-5); }
  .article__title { font-size: var(--text-2xl); }
  .pkp_site_name a { font-size: var(--text-lg); }
}

@media (max-width: 768px) {
  :root { --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); }
  body { font-size: 16px; }
  .articles__grid, .issues-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .cmp_current_issue { padding: var(--space-5); border-radius: var(--radius-2xl); }
  .cmp_current_issue .title { font-size: var(--text-2xl); }
  .cmp_current_issue .cover img { max-width: 100%; }
  .article__title { font-size: var(--text-2xl); }
  .article__details { border-radius: var(--radius-2xl); padding: var(--space-5); }
  .pkp_structure_header { padding: var(--space-2) 0; }
  .pkp_nav_primary ul { flex-direction: column; gap: 0; }
  .pkp_nav_primary ul li a { display: block; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
  .pkp_block { padding: var(--space-4); margin-bottom: var(--space-5); }
  .pkp_structure_footer { margin-top: var(--space-12); padding: var(--space-8) 0; }
  .obj_article_summary .cover img { width: 100% !important; }
  .issue-summary .cover img,
  .obj_issue_summary .cover img { max-width: 180px; }
}

@media (max-width: 480px) {
  .cmp_current_issue { padding: var(--space-4); border-radius: var(--radius-xl); }
  .article__details { padding: var(--space-4); border-radius: var(--radius-xl); }
  .btn_pdf, .obj_galley_link, .pkp_button { width: 100%; justify-content: center; }
  .obj_article_summary { padding: var(--space-4); }
}

/* ==========================================================================
   19. OJS-SPECIFIC OVERRIDES (3.5.0.4)
   ========================================================================== */

@layer overrides {
  table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }

  th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
  }

  th { font-weight: 600; color: var(--color-heading); background: var(--color-bg); }
  tr:hover td { background: var(--color-primary-light); }

  .pkp_structure_main ul:not([class]),
  .pkp_structure_main ol:not([class]) { padding-left: var(--space-6); margin-bottom: var(--space-4); }

  .pkp_structure_main ul:not([class]) li,
  .pkp_structure_main ol:not([class]) li { margin-bottom: var(--space-2); }

  .fa, .fas, .far, .fab { font-size: inherit; }

  #pkp_cookie_banner {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    background: var(--color-heading);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    box-shadow: var(--shadow-xl);
  }

  #pkp_cookie_banner a { color: var(--color-primary-muted); }

  #pkp_cookie_banner button {
    background: var(--color-primary);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-5);
    border: none;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
  }

  .cmp_feed_links {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    margin-bottom: var(--space-4);
  }

  .cmp_feed_links a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .cmp_feed_links a:hover { color: var(--color-primary); }
}

/* ==========================================================================
   20. LOADING / SKELETON STATE
   ========================================================================== */

@layer components {
  .loading .cmp_current_issue,
  .loading .obj_article_summary,
  .loading .article__details { position: relative; overflow: hidden; }

  .loading .cmp_current_issue::after,
  .loading .obj_article_summary::after,
  .loading .article__details::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.3) 50%,
      transparent 100%
    );
    animation: shimmer 2s ease-in-out infinite;
    pointer-events: none;
  }
}