/* 1. Scale the logo container to full width */
.pkp_site_name .is_img {
    display: block;
    width: 100%;
}

/* 2. Set the image behavior for responsive scaling */
.pkp_site_name .is_img img {
    display: block;
    max-width: 100%;    /* Allows image to scale down on small screens */
    width: auto;        /* Maintains aspect ratio */
    height: auto !important; 
    max-height: 180px;  /* Keeps desktop size consistent */
    margin: 0 auto;
    object-fit: contain;
}

/* Mobile-specific fix */
@media only screen and (max-width: 767px) {
    .pkp_site_name .is_img img {
        max-height: none !important; /* Prevents clipping on narrow screens */
        width: 100%;                 /* Forces logo to fill mobile width */
    }
    .pkp_structure_head {
        padding: 10px 0 !important; /* Adds slight breathing room on mobile */
    }
}

/* 3. Cleanup existing theme styles */
.pkp_structure_head {
    padding: 0 !important;
    background-image: none !important;
}

/* 4. Hide the Journal Title text (if your image already contains the name) */
.pkp_site_name .pkp_screen_reader {
    display: none;
}

/* Add a gap to the left of the navigation menu */
.pkp_navigation_primary_wrapper {
    padding-left: 15px !important; /* Adjust the 15px to your liking */
}

/* Ensure the menu doesn't try to stretch or center */
.pkp_navigation_primary {
    float: left !important;
    display: flex !important;
}

/* Change the Main Menu font */
.pkp_navigation_primary a {
    font-family: "Arial", Helvetica, sans-serif !important;
    font-size: 16px !important; 
    font-weight: 600 !important; /* Makes it slightly bold */
    text-transform: none !important; 
    letter-spacing: 0.5px; /* Adds a tiny bit of space between letters */
}

/* 1. Remove the default underline and prepare for animation */
.pkp_navigation_primary a {
    text-decoration: none !important;
    position: relative !important;
    display: inline-block !important;
    transition: color 0.3s ease;
}

/* 2. Create the hidden line under the text */
.pkp_navigation_primary a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Thickness of the line */
    bottom: -2px; /* Distance from text */
    left: 50%; /* Start from the middle */
    background-color: #007ab2; /* Change this to your journal's primary color */
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

/* 3. Animate the line to full width on hover */
.pkp_navigation_primary a:hover::after {
    width: 100%;
}

/* 4. Optional: Change text color on hover */
.pkp_navigation_primary a:hover {
    color: #007ab2 !important; /* Matches the line color */
}

/* Targets every sidebar block title globally */
.pkp_structure_sidebar .pkp_block .title {
    background-color: #003049  !important; 
    color: #FFFFFF !important;            /* White text */
    padding: 10px 15px !important;        /* Adds space inside the bar */
    display: block !important;             /* Ensures it looks like a full bar */
    text-transform: uppercase;            /* All caps to match your example */
    font-weight: bold;                    /* Makes text stand out */
    margin-bottom: 10px;                  /* Space before the block content starts */
    border-radius: 4px;                   /* Optional: slightly rounded corners */
}

.custom-sidebar-menu .menu-item {
    display: block;
    background-color: #003049;
    color: #FFFFFF !important;
    padding: 10px;
    margin-bottom: 2px;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s, font-size 0.3s; 
    height: 20px; 
    line-height: 20px; 
    box-sizing: content-box; 
}

.custom-sidebar-menu .menu-item:hover {
    background-color: #3A5E7A;
    font-size: 1.1em; 
}

/* Ensure username is visible in the header */
.pkp_structure_head .pkp_navigation_user .username {
    display: inline-block !important;
}

/* ==========================
   BACKGROUND / WALLPAPER
   ========================== */

html,
body {
    background: #EAE2F8
                url("https://jurnal.pascaunipa.id/public/images/tribal-pattern-lavender-1.png")
                repeat top center !important;
    background-size: 250px auto !important;   /* Perkecil motif wallpaper */
}


/* ==========================
   MAIN JOURNAL PAGE
   ========================== */

.pkp_structure_page {
    width: 1200px;                /* Lebar halaman utama */
    max-width: 95%;
    margin: 20px auto !important;
    background: #ffffff !important;
    box-shadow: 0 0 12px rgba(0,0,0,.08);
}