/*!
 * ELKUATOR OJS JOURNAL UI
 * Product: Elkuator OJS 2.x Commercial Journal Style
 * Client Profile: YUDISIA
 * Target: OJS 2.4.7-1 / Theme=None
 * Version: 1.0.1
 * Status: STABLE
 * Date: 2026-09-17
 *
 * Copyright (c) 2026 Elkuator Research and Publication.
 * All rights reserved.
 *
 * COMMERCIAL LICENSE - CLIENT USE ONLY
 * This stylesheet is proprietary commercial work of Elkuator Research and Publication.
 * It is licensed solely for use by authorized Elkuator clients on approved OJS installations.
 *
 * Redistribution, resale, sublicensing, repackaging, publication as a standalone
 * stylesheet/theme, or reuse outside the licensed client deployment is prohibited
 * without prior written permission from Elkuator Research and Publication.
 *
 * This stylesheet does not modify the license of Open Journal Systems (OJS),
 * PKP software, third-party libraries, journal-owned content, logos, or media assets.
 *
 * Architecture:
 * - Journal-level stylesheet
 * - No OJS core modification
 * - No legacy Yudisia theme dependency
 * - No external icon/font CDN dependency
 */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    /* =====================================================
       COMMERCIAL BRAND CONFIG
       Edit this section only when adapting the stylesheet
       for another journal/client.
       ===================================================== */

    --brand-primary: #6b3100;
    --brand-primary-dark: #4c2200;
    --brand-secondary: #9f5000;
    --brand-accent: #e1a62b;

    --brand-page-bg: #c88e16;
    --brand-page-pattern: url("https://e-journal.elkuator.com/public/journals/11/patternekuator_.jpg");
    --brand-page-overlay: rgba(255, 255, 255, .55);
    --brand-paper: #fffdf8;
    --brand-surface: #ffffff;

    --brand-text: #2f2f2f;
    --brand-muted: #666666;
    --brand-text-soft: #5e5e5e;
    --brand-link: #7a3900;
    --brand-link-hover: #4c2200;

    --brand-border: #e7cf9d;
    --brand-border-soft: #eadfc7;
    --brand-input-border: #d8c49e;
    --brand-soft: #fff8e8;
    --brand-hover: #fff1c8;
    --brand-focus-bg: #fff0bd;
    --brand-focus: #f6bd43;
    --brand-focus-text: #3b1900;

    --brand-on-primary: #ffffff;
    --brand-on-primary-soft: #fff4cf;
    --brand-on-primary-strong: #fff8e8;
    --brand-on-primary-rgb: 255, 255, 255;

    --brand-shadow-rgb: 76, 34, 0;

    /* Layout tokens */
    --elk-shadow: 0 5px 24px rgba(var(--brand-shadow-rgb), 0.18);
    --elk-radius: 8px;
    --elk-public-width: 1160px;
    --elk-manager-width: 1380px;
    --elk-sidebar-width: 285px;
    --elk-manager-sidebar-width: 240px;

    /* Backward-compatible semantic aliases */
    --elk-primary: var(--brand-primary);
    --elk-primary-dark: var(--brand-primary-dark);
    --elk-nav: var(--brand-secondary);
    --elk-gold: var(--brand-accent);
    --elk-gold-soft: var(--brand-soft);
    --elk-link-hover: var(--brand-hover);
    --elk-focus: var(--brand-focus);
    --elk-focus-dark: var(--brand-focus-text);
    --elk-paper: var(--brand-paper);
    --elk-surface: var(--brand-surface);
    --elk-text: var(--brand-text);
    --elk-muted: var(--brand-muted);
    --elk-border: var(--brand-border);
}


