/* OJS 3.4 Default Theme — Adabiy Meros header */

/* ==========================================
   1. LOGOTIP VA JURNAL NOMI (BOSILADIGAN BO'LISHI)
   ========================================== */
.pkp_site_name_wrapper,
.pkp_site_name_wrapper a,
.pkp_site_name_wrapper a.is_img {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
}

.pkp_site_name_wrapper a.is_img img {
    max-height: 55px !important;
    width: auto !important;
    margin-right: 15px !important;
}

.pkp_site_name_wrapper a.is_img::after {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: "Times New Roman", Georgia, serif !important;
    letter-spacing: .5px !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
}

html[lang^="uz"] .pkp_site_name_wrapper a.is_img::after {
    content: '"Adabiy meros" ilmiy jurnali';
}

html[lang^="en"] .pkp_site_name_wrapper a.is_img::after {
    content: 'Scientific Journal "Adabiy Meros"';
}

html[lang^="ru"] .pkp_site_name_wrapper a.is_img::after {
    content: 'Научный журнал "Adabiy Meros"';
}

/* ==========================================
   2. YUQORI FOYDALANUVCHI BO'LIMI VA TILLAR (LOGIN/PROFIL TOG'RILANGAN)
   ========================================== */
#navigationUserWrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000 !important;
}

.custom_header_languages {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom_header_languages a {
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    opacity: .92;
}

.custom_header_languages a::after {
    font-size: 12px !important;
}

.custom_header_languages a:nth-of-type(1)::after {
    content: "EN";
}

.custom_header_languages a:nth-of-type(2)::after {
    content: "RU";
}

.custom_header_languages a:nth-of-type(3)::after {
    content: "UZ";
}

.custom_header_languages a:hover,
.custom_header_languages a:focus {
    opacity: 1;
    text-decoration: underline !important;
}

.custom_header_languages span {
    color: rgba(255, 255, 255, .55) !important;
}

#navigationUser {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_sidebar .block_language {
    display: none !important;
}

/* Desktop only (matches theme's @screen-desktop breakpoint: 992px).
   Pins the language links + user menu to the top-right corner, same as before. */
@media (min-width: 992px) {
    #navigationUserWrapper {
        position: absolute !important;
        top: 0 !important;
        right: 20px !important;
        left: auto !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        transform: none !important;
    }
}

/* Below 992px: let #navigationUserWrapper flow normally inside the mobile
   dropdown menu instead of being absolutely pinned over the primary nav. */
@media (max-width: 991px) {
    #navigationUserWrapper {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 10px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .custom_header_languages {
        flex-wrap: wrap !important;
    }

    .pkp_site_name_wrapper a.is_img::after {
        font-size: 18px !important;
        white-space: normal !important;
    }
}

/* ==========================================
   3. ASOSIY MENYUNI CHAP CHEKKAGA TAQASH
   ========================================== */
.pkp_structure_head .pkp_head_wrapper,
.pkp_head_wrapper,
header.pkp_structure_head,
.pkp_navigation_primary_wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 992px) {
    .pkp_navigation_primary_wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Menyuni logotip tagidan chapga to'liq surish */
    .pkp_navigation_primary {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        margin-left: -30px !important;
        padding-left: 0 !important;
        list-style: none !important;
    }
}

.pkp_navigation_primary > li {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary a {
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    padding: 6px 0 !important;
}

/* Search (Qidiruv) tugmasini o'ng tomonga taqash — desktop row layout only */
@media (min-width: 992px) {
    .pkp_navigation_primary_wrapper .pkp_search,
    header .pkp_search {
        margin-left: auto !important;
        margin-right: 10px !important;
        white-space: nowrap !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

/* ==========================================
   4. INFORMATION BLOKINI YASHIRISH
   ========================================== */
.pkp_block_information .title,
.block_information .title,
.pkp_block_information .content li,
.block_information .content li {
    display: none !important;
}

.pkp_block_information,
.block_information {
    margin-top: -20px !important;
    padding-top: 0 !important;
}

/* Force logo + journal title to be clickable */
.pkp_site_name_wrapper {
    position: relative !important;
    z-index: 9999 !important;
}

.pkp_site_name_wrapper a.is_img {
    display: inline-flex !important;
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.pkp_site_name_wrapper a.is_img img,
.pkp_site_name_wrapper a.is_img::after {
    pointer-events: none !important;
}

.pkp_head_wrapper,
.pkp_structure_head,
.pkp_site_nav_menu,
#navigationUserWrapper,
.pkp_navigation_primary_wrapper {
    pointer-events: none;
}

.pkp_navigation_primary_wrapper a,
#navigationUserWrapper a,
.pkp_search,
.pkp_search_desktop,
.pkp_site_nav_toggle {
    pointer-events: auto;
}

/* ==========================================
   5. MOBILE SLIDE-OUT MENU — VISUAL POLISH
   Panel, primary items, search row, language switcher, user/admin card.
   Scoped to <992px only — desktop (>=992px) is untouched.
   ========================================== */
@media (max-width: 991px) {

    /* --- Panel: floating, centered card (was a full-width, flush green block) --- */
    .pkp_site_nav_menu {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        top: calc(100% + 10px) !important;
        padding: 1rem !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 18px !important;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(0, 0, 0, .08) 100%) !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .15) !important;
        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Dim the page behind the floating panel instead of a solid full-bleed
       fill. Fixed + pointer-events:none: purely decorative, never blocks taps. */
    .pkp_site_nav_menu::before {
        content: "";
        position: fixed !important;
        inset: 0;
        background: rgba(0, 0, 0, .38);
        z-index: -1;
        pointer-events: none;
    }

    /* --- Header row balance while the menu is open (toggle + logo) --- */
    .pkp_site_name_wrapper {
        min-height: 56px !important;
    }

    .pkp_site_name {
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
    }

    .pkp_site_nav_toggle {
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-radius: 10px;
    }

    body.navIsOpen .pkp_site_nav_toggle {
        background: rgba(255, 255, 255, .14) !important;
    }

    /* --- Primary menu items (Home, General info, Editorial Team, For authors, Current, Archives, Contact) --- */
    .pkp_site_nav_menu .pkp_navigation_primary {
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_site_nav_menu .pkp_navigation_primary > li {
        border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    }

    .pkp_site_nav_menu .pkp_navigation_primary > li:last-child {
        border-bottom: 0 !important;
    }

    .pkp_site_nav_menu .pkp_navigation_primary > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: .5rem .9rem !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        letter-spacing: .1px;
        border-radius: 10px;
        transition: background-color .15s ease, padding-left .15s ease;
    }

    .pkp_site_nav_menu .pkp_navigation_primary > li > a:hover,
    .pkp_site_nav_menu .pkp_navigation_primary > li > a:focus,
    .pkp_site_nav_menu .pkp_navigation_primary > li > a:active {
        background: rgba(255, 255, 255, .12) !important;
        padding-left: 1.15rem !important;
    }

    /* --- Search row --- */
    .pkp_navigation_search_wrapper {
        margin-top: 1.1rem !important;
        padding-top: 1.1rem !important;
        border-top: 1px solid rgba(255, 255, 255, .15) !important;
    }

    .pkp_navigation_search_wrapper .pkp_search {
        display: flex !important;
        align-items: center !important;
        gap: .6rem !important;
        padding: .7rem .95rem !important;
        background: rgba(255, 255, 255, .07) !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        border-radius: 12px !important;
        font-size: .95rem !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, .92) !important;
        transition: background-color .15s ease, border-color .15s ease;
    }

    .pkp_navigation_search_wrapper .pkp_search:hover,
    .pkp_navigation_search_wrapper .pkp_search:focus {
        background: rgba(255, 255, 255, .12) !important;
        border-color: rgba(255, 255, 255, .32) !important;
    }

    .pkp_navigation_search_wrapper .pkp_search .fa-search {
        font-size: .9rem;
        opacity: .8;
    }

    /* --- Language switcher (EN / RU / UZ) --- */
    .custom_header_languages {
        display: inline-flex !important;
        align-items: center !important;
        background: rgba(255, 255, 255, .07) !important;
        border: 1px solid rgba(255, 255, 255, .16) !important;
        border-radius: 999px !important;
        padding: .3rem !important;
        gap: 2px !important;
    }

    .custom_header_languages::before {
        font-family: "FontAwesome";
        content: "\f0ac";
        font-size: .75rem;
        opacity: .65;
        margin: 0 .35rem 0 .3rem;
    }

    .custom_header_languages a {
        padding: .3rem .6rem !important;
        border-radius: 999px !important;
        font-weight: 600 !important;
        transition: background-color .15s ease, color .15s ease;
    }

    .custom_header_languages a:hover,
    .custom_header_languages a:focus {
        background: rgba(255, 255, 255, .16) !important;
    }

    /* Hide the literal "|" separator and render a slim divider instead */
    .custom_header_languages span {
        display: inline-block;
        width: 1px;
        height: 12px;
        margin: 0 1px;
        font-size: 0 !important;
        background: rgba(255, 255, 255, .22);
    }

    /* Highlight the currently active language — reuses the <html lang>
       attribute the page already sets, no markup change needed */
    html[lang^="en"] .custom_header_languages a:nth-of-type(1),
    html[lang^="ru"] .custom_header_languages a:nth-of-type(2),
    html[lang^="uz"] .custom_header_languages a:nth-of-type(3) {
        background: #fff !important;
        color: #005A36 !important;
        opacity: 1 !important;
    }

    /* --- User / admin card (navai_admin: Dashboard, View Profile, Administration, Logout) --- */
    .pkp_site_nav_menu .pkp_navigation_user {
        width: 100% !important;
        margin: 0 !important;
        padding: .5rem .25rem !important;
        border-top: 0 !important;
        background: rgba(255, 255, 255, .08) !important;
        border-radius: 12px !important;
    }

    .pkp_site_nav_menu .pkp_navigation_user > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        gap: .55rem !important;
        padding: .5rem .85rem !important;
        font-size: .95rem !important;
        font-weight: 600 !important;
    }

    .pkp_site_nav_menu .pkp_navigation_user > li > a::before {
        font-family: "FontAwesome";
        content: "\f007";
        font-size: .9rem;
        width: 1.1em;
        text-align: center;
        opacity: .8;
    }

    .pkp_site_nav_menu .pkp_navigation_user > li > ul {
        margin: 0 !important;
        padding: 0 .35rem .35rem !important;
        border-top: 1px solid rgba(255, 255, 255, .12) !important;
    }

    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 40px !important;
        gap: .55rem !important;
        padding: .4rem .5rem !important;
        font-size: .88rem !important;
        font-weight: 400 !important;
        opacity: .92;
    }

    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li > a:hover,
    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li > a:focus {
        opacity: 1;
        background: rgba(255, 255, 255, .08) !important;
        border-radius: 6px !important;
    }

    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li > a::before {
        font-family: "FontAwesome";
        font-size: .85rem;
        width: 1.1em;
        text-align: center;
        opacity: .75;
    }

    /* Fixed OJS core submenu order: Dashboard, View Profile, Administration, Logout */
    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li:nth-child(1) > a::before { content: "\f0e4"; }
    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li:nth-child(2) > a::before { content: "\f007"; }
    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li:nth-child(3) > a::before { content: "\f013"; }
    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li:nth-child(4) > a::before { content: "\f08b"; }

    .pkp_site_nav_menu .pkp_navigation_user > li > ul > li:nth-child(4) {
        margin-top: .25rem !important;
        padding-top: .25rem !important;
        border-top: 1px dashed rgba(255, 255, 255, .15) !important;
    }
}

/* ==========================================
   5b. DESKTOP HEADER — PREMIUM POLISH (>=992px only)
   Purely additive on top of sections 1-5 above (nothing in 1-5 is
   changed, one property override noted below). Turns the already
   dark-green/white header (color from theme option, #005a36) into a
   two-level layout: logo+title row with language/register/login
   pinned top-right (already achieved by the existing position:absolute
   rule on #navigationUserWrapper in section 2), and a rounded "pill"
   navigation bar below it for the primary menu + search. Tablet/phone
   (<992px) are untouched — they already fall back to the existing
   slide-out menu (section 5), which is the "existing OJS mobile
   navigation mechanism" requested for those widths.
   ========================================== */
@media (min-width: 992px) {

    /* --- Rounded navigation container around the primary menu + search.
       Radius kept a moderate 30px (not a full pill) per the 28-32px
       spec, and background is a lighter-green tint (not white) so the
       container reads as part of the green header, not a separate
       white card. --- */
    .pkp_navigation_primary_row {
        background: rgba(24, 138, 92, .3);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 30px;
        padding: .5rem 1.25rem;
        margin: .75rem 0;
        transition: background-color .2s ease;
    }

    /* The existing section-3 rule pulls the menu -30px left to flush it
       against the edge of a border-less header. Now that the menu sits
       inside a padded pill, that negative margin would push the first
       item outside the pill's own padding — cancelled here so items sit
       evenly inset instead. Nothing else in that rule is touched. */
    .pkp_navigation_primary {
        margin-left: 0 !important;
    }

    /* --- Nav items: rounded hover state, generous spacing (existing
       "gap: 20px" from section 3 already provides the horizontal
       spacing) --- */
    .pkp_navigation_primary > li > a {
        border-radius: 999px;
        padding: .5rem 1rem !important;
        color: rgba(255, 255, 255, .92) !important;
        transition: background-color .2s ease, color .2s ease;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus {
        background: rgba(255, 255, 255, .12) !important;
        color: #fff !important;
    }

    /* --- Active nav item: cream pill with green text for whichever
       page is currently open. CSS-only — no template change. OJS
       already stamps <body> with "pkp_page_{page} pkp_op_{op}" (see
       header.tpl and the pkp_op_archive rules already used elsewhere
       in this file); each selector below pairs that body class with
       the matching menu link's own href, so this simply reuses classes
       OJS already renders, rather than needing the menu template to
       mark a "current" item itself (it doesn't, by default).
       Note: OJS renders both "Current issue" (issue/current) and any
       specific past issue (issue/view/N) with the same body classes
       (pkp_page_issue pkp_op_view), so the "Current" nav item is
       highlighted whenever any single issue is open, not only the
       latest one — a harmless, documented approximation. */
    body.pkp_page_home.pkp_op_index .pkp_navigation_primary > li > a[href$="/home"],
    body.pkp_page_general-info.pkp_op_index .pkp_navigation_primary > li > a[href$="/general-info"],
    body.pkp_page_about.pkp_op_editorialTeam .pkp_navigation_primary > li > a[href$="/editorialTeam"],
    body.pkp_page_about.pkp_op_submissions .pkp_navigation_primary > li > a[href$="/submissions"],
    body.pkp_page_issue.pkp_op_view .pkp_navigation_primary > li > a[href$="/issue/current"],
    body.pkp_page_issue.pkp_op_archive .pkp_navigation_primary > li > a[href$="/issue/archive"],
    body.pkp_page_about.pkp_op_contact .pkp_navigation_primary > li > a[href$="/contact"] {
        background: #F6F1E4 !important;
        color: #005A36 !important;
        font-weight: 700 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    }

    body.pkp_page_home.pkp_op_index .pkp_navigation_primary > li > a[href$="/home"]:hover,
    body.pkp_page_general-info.pkp_op_index .pkp_navigation_primary > li > a[href$="/general-info"]:hover,
    body.pkp_page_about.pkp_op_editorialTeam .pkp_navigation_primary > li > a[href$="/editorialTeam"]:hover,
    body.pkp_page_about.pkp_op_submissions .pkp_navigation_primary > li > a[href$="/submissions"]:hover,
    body.pkp_page_issue.pkp_op_view .pkp_navigation_primary > li > a[href$="/issue/current"]:hover,
    body.pkp_page_issue.pkp_op_archive .pkp_navigation_primary > li > a[href$="/issue/archive"]:hover,
    body.pkp_page_about.pkp_op_contact .pkp_navigation_primary > li > a[href$="/contact"]:hover {
        background: #fff !important;
    }

    /* --- Search: same single link as before (href unchanged), restyled
       as a rounded pill with a trailing circular arrow accent. The
       visible label is still OJS's own translated "Search"/"Qidiruv"
       string — no placeholder text is introduced since the element is
       a link, not an input, so nothing here changes what it does. --- */
    .pkp_navigation_search_wrapper .pkp_search {
        display: inline-flex !important;
        align-items: center !important;
        gap: .5rem;
        padding: .5rem .5rem .5rem 1.1rem !important;
        background: rgba(24, 138, 92, .32) !important;
        border: 1px solid rgba(255, 255, 255, .22) !important;
        border-radius: 999px !important;
        color: rgba(255, 255, 255, .85) !important;
        font-size: .88rem !important;
        transition: background-color .2s ease, border-color .2s ease;
    }

    .pkp_navigation_search_wrapper .pkp_search:hover,
    .pkp_navigation_search_wrapper .pkp_search:focus {
        background: rgba(24, 138, 92, .46) !important;
        border-color: rgba(255, 255, 255, .4) !important;
    }

    .pkp_navigation_search_wrapper .pkp_search .fa-search {
        font-size: .8rem;
        opacity: .9;
    }

    .pkp_navigation_search_wrapper .pkp_search::after {
        content: "\f061";
        font-family: "FontAwesome";
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.6rem;
        height: 1.6rem;
        margin-left: .25rem;
        border-radius: 50%;
        background: #fff;
        color: #005A36;
        font-size: .68rem;
    }

    /* --- Language switcher: same links/labels as section 2, adding the
       pill/active-state/globe-icon treatment that section 5 already
       gives the mobile menu, now for desktop too --- */
    .custom_header_languages::before {
        font-family: "FontAwesome";
        content: "\f0ac";
        font-size: .7rem;
        opacity: .7;
        margin-right: .2rem;
    }

    .custom_header_languages a {
        padding: .25rem .55rem !important;
        border-radius: 999px !important;
        transition: background-color .2s ease, color .2s ease;
    }

    .custom_header_languages a:hover,
    .custom_header_languages a:focus {
        background: rgba(255, 255, 255, .14) !important;
    }

    html[lang^="en"] .custom_header_languages a:nth-of-type(1),
    html[lang^="ru"] .custom_header_languages a:nth-of-type(2),
    html[lang^="uz"] .custom_header_languages a:nth-of-type(3) {
        background: #fff !important;
        color: #005A36 !important;
        opacity: 1 !important;
    }

    /* --- Register / Login: clean pill actions with small icons --- */
    .pkp_navigation_user > li.profile > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: .4rem;
        padding: .45rem .9rem !important;
        border-radius: 999px !important;
        font-size: .85rem !important;
        font-weight: 600 !important;
        color: #fff !important;
        transition: background-color .2s ease;
    }

    .pkp_navigation_user > li.profile > a:hover,
    .pkp_navigation_user > li.profile > a:focus {
        background: rgba(255, 255, 255, .14) !important;
    }

    .pkp_navigation_user > li.profile > a[href*="/register"]::before {
        font-family: "FontAwesome";
        content: "\f234";
        font-size: .78rem;
    }

    .pkp_navigation_user > li.profile > a[href*="/login"]::before {
        font-family: "FontAwesome";
        content: "\f090";
        font-size: .78rem;
    }
}

