/* ==========================================================================
   International Journal for Research in Gynecologic Oncology (IJRGO)
   About & Inner Custom Pages Modern Stylesheet
   Strictly scoped to inner pages: .ijrgo-about-page, .page_about, .ijrgo-custom-content-page
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* Reset and full-width layout for all inner dynamic and custom pages */
body.pkp_page_about,
body.pkp_page_pages,
body.pkp_page_information,
body.pkp_page_contact,
body.pkp_page_issue,
body.pkp_page_search,
body.pkp_page_submissions,
body.pkp_page_announcement {
    background-color: #fbfbfe !important;
}

body:not(.pkp_page_index) .pkp_structure_content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    border: none !important;
}

body:not(.pkp_page_index) .pkp_structure_main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    border: none !important;
}

body:not(.pkp_page_index) .pkp_structure_main:before,
body:not(.pkp_page_index) .pkp_structure_main:after {
    display: none !important;
    content: none !important;
}

/* Hide duplicate outer sidebar on pages that have their own custom inline layout (.ijrgo-about-page, .pkp_page_about) */
body.pkp_page_about .pkp_structure_sidebar,
body:has(.ijrgo-about-page) .pkp_structure_sidebar,
.ijrgo-about-page~.pkp_structure_sidebar,
.pkp_structure_content:has(.ijrgo-about-page)>.pkp_structure_sidebar {
    display: none !important;
}

/* Hide legacy breadcrumb and duplicate h1 if rendered outside banner */
.ijrgo-page-banner~.page>h1:first-of-type,
.ijrgo-page-banner~.page>.cmp_breadcrumbs {
    display: none !important;
}

.ijrgo-about-page,
body:not(.pkp_page_index) .page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #24292f;
    margin: 0;
    padding: 0;
    width: 100%;
}

.ijrgo-about-page *,
.ijrgo-about-page *::before,
.ijrgo-about-page *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   1. TOP BANNER / HERO BANNER (Pink Medical Anatomy / Flowers)
   Full-width panoramic background across viewport or clean hero in container
   ========================================================================== */
.ijrgo-page-banner {
    position: relative;
    background: #fff0f6 url('../images/ijrgo/Pink%20Healthcare%20Awareness%20Banner.webp') no-repeat center right / cover;
    border-bottom: 1px solid #fce4ec;
    padding: 38px 0 40px 0;
    overflow: hidden;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
}

/* On custom standalone full-width pages (.ijrgo-about-page, .page_about, .page_privacy, .page_editorial_team) where banner is at the top of the body */
.ijrgo-about-page>.ijrgo-page-banner,
.pkp_page_about .ijrgo-page-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 44px 0 46px 0;
    border-radius: 0 !important;
}

/* On standard dynamic OJS pages with sidebars (issue, issueArchive, search, contact, submissions, etc.)
   where breadcrumbs banner is rendered inside .pkp_structure_main:
   Render as a hero card with rounded corners that aligns with the left main content card and sidebar! */
body:not(.pkp_page_index) .pkp_structure_main .ijrgo-page-banner,
body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .ijrgo-page-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
    border: 1px solid #fce4ec !important;
    box-shadow: 0 4px 20px rgba(216, 27, 96, 0.05) !important;
    padding: 28px 28px 30px 28px !important;
}

/* Semi-transparent soft pink/white gradient across full width to keep left text perfectly legible */
.ijrgo-page-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 245, 250, 0.45) 75%, rgba(255, 245, 250, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.ijrgo-page-banner-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

body:not(.pkp_page_index) .pkp_structure_main .ijrgo-page-banner-container,
body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .ijrgo-page-banner-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ijrgo-page-banner-text {
    max-width: 650px;
}

.ijrgo-page-banner-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #1e2640;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.ijrgo-page-banner-title .ijrgo-title-highlight {
    color: #d81b60;
    font-style: italic;
}

/* Breadcrumbs inside banner */
.ijrgo-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
}

