/* =============================================
   Journal Social and Humanities Studies
   Style Sheet — Dark Orange Theme
   Version: 1.0
   ============================================= */

/* ── Root Variables ─────────────────────────── */
:root {
  /* Color Palette */
  --clr-primary:        #B84E00;   /* dark orange */
  --clr-primary-dark:   #8A3800;   /* deeper orange */
  --clr-primary-light:  #E8722A;   /* medium orange */
  --clr-accent:         #FF9A4D;   /* highlight orange */
  --clr-bg:             #FFFFFF;
  --clr-bg-soft:        #FFF6F0;   /* warm tint */
  --clr-bg-muted:       #F5EBE0;
  --clr-text:           #1A0A00;
  --clr-text-muted:     #6B3A20;
  --clr-border:         #D98050;
  --clr-border-soft:    #EEC09A;
  --clr-link:           #C05010;
  --clr-link-hover:     #FF6B1A;

  /* Typography */
  --font-heading:  'Georgia', 'Times New Roman', serif;
  --font-body:     'Palatino Linotype', 'Book Antiqua', serif;
  --font-ui:       'Segoe UI', Arial, sans-serif;
  --font-mono:     'Courier New', monospace;

  /* Font Sizes */
  --fs-base:  16px;
  --fs-sm:    13px;
  --fs-lg:    18px;
  --fs-xl:    24px;
  --fs-2xl:   32px;

  /* Line Heights */
  --lh-body:    1.8;
  --lh-heading: 1.3;

  /* Layout */
  --max-width: 900px;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  32px;
  --sp-xl:  64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Borders */
  --border:        1px solid var(--clr-border-soft);
  --border-strong: 2px solid var(--clr-primary);
  --border-accent: 4px solid var(--clr-accent);
}


/* ── Base Reset & Global ─────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--fs-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  line-height: var(--lh-body);
  color: var(--clr-text);
  background-color: var(--clr-bg);
}


/* ── Typography ─────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  color: var(--clr-primary-dark);
  font-weight: 700;
  margin-bottom: var(--sp-md);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); border-bottom: var(--border-strong); padding-bottom: var(--sp-sm); }
h3 { font-size: var(--fs-lg); color: var(--clr-primary); }
h4, h5, h6 { font-size: var(--fs-base); color: var(--clr-primary); }

p {
  margin-bottom: var(--sp-md);
}

a {
  color: var(--clr-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

a:hover {
  color: var(--clr-link-hover);
}

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: var(--sp-md);
}

li {
  margin-bottom: var(--sp-xs);
}

strong { font-weight: 700; }
em     { font-style: italic; }

code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--clr-bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--clr-primary-dark);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--clr-bg-muted);
  border-left: var(--border-strong);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  overflow-x: auto;
  margin-bottom: var(--sp-lg);
}

blockquote {
  border-left: var(--border-accent);
  background: var(--clr-bg-soft);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--clr-text-muted);
  margin: var(--sp-lg) 0;
}

hr {
  border: none;
  border-top: 2px solid var(--clr-border-soft);
  margin: var(--sp-lg) 0;
}


/* ── Journal Layout ──────────────────────────── */
.journal-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}

.journal-container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}

@media (max-width: 768px) {
  .journal-container {
    grid-template-columns: 1fr;
  }
}


/* ── Journal Header ──────────────────────────── */
.journal-header {
  background: var(--clr-primary-dark);
  color: #FFFFFF;
  padding: var(--sp-lg);
  text-align: center;
}

.journal-header h1 {
  color: #FFFFFF;
  font-size: var(--fs-2xl);
  border-bottom: none;
  margin-bottom: var(--sp-xs);
}

.journal-header .journal-subtitle {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: #FFDDC0;
  margin-bottom: var(--sp-sm);
}

.journal-header .issn {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: #FFCCAA;
  margin-top: var(--sp-xs);
}


/* ── Navigation ──────────────────────────────── */
.journal-nav {
  background: var(--clr-primary);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 var(--sp-lg);
}

.journal-nav a {
  color: #FFDDC0;
  padding: var(--sp-sm) var(--sp-md);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
}

