/* ==========================================================================
   FACULTY OF LAW - UNIVERSITAS PATTIMURA
   OJS 3.5 CUSTOM CSS

   Version : 1.5
   Updated : 2026-09

   TABLE OF CONTENTS

   01. Variables
   02. Layout
   03. Top Bar
   04. Sidebar
   05. Homepage
   06. Article
   07. Article Metadata
   08. Research Metadata
   09. Footer
   10. Mobile
   11. Open Access
   12. Article Share
   13. References
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES
   ========================================================================== */

:root {

    --fh-primary: #012b44;
    --fh-primary-light: #0056b3;

    --fh-text: #2d3748;
    --fh-text-muted: #555;

    --fh-bg: #ffffff;
    --fh-hover: #f5f9fc;
    --fh-active: #e8f2ff;

    --fh-border: #d9e2ec;
    --fh-border-light: #edf2f7;

    --fh-radius: .5rem;

    --fh-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    --fh-shadow-hover: 0 4px 14px rgba(0, 0, 0, .08);

}


/* ==========================================================================
   02. LAYOUT
   ========================================================================== */

@media (min-width: 992px) {

    .pkp_structure_sidebar {
        padding-left: 1.5rem;
        box-sizing: border-box;
    }

}


/* ==========================================================================
   03. TOP BAR
   ========================================================================== */

.topbarfh {

    position: relative;
    z-index: 9999;

    padding: .5rem 0;

    background: var(--fh-primary);

    font-size: .82rem;

}

.topbarwrap {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    gap: .75rem;

    width: min(95%, 1200px);
    margin: 0 auto;

}

.topbar-left {

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

}

.topbarfh a {

    color: #fff;
    text-decoration: none;
    font-weight: 500;

    transition: opacity .2s ease;

}

.topbarfh a:hover {

    opacity: .8;

}


/* ==========================================================================
   04. SIDEBAR
   ========================================================================== */

/* Sidebar card */

.pkp_structure_sidebar>.pkp_block {

    margin-bottom: 1.25rem;

    background: var(--fh-bg);

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);

    overflow: hidden;

    box-shadow: var(--fh-shadow);

    transition: box-shadow .25s ease;

}

.pkp_structure_sidebar>.pkp_block:hover {

    box-shadow: var(--fh-shadow-hover);

}

/* Nested block */

.pkp_structure_sidebar .pkp_block .pkp_block {

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

}

/* Screen reader title */

.pkp_structure_sidebar>.pkp_block>.pkp_screen_reader {

    display: none;

}

/* Sidebar title */

.pkp_structure_sidebar .title {

    margin: 0;

    padding: .9rem 1rem;

    background: var(--fh-primary);

    color: #fff;

    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;

}

/* Sidebar content */

.pkp_structure_sidebar .content {

    margin: 0;
    padding: 0;

    border: 0;

}

.pkp_structure_sidebar ul {

    margin: 0;
    padding: 0;

    list-style: none;

}

.pkp_structure_sidebar li {

    margin: 0;

    border-bottom: 1px solid var(--fh-border-light);

}

.pkp_structure_sidebar li:last-child {

    border-bottom: 0;

}

.pkp_structure_sidebar li a {

    display: flex;
    align-items: center;

    padding: .75rem 1rem;

    color: var(--fh-text);

    text-decoration: none;

    font-size: .95rem;
    line-height: 1.45;

    transition:
        background-color .2s ease,
        color .2s ease;

}

.pkp_structure_sidebar li a::before {

    content: "›";

    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 18px;
    margin-right: .6rem;

    text-align: center;

    color: var(--fh-primary-light);

    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;

    flex-shrink: 0;

}

.pkp_structure_sidebar li a:hover {

    background: var(--fh-hover);

    color: var(--fh-primary-light);

}

.pkp_structure_sidebar li.current a,
.pkp_structure_sidebar li a[aria-current="page"] {

    background: var(--fh-active);

    color: var(--fh-primary-light);

    font-weight: 600;

    border-left: 4px solid var(--fh-primary-light);

    padding-left: calc(1rem - 4px);

}

.pkp_structure_sidebar img {

    display: block;

    max-width: 100%;
    height: auto;

    margin: 0 auto;

}


/* ==========================================================================
   05. HOMEPAGE
   ========================================================================== */

.page_index_journal .current_issue .cover img {

    display: block;

    width: 50%;
    max-width: 320px;

    height: auto;

    margin: 0 auto;

}

.page_index_journal .homepage_image {

    margin-bottom: 2rem;

    text-align: center;

}

.page_index_journal .homepage_image img {

    display: inline-block;

    max-width: 500px;
    width: auto;
    height: auto;

}