/* =========================================================
   2. GLOBAL
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}

html {
    background-image:
        linear-gradient(var(--brand-page-overlay), var(--brand-page-overlay)),
        var(--brand-page-pattern);
    background-position: center top;
    background-size: contain;
    background-attachment: fixed;
}

body {
    color: var(--elk-text);
    background: transparent;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a:link,
a:visited {
    color: var(--brand-link);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover,
a:active {
    color: var(--elk-primary-dark);
    text-decoration: underline;
    text-decoration-color: var(--elk-gold);
}

a:focus {
    outline: 2px solid var(--elk-focus);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   3. PUBLIC JOURNAL SHELL
   ========================================================= */

#container {
    width: calc(100% - 40px);
    max-width: var(--elk-public-width);
    min-width: 0;
    margin: 18px auto 30px;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
}

#header {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--elk-paper);
    border-radius: var(--elk-radius) var(--elk-radius) 0 0;
    box-shadow: 0 2px 12px rgba(var(--brand-shadow-rgb), .14);
}

#headerTitle {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

#headerTitle h1 {
    margin: 0;
    padding: 0;
    color: var(--elk-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

#headerTitle img {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}


/* =========================================================
   4. PUBLIC PAGE LAYOUT
   ========================================================= */

#body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 0 22px 28px;
    background: var(--elk-surface);
    border-radius: 0 0 var(--elk-radius) var(--elk-radius);
    box-shadow: var(--elk-shadow);
}

#main {
    position: relative;
    order: 1;
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
}

#sidebar {
    order: 2;
    flex: 0 0 var(--elk-sidebar-width);
    width: var(--elk-sidebar-width);
    margin: 0;
    padding: 57px 0 0;
}

#leftSidebar,
#rightSidebar {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 13px;
}

#leftSidebar:empty {
    display: none;
}

#content {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1em;
}

.separator {
    clear: both;
    height: 1px;
    margin: 12px 0;
    background: var(--elk-border);
    border: 0;
}


/* =========================================================
   5. PRIMARY NAVIGATION
   OJS 2.x places #navbar inside #main. The dimensions below
   visually extend it across both main and sidebar columns.
   ========================================================= */

#navbar {
    position: relative;
    z-index: 5;
    clear: both;
    width: calc(100% + 347px);
    min-height: 44px;
    margin: 0 -325px 15px -22px;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--elk-primary);
    border: 0;
    box-shadow: inset 0 -3px 0 var(--elk-gold);
    text-align: left;
    white-space: nowrap;
}

#navbar ul {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    padding: 0 0 0 6px;
    list-style: none;
}

#navbar ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
}


/* Desktop navbar grouping
   Keep the production public-menu order on the left.
   Login/Register or User Home is visually grouped on the right.
   This changes visual order only; OJS 2.x DOM/tab order remains native.
*/
@media (min-width: 721px) {
    #navbar ul.menu {
        display: flex;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    /* Normalize every navbar item so legacy theme rules cannot stretch it. */
    #navbar ul.menu > li {
        order: 60;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    #navbar ul.menu > li > a {
        width: auto;
        min-width: 0;
        max-width: none;
    }

    /*
       Public navigation order:
       Home → About → Current → Archives → Announcements
       → custom navigation (e.g. Thesis Abstracts) → Search.
    */
    #navbar #home {
        order: 10;
    }

    #navbar #about {
        order: 20;
    }

    #navbar #categories {
        order: 25;
    }

    #navbar #current {
        order: 30;
    }

    #navbar #archives {
        order: 40;
    }

    #navbar #announcements {
        order: 50;
    }

    #navbar .navItem {
        order: 60;
    }

    #navbar #search {
        order: 70;
    }

    /* Authentication/account group stays on the far right. */
    #navbar #login,
    #navbar #userHome {
        order: 90;
        margin-left: auto;
    }

    #navbar #register {
        order: 91;
        margin-left: 4px;
        margin-right: 12px;
    }

    #navbar #userHome {
        margin-right: 12px;
    }
}

#navbar a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px 3px;
    color: var(--brand-on-primary);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
}


/* Neutralize legacy theme-generated navbar separators. */
#navbar a::before,
#navbar a::after {
    display: none;
    width: 0;
    height: 0;
    margin: 0;
    content: none;
}