/* ==========================================
   5c. HEADER PREMIUM REFINEMENT
   Further additive polish requested on top of 5b: a subtle background
   gradient (all widths) with an ornamental edge texture (desktop only,
   so a narrow phone screen never loses its "clean center"), a larger
   desktop journal title, a desktop subtitle, and a nicer language
   separator at desktop to match the one section 5 already gives mobile.
   Nothing in sections 1-5b is rewritten; only .pkp_structure_head's
   background-image (previously just theme's flat #005a36, untouched
   here) and .pkp_site_name_wrapper's flex-wrap (previously unset) are
   newly declared — no existing declaration is removed.
   ========================================== */

/* --- Background: subtle gradient everywhere, so mobile also gets a
   touch of depth instead of a flat fill --- */
.pkp_structure_head {
    background-image: linear-gradient(160deg, #00714a 0%, #005a36 45%, #00432a 100%);
}

/* --- Desktop only: layer a very faint diagonal hairline texture,
   confined to a 140px strip at each extreme edge (background-size +
   no-repeat + left/right position — not a full-width tiled pattern,
   so it cannot reach the center regardless of content length) --- */
@media (min-width: 992px) {
    .pkp_structure_head {
        background-image:
            repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 11px),
            repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 11px),
            linear-gradient(160deg, #00714a 0%, #005a36 45%, #00432a 100%);
        background-position: left top, right top, left top;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 140px 100%, 140px 100%, 100% 100%;
    }

    /* --- Larger, more prominent desktop title (mobile's own 18px
       override in section 5 is untouched — this only fires >=992px) --- */
    .pkp_site_name_wrapper a.is_img::after {
        font-size: 26px !important;
    }

    /* --- Language separators: same slim-bar treatment section 5
       already gives the mobile menu, now for desktop too (the literal
       "|" text is hidden via font-size:0, same as the mobile rule) --- */
    .custom_header_languages span {
        display: inline-block;
        width: 1px;
        height: 10px;
        margin: 0 2px;
        font-size: 0 !important;
        background: rgba(255, 255, 255, .3);
    }
}

/* ==========================================
   6. CURRENT ISSUE PAGE & ARTICLE LISTING
   Applies to: templates/frontend/objects/issue_toc.tpl (Current Issue page
   and, since it embeds the same partial, the homepage) and
   templates/frontend/objects/article_summary.tpl (article listing within
   it). Applies at all widths — theme's own responsive structure (cover
   float at >=768px, section margins at >=992px) is left in place; these
   rules only add typography, spacing and card/button polish on top of it.
   ========================================== */

/* --- Issue title --- */
.page_issue > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1.5rem 0 1.25rem;
    line-height: 1.25;
}

/* --- Issue heading block: cover image + description + DOI/URN + published date --- */
.obj_issue_toc > .heading {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    margin-bottom: 2rem;
}

.obj_issue_toc .cover img {
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.obj_issue_toc .heading .pub_id {
    display: inline-block;
    margin: .4rem .5rem .4rem 0 !important;
    padding: .45rem .75rem;
    background: rgba(15, 122, 78, .10);
    border-left: 3px solid #0F7A4E;
    border-radius: 0 6px 6px 0;
    font-size: .88rem;
}

.obj_issue_toc .heading .pub_id .type {
    color: #0F7A4E !important;
    font-weight: 700 !important;
    margin-right: .3rem;
}

.obj_issue_toc .heading .pub_id .id a {
    color: #333;
    word-break: break-all;
}

/* Published date: light-green metadata badge (not a solid fill, so it
   reads as "metadata" rather than a button), vertically aligned with the
   rest of the issue info via inline-flex */
.obj_issue_toc .heading .published {
    display: inline-flex !important;
    align-items: center;
    gap: .35rem;
    margin: .4rem 0 !important;
    padding: .3rem .75rem !important;
    background: rgba(15, 122, 78, .10);
    border-left: 0;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1.3;
    vertical-align: middle;
}

.obj_issue_toc .heading .published .label {
    color: #0F7A4E !important;
    font-weight: 700 !important;
    margin-right: 0;
}

.obj_issue_toc .heading .published .value {
    color: #0B5C3A;
    font-weight: 700;
}

@media (max-width: 767px) {
    .obj_issue_toc .heading .cover {
        max-width: 260px;
        margin: 0 auto 1.25rem !important;
        text-align: center;
    }

    .obj_issue_toc .heading .cover img {
        margin: 0 auto;
    }

    .obj_issue_toc .heading .pub_id {
        display: block;
        margin-right: 0 !important;
    }

    .obj_issue_toc .heading .published {
        margin: .5rem 0 !important;
    }
}

/* Desktop only: two-column card — cover left, publication info right.
   Tablet/mobile keep the stacked layout above unchanged. */
@media (min-width: 992px) {
    .obj_issue_toc > .heading {
        display: grid !important;
        grid-template-columns: 240px 1fr;
        gap: 1.75rem;
        align-items: start;
        padding: 1.5rem 1.75rem !important;
    }

    /* Neutralize the theme's clearfix pseudo-elements so they don't
       become stray grid items once .heading switches to display:grid */
    .obj_issue_toc > .heading:before,
    .obj_issue_toc > .heading:after {
        content: none !important;
    }

    .obj_issue_toc > .heading .cover {
        grid-column: 1;
        grid-row: 1 / -1;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

    .obj_issue_toc > .heading .cover img {
        width: 100%;
        height: auto;
        display: block;
    }

    .obj_issue_toc > .heading > *:not(.cover) {
        grid-column: 2;
    }
}

/* --- Full-issue galleys (the "Full Issue PDF" button) --- */
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3 {
    font-family: Georgia, "Times New Roman", serif !important;
}

.obj_issue_toc .galleys .obj_galley_link.pdf {
    padding: .7rem 1.5rem !important;
    font-size: 1rem !important;
}

/* Theme's own rule (.obj_issue_toc .galleys, .obj_issue_toc .section)
   gives .galleys a 2.143rem padding on every side plus a 2.143rem
   bottom margin, and .section (untouched, off-limits) has its own
   2.143rem top margin + 2.143rem top padding (confirmed via the
   theme's compiled CSS — .section's own heading has margin-top:0, so
   no further hidden spacing beyond these). The visible gap after the
   PDF button is the sum of three parts:
     1. .galleys' own padding-bottom (real space, ours to control)
     2. the collapsed margin between .galleys' margin-bottom and
        .section's margin-top, via the unstyled .sections wrapper —
        normally this takes the LARGER of the two, so it was stuck at
        .section's fixed 2.143rem no matter how far padding-bottom
        alone was reduced (the previous 2.143rem -> 1.6rem pass only
        ever touched part 1, leaving parts 2 and 3 at a fixed 4.286rem
        combined — the real reason that pass "wasn't enough")
     3. .section's own padding-top (fixed 2.143rem, untouched)
   A negative margin-bottom on .galleys changes how part 2 collapses:
   per the CSS spec, when a positive and a negative margin collapse,
   the result is their SUM, not the larger one — so a negative value
   here shrinks part 2 without changing a single property on .section.
   This is the only way to bring the total under ~70px while leaving
   .section completely alone. */
.obj_issue_toc .galleys {
    padding-bottom: .8rem;
    margin-bottom: -1.4rem;
}

/* --- Article list: section groups already get the theme's divider/label
   treatment; each article becomes its own card within that section --- */
.cmp_article_list.articles > li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: 1.1rem 1.35rem;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.cmp_article_list.articles > li:last-child {
    margin-bottom: 0 !important;
}

.cmp_article_list.articles > li:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    border-color: rgba(15, 122, 78, .25);
}

/* Article title — kept as the strongest element on the card: largest,
   boldest, serif, darkest neutral text */
.obj_article_summary > .title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    margin-bottom: .3rem !important;
}

.obj_article_summary > .title a {
    color: #1a1a1a !important;
}

.obj_article_summary > .title a:hover {
    color: #0F7A4E !important;
}

.obj_article_summary .subtitle {
    font-size: .9rem !important;
    color: #666 !important;
}

@media (min-width: 768px) {
    .obj_article_summary > .title {
        font-size: 1.25rem !important;
    }
}

/* Article-level DOI, injected by the doiInSummary plugin right after
   the title (plugins/generic/doiInSummary) */
.obj_article_summary .doiInSummary {
    margin: 0 0 .5rem !important;
    font-size: .82rem;
    color: #555;
}

.obj_article_summary .doiInSummary strong {
    color: #005A36;
    font-weight: 700;
    margin-right: .3rem;
}

.obj_article_summary .doiInSummary a {
    color: #005A36;
    text-decoration: none;
    word-break: break-all;
}

.obj_article_summary .doiInSummary a:hover {
    text-decoration: underline;
}

/* Author / page / date meta — stronger author line, subtle right-aligned
   page numbers. Theme keeps .pages absolutely positioned top-right at
   >=768px (untouched); margin-left:auto below only takes effect on
   narrower widths, where .pages remains in normal flex flow.
   padding-top here overrides the theme's own unscoped ".357rem" default
   (this stylesheet loads after the theme's compiled CSS, so the plain
   declaration below already wins without !important) — part of the
   card-compactness pass: trims the DOI-to-author gap along with the
   margin-top reduction just below. */
.obj_article_summary .meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: .75rem;
    row-gap: .3rem;
    margin-top: .5rem !important;
    padding-top: .25rem;
}

.obj_article_summary .authors {
    font-size: .96rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: .1px;
}

