/* ==========================================================================
   CUSTOM MODERN CSS FOR OPEN JOURNAL SYSTEMS (OJS 3.x) - VERSION 3
   Seminar Nasional Waluyo Jatmiko 2026 - Universitas Pelita Bangsa
   Theme Domain: Rich Royal Navy Blue & Warm Premium Gold
   Text Rules: White text on Blue backgrounds | Black text on Gold backgrounds
   Header: Includes Custom Header Text Branding
   ========================================================================== */

/* --- 1. CSS VARIABLES / DESIGN TOKENS --- */
:root {
  /* Brand Dominant Palette (Blue & Gold) */
  --primary-blue: #0F2C59;          /* Royal Navy Blue (Primary Background) */
  --primary-blue-hover: #1E40AF;    /* Bright Blue Hover */
  --primary-blue-light: #EFF6FF;    /* Subtle Ice Blue Tint */
  
  --accent-gold: #D97706;          /* Rich Deep Gold */
  --accent-gold-hover: #B45309;    /* Dark Gold Hover */
  --accent-gold-light: #FEF3C7;    /* Soft Light Gold Tint */
  
  /* Strict Text Color Rules */
  --text-on-blue: #FFFFFF;         /* White text for blue background */
  --text-on-gold: #000000;         /* Black text for gold background */
  
  /* Neutral UI Colors */
  --bg-page: #F8FAFC;              /* Clean Slate Background */
  --bg-card: #FFFFFF;              /* Pure White Card */
  --text-primary: #0F172A;         /* Dark Slate Text for Light Backgrounds */
  --text-secondary: #475569;       /* Muted Slate Text */
  --border-color: #CBD5E1;         /* Border Line */
  --border-gold: #F59E0B;          /* Gold Border Accent */
  
  /* Elevation & Structure */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.15);
  
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. GLOBAL BASE STYLES --- */
body {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.6;
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: var(--transition);
}

a:hover, a:focus {
  color: var(--accent-gold);
}

.pkp_structure_page {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* --- 3. HEADER & CUSTOM TEXT BRANDING --- */
.pkp_structure_head {
  background: var(--primary-blue) !important; /* Blue Base */
  color: var(--text-on-blue) !important;      /* White Text */
  border-bottom: 4px solid var(--accent-gold); /* Gold Accent Border */
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 16px 0 !important;
}

/* Menyembunyikan judul asli jika perlu diganti teks kustom */
.pkp_site_name > a {
  display: none !important;
}

/* Injeksi Teks Header Kustom */
.pkp_site_name::before {
  content: "SEMINAR NASIONAL TEKNIK INDUSTRI WALUYO JATMIKO\A UNIVERSITAS PELITA BANGSA\A 2026";
  white-space: pre-wrap;
  display: block;
  color: var(--text-on-blue) !important; /* Tulisan Putih di Dasar Biru */
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-left: 5px solid var(--accent-gold); /* Aksen garis Gold di samping teks header */
  padding-left: 14px;
}

/* Primary Navigation Links */
.pkp_navigation_primary_wrapper {
  background: transparent !important;
  margin-top: 10px;
}

.pkp_navigation_primary > li > a {
  color: var(--text-on-blue) !important; /* White Text on Blue */
  font-weight: 600 !important;
  font-size: 0.925rem !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm);
  transition: var(--transition) !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.has-submenu:hover > a {
  background-color: var(--accent-gold) !important; /* Gold Hover */
  color: var(--text-on-gold) !important;            /* Black Text on Gold */
}

/* Navigation Dropdown Menu */
.pkp_navigation_primary ul {
  background: var(--primary-blue) !important;      /* Blue Menu Background */
  border: 2px solid var(--accent-gold) !important;  /* Gold Border */
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
}

.pkp_navigation_primary ul a {
  color: var(--text-on-blue) !important; /* White Text */
  border-radius: var(--radius-sm);
  padding: 8px 14px !important;
}

.pkp_navigation_primary ul a:hover {
  background-color: var(--accent-gold) !important; /* Gold Background */
  color: var(--text-on-gold) !important;            /* Black Text */
}

/* --- 4. HERO SECTION & ANNOUNCEMENTS --- */
.homepage_about, 
.journal_summary,
.page_index_journal .current_issue {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 30px;
  border: 1px solid var(--border-color);
  border-left: 6px solid var(--accent-gold); /* Thick Gold Left Border */
  box-shadow: var(--shadow-md);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-blue) !important;
  font-weight: 700 !important;
}