#navbar a:hover {
    color: var(--brand-on-primary);
    background: rgba(var(--brand-on-primary-rgb), .08);
    box-shadow: none;
    text-decoration: none;
}

#navbar a:focus {
    color: var(--brand-on-primary);
    background: rgba(var(--brand-on-primary-rgb), .10);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-on-primary-rgb), .45);
    outline: 2px solid var(--elk-focus);
    outline-offset: -4px;
    text-decoration: none;
}


@media (min-width: 721px) {
    #navbar #login,
    #navbar #register,
    #navbar #userHome {
        display: flex;
        align-items: center;
    }

    #navbar #login a,
    #navbar #register a,
    #navbar #userHome a {
        min-height: 32px;
        margin-top: 6px;
        margin-bottom: 6px;
        padding: 0 10px;
        border: 1px solid rgba(var(--brand-on-primary-rgb), .46);
        border-radius: 4px;
        line-height: 1.35;
    }

    #navbar #login a:hover,
    #navbar #login a:focus,
    #navbar #register a:hover,
    #navbar #register a:focus,
    #navbar #userHome a:hover,
    #navbar #userHome a:focus {
        color: var(--brand-focus-text);
        background: var(--brand-accent);
        border-color: var(--brand-accent);
        box-shadow: none;
        outline-color: var(--brand-on-primary);
    }
}


/* =========================================================
   6. BREADCRUMB / TYPOGRAPHY
   ========================================================= */

#breadcrumb {
    margin: 0 0 14px;
    padding: 13px 0 10px;
    color: var(--elk-muted);
    border-bottom: 1px solid var(--elk-border);
    font-size: 12px;
}

#breadcrumb a {
    font-weight: 700;
}

#main > h2 {
    margin: 0 0 22px;
    padding: 0 0 9px;
    color: var(--elk-primary);
    border-bottom: 3px solid var(--elk-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.25;
}

#content h3,
#content h4 {
    color: var(--elk-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

#content h3 {
    margin: 25px 0 12px;
    font-size: 22px;
}

#content h4 {
    margin: 18px 0 9px;
    font-size: 17px;
}

#content p {
    margin: 0 0 14px;
}

#content ul,
#content ol {
    margin-top: 8px;
    margin-bottom: 15px;
}


/* =========================================================
   7. HOMEPAGE
   ========================================================= */

#journalDescription {
    float: left;
    width: 60%;
    margin: 0 0 18px;
    padding: 0;
    text-align: justify;
}

#homepageImage {
    float: right;
    width: 36%;
    margin: 0 0 18px;
    padding: 0;
    text-align: right;
}

#homepageImage img {
    display: inline-block;
    width: 100%;
    border: 1px solid var(--elk-border);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(var(--brand-shadow-rgb), .12);
}

#content::after {
    display: table;
    clear: both;
    content: "";
}


/* =========================================================
   8. ANNOUNCEMENTS
   ========================================================= */

#announcementsHome {
    clear: both;
    margin: 20px 0 28px;
}

#announcementsHome h3 {
    margin: 0 0 12px;
    padding: 8px 12px;
    color: var(--brand-on-primary);
    background: var(--elk-primary);
    border-bottom: 3px solid var(--elk-gold);
    border-radius: 4px 4px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
}

#announcementsHome .separator {
    margin: 8px 0;
}


/* =========================================================
   9. ISSUE / TABLE OF CONTENTS / ARTICLE CARDS
   ========================================================= */

table.tocArticle {
    width: 100%;
    margin: 0 0 8px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--brand-paper);
    border: 1px solid var(--elk-border);
    border-left: 5px solid var(--elk-gold);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(var(--brand-shadow-rgb), .06);
}

table.tocArticle td {
    padding: 8px 9px;
    vertical-align: top;
    border: 0;
}