/* ==========================================================================
   06. ARTICLE
   ========================================================================== */

.obj_article_details .item.abstract {

    text-align: justify;

    text-justify: inter-word;

    hyphens: auto;

}


/* ==========================================================================
   07. ARTICLE METADATA
   ========================================================================== */

.article-meta-extra {

    margin-top: .5rem;

    font-size: .9rem;

    color: var(--fh-text-muted);

}

.doi,
.article-id {

    margin-top: .35rem;

    font-size: .9rem;

}


/* ==========================================================================
   08. RESEARCH METADATA
   ========================================================================== */

.item.crossmark {

    margin-top: .75rem;

}

.item.funding {

    margin-top: 1rem;

}

.dimensions-badge {

    margin-top: 1.25rem;

}

.dimensions-badge .label {

    margin-bottom: .5rem;

    font-size: 1rem;
    font-weight: 600;

}

.dimensions-badge .value {

    display: flex;
    align-items: center;

    margin-top: .5rem;

}

.app_affiliation {

    display: inline-flex;
    align-items: baseline;

    gap: .35rem;

}

/* Author affiliation */

.obj_article_details .authors .affiliation {

    line-height: 1.5;

}

.obj_article_details .authors .affiliation svg {

    width: 13px;
    height: 13px;

    vertical-align: -2px;

}

.obj_article_details .authors .affiliation a,
.obj_article_details .authors .affiliation span {

    vertical-align: baseline;

}

/* ==========================================================================
   CONTENT LINKS
   ========================================================================== */

/* Semua link pada konten halaman (tidak termasuk menu/sidebar) */

.pkp_structure_main a {

    text-decoration: none;

    transition:
        color .2s ease,
        opacity .2s ease;

}

.pkp_structure_main a:hover,
.pkp_structure_main a:focus {

    text-decoration: none;

    color: var(--fh-primary-light);

    opacity: .9;

}


/* ==========================================================================
   09. FOOTER
   ========================================================================== */

.pkp_brand_footer {

    display: none !important;

}

footer a,
.pkp_footer_content a {

    text-decoration: none;

    transition: opacity .2s ease;

}

footer a:hover,
.pkp_footer_content a:hover {

    opacity: .75;

}


/* ==========================================================================
   10. MOBILE
   ========================================================================== */

@media (max-width: 991px) {

    .pkp_structure_sidebar {

        padding-left: 0;

    }

    .journal-open-access {
        display: none !important;
    }

}

@media (max-width: 768px) {

    .topbarwrap {

        flex-direction: column;
        align-items: flex-start;

    }

    .page_index_journal .current_issue .cover img {

        width: 75%;
        max-width: 260px;

    }

    .journal-open-access {
        display: none;
    }

}

/* ==========================================================================
   11. OPEN ACCESS
   ========================================================================== */
/* Article Detail */
.item.open_access {
    text-align: center;
    margin: 10px 0 14px;
}

.oa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #198754;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease;
}

.oa-badge img {
    width: 14px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.oa-badge:hover,
.oa-badge:focus {
    color: #146c43;
    text-decoration: underline;
}


/* ToC / Issue */
.article-oa {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    transform: translateY(2px);
}

.article-oa .oa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #212529;
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
}

.article-oa .oa-badge img {
    width: 12px;
    height: auto;
    display: block;
}

.article-oa,
.article-oa:hover,
.article-oa * {
    text-decoration: none !important;
}

/* Open Access indicator */
.journal-open-access {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 14px;
    font-size: 0.7em;
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
    text-decoration: none;
}

.journal-open-access:hover,
.journal-open-access:focus {
    color: inherit;
    text-decoration: underline;
}

.journal-open-access img {
    width: 16px;
    height: auto;
    flex-shrink: 0;
    display: block;
}

.journal-open-access span {
    color: inherit;
}

/* ==========================================================================
   12. ARTICLE SHARE
   ========================================================================== */

/*
 * Article sharing component
 *
 * The markup is inserted in article_details.tpl immediately after DOI.
 *
 * UI actions:
 * - Native Web Share
 * - Copy Link
 * - WhatsApp
 * - Facebook
 * - X
 * - Threads
 * - LinkedIn
 * - Reddit
 * - Email
 *
 * Brand icons use inline SVG with currentColor.
 * No external icon library or CDN is required.
 */


/* --------------------------------------------------------------------------
   Share container
   -------------------------------------------------------------------------- */

.obj_article_details .main_entry .item.article-share {

    /*
     * OJS Default Theme applies vertical padding to every .item.
     * DOI is immediately followed by Share, so the default DOI
     * bottom padding is removed and Share receives controlled spacing.
     */

    margin-top: 0;
    margin-bottom: 0;

    padding-top: .65rem;
    padding-bottom: .75rem;

}

