@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ============================================================
   DESIGN TOKENS & SYSTEM VARIABLES (AI & EDUCATION SPECIFIC)
   ============================================================ */
:root {
    --primary-color: #0A192F;      /* Midnight Blue/Navy (Tech and AI focused) */
    --primary-light: #172A45;     /* Lighter Dark Navy for depth */
    --accent-color: #C5A059;      /* Academic Gold */
    --accent-glow: #F3E5AB;       /* Soft glowing gold */
    --teal-accent: #0D9488;       /* Emerald/Teal representing growth & learning */
    --teal-hover: #0F766E;
    --text-main: #334155;         /* Elegant charcoal for legibility */
    --text-dark: #1E293B;         /* Slate dark for strong titles */
    --light-bg: #F8FAFC;          /* Extremely soft blue-slate background */
    --card-border: #E2E8F0;       /* Sophisticated thin borders */
    --card-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    --card-shadow-hover: 0 10px 30px rgba(15, 23, 42, 0.12);
    --white: #FFFFFF;
    --font-heading: 'Playfair Display', Georgia, Cambria, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   BASE ELEMENT RESET & GLOBAL STYLES
   ============================================================ */
body {
    background-color: var(--light-bg);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Full Width Premium Wrapper */
.pkp_structure_page {
    max-width: 1560px !important;
    margin: 0 auto !important;
    background: var(--white);
    box-shadow: 0 0 40px rgba(10, 25, 47, 0.08);
    min-height: 100vh;
}

/* ============================================================
   HEADER & PREMIUM NAVIGATION SYSTEM
   ============================================================ */
.pkp_structure_head {
    background: var(--white) !important;
    border-bottom: none !important;
    padding: 0 !important;
    position: relative !important; /* Anchor for absolute positioned child elements like user nav */
}

.pkp_head_wrapper {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
}

/* Banner Design System (Uses contain-scaled header banner matching i-jte) */
.pkp_site_name_wrapper {
    background: url('/public/header_banner.png') center center / contain no-repeat;
    height: 0;
    padding-bottom: 24.44%; /* (396 / 1620) * 100% */
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Hide Header Title Overlay since the graphic banner contains all info */
.pkp_site_name_wrapper::after {
    display: none !important;
}

/* Hide default site name logo or text inside wrapper as the banner contains all info */
.pkp_site_name_wrapper .pkp_site_name,
.pkp_site_name_wrapper button.pkp_site_nav_toggle {
    display: none !important;
}

/* Premium Navigation Bar */
.pkp_site_nav_menu {
    background: var(--primary-color) !important;
    border-bottom: 4px solid var(--accent-color) !important;
    box-shadow: 0 4px 15px rgba(10, 25, 47, 0.15);
    display: flex !important;
    align-items: center;
    padding: 2px 0 !important;
}

.pkp_navigation_primary_wrapper {
    max-width: 1400px;
    margin: 0 auto !important;
    width: 100%;
    padding: 0 32px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.pkp_navigation_primary {
    display: flex !important;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}

.pkp_navigation_primary > li > a {
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 18px !important;
    display: block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap !important;
    position: relative;
}

/* Elegant Underline Indicator on Navigation Hover */
.pkp_navigation_primary > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    background: var(--accent-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li.current > a::after {
    transform: scaleX(1);
}

.pkp_navigation_primary > li > a:hover {
    color: var(--accent-color) !important;
    background: rgba(255, 255, 255, 0.03);
}

.pkp_navigation_primary > li.current > a {
    color: var(--accent-color) !important;
    font-weight: 700;
}

/* User Registration/Login Panel (Clean Floating Topbar - Force to Right Corner) */
#navigationUserWrapper,
.pkp_navigation_user_wrapper,
.pkp_site_nav_menu #navigationUserWrapper,
.pkp_site_nav_menu .pkp_navigation_user_wrapper,
.pkp_head_wrapper #navigationUserWrapper,
.pkp_head_wrapper .pkp_navigation_user_wrapper,
header.pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper,
header.pkp_structure_head .pkp_head_wrapper #navigationUserWrapper,
html body #navigationUserWrapper,
html body .pkp_navigation_user_wrapper,
html body header.pkp_structure_head #navigationUserWrapper,
html body header.pkp_structure_head .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 15px !important;
    right: 50px !important; /* Anchored perfectly to the right margin */
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9999 !important; /* Highest z-index priority */
    background: transparent !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-align: right !important;
}

@media (min-width: 992px) {
    #navigationUserWrapper,
    .pkp_navigation_user_wrapper,
    .pkp_site_nav_menu #navigationUserWrapper,
    .pkp_site_nav_menu .pkp_navigation_user_wrapper,
    .pkp_head_wrapper #navigationUserWrapper,
    .pkp_head_wrapper .pkp_navigation_user_wrapper,
    header.pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper,
    header.pkp_structure_head .pkp_head_wrapper #navigationUserWrapper,
    html body #navigationUserWrapper,
    html body .pkp_navigation_user_wrapper,
    html body header.pkp_structure_head #navigationUserWrapper,
    html body header.pkp_structure_head .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 15px !important;
        right: 50px !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        z-index: 9999 !important;
        background: transparent !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        text-align: right !important;
    }
}

.pkp_navigation_user {
    display: flex !important;
    gap: 15px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important; /* Align links cleanly to the right */
}

.pkp_navigation_user > li > a {
    color: var(--white) !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px !important;
    display: block;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pkp_navigation_user > li > a:hover {
    color: var(--accent-color) !important;
}

/* Dropdown Menu Styling (Black text, modern shadows, gold accents) */
.pkp_navigation_primary ul ul,
.pkp_navigation_primary ul li ul {
    background: var(--white) !important;
    border-top: 3px solid var(--accent-color) !important;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.15) !important;
    padding: 8px 0 !important;
}

.pkp_navigation_primary ul ul li a,
.pkp_navigation_primary ul li ul li a {
    color: var(--text-dark) !important;
    text-transform: none !important;
    font-size: 0.88rem !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.pkp_navigation_primary ul ul li a:hover {
    background: var(--light-bg) !important;
    color: var(--teal-accent) !important;
    padding-left: 24px !important;
}

/* ============================================================
   UNIVERSAL CONTENT LAYOUT SYSTEM
   ============================================================ */
.pkp_structure_content {
    display: flex;
    flex-direction: row;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 24px 0 0 !important; /* Fully flush (0px) to the left margin edge */
    gap: 30px;
    align-items: flex-start;
    box-sizing: border-box;
}

/* Primary column structure (Main + Details) */
.pkp_structure_main {
    flex: 0 0 74%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 0 !important; /* Force content close to the left vertical line/margin */
}

/* Sidebar structure */
.pkp_structure_sidebar {
    flex: 0 0 26%;
    min-width: 0;
    box-sizing: border-box;
    position: sticky;
    top: 40px;
}

/* Handle Three-Column layouts for Article pages */
.pkp_structure_main .page_article .row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 30px;
}

.main_entry {
    flex: 0 0 68%;
    min-width: 0;
    box-sizing: border-box;
}

.entry_details {
    flex: 0 0 32%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--light-bg);
    border: 1px solid var(--card-border) !important;
    border-radius: 8px;
    padding: 20px 0 !important; /* Left/right padding set to 0 to let horizontal lines touch borders */
}

/* Clean list styles inside entry_details card to prevent gold bullets & left indentation */
.entry_details ul,
.entry_details ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.entry_details li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.entry_details li::before {
    content: none !important;
    display: none !important;
}

.entry_details .galleys_links {
    margin: 0 !important;
}

/* ============================================================
   TYPOGRAPHY & TITLE HIGHLIGHTS
   ============================================================ */
.pkp_structure_main .page h1,
.pkp_structure_main .page .page_title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 3px solid var(--accent-color) !important;
    padding-bottom: 14px !important;
    margin-top: 0;
    margin-bottom: 30px;
    position: relative;
}

/* Remove the old teal dot badge */
.pkp_structure_main .page h1::after,
.pkp_structure_main .page .page_title::after {
    display: none;
}

/* ============================================================
   CURRENT ISSUE SECTION STYLING (Homepage)
   ============================================================ */
/* "Current Issue" heading — bold italic serif like reference */
.current_issue > h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #1a1a1a !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

/* Remove any ::before or ::after from the current issue heading */
.current_issue > h2::before,
.current_issue > h2::after {
    display: none !important;
}

/* Volume / Issue identification — gold left border accent */
.current_issue_title {
    font-family: var(--font-heading) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    border-left: 4px solid #c68a4c !important;
    padding-left: 14px !important;
    margin-bottom: 24px !important;
}

/* Issue heading area: cover image + metadata side by side */
.obj_issue_toc > .heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 28px !important;
    margin-bottom: 40px !important;
}

