/* Custom CSS for Shi'ar: Sharia Tourism Research by @ilham.djaya */

/* HEADER */
.pkp_site_name .is_img img {
    display: block;
    max-height: 365px;
    width: auto;
    height: auto;
}

.pkp_navigation_primary {
    text-align: center;
    background: #1e9272; /* Elegant emerald green */
    width: 100%;
    padding: 0 5%;
    border-radius: 60px;
}

.page_index_journal {
    display: flex;
    flex-direction: column; /* Layout in columns */
}

.pkp_structure_main {
    background: white;
}

.current_issue {
    order: 2;
}

.additional_content {
    order: 1;
}

.pkp_brand_footer {
    display: none;
}

.pkp_structure_page {
    background: url("https://ejurnal.iainpare.ac.id//public/site/images/muhilhamjaya/pattern_islamic.jpg") repeat fixed;
}

.pkp_block a {
    color: black;
}

/* Articles */
ul.cmp_article_list.articles li {
    background: rgba(255, 255, 255, 0.9); /* Slightly opaque white */
    padding: 20px;
    border-radius: 15px; /* Rounded corners for a modern look */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    backdrop-filter: blur(10px); /* Background blur effect for a glass look */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Thin border to add to glass effect */
}

ul.cmp_article_list.articles li:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Sharper shadow on hover */
}

/* SIDEBAR */
.pkp_block .title {
    display: table;
    color: #ffffff;
    margin-top: 1px;
    padding: 4px 10px;
    width: 100%;
    background: #1e9272; /* Elegant emerald green */
    border: solid 1px #1e9272;
    border-radius: 6px;
}

.pkp_block .content ul li {
    display: table;
    margin-top: 1px;
    padding: 4px 10px;
    width: 100%;
    background: #ffffff; /* Light, neutral background for sidebar */
    vertical-align: middle;
    transition-property: background, color;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    border: solid 1px #C9A455; /* Soft gold border for elegance */
    border-radius: 6px;
}

.pkp_block .content ul li:hover {
    background: #c9a45591; /* Subtle grey background for hover */
    color: #333; /* Dark grey text on hover for contrast */
}

.pkp_block a {
    color: black;
}

.pkp_block a:hover {
    color: black;
}