.ijrgo-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ijrgo-breadcrumbs a {
    color: #e91e63 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

.ijrgo-breadcrumbs a:hover {
    color: #ad1457 !important;
    text-decoration: underline !important;
}

.ijrgo-breadcrumb-sep {
    color: #64748b;
    font-size: 12px;
}

.ijrgo-breadcrumb-current {
    color: #64748b;
    font-weight: 500;
}

/* ==========================================================================
   2. MAIN TWO-COLUMN LAYOUT
   ========================================================================== */
.ijrgo-about-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0PX 0px 70px 0px;
}

.ijrgo-about-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
}

/* MAIN ABOUT CARD */
.ijrgo-about-main-card {
    flex: 1 1 72%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f1e2e7;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.03);
    padding: 34px 38px;
    min-width: 0;
    /* Prevents overflow in flex children */
}

/* Pill Badge at Top of Card ("About the Journal") */
.ijrgo-about-pill-badge {
    display: inline-flex;
    align-items: center;
    background-color: #fff0f5;
    color: #d81b60;
    border: 1px solid #f8bbd0;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 14px;
    margin-bottom: 22px;
    letter-spacing: -0.1px;
}

/* Content Area - Beautiful typography for Dynamic OJS Text */
.ijrgo-about-content {
    font-size: 14.5px;
    line-height: 1.8;
    color: #374151;
}

.ijrgo-about-content p {
    margin: 0 0 18px 0;
}

.ijrgo-about-content p:last-child {
    margin-bottom: 0;
}

.ijrgo-about-content strong,
.ijrgo-about-content b {
    color: #111827;
    font-weight: 700;
}

.ijrgo-about-content a {
    color: #d81b60;
    text-decoration: underline;
    font-weight: 500;
}

.ijrgo-about-content a:hover {
    color: #ad1457;
}

.ijrgo-about-content h2,
.ijrgo-about-content h3,
.ijrgo-about-content h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: #1a233a;
    font-weight: 700;
    margin: 28px 0 14px 0;
}

.ijrgo-about-content h2 {
    font-size: 24px;
}

.ijrgo-about-content h3 {
    font-size: 20px;
}

.ijrgo-about-content h4 {
    font-size: 17px;
}

/* Styled callout box if present in content */
.ijrgo-about-content blockquote {
    border-left: 4px solid #f472b6;
    background: #fff8fa;
    padding: 14px 20px;
    border-radius: 0 10px 10px 0;
    margin: 22px 0;
    color: #374151;
    font-size: 14px;
}

/* Styled horizontal divider inside content */
.ijrgo-about-content hr {
    border: none;
    border-top: 1px solid #f8bbd0;
    margin: 24px 0;
}

/* Styled Lists inside content */
.ijrgo-about-content ul,
.ijrgo-about-content ol {
    margin: 14px 0 20px 0;
    padding-left: 20px;
}

.ijrgo-about-content li {
    margin-bottom: 8px;
    line-height: 1.7;
    color: #374151;
}

.ijrgo-about-content li::marker {
    color: #e91e63;
}

.ijrgo-about-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* ==========================================================================
   3. RIGHT SIDEBAR 3-CARD STACK
   ========================================================================== */
.ijrgo-about-sidebar {
    flex: 0 0 310px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --------------------------------------------------------------------------
   Card 1: Horizontal Pink "Make a Submission" Pill Card
   -------------------------------------------------------------------------- */
.ijrgo-side-submit-bar-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, #d81b60 0%, #e91e63 100%);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(216, 27, 96, 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ijrgo-side-submit-bar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(216, 27, 96, 0.38);
    background: linear-gradient(90deg, #c2185b 0%, #d81b60 100%);
}

.ijrgo-side-submit-bar-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.ijrgo-side-submit-bar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ijrgo-side-submit-bar-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
}

.ijrgo-side-submit-bar-arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.ijrgo-side-submit-bar-card:hover .ijrgo-side-submit-bar-arrow {
    transform: translateX(3px);
}