.obj_issue_toc > .heading > .cover {
    flex: 0 0 auto !important;
    max-width: 180px !important;
}

.obj_issue_toc > .heading > .cover img {
    width: 180px !important;
    height: auto !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #e2e8f0 !important;
}

/* Issue-level DOI and published date next to cover */
.obj_issue_toc > .heading > .description,
.obj_issue_toc > .heading > .pub_id,
.obj_issue_toc > .heading > .published {
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
}

.obj_issue_toc > .heading > .pub_id.doi {
    margin-bottom: 8px !important;
}

.obj_issue_toc > .heading > .pub_id.doi .type {
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.obj_issue_toc > .heading > .pub_id.doi .id a {
    color: #0A2E5C !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.obj_issue_toc > .heading > .pub_id.doi .id a:hover {
    text-decoration: underline !important;
}

.obj_issue_toc > .heading > .published .label {
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* "View All Issues" link at the bottom */
.current_issue .read_more {
    display: inline-block !important;
    margin-top: 30px !important;
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #0A2E5C !important;
    text-decoration: none !important;
    border: 2px solid #0A2E5C !important;
    padding: 8px 24px !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
}

.current_issue .read_more:hover {
    background: #0A2E5C !important;
    color: var(--white) !important;
}

/* Section headings (for static pages like About, etc.) */
.pkp_structure_main .page h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    background: transparent;
    border-left: 4px solid #c68a4c;
    padding: 8px 18px;
    border-radius: 0;
    margin-top: 36px;
    margin-bottom: 20px;
}

/* Remove gold bullet icon from general page h2 */
.pkp_structure_main .page h2::before {
    display: none;
}

.pkp_structure_main .page h3 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 24px;
    margin-bottom: 12px;
}