/* Page numbers: neutral gray chip — secondary metadata, not brand green */
.obj_article_summary .pages {
    margin-left: auto !important;
    padding: .15rem .55rem;
    background: rgba(107, 114, 128, .08);
    border-radius: 999px;
    font-size: .78rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.obj_article_summary .published {
    font-size: .8rem !important;
    color: #6b7280 !important;
}

/* PDF / other galley links for this article: bottom of the card (already
   last in DOM order) pushed to the right, separated by a light divider */
.obj_article_summary .galleys_links {
    justify-content: flex-end !important;
    margin-top: .7rem !important;
    padding-top: .6rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

/* --- PDF / galley download buttons (full issue + each article).
   Medium green — deliberately a step lighter than the header's dark
   green, so buttons read as their own tier in the color hierarchy. --- */
.obj_galley_link {
    display: inline-flex !important;
    align-items: center !important;
    background: #0F7A4E !important;
    color: #fff !important;
    border: 1px solid #0F7A4E !important;
    border-radius: 8px !important;
    padding: .5rem 1rem !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.obj_galley_link:before {
    color: #fff !important;
}

.obj_galley_link:hover,
.obj_galley_link:focus {
    background: #0B5C3A !important;
    border-color: #0B5C3A !important;
    box-shadow: 0 2px 8px rgba(15, 122, 78, .35);
    color: #fff !important;
}

.obj_galley_link.restricted {
    background: transparent !important;
    color: #b45309 !important;
    border-color: #b45309 !important;
}

.obj_galley_link.restricted:before {
    color: #b45309 !important;
}

.obj_galley_link.restricted:hover,
.obj_galley_link.restricted:focus {
    background: #b45309 !important;
    color: #fff !important;
}

.obj_galley_link.restricted:hover:before,
.obj_galley_link.restricted:focus:before {
    color: #fff !important;
}

/* ==========================================
   7. RIGHT SIDEBAR (.pkp_structure_sidebar)
   Blocks: block_make_submission, block_information, block_browse,
   block_subscription, etc. — all share the theme's .pkp_block wrapper.
   ========================================== */
.pkp_structure_sidebar .pkp_block {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: 1.25rem !important;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.pkp_structure_sidebar .pkp_block:last-child {
    margin-bottom: 0;
}

.pkp_structure_sidebar .pkp_block .title {
    font-family: Georgia, "Times New Roman", serif;
    color: #0F7A4E;
    font-size: 1rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
    padding-bottom: .5rem;
    margin-bottom: .75rem;
}

/* Make a Submission button — same medium-green button tier as the PDF
   download buttons, for a consistent "this is clickable" language */
.pkp_structure_sidebar .block_make_submission a {
    display: block !important;
    text-align: center;
    background: #0F7A4E !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: .75rem 1rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission a:focus {
    background: #0B5C3A !important;
    box-shadow: 0 2px 8px rgba(15, 122, 78, .35);
    color: #fff !important;
}

/* --- Article section headings ("Research Articles", "Reviews", etc.) ---
   The theme already renders these as a pill label over a divider line
   (issue_toc.less); this just refines the typography/color and softens
   the divider to match the brand instead of theme's neutral gray. */
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    color: #0F7A4E !important;
    background: #fff !important;
}

@media (min-width: 768px) {
    .obj_issue_toc .section:before,
    .obj_issue_toc .galleys:before {
        border-top-color: rgba(15, 122, 78, .18) !important;
    }
}

/* ==========================================
   8. INDIVIDUAL ARTICLE VIEW PAGE
   Applies to: templates/frontend/pages/article.tpl and
   templates/frontend/objects/article_details.tpl (rendered as
   <article class="obj_article_details">). Column layout (the
   main_entry / entry_details float grid and its 768/992/1200 breakpoints)
   stays exactly as the theme defines it in
   plugins/themes/default/styles/objects/article_details.less — these
   rules only add typography, spacing and the same card/chip language
   already used for the issue page and sidebar (sections 6 and 7 above).
   No markup, PHP, JS or DOI/Crossref metadata is touched.
   ========================================== */

/* --- Title & subtitle --- */
.obj_article_details > .page_title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.32;
    color: #1a1a1a;
    letter-spacing: -.2px;
}

.obj_article_details > .subtitle {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: #555;
    margin-top: .4rem;
}

@media (min-width: 600px) {
    .obj_article_details > .page_title {
        font-size: 1.7rem;
    }
}

@media (min-width: 1024px) {
    .obj_article_details > .page_title {
        font-size: 2rem;
    }
}

/* --- Preview / outdated-version notice: reuse the amber tone already
   used for restricted galleys, instead of the theme's generic blue --- */
.page_article .cmp_notification.notice {
    background: rgba(180, 83, 9, .07);
    border-left-color: #b45309;
    color: #7c3a05;
}

.page_article .cmp_notification.notice a {
    color: #b45309;
    font-weight: 600;
}

/* --- Authors & affiliations --- */
.obj_article_details .authors > li {
    padding-bottom: .6rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.obj_article_details .authors > li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.obj_article_details .authors .name {
    font-size: 1.05rem;
    color: #1a1a1a;
}

.obj_article_details .authors .affiliation {
    font-style: italic;
    color: #6b7280;
}

.obj_article_details .authors .userGroup {
    display: inline-block;
    margin-top: .3rem;
    padding: .1rem .55rem;
    background: rgba(15, 122, 78, .08);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #0F7A4E;
}

.obj_article_details .authors .orcid a {
    color: #6b7280;
    text-decoration: none;
}

.obj_article_details .authors .orcid a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

/* --- DOI: secondary scholarly metadata — a tinted, bordered strip so it
   reads as an identifier, not body copy --- */
.obj_article_details .main_entry .item.doi {
    background: rgba(15, 122, 78, .06);
    border-left: 3px solid #0F7A4E;
}

.obj_article_details .main_entry .item.doi .label {
    color: #0F7A4E;
    font-weight: 700;
}

.obj_article_details .main_entry .item.doi .value a {
    color: #333;
    word-break: break-all;
    text-decoration: none;
}

.obj_article_details .main_entry .item.doi .value a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

/* --- Keywords: neutral divider strip, kept understated next to the
   colored DOI strip above it --- */
.obj_article_details .main_entry .item.keywords {
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.obj_article_details .main_entry .item.keywords .label {
    color: #1a1a1a;
    font-weight: 700;
}

.obj_article_details .main_entry .item.keywords .value {
    color: #6b7280;
    line-height: 1.7;
}

/* --- Abstract: the primary reading card --- */
.obj_article_details .main_entry .item.abstract {
    background: rgba(15, 122, 78, .03);
    border-left: 3px solid #0F7A4E;
    border-radius: 0 10px 10px 0;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: #2a2a2a;
}

.obj_article_details .main_entry .item.abstract .label {
    font-family: Georgia, "Times New Roman", serif;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #0F7A4E;
}

/* --- Author biographies & data availability statement: align headings
   with the same serif treatment used elsewhere on the page --- */
.obj_article_details .item.author_bios > .label,
.obj_article_details .item.dataAvailability > .label {
    font-family: Georgia, "Times New Roman", serif;
    color: #1a1a1a;
}

.obj_article_details .author_bios .sub_item > .label {
    font-weight: 700;
    color: #1a1a1a;
}

/* --- References: readable spacing with a classic hanging indent --- */
.obj_article_details .item.references > .label {
    font-family: Georgia, "Times New Roman", serif;
    color: #1a1a1a;
}

.obj_article_details .item.references .value p {
    margin: 0 0 1rem;
    padding-left: 1.6em;
    text-indent: -1.6em;
    line-height: 1.75;
    font-size: .95rem;
    color: #2a2a2a;
}

.obj_article_details .item.references .value p:last-child {
    margin-bottom: 0;
}

.obj_article_details .item.references .value a {
    color: #0F7A4E;
}

/* --- Citation information ("How to Cite" block, when the citation
   style language plugin is enabled) --- */
.obj_article_details .citation_display #citationOutput {
    padding: 1rem 1.1rem;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    font-size: .92rem;
    line-height: 1.65;
    color: #2a2a2a;
}

.obj_article_details .citation_formats {
    border-color: rgba(0, 0, 0, .1);
    border-radius: 8px;
    overflow: hidden;
}

.obj_article_details .citation_formats_button {
    color: #0F7A4E;
    font-weight: 600;
}

.obj_article_details .citation_formats_styles a:hover {
    background: rgba(15, 122, 78, .06);
}

/* --- Publication metadata sidebar (.entry_details): cover image,
   PDF/galley downloads, published date, versions, issue, license --- */
.obj_article_details .entry_details .item {
    border-bottom-color: rgba(0, 0, 0, .07);
}

.obj_article_details .entry_details .label {
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: .72rem;
    color: #6b7280;
}

.obj_article_details .entry_details .cover_image img {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

/* PDF/galley button stays the same size/shape as the rest of the site
   (.obj_galley_link, section 6) — just even list spacing when there is
   more than one download */
.obj_article_details .entry_details .galleys_links li {
    margin-bottom: .5rem;
}

.obj_article_details .entry_details .galleys_links li:last-child {
    margin-bottom: 0;
}

.obj_article_details .entry_details .item.published .value span {
    font-weight: 600;
    color: #1a1a1a;
}

.obj_article_details .entry_details .versions .value a {
    color: #0F7A4E;
    text-decoration: none;
}

.obj_article_details .entry_details .versions .value a:hover {
    text-decoration: underline;
}

.obj_article_details .entry_details .item.issue .value a.title {
    color: #0F7A4E;
    font-weight: 600;
    text-decoration: none;
}

.obj_article_details .entry_details .item.issue .value a.title:hover {
    text-decoration: underline;
}

.obj_article_details .entry_details .categories a {
    color: #0F7A4E;
    text-decoration: none;
}

.obj_article_details .entry_details .categories a:hover {
    text-decoration: underline;
}

.obj_article_details .entry_details .item.copyright a.copyright {
    color: #0F7A4E;
}

/* Tablet and up: the theme's .row already clears the floated main_entry /
   entry_details columns, so it's safe to frame the whole thing as one
   card, matching .obj_issue_toc > .heading (section 6) — and give the
   metadata column its own light tint so it reads as a distinct sidebar */
@media (min-width: 768px) {
    .obj_article_details .row {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    }

    .obj_article_details .entry_details {
        background: #fafbfa;
    }
}

/* Below 768px main_entry and entry_details stack (theme default) — give
   the metadata block its own light divider/tint instead of the full
   card frame used at wider widths */
@media (max-width: 767px) {
    .obj_article_details .entry_details {
        background: #fafbfa;
        border-top: 1px solid rgba(0, 0, 0, .08);
        margin-top: 1rem;
        border-radius: 0 0 12px 12px;
    }

    .obj_article_details .item.abstract,
    .obj_article_details .item.doi {
        border-radius: 8px;
    }
}

@media (max-width: 600px) {
    .obj_article_details .item.abstract {
        padding: 1rem 1.1rem;
    }
}

@media (max-width: 480px) {
    .obj_article_details > .page_title {
        font-size: 1.3rem;
    }

    .obj_article_details .authors .name {
        font-size: 1rem;
    }

    .obj_article_details .item.references .value p {
        padding-left: 1.3em;
        text-indent: -1.3em;
    }
}

/* ==========================================
   9. ARCHIVES PAGE (templates/frontend/pages/issueArchive.tpl,
   templates/frontend/objects/issue_summary.tpl)
   Everything below is scoped to body.pkp_op_archive so it can ONLY ever
   affect the Archives listing — Current Issue (body.pkp_op_view), the
   homepage, article pages and the shared sidebar on every other page are
   left exactly as they were. Markup verified against the live rendered
   page (2026-09-16): <ul class="issues_archive"><li><div
   class="obj_issue_summary"><a class="cover">...<h2><a class="title">
   ...<div class="series">...</div></h2><div class="description">...
   ========================================== */

/* --- Page title: match .page_issue > h1 (section 6) for visual
   consistency with the Current Issue page --- */
body.pkp_op_archive .page_issue_archive > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1.5rem 0 1.25rem;
    line-height: 1.25;
}

/* --- Grid container: replace the theme's divided list (negative
   margins + full-width bordered rows) with a card grid so short cards
   don't leave huge empty rows --- */
body.pkp_op_archive .issues_archive {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    list-style: none !important;
}

body.pkp_op_archive .issues_archive > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}

@media (min-width: 1200px) {
    body.pkp_op_archive .issues_archive {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

/* --- Issue card --- */
body.pkp_op_archive .obj_issue_summary {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.25rem;
    height: 100%;
    transition: box-shadow .15s ease, border-color .15s ease;
}

body.pkp_op_archive .obj_issue_summary:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    border-color: rgba(15, 122, 78, .25);
}

/* Neutralize the theme's clearfix pseudo-elements (added by the
   .pkp_helpers_clear mixin in issue_summary.less) so they don't become
   stray grid items once the card switches to display:grid below */
@media (min-width: 768px) {
    body.pkp_op_archive .obj_issue_summary:before,
    body.pkp_op_archive .obj_issue_summary:after {
        content: none !important;
    }
}

body.pkp_op_archive .obj_issue_summary .cover {
    display: block;
    margin: 0 auto 1rem;
    max-width: 160px;
}

body.pkp_op_archive .obj_issue_summary .cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

body.pkp_op_archive .obj_issue_summary h2 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    line-height: 1.35;
}

body.pkp_op_archive .obj_issue_summary .title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

body.pkp_op_archive .obj_issue_summary .title:hover,
body.pkp_op_archive .obj_issue_summary .title:focus {
    color: #0F7A4E !important;
}

/* Issue number/year: secondary metadata, same pill treatment as the
   published-date badge on the issue TOC (section 6) */
body.pkp_op_archive .obj_issue_summary .series {
    display: inline-block;
    margin: .4rem 0 0;
    padding: .2rem .65rem;
    background: rgba(15, 122, 78, .10);
    border-radius: 999px;
    color: #0B5C3A !important;
    font-size: .78rem;
    font-weight: 600;
}

body.pkp_op_archive .obj_issue_summary .description {
    margin-top: .5rem;
    font-size: .88rem;
    line-height: 1.55;
    color: #444;
}

body.pkp_op_archive .obj_issue_summary .description p:first-child {
    margin-top: 0;
}

body.pkp_op_archive .obj_issue_summary .description p:last-child {
    margin-bottom: 0;
}

/* Tablet and up: compact two-column card — cover left, title/metadata
   right — using the same grid technique as .obj_issue_toc > .heading
   (section 6), so cover and text align consistently instead of the
   theme's float (which leaves a ragged gap when there's little text) */
@media (min-width: 768px) {
    body.pkp_op_archive .obj_issue_summary {
        display: grid;
        grid-template-columns: 130px 1fr;
        column-gap: 1.25rem;
        row-gap: 0;
        align-items: start;
        padding: 1.25rem 1.5rem;
    }

    body.pkp_op_archive .obj_issue_summary .cover {
        grid-column: 1;
        grid-row: 1 / -1;
        float: none !important;
        width: auto !important;
        max-width: none;
        margin: 0 !important;
    }

    body.pkp_op_archive .obj_issue_summary .cover img {
        max-height: none !important;
    }

    body.pkp_op_archive .obj_issue_summary h2 {
        grid-column: 2;
        grid-row: 1;
    }

    body.pkp_op_archive .obj_issue_summary .description {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (min-width: 1024px) {
    body.pkp_op_archive .obj_issue_summary {
        grid-template-columns: 150px 1fr;
        column-gap: 1.5rem;
    }

    body.pkp_op_archive .obj_issue_summary .title {
        font-size: 1.2rem !important;
    }
}

/* Mobile: keep the card compact — smaller cover, tighter padding */
@media (max-width: 600px) {
    body.pkp_op_archive .obj_issue_summary {
        padding: 1rem;
    }

    body.pkp_op_archive .obj_issue_summary .cover {
        max-width: 130px;
    }
}

@media (max-width: 480px) {
    body.pkp_op_archive .obj_issue_summary .title {
        font-size: 1.05rem !important;
    }
}

/* --- Pagination: align with the card grid's spacing/typography --- */
body.pkp_op_archive .cmp_pagination {
    margin-top: 1.75rem !important;
}

/* ==========================================
   9b. ARCHIVES PAGE SIDEBAR
   Live markup (2026-09-16) shows three sidebar cards with real content
   (#customblock-journal-cover, block_make_submission,
   #customblock-indexing) plus .block_information, whose title and every
   <li> are already force-hidden site-wide by section 4 above — leaving
   an empty bordered/shadowed box. Only that empty card is hidden here;
   every block with real content keeps the shared .pkp_block card style
   from section 7 untouched.
   ========================================== */
body.pkp_op_archive .pkp_structure_sidebar .block_information {
    display: none !important;
}

/* Journal cover image: proportional, centered, matches card image
   treatment used elsewhere on the page */
body.pkp_op_archive .pkp_structure_sidebar #customblock-journal-cover .content {
    text-align: center;
}

body.pkp_op_archive .pkp_structure_sidebar #customblock-journal-cover img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* Make a Submission: proportional button on tablet/desktop instead of
   full-width; stays full-width on small screens where that reads best */
@media (min-width: 768px) {
    body.pkp_op_archive .pkp_structure_sidebar .block_make_submission .content {
        text-align: center;
    }

    body.pkp_op_archive .pkp_structure_sidebar .block_make_submission a {
        display: inline-block !important;
        width: auto !important;
        padding: .65rem 1.75rem !important;
    }
}

/* ISSN / indexing block: readable line-height and grouping; the middle
   <p> ("INDEXED IN") is styled as a small section label using its
   structural position, separating the ISSN lines above from the
   indexing sources below */
body.pkp_op_archive .pkp_structure_sidebar #customblock-indexing .content {
    font-size: .85rem;
    line-height: 1.7;
    color: #333;
}

body.pkp_op_archive .pkp_structure_sidebar #customblock-indexing p {
    margin: 0 0 .75rem;
}

body.pkp_op_archive .pkp_structure_sidebar #customblock-indexing p:last-child {
    margin-bottom: 0;
}

body.pkp_op_archive .pkp_structure_sidebar #customblock-indexing p:nth-of-type(2) {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0F7A4E !important;
}

/* ==========================================
   9c. ARCHIVES PAGE — FINAL MOBILE/TABLET POLISH
   Everything below is scoped to body.pkp_op_archive AND capped with
   max-width media queries below 992px, so desktop (>=992px, where the
   section 9 / 9b card grid and sidebar already look right) is left
   completely untouched. Verified at 900 / 768 / 600 / 480px.
   ========================================== */

/* --- Card: tighter vertical rhythm on the stacked (cover-on-top)
   mobile layout below 768px. The >=768px two-column grid card from
   section 9 is not touched by this block. --- */
@media (max-width: 767px) {
    body.pkp_op_archive .issues_archive {
        gap: .9rem;
    }

    body.pkp_op_archive .obj_issue_summary {
        padding: .9rem;
    }

    /* Cover stays centered (theme default), just smaller and with a
       tighter gap to the title/year below it */
    body.pkp_op_archive .obj_issue_summary .cover {
        max-width: 140px;
        margin: 0 auto .55rem;
    }

    body.pkp_op_archive .obj_issue_summary h2 {
        margin: 0 0 .2rem;
    }

    body.pkp_op_archive .obj_issue_summary .series {
        margin-top: .25rem;
    }

    body.pkp_op_archive .obj_issue_summary .description {
        margin-top: .35rem;
    }
}

@media (max-width: 600px) {
    body.pkp_op_archive .obj_issue_summary {
        padding: .8rem;
    }

    body.pkp_op_archive .obj_issue_summary .cover {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    body.pkp_op_archive .issues_archive {
        gap: .75rem;
    }

    body.pkp_op_archive .obj_issue_summary {
        padding: .75rem;
    }

    body.pkp_op_archive .obj_issue_summary .cover {
        max-width: 105px;
        margin-bottom: .45rem;
    }
}

/* --- Sidebar: reduce excessive vertical spacing on mobile/tablet and
   keep the ISSN/indexing block compact but readable. Desktop keeps the
   roomier section-7 padding untouched. --- */
@media (max-width: 991px) {
    body.pkp_op_archive .pkp_structure_sidebar .pkp_block {
        padding: 1rem !important;
        margin-bottom: 1rem;
    }

    body.pkp_op_archive .pkp_structure_sidebar .pkp_block .title {
        margin-bottom: .5rem;
        padding-bottom: .35rem;
    }

    body.pkp_op_archive .pkp_structure_sidebar #customblock-indexing .content {
        font-size: .82rem;
        line-height: 1.55;
    }

    body.pkp_op_archive .pkp_structure_sidebar #customblock-indexing p {
        margin-bottom: .5rem;
    }

    body.pkp_op_archive .pkp_structure_sidebar #customblock-indexing p:nth-of-type(2) {
        margin-top: .5rem;
        padding-top: .5rem;
    }
}

/* --- Make a Submission: compact centered button below 768px too
   (768px-991px already gets a compact button from section 9b). Padding
   is kept generous enough for a comfortable touch target (~44px tall)
   even though the button is no longer full-width. --- */
@media (max-width: 767px) {
    body.pkp_op_archive .pkp_structure_sidebar .block_make_submission .content {
        text-align: center;
    }

    body.pkp_op_archive .pkp_structure_sidebar .block_make_submission a {
        display: inline-block !important;
        width: auto !important;
        min-width: 190px;
        padding: .75rem 1.5rem !important;
    }
}

/* ==========================================
   9d. ARCHIVES PAGE — TABLET-WIDTH REFINEMENT (601px–991px only)
   Single media query, scoped to body.pkp_op_archive, sitting after every
   other archive rule in this file so it wins the cascade for this exact
   band without touching the <=600px phone rules (section 9c) or the
   >=992px desktop rules (section 9). At this width the sidebar narrows
   the main column, so the previous tablet cover (130px–150px, from the
   >=768px grid card in section 9) read as oversized and, combined with
   the row-spanning grid, made short cards taller than their text
   needed. This shrinks the cover and tightens spacing so cards are
   compact and balanced across the whole 601–991px band — superseding,
   for this band only, both the <=767px stacked-mobile card and the
   >=768px tablet grid card already defined above.

   Vertical-centering fix: the cover previously spanned grid-row:1/-1
   across BOTH the title row and the description row, which forces the
   grid track-sizing algorithm to inflate the sum of those two auto rows
   to match the cover's height. With align-items:start, the title then
   stuck to the top of that inflated space, leaving the extra height as
   a visible empty block underneath. Fix: the cover now spans only
   row 1 (where the title/year live), so row 1's height is simply
   max(cover height, title height) and align-items:center centers the
   title against the cover directly — matching the cover's own vertical
   center, no wrapper markup required. The (usually empty) description
   lives in its own row 2, sized to its own content only, so it no
   longer inherits any of the cover's height and can't leave a large
   empty gap below the text.
   ========================================== */
@media (min-width: 601px) and (max-width: 991px) {
    body.pkp_op_archive .issues_archive {
        gap: .85rem;
    }

    /* Compact horizontal card: small cover left, title/year vertically
       centered next to it, description (if any) in its own row below */
    body.pkp_op_archive .obj_issue_summary {
        display: grid;
        grid-template-columns: 90px 1fr;
        column-gap: .9rem;
        row-gap: 0;
        align-items: center;
        padding: .8rem .95rem;
    }

    body.pkp_op_archive .obj_issue_summary:before,
    body.pkp_op_archive .obj_issue_summary:after {
        content: none !important;
    }

    /* Cover: fixed, smaller column width; spans only the title row (not
       the description row below) so it alone drives that row's height —
       and, via align-items:center above, the card's overall height */
    body.pkp_op_archive .obj_issue_summary .cover {
        grid-column: 1;
        grid-row: 1;
        float: none !important;
        width: auto !important;
        max-width: 90px;
        margin: 0 !important;
    }

    body.pkp_op_archive .obj_issue_summary .cover img {
        width: 100%;
        height: auto;
        max-height: none !important;
    }

    /* Title/year: right column, vertically centered against the cover
       via the container's align-items:center; no top/bottom margin so
       it sits exactly centered with nothing pushing it off-center */
    body.pkp_op_archive .obj_issue_summary h2 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    body.pkp_op_archive .obj_issue_summary .title {
        font-size: 1.02rem !important;
        line-height: 1.3 !important;
    }

    /* Year: kept directly under the title inside the same centered h2 */
    body.pkp_op_archive .obj_issue_summary .series {
        margin-top: .2rem;
        padding: .15rem .55rem;
        font-size: .72rem;
    }

    /* Description: its own row, sized only to its own content — no
       longer spanned/inflated by the cover, so an empty description
       adds no visible height */
    body.pkp_op_archive .obj_issue_summary .description {
        grid-column: 2;
        grid-row: 2;
        margin-top: .25rem;
        font-size: .85rem;
        line-height: 1.45;
    }
}

