/* ========================================================================
   AJSTD stylesheet
   v1.031; 4 April 2019
   (c) 2018-2019 Joaquim Baeta <mail@joaquimbaeta.com>
  
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <https://www.gnu.org/licenses/>.

   ------------------------------------------------------------------------
     
   Table of contents 

   1.......Typography
   2.......Global
   2.1.....Body
   2.2.....Header
   2.3.....Navbar
   2.4.....Footer
   2.5.....Tooltips
   3.......Styling
   4.......Page-specific
   4.1.....Homepage
   4.1.1...Homepage issue
   4.1.2...Homepage table of contents
   4.1.3...Introduction
   4.2.....Article page
   4.3.....Contact page
   4.4.....Submissions page
   4.5.....FAQ page

   ======================================================================== */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');


/* 1. Typography */

@import url('https://fonts.googleapis.com/css?family=Lora:400,400i');

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #610c3a;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
}

a {
    color: #610c3a;
}

::selection { /* Style selections */
    background: #610c3a;
    color: #fcfcfc;
}

.border-hover { /* Hover effect on regular links */
    color: #610c3a;
    border-bottom: 0px solid #d1b8c5;
    transition: cubic-bezier(.45,.05,.55,.95) 0.15s;
}

.border-hover:hover {
    text-decoration: none;
    border-bottom: 3px solid #d1b8c5;
}

.navbar-logo a {
    border-bottom: 0px solid #d1b8c5;
    transition: cubic-bezier(.45,.05,.55,.95) 0.15s;
}

.navbar-logo a:hover {
    border-bottom: 10px solid #d1b8c5;
}

.article-summary-title a {
    color: #161413;
    border-bottom: 0px solid #d1b8c5;
    transition: cubic-bezier(.45,.05,.55,.95) 0.15s;
}

.article-summary-title a:hover {
    border-bottom: 3px solid #d1b8c5;
}

.article-details-issue-identifier a {
    border-bottom: 0px solid #d1b8c5;
    transition: cubic-bezier(.45,.05,.55,.95) 0.15s;
}

.article-details-issue-identifier a:hover, .article-details-issue-identifier a:focus {
    text-decoration: none;
    border-bottom: 3px solid #d1b8c5;
}

.article-details-doi a {
    border-bottom: 0px solid #d1b8c5;
    transition: cubic-bezier(.45,.05,.55,.95) 0.15s;
}

.article-details-doi a:hover, .article-details-doi a:focus {
    text-decoration: none;
    border-bottom: 3px solid #d1b8c5;
}

/* 2. Global */

/* 2.1 Body */

body {
    color: #161413;
    background-color: #fcfcfc;
}

/* 2.2 Header */

.main-header {
    border-bottom: 1px solid #e7e7e7;
}

.navbar-logo {
    max-width: 80%;
    padding-top: 2.5rem;
}

.navbar-logo img {
    width: 100%;
}

/* 2.3 Navbar */

#userNav .nav-link, .language-toggle .dropdown-toggle {
    color: #a18a96;
}

#userNav .nav-link:hover, .language-toggle .dropdown-toggle:hover, #userNav .nav-link:focus, .language-toggle .dropdown-toggle:focus {
    outline: 0;
    border-color: transparent;
    color: #775d6b;
}

#primaryNav .nav-link:hover, #primaryNav .nav-link:focus {
    background: transparent;
    color: #610c3a;
    border-color: transparent;
}

.badge-light {
    background: #d1b8c5cc;
    color: #161413aa;
}

.dropdown-item {
    transition: ease-in-out 0.2s;
}

.dropdown-item:hover, .dropdown-item:focus {
    border-color: transparent;
    color: #d1b8c5 !important;
}

#primaryNav .dropdown-menu.show {
    border-radius: 0px 0px 20px 20px;
}

#primaryNav .dropdown-item {
    color: #f9f9f9;
    transition: ease-in-out 0.2s;
}

#primaryNav .dropdown-item:hover, #primaryNav .dropdown-item:focus {
    background: transparent;
    color: #d1b8c5;
    border-color: transparent;
}

/* Menambahkan ikon rumah ke menu 'Home' */
#primaryNav .nav-link.home::before {
    content: "\f015"; /* Ikon rumah dari Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 5px;
}

/* Menambahkan ikon info ke menu 'About' */
#primaryNav .nav-link.about::before {
    content: "\f05a"; /* Ikon info dari Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 5px;
}


/* 2.4 Footer */