.pkp_structure_main .page p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-main);
    margin-bottom: 16px;
}

/* Unordered list layouts in articles */
.pkp_structure_main .page ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.pkp_structure_main .page ul li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 0.94rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.pkp_structure_main .page ul li::before {
    content: '✺';
    position: absolute;
    left: 4px;
    color: var(--accent-color);
    font-size: 0.75rem;
    top: 9px;
}

/* ============================================================
   ARTICLE LISTING & TOC (TABLE OF CONTENTS)
   ============================================================ */
.page_index_journal .pkp_structure_main,
.page_issue .pkp_structure_main {
    background: transparent;
}

.obj_article_summary {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e5d5b7 !important; /* Elegant golden-divider separation line */
    border-radius: 0 !important;
    padding: 24px 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.obj_article_summary:hover {
    transform: none !important;
    box-shadow: none !important;
    background: rgba(197, 160, 89, 0.02) !important; /* Subtle golden glow background hover */
}

/* Remove bottom border from the last article in the listing to keep it clean */
.cmp_article_list li:last-child .obj_article_summary {
    border-bottom: none !important;
}

/* Reset article list items (override general page ul styling) */
.cmp_article_list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cmp_article_list li {
    padding: 0 !important;
    border: none !important;
}

.cmp_article_list li::before {
    display: none !important;
}

/* Article title inside listings */
.obj_article_summary .title {
    margin-top: 0;
    margin-bottom: 10px;
}

.obj_article_summary .title a {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #0A2E5C !important; /* Rich deep academic navy blue */
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}

.obj_article_summary .title a:hover {
    color: var(--accent-color) !important; /* Gold hover color */
}

/* Align Authors on Left and Page numbers on Right */
.obj_article_summary .meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 12px !important;
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.obj_article_summary .authors {
    font-family: var(--font-heading) !important;
    font-size: 0.95rem !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #666666 !important;
    margin-bottom: 0 !important;
}

.obj_article_summary .pages {
    font-size: 0.95rem !important;
    color: #666666 !important;
    font-weight: 500 !important;
}

/* Abstract in summary */
.obj_article_summary .abstract {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #55647c;
    border-top: 1px solid var(--card-border);
    padding-top: 14px;
    margin-top: 14px;
}

/* DOI Badge on Homepage Listings (Manual or via doiInSummary Plugin) */
.obj_article_summary .doi,
.doiInSummary {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Hide OJS default bold "DOI:" text inside doiInSummary since the icon represents it visually */
.doiInSummary strong {
    display: none !important;
}

.obj_article_summary .doi a,
.doiInSummary a {
    color: #c68a4c !important; /* Gold/orange link color matching the icon */
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

.obj_article_summary .doi a:hover,
.doiInSummary a:hover {
    color: #0A2E5C !important; /* Navy hover */
    text-decoration: underline !important;
}

/* ============================================================
   ARTICLE DETAIL PAGE & THREE-COLUMN ENHANCEMENTS
   ============================================================ */
/* Abstract Styling */
.obj_article_details .item.abstract {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 30px;
    box-shadow: var(--card-shadow);
    margin-bottom: 30px;
}

.obj_article_details .item.abstract .label {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 8px;
}

.obj_article_details .item.abstract p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-main);
}

/* Galley Links (Sleek Rounded Buttons for PDF/HTML) */
.obj_article_summary .galleys_links,
.obj_article_details .galleys_links {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.obj_article_summary .galleys_links .obj_galley_link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 18px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    background: #003366 !important; /* Premium Dark Navy matching screenshot */
    color: var(--white) !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.obj_article_summary .galleys_links .obj_galley_link:hover {
    background: #c68a4c !important; /* Academic Gold matching screenshot */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(198, 138, 76, 0.3) !important;
}

.obj_article_details .galleys_links .obj_galley_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 30px;
    text-decoration: none;
    background: var(--teal-accent);
    color: var(--white) !important;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.2);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.obj_article_details .galleys_links .obj_galley_link:hover {
    background: var(--primary-color);
    box-shadow: 0 4px 15px rgba(10, 25, 47, 0.3);
    transform: translateY(-2px);
}

/* Premium PDF Icon integration */
.obj_article_summary .galleys_links .obj_galley_link::before,
.obj_article_details .galleys_links .obj_galley_link::before {
    content: "\f1c1";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Metadata Badges Strip (DOI, Keywords, Citations in Abstract) */
.orcid_section,
.custom_doi_section,
.custom_keywords_section,
.custom_citations_section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 12px 20px;
    margin-bottom: 12px;
}

.orcid_box,
.doi_box,
.keywords_box,
.citations_box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--light-bg);
    border-left: 3px solid var(--teal-accent);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.82rem;
}