table.tocArticle td.tocTitle {
    color: var(--elk-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

table.tocArticle td.tocTitle a {
    color: var(--elk-primary);
    font-weight: 700;
}

table.tocArticle .tocAuthors {
    padding-top: 2px;
    padding-left: 0;
    color: var(--brand-text-soft);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
}

table.tocArticle td.tocGalleys,
table.tocArticle td.tocPages {
    width: 65px;
    text-align: right;
    white-space: nowrap;
}

table.tocArticle td.tocGalleys a {
    display: inline-block;
    padding: 3px 7px;
    color: var(--brand-on-primary);
    background: var(--elk-nav);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

table.tocArticle td.tocGalleys a:hover,
table.tocArticle td.tocGalleys a:focus {
    background: var(--elk-primary);
    text-decoration: none;
}

#issueDescription,
#issueCoverImage {
    margin-bottom: 18px;
}


/* =========================================================
   10. SIDEBAR BLOCKS
   ========================================================= */

#sidebar #leftSidebar .block,
#sidebar #rightSidebar .block {
    width: 100%;
    margin: 0 0 12px;
    padding: 0 9px 4px;
    overflow: hidden;
    background: var(--brand-surface);
    border: 1px solid var(--elk-border);
    border-radius: 7px;
}

#sidebar .blockTitle {
    display: block;
    margin: 0 -9px 7px;
    padding: 8px 10px;
    color: var(--brand-on-primary);
    background: var(--elk-primary);
    border-bottom: 3px solid var(--elk-gold);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

/* TinyMCE in OJS 2 may wrap a custom block title in <p>. */
#sidebar .block.custom > p:first-child {
    margin: 0;
    padding: 0;
}

#sidebar .block.custom > p:first-child > .blockTitle {
    margin-top: 0;
}

#sidebar .block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar .block ul li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--brand-border-soft);
}

#sidebar .block ul li:last-child {
    border-bottom: 0;
}

#sidebar .block ul li a {
    display: block;
    padding: 8px 3px;
    color: var(--elk-primary);
    line-height: 1.35;
    text-decoration: none;
    transition:
        padding-left .15s ease,
        color .15s ease,
        background-color .15s ease;
}

#sidebar .block ul li a:hover {
    padding-left: 7px;
    color: var(--brand-secondary);
    background: var(--brand-soft);
    box-shadow: none;
    text-decoration: none;
}

#sidebar .block ul li a:focus {
    padding-left: 7px;
    color: var(--brand-secondary);
    background: var(--brand-soft);
    box-shadow: none;
    outline: 2px solid var(--brand-focus);
    outline-offset: -2px;
    text-decoration: none;
}

#sidebar .block p,
#sidebar .block form,
#sidebar .block table {
    max-width: 100%;
}

#sidebar .block img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0px auto;
}

#sidebar input[type="text"],
#sidebar input[type="search"],
#sidebar select {
    width: 100%;
    max-width: 100%;
}

/* Center visual assets in custom blocks, including script-generated counters. */
#sidebar .block.custom {
    text-align: center;
}

#sidebar .block.custom ul,
#sidebar .block.custom form,
#sidebar .block.custom table {
    text-align: left;
}

#sidebar .block.custom p {
    text-align: center;
}

#sidebar .block.custom a > img,
#sidebar .block.custom > img,
#sidebar .block.custom div > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

/* Visual custom blocks: normalize editor-generated paragraph spacing and center assets. */
#customblock-Certificate > p,
#customblock-Template > p,
#customblock-Collaboration > p,
#customblock-Sponsored-by > p,
#customblock-Yudisia-Visitors > p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    text-align: center;
}

#customblock-Yudisia-Visitors > p:last-child {
    padding-top: 8px;
    padding-bottom: 8px;
}

#customblock-Certificate > p > a,
#customblock-Template > p > a,
#customblock-Collaboration > p > a,
#customblock-Sponsored-by > p > a,
#customblock-Yudisia-Visitors > p > a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px;
    background: transparent;
    border-radius: 7px;
    box-shadow: 0 0 0 rgba(var(--brand-shadow-rgb), 0);
    transform: translateY(0) scale(1);
    transform-origin: center center;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