#customblock-prefooter {
    flex-basis: auto;
    width: 100%;
    padding: 0;
}

.site-footer {
    background: #610c3a;
    color: #d1b8c5;
    padding-bottom: 0;
}

.site-footer a {
    color: #f9f9f9;
    text-decoration: none;
    transition: ease-in-out 0.2s;
}

.site-footer a:hover {
    color: #d1b8c5;
    text-decoration: none;
}

.site-footer .row .align-self-center { /* modify the align-self-center class in the footer because it's hard-coded in the template */
    -ms-flex-item-align: flex-start !important;
    align-self: flex-start !important;
}

.footer-brand-image {
    max-width: 92px;
}

/* 2.5 Tooltips */

.hint {
  position: relative;
  display: inline-block;
  color: #610c3a;
}

.hint .hint-text {
  visibility: hidden;
  width: 200px;
  background-color: #610c3a;
  color: #fcfcfc;
  border-radius: 10px;
  padding: 10px 10px;
  position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s;
}

.hint .hint-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #610c3a transparent transparent transparent;
}

.hint:hover .hint-text {
  visibility: visible;
  opacity: 1;
}

/* 3. Styling */

.btn { /* Buttons */
    border-radius: 10px;
    border: 1px solid #a18a96;
    color: #775d6b;
    text-transform: uppercase;
}

.btn-primary { /* Main (violet) buttons */
    border-radius: 20px 40px 40px 20px;
    border-color: #48092b !important;
    color: #fcfcfc;
}

.btn-primary:hover, .btn-primary:focus {
    background: #161413;
    border-color: #161413 !important;
    color: #fcfcfc;
}

.modal-content .btn-primary { /* Buttons in modals with violet backgrounds */
    background: transparent;
    border-radius: 10px !important;
    border-color: #fcfcfc44;
    color: #fcfcfcaa;
    text-transform: uppercase;
    transition: ease-in-out 0.2s;
}

.modal-content .btn-primary:hover {
    background: transparent;
    border-color: #fcfcfc77;
    color: #fcfcfc;
}

.form-control { /* Forms */
    background-color: #fcfcfc;
}


.form-control:hover {
    border-color: #d1b8c5;
}

.form-control:focus {

    color: #495057;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #d1b8c5;
}

@media (max-width: 575px) { /* Lists with images on the side */
    .list-img {
        text-align: center !important;
    }

    .list-img > img {
        width: 150px !important;
        margin-bottom: 2rem;
    }
}

/* 4. Page-specific */

/* 4.1 Homepage */

/* Issue Description Box */
.homepage-issue-description-wrapper {
    background: linear-gradient(145deg, #ffd700, #f6e58d); /* Gradasi dari emas ke emas muda */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2), -4px -4px 12px rgba(255, 255, 255, 0.9); /* Dual-direction shadow untuk kesan kedalaman */
    height: auto; /* Ketinggian otomatis agar sesuai dengan konten */
    padding: 3rem 3.5rem;
    border-radius: 15px; /* Border radius lebih besar untuk estetika yang halus */
    position: relative; /* Membuat posisi relatif agar konten dapat diatur */
    overflow: hidden; /* Memastikan konten tidak meluap */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Konten dimulai dari atas */
}

/* Gradasi Warna di Bawah Teks */
.homepage-issue-description::after {
    background-image: linear-gradient(rgba(255, 236, 179, 0), #ffecb3 50%); /* Gradasi dari transparan ke emas muda */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Pastikan gradasi berada di belakang teks */
}

/* Issue Description Heading */
.homepage-issue-description .h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 600; /* Lebih tebal untuk penekanan */
    color: #8b5a2b; /* Warna coklat gelap untuk kontras yang jelas */
    margin-bottom: 1rem; /* Jarak antara heading dan paragraf */
}

/* Issue Description Paragraph */
.homepage-issue-description p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #5c4d00; /* Warna coklat gelap untuk kontras yang lebih baik */
    line-height: 1.6;
    margin-bottom: 2rem; /* Jarak antara paragraf */
}