.journal-nav a:hover,
.journal-nav a.active {
  background: var(--clr-primary-dark);
  color: #FFFFFF;
}


/* ── Article Components ───────────────────────── */
.article-header {
  padding: var(--sp-lg) 0 var(--sp-md);
  border-bottom: var(--border-strong);
  margin-bottom: var(--sp-lg);
}

.article-title {
  font-size: var(--fs-2xl);
  color: var(--clr-primary-dark);
  margin-bottom: var(--sp-sm);
  line-height: 1.25;
}

.article-authors {
  font-family: var(--font-ui);
  color: var(--clr-primary);
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: var(--sp-xs);
}

.article-affiliation {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  font-style: italic;
  margin-bottom: var(--sp-sm);
}

.article-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: var(--sp-sm) 0;
  margin: var(--sp-md) 0 var(--sp-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.article-doi {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--clr-link);
}


/* ── Abstract ────────────────────────────────── */
.abstract {
  background: var(--clr-bg-muted);
  border-left: var(--border-strong);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--sp-lg);
}

.abstract h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-primary);
  margin-bottom: var(--sp-sm);
  border-bottom: none;
}

.abstract p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--clr-text);
  margin-bottom: 0;
}


/* ── Keywords ────────────────────────────────── */
.keywords {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.keywords strong {
  color: var(--clr-primary);
  margin-right: 4px;
}

.keywords span {
  display: inline-block;
  background: var(--clr-bg-soft);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  color: var(--clr-text-muted);
  transition: background 0.2s;
}

.keywords span:hover {
  background: var(--clr-bg-muted);
}


/* ── Article Sections ────────────────────────── */
.article-section {
  margin-bottom: var(--sp-lg);
}

.article-section h2 {
  font-size: var(--fs-lg);
  color: var(--clr-primary-dark);
  border-bottom: var(--border-strong);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.article-section h3 {
  font-size: var(--fs-base);
  color: var(--clr-primary);
  margin-bottom: var(--sp-sm);
  font-style: italic;
}


/* ── Tables ──────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--sp-lg);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-family: var(--font-ui);
}

caption {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  font-style: italic;
  margin-bottom: var(--sp-sm);
  text-align: left;
}

thead tr {
  background: var(--clr-primary);
  color: #FFFFFF;
}

th {
  padding: 10px var(--sp-md);
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
}

td {
  padding: 10px var(--sp-md);
  text-align: left;
  border-bottom: 1px solid var(--clr-border-soft);
}

tbody tr:nth-child(even) {
  background: var(--clr-bg-soft);
}

tbody tr:hover {
  background: var(--clr-bg-muted);
}

tfoot tr {
  background: var(--clr-bg-muted);
  font-weight: 600;
  border-top: var(--border-strong);
}


/* ── Figures ─────────────────────────────────── */
.figure {
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  text-align: center;
  margin: var(--sp-lg) 0;
  background: var(--clr-bg-soft);
}

.figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.figure figcaption {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  font-style: italic;
  margin-top: var(--sp-sm);
}

.figure-label {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-primary);
}


/* ── Badges ──────────────────────────────────── */
.badge {
  display: inline-block;
  background: var(--clr-primary);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-outline {
  background: transparent;
  color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
}

.badge-light {
  background: var(--clr-bg-muted);
  color: var(--clr-primary-dark);
  border: var(--border);
}

.badge-accent {
  background: var(--clr-accent);
  color: #5A2000;
}


/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  border: none;
}

.btn-primary {
  background: var(--clr-primary);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--clr-primary-dark);
  color: #FFFFFF;
}

.btn-outline {
  background: transparent;
  color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
}

