/**
 * Taylor & Francis Online (tandfonline) Theme Customization for OJS 3.5
 */

/* ==========================================================================
   1. Pengaturan Variabel Utama & Tipografi
   ========================================================================== */
:root {
  --tf-red: #d11242;          /* Merah khas Taylor & Francis */
  --tf-red-hover: #a80e35;
  --tf-dark-blue: #0c2340;    /* Biru gelap navigasi & teks utama */
  --tf-text-dark: #222222;
  --tf-text-muted: #666666;
  --tf-bg-light: #f8f9fa;     /* Background blok & sidebar */
  --tf-border: #e2e8f0;
  --tf-font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tf-font-serif: "Roboto Serif", Georgia, serif;
}

body {
  font-family: var(--tf-font-sans);
  color: var(--tf-text-dark);
  background-color: #ffffff;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   2. Header Sites & Navigasi Atas
   ========================================================================== */
.pkp_site_header {
  background-color: #ffffff !important;
  border-bottom: 2px solid var(--tf-red) !important;
  padding: 15px 0 !important;
}

.pkp_site_header .pkp_navigation_primary_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Navigasi Akun / User */
.pkp_navigation_user {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_navigation_user a {
  font-size: 0.88rem !important;
  color: var(--tf-dark-blue) !important;
  text-decoration: none;
  font-weight: 600;
}

.pkp_navigation_user a:hover {
  color: var(--tf-red) !important;
}

/* ==========================================================================
   3. Journal Header / Banner (Bersih & Elegan Gaya Tandfonline)
   ========================================================================== */
.homepage_about,
.pkp_structure_head {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--tf-border) !important;
  padding: 30px 0 !important;
}

.homepage_about .container,
.pkp_structure_head .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.journal_title,
.homepage_about h1 {
  font-family: var(--tf-font-sans) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--tf-dark-blue) !important;
  line-height: 1.25;
  margin: 0 0 10px 0 !important;
}

/* ==========================================================================
   4. Menu Navigasi Utama (Tab Horizontal)
   ========================================================================== */
.pkp_navigation_primary {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--tf-border) !important;
  display: flex !important;
  gap: 5px;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 20px !important;
  list-style: none !important;
}

.pkp_navigation_primary > li > a {
  color: var(--tf-dark-blue) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 14px 18px !important;
  display: block;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.active > a {
  color: var(--tf-red) !important;
  border-bottom: 3px solid var(--tf-red) !important;
  background-color: transparent !important;
}

/* ==========================================================================
   5. Tampilan Halaman Artikel (Article Landing Page)
   ========================================================================== */
.page_article .obj_article_details {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Judul Artikel */
.page_article .page_title {
  font-family: var(--tf-font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--tf-dark-blue);
  line-height: 1.3;
  margin-bottom: 15px;
}

/* Penulis & Afiliasi */
.page_article .authors {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tf-red);
  margin-bottom: 20px;
}

/* Box Abstrak */
.page_article .item.abstract {
  background-color: var(--tf-bg-light);
  border-top: 3px solid var(--tf-dark-blue);
  padding: 25px;
  margin: 30px 0;
}

.page_article .item.abstract .label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tf-dark-blue);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page_article .item.abstract .value {
  font-size: 1rem;
  color: var(--tf-text-dark);
  line-height: 1.75;
}

/* Tombol Akses PDF / Galley */
.page_article .item.galleys .obj_galley_link {
  background-color: var(--tf-red) !important;
  color: #ffffff !important;
  border-radius: 4px;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.page_article .item.galleys .obj_galley_link:hover {
  background-color: var(--tf-red-hover) !important;
}

/* ==========================================================================
   6. Sidebar Widget
   ========================================================================== */
.pkp_structure_sidebar {
  padding-left: 20px;
}

.pkp_block .title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tf-dark-blue);
  border-bottom: 2px solid var(--tf-red);
  padding-bottom: 8px;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.pkp_structure_footer_wrapper {
  background-color: var(--tf-dark-blue);
  color: #ffffff;
  padding: 40px 0;
  margin-top: 60px;
}

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

.pkp_structure_footer a:hover {
  color: var(--tf-red);
}