/* ==========================================================================
   GLOBAL CUSTOM CSS for journal.obu.edu.et
   Advanced theme layer for OJS/PKP
   - Preserves header, logo, journal thumbnails
   - Modern nav, sidebar cards, interactive states
   - Accessibility (focus, contrast, reduced motion), Dark Mode
   - Better forms, tables, article cards, pagination, alerts
   ========================================================================== */

/* ── Root variables (design system) ── */
:root {
  /* Brand */
  --primary: #004d40;
  --primary-light: #00695c;
  --primary-dark: #00251a;
  --accent: #ff5722;

  /* Neutrals */
  --text: #1e1e1e;
  --text-muted: #6b7280;      /* muted grey */
  --text-light: #4a4a4a;
  --bg: #ffffff;
  --bg-alt: #f8f9fa;
  --border: #dee2e6;

  /* Effects */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.14);

  /* Motion & radius */
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Typography scale */
  --fs-0: .875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.25rem;
  --fs-4: 1.5rem;

  /* Spacing */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
}

/* ── Dark mode (auto) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e8e8e8;
    --text-light: #cfcfcf;
    --text-muted: #9aa3ab;
    --bg: #0e1111;
    --bg-alt: #141819;
    --border: #263238;
    --primary: #18a999;
    --primary-light: #2ac0b0;
    --primary-dark: #0e6b60;
    --accent: #ff784e;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.55);
  }

  body {
    background: var(--bg);
    color: var(--text);
  }

  .pkp_block,
  .obj_article_summary,
  .pkp_article_list_item,
  .pkp_navigation_primary ul {
    background: #121516;
    border-color: var(--border);
  }

  .pkp_block .title {
    background: var(--primary-dark);
    border-bottom-color: var(--accent);
  }

  .pkp_button.primary,
  .button.primary,
  a.pkp_button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #081110;
  }
}

/* ── Reduced motion (accessibility) ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Base / reset improvements ── */
html { scroll-behavior: smooth; }
body {
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, li, .pkp_block_content { line-height: 1.68; }
small, .text-muted { color: var(--text-muted); }

/* ── Header preservation zone ── */
.pkp_head_wrapper,
#header,
.pkp_site_name,
.pkp_site_logo img {
  transition: var(--transition);
}

/* Primary & user nav links */
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a {
  transition: var(--transition);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem;
}

/* Hover/focus – minimal layout impact */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  text-decoration: none;
}

/* ── Main navigation – dropdown animation ── */
.pkp_navigation_primary { position: relative; z-index: 20; }
.pkp_navigation_primary li { position: relative; }

.pkp_navigation_primary ul {
  position: absolute;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .25s ease, visibility .25s;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: .35rem 0;
}

.pkp_navigation_primary li:hover > ul,
.pkp_navigation_primary li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}

/* Submenu items */
.pkp_navigation_primary ul a {
  padding: .6rem 1rem;
  color: var(--text-light);
  transition: var(--transition);
  display: block;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
  background: var(--primary-light);
  color: white;
  padding-left: 1.15rem;
}

/* Touch device hit area */
@media (hover: none) {
  .pkp_navigation_primary > li > a { padding: .8rem 1rem; }
}

/* ── Sidebar – modern card-like style ── */
.pkp_structure_sidebar { --sidebar-bg: var(--bg); }

.pkp_block {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.pkp_block:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.pkp_block .title {
  background: var(--primary);
  color: white;
  padding: .9rem 1.25rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 3px solid var(--accent);
  letter-spacing: .2px;
}

.pkp_block_content { padding: 1.1rem 1.25rem 1.2rem; }

.pkp_block_content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_block_content li + li { margin-top: .35rem; }

/* Block links – nicer interactive style */
.pkp_block_content a,
.pkp_block_content li a {
  color: var(--primary);
  position: relative;
  transition: var(--transition);
  padding: .35rem 0;
  display: inline-block;
}

.pkp_block_content a:hover,
.pkp_block_content a:focus {
  color: var(--accent);
  text-decoration: none;
}

.pkp_block_content a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background: var(--accent);
  transition: width .28s ease;
}

.pkp_block_content a:hover::after { width: 100%; }