.orcid_section .value a,
.custom_doi_section .value a {
    color: var(--teal-accent);
    font-weight: 600;
    text-decoration: none;
}

.orcid_section .value a:hover,
.custom_doi_section .value a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* ============================================================
   MIDDLE ENTRY DETAILS PANEL (ACADEMIC SPECS CARD)
   ============================================================ */
.entry_details .item {
    border-bottom: 1px solid var(--card-border) !important;
    padding: 14px 12px !important; /* Content padding for perfect left-margin alignment */
    margin: 0 !important;
}

.entry_details .item:first-child {
    padding-top: 0 !important;
}

.entry_details .item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.entry_details .label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.entry_details .value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Published / Section Headers in Details Card */
.entry_details .item.published .label,
.entry_details .item.issue .label,
.entry_details .item.section .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 25, 47, 0.05);
    border-radius: 4px;
    padding: 3px 8px;
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
}

/* ============================================================
   PREMIUM SIDEBAR SYSTEM (GLASSMORPHISM WIDGETS)
   ============================================================ */
.pkp_block {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease;
}

.pkp_block:hover {
    box-shadow: var(--card-shadow-hover);
}

/* Elegant Dark Headers for Sidebar widgets — gold left border accent */
.pkp_block .title,
.pkp_block h2.title,
.pkp_block h3.title {
    background: #003366 !important;
    color: var(--white) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 20px !important;
    margin: 0 !important;
    border-bottom: none !important;
    border-left: 5px solid #c68a4c !important;
    border-radius: 8px 8px 0 0 !important;
    display: block !important;
}