#histats_counter,
#customblock-Yudisia-Page-Views > div:not(.blockTitle) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Additional Menu
   Text-only by design for OJS 2.4.7-1 production stability.
   No icon font, SVG data URI, pseudo-element, or external CDN dependency.
*/
#customblock-Menu ul li a {
    min-height: 36px;
    padding-top: 9px;
    padding-bottom: 9px;
    text-align: left;
    white-space: normal;
}

/* Tools custom block
   Two columns x two rows. Uses class-based selectors so the block can be
   renamed without coupling the CSS to an OJS-generated custom-block ID.
*/
#sidebar .block .tools_grid {
    width: 100%;
    padding: 4px 0 7px;
}

#sidebar .block ul.tools_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

#sidebar .block ul.tools_list li.tools_item {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#sidebar .block ul.tools_list li.tools_item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 8px;
    background: var(--brand-paper);
    border: 1px solid var(--brand-border-soft);
    border-radius: 6px;
    box-shadow: 0 0 0 rgba(var(--brand-shadow-rgb), 0);
    transform: translateY(0) scale(1);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

#sidebar .block ul.tools_list li.tools_item a:hover {
    padding-left: 8px;
    color: inherit;
    background: var(--brand-surface);
    border-color: var(--brand-accent);
    box-shadow: 0 6px 14px rgba(var(--brand-shadow-rgb), .15);
    transform: translateY(-2px) scale(1.02);
    text-decoration: none;
}

#sidebar .block ul.tools_list li.tools_item a:focus {
    padding-left: 8px;
    color: inherit;
    background: var(--brand-surface);
    border-color: var(--brand-accent);
    box-shadow: 0 6px 14px rgba(var(--brand-shadow-rgb), .15);
    outline: 2px solid var(--brand-focus);
    outline-offset: 2px;
    transform: translateY(-2px) scale(1.02);
    text-decoration: none;
}

#sidebar .block ul.tools_list li.tools_item img {
    display: block;
    width: 100%;
    max-width: 110px;
    height: auto;
    margin: 0 auto;
}

/* Linked images: subtle lift/scale interaction for mouse and keyboard users. */
#customblock-Certificate > p > a > img,
#customblock-Template > p > a > img,
#customblock-Collaboration > p > a > img,
#customblock-Sponsored-by > p > a > img,
#customblock-Yudisia-Visitors > p > a > img {
    transform: none;
    filter: none;
}

#customblock-Certificate > p > a:hover,
#customblock-Template > p > a:hover,
#customblock-Collaboration > p > a:hover,
#customblock-Sponsored-by > p > a:hover,
#customblock-Yudisia-Visitors > p > a:hover {
    background: var(--brand-paper);
    box-shadow: 0 8px 18px rgba(var(--brand-shadow-rgb), .18);
    transform: translateY(-2px) scale(1.035);
    text-decoration: none;
}

#customblock-Certificate > p > a:focus,
#customblock-Template > p > a:focus,
#customblock-Collaboration > p > a:focus,
#customblock-Sponsored-by > p > a:focus,
#customblock-Yudisia-Visitors > p > a:focus {
    background: var(--brand-paper);
    box-shadow: 0 8px 18px rgba(var(--brand-shadow-rgb), .18);
    outline: 2px solid var(--brand-focus);
    outline-offset: 3px;
    transform: translateY(-2px) scale(1.035);
    text-decoration: none;
}

/* Main-content links use the same interaction language as sidebar links. */
#content a:not([href^="#"]):hover {
    color: var(--elk-primary-dark);
    background: var(--elk-gold-soft);
    border-radius: 3px;
    text-decoration-color: var(--elk-gold);
}

#content a:not([href^="#"]):focus {
    color: var(--elk-focus-dark);
    background: var(--brand-focus-bg);
    border-radius: 3px;
}