.ijrgo-side-submit-bar-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 3px;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Card 2: Pink Theme "Information" Card with deep links
   -------------------------------------------------------------------------- */
.ijrgo-side-info-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #fce4ec;
    box-shadow: 0 4px 18px rgba(216, 27, 96, 0.05);
    padding: 20px 20px 14px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ijrgo-side-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(216, 27, 96, 0.08);
}

.ijrgo-side-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ijrgo-side-info-icon-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fce4ec;
    color: #d81b60;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ijrgo-side-info-heading {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1e2640;
    margin: 0;
}

.ijrgo-side-info-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ijrgo-side-info-item {
    border-top: 1px solid #fdf2f8;
}

.ijrgo-side-info-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.ijrgo-side-item-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ijrgo-side-item-icon {
    color: #d81b60;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ijrgo-side-item-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    transition: color 0.2s ease;
}

.ijrgo-side-item-chevron {
    color: #f472b6;
    transition: transform 0.2s ease, color 0.2s ease;
}

.ijrgo-side-info-item a:hover .ijrgo-side-item-label {
    color: #d81b60;
}

.ijrgo-side-info-item a:hover .ijrgo-side-item-chevron {
    color: #c2185b;
    transform: translateX(3px);
}

.ijrgo-side-info-item a:hover .ijrgo-side-item-icon {
    transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Card 3: Women's Health Cancer Awareness Card (matching mockup photo & typography)
   -------------------------------------------------------------------------- */
.ijrgo-side-poster-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff url('../images/ijrgo/about.webp') no-repeat right bottom / cover;
    border: 1px solid #f8bbd0;
    box-shadow: 0 4px 18px rgba(216, 27, 96, 0.08);
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ijrgo-side-poster-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(216, 27, 96, 0.14);
}

.ijrgo-side-poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 250, 252, 0.7) 45%, rgba(255, 240, 246, 0.95) 85%, #fff0f6 100%);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.ijrgo-side-poster-content {
    position: relative;
    z-index: 2;
    max-width: 175px;
}

.ijrgo-poster-subtitle {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 2px;
}

.ijrgo-poster-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: #d81b60;
    margin: 0 0 10px 0;
    line-height: 1.15;
}

.ijrgo-poster-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: #4b5563;
    margin: 0;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 991px) {
    .ijrgo-about-layout {
        flex-direction: column;
        gap: 24px;
    }

    .ijrgo-about-main-card {
        width: 100%;
        padding: 28px 22px;
    }

    .ijrgo-about-sidebar {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ijrgo-side-submit-bar-card,
    .ijrgo-side-info-card,
    .ijrgo-side-poster-card {
        flex: 1 1 280px;
    }

    .ijrgo-page-banner {
        background-position: center right;
        padding: 34px 0 36px 0;
    }
}

@media (max-width: 768px) {
    .ijrgo-about-main-card {
        padding: 22px 16px;
    }

    .ijrgo-page-banner-title {
        font-size: 28px;
    }

    .ijrgo-page-banner {
        padding: 26px 0;
    }

    .ijrgo-about-sidebar {
        flex-direction: column;
    }

    .ijrgo-side-submit-bar-card,
    .ijrgo-side-info-card,
    .ijrgo-side-poster-card {
        width: 100%;
        flex: 1 1 auto;
    }
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
    margin: 0rem;
}

/* ==========================================================================
   4. UNIVERSAL DYNAMIC OJS PAGES STYLING
   Ensures all dynamic pages (Contact, Issue, Search, Submissions, Information,
   Archives, Editorial Team) adopt the identical clean white card container,
   typography, and pink accents as the Privacy Statement reference.
   ========================================================================== */
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page) {
    max-width: 100%;
    margin: 0px auto 70px auto;
    padding: 0 0px;
    box-sizing: border-box;
}

