/* Accent colours for the certificate verification page, from this journal's
   own palette. The text colour on the accent is picked for WCAG AA contrast. */
.pkp_page_verify {
    --cert-accent: #c89b3c;
    --cert-accent-dark: #8f6c24;
    --cert-on-accent: #1a1a1a;
    --cert-tint: #fdf8ee;
    --cert-stripe: #faf6ed;
    --cert-line: #e8ddc4;
}

/* ==========================================================================
   Nexora: certificate verification page (<journal>/verify)
   Added 2026-09-28. Keep this block if this stylesheet is ever re-uploaded
   from a local copy, or the /verify page loses its design.

   Everything is scoped to body.pkp_page_verify, the class OJS derives from the
   page's path, so no other page on the journal is affected. The journal's
   accent colours are declared in the small block immediately above this one.

   The styling keys off the page's structure (h3 + table), never off classes in
   the content, so tables the journal manager adds later are styled the same
   way without them having to do anything. !important appears only on the table
   cells, to override the inline font and colour attributes that come along
   when rows are pasted in from a spreadsheet.
   ========================================================================== */

.pkp_page_verify .page {
    max-width: 62rem;
}

/* --- Title ---------------------------------------------------------------- */

.pkp_page_verify .page > h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.pkp_page_verify .page > h2::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: 0.8rem;
    border-radius: 2px;
    background: var(--cert-accent);
}

.pkp_page_verify .page > h2 + p {
    margin: 1.25rem 0 2rem;
    font-size: 1.08rem;
    line-height: 1.65;
    color: #3f3f46;
}

/* --- Section headings ----------------------------------------------------- */

.pkp_page_verify .page h3 {
    margin: 2.5rem 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cert-line);
    color: var(--cert-accent-dark);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- The "how to check a certificate" steps ------------------------------- */

.pkp_page_verify .page ol {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.25rem 1.1rem 2.9rem;
    border-left: 4px solid var(--cert-accent);
    border-radius: 0 6px 6px 0;
    background: var(--cert-tint);
}

.pkp_page_verify .page ol li {
    margin: 0.4rem 0;
    line-height: 1.6;
}

/* The paragraph that follows the steps is the "what counts as genuine" note. */
.pkp_page_verify .page ol + p {
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--cert-line);
    border-radius: 6px;
    background: #fff;
    font-size: 0.97rem;
    line-height: 1.6;
}

/* --- The certificate tables ----------------------------------------------- */

.pkp_page_verify .page table {
    width: 100% !important;
    margin: 0 0 1rem;
    border: 1px solid var(--cert-line) !important;
    border-collapse: collapse !important;
    background: #fff;
    font-size: 0.95rem;
}

/* Neutralise whatever formatting arrives with rows pasted from a spreadsheet. */
.pkp_page_verify .page table th,
.pkp_page_verify .page table td {
    width: auto !important;
    height: auto !important;
    padding: 0.65rem 0.9rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cert-line) !important;
    background-color: transparent !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-align: left !important;
    vertical-align: top !important;
}

.pkp_page_verify .page table thead th {
    background-color: var(--cert-accent) !important;
    color: var(--cert-on-accent) !important;
    border-bottom: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.pkp_page_verify .page table tbody tr:nth-child(even) td {
    background-color: var(--cert-stripe) !important;
}

.pkp_page_verify .page table tbody tr:hover td {
    background-color: var(--cert-tint) !important;
}

.pkp_page_verify .page table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.pkp_page_verify .page table tbody td:first-child {
    font-weight: 500;
}

/* Certificate IDs are compared character by character, so give them a
   monospace face. This assumes the documented column order:
   Name, Certificate ID, Date Issued. */
.pkp_page_verify .page table tbody td:nth-child(2) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pkp_page_verify .page table tbody td:last-child {
    color: #52525b !important;
    white-space: nowrap;
}

/* --- Last updated --------------------------------------------------------- */

.pkp_page_verify .page > p:last-child {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cert-line);
    color: #6b7280;
    font-size: 0.875rem;
}

/* --- Wide screens --------------------------------------------------------- */