/* ==========================================
   10. ARTICLE VIEW PAGE — LOWER METADATA / GALLEY AREA
   Applies to templates/frontend/objects/article_details.tpl, scoped
   strictly to body.pkp_op_view.pkp_page_article (confirmed from the live
   rendered page, 2026-09-16: <body class="pkp_page_article pkp_op_view
   ...">) so none of this can ever reach the Current Issue page (which
   also carries pkp_op_view, but with pkp_page_issue instead), the
   Archives page, or any other page. Title/authors/DOI/keywords/abstract
   (.main_entry) are untouched — only .entry_details (cover image, PDF/
   galley links, Published, Issue, Section) is restyled.

   Markup verified live:
   <div class="entry_details">
     <div class="item cover_image"><div class="sub_item"><a><img></a></div></div>
     <div class="item galleys"><h2 class="pkp_screen_reader">Downloads</h2>
       <ul class="value galleys_links"><li><a class="obj_galley_link pdf">...</a></li></ul></div>
     <div class="item published"><section class="sub_item"><h2 class="label">Published</h2>
       <div class="value"><span>...</span></div></section></div>
     <div class="item issue">
       <section class="sub_item"><h2 class="label">Issue</h2><div class="value"><a class="title">...</a></div></section>
       <section class="sub_item"><h2 class="label">Section</h2><div class="value">...</div></section>
     </div>
   </div>

   Per the theme (plugins/themes/default/styles/objects/article_details.less),
   .entry_details becomes its own floated column beside .main_entry at
   >=768px with a FIXED width (@sidebar-width = 300px) that never changes
   at any larger breakpoint. No text, links, DOI/Crossref data, or PDF
   href is touched — only layout/spacing of the existing elements.

   Revision 2 (2026-09-16): live markup re-verified — .entry_details has
   exactly FOUR direct-child .item elements controlling grid placement:
   .item.cover_image, .item.galleys, .item.published and .item.issue.
   There is no separate .item.section — "Section" is the second of two
   <section class="sub_item"> elements nested INSIDE .item.issue (the
   first sub_item is "Issue"), so .item.issue already carries both, and
   sub_item is not itself a grid child. The root cause of rows dropping
   below the cover: .entry_details' children are plain block-level <div>
   elements with no float/width/clear of their own — the THEME never
   floats or grids them individually, it only floats/sizes the .entry_details
   column itself (article_details.less, @screen-tablet block). With no
   display:grid (or flex) on .entry_details, normal block flow is what
   stacks every .item full-width, one below the next — that default block
   formatting context is the "inherited rule" that must be overridden.
   This revision also narrows the compact-grid media query to exactly
   601px–991px as specified, and adds a matching >=992px block with the
   same rules so desktop keeps its current (already-working) appearance
   instead of reverting to the theme default once the 991px cap is added.
   ========================================== */

/* --- 601px–991px: CSS Grid, 2 columns x 2 rows. Column 1 stacks
   cover (row 1) then PDF (row 2) — PDF UNDER the cover, never beside
   it. Column 2 stacks Published (row 1) then Issue, which already
   contains Section as a nested sub_item (row 2) — the theme's own
   markup nests "Section" inside .item.issue as a second .sub_item, so
   it is not a separate grid item; targeting .item.issue places both.
   This supersedes the previous flexbox attempt at this breakpoint
   entirely — that display:flex/flex-flow/width:calc()/margin-left:calc()
   ruleset is removed below, not left active alongside this one. --- */