/* Card frame for content pages that don't have custom .ijrgo-about-layout */
body:not(.pkp_page_index) .page:not(.ijrgo-about-page)>h1,
body:not(.pkp_page_index) .page:not(.ijrgo-about-page)>h2 {
    display: none !important;
    /* Title is rendered in the Pink Banner */
}

/* Standalone inner pages (e.g. Archives, Search, Contact, Information, etc.)
   Keep .page clean so the banner is completely free at top, and wrap content elements cleanly into cards */
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* For pages where content isn't wrapped in .description or other sub-containers (like direct text),
   or for sub-containers themselves, apply the clean white card styling */
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.description,
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.cmp_notification,
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.submission_checklist,
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.author_guidelines,
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.obj_issue_toc,
body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.cmp_form {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f1e2e7;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.03);
    padding: 34px 38px;
    margin-bottom: 24px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
}

body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.contact_section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
}

/* If a page has direct content not in a sub-tag (like navigationMenuItem pages) */
body.pkp_page_pages:not(.pkp_page_about) .pkp_structure_main>.page {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f1e2e7 !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.03) !important;
    padding: 34px 38px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #374151 !important;
}

body:not(.pkp_page_index) .page:not(.ijrgo-about-page)>.obj_issue_toc,
body:not(.pkp_page_index) .page:not(.ijrgo-about-page)>.cmp_form {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f1e2e7;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.03);
    padding: 34px 38px;
    margin-bottom: 24px;
    box-sizing: border-box;
    font-size: 14.5px;
    line-height: 1.8;
    color: #374151;
}

body:not(.pkp_page_index) .page:not(.ijrgo-about-page)>.issues_archive {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 24px;
}

/* Issue list items and summaries - Clean Inline Row Cards */
.issues_archive {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
}

.issues_archive>li {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #f1e2e7 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
    padding: 22px 26px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.issues_archive>li:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(216, 27, 96, 0.08) !important;
    border-color: #f8bbd0 !important;
}

.issues_archive .obj_issue_summary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
}

.issues_archive .obj_issue_summary .cover {
    flex-shrink: 0;
    max-width: 90px;
}