/* Responsive Adjustments */
@media (max-width: 1199px) {
    .homepage-issue-current {
        color: #5a5a5a;
    }

    .homepage-issue-published {
        color: #888888;
    }

    .homepage-issue-description-wrapper {
        background: #f5f5f5; /* Latar belakang lebih lembut untuk layar kecil */
        box-shadow: none;
    }

    .homepage-issue-description::after {
        background-image: linear-gradient(rgba(255, 236, 179, 0), #ffecb3 20%);
    }
}

/* 4.1.2 Homepage Table of Contents */

/* Section Titles */
.issue-toc-section-title {
    font-size: 1.5rem; /* Smaller size for better balance */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #2c3e50; /* Dark blue */
    border-bottom: 1px solid #2980b9; /* Thin, clean blue underline */
    padding-bottom: 0.3rem;
    margin-bottom: 1.5rem; /* Less margin to keep it compact */
    letter-spacing: 0.01em;
}

/* Article Titles */
.article-summary-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.0rem; /* Smaller for a compact look */
    font-weight: 600;
    color: #34495e;
    margin-bottom: 0.5rem; /* Less spacing between title and next element */
    transition: color 0.2s ease;
}

.article-summary-title:hover {
    color: #2980b9; /* Professional blue hover effect */
    text-shadow: none; /* No shadow for clean effect */
}

/* Authors and Pages */
.article-summary-authors, 
.article-summary-pages {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem; /* Smaller text for secondary info */
    color: #d4af37; /* Muted grey */
    font-weight: 800; /* Bold for clear emphasis on author names */
    line-height: 1.5; /* Slightly reduced line-height */
    margin-bottom: 1rem;
}

/* Line between authors and title */
.article-summary-title::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #d4af37; /* Thin grey line */
    margin-bottom: 0.5rem;
}

/* Article Summary Box */
.article-summary {
    padding: 1rem; /* Reduced padding for a more compact box */
    border: 4px solid #d4af37;
    border-radius: 6px; /* Smaller radius for a cleaner look */
    background: #ecf0f1;
    color: #2c3e50;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05); /* Softer shadow */
    margin-bottom: 1.5rem; /* Reduced space between article boxes */
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.article-summary:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); /* Softer hover effect */
    transform: translateY(-2px); /* Gentle lift effect */
}

/* Link Styling */
.article-summary a {
    text-decoration: none; /* No underline */
    color: inherit; /* Inherit the color from the article title */
}

/* 4.1.3 Introduction */

.asean-terms {
    list-style: none;
}

.asean-terms li::before {
    content: "\2aa2"; 
    color: #610c3a;
    font-size: 1rem;
    display: inline-block; 
    width: 2.5rem;
    margin-left: -2.5rem;
}




/* 4.2 Article page */

.article-details-issue-identifier a {
    font-family: 'Fira Sans';
    color: #817F7F;
    font-size: 1.15rem;
}

.article-details-issue-section {
    color: #817F7F;
}

.article-details-published {
    color: #817F7F;
}

.authors-string {
    font-size: 1.25rem;
}

.authors-string a {
    border-bottom: 0px solid #d1b8c5;
}

/* 4.3 Contact page */

.contact-name {
    font-size: 16px;
}

.contact-affiliation {
    font-size: 16px;  
}

.contact-email {
    font-size: 16px;
}

/* 4.4 Submissions page */

.submissions-checklist ul {
    margin-top: 1rem;
    list-style: none;
}

.submissions-checklist ul li::before {
    content: "\2aa2"; 
    color: #610c3a;
    font-size: 1rem;
    display: inline-block; 
    width: 2.5rem;
    margin-left: -2.7rem;
}

/* 4.5 FAQ page */

.faq-return a {
    color: #8E6A7D;
    transition: ease-in-out 0.2s;
}

.faq-return a:hover {
    color: #610c3a;
    text-decoration: none;
}

/* Keywords and categories */
.article-details-keywords,
.article-details-categories {
    margin-top: 20px;
}

.keyword-link {
    display: inline-block;
    margin: 5px;
    padding: 8px 15px; /* More padding for clickable elements */
    background: transparent; /* No background */
    border-radius: 25px; /* Rounded corners */
    text-decoration: none;
    color: #B8860B; /* Golden color for keywords */
    transition: background 0.3s, color 0.3s, transform 0.3s; /* Transition for hover effect */
}

.keyword-link:hover {
    background: rgba(255, 215, 0, 0.2); /* Light gold background on hover */
    color: #FFD700; /* Brighter gold on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}