/* =========================================================
   11. FORMS / BUTTONS
   ========================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
    max-width: 100%;
    padding: 5px 7px;
    color: var(--elk-text);
    background: var(--brand-surface);
    border: 1px solid var(--brand-input-border);
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
}

input.button,
input[type="submit"],
button {
    padding: 6px 10px;
    color: var(--brand-on-primary);
    background: var(--elk-nav);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
}

input.button:hover,
input[type="submit"]:hover,
button:hover {
    background: var(--elk-primary-dark);
}

input.button:focus,
input[type="submit"]:focus,
button:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--elk-focus);
    outline-offset: 2px;
}


/* =========================================================
   12. ARTICLE / GENERIC CONTENT
   ========================================================= */

#articleTitle,
#articleAbstract h4 {
    color: var(--elk-primary);
}

#articleAbstract,
#articleSubject,
#articleFullText,
#articleMetadata {
    line-height: 1.65;
}

table.data,
table.listing {
    max-width: 100%;
}


/* =========================================================
   13. FOOTER
   OJS 2.x keeps #pageFooter inside #main. The stylesheet
   intentionally styles that native structure instead of faking
   a semantic full-width footer.
   ========================================================= */

#pageFooter {
    clear: both;
    margin: 28px 0 0;
    padding: 16px 14px;
    color: var(--brand-on-primary);
    background: var(--elk-primary);
    border-top: 3px solid var(--elk-gold);
    font-size: 11px;
    line-height: 1.55;
}

#pageFooter p {
    margin: 0 0 8px;
}

#pageFooter p:last-child {
    margin-bottom: 0;
}

#pageFooter strong {
    color: var(--brand-on-primary-strong);
}

#pageFooter a:link,
#pageFooter a:visited {
    display: inline-block;
    padding: 1px 3px;
    color: var(--brand-on-primary-soft);
    border-bottom: 1px solid rgba(var(--brand-on-primary-rgb), .55);
    border-radius: 3px;
    text-decoration: none;
}

#pageFooter a:hover {
    color: var(--elk-focus-dark);
    background: var(--brand-hover);
    border-bottom-color: var(--elk-gold);
    text-decoration: none;
}

#pageFooter a:focus {
    color: var(--elk-focus-dark);
    background: var(--brand-focus-bg);
    border-bottom-color: var(--elk-gold);
    outline: 2px solid var(--brand-on-primary);
    outline-offset: 2px;
    text-decoration: none;
}


/* =========================================================
   14. JOURNAL MANAGER / EDITORIAL WORKSPACE
   ========================================================= */

body[id^="pkp-manager-"],
body[id^="pkp-editor-"],
body[id^="pkp-sectionEditor-"],
body[id^="pkp-reviewer-"],
body[id^="pkp-author-"] {
    font-size: 13px;
    line-height: 1.45;
}

body[id^="pkp-manager-"] #container,
body[id^="pkp-editor-"] #container,
body[id^="pkp-sectionEditor-"] #container,
body[id^="pkp-reviewer-"] #container,
body[id^="pkp-author-"] #container {
    width: calc(100% - 32px);
    max-width: var(--elk-manager-width);
    margin: 16px auto 30px;
}

body[id^="pkp-manager-"] #body,
body[id^="pkp-editor-"] #body,
body[id^="pkp-sectionEditor-"] #body,
body[id^="pkp-reviewer-"] #body,
body[id^="pkp-author-"] #body {
    gap: 18px;
    padding: 0 20px 30px;
}

body[id^="pkp-manager-"] #sidebar,
body[id^="pkp-editor-"] #sidebar,
body[id^="pkp-sectionEditor-"] #sidebar,
body[id^="pkp-reviewer-"] #sidebar,
body[id^="pkp-author-"] #sidebar {
    flex: 0 0 var(--elk-manager-sidebar-width);
    width: var(--elk-manager-sidebar-width);
    padding-top: 57px;
}