.pkp_structure_sidebar .pkp_block ul {
    list-style: none !important;
    padding: 10px 20px !important;
    margin: 0 !important;
}

.pkp_structure_sidebar .pkp_block ul li {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.pkp_structure_sidebar .pkp_block ul li:last-child {
    border-bottom: none !important;
}

.pkp_structure_sidebar .pkp_block ul li a {
    color: var(--text-main) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease !important;
}

.pkp_structure_sidebar .pkp_block ul li a:hover {
    color: var(--teal-accent) !important;
    padding-left: 5px !important;
}

/* Clean Custom Arrow for sidebar list items */
.pkp_structure_sidebar .pkp_block ul li a::before {
    content: "➔";
    color: var(--accent-color);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.pkp_structure_sidebar .pkp_block ul li a:hover::before {
    transform: translateX(3px);
}

/* CTA "Make a Submission" Widget — Gold outlined on white, matching screenshot */
.pkp_block.block_make_submission {
    background: var(--white) !important;
    border: 1px solid var(--card-border) !important;
    text-align: center !important;
    padding: 24px 20px !important;
}

.pkp_block.block_make_submission .title {
    display: none !important;
}

.pkp_block.block_make_submission a {
    display: inline-block !important;
    color: #003366 !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 12px 28px !important;
    background: transparent !important;
    border: 2px solid #c68a4c !important;
    border-radius: 6px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

.pkp_block.block_make_submission a:hover {
    background: #c68a4c !important;
    color: var(--white) !important;
    box-shadow: 0 4px 15px rgba(198, 138, 76, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Remove icon for Submission button (clean design) */
.pkp_block.block_make_submission a::before {
    display: none !important;
}

/* ============================================================
   TOC SECTION DIVIDER & GENERAL LAYOUTS
   ============================================================ */
.obj_issue_toc .section {
    margin-bottom: 40px;
}

.obj_issue_toc .section > .title,
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc .section > h4 {
    display: flex !important;
    align-items: center !important;
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #888888 !important; /* Elegant gray matching screenshot */
    text-transform: capitalize !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.obj_issue_toc .section > .title::after,
.obj_issue_toc .section > h2::after,
.obj_issue_toc .section > h3::after,
.obj_issue_toc .section > h4::after {
    content: "" !important;
    flex: 1 !important;
    height: 0 !important;
    border-top: 1px dashed #c5c5c5 !important; /* Dotted/dashed line matching screenshot */
    background: transparent !important;
    margin-left: 15px !important;
}

/* Issue Cover Image styling */
.obj_issue_summary .cover img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.15);
    border: 1px solid var(--card-border);
    transition: transform 0.3s ease;
}

.obj_issue_summary .cover img:hover {
    transform: scale(1.02);
}

/* ============================================================
   PREMIUM ACADEMIC FOOTER
   ============================================================ */
.pkp_structure_footer_wrapper {
    background: var(--primary-color);
    color: rgba(255, 255, 255, 0.8);
    margin-top: 80px;
    border-top: 5px solid var(--accent-color);
}

.pkp_structure_footer {
    max-width: 1400px !important;
    width: 100%;
    margin: 0 auto !important;
    padding: 60px 32px 30px !important;
    box-sizing: border-box;
}

.pkp_footer_content {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.8;
}

.pkp_footer_content h3,
.pkp_footer_content h4 {
    font-family: var(--font-heading);
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}

.pkp_footer_content a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pkp_footer_content a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* Brand taglines & badges */
.pkp_brand_footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.pkp_brand_footer:hover {
    opacity: 0.85;
}

.pkp_brand_footer img {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* ============================================================
   DOI & ORCID CUSTOM ICON SIZE & ALIGNMENT
   ============================================================ */
/* Standard ORCID custom green icon styling */
img.orcid_logo,
.orcid_section img,
.orcid_box img,
.orcid a img,
a.orcid img {
    content: url('/public/orcid_logo.png') !important;
    height: 18px !important;
    width: auto !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin-right: 6px !important;
    transition: transform 0.2s ease-in-out;
}

/* Hide default theme ORCID raw SVG icons to prevent duplicate/unauthenticated outlines */
.orcid svg,
.orcid_icon {
    display: none !important;
}

/* Strip any default background boxes, paddings, or borders from ORCID wrapper & link */
.orcid,
.orcid a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Inject premium custom ORCID icon next to all plain-text ORCID links */
.orcid a::before {
    content: "\f8d2" !important; /* Font Awesome ORCID brand icon */
    font-family: "Font Awesome 6 Brands" !important;
    color: #A6CE39 !important; /* Official ORCID green */
    font-size: 1.15rem !important; /* Perfect size matching the text */
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Standard DOI custom orange icon styling */
img.doi_image_label,
.doi_image_label,
.pub_id.doi img,
.doi_box img,
.doi a img,
a.doi img,
.obj_article_summary .doi img {
    content: url('/public/doi_logo.png') !important;
    height: 18px !important;
    width: auto !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin-right: 6px !important;
    transition: transform 0.2s ease-in-out;
}

/* Inject your custom doi_logo.png next to all plain-text OJS DOI links */
.item.doi .value a::before,
.obj_article_summary .doi a::before,
.obj_article_details .doi .value a::before,
.custom_doi_section .value a::before,
.doiInSummary a::before,
.pub_id.doi .id a::before,
.pub_id.doi a::before,
.obj_issue_toc .pub_id.doi .id a::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background: url('/public/doi_logo.png') no-repeat center center / contain !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Micro-animations for a premium hover feel */
img.orcid_logo:hover,
.orcid_box img:hover,
img.doi_image_label:hover,
.doi_box img:hover,
.orcid a:hover::before,
.item.doi .value a:hover::before,
.obj_article_summary .doi a:hover::before,
.custom_doi_section .value a:hover::before,
.doiInSummary a:hover::before,
.pub_id.doi .id a:hover::before,
.pub_id.doi a:hover::before,
.obj_issue_toc .pub_id.doi .id a:hover::before {
    transform: scale(1.15) !important;
}

/* Align article detail sections in main entry closest to the left margin */
.obj_article_details .main_entry .item:not(.abstract) {
    padding-left: 0 !important;
}

/* Remove legacy default theme column borders that collide with the card layout */
.obj_article_details .main_entry {
    border-right: none !important;
}

.obj_article_details .entry_details {
    border-left: none !important;
}

/* Remove legacy absolute-positioned vertical border on the right of the main column */
.pkp_structure_main::after {
    content: none !important;
    display: none !important;
}