.btn-outline:hover {
  background: var(--clr-primary);
  color: #FFFFFF;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}


/* ── Dividers ────────────────────────────────── */
.divider {
  border: none;
  border-top: 2px solid var(--clr-border-soft);
  margin: var(--sp-lg) 0;
}

.divider-accent {
  border-top-color: var(--clr-primary);
}

.divider-dark {
  border-top-color: var(--clr-primary-dark);
  border-top-width: 3px;
}


/* ── Sidebar ─────────────────────────────────── */
.journal-sidebar {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

.sidebar-widget {
  background: var(--clr-bg-soft);
  border: var(--border);
  border-top: var(--border-strong);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.sidebar-widget h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-primary);
  margin-bottom: var(--sp-md);
  font-style: normal;
}

.sidebar-widget ul {
  list-style: none;
  padding-left: 0;
}

.sidebar-widget ul li {
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--clr-border-soft);
  color: var(--clr-text-muted);
}

.sidebar-widget ul li:last-child {
  border-bottom: none;
}


/* ── References ──────────────────────────────── */
.references {
  counter-reset: ref-counter;
  padding-left: 0;
  list-style: none;
  margin-top: var(--sp-md);
}

.references li {
  counter-increment: ref-counter;
  padding-left: 2rem;
  position: relative;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-sm);
  line-height: 1.6;
  color: var(--clr-text);
}

.references li::before {
  content: counter(ref-counter) ".";
  position: absolute;
  left: 0;
  color: var(--clr-primary);
  font-weight: 600;
  font-family: var(--font-ui);
}

.references li a {
  color: var(--clr-link);
  word-break: break-all;
}


/* ── Pagination ──────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  margin: var(--sp-lg) 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: var(--border);
  color: var(--clr-text-muted);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.pagination a:hover {
  background: var(--clr-bg-muted);
  color: var(--clr-primary);
}

.pagination .active {
  background: var(--clr-primary);
  color: #FFFFFF;
  border-color: var(--clr-primary);
}


/* ── Article Card (listing) ──────────────────── */
.article-card {
  border: var(--border);
  border-left: var(--border-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-md);
  background: var(--clr-bg);
  transition: background 0.2s;
}

.article-card:hover {
  background: var(--clr-bg-soft);
}

.article-card .card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--clr-primary-dark);
  margin-bottom: var(--sp-xs);
  text-decoration: none;
  display: block;
}

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

.article-card .card-authors {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--clr-primary);
  margin-bottom: var(--sp-xs);
}

.article-card .card-meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--clr-text-muted);
}


/* ── Alert / Notice ──────────────────────────── */
.alert {
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  border-left: var(--border-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-md);
}

.alert-info {
  background: #FFF6F0;
  border-left-color: var(--clr-primary);
  color: var(--clr-primary-dark);
}

.alert-warning {
  background: #FFFBEB;
  border-left-color: #D97706;
  color: #78350F;
}

.alert-success {
  background: #F0FDF4;
  border-left-color: #16A34A;
  color: #14532D;
}


/* ── Footer ──────────────────────────────────── */
.journal-footer {
  background: var(--clr-primary-dark);
  color: #FFCCAA;
  text-align: center;
  padding: var(--sp-lg);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  margin-top: var(--sp-xl);
  line-height: 1.9;
}

.journal-footer h4 {
  color: #FFFFFF;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-sm);
  border-bottom: none;
}

.journal-footer a {
  color: #FF9A4D;
  text-decoration: none;
}

.journal-footer a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.journal-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-lg);
  text-align: left;
  max-width: var(--max-width);
  margin: 0 auto var(--sp-lg);
}

.journal-footer .copyright {
  border-top: 1px solid rgba(255, 150, 80, 0.3);
  padding-top: var(--sp-md);
  color: #D4916A;
  font-size: 12px;
}


/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --fs-2xl: 24px;
    --fs-xl:  20px;
    --sp-lg:  20px;
    --sp-xl:  40px;
  }

  .journal-nav {
    padding: 0 var(--sp-md);
    overflow-x: auto;
  }

  .journal-wrapper {
    padding: 0 var(--sp-md);
  }

  .article-meta {
    flex-direction: column;
    gap: var(--sp-xs);
  }
}

@media print {
  .journal-nav,
  .journal-sidebar,
  .pagination,
  .btn { display: none; }

  body { font-size: 12pt; }
  a { color: var(--clr-text); text-decoration: none; }
  .abstract { border: 1px solid #ccc; }
}