/* Manager navbar: main + 18 gap + 240 sidebar + 20 right gutter. */
body[id^="pkp-manager-"] #navbar,
body[id^="pkp-editor-"] #navbar,
body[id^="pkp-sectionEditor-"] #navbar,
body[id^="pkp-reviewer-"] #navbar,
body[id^="pkp-author-"] #navbar {
    width: calc(100% + 298px);
    margin: 0 -278px 15px -20px;
}

body[id^="pkp-manager-"] #content,
body[id^="pkp-editor-"] #content,
body[id^="pkp-sectionEditor-"] #content,
body[id^="pkp-reviewer-"] #content,
body[id^="pkp-author-"] #content {
    padding-right: 4px;
}

body[id^="pkp-manager-"] table.data,
body[id^="pkp-editor-"] table.data,
body[id^="pkp-sectionEditor-"] table.data,
body[id^="pkp-reviewer-"] table.data,
body[id^="pkp-author-"] table.data {
    width: 100%;
    max-width: 100%;
}

body[id^="pkp-manager-"] textarea,
body[id^="pkp-editor-"] textarea,
body[id^="pkp-sectionEditor-"] textarea,
body[id^="pkp-reviewer-"] textarea,
body[id^="pkp-author-"] textarea {
    max-width: 100%;
}


/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    #container {
        width: calc(100% - 24px);
        margin-top: 12px;
    }

    #body {
        display: block;
        padding: 0 16px 24px;
    }

    #main {
        width: 100%;
    }

    #sidebar {
        width: 100%;
        padding-top: 12px;
    }

    #navbar {
        width: calc(100% + 32px);
        margin: 0 -16px 15px;
    }

    #sidebar .block {
        max-width: none;
    }

    body[id^="pkp-manager-"] #body,
    body[id^="pkp-editor-"] #body,
    body[id^="pkp-sectionEditor-"] #body,
    body[id^="pkp-reviewer-"] #body,
    body[id^="pkp-author-"] #body {
        display: block;
        padding: 0 14px 24px;
    }

    body[id^="pkp-manager-"] #sidebar,
    body[id^="pkp-editor-"] #sidebar,
    body[id^="pkp-sectionEditor-"] #sidebar,
    body[id^="pkp-reviewer-"] #sidebar,
    body[id^="pkp-author-"] #sidebar {
        width: 100%;
        padding-top: 12px;
    }

    body[id^="pkp-manager-"] #navbar,
    body[id^="pkp-editor-"] #navbar,
    body[id^="pkp-sectionEditor-"] #navbar,
    body[id^="pkp-reviewer-"] #navbar,
    body[id^="pkp-author-"] #navbar {
        width: calc(100% + 28px);
        margin: 0 -14px 15px;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 13px;
    }

    #container {
        width: 100%;
        margin: 0;
    }

    #header,
    #body {
        border-radius: 0;
    }

    #body {
        padding-right: 12px;
        padding-left: 12px;
    }

    #navbar {
        width: calc(100% + 24px);
        margin: 0 -12px 14px;
        padding: 0 6px;
        text-align: left;
    }

    #navbar ul {
        display: flex;
        width: max-content;
    }

    #navbar a {
        padding: 11px 9px 9px;
        font-size: 11px;
    }

    #journalDescription,
    #homepageImage {
        float: none;
        width: 100%;
    }

    #homepageImage {
        text-align: center;
    }

    #main > h2 {
        font-size: 23px;
    }

    table.tocArticle,
    table.tocArticle tbody,
    table.tocArticle tr,
    table.tocArticle td {
        display: block;
        width: 100%;
    }

    table.tocArticle td.tocGalleys,
    table.tocArticle td.tocPages {
        width: 100%;
        text-align: left;
    }
}


/* =========================================================
   16. ACCESSIBILITY / MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        transition-duration: .001ms;
        animation-duration: .001ms;
        animation-iteration-count: 1;
    }

    #sidebar .block.custom a,
    #sidebar .block.custom a > img {
        transform: none;
    }
}