@media (min-width: 641px) {
    /* Lists can run to hundreds of rows, so keep the column labels in view
       while scrolling. Ignored where an ancestor clips overflow. */
    .pkp_page_verify .page table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* --- Phones (most holders arrive here from a QR code) --------------------- */

@media (max-width: 640px) {
    .pkp_page_verify .page > h2 {
        font-size: 1.6rem;
    }

    .pkp_page_verify .page > h2 + p {
        font-size: 1rem;
    }

    /* Let a wide table scroll sideways rather than squeezing the columns. */
    .pkp_page_verify .page table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pkp_page_verify .page table th,
    .pkp_page_verify .page table td {
        padding: 0.55rem 0.7rem !important;
    }
}
h1.page_title {
    display: none !important;
}

/* Force the page title to display ONLY on the article page */
.page_article h1.page_title {
  display: block !important;
}

.homepage_about h2 {
    display: none !important;
}


/* =========================================
   OJS HEADER / NAVBAR REDESIGN (SAFE VERSION)
   ========================================= */

/* 1. Set the main header background to Gold globally (Desktop & Mobile) */
.pkp_structure_head {
    background-color: #C89B3C !important;
    border-bottom: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* 2. Strip the default OJS blue background from the inner row */
.pkp_navigation_primary_row,
.pkp_site_nav_menu {
    background-color: transparent !important;
    background: none !important;
}

.pkp_page_index .additional_content {

border-top: none;

}

/* ===== DIAGNOSTIC: DISABLED -- NAVBAR FLEXBOX (top nav layout)
   Delete the /* two lines up and the closing */ a few lines
   below to re-enable this section. Inline comments inside this
   block were stripped so the disable-wrapper doesn't break. ===== */


@media (min-width: 992px) {

    
    .pkp_head_wrapper::before,
    .pkp_head_wrapper::after,
    .pkp_site_nav_menu::before,
    .pkp_site_nav_menu::after,
    .pkp_navigation_primary_row::before,
    .pkp_navigation_primary_row::after,
    .pkp_navigation_primary_wrapper::before,
    .pkp_navigation_primary_wrapper::after {
        display: none !important;
        content: none !important;
    }

    
    .pkp_head_wrapper {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 5% !important; 
    }

    
    .pkp_site_name_wrapper {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    
    .pkp_site_name img {
        display: block !important;
        height: 44px !important;
        width: auto !important;
        max-width: none !important;
    }

    
    .pkp_site_nav_toggle {
        display: none !important;
    }

    
    .pkp_site_nav_menu {
        float: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-grow: 1 !important;
        margin: 0 !important;
    }

    
    .pkp_navigation_primary_row {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }

    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary,
    .pkp_navigation_search_wrapper,
    .pkp_navigation_user_wrapper,
    .pkp_navigation_user {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        max-width: none !important;
        width: auto !important;
    }

    
    .pkp_navigation_primary > li > a,
    .pkp_navigation_user > li > a,
    .pkp_navigation_search_wrapper a {
        color: #ffffff !important;
        font-family: 'Inter', sans-serif !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        padding: 15px 18px !important;
        text-decoration: none !important;
        display: block !important;
        transition: color 0.3s ease, opacity 0.3s ease !important;
    }

    
    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus-visible,
    .pkp_navigation_search_wrapper a:hover,
    .pkp_navigation_search_wrapper a:focus-visible,
    .pkp_navigation_user > li:not(:last-child) > a:hover,
    .pkp_navigation_user > li:not(:last-child) > a:focus-visible {
        color: #1a1a1a !important;
    }

    
    .pkp_navigation_primary,
    .pkp_navigation_user {
        list-style: none !important;
    }
    .pkp_navigation_primary > li,
    .pkp_navigation_user > li {
        list-style: none !important;
    }

    
    .pkp_navigation_user_wrapper {
        margin-left: auto !important;
    }
    
    .pkp_navigation_user {
        gap: 15px !important;
    }

    
    .pkp_navigation_user > li:last-child > a {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        padding: 10px 24px !important;
        border-radius: 4px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: background-color 0.3s ease !important;
    }
    
    .pkp_navigation_user > li:last-child > a:hover {
        background-color: #333333 !important;
    }

    
    .pkp_navigation_primary ul, 
    .pkp_navigation_user ul {
        background-color: #ffffff !important;
        border: 1px solid #eaeaea !important;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary ul a, 
    .pkp_navigation_user ul a {
        color: #1a1a1a !important; 
        font-size: 0.9rem !important;
        padding: 12px 20px !important;
    }

    .pkp_navigation_primary ul a:hover, 
    .pkp_navigation_user ul a:hover {
        background-color: #fafafa !important;
        color: #C89B3C !important; 
    }
}


.pkp_structure_content {
padding-top: 0px;
}

/* =========================================
   REABMS INTERACTIVE HOVER STATES
   ========================================= */

/* Smooth animation setup */
.reabms-card, 
.reabms-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Card Hover: Slight lift and elegant shadow */
.reabms-card:hover {
    transform: translateY(-4px) !important;
    background-color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06) !important;
    border-color: #d1d1d1 !important;
}

/* Button Hover: Flips to Gold accent with subtle glow */
.reabms-btn:hover,
.reabms-btn:focus-visible {
    background-color: #C89B3C !important;
    border-color: #C89B3C !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(200, 155, 60, 0.25) !important;
    cursor: pointer !important;
}

/* Button Active/Click State */
.reabms-btn:active {
    transform: translateY(1px) !important;
    background-color: #a37d2e !important;
    box-shadow: none !important;
}

/* =========================================
   REABMS INTERACTIVE HOVER STATES (Submissions)
   ========================================= */

/* Ensure smooth transitions for all new elements */
.reabms-check-row,
.reabms-btn-outline {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Outline Button Hover */
.reabms-btn-outline:hover,
.reabms-btn-outline:focus-visible {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    cursor: pointer !important;
}
.reabms-btn-outline:active {
    transform: translateY(1px) !important;
}

/* Checklist Row Hover Effect */
.reabms-check-row:hover {
    background-color: #ffffff !important;
    border-color: #C89B3C !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04) !important;
    transform: translateX(4px) !important; /* Slight nudge to the right to indicate interactivity */
}

/* Make the custom checkbox inside the row glow slightly on hover */
.reabms-check-row:hover > div:first-child {
    background-color: rgba(200, 155, 60, 0.1) !important;
}

/* Author Guidelines Row Hover Effect */
.reabms-list-row {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.reabms-list-row:hover {
    background-color: #ffffff !important;
    border-color: #C89B3C !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04) !important;
    transform: translateX(4px) !important; /* Gentle nudge right */
}

/* Fix for the Copyright Card (Keeps it dark on hover) */
.reabms-card-dark {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.reabms-card-dark:hover {
    transform: translateY(-4px) !important;
    background-color: #222222 !important; /* Subtle lighter charcoal, NOT white */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
    border-color: #333333 !important;
}

/* =========================================
   REABMS INTERACTIVE HOVER STATES (Policies)
   ========================================= */

/* Policy Link Cards */
.reabms-policy-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Reverse colors on hover: Dark BG, keep gold border */
.reabms-policy-card:hover {
    background-color: #1a1a1a !important; 
    border-color: #1a1a1a !important;
    border-left-color: #C89B3C !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-4px) !important; /* Gentle lift up */
}

/* Flip the policy title text to Gold */
.reabms-policy-card:hover > span:first-child {
    color: #C89B3C !important;
    transition: color 0.3s ease;
}

/* Adds a slight rightward push to the arrow on hover for extra polish */
.reabms-policy-card:hover > span:last-child {
    transform: translateX(4px);
    transition: transform 0.3s ease;
}

/* ===== DIAGNOSTIC: DISABLED -- FULL-WIDTH LAYOUT & 3/4 COLUMN SPLIT (main/sidebar width split -- MOST LIKELY CULPRIT, test disabling this first)
   Delete the /* two lines up and the closing */ a few lines
   below to re-enable this section. Inline comments inside this
   block were stripped so the disable-wrapper doesn't break. ===== */




.pkp_structure_content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 5% !important; 
    border: none !important;  
}


@media (min-width: 992px) {
    .pkp_structure_content {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 40px !important; 
    }
    
    
    .pkp_structure_main {
        width: 75% !important;
        float: none !important; 
    }
    
    
    .pkp_structure_sidebar {
        width: 25% !important;
        float: none !important;
    }
    .pkp_page_index .homepage_image {
	margin-top: 30px;
}
.pkp_page_index .homepage_image img {
padding-inline: 30px;
}



/* =========================================
   REABMS SIDEBAR INTERACTIVE STATES
   ========================================= */

/* Subscribe Button Hover */
.reabms-sidebar-btn-solid {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.reabms-sidebar-btn-solid:hover {
    background-color: #C89B3C !important;
    border-color: #C89B3C !important;
    color: #ffffff !important;
}

/* Sidebar Navigation Buttons Hover */
.reabms-sidebar-btn-outline {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.reabms-sidebar-btn-outline:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
    transform: translateX(4px) !important; /* Gentle nudge to the right */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Input focus state for the email field */
input[type="email"]:focus {
    border-color: #C89B3C !important;
    box-shadow: 0 0 0 1px #C89B3C !important;
}

/* =========================================
   REABMS FOOTER LINK HOVER
   ========================================= */

.reabms-footer-link {
    transition: color 0.3s ease, border-color 0.3s ease !important;
}

.reabms-footer-link:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.pkp_brand_footer {
    display: none;
}

.pkp_footer_content {
	padding: 0;
	
}

/* ===== DIAGNOSTIC: DISABLED -- FOOTER FULL-WIDTH OVERRIDE
   Delete the /* two lines up and the closing */ a few lines
   below to re-enable this section. Inline comments inside this
   block were stripped so the disable-wrapper doesn't break. ===== */




.pkp_structure_footer_wrapper {
    background-color: #1a1a1a !important; 
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}


.pkp_structure_footer {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================
   OJS GHOST LINE / PSEUDO-ELEMENT NUKE
   ========================================= */

/* Kills the default OJS faux-column vertical lines */
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_page::before,
.pkp_structure_page::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    width: 0 !important;
    border: none !important;
}

/* =========================================
   OJS MAIN / SIDEBAR SEAM NUKE
   The ghost-line nuke above only strips pseudo-element lines. If OJS
   is drawing the vertical divider between the main column and the
   sidebar as a literal border (border-right on .pkp_structure_main,
   border-left on .pkp_structure_sidebar, or a border on the row that
   contains them) instead of a pseudo-element, the rule above won't
   touch it. This does.
   ========================================= */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_content {
    border: none !important;
    box-shadow: none !important;
}

/* =========================================
   REABMS HOMEPAGE — HERO BUTTON
   ========================================= */
.reabms-hero-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.reabms-hero-btn:hover,
.reabms-hero-btn:focus-visible {
    background-color: #C89B3C !important;
    border-color: #C89B3C !important;
    color: #1a1a1a !important;
    cursor: pointer !important;
}
.reabms-hero-btn:active {
    transform: translateY(1px) !important;
    background-color: #a37d2e !important;
    border-color: #a37d2e !important;
    color: #ffffff !important;
}

/* =========================================
   REABMS HOMEPAGE — HERO PLEXUS NETWORK
   CSS-only animated background: a dot grid layered over two
   diagonal line lattices, slowly panned to fake a drifting
   network-of-nodes effect. No JS, no images. The pan distances
   are each a whole multiple of that layer's own tile size, so
   the loop is seamless with no visible jump.
   ========================================= */
.reabms-hero-plexus {
    background-image:
        radial-gradient(circle, rgba(232, 207, 148, 0.55) 1px, transparent 1.6px),
        repeating-linear-gradient(45deg, rgba(200, 155, 60, 0.14) 0px, rgba(200, 155, 60, 0.14) 1px, transparent 1px, transparent 70px),
        repeating-linear-gradient(-45deg, rgba(200, 155, 60, 0.14) 0px, rgba(200, 155, 60, 0.14) 1px, transparent 1px, transparent 70px);
    background-size: 64px 64px, auto, auto;
    background-repeat: repeat, repeat, repeat;
    background-position: 0px 0px, 0px 0px, 0px 0px;
    animation: reabms-plexus-drift 70s linear infinite;
}
@keyframes reabms-plexus-drift {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    100% {
        background-position: -640px 448px, -500px -500px, 500px -500px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .reabms-hero-plexus {
        animation: none !important;
    }
}

/* =========================================
   REABMS HOMEPAGE — AREAS OF PUBLICATION CARDS
   ========================================= */
.reabms-scope-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.reabms-scope-card:hover {
    transform: translateY(-4px) !important;
    background-color: #ffffff !important;
    border-color: #C89B3C !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06) !important;
}

/* =========================================
   REABMS HOMEPAGE — FREQUENCY STAT CHIPS
   ========================================= */
.reabms-freq-chip {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.reabms-freq-chip:hover {
    border-color: #C89B3C !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px) !important;
}

/* =========================================
   ARTICLE PAGE — KEEP COVER IMAGE / DOWNLOAD PDF
   BESIDE THE ARTICLE BODY, NOT BELOW IT
   =========================================
   The "3/4 column split" rules above force .pkp_structure_main to a
   fluid 75% width. The default theme's own .main_entry/.entry_details
   split inside the article page (article_details.less) uses fixed
   pixel widths sized to exactly fill the theme's normal fixed-width
   .pkp_structure_main. At most desktop widths the fixed pair (428px +
   300px, or more at wider tiers) no longer fits inside the narrower
   75% column, so .entry_details (cover image + Download PDF) wraps
   below .main_entry (references) instead of sitting beside it. Make
   the split fluid so it always fits regardless of the column's actual
   width. */
@media (min-width: 992px) {
    .obj_article_details .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .obj_article_details .main_entry {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .obj_article_details .entry_details {
        float: none !important;
        width: 300px !important;
        flex: 0 0 300px !important;
    }
}