/* ── Buttons & interactive elements ── */
.pkp_button,
.button,
a.pkp_button,
.button-group .button {
  border-radius: var(--radius-sm);
  padding: .65rem 1.1rem;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 1px solid transparent;
  line-height: 1.2;
}

.pkp_button.primary,
.button.primary,
a.pkp_button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }

.pkp_button.primary:hover,
.button.primary:hover,
a.pkp_button.primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,77,64,0.25);
}

/* Secondary / ghost / outline variants */
.button.secondary { background: var(--bg); color: var(--primary); border-color: var(--primary); }
.button.secondary:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); }

.button.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.button.ghost:hover { background: var(--bg-alt); }

.button.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.button.accent:hover { filter: brightness(.95); }

/* Icon buttons */
.button.icon, .pkp_button.icon {
  padding: .5rem .65rem;
  display: inline-flex; align-items: center; gap: .5rem;
}

/* ── Tags / badges (useful for article metadata) ── */
.badge, .label {
  display: inline-block;
  padding: .25rem .55rem;
  font-size: var(--fs-0);
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-alt);
}

.badge.primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.badge.accent  { color: #fff; background: var(--accent);  border-color: var(--accent); }

/* ── Journal / Issue thumbnails – preserve but add subtle hover ── */
.cover img,
.obj_issue_summary .cover img,
.issue_cover img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  display: block;
}

.cover:hover img,
.obj_issue_summary .cover:hover img,
.issue_cover:hover img {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
}

/* ── Cards & article summaries ── */
.obj_article_summary,
.pkp_article_list_item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--bg);
  transition: var(--transition);
}

.obj_article_summary:hover,
.pkp_article_list_item:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.obj_article_summary .title a {
  color: var(--text);
  text-decoration: none;
  transition: var(--transition);
}

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

.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_summary .doi {
  color: var(--text-muted);
  font-size: var(--fs-0);
}

/* Metadata chips */
.meta-chips, .obj_article_summary .item .sub_item {
  display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem;
}

.meta-chips .chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .15rem .5rem;
  font-size: .8rem;
  color: var(--text-muted);
  background: var(--bg-alt);
}

/* ── Tables ── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

thead th {
  background: color-mix(in oklab, var(--primary) 9%, var(--bg));
  color: var(--text);
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
}

tbody tr:hover { background: color-mix(in oklab, var(--primary) 6%, transparent); }

/* ── Forms ── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: .65rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: var(--transition);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

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

.form-hint { font-size: var(--fs-0); color: var(--text-muted); }

.is-invalid { border-color: #dc3545 !important; }
.is-valid   { border-color: #2e7d32 !important; }

/* ── Alerts / notices ── */
.alert {
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.alert.info  { border-color: #0ea5e9; background: #e0f2fe; color: #075985; }
.alert.warn  { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.alert.error { border-color: #ef4444; background: #fee2e2; color: #7f1d1d; }
.alert.success { border-color: #10b981; background: #ecfdf5; color: #064e3b; }

/* ── Breadcrumbs ── */
.breadcrumbs, .pkp_breadcrumbs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .75rem 0 1rem;
  font-size: var(--fs-0);
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ── Pagination ── */
.pkp_pagination {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
}
.pkp_pagination a,
.pkp_pagination .current {
  border: 1px solid var(--border);
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  transition: var(--transition);
  background: var(--bg);
}
.pkp_pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pkp_pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Footer polish ── */
#footer, .pkp_structure_footer_wrapper {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
  padding: var(--space-5) 0;
  color: var(--text-light);
}
#footer a { color: var(--primary); }
#footer a:hover { color: var(--accent); }

/* ── Mobile / responsive tweaks ── */
@media (max-width: 991px) {
  .obj_article_summary, .pkp_article_list_item { padding: 1rem; }
}
@media (max-width: 767px) {
  .pkp_navigation_primary {
    background: var(--bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }
  .pkp_structure_sidebar { margin-top: 1.5rem; }
  .pkp_block .title { font-size: 1rem; padding: .8rem 1rem; }
}

/* ── Focus states accessibility improvement ── */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.pkp_button:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent);
  border-color: var(--primary);
}