@media (min-width: 601px) and (max-width: 991px) {
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details {
        display: grid !important;
        grid-template-columns: 160px minmax(0, 1fr);
        /* Row 1 (Published) is capped to min-content, not "auto": an
           "auto" max track has an unlimited growth limit, so when the
           cover (spanning rows 1-2) needs more height than Published's
           and Issue's own text provide, the grid track-sizing algorithm
           splits that extra height across BOTH spanned rows — inflating
           row 1 and pushing Published down inside it even though
           Published's own content never needed that space. Giving row 1
           a finite growth limit (min-content) means it can't absorb any
           of the cover's overflow, so all of it flows into row 2 (still
           auto) instead — cover still visually spans rows 1-2 the same,
           but row 1 now sizes to Published's text alone. */
        grid-template-rows: min-content auto auto;
        column-gap: 1.5rem;
        row-gap: 0.4rem;
        align-items: start;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item {
        box-sizing: border-box !important;
        width: auto !important;
        float: none !important;
        clear: none !important;
        border-bottom: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Explicit belt-and-braces zeroing on the four grid items (redundant
       with the generic .item rule just above, which already matches all
       four — kept as its own rule for an easily auditable, self-contained
       statement that none of them introduce vertical gaps) */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.cover_image,
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.galleys,
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.published,
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.issue {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Column 1, rows 1-2: cover — spans both rows so row 1 is no longer
       forced to the cover's full height (that was the remaining cause of
       whitespace beside "Published"); natural aspect ratio, unchanged size */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.cover_image {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .cover_image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 350px;
        object-fit: contain;
    }

    /* Column 1, row 3: PDF, directly under the cover (which now spans
       rows 1-2), left-aligned, no extra top margin beyond row-gap */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.galleys {
        grid-column: 1;
        grid-row: 3;
    }

    /* Column 2, row 1: Published */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.published {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    /* Column 2, rows 2-3: Issue and Section. Section is NOT a separate
       ".item" — it is the second of two <section class="sub_item"> nested
       inside .item.issue (Issue is the first). display:contents removes
       .item.issue itself from grid layout so its two sub_item children
       become direct grid children and can be placed on their own rows;
       PDF (column 1, row 3) and Section (column 2, row 3) share row 3. */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.issue {
        display: contents;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.issue > .sub_item:first-child {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.issue > .sub_item:last-child {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
    }

    /* Right column: compact, readable label/value rhythm */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .label {
        line-height: 1.2 !important;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .value {
        line-height: 1.3 !important;
    }

    /* Extra ".item" in the selector chain (matches the same nested
       sub_item elements — no change in what is targeted) is required so
       this wins over the unconditional .sub_item rule below section 10's
       comment block (same specificity, later source order) which would
       otherwise force .6rem back in at this breakpoint only */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item .sub_item {
        margin-bottom: .3rem !important;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item .sub_item:last-child {
        margin-bottom: 0 !important;
    }
}

/* --- >=992px: compact 2-column panel — left: cover + PDF, right:
   Published/Issue/Section.

   Revision 3 (2026-09-20): fixed — this block previously placed
   .item.galleys (PDF) in the RIGHT column (grid-column: 2) instead of
   under the cover, and gave .item.cover_image a "grid-row: 1 / -1"
   span with no grid-template-rows defined; with zero explicit row
   tracks, grid line -1 resolves to the same line as line 1, so the
   span collapsed to a single row instead of actually spanning — this
   is what let Published/Issue/Section drop out of the intended right
   column. Fixed by mirroring the already-working 601–991px pattern
   above: an explicit grid-template-rows, cover spanning rows 1-2,
   galleys (PDF) moved to column 1 / row 3 under the cover, and
   .item.issue switched to display:contents so its two nested
   sub_item children (Issue, Section) become independent grid rows in
   column 2 — same technique already proven at the breakpoint above. --- */
@media (min-width: 992px) {
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details {
        display: grid !important;
        grid-template-columns: 110px minmax(0, 1fr);
        grid-template-rows: min-content auto auto;
        column-gap: 1rem;
        row-gap: 0;
        align-items: start;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item {
        width: auto !important;
        float: none !important;
        clear: none !important;
        padding: .5rem .75rem !important;
        border-bottom: none !important;
    }

    /* Column 1, rows 1-2: cover */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.cover_image {
        grid-column: 1;
        grid-row: 1 / 3;
        padding: .7rem 0 .7rem .7rem !important;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .cover_image img {
        max-width: 110px !important;
        width: 100%;
        height: auto;
    }

    /* Column 1, row 3: PDF, directly under the cover */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.galleys {
        grid-column: 1;
        grid-row: 3;
        padding-top: .2rem !important;
        padding-bottom: .2rem !important;
    }

    /* Column 2, row 1: Published */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.published {
        grid-column: 2;
        grid-row: 1;
        padding-left: 0 !important;
        padding-top: .7rem !important;
        padding-bottom: .2rem !important;
    }

    /* Column 2, rows 2-3: Issue then Section (Section is the second of
       two <section class="sub_item"> nested inside .item.issue) */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.issue {
        display: contents;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.issue > .sub_item:first-child {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.issue > .sub_item:last-child {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
    }
}

/* --- <=600px: simple centered stack — cover, then PDF button, then the
   metadata rows (left-aligned for readability, since Issue/Section text
   can run long) --- */
@media (max-width: 600px) {
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item {
        padding: .5rem 0 !important;
        border-bottom: none !important;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.cover_image {
        text-align: center;
        padding-bottom: .35rem !important;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .cover_image img {
        max-width: 110px !important;
        margin: 0 auto;
        display: block;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.galleys {
        padding-top: 0 !important;
        padding-bottom: .4rem !important;
    }

    /* Fix: .galleys_links is a flex row (theme default
       justify-content:start) — centering the parent via text-align has
       no effect on a flex child's own alignment, so justify-content
       must be overridden directly to actually center the PDF button */
    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .galleys_links {
        justify-content: center !important;
    }

    body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .item.published {
        padding-top: .5rem !important;
        border-top: 1px solid rgba(0, 0, 0, .07) !important;
    }
}

/* --- Published / Issue / Section: tighter label/value rhythm at every
   width (theme default is a full @double/1.43rem gap between the Issue
   and Section sub_items) --- */
body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .sub_item {
    margin-bottom: .4rem !important;
}

body.pkp_op_view.pkp_page_article .obj_article_details .entry_details .sub_item:last-child {
    margin-bottom: 0 !important;
}

/* --- 10c. Metadata card placement: move .entry_details (cover/PDF/
   Published/Issue/Section) before .main_entry (authors/DOI/keywords/
   abstract) so it renders as a header card above the abstract at every
   width, instead of the theme's default of floating it as a right
   sidebar at >=768px or stacking it after the abstract below 768px.
   .row is switched from the theme's float-based columns to a vertical
   flex stack; `order` alone reorders the two existing DOM siblings, no
   template change. entry_details' own internal cover/PDF/Published/
   Issue/Section grid (defined above in this section) is untouched. --- */
body.pkp_op_view.pkp_page_article .obj_article_details .row {
    display: flex;
    flex-direction: column;
}

body.pkp_op_view.pkp_page_article .obj_article_details .main_entry,
body.pkp_op_view.pkp_page_article .obj_article_details .entry_details {
    width: 100% !important;
    float: none !important;
}

body.pkp_op_view.pkp_page_article .obj_article_details .entry_details {
    order: -1;
}

/* ==========================================
   10b. ARTICLE VIEW PAGE SIDEBAR
   Same treatment as the Archives page sidebar (section 9b/9c), scoped
   here to the article page only, so both pages read consistently.
   ========================================== */
body.pkp_op_view.pkp_page_article .pkp_structure_sidebar .block_information {
    display: none !important;
}

body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-journal-cover .content {
    text-align: center;
}

body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-journal-cover img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-indexing .content {
    font-size: .85rem;
    line-height: 1.7;
    color: #333;
}

body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-indexing p {
    margin: 0 0 .75rem;
}

body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-indexing p:last-child {
    margin-bottom: 0;
}

body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-indexing p:nth-of-type(2) {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0F7A4E !important;
}

/* Make a Submission: compact, centered button on tablet/mobile instead
   of unnecessarily full-width; sidebar blocks get tighter padding too */
@media (max-width: 991px) {
    body.pkp_op_view.pkp_page_article .pkp_structure_sidebar .pkp_block {
        padding: 1rem !important;
        margin-bottom: 1rem;
    }

    body.pkp_op_view.pkp_page_article .pkp_structure_sidebar .pkp_block .title {
        margin-bottom: .5rem;
        padding-bottom: .35rem;
    }

    body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-indexing .content {
        font-size: .82rem;
        line-height: 1.55;
    }

    body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-indexing p {
        margin-bottom: .5rem;
    }

    body.pkp_op_view.pkp_page_article .pkp_structure_sidebar #customblock-indexing p:nth-of-type(2) {
        margin-top: .5rem;
        padding-top: .5rem;
    }

    body.pkp_op_view.pkp_page_article .pkp_structure_sidebar .block_make_submission .content {
        text-align: center;
    }

    body.pkp_op_view.pkp_page_article .pkp_structure_sidebar .block_make_submission a {
        display: inline-block !important;
        width: auto !important;
        min-width: 190px;
        padding: .7rem 1.5rem !important;
    }
}

/* ==========================================
   11. HOMEPAGE ("Bosh sahifa")
   Applies to: lib/pkp/templates/frontend/pages/navigationMenuItemViewContent.tpl
   — the shared "Custom Page" nav-menu-item template (also used by
   General info, etc.). Everything below is scoped to
   body.pkp_page_home.pkp_op_index (confirmed unique to this exact page,
   same technique already proven for the header's active-nav-pill rule),
   so General info and any other custom page keep their current,
   unstyled appearance. The two-column split itself (.pkp_structure_main
   / .pkp_structure_sidebar float grid, ~68.5%/31.5% at >=992px) is the
   theme's own existing layout and is not touched — only content inside
   each column is styled. Sidebar blocks (.pkp_block, .block_make_submission,
   #customblock-indexing) reuse the exact card/button pattern already
   established in sections 7/9b/10b for Archives and Article View, just
   re-scoped to this page.
   ========================================== */

/* --- Very subtle background pattern (kept per explicit request):
   two low-opacity diagonal hairline layers forming a faint diamond
   lattice, reminiscent of a restrained geometric motif. Alpha reduced
   to .012 (from an initial .035 that read as too visible) and every
   content block below has its own solid #fff background, so the
   pattern is only ever visible in the page's own gutters/margins — it
   never overlaps or competes with the white cards or the body text. --- */
body.pkp_page_home.pkp_op_index {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

/* --- Breadcrumb --- */
body.pkp_page_home.pkp_op_index .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_home.pkp_op_index .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_home.pkp_op_index .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_home.pkp_op_index .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_home.pkp_op_index .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

/* --- Page title (kept OUTSIDE the content card, per spec) + short
   green underline accent. .page_content is a new wrapper div added in
   navigationMenuItemViewContent.tpl (the minimal template change
   discussed) — it holds only the DB-stored body text, never the
   title, so the two can be styled/positioned independently. --- */
body.pkp_page_home.pkp_op_index .page > .page_title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_home.pkp_op_index .page > .page_title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_home.pkp_op_index .page > .page_title {
        font-size: 2.1rem;
    }
}

/* --- Content card wrapping the existing homepage text. Text itself
   (every paragraph, exact wording and links) is untouched — only
   spacing/typography of the wrapper and its paragraphs. --- */
body.pkp_page_home.pkp_op_index .page_content {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.5rem 1.75rem;
}

body.pkp_page_home.pkp_op_index .page_content p {
    margin: 0 0 1rem;
    line-height: 1.75;
    color: #2a2a2a;
    font-size: 1rem;
}

body.pkp_page_home.pkp_op_index .page_content p:last-child {
    margin-bottom: 0;
}

/* First paragraph's bolded lead-in (the content's own repeated title
   line, written as <strong> by the editor) duplicated the outer
   .page_title visually — it previously got EXTRA emphasis (larger,
   green), which made it read as a second, competing heading. Made
   subordinate instead: smaller than the surrounding body text and
   muted, so the outer page title stays the clear, singular heading.
   Text itself is untouched, still present exactly as written. */
body.pkp_page_home.pkp_op_index .page_content > p:first-of-type strong {
    font-size: .8rem;
    font-weight: 600;
    color: #6b7280;
}

@media (min-width: 768px) {
    body.pkp_page_home.pkp_op_index .page_content {
        padding: 1.85rem 2.1rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_home.pkp_op_index .page_content {
        padding: 1.15rem 1.25rem;
    }
}

/* --- The sidebar's #customblock-journal-cover block (a custom image
   block, first in the sidebar, directly above "Maqola yuborish") holds
   only an <img> whose src points at an old domain
   (navai.testchi.uz) that fails SSL certificate verification — the
   image never renders in any browser, leaving an empty white
   .pkp_block card with no visible content (not a template/CSS bug;
   the block's own screen-reader-only <h2> and empty img alt mean
   there is nothing else in it to show). Not functionally required
   (purely decorative, not a link), so it is hidden here rather than
   left as an apparent blank placeholder — same technique already used
   for .block_information on the Archives/Article View pages. Nothing
   else about the sidebar's structure changes; if the image is fixed
   later (e.g. its stored URL corrected), this single rule is what to
   remove to bring it back. */
body.pkp_page_home.pkp_op_index .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

/* --- The remaining empty white rectangle (between "Maqola yuborish"
   and "Jurnal haqida") is a DIFFERENT block: .block_information (the
   "For Readers / For Authors / For Librarians" list). Its DOM position
   matches exactly. It looks empty because of a much older, unscoped
   rule already in this file (section 4, "INFORMATION BLOKINI
   YASHIRISH") that hides this block's title and every <li> on EVERY
   page, site-wide — confirmed still present and untouched here. That
   pre-existing rule already has homepage-independent counterparts for
   Article View and Archives that hide the whole (now-content-less)
   .pkp_block instead of leaving an empty card:
     body.pkp_op_archive .pkp_structure_sidebar .block_information
     body.pkp_op_view.pkp_page_article .pkp_structure_sidebar .block_information
   This is the same, already-proven pattern, just scoped to the
   homepage — no change to the section-4 rule or to those other two
   pages' rules. */
body.pkp_page_home.pkp_op_index .pkp_structure_sidebar .block_information {
    display: none !important;
}

/* --- "Maqola yuborish" CTA: same existing button/link (href and text
   untouched) as styled globally in section 7, extended here with a
   document icon and a circular arrow accent. FontAwesome doesn't cover
   Latin text, so the icon and the button's own text render as two
   separate boxes (icon via ::before, arrow via ::after) rather than
   one generated string — no new text is introduced either way. --- */
body.pkp_page_home.pkp_op_index .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_home.pkp_op_index .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_home.pkp_op_index .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

/* --- "Jurnal haqida" / indexing info card: same #customblock-indexing
   element already holding the real ISSN/OAK text and the "Indexed In"
   list (sections 7/9b/10b give it the white card + two-paragraph split
   already). This adds only a visible heading, since the block's real
   <h2> is screen-reader-only by design. Locale-safe: mirrors the exact
   html[lang^=...] technique already used for the header title, with
   translated text for uz/en/ru, so it never shows the wrong language
   (the "INDEXED IN" label further down is the block's own existing
   real text — already locale-correct — so it is only re-styled below,
   never replaced). FontAwesome's glyph + the Latin heading text fall
   back to their respective fonts within the same generated string, the
   same technique used for the CTA above but combined in one box since
   there's no separate element to hang a second icon on here. */
body.pkp_page_home.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_home.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_home.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_home.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

/* Small database icon on the existing "INDEXED IN" line itself (the
   block's own real, already-locale-correct text — untouched, just an
   icon added before it) */
body.pkp_page_home.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   12. "UMUMIY MA'LUMOT" / ABOUT THE JOURNAL PAGE
   Applies to: lib/pkp/templates/frontend/pages/about.tpl — a core PKP
   library template. Body class is body.pkp_page_about.pkp_op_index,
   which is unique to THIS page: "Editorial Team", "For authors" and
   "Contact" share the same page=about handler but different ops
   (pkp_op_editorialTeam / pkp_op_submissions / pkp_op_contact — already
   relied on for the header's active-nav-pill rule), so scoping to
   .pkp_op_index here cannot affect them. Everything below deliberately
   mirrors section 11 (Homepage) selector-for-selector so both pages
   belong to the same design system; only the scoping class and the
   title selector differ (this page's <h1> has no .page_title class,
   unlike the Custom-Page template's <h1 class="page_title">). The
   sidebar markup (#customblock-journal-cover, .block_make_submission,
   .block_information, #customblock-indexing) is the same global,
   theme-level sidebar already styled for the homepage, so those rules
   are reused verbatim, just rescoped.

   Template change: about.tpl wrapped {$currentContext->getLocalizedData('about')}
   (previously a bare sibling of <h1>, no wrapper) in a new
   <div class="page_content">, identical in spirit to the .page_content
   wrapper already added to navigationMenuItemViewContent.tpl for the
   homepage — needed so the title can stay outside the card while only
   the actual about-text gets the card treatment. editLink.tpl (visible
   to managers/admins only) is left outside the card, right after the
   title, since it's a utility/management link, not page content.
   ========================================== */

/* --- Background pattern: identical to the homepage's, same alpha --- */
body.pkp_page_about.pkp_op_index {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

/* --- Breadcrumb --- */
body.pkp_page_about.pkp_op_index .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_about.pkp_op_index .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_about.pkp_op_index .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_about.pkp_op_index .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_about.pkp_op_index .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

/* --- Page title (bare <h1>, no .page_title class on this template) +
   the same short green underline accent used on the homepage --- */
body.pkp_page_about.pkp_op_index .page_about > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_about.pkp_op_index .page_about > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_about.pkp_op_index .page_about > h1 {
        font-size: 2.1rem;
    }
}

/* --- Content card wrapping the existing about-text. Text itself
   (every paragraph, exact wording) is untouched — only spacing/
   typography of the wrapper and its paragraphs. --- */
body.pkp_page_about.pkp_op_index .page_content {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.5rem 1.75rem;
}

body.pkp_page_about.pkp_op_index .page_content p {
    margin: 0 0 1rem;
    line-height: 1.75;
    color: #2a2a2a;
    font-size: 1rem;
}

body.pkp_page_about.pkp_op_index .page_content p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    body.pkp_page_about.pkp_op_index .page_content {
        padding: 1.85rem 2.1rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_about.pkp_op_index .page_content {
        padding: 1.15rem 1.25rem;
    }
}

/* --- Sidebar: same three fixes already applied on the homepage, reused
   verbatim since it's the same global sidebar markup. --- */

/* Broken image block (old domain, fails SSL verification — see the
   homepage's identical rule in section 11 for the full diagnosis) */
body.pkp_page_about.pkp_op_index .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

/* Empty "For Readers/Authors/Librarians" block — its title and every
   <li> are hidden site-wide by the older, unscoped section-4 rule,
   leaving an empty card here too */
body.pkp_page_about.pkp_op_index .pkp_structure_sidebar .block_information {
    display: none !important;
}

/* "Maqola yuborish" CTA: icon + circular arrow, same technique as the
   homepage (existing link/href untouched) */
body.pkp_page_about.pkp_op_index .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_about.pkp_op_index .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_about.pkp_op_index .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

/* "Jurnal haqida" heading (real <h2> is screen-reader-only) + database
   icon on the existing "INDEXED IN" line — same locale-safe technique
   as the homepage */
body.pkp_page_about.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_about.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_about.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_about.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

body.pkp_page_about.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   13. "UMUMIY MA'LUMOT" / GENERAL INFO PAGE
   Applies to: lib/pkp/templates/frontend/pages/navigationMenuItemViewContent.tpl
   — the same shared "Custom Page" template as the homepage (and General
   info previously, before this pass). Body class is
   body.pkp_page_general-info.pkp_op_index, unique to this page, so this
   cannot affect Home (pkp_page_home), Editorial Team/For authors/Contact
   (pkp_page_about with other ops), or any other page. No template
   change was needed — .page_content already exists on this shared
   template from the homepage work, so General info already had it too.

   Design mirrors sections 11 (Homepage) and 12 (About/"Jurnal haqida")
   selector-for-selector for the shared chrome (background, breadcrumb,
   title+underline, card shell, sidebar). The one page-specific addition
   is styling for the actual content, which here is a <ul> of labeled
   fields (each <li><p><strong>Label:</strong> value</p></li>, with two
   fields — Archive & DOI, Contact — containing their own nested <ul>
   sub-items) rather than plain paragraphs like the About page. Labels
   are already real <strong> tags in the existing markup — nothing new
   is added, only styled. Text/content itself is completely untouched.
   ========================================== */

/* --- Background pattern: identical to the other approved pages --- */
body.pkp_page_general-info.pkp_op_index {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

/* --- Breadcrumb --- */
body.pkp_page_general-info.pkp_op_index .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_general-info.pkp_op_index .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_general-info.pkp_op_index .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_general-info.pkp_op_index .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_general-info.pkp_op_index .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

/* --- Page title + the same short green underline accent, identical
   scale/typography to the Homepage and About pages --- */
body.pkp_page_general-info.pkp_op_index .page > .page_title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_general-info.pkp_op_index .page > .page_title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_general-info.pkp_op_index .page > .page_title {
        font-size: 2.1rem;
    }
}

/* --- Content card: same shell as the other approved pages (12px
   radius — matched exactly to Home/About rather than the "14-18px"
   estimate, so all three pages are pixel-identical, not just similar) --- */
body.pkp_page_general-info.pkp_op_index .page_content {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.5rem 1.75rem;
}

@media (min-width: 768px) {
    body.pkp_page_general-info.pkp_op_index .page_content {
        padding: 1.85rem 2.1rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_general-info.pkp_op_index .page_content {
        padding: 1.15rem 1.25rem;
    }
}

/* --- Content itself: the existing <ul><li><p><strong>Label:</strong>
   value</p></li></ul> structure. Top-level items become labeled field
   rows (no bullet — the bold label already marks each one), separated
   by a thin divider; nested sub-lists (Archive & DOI's two notes,
   Contact's Phone/Email) keep a small marker and tighter spacing to
   read as sub-points of their parent field. Every selector stays
   inside .page_content, so none of this can reach any other page's
   lists (e.g. the sidebar's own <ul> or unrelated content). --- */
body.pkp_page_general-info.pkp_op_index .page_content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.pkp_page_general-info.pkp_op_index .page_content li {
    padding: .85rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

body.pkp_page_general-info.pkp_op_index .page_content li:last-child {
    border-bottom: none;
}

body.pkp_page_general-info.pkp_op_index .page_content li > p {
    margin: 0;
    line-height: 1.75;
    color: #2a2a2a;
}

body.pkp_page_general-info.pkp_op_index .page_content strong {
    color: #0F7A4E;
    font-weight: 700;
}

/* Nested sub-items (Archive & DOI's two notes; Contact's Phone/Email) —
   higher selector specificity than the top-level .page_content li rule
   above, so these override its padding/border cleanly */
body.pkp_page_general-info.pkp_op_index .page_content li ul {
    margin: .6rem 0 0 .2rem;
}

body.pkp_page_general-info.pkp_op_index .page_content li li {
    position: relative;
    padding: .3rem 0 .3rem 1.15rem;
    border-bottom: none;
    font-size: .95rem;
    color: #444;
}

body.pkp_page_general-info.pkp_op_index .page_content li li:last-child {
    padding-bottom: 0;
}

body.pkp_page_general-info.pkp_op_index .page_content li li::before {
    content: "\2013";
    position: absolute;
    left: 0;
    color: #0F7A4E;
}

/* --- Sidebar: same three fixes and CTA/"Jurnal haqida" treatment
   already applied on Home and About — same global sidebar markup --- */
body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar .block_information {
    display: none !important;
}

body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

body.pkp_page_general-info.pkp_op_index .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   14. "TAHRIRIYAT JAMOASI" / EDITORIAL TEAM PAGE
   Applies to: lib/pkp/templates/frontend/pages/editorialTeam.tpl. Body
   class is body.pkp_page_about.pkp_op_editorialTeam — unique to this
   page (About-the-Journal is pkp_op_index, For authors is
   pkp_op_submissions, Contact is pkp_op_contact; all already relied on
   elsewhere in this file), so nothing here can reach those pages.

   Template change: editorialTeam.tpl wrapped
   {$currentContext->getLocalizedData('editorialTeam')} (previously a
   bare sibling of <h1>) in a new <div class="page_content">, the exact
   same minimal pattern already applied and approved on
   navigationMenuItemViewContent.tpl and about.tpl, for the same reason:
   no existing selector could isolate "content only" from the title
   without one.

   IMPORTANT — markup reality vs. the request: this page's content is
   NOT a <ul>/<li> list. It is 5 plain <p> paragraphs (Editor-in-Chief,
   Deputy Editor-in-Chief, Executive Secretary, Editorial Board Members,
   International Advisory Board), each an admin-typed WYSIWYG block
   using literal "•" characters and <br> tags to separate names —
   confirmed by fetching the live page. This changes what's achievable
   CSS-only:
   - The "multi-column grid" requirement is implemented with CSS
     multi-column flow (column-count), not CSS Grid — grid needs
     discrete child elements to place, which don't exist here; multicol
     works directly on text broken by <br>, flowing each "• Name" line
     into the next column exactly like a newspaper layout.
   - :first-line is used to style each paragraph's leading label
     ("Editor-in-Chief:", "Editorial Board Members:", etc.) distinctly,
     since it naturally lands on line 1 before the first <br>.
   - What is NOT achievable without editing the database-stored content
     itself (out of scope — not a template or CSS change): separately
     styling a person's NAME vs. their ORGANIZATION on the same line,
     or de-emphasizing just the "(Country)" parenthetical in the
     Advisory Board list. Both are plain text on one line with no
     element boundary between them, so no CSS selector can target only
     part of it. Left as the original, unstyled text — not touched.
   ========================================== */

/* --- Background pattern, breadcrumb, title+underline, card shell:
   identical to the other three approved pages --- */
body.pkp_page_about.pkp_op_editorialTeam {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

body.pkp_page_about.pkp_op_editorialTeam .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_about.pkp_op_editorialTeam .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_about.pkp_op_editorialTeam .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_about.pkp_op_editorialTeam .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_about.pkp_op_editorialTeam .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

body.pkp_page_about.pkp_op_editorialTeam .page_editorial_team > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_about.pkp_op_editorialTeam .page_editorial_team > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_about.pkp_op_editorialTeam .page_editorial_team > h1 {
        font-size: 2.1rem;
    }
}

body.pkp_page_about.pkp_op_editorialTeam .page_content {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.5rem 1.75rem;
}

@media (min-width: 768px) {
    body.pkp_page_about.pkp_op_editorialTeam .page_content {
        padding: 1.85rem 2.1rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_about.pkp_op_editorialTeam .page_content {
        padding: 1.15rem 1.25rem;
    }
}

/* --- Leadership: paragraph 1 = Editor-in-Chief (strongest, full-width
   highlighted row); paragraphs 2-3 = Deputy Editor-in-Chief / Executive
   Secretary (secondary, two compact columns on tablet/desktop, stacked
   on mobile). Each paragraph's own leading "Role:" label is isolated
   via ::first-line (it is naturally the text before the first <br>)
   and given the green accent language; the name+org line below it
   inherits the paragraph's own (larger for #1, normal for #2/#3) size
   — the two cannot be styled independently from each other since they
   share one line of plain text, per the note above. --- */
body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(1) {
    background: rgba(15, 122, 78, .05);
    border-left: 4px solid #0F7A4E;
    border-radius: 0 8px 8px 0;
    padding: 1.1rem 1.4rem;
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1a1a1a;
}

body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(1)::first-line {
    font-weight: 700;
    color: #0F7A4E;
    font-size: .8rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}

body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(2),
body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(3) {
    display: inline-block;
    vertical-align: top;
    width: 47%;
    box-sizing: border-box;
    background: #fafbfa;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin: 0 0 1.5rem;
    font-size: .95rem;
    line-height: 1.7;
    color: #2a2a2a;
}

body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(2) {
    margin-right: 3%;
}

body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(2)::first-line,
body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(3)::first-line {
    font-weight: 700;
    color: #0F7A4E;
    font-size: .76rem;
    letter-spacing: .4px;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(2),
    body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(3) {
        display: block;
        width: 100%;
        margin-right: 0;
    }
}

/* --- Editorial Board Members (paragraph 4): multi-column flow,
   1/2/3 columns by breakpoint, thin column-rule divider, no borders
   around individual names. --- */
body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(4) {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(15, 122, 78, .12);
    column-count: 1;
    column-gap: 2rem;
    column-rule: 1px solid rgba(0, 0, 0, .07);
    line-height: 2;
    font-size: .93rem;
    color: #2a2a2a;
}

body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(4)::first-line {
    font-weight: 700;
    color: #0F7A4E;
    font-size: 1.05rem;
    letter-spacing: .3px;
}

/* --- International Advisory Board (paragraph 5): same multi-column
   treatment, plus a light green-tinted background box (instead of the
   plain border-top divider used for the domestic board) so it reads
   as clearly, visually distinct from the section above it. --- */
body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(5) {
    margin: 2rem 0 0;
    padding: 1.4rem 1.5rem;
    background: rgba(15, 122, 78, .025);
    border-radius: 8px;
    column-count: 1;
    column-gap: 2rem;
    column-rule: 1px solid rgba(0, 0, 0, .07);
    line-height: 2;
    font-size: .93rem;
    color: #2a2a2a;
}

body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(5)::first-line {
    font-weight: 700;
    color: #0F7A4E;
    font-size: 1.05rem;
    letter-spacing: .3px;
}

@media (min-width: 601px) {
    body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(4),
    body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(5) {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(4),
    body.pkp_page_about.pkp_op_editorialTeam .page_content > p:nth-of-type(5) {
        column-count: 3;
    }
}

/* --- Bug fix: keeps a single person's entry (name + country/org) from
   being split across a column boundary. The source content has no
   element boundary around each "• Name (Country)" bullet (see
   editorialTeam.tpl's own comment) — when an entry is long enough to
   wrap onto two lines inside a narrow column, the column break could
   previously fall between those two wrapped lines with nothing to
   prevent it (e.g. a name at the bottom of one column, "(Qirg'iziston)"
   alone at the top of the next). editorialTeam.tpl now wraps each
   entry in <span class="editorial_person"> at render time (the
   database content itself is never touched); break-inside/
   -webkit-column-break-inside/page-break-inside here tell the browser
   to move the whole span to the next column instead of splitting it.
   display:inline-block is required for break-inside to take effect —
   plain inline spans are not considered break points by column layout.
   No color, spacing, font-size, column-gap or column-count value above
   is changed by this rule. --- */
body.pkp_page_about.pkp_op_editorialTeam .page_content .editorial_person {
    display: inline-block;
    max-width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* --- Sidebar: same global markup as every other page. The reported
   empty rectangle "above Maqola yuborish" is #customblock-journal-cover
   (confirmed live — same broken-image cause already diagnosed on
   Home/About/General info). Its own list-based sibling,
   .block_information, is also emptied site-wide by the older, unscoped
   section-4 rule, leaving a second empty card between the CTA and
   "Jurnal haqida" — the same known issue already fixed the same way on
   the three other approved pages, applied here too so the sidebar
   matches them exactly (only Maqola yuborish / Jurnal haqida remain
   visible, as specified). Neither rule touches .block_information or
   #customblock-journal-cover on any other page. --- */
body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar .block_information {
    display: none !important;
}

body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

body.pkp_page_about.pkp_op_editorialTeam .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   15. "MUALLIFLAR UCHUN" / SUBMISSIONS PAGE
   Applies to: lib/pkp/templates/frontend/pages/submissions.tpl. Body
   class is body.pkp_page_about.pkp_op_submissions — unique to this
   page (Editorial Team is pkp_op_editorialTeam, About is pkp_op_index,
   Contact is pkp_op_contact; all already relied on elsewhere in this
   file), so nothing here can reach those pages.

   No template change was needed. Unlike Editorial Team's plain
   paragraphs, this page's content already has discrete, real element
   boundaries for every section (confirmed by fetching the live page):
   .cmp_notification (login/register notice), #authorGuidelines,
   .submission_checklist (with a genuine <ul><li> list — no text
   parsing trick required here), .section_policy, and
   #privacyStatement. Each is styled as its own card directly; unlike
   Home/About/General Info there is no single unifying .page_content
   wrapper here, since the design calls for separate panels per section
   rather than one shared card.
   ========================================== */

/* --- Background pattern, breadcrumb, title+underline: identical to
   the other four approved pages --- */
body.pkp_page_about.pkp_op_submissions {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

body.pkp_page_about.pkp_op_submissions .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_about.pkp_op_submissions .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_about.pkp_op_submissions .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_about.pkp_op_submissions .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_about.pkp_op_submissions .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

body.pkp_page_about.pkp_op_submissions .page_submissions > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_about.pkp_op_submissions .page_submissions > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_about.pkp_op_submissions .page_submissions > h1 {
        font-size: 2.1rem;
    }
}

/* --- Shared card shell for every section on this page (same 12px
   radius / border / shadow language as the other approved pages),
   spaced apart instead of merged into one card --- */
body.pkp_page_about.pkp_op_submissions .cmp_notification,
body.pkp_page_about.pkp_op_submissions .author_guidelines,
body.pkp_page_about.pkp_op_submissions .submission_checklist,
body.pkp_page_about.pkp_op_submissions .section_policy,
body.pkp_page_about.pkp_op_submissions .privacy_statement {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
    body.pkp_page_about.pkp_op_submissions .cmp_notification,
    body.pkp_page_about.pkp_op_submissions .author_guidelines,
    body.pkp_page_about.pkp_op_submissions .submission_checklist,
    body.pkp_page_about.pkp_op_submissions .section_policy,
    body.pkp_page_about.pkp_op_submissions .privacy_statement {
        padding: 1.85rem 2.1rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_about.pkp_op_submissions .cmp_notification,
    body.pkp_page_about.pkp_op_submissions .author_guidelines,
    body.pkp_page_about.pkp_op_submissions .submission_checklist,
    body.pkp_page_about.pkp_op_submissions .section_policy,
    body.pkp_page_about.pkp_op_submissions .privacy_statement {
        padding: 1.15rem 1.25rem;
    }
}

/* --- Shared heading treatment for every card's own <h2> --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines > h2,
body.pkp_page_about.pkp_op_submissions .submission_checklist > h2,
body.pkp_page_about.pkp_op_submissions .section_policy > h2,
body.pkp_page_about.pkp_op_submissions .privacy_statement > h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #0F7A4E;
    margin: 0 0 1rem;
}

/* --- Body copy rhythm shared by the prose sections --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines p,
body.pkp_page_about.pkp_op_submissions .privacy_statement p,
body.pkp_page_about.pkp_op_submissions .submission_checklist > p {
    margin: 0 0 1rem;
    line-height: 1.75;
    color: #2a2a2a;
    font-size: 1rem;
    max-width: 65ch;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines p:last-child,
body.pkp_page_about.pkp_op_submissions .privacy_statement p:last-child {
    margin-bottom: 0;
}

/* --- Login/Register notice: institutional pale-green callout. The
   two links (Login / Register) are the exact existing <a> elements
   from submissions.tpl's own {url page="login"} / {url page="user"
   op="register"} output — hrefs untouched, no new links created. --- */
body.pkp_page_about.pkp_op_submissions .cmp_notification {
    background: rgba(15, 122, 78, .05);
    border-left: 4px solid #0F7A4E;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .98rem;
    line-height: 1.6;
    color: #1a1a1a;
}

body.pkp_page_about.pkp_op_submissions .cmp_notification::before {
    font-family: "FontAwesome";
    content: "\f007";
    color: #0F7A4E;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

body.pkp_page_about.pkp_op_submissions .cmp_notification a {
    color: #0F7A4E;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

body.pkp_page_about.pkp_op_submissions .cmp_notification a:hover {
    color: #0B5C3A;
    text-decoration: underline;
}

/* --- Notice layout, final version (rebuilt 2026-09-21, 3rd pass).
   Two earlier CSS-only attempts failed because the notice's plain
   text fragments ("Material yuborish uchun", "yoki", the trailing
   ".") are anonymous flex items with no element to hang layout rules
   on — no amount of pseudo-content or display:block on just the <a>
   tags can group them. Fixed at the source: templates/frontend/pages/
   submissions.tpl now wraps the SAME translated sentence (no locale
   string, href or word order changed — see that file) in two real
   elements, splitting on the submission_login_notice__link class
   already added to the <a> tags:
     .submission_login_notice__intro   — the text before the first link
     .submission_login_notice__actions — the first link through the end
   (whichever fragment lands in which wrapper depends on that locale's
   own word order; for Uzbek this is exactly "Material yuborish uchun"
   / "Kirish yoki Ro'yxatdan o'tish.").

   Desktop/tablet must look exactly as before, so by default both new
   wrappers are display:contents — invisible to layout, so the icon +
   sentence keep flowing as the same single flex row as always. Only
   at <=480px do they switch to real block/flex layout. --- */
body.pkp_page_about.pkp_op_submissions .submission_login_notice,
body.pkp_page_about.pkp_op_submissions .submission_login_notice__intro,
body.pkp_page_about.pkp_op_submissions .submission_login_notice__actions {
    display: contents;
}

@media (max-width: 480px) {
    body.pkp_page_about.pkp_op_submissions .cmp_notification {
        align-items: flex-start;
    }

    body.pkp_page_about.pkp_op_submissions .submission_login_notice {
        display: block;
        width: 100%;
    }

    body.pkp_page_about.pkp_op_submissions .submission_login_notice__intro {
        display: block;
        margin-bottom: .5rem;
    }

    body.pkp_page_about.pkp_op_submissions .submission_login_notice__actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .35rem .75rem;
    }
}

/* --- Submission checklist: real <ul><li> markup already exists, so
   pseudo-element checkmarks apply directly to each item — no markup
   change needed. Green left-border accent (not a filled pale-green
   background) distinguishes it from the notice above without
   over-using solid green fills. --- */
body.pkp_page_about.pkp_op_submissions .submission_checklist {
    border-left: 4px solid #0F7A4E;
    border-radius: 0 12px 12px 0;
}

body.pkp_page_about.pkp_op_submissions .submission_checklist ul {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

body.pkp_page_about.pkp_op_submissions .submission_checklist li {
    position: relative;
    padding: .5rem 0 .5rem 1.75rem;
    line-height: 1.65;
    color: #2a2a2a;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

body.pkp_page_about.pkp_op_submissions .submission_checklist li:last-child {
    border-bottom: none;
}

body.pkp_page_about.pkp_op_submissions .submission_checklist li::before {
    font-family: "FontAwesome";
    content: "\f00c";
    position: absolute;
    left: 0;
    top: .5rem;
    color: #0F7A4E;
    font-size: .9rem;
}

body.pkp_page_about.pkp_op_submissions .submission_checklist a {
    color: #0F7A4E;
    text-decoration: underline;
}

/* --- Bottom two cards ("Maqolalar" / .section_policy and "Maxfiylik
   bayonoti" / .privacy_statement) sit side by side on tablet/desktop.
   They are the 6th and 7th children of .page_submissions (after nav,
   h1, .cmp_notification, .author_guidelines, .submission_checklist),
   so those five are pinned to a full-width row and the two trailing
   cards fall into the two-column track by normal grid auto-placement
   — no markup change needed. align-items: start keeps each card at
   its natural height instead of stretching to match its neighbor. --- */
@media (min-width: 768px) {
    body.pkp_page_about.pkp_op_submissions .page_submissions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.75rem;
        align-items: start;
    }

    body.pkp_page_about.pkp_op_submissions .page_submissions > .cmp_breadcrumbs,
    body.pkp_page_about.pkp_op_submissions .page_submissions > h1,
    body.pkp_page_about.pkp_op_submissions .page_submissions > .cmp_notification,
    body.pkp_page_about.pkp_op_submissions .page_submissions > .author_guidelines,
    body.pkp_page_about.pkp_op_submissions .page_submissions > .submission_checklist {
        grid-column: 1 / -1;
    }

    body.pkp_page_about.pkp_op_submissions .page_submissions > .section_policy,
    body.pkp_page_about.pkp_op_submissions .page_submissions > .privacy_statement {
        margin-bottom: 0;
    }
}

/* --- "Maqolalar" / Articles section policy: compact card with its own
   small separator under the heading --- */
body.pkp_page_about.pkp_op_submissions .section_policy > h2 {
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

body.pkp_page_about.pkp_op_submissions .section_policy {
    font-size: .98rem;
    line-height: 1.7;
    color: #2a2a2a;
}

/* --- Privacy statement: compact, restrained card with a small lock
   icon on the heading (existing FontAwesome icon font already used
   throughout the site — no new dependency) --- */
body.pkp_page_about.pkp_op_submissions .privacy_statement {
    background: #fafbfa;
}

body.pkp_page_about.pkp_op_submissions .privacy_statement > h2::before {
    font-family: "FontAwesome";
    content: "\f023";
    margin-right: .5rem;
    font-size: 1rem;
}

/* --- Sidebar: same global markup and fixes already applied on Home/
   About/General Info/Editorial Team. --- */
body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar .block_information {
    display: none !important;
}

body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

body.pkp_page_about.pkp_op_submissions .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   16. "ALOQA" / CONTACT PAGE
   Applies to: lib/pkp/templates/frontend/pages/contact.tpl. Body class
   is body.pkp_page_about.pkp_op_contact — unique to this page (About
   is pkp_op_index, Editorial Team is pkp_op_editorialTeam, For authors
   is pkp_op_submissions; all already relied on elsewhere in this
   file), so nothing here can reach those pages.

   No template change was needed — the existing markup already has
   real element boundaries for everything the request asks for:
   .contact_section > .address, .contact.primary, .contact.support,
   each card's own h2, .name, .title, .affiliation, .phone (with
   .label/.value spans) and .email (existing {mailto encode='javascript'}
   output). Confirmed by fetching the live page — nothing here touches
   the template, text, names, phone/email values, or hrefs; only new
   CSS on the existing elements.

   Two-column desktop layout: CSS Grid on .contact_section itself
   (its own three children are .address, .contact.primary,
   .contact.support — no wrapper markup added). At >=1200px,
   grid-template-columns: repeat(2, minmax(0, 1fr)) places .address
   (forced to span both columns) on its own full-width row, then the
   two .contact cards auto-place side by side on the row below. Below
   1200px the grid is a single column, so everything stacks.

   The breakpoint is 1200px (theme's @screen-lg-desktop), NOT the
   992px @screen-desktop tier: the theme's own body.less floats
   .pkp_structure_sidebar at a fixed 300px starting at 992px, but only
   widens .pkp_structure_main to its roomier size at 1200px. Splitting
   the cards into 2 columns at 992px left them fighting over the
   narrower 992px-tier main column (~285px total for both cards
   combined after the fixed sidebar was already subtracted), which is
   what forced "Qo'llab-quvvatlash bilan bog'lanish" onto 3-4 lines.
   At 1200px the main column is ~800px wide, giving each card ~330px
   — the 992-1199px range now correctly stays single-column (full
   ~590px width) instead of being squeezed.
   ========================================== */

/* --- Background pattern: identical to the other five approved pages --- */
body.pkp_page_about.pkp_op_contact {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

/* --- Breadcrumb --- */
body.pkp_page_about.pkp_op_contact .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_about.pkp_op_contact .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_about.pkp_op_contact .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_about.pkp_op_contact .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_about.pkp_op_contact .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

/* --- Page title + the same short green underline accent, identical
   scale/typography to the other approved pages --- */
body.pkp_page_about.pkp_op_contact .page_contact > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_about.pkp_op_contact .page_contact > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_about.pkp_op_contact .page_contact > h1 {
        font-size: 2.1rem;
    }
}

/* --- Layout: address callout on its own row, then the two contact
   cards side by side from 1200px up; single column (stacked) below
   that, so tablet and mobile both get the full-width stacked layout
   the request calls for.

   Why 1200px and not 992px: the theme's own scaffold (body.less)
   floats .pkp_structure_sidebar at a FIXED 300px from 992px up, but
   .pkp_structure_main only grows to its larger, roomier width at the
   1200px (@screen-lg-desktop) tier. Between 992px and 1199px the
   sidebar has already claimed its 300px while the main column is
   still at its narrower 992px-tier size, so a 2-column card grid in
   that zone had only ~285px total for both cards combined — that's
   what was forcing "Qo'llab-quvvatlash bilan bog'lanish" onto 3-4
   lines. Switching the breakpoint to 1200px (matching this request's
   own desktop/tablet split) means the grid only goes 2-up once the
   main column is actually wide enough (~800px content width, ~330px
   per card) — the 992-1199px zone now correctly falls into the
   stacked "tablet" layout using the full ~590px column width
   instead. --- */
body.pkp_page_about.pkp_op_contact .contact_section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 1200px) {
    body.pkp_page_about.pkp_op_contact .contact_section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.pkp_page_about.pkp_op_contact .contact_section .address {
        grid-column: 1 / -1;
    }

    /* Force each card to fill its grid track edge-to-edge. Grid items
       stretch by default, so this is belt-and-suspenders against any
       browser/extension quirk — not compensating for a real width
       rule, since none exists on .contact elsewhere in this file. */
    body.pkp_page_about.pkp_op_contact .contact_section .contact {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

/* --- Address callout: restrained institutional treatment — pale green
   fill + green left border, the same language already approved for
   the login/register notice on the Submissions page, not a boxed
   alert. Address text itself is untouched. --- */
body.pkp_page_about.pkp_op_contact .contact_section .address {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(15, 122, 78, .05);
    border-left: 4px solid #0F7A4E;
    border-radius: 0 8px 8px 0;
    padding: .9rem 1.15rem;
    font-size: .95rem;
    line-height: 1.6;
    color: #1a1a1a;
}

body.pkp_page_about.pkp_op_contact .contact_section .address::before {
    font-family: "FontAwesome";
    content: "\f041";
    color: #0F7A4E;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

/* --- Contact cards: same 12px-radius white card shell as every other
   approved page --- */
body.pkp_page_about.pkp_op_contact .contact_section .contact {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.5rem 1.75rem;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.pkp_page_about.pkp_op_contact .contact_section .contact {
        padding: 1.85rem 2.1rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_about.pkp_op_contact .contact_section .contact {
        padding: 1.15rem 1.25rem;
    }
}

/* --- Card heading ("Principal Contact" / "Support Contact"): brand
   green with the same thin separator already used for every other
   card heading on Submissions --- */
body.pkp_page_about.pkp_op_contact .contact_section .contact > h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #0F7A4E;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

/* --- Person's name: emphasized as the strongest line in the card --- */
body.pkp_page_about.pkp_op_contact .contact_section .contact .name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
    margin-bottom: .3rem;
}

/* --- Contact title (role), when present --- */
body.pkp_page_about.pkp_op_contact .contact_section .contact .title {
    font-size: .92rem;
    color: #444;
    margin-bottom: .3rem;
}

/* --- Organization: softer dark gray, as requested --- */
body.pkp_page_about.pkp_op_contact .contact_section .contact .affiliation {
    font-size: .92rem;
    line-height: 1.55;
    color: #555;
    margin-bottom: .5rem;
}

/* --- Phone: icon + existing label/value spans, untouched text --- */
body.pkp_page_about.pkp_op_contact .contact_section .contact .phone {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .95rem;
}

body.pkp_page_about.pkp_op_contact .contact_section .contact .phone::before {
    font-family: "FontAwesome";
    content: "\f095";
    color: #0F7A4E;
    font-size: .9rem;
    flex: 0 0 auto;
}

body.pkp_page_about.pkp_op_contact .contact_section .contact .phone .label {
    color: #6b7280;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}

body.pkp_page_about.pkp_op_contact .contact_section .contact .phone .value {
    color: #2a2a2a;
    font-weight: 600;
}

/* --- Email: icon + the existing {mailto encode='javascript'} link.
   Restyled only — href/encoding untouched. Subtle underline via
   border-bottom rather than text-decoration, brand green, no button
   appearance. --- */
body.pkp_page_about.pkp_op_contact .contact_section .contact .email {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .95rem;
}

body.pkp_page_about.pkp_op_contact .contact_section .contact .email::before {
    font-family: "FontAwesome";
    content: "\f0e0";
    color: #0F7A4E;
    font-size: .85rem;
    flex: 0 0 auto;
}

body.pkp_page_about.pkp_op_contact .contact_section .contact .email a {
    color: #0F7A4E;
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 122, 78, .3);
    transition: color .15s ease, border-color .15s ease;
    overflow-wrap: anywhere;
}

body.pkp_page_about.pkp_op_contact .contact_section .contact .email a:hover,
body.pkp_page_about.pkp_op_contact .contact_section .contact .email a:focus {
    color: #0B5C3A;
    border-color: #0B5C3A;
}

/* --- Sidebar: same global markup and fixes already applied on Home/
   About/General Info/Editorial Team/Submissions --- */
body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar .block_information {
    display: none !important;
}

body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

body.pkp_page_about.pkp_op_contact .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   17. "KIRISH" / LOGIN PAGE
   Applies to: lib/pkp/templates/frontend/pages/userLogin.tpl. Body class
   is body.pkp_page_login — unique to this page, no pkp_op_* qualifier
   needed (unlike the pkp_page_about family used by About/Editorial
   Team/Submissions/Contact).

   The "Continue with" quick-login box (heading, Google/ORCID buttons,
   the "— yoki —" divider) is NOT in the template — it's injected by
   plugins/generic/googleLogin/GoogleLoginPlugin.php via an output
   filter, with inline style="margin/max-width/text-align" attributes
   on the wrapping .continue-with-providers div and the divider <p>.
   Those are overridden below with matching !important rules rather
   than editing the plugin file, so auth (Google/ORCID start URLs,
   the login form's method/action/csrfToken/field names, the register
   and lostPassword links) is untouched. No text or copy changed
   anywhere in this section — only new CSS on existing elements,
   consistent with every page above.
   ========================================== */

/* --- Background pattern: identical to every other approved page --- */
body.pkp_page_login {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

/* --- Breadcrumb --- */
body.pkp_page_login .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_login .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_login .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_login .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_login .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

/* --- Page title + the same short green underline accent used on
   every other approved page --- */
body.pkp_page_login .page_login > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_login .page_login > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_login .page_login > h1 {
        font-size: 2.1rem;
    }
}

/* --- "Required fields..." note --- */
body.pkp_page_login .page_login > p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0 0 1rem;
    max-width: 640px;
}

/* --- Card shell wrapping the whole login form, same 12px-radius white
   card shell used site-wide --- */
body.pkp_page_login .page_login form.login {
    display: block;
    max-width: 640px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.75rem 2rem;
}

@media (min-width: 768px) {
    body.pkp_page_login .page_login form.login {
        padding: 2rem 2.25rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_login .page_login form.login {
        padding: 1.25rem 1.35rem;
    }
}

/* --- Quick login (Google / ORCID): the heading spans both columns
   (grid-column: 1 / -1 — the same two-child-cards-under-a-full-width-
   row technique as .contact_section > .address in section 16), the
   two button divs auto-place into the two columns below it. Overrides
   the plugin's own inline margin/max-width/text-align. --- */
body.pkp_page_login .continue-with-providers {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: 0 0 1rem !important;
    max-width: none !important;
    text-align: left !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

@media (max-width: 480px) {
    body.pkp_page_login .continue-with-providers {
        grid-template-columns: 1fr;
    }
}

body.pkp_page_login .continue-with-providers h3 {
    grid-column: 1 / -1;
    margin: 0 0 .1rem !important;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
}

body.pkp_page_login .continue-with-providers > div {
    min-width: 0;
}

body.pkp_page_login .continue-with-providers .pkp_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .9rem !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.pkp_page_login .continue-with-providers .pkp_button:hover,
body.pkp_page_login .continue-with-providers .pkp_button:focus {
    border-color: #0F7A4E !important;
    box-shadow: 0 1px 4px rgba(15, 122, 78, .15);
}

body.pkp_page_login .continue-with-providers .pkp_button svg {
    flex: 0 0 auto;
}

/* --- "— yoki —" divider: the em-dash text already provides the dash
   marks, this just adds the two flanking rule lines around it via
   flexbox (the <p>'s own text node sits between the ::before/::after
   pseudo-elements in source order, so no markup change is needed). --- */
body.pkp_page_login .continue-with-providers + p {
    display: flex !important;
    align-items: center;
    gap: .75rem;
    text-align: center !important;
    margin: 0 0 1.1rem !important;
    max-width: none !important;
    font-size: .8rem;
    color: #9ca3af;
}

body.pkp_page_login .continue-with-providers + p::before,
body.pkp_page_login .continue-with-providers + p::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 0, 0, .1);
}

/* --- Username / password fields: icon prefix inside the input, same
   FontAwesome-prefix language used for phone/email on the Contact
   page. The icon can't go on the <input> itself (::before/::after
   don't render on replaced elements like <input> in any browser), so
   it's a ::before on the .username/.password wrapper instead.

   FIX (was anchored to `bottom: 0`): that assumed the input was
   always the wrapper's last child, which is true for .username but
   NOT for .password — its wrapper also contains the "Forgot your
   password?" link below the input, so the wrapper's bottom edge sat
   well below the input and the icon rendered detached from it. Now
   anchored from the TOP instead, at a fixed offset derived from the
   label row's own box (line-height 1.2rem + margin-bottom .35rem =
   1.55rem to the input's top edge) — independent of whatever follows
   the input, so it can't drift again. --- */
body.pkp_page_login .fields {
    margin: 0;
    padding: 0;
    border: 0;
}

body.pkp_page_login .fields .username,
body.pkp_page_login .fields .password {
    position: relative;
}

body.pkp_page_login .fields .username {
    margin-bottom: .45rem;
}

body.pkp_page_login .fields .password {
    margin-bottom: .9rem;
}

body.pkp_page_login .fields label {
    display: block;
    margin: 0;
}

body.pkp_page_login .fields .label {
    display: block;
    overflow: hidden;
    line-height: 1.2rem;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: #333;
}

body.pkp_page_login .fields .required {
    color: #c0392b;
}

body.pkp_page_login .fields input[type="text"],
body.pkp_page_login .fields input[type="password"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.75rem;
    padding: 0 .9rem 0 2.5rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    font-size: .95rem;
    line-height: normal;
    color: #1a1a1a;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* --- Root cause of the narrow desktop/tablet inputs: the theme's own
   .cmp_form rules (plugins/themes/default/styles/components.less) set
   `max-width: 20em` on text/password inputs inside an
   `@media(min-width: 480px)` block, and the login <form> carries the
   theme's "cmp_form" class. `width: 100%` above fills the field
   wrapper, but the browser still caps the rendered width at ~20em
   (~320px), leaving the rest of the card empty and stranding the
   "Forgot password?" link (right-aligned to the full-width wrapper,
   not to the capped input) far past the input's real right edge.
   Lifting the cap here — only at the same tablet-and-up width the
   theme used, so <=480px mobile is untouched — lets the input (and
   therefore the link under it) use the wrapper's full width. --- */
@media (min-width: 481px) {
    body.pkp_page_login .fields input[type="text"],
    body.pkp_page_login .fields input[type="password"] {
        max-width: none;
    }
}

body.pkp_page_login .fields input[type="text"]:focus,
body.pkp_page_login .fields input[type="password"]:focus {
    outline: none;
    border-color: #0F7A4E;
    box-shadow: 0 0 0 3px rgba(15, 122, 78, .12);
}

body.pkp_page_login .fields .username::before,
body.pkp_page_login .fields .password::before {
    font-family: "FontAwesome";
    position: absolute;
    left: .9rem;
    top: 1.55rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    color: #9ca3af;
    font-size: .9rem;
    pointer-events: none;
}

body.pkp_page_login .fields .username::before {
    content: "\f007";
}

body.pkp_page_login .fields .password::before {
    content: "\f023";
}

/* "Forgot your password?" — directly under the password input, right-
   aligned. No flex/flex-basis needed: the input above is already
   `display: block; width: 100%`, so this <a> (an inline element inside
   the same <label>) is pushed onto its own line by normal text flow —
   one less moving part than the earlier flex-wrap version, and it no
   longer affects the icon's position (see fix note above). */
body.pkp_page_login .fields .password > label > a {
    display: block;
    text-align: right;
    margin-top: .35rem;
    font-size: .82rem;
    color: #0F7A4E;
    text-decoration: none;
}

body.pkp_page_login .fields .password > label > a:hover {
    color: #0B5C3A;
    text-decoration: underline;
}

/* --- "Keep me logged in" checkbox --- */
body.pkp_page_login .fields .remember.checkbox {
    margin-top: .25rem;
    margin-bottom: 1rem;
}

body.pkp_page_login .fields .remember.checkbox label {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
}

body.pkp_page_login .fields .remember.checkbox input {
    accent-color: #0F7A4E;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

body.pkp_page_login .fields .remember.checkbox .label {
    display: inline;
    margin: 0;
    font-size: .9rem;
    font-weight: 400;
    color: #333;
}

/* --- Buttons row: register link on the left, submit button on the
   right — reordered visually via flex `order` since the template
   markup has <button class="submit"> before <a class="register">.
   Register is styled as a secondary "ghost" pill (same shape/padding
   scale as the primary button, green outline instead of green fill)
   so the two read as one deliberate pair, not a button next to a
   stray text link. --- */
body.pkp_page_login .fields .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

body.pkp_page_login .fields .buttons .register {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: #0F7A4E;
    border: 1.5px solid #0F7A4E;
    border-radius: 999px;
    padding: .7rem 1.5rem;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body.pkp_page_login .fields .buttons .register:hover,
body.pkp_page_login .fields .buttons .register:focus {
    background: rgba(15, 122, 78, .08);
    color: #0B5C3A;
    border-color: #0B5C3A;
    text-decoration: none;
}

body.pkp_page_login .fields .buttons .register::after {
    font-family: "FontAwesome";
    content: "\f061";
    font-size: .8rem;
}

body.pkp_page_login .fields .buttons .submit {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #0F7A4E;
    color: #fff;
    border: 1.5px solid #0F7A4E;
    border-radius: 999px;
    padding: .7rem 1.75rem;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}

body.pkp_page_login .fields .buttons .submit::before {
    font-family: "FontAwesome";
    content: "\f090";
}

body.pkp_page_login .fields .buttons .submit:hover,
body.pkp_page_login .fields .buttons .submit:focus {
    background: #0B5C3A;
}

/* --- Tablet/desktop: `space-between` on a row now as wide as the
   fixed inputs above it (see the input max-width fix) stretched the
   register/submit pair to the card's outer edges, leaving a big empty
   gap between them. A 2-column grid keeps them a fixed, cohesive
   distance apart regardless of row width; `order` on each button
   (above) still controls which column it lands in. --- */
@media (min-width: 481px) {
    body.pkp_page_login .fields .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    body.pkp_page_login .fields .buttons .register,
    body.pkp_page_login .fields .buttons .submit {
        justify-content: center;
    }
}

/* --- Mobile: the two buttons are sized to their own text content, so
   space-between (fine on wide rows) leaves the shorter register pill
   without a matching-width partner once the row gets too narrow to
   hold both — it wraps onto its own line off-center and can crowd the
   card edge. Below 480px, stack both full-width and centered instead,
   same breakpoint already used for .continue-with-providers. --- */
@media (max-width: 480px) {
    body.pkp_page_login .fields .buttons {
        flex-direction: column;
        align-items: stretch;
    }

    body.pkp_page_login .fields .buttons .register,
    body.pkp_page_login .fields .buttons .submit {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* --- Sidebar: same global markup and fixes already applied on Home/
   About/General Info/Editorial Team/Submissions/Contact --- */
body.pkp_page_login .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

body.pkp_page_login .pkp_structure_sidebar .block_information {
    display: none !important;
}

body.pkp_page_login .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_login .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_login .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

body.pkp_page_login .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_login .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_login .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_login .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

body.pkp_page_login .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   18. "RO'YXATDAN O'TISH" / REGISTRATION PAGE
   Applies to: lib/pkp/templates/frontend/pages/userRegister.tpl +
   lib/pkp/templates/frontend/components/registrationForm.tpl. Body
   classes are "pkp_page_user pkp_op_register" — pkp_page_user alone is
   shared with the profile pages, so both classes are required together
   to scope this section to registration only.

   Same "Continue with" quick-login box as the Login page (section 17),
   injected by plugins/generic/googleLogin/GoogleLoginPlugin.php with
   the same inline style="margin/max-width/text-align" attributes —
   overridden the same way, with matching !important rules. No text,
   copy, form action, method, field names, or required/consent logic
   changed anywhere in this section — only new CSS on existing
   elements.
   ========================================== */

/* --- Background pattern: identical to every other approved page --- */
body.pkp_page_user.pkp_op_register {
    background-color: #fff;
    background-image:
        repeating-linear-gradient(45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px),
        repeating-linear-gradient(-45deg, rgba(15, 122, 78, .012) 0px, rgba(15, 122, 78, .012) 1px, transparent 1px, transparent 16px);
}

/* --- Breadcrumb --- */
body.pkp_page_user.pkp_op_register .cmp_breadcrumbs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

body.pkp_page_user.pkp_op_register .cmp_breadcrumbs a {
    color: #6b7280;
    text-decoration: none;
}

body.pkp_page_user.pkp_op_register .cmp_breadcrumbs a:hover {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_user.pkp_op_register .cmp_breadcrumbs .separator {
    margin: 0 .4rem;
    color: #ccc;
}

body.pkp_page_user.pkp_op_register .cmp_breadcrumbs .current span {
    color: #333;
    font-weight: 600;
}

/* --- Page title + the same short green underline accent used on
   every other approved page --- */
body.pkp_page_user.pkp_op_register .page_register > h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 0;
}

body.pkp_page_user.pkp_op_register .page_register > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .65rem 0 1.5rem;
    background: #0F7A4E;
    border-radius: 2px;
}

@media (min-width: 600px) {
    body.pkp_page_user.pkp_op_register .page_register > h1 {
        font-size: 2.1rem;
    }
}

/* --- "Required fields..." note --- */
body.pkp_page_user.pkp_op_register .page_register > p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0 0 1rem;
    max-width: 720px;
}

/* --- Card shell wrapping the whole registration form. Wider than the
   Login card (640px) since two fieldsets here go 2-column at tablet
   width and need the extra room to avoid cramped fields. --- */
body.pkp_page_user.pkp_op_register .page_register form.register {
    display: block;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    padding: 1.75rem 2rem;
}

@media (min-width: 768px) {
    body.pkp_page_user.pkp_op_register .page_register form.register {
        padding: 2rem 2.25rem;
    }
}

/* --- Desktop (>=1200px): a touch more breathing room now that the
   sidebar has settled into its final column and the card has the
   full main-content width to work with — still bounded, so it never
   turns into a huge empty-feeling single block. --- */
@media (min-width: 1200px) {
    body.pkp_page_user.pkp_op_register .page_register form.register {
        max-width: 780px;
        padding: 2.25rem 2.5rem;
    }
}

@media (max-width: 600px) {
    body.pkp_page_user.pkp_op_register .page_register form.register {
        padding: 1.25rem 1.35rem;
    }
}

/* --- Quick login (Google / ORCID): identical technique to section 17
   — heading spans both columns via grid-column: 1 / -1, the two
   button divs auto-place into the two columns below it. --- */
body.pkp_page_user.pkp_op_register .continue-with-providers {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: 0 0 1.25rem !important;
    max-width: none !important;
    text-align: left !important;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

@media (max-width: 480px) {
    body.pkp_page_user.pkp_op_register .continue-with-providers {
        grid-template-columns: 1fr;
    }
}

body.pkp_page_user.pkp_op_register .continue-with-providers h3 {
    grid-column: 1 / -1;
    margin: 0 0 .1rem !important;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
}

body.pkp_page_user.pkp_op_register .continue-with-providers > div {
    min-width: 0;
}

body.pkp_page_user.pkp_op_register .continue-with-providers .pkp_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .9rem !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.pkp_page_user.pkp_op_register .continue-with-providers .pkp_button:hover,
body.pkp_page_user.pkp_op_register .continue-with-providers .pkp_button:focus {
    border-color: #0F7A4E !important;
    box-shadow: 0 1px 4px rgba(15, 122, 78, .15);
}

body.pkp_page_user.pkp_op_register .continue-with-providers .pkp_button svg {
    flex: 0 0 auto;
}

/* --- "— or —" divider, same flanking-rule-lines technique as 17 --- */
body.pkp_page_user.pkp_op_register .continue-with-providers + p {
    display: flex !important;
    align-items: center;
    gap: .75rem;
    text-align: center !important;
    margin: 0 0 1.4rem !important;
    max-width: none !important;
    font-size: .8rem;
    color: #9ca3af;
}

body.pkp_page_user.pkp_op_register .continue-with-providers + p::before,
body.pkp_page_user.pkp_op_register .continue-with-providers + p::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 0, 0, .1);
}

/* --- Fieldsets (Profile / Login / Privacy Options): the browser
   default border/padding is stripped and replaced with the same
   green-accent section-heading language used for the sidebar's
   "Indexing" block heading (section 7/9b/10b/etc — border-bottom in
   rgba(15, 122, 78, .15)), scaled down to a form-legend size so three
   stacked fieldsets don't read heavier than the page's own <h1>. --- */
body.pkp_page_user.pkp_op_register fieldset {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

body.pkp_page_user.pkp_op_register fieldset:last-of-type {
    margin-bottom: 0;
}

body.pkp_page_user.pkp_op_register fieldset > legend {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0F7A4E;
}

body.pkp_page_user.pkp_op_register fieldset > legend.pkp_screen_reader {
    border-bottom: 0;
    margin: 0;
    padding: 0;
}

/* --- Field grid: Profile (given/family name, affiliation, country)
   and Login (email, username, password, repeat password) fieldsets
   both hold four same-weight text fields, in source order, so a plain
   2-column grid naturally pairs them as Ism|Familiya + Muassasa|Davlat
   and Elektron pochta|Foydalanuvchi nomi + Parol|Parolni takrorlang —
   no markup reordering needed. Single column at/below 480px, 2-column
   from 481px up through the 1199px tablet/laptop range and into the
   >=1200px desktop tier (the card's own max-width, not this grid,
   is what changes there — see the form.register rule above). --- */
body.pkp_page_user.pkp_op_register fieldset.identity .fields,
body.pkp_page_user.pkp_op_register fieldset.login .fields {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.25rem;
}

@media (min-width: 481px) {
    body.pkp_page_user.pkp_op_register fieldset.identity .fields,
    body.pkp_page_user.pkp_op_register fieldset.login .fields {
        grid-template-columns: 1fr 1fr;
    }
}

body.pkp_page_user.pkp_op_register fieldset.identity .fields > div,
body.pkp_page_user.pkp_op_register fieldset.login .fields > div {
    position: relative;
    margin-bottom: 1rem;
}

body.pkp_page_user.pkp_op_register fieldset.identity .fields label,
body.pkp_page_user.pkp_op_register fieldset.login .fields label {
    display: block;
    margin: 0;
}

body.pkp_page_user.pkp_op_register fieldset.identity .fields .label,
body.pkp_page_user.pkp_op_register fieldset.login .fields .label {
    display: block;
    overflow: hidden;
    line-height: 1.2rem;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: #333;
}

body.pkp_page_user.pkp_op_register fieldset .required {
    color: #c0392b;
}

/* --- Inputs + select: same 2.75rem pill-cornered field styling as
   Login, with a left icon gutter. The theme's `max-width: 20em` cap
   (plugins/themes/default/styles/components.less, `.cmp_form input`
   at >=480px — see the note on this in section 17) applies here too,
   so it's lifted the same way at the same breakpoint. --- */
body.pkp_page_user.pkp_op_register fieldset input[type="text"],
body.pkp_page_user.pkp_op_register fieldset input[type="email"],
body.pkp_page_user.pkp_op_register fieldset input[type="password"],
body.pkp_page_user.pkp_op_register fieldset select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.75rem;
    padding: 0 .9rem 0 2.5rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 8px;
    font-size: .95rem;
    line-height: normal;
    color: #1a1a1a;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.pkp_page_user.pkp_op_register fieldset select {
    padding-left: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: .7rem;
}

@media (min-width: 481px) {
    body.pkp_page_user.pkp_op_register fieldset input[type="text"],
    body.pkp_page_user.pkp_op_register fieldset input[type="email"],
    body.pkp_page_user.pkp_op_register fieldset input[type="password"],
    body.pkp_page_user.pkp_op_register fieldset select {
        max-width: none;
    }
}

body.pkp_page_user.pkp_op_register fieldset input[type="text"]:focus,
body.pkp_page_user.pkp_op_register fieldset input[type="email"]:focus,
body.pkp_page_user.pkp_op_register fieldset input[type="password"]:focus,
body.pkp_page_user.pkp_op_register fieldset select:focus {
    outline: none;
    border-color: #0F7A4E;
    box-shadow: 0 0 0 3px rgba(15, 122, 78, .12);
}

/* --- Icon prefixes: positioned the same way as Login's username/
   password icons — top-anchored at 1.55rem (the label row's own
   line-height 1.2rem + margin-bottom .35rem), independent of whatever
   follows the input inside the wrapper. --- */
body.pkp_page_user.pkp_op_register fieldset.identity .given_name::before,
body.pkp_page_user.pkp_op_register fieldset.identity .family_name::before,
body.pkp_page_user.pkp_op_register fieldset.identity .affiliation::before,
body.pkp_page_user.pkp_op_register fieldset.identity .country::before,
body.pkp_page_user.pkp_op_register fieldset.login .email::before,
body.pkp_page_user.pkp_op_register fieldset.login .username::before,
body.pkp_page_user.pkp_op_register fieldset.login .password::before {
    font-family: "FontAwesome";
    position: absolute;
    left: .9rem;
    top: 1.55rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    color: #9ca3af;
    font-size: .9rem;
    pointer-events: none;
}

body.pkp_page_user.pkp_op_register fieldset.identity .given_name::before,
body.pkp_page_user.pkp_op_register fieldset.identity .family_name::before {
    content: "\f007";
}

body.pkp_page_user.pkp_op_register fieldset.identity .affiliation::before {
    content: "\f1ad";
}

body.pkp_page_user.pkp_op_register fieldset.identity .country::before {
    content: "\f0ac";
}

body.pkp_page_user.pkp_op_register fieldset.login .email::before {
    content: "\f0e0";
}

body.pkp_page_user.pkp_op_register fieldset.login .username::before {
    content: "\f007";
}

body.pkp_page_user.pkp_op_register fieldset.login .password::before {
    content: "\f023";
}

/* --- Consent checkboxes (privacy statement / email notifications):
   same flex-row-with-accent-color checkbox language as Login's
   "Keep me logged in" (section 17). --- */
body.pkp_page_user.pkp_op_register fieldset.consent .fields {
    margin: 0 0 .75rem;
    padding: 0;
    border: 0;
}

body.pkp_page_user.pkp_op_register fieldset.consent .fields:last-child {
    margin-bottom: 0;
}

body.pkp_page_user.pkp_op_register fieldset.consent .optin label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
    font-size: .88rem;
    line-height: 1.4;
    color: #333;
}

body.pkp_page_user.pkp_op_register fieldset.consent .optin input {
    accent-color: #0F7A4E;
    width: 1rem;
    height: 1rem;
    margin: .2rem 0 0;
    flex: 0 0 auto;
}

body.pkp_page_user.pkp_op_register fieldset.consent .optin a {
    color: #0F7A4E;
    text-decoration: underline;
}

body.pkp_page_user.pkp_op_register fieldset.consent .optin a:hover {
    color: #0B5C3A;
}

/* --- Buttons row: a direct child of <form> here (not nested inside
   .fields the way Login's is), so it's targeted on its own. Same
   ghost-link + filled-pill pair as Login's register/submit, with the
   secondary "Login" link and primary "Register" submit swapped into
   the same left/right roles via `order` (template markup puts the
   submit button first). --- */
body.pkp_page_user.pkp_op_register .page_register > form > .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .5rem;
}

body.pkp_page_user.pkp_op_register .page_register > form > .buttons .login {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: #0F7A4E;
    border: 1.5px solid #0F7A4E;
    border-radius: 999px;
    padding: .7rem 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

body.pkp_page_user.pkp_op_register .page_register > form > .buttons .login:hover,
body.pkp_page_user.pkp_op_register .page_register > form > .buttons .login:focus {
    background: rgba(15, 122, 78, .08);
    color: #0B5C3A;
    border-color: #0B5C3A;
    text-decoration: none;
}

body.pkp_page_user.pkp_op_register .page_register > form > .buttons .login::after {
    font-family: "FontAwesome";
    content: "\f061";
    font-size: .8rem;
}

body.pkp_page_user.pkp_op_register .page_register > form > .buttons .submit {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #0F7A4E;
    color: #fff;
    border: 1.5px solid #0F7A4E;
    border-radius: 999px;
    padding: .7rem 1.75rem;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}

body.pkp_page_user.pkp_op_register .page_register > form > .buttons .submit::before {
    font-family: "FontAwesome";
    content: "\f234";
}

body.pkp_page_user.pkp_op_register .page_register > form > .buttons .submit:hover,
body.pkp_page_user.pkp_op_register .page_register > form > .buttons .submit:focus {
    background: #0B5C3A;
}

@media (min-width: 481px) {
    body.pkp_page_user.pkp_op_register .page_register > form > .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    body.pkp_page_user.pkp_op_register .page_register > form > .buttons .login,
    body.pkp_page_user.pkp_op_register .page_register > form > .buttons .submit {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    body.pkp_page_user.pkp_op_register .page_register > form > .buttons {
        flex-direction: column;
        align-items: stretch;
    }

    /* The default theme's generic ".buttons a{float:right;margin-right:1em}"
       and ".buttons button{float:right}" rules are never overridden by the
       base (non-media) .login/.submit rules above, since those never touch
       margin/float. That leaves the <a class="login"> with a stray 1em
       right margin the <button class="submit"> doesn't have, so the two
       stacked pills don't share the same right edge/width on mobile even
       though both already got width:100%. Reset both explicitly here,
       scoped to this breakpoint only, so tablet/desktop stay untouched. --- */
    body.pkp_page_user.pkp_op_register .page_register > form > .buttons .login,
    body.pkp_page_user.pkp_op_register .page_register > form > .buttons .submit {
        width: 100%;
        margin: 0;
        float: none;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* --- Sidebar: same global markup and fixes already applied on Home/
   About/General Info/Editorial Team/Submissions/Contact/Login --- */
body.pkp_page_user.pkp_op_register .pkp_structure_sidebar #customblock-journal-cover {
    display: none !important;
}

body.pkp_page_user.pkp_op_register .pkp_structure_sidebar .block_information {
    display: none !important;
}

body.pkp_page_user.pkp_op_register .pkp_structure_sidebar .block_make_submission a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
    padding: 1.1rem 1.25rem !important;
}

body.pkp_page_user.pkp_op_register .pkp_structure_sidebar .block_make_submission a::before {
    font-family: "FontAwesome";
    content: "\f0f6";
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.pkp_page_user.pkp_op_register .pkp_structure_sidebar .block_make_submission a::after {
    font-family: "FontAwesome";
    content: "\f061";
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
}

body.pkp_page_user.pkp_op_register .pkp_structure_sidebar #customblock-indexing .content::before {
    font-family: "FontAwesome", Georgia, "Times New Roman", serif;
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: #0F7A4E;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

html[lang^="uz"] body.pkp_page_user.pkp_op_register .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  Jurnal haqida";
}

html[lang^="en"] body.pkp_page_user.pkp_op_register .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  About the Journal";
}

html[lang^="ru"] body.pkp_page_user.pkp_op_register .pkp_structure_sidebar #customblock-indexing .content::before {
    content: "\f19c  О журнале";
}

body.pkp_page_user.pkp_op_register .pkp_structure_sidebar #customblock-indexing .content p:nth-of-type(2)::before {
    font-family: "FontAwesome";
    content: "\f1c0";
    margin-right: .4rem;
}

/* ==========================================
   19. "MUALLIF KO'RSATMALARI" / AUTHOR GUIDELINES CONTENT
   Applies to: the rich-text body of #authorGuidelines on the
   Submissions page (section 15 styles the card shell, its <h2> and
   its paragraphs). The text itself is the journal setting
   authorGuidelines (journal_settings, per locale) and is printed as-is
   by templates/frontend/pages/submissions.tpl — no template change.

   The uz@latin text (official printed requirements, added 2026-10-02)
   is plain semantic HTML with NO classes and NO inline styles, so it
   survives being re-saved through the OJS settings editor:
     h3              — document title (first) and major parts
     h4              — the individual parts of an article
     ul (first one)  — the compact technical-requirements block
     ul (the others) — ordinary bullet lists
     code            — the citation / reference patterns
   Everything is scoped to .author_guidelines on this one page; the
   en/ru texts are paragraphs only, so these rules do not touch them.
   ========================================== */

/* --- Document title: the first <h3>. It is a long all-caps line, so
   it is set small and tracked (a printed "title block" look) instead
   of large and heavy. The theme's root size is 14px, so the fluid size
   runs from 1rem (14px) on phones to 1.07rem (15px) from ~768px up:
   above the 14px body text, below the 1.12rem major-part headings.
   Open line-height, lines balanced where the browser supports it, and
   closed by a hairline (polished 2026-10-02). --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines > h3:first-of-type {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.07rem;
    font-size: clamp(1rem, .975rem + .17vw, 1.07rem);
    line-height: 1.6;
    letter-spacing: .045em;
    color: #2a2a2a;
    max-width: 62ch;
    text-wrap: balance;
    margin: .15rem 0 1.25rem;
    padding: 0 0 1rem;
    border-top: 0;
    border-bottom: 2px solid rgba(15, 122, 78, .15);
}

/* --- Major parts ("Maqolaning tuzilishi", "Foydalanilgan
   adabiyotlarning berilish tartibi") --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines > h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.4;
    color: #0B5C3A;
    margin: 1.9rem 0 .8rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* --- Parts of the article: small label-style headings with a green
   marker, kept close to the paragraph they introduce --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines > h4 {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: #1a1a1a;
    margin: 1.35rem 0 .4rem;
    padding-left: .85rem;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 3px;
    border-radius: 2px;
    background: #0F7A4E;
}

/* --- Ordinary lists: same measure and rhythm as the paragraphs, with
   small green markers --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines > ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-width: 65ch;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > ul > li {
    position: relative;
    margin: 0;
    padding: .28rem 0 .28rem 1.35rem;
    line-height: 1.7;
    font-size: 1rem;
    color: #2a2a2a;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > ul > li::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: .95em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0F7A4E;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:last-child {
    margin-bottom: 0;
}

/* --- Technical requirements: the first list becomes a compact pale
   green panel. One column on phones, two from 600px up; the closing
   sentence about languages always spans the full width. --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:first-of-type {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    margin: 1.25rem 0 .5rem;
    padding: .5rem 1.1rem;
    background: rgba(15, 122, 78, .05);
    border: 1px solid rgba(15, 122, 78, .18);
    border-radius: 10px;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:first-of-type > li {
    padding: .6rem 0 .6rem 1.35rem;
    line-height: 1.55;
    font-size: .97rem;
    border-bottom: 1px solid rgba(15, 122, 78, .12);
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:first-of-type > li::before {
    top: 1.2em;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:first-of-type > li:last-child {
    border-bottom: 0;
}

body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:first-of-type > li strong {
    font-weight: 700;
    color: #1a1a1a;
}

@media (min-width: 600px) {
    body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:first-of-type {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.75rem;
        padding: .6rem 1.4rem;
    }

    body.pkp_page_about.pkp_op_submissions .author_guidelines > ul:first-of-type > li:last-child {
        grid-column: 1 / -1;
    }
}

/* --- Citation / reference patterns --- */
body.pkp_page_about.pkp_op_submissions .author_guidelines code {
    font-family: inherit;
    font-size: .95em;
    font-style: italic;
    color: #0B5C3A;
    background: rgba(15, 122, 78, .07);
    border-radius: 4px;
    padding: .1em .4em;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@media (max-width: 600px) {
    body.pkp_page_about.pkp_op_submissions .author_guidelines > h3 {
        font-size: 1.05rem;
        margin-top: 1.5rem;
        padding-top: 1.15rem;
    }
}

/* --- On phones the generic h3 rule above adds top spacing and a top
   padding meant for the major parts; the title is the first element
   of the card and must not get them. --- */
@media (max-width: 600px) {
    body.pkp_page_about.pkp_op_submissions .author_guidelines > h3:first-of-type {
        margin-top: 0;
        padding-top: 0;
    }
}

/* --- When no section has a policy text there is no .section_policy
   card, so the privacy card directly follows the checklist: let it
   span the full width instead of sitting alone in the left half of
   section 15's two-column row. --- */
@media (min-width: 768px) {
    body.pkp_page_about.pkp_op_submissions .page_submissions > .submission_checklist + .privacy_statement {
        grid-column: 1 / -1;
    }
}

/* ==========================================
   20. HEADER CLICK AREA + LOGIN-NOTICE WRAPPING (2026-10-02)
   Two small, targeted corrections found with a real browser test.
   Nothing here changes how anything looks when it already fitted.
   ========================================== */

/* --- 20a. Header: language selector / Register / Login clickable.
   .pkp_site_name_wrapper is a full-width row (z-index 9999, section 4)
   whose empty right-hand part lay on top of the lower half of the
   EN | RU | UZ selector and the Register/Login links at 1024-1440px,
   swallowing their clicks. The row itself never needs to receive
   clicks - only what is inside it does - so it gets the same
   treatment section 4 already gives the neighbouring header wrappers:
   the container is transparent to the pointer, its real controls are
   not. Stacking order and appearance are untouched. --- */
.pkp_site_name_wrapper {
    pointer-events: none !important;
}

.pkp_site_name_wrapper a,
.pkp_site_name_wrapper .pkp_site_nav_toggle {
    pointer-events: auto !important;
}

/* --- 20b. Submissions page login notice, above phone width.
   Section 15 lays the sentence out as one flex row of separate
   pieces (icon, intro text, link, "or", link, "."). When the sentence
   is longer than the row (Russian at tablet widths) each piece was
   squeezed and wrapped inside itself. Now the pieces keep their words
   together and the link group moves to a second row as a whole when
   the row is too narrow. When everything fits on one row - UZ and EN
   at every width, RU on wide screens - the result is identical to
   before. Phones (<=480px) keep section 15's own layout. --- */
@media (min-width: 481px) {
    body.pkp_page_about.pkp_op_submissions .cmp_notification {
        flex-wrap: wrap;
        row-gap: .2rem;
    }

    body.pkp_page_about.pkp_op_submissions .submission_login_notice__intro {
        white-space: nowrap;
    }

    body.pkp_page_about.pkp_op_submissions .submission_login_notice__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .2rem .75rem;
        white-space: nowrap;
    }
}