.article-share-wrapper {

    position: relative;

    display: inline-block;

    margin: 0;

}


/* --------------------------------------------------------------------------
   Main Share button
   -------------------------------------------------------------------------- */

.article-share-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .45rem;

    min-height: 38px;

    margin: 0;
    padding: .45rem .8rem;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);

    background: var(--fh-bg);
    color: var(--fh-text);

    font: inherit;
    font-size: .9rem;
    font-weight: 600;

    line-height: 1.25;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;

}

.article-share-button:hover,
.article-share-button:focus-visible {

    background: var(--fh-hover);

    border-color: var(--fh-primary-light);

    color: var(--fh-primary-light);

    outline: none;

    box-shadow:
        0 0 0 2px rgba(0, 86, 179, .12);

}

.article-share-button[aria-expanded="true"] {

    background: var(--fh-hover);

    border-color: var(--fh-primary-light);

    color: var(--fh-primary-light);

}


/* Main Share icon */

.article-share-button svg {

    display: block;

    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/* --------------------------------------------------------------------------
   Share menu
   -------------------------------------------------------------------------- */

.article-share-menu {

    position: absolute;

    z-index: 1000;

    top: calc(100% + .45rem);
    left: 0;

    width: 220px;
    max-width: calc(100vw - 2rem);

    padding: .3rem;

    border: 1px solid var(--fh-border);

    border-radius: var(--fh-radius);

    background: var(--fh-bg);

    box-shadow: var(--fh-shadow-hover);

}


/*
 * Keep the native HTML hidden attribute authoritative.
 */

.article-share-menu[hidden] {

    display: none;

}


/* --------------------------------------------------------------------------
   Individual share item
   -------------------------------------------------------------------------- */

.article-share-item {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 38px;

    gap: .7rem;

    margin: 0;

    padding: .48rem .65rem;

    box-sizing: border-box;

    border: 0;

    border-radius: .35rem;

    background: transparent;

    color: var(--fh-text);

    font: inherit;

    font-size: .9rem;

    line-height: 1.3;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease;

}

.article-share-item:hover,
.article-share-item:focus-visible {

    background: var(--fh-hover);

    color: var(--fh-primary-light);

    outline: none;

    text-decoration: none;

}


/*
 * Keep the share component isolated from the global
 * .pkp_structure_main a rules.
 */

.pkp_structure_main .article-share-item {

    text-decoration: none;

}

.pkp_structure_main .article-share-item:hover,
.pkp_structure_main .article-share-item:focus {

    text-decoration: none;

}


/* --------------------------------------------------------------------------
   Share item icons
   -------------------------------------------------------------------------- */

/*
 * Functional/UI icons:
 * Share, Copy Link, Email
 */

.article-share-item > svg {

    display: block;

    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
 * Brand icons:
 * WhatsApp, Facebook, X, Threads, LinkedIn, Reddit
 *
 * These are filled logos, not outline icons.
 */

.article-share-item > svg.brand-icon {

    fill: currentColor;

    stroke: none;

}


/* Label */

.article-share-item > span {

    min-width: 0;

    line-height: 1.35;

}


/* --------------------------------------------------------------------------
   Native Web Share
   -------------------------------------------------------------------------- */

.article-share-native[hidden] {

    display: none;

}


/*
 * Add a separator only when Native Share is actually visible.
 *
 * When nativeButton is hidden, Copy Link should remain the first
 * ordinary item without an artificial separator.
 */

.article-share-native:not([hidden]) + .article-share-copy {

    margin-top: .2rem;

    padding-top: .65rem;

    border-top: 1px solid var(--fh-border-light);

}


/*
 * When Native Share is unavailable, Copy Link has normal spacing.
 */

.article-share-native[hidden] + .article-share-copy {

    margin-top: 0;

    padding-top: .48rem;

    border-top: 0;

}


/* --------------------------------------------------------------------------
   Copy feedback
   -------------------------------------------------------------------------- */

.article-share-copy-label.copied {

    font-weight: 600;

}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .article-share-menu {

        width: min(220px, calc(100vw - 2rem));

    }

    .article-share-button {

        min-height: 40px;

    }

}


/* Very narrow screens */

@media (max-width: 380px) {

    .article-share-menu {

        position: fixed;

        top: 50%;
        left: 50%;

        width: min(290px, calc(100vw - 2rem));

        transform: translate(-50%, -50%);

    }

}


/* ==========================================================================
   13. REFERENCES
   ========================================================================== */



.item.references .value p,
.item.references .value a {
    overflow-wrap: anywhere;
    word-break: break-word;
    word-wrap: break-word;
}