.issues_archive .obj_issue_summary .cover img {
    max-width: 90px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.issues_archive .obj_issue_summary h2 {
    margin: 0 !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    flex: 1 1 auto !important;
}

.issues_archive .obj_issue_summary h2 a.title {
    color: #1e293b !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

.issues_archive .obj_issue_summary h2 a.title:hover {
    color: #d81b60 !important;
}

.issues_archive .obj_issue_summary .series {
    display: inline-block !important;
    font-size: 13px !important;
    color: #9d174d !important;
    background: #fdf2f8 !important;
    border: 1px solid #fbcfe8 !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    margin-top: 8px !important;
    letter-spacing: 0.2px !important;
}

.issues_archive .obj_issue_summary .description {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
}

/* Arrow indicator to emphasize inline row item */
.issues_archive .obj_issue_summary::after {
    content: "→" !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #f472b6 !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.issues_archive>li:hover .obj_issue_summary::after {
    color: #d81b60 !important;
    transform: translateX(4px) !important;
}

/* Issue Table of Contents & Article Details */
.obj_issue_toc {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f1e2e7;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.03);
    padding: 34px 38px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.obj_issue_toc .heading {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fce4ec;
}

.obj_issue_toc .heading .published {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fdf2f8;
    color: #9d174d;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
    border: 1px solid #fbcfe8;
}

.obj_issue_toc .heading .published .label {
    font-weight: 700;
    color: #831843;
}

.obj_issue_toc .heading .description {
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
    margin-top: 12px;
}

.obj_issue_toc .sections .section {
    margin-bottom: 32px;
}

.obj_issue_toc .sections .section:last-child {
    margin-bottom: 0;
}

.obj_issue_toc .sections .section>h2,
.obj_issue_toc .sections .section>h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #d81b60 !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 10px;
    border-bottom: 2px solid #fce4ec;
    display: flex;
    align-items: center;
    gap: 10px;
}

.obj_issue_toc .sections .section>h2::before,
.obj_issue_toc .sections .section>h3::before {
    content: "";
    width: 4px;
    height: 18px;
    background: #d81b60;
    border-radius: 2px;
    display: inline-block;
}

.obj_issue_toc .cmp_article_list.articles {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.obj_issue_toc .cmp_article_list.articles>li {
    padding: 0 !important;
    margin: 0 !important;
}

.obj_article_summary {
    background: #fffbfa;
    border: 1px solid #ffe4e6;
    border-radius: 12px;
    padding: 22px 24px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.obj_article_summary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 27, 96, 0.08);
    border-color: #f8bbd0;
}

.obj_article_summary .title {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    margin: 0 0 10px 0 !important;
}

.obj_article_summary .title a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.obj_article_summary .title a:hover {
    color: #d81b60 !important;
}

.obj_article_summary .meta {
    font-size: 13.5px;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.obj_article_summary .meta .authors {
    color: #475569;
    font-weight: 500;
}

.obj_article_summary .galleys_links {
    list-style: none;
    padding: 0;
    margin: 14px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.obj_article_summary .galleys_links a.obj_galley_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, #d81b60 0%, #e91e63 100%);
    color: #ffffff !important;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(216, 27, 96, 0.25);
    transition: all 0.2s ease;
}

.obj_article_summary .galleys_links a.obj_galley_link:hover {
    background: linear-gradient(90deg, #c2185b 0%, #d81b60 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(216, 27, 96, 0.35);
}

/* Contact information cards - 2 column layout matching reference UI */
.contact_section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.contact_section .address {
    width: 100%;
    margin-bottom: 12px;
    color: #475569;
    font-size: 14.5px;
}

.contact_section .contact {
    flex: 1 1 calc(50% - 10px);
    min-width: 260px;
    background: #fffbfa;
    border: 1px solid #ffe4e6;
    border-radius: 14px;
    padding: 24px 26px;
    box-sizing: border-box;
    margin-bottom: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact_section .contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 27, 96, 0.07);
}

.contact_section h3 {
    color: #d81b60;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.contact_section .contact .name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

.contact_section .contact .email a,
.contact_section .contact a {
    color: #0284c7;
    text-decoration: underline;
    font-weight: 500;
    word-break: break-all;
}

.contact_section .contact .email a:hover,
.contact_section .contact a:hover {
    color: #d81b60;
}

/* Search page inputs & buttons */
.cmp_form .search_input input[type="text"],
.cmp_form input[type="text"],
.cmp_form select {
    border: 1px solid #f8bbd0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.cmp_form .search_input input[type="text"]:focus,
.cmp_form input[type="text"]:focus,
.cmp_form select:focus {
    border-color: #d81b60;
    box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.12);
}

.cmp_form button,
.cmp_form input[type="submit"] {
    background: linear-gradient(90deg, #d81b60 0%, #e91e63 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(216, 27, 96, 0.25);
    transition: all 0.2s;
}

.cmp_form button:hover,
.cmp_form input[type="submit"]:hover {
    background: linear-gradient(90deg, #c2185b 0%, #d81b60 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(216, 27, 96, 0.35);
}

/* ==========================================================================
   5. DEFAULT OJS SIDEBAR STYLING & 2-COLUMN LEFT / RIGHT LAYOUT
   Guarantees all pages with sidebar render the main content card on the left
   and the sidebar cards (Make a Submission & Information) on the right.
   ========================================================================== */
body:not(.pkp_page_index) .pkp_structure_content.has_sidebar,
body:not(.pkp_page_index) .pkp_structure_content:has(.pkp_structure_sidebar) {
    max-width: 1240px !important;
    margin: 28px auto 60px auto !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    box-sizing: border-box !important;
    float: none !important;
}

body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_main,
body:not(.pkp_page_index) .pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_sidebar,
body:not(.pkp_page_index) .pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 2 !important;
}

body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_main,
body:not(.pkp_page_index) .pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_main {
    order: 1 !important;
}

/* Block 1: "Make a Submission" Default Block */
.pkp_structure_sidebar .block_make_submission {
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_structure_sidebar .block_make_submission .content {
    padding: 0 !important;
}

.pkp_structure_sidebar .block_make_submission_link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    background: linear-gradient(90deg, #d81b60 0%, #e91e63 100%) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(216, 27, 96, 0.28) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    position: relative !important;
}

.pkp_structure_sidebar .block_make_submission_link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(216, 27, 96, 0.38) !important;
    background: linear-gradient(90deg, #c2185b 0%, #d81b60 100%) !important;
    color: #ffffff !important;
}

.pkp_structure_sidebar .block_make_submission_link::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'%3E%3C/line%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center center;
    flex-shrink: 0;
    display: inline-block;
}

.pkp_structure_sidebar .block_make_submission_link::after {
    content: "→";
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.pkp_structure_sidebar .block_make_submission_link:hover::after {
    transform: translateX(4px);
}

/* Block 2: "Information" Default Block */
.pkp_structure_sidebar .block_information {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #fce4ec !important;
    box-shadow: 0 4px 18px rgba(216, 27, 96, 0.05) !important;
    padding: 20px 20px 14px 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.pkp_structure_sidebar .block_information:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(216, 27, 96, 0.08) !important;
}

.pkp_structure_sidebar .block_information .title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e2640 !important;
}

.pkp_structure_sidebar .block_information .title::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fce4ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23d81b60'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") no-repeat center center;
    flex-shrink: 0;
    display: inline-block;
}

.pkp_structure_sidebar .block_information ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.pkp_structure_sidebar .block_information ul li {
    border-top: 1px solid #fdf2f8 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_structure_sidebar .block_information ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 2px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    transition: color 0.2s ease !important;
}

.pkp_structure_sidebar .block_information ul li a::after {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pkp_structure_sidebar .block_information ul li a:hover {
    color: #d81b60 !important;
}

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

/* Any other generic block styled cleanly */
.pkp_structure_sidebar .pkp_block:not(.block_make_submission):not(.block_information) {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #fce4ec !important;
    box-shadow: 0 4px 18px rgba(216, 27, 96, 0.05) !important;
    padding: 20px !important;
}

@media (max-width: 991px) {
    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar,
    body:not(.pkp_page_index) .pkp_structure_content:has(.pkp_structure_sidebar) {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 16px !important;
        margin: 16px auto 40px auto !important;
    }

    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_main,
    body:not(.pkp_page_index) .pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_main,
    body:not(.pkp_page_index) .pkp_structure_content.has_sidebar .pkp_structure_sidebar,
    body:not(.pkp_page_index) .pkp_structure_content:has(.pkp_structure_sidebar) .pkp_structure_sidebar {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .contact_section .contact {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .ijrgo-page-banner {
        padding: 24px 0 26px 0 !important;
        margin-bottom: 18px !important;
        background-position: 70% center !important;
    }

    .ijrgo-page-banner-title {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .ijrgo-breadcrumbs ol {
        font-size: 12px !important;
        gap: 6px !important;
    }

    body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page) {
        padding: 0 !important;
        border-radius: 12px !important;
    }

    body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.description,
    body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.cmp_notification,
    body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.submission_checklist,
    body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.author_guidelines,
    body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.obj_issue_toc,
    body:not(.pkp_page_index) .pkp_structure_main>.page:not(.ijrgo-about-page)>.cmp_form,
    body.pkp_page_pages:not(.pkp_page_about) .pkp_structure_main>.page {
        padding: 22px 18px !important;
        border-radius: 12px !important;
    }

    .contact_section {
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .contact_section .contact {
        padding: 20px 18px !important;
        border-radius: 12px !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .issues_archive>li {
        padding: 18px 16px !important;
    }

    .issues_archive .obj_issue_summary {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .issues_archive .obj_issue_summary::after {
        display: none !important;
    }
}