.pkp_structure_main h1,
.pkp_structure_main h2.title {
  font-size: 1.75rem !important;
  border-bottom: 3px solid var(--accent-gold);
  padding-bottom: 10px;
  margin-bottom: 24px;
}

/* --- 5. ARTICLE LIST & GALLEY BUTTONS --- */
.obj_article_summary {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-left: 4px solid var(--primary-blue) !important;
  border-radius: var(--radius-md) !important;
  padding: 22px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
}

.obj_article_summary:hover {
  border-left-color: var(--accent-gold) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.obj_article_summary .title a {
  color: var(--primary-blue) !important;
  font-weight: 700 !important;
}

.obj_article_summary .title a:hover {
  color: var(--accent-gold) !important;
}

/* Galley Links / PDF Buttons (BLUE BASE -> WHITE TEXT) */
.obj_galley_link,
a.galley_link {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--primary-blue) !important; /* Blue Button */
  color: var(--text-on-blue) !important;             /* White Text */
  padding: 8px 18px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: var(--transition) !important;
  border: 1px solid var(--primary-blue);
}

.obj_galley_link:hover,
a.galley_link:hover {
  background-color: var(--accent-gold) !important; /* Gold Hover */
  color: var(--text-on-gold) !important;            /* Black Text */
  border-color: var(--accent-gold);
}

/* --- 6. SIDEBAR & SUBMISSION BUTTON --- */
.pkp_block {
  background: var(--bg-card) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

.pkp_block .title {
  font-size: 1rem !important;
  text-transform: uppercase !important;
  color: var(--primary-blue) !important;
  border-bottom: 2px solid var(--accent-gold) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
}

/* Submission Call To Action (GOLD BASE -> BLACK TEXT) */
.pkp_block.block_make_submission a,
.block_custom_submission_btn {
  display: block;
  text-align: center;
  background: var(--accent-gold) !important;       /* Gold Background */
  color: var(--text-on-gold) !important;            /* Black Text */
  font-weight: 700 !important;
  padding: 12px 20px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
  transition: var(--transition) !important;
}

.pkp_block.block_make_submission a:hover,
.block_custom_submission_btn:hover {
  background: var(--primary-blue) !important;     /* Blue Hover */
  color: var(--text-on-blue) !important;           /* White Text */
  transform: translateY(-2px);
}

/* --- 7. BUTTONS & FORMS --- */
.pkp_button, 
input[type="submit"], 
button.submit {
  background-color: var(--primary-blue) !important; /* Blue Background */
  color: var(--text-on-blue) !important;            /* White Text */
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: var(--transition) !important;
}

.pkp_button:hover, 
input[type="submit"]:hover {
  background-color: var(--accent-gold) !important; /* Gold Background */
  color: var(--text-on-gold) !important;            /* Black Text */
}

input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus, 
select:focus {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2) !important;
}

/* --- 8. FOOTER STYLING --- */
.pkp_structure_footer_wrapper {
  background-color: var(--primary-blue) !important; /* Blue Base Footer */
  color: var(--text-on-blue) !important;            /* White Text */
  margin-top: 60px !important;
  padding: 40px 0 20px 0 !important;
  border-top: 5px solid var(--accent-gold);          /* Thick Gold Top Accent */
}

.pkp_structure_footer {
  color: #E2E8F0 !important;
}

.pkp_structure_footer a {
  color: var(--accent-gold) !important; /* Gold Link Text */
  font-weight: 600;
}

.pkp_structure_footer a:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
}

.pkp_brand_footer {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 20px;
  color: #94A3B8;
}

/* --- 9. RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
  .pkp_structure_sidebar {
    padding-left: 0;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .pkp_site_name::before {
    font-size: 1rem;
  }
}