/* ============================================================
   JPMHR UNIVERSAL GLOBAL DESIGN SYSTEM
   Journal of Precision Medicine and Health Research
   ============================================================
   VERSION: 2.3.1 — OJS 3.5 (default theme / child theme)
   DATE: 2026-09-03
   ------------------------------------------------------------
   v2.3.1 CHANGELOG
   - FIX: Search control could still clip at the right edge of
     the nav bar (theme absolute positioning winning over the
     v2.1.1 nudge). Now hard-pinned inside the row on desktop:
     right inset forced, left released, vertically centred,
     capped at 40% row width; open field drops right-aligned.
   - STYLE: Search label/icon recoloured to gold on the navy bar
     (gold-soft for AA contrast, brand gold hover underline),
     on desktop and in the mobile panel.
   ------------------------------------------------------------
   v2.3 CHANGELOG (glitch fixes + responsive hardening)
   - FIX (critical): section 45 off-canvas panel colours were
     applied at ALL widths. On desktop this painted the user
     navigation (Login / Register) white-on-white inside the
     white masthead and could re-show the hamburger toggle.
     All panel styling is now scoped to <= 992px.
   - FIX: mobile header gutters were inconsistent (16px masthead
     vs 24px nav row); both wrappers now use 16px below 992px.
   - FIX: search / text inputs now render at 16px on touch
     widths so iOS Safari no longer auto-zooms on focus.
   - FIX: removed dead code — the section 06 gold h2 underline
     that section 42 immediately cancelled; section 42 keeps the
     hairline border treatment.
   - A11Y: focus-visible outline strengthened from 42% alpha to
     solid teal (>= 3:1 non-text contrast).
   - A11Y: reduced-motion now also stops animations and smooth
     scrolling, and covers native OJS regions (header, main,
     footer), not only jpmhr-prefixed containers.
   - PRINT: structured link cards now flatten like other
     decorated components.
   - NEW: <= 360px micro-viewport pass (hero/section padding,
     table type, chip size, logo height).
   - MISC: .jpmhr-btn labels wrap instead of clipping on narrow
     screens.
   ------------------------------------------------------------
   PURPOSE
   - One global stylesheet for current and future JPMHR pages
   - Native OJS compatibility
   - Reusable semantic components
   - Minimal scholarly institutional aesthetic
   - Responsive and accessible
   ------------------------------------------------------------
   SECURITY / INTEGRITY
   - Pure CSS
   - No JavaScript
   - No @import
   - No remote fonts
   - No external assets
   - No hidden SEO text
   - No off-screen content
   - No crawler/user conditional rendering
   - No cloaking mechanisms
   - No generated substantive textual content (the only literal
     generated text is the accordion +/− marker and the journal
     name in the PRINT-ONLY page header, section 44)
   - No display:none / visibility / opacity / off-canvas tricks on
     screen content; display:none is used only for the native
     <details> marker and inside @media print
   ------------------------------------------------------------
   SECTIONS 01–35: original baseline (unchanged except tokens)
   SECTIONS 36–44: v2.0 additions — typography, article page,
   issue TOC, header/nav, sidebar, tables, quiet sections (opt-in),
   print stylesheet
   ============================================================ */


/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

:root {

    /* Brand */
    --jpmhr-navy: #0b3a53;
    --jpmhr-navy-dark: #062f3a;
    --jpmhr-navy-soft: #285868;

    --jpmhr-teal: #007f86;
    --jpmhr-teal-bright: #0097a7;
    --jpmhr-teal-soft: #dceff0;

    --jpmhr-gold: #c79017;
    --jpmhr-gold-soft: #e2bf66;

    /* Text */
    --jpmhr-text: #26343d;
    --jpmhr-muted: #63767f;
    --jpmhr-muted-light: #5f727a;   /* v2.0: raised to >= 4.5:1 on white */

    /* Surfaces */
    --jpmhr-white: #ffffff;
    --jpmhr-bg: #f8fbfb;
    --jpmhr-aqua: #eef8f8;
    --jpmhr-aqua-light: #f5fbfb;
    --jpmhr-footer-bg: #eef4f4;

    /* Borders */
    --jpmhr-border: #d9e5e8;
    --jpmhr-border-dark: #c8d8dc;

    /* States */
    --jpmhr-success-bg: #f2f8f4;
    --jpmhr-warning-bg: #fffaf0;
    --jpmhr-danger-bg: #fff7f6;
    --jpmhr-info-bg: #f3f9fb;

    /* Geometry */
    --jpmhr-radius-xs: 4px;
    --jpmhr-radius-sm: 6px;
    --jpmhr-radius: 6px;            /* v2.0: editorial, not app-like */
    --jpmhr-radius-lg: 8px;

    /* Shadows */
    --jpmhr-shadow:
        0 5px 18px rgba(11, 58, 83, 0.045);

    --jpmhr-shadow-hover:
        0 7px 20px rgba(11, 58, 83, 0.07);

    /* Layout */
    --jpmhr-width: 1180px;
    --jpmhr-reading-width: 760px;   /* v2.0: comfortable measure */

    /* Motion */
    --jpmhr-transition: 160ms ease;

    /* Typography (system stacks only — no downloads) */
    --jpmhr-serif:
        "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
        Palatino, Charter, Georgia, "Times New Roman", serif;
    --jpmhr-sans:
        -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", Arial, sans-serif;
}


/* ============================================================
   02. GLOBAL SAFETY / CONTENT CONTAINMENT
   ============================================================ */

.jpmhr-page,
.jpmhr-policy,
.jpmhr-about,
.jpmhr-about-wrap,
.jpmhr-editorial,
.jpmhr-directory,
.jpmhr-footer {
    color: var(--jpmhr-text);
    line-height: 1.65;
}

.jpmhr-page *,
.jpmhr-policy *,
.jpmhr-about *,
.jpmhr-about-wrap *,
.jpmhr-editorial *,
.jpmhr-directory *,
.jpmhr-footer * {
    box-sizing: border-box;
}

.jpmhr-page img,
.jpmhr-policy img,
.jpmhr-about img,
.jpmhr-about-wrap img,
.jpmhr-editorial img,
.jpmhr-directory img,
.jpmhr-footer img,
.pkp_page_content img {
    max-width: 100%;
    height: auto;
}

.pkp_structure_main,
.pkp_structure_content,
.pkp_page_content,
.obj_article_details,
.page,
.page_index_journal {
    min-width: 0;
}

.jpmhr-page,
.jpmhr-policy,
.jpmhr-about,
.jpmhr-editorial,
.jpmhr-card,
.jpmhr-section,
.jpmhr-policy-section,
.jpmhr-about-section,
.jpmhr-policy-card,
.jpmhr-policy-control-item,
.jpmhr-contact-item,
.jpmhr-person-card,
.jpmhr-footer-column {
    overflow-wrap: anywhere;
}


/* ============================================================
   03. UNIVERSAL CUSTOM PAGE WRAPPER
   ============================================================ */

/*
   Future custom pages should preferably use:

   <div class="jpmhr-page">
       ...
   </div>

   Existing specialised wrappers remain fully supported.
*/

.jpmhr-page,
.jpmhr-policy,
.jpmhr-about,
.jpmhr-editorial,
.jpmhr-directory {
    width: 100%;
    max-width: var(--jpmhr-width);
    margin-inline: auto;
}


/* ============================================================
   04. UNIVERSAL TYPOGRAPHY
   ============================================================ */

.jpmhr-page h2,
.jpmhr-page h3,
.jpmhr-page h4,
.jpmhr-policy h2,
.jpmhr-policy h3,
.jpmhr-policy h4,
.jpmhr-about h2,
.jpmhr-about h3,
.jpmhr-about h4,
.jpmhr-editorial h2,
.jpmhr-editorial h3,
.jpmhr-editorial h4 {
    color: var(--jpmhr-navy-dark);
    line-height: 1.25;
}

.jpmhr-page h2,
.jpmhr-policy h2,
.jpmhr-about h2,
.jpmhr-editorial h2 {
    margin: 0 0 17px;

    font-size: clamp(1.38rem, 2vw, 1.78rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.jpmhr-page h3,
.jpmhr-policy h3,
.jpmhr-about h3,
.jpmhr-editorial h3 {
    margin: 0 0 13px;

    font-size: 1rem;
    font-weight: 700;
}

.jpmhr-page h4,
.jpmhr-policy h4,
.jpmhr-about h4,
.jpmhr-editorial h4 {
    margin: 0 0 9px;

    font-size: 0.93rem;
    font-weight: 700;
}

.jpmhr-page p,
.jpmhr-policy p,
.jpmhr-about p,
.jpmhr-editorial p {
    margin-top: 0;
}

.jpmhr-page ul,
.jpmhr-page ol,
.jpmhr-policy ul,
.jpmhr-policy ol,
.jpmhr-about ul,
.jpmhr-about ol,
.jpmhr-editorial ul,
.jpmhr-editorial ol {
    padding-left: 1.35rem;
}

.jpmhr-page li + li,
.jpmhr-policy li + li,
.jpmhr-about li + li,
.jpmhr-editorial li + li {
    margin-top: 0.34rem;
}


/* ============================================================
   05. UNIVERSAL INTRO / PAGE HERO
   ============================================================ */

/*
   Supported aliases:
   .jpmhr-page-intro
   .jpmhr-policy-intro
   .jpmhr-about-intro
   .jpmhr-editorial-intro
*/

.jpmhr-page-intro,
.jpmhr-policy-intro,
.jpmhr-about-intro,
.jpmhr-editorial-intro {
    position: relative;

    margin-bottom: 24px;
    padding: 30px 32px;

    background:
        linear-gradient(
            112deg,
            #ffffff 0%,
            #fbfdfd 58%,
            #eef8f8 100%
        );

    border: 1px solid var(--jpmhr-border);
    border-top: 3px solid var(--jpmhr-gold);
    border-radius: var(--jpmhr-radius-lg);

    box-shadow: var(--jpmhr-shadow);
}


/* Kicker aliases */

.jpmhr-page-kicker,
.jpmhr-policy-kicker,
.jpmhr-about-kicker,
.jpmhr-editorial-kicker {
    display: block;

    margin: 0 0 10px !important;

    color: #946700;

    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}


/* Lead aliases */

.jpmhr-page-lead,
.jpmhr-policy-lead,
.jpmhr-about-lead,
.jpmhr-editorial-lead {
    max-width: 960px;

    margin-bottom: 10px !important;

    color: var(--jpmhr-navy-dark);

    font-size: clamp(1.04rem, 1.35vw, 1.22rem);
    line-height: 1.58;
}

.jpmhr-page-intro > p:last-child,
.jpmhr-policy-intro > p:last-child,
.jpmhr-about-intro > p:last-child,
.jpmhr-editorial-intro > p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   06. UNIVERSAL CONTENT SECTIONS
   ============================================================ */

/*
   Supported aliases:
   .jpmhr-section
   .jpmhr-policy-section
   .jpmhr-about-section
   .jpmhr-editorial-section
*/

.jpmhr-section,
.jpmhr-policy-section,
.jpmhr-about-section,
.jpmhr-editorial-section {
    position: relative;

    margin: 0 0 20px;
    padding: 25px 27px;

    background: var(--jpmhr-white);

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius);

    box-shadow: none;
}

/* (v2.3) The gold h2 underline formerly defined here was
   cancelled by section 42 (accent discipline) and has been
   removed as dead code. Section h2s use the hairline border
   defined in section 42. */


/* Section intro aliases */

.jpmhr-section-intro,
.jpmhr-policy-summary,
.jpmhr-page-summary {
    max-width: var(--jpmhr-reading-width);

    margin: -2px 0 18px !important;

    color: var(--jpmhr-muted);

    font-size: 0.95rem;
    line-height: 1.62;
}


/* ============================================================
   07. HIGHLIGHT CHIPS / BADGES
   ============================================================ */

.jpmhr-highlights,
.jpmhr-policy-highlights,
.jpmhr-about-highlights,
.jpmhr-editorial-highlights {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 18px;
}

.jpmhr-highlights span,
.jpmhr-policy-highlights span,
.jpmhr-about-highlights span,
.jpmhr-editorial-highlights span {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    color: var(--jpmhr-navy);
    background: var(--jpmhr-aqua);

    border: 1px solid #d4e7e8;
    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.25;
}


/* ============================================================
   08. CATEGORY / DIRECTORY GROUPS
   ============================================================ */

.jpmhr-group,
.jpmhr-policy-group,
.jpmhr-directory-group {
    margin: 0;
    padding: 20px 0 23px;

    border-bottom: 1px solid var(--jpmhr-border);
}

.jpmhr-group:first-of-type,
.jpmhr-policy-group:first-of-type,
.jpmhr-directory-group:first-of-type {
    padding-top: 4px;
}

.jpmhr-group:last-child,
.jpmhr-policy-group:last-child,
.jpmhr-directory-group:last-child {
    padding-bottom: 2px;
    border-bottom: 0;
}

.jpmhr-group h3,
.jpmhr-policy-group h3,
.jpmhr-directory-group h3 {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0 0 13px !important;

    color: var(--jpmhr-navy-dark);
}

.jpmhr-group h3::before,
.jpmhr-policy-group h3::before,
.jpmhr-directory-group h3::before {
    content: "";

    width: 4px;
    height: 17px;

    flex: 0 0 4px;

    background: var(--jpmhr-gold);

    border-radius: 20px;
}


/* ============================================================
   09. UNIVERSAL LINK / NAVIGATION GRIDS
   ============================================================ */

.jpmhr-link-grid,
.jpmhr-policy-links-grid,
.jpmhr-link-group,
.jpmhr-resource-grid,
.jpmhr-directory-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 9px 11px !important;

    width: 100%;

    margin: 14px 0 0 !important;
}


/* ============================================================
   10. UNIVERSAL STRUCTURED LINK CARDS
   ============================================================ */

.jpmhr-link-grid > a,
.jpmhr-policy-links-grid > a,
.jpmhr-link-group > a,
.jpmhr-resource-grid > a,
.jpmhr-directory-grid > a,
a.jpmhr-card-link,
a.jpmhr-policy-card,
a.jpmhr-policy-link,
a.jpmhr-external-link {
    display: flex !important;
    align-items: center;

    min-width: 0;
    min-height: 46px;

    padding: 10px 13px !important;
    margin: 0 !important;

    color: var(--jpmhr-navy) !important;
    background: var(--jpmhr-white) !important;

    border: 1px solid var(--jpmhr-border) !important;
    border-radius: 7px !important;

    text-decoration: none !important;

    font-size: 0.87rem !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;

    overflow-wrap: anywhere;

    box-shadow: none !important;

    transition:
        color var(--jpmhr-transition),
        background-color var(--jpmhr-transition),
        border-color var(--jpmhr-transition),
        box-shadow var(--jpmhr-transition);
}

.jpmhr-link-grid > a:hover,
.jpmhr-policy-links-grid > a:hover,
.jpmhr-link-group > a:hover,
.jpmhr-resource-grid > a:hover,
.jpmhr-directory-grid > a:hover,
a.jpmhr-card-link:hover,
a.jpmhr-policy-card:hover,
a.jpmhr-policy-link:hover,
a.jpmhr-external-link:hover,
.jpmhr-link-grid > a:focus-visible,
.jpmhr-policy-links-grid > a:focus-visible,
.jpmhr-link-group > a:focus-visible,
.jpmhr-resource-grid > a:focus-visible,
.jpmhr-directory-grid > a:focus-visible,
a.jpmhr-card-link:focus-visible,
a.jpmhr-policy-card:focus-visible,
a.jpmhr-policy-link:focus-visible,
a.jpmhr-external-link:focus-visible {
    color: var(--jpmhr-navy-dark) !important;

    background: var(--jpmhr-aqua-light) !important;

    border-color: #83bbc2 !important;

    text-decoration: none !important;

    box-shadow: var(--jpmhr-shadow-hover) !important;
}


/* External resource cards */

a.jpmhr-external-link,
.jpmhr-link-grid > a[target="_blank"],
.jpmhr-policy-links-grid > a[target="_blank"],
.jpmhr-resource-grid > a[target="_blank"] {
    border-top: 2px solid var(--jpmhr-gold) !important;
}


/* Primary action card */

a.jpmhr-policy-link-primary,
a.jpmhr-card-link-primary {
    color: #ffffff !important;
    background: var(--jpmhr-navy) !important;

    border-color: var(--jpmhr-navy) !important;
}

a.jpmhr-policy-link-primary:hover,
a.jpmhr-card-link-primary:hover {
    color: #ffffff !important;
    background: var(--jpmhr-navy-soft) !important;

    border-color: var(--jpmhr-navy-soft) !important;
}


/* ============================================================
   11. TRUE INLINE LINKS
   ============================================================ */

.jpmhr-page p a:not(.jpmhr-card-link):not(.jpmhr-policy-card):not(.jpmhr-policy-link):not(.jpmhr-external-link),
.jpmhr-page li a:not(.jpmhr-card-link):not(.jpmhr-policy-card):not(.jpmhr-policy-link):not(.jpmhr-external-link),

.jpmhr-policy p a:not(.jpmhr-policy-card):not(.jpmhr-policy-link):not(.jpmhr-external-link),
.jpmhr-policy li a:not(.jpmhr-policy-card):not(.jpmhr-policy-link):not(.jpmhr-external-link),

.jpmhr-about p a:not(.jpmhr-policy-link):not(.jpmhr-external-link),
.jpmhr-about li a:not(.jpmhr-policy-link):not(.jpmhr-external-link),

.jpmhr-editorial p a:not(.jpmhr-card-link),
.jpmhr-editorial li a:not(.jpmhr-card-link) {
    display: inline !important;

    padding: 0 !important;
    margin: 0 !important;

    color: #0077a8 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;

    box-shadow: none !important;

    font-weight: inherit !important;
}


/* ============================================================
   12. FACT / METADATA GRIDS
   ============================================================ */

.jpmhr-facts-grid,
.jpmhr-meta-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0;

    margin: 7px 0 20px;

    overflow: hidden;

    background: var(--jpmhr-white);

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius);
}

.jpmhr-fact-card,
.jpmhr-meta-item {
    min-width: 0;

    padding: 13px 15px;

    border-right: 1px solid var(--jpmhr-border);
    border-bottom: 1px solid var(--jpmhr-border);
}

.jpmhr-fact-card:nth-child(3n),
.jpmhr-meta-item:nth-child(3n) {
    border-right: 0;
}

.jpmhr-fact-card strong,
.jpmhr-meta-item strong {
    display: block;

    margin-bottom: 2px;

    color: var(--jpmhr-navy-dark);

    font-size: 0.73rem;
    font-weight: 700;
}

.jpmhr-fact-card span,
.jpmhr-meta-item span {
    display: block;

    color: var(--jpmhr-text);

    font-size: 0.88rem;
    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ============================================================
   13. UNIVERSAL CARDS
   ============================================================ */

.jpmhr-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.jpmhr-card {
    min-width: 0;

    padding: 18px;

    background: var(--jpmhr-white);

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius);

    box-shadow: var(--jpmhr-shadow);
}

.jpmhr-card h3,
.jpmhr-card h4 {
    margin-top: 0;
}


/* ============================================================
   14. EDITORIAL TEAM / PEOPLE CARDS
   ============================================================ */

/*
   Future Editorial Team markup can use:

   .jpmhr-people-grid
   .jpmhr-person-card
   .jpmhr-person-name
   .jpmhr-person-role
   .jpmhr-person-affiliation
*/

.jpmhr-people-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.jpmhr-person-card {
    min-width: 0;

    padding: 18px;

    background: var(--jpmhr-white);

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius);

    box-shadow: none;

    transition:
        border-color var(--jpmhr-transition),
        box-shadow var(--jpmhr-transition);
}

.jpmhr-person-card:hover {
    border-color: #b8d3d7;

    box-shadow: var(--jpmhr-shadow);
}

.jpmhr-person-name {
    margin: 0 0 4px !important;

    color: var(--jpmhr-navy-dark);

    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.jpmhr-person-role {
    margin: 0 0 6px !important;

    color: var(--jpmhr-teal);

    font-size: 0.79rem;
    font-weight: 650;
    line-height: 1.35;
}

.jpmhr-person-affiliation,
.jpmhr-person-meta {
    margin: 0 !important;

    color: var(--jpmhr-muted);

    font-size: 0.81rem;
    line-height: 1.45;
}


/* Editorial leadership emphasis */

.jpmhr-person-card-primary {
    border-top: 3px solid var(--jpmhr-gold);
}


/* ============================================================
   15. ACCORDIONS / DETAILS
   ============================================================ */

.jpmhr-disclosure {
    margin-top: 15px;

    overflow: hidden;

    background: var(--jpmhr-bg);

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius);
}

.jpmhr-disclosure > summary {
    position: relative;

    padding: 13px 40px 13px 15px;

    color: var(--jpmhr-navy-dark);

    font-size: 0.89rem;
    font-weight: 650;

    cursor: pointer;

    list-style: none;
}

.jpmhr-disclosure > summary::-webkit-details-marker {
    display: none;
}

.jpmhr-disclosure > summary::after {
    content: "+";

    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--jpmhr-teal);

    font-size: 1.1rem;
    font-weight: 600;
}

.jpmhr-disclosure[open] > summary::after {
    content: "−";
}

.jpmhr-disclosure > summary:hover {
    background: var(--jpmhr-aqua);
}

.jpmhr-disclosure-content {
    padding: 16px 17px;

    background: var(--jpmhr-white);

    border-top: 1px solid var(--jpmhr-border);
}


/* ============================================================
   16. DEFINITION LISTS
   ============================================================ */

.jpmhr-dl {
    display: grid !important;

    grid-template-columns:
        150px minmax(0, 1fr) !important;

    gap: 9px 16px;

    margin: 0;
}

.jpmhr-dl dt {
    color: var(--jpmhr-navy-dark);
    font-weight: 700;
}

.jpmhr-dl dd {
    min-width: 0;

    margin: 0;

    color: var(--jpmhr-text);

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ============================================================
   17. TABLES
   ============================================================ */

.jpmhr-table-wrap {
    width: 100%;

    overflow-x: auto;

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius);
}

.jpmhr-table,
.jpmhr-policy-table {
    width: 100%;

    border-collapse: collapse;

    background: var(--jpmhr-white);

    font-size: 0.87rem;
}

.jpmhr-table th,
.jpmhr-table td,
.jpmhr-policy-table th,
.jpmhr-policy-table td {
    padding: 11px 13px;

    text-align: left;
    vertical-align: top;

    border-bottom: 1px solid var(--jpmhr-border);
}

.jpmhr-table th,
.jpmhr-policy-table th {
    color: var(--jpmhr-navy-dark);
    background: var(--jpmhr-aqua);

    font-weight: 700;
}

.jpmhr-table tr:last-child td,
.jpmhr-policy-table tr:last-child td {
    border-bottom: 0;
}


/* ============================================================
   18. POLICY LISTS / LARGE LINK LISTS
   ============================================================ */

.jpmhr-policy-list,
.jpmhr-resource-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0 24px;

    margin: 16px 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.jpmhr-policy-list li,
.jpmhr-resource-list li {
    margin: 0 !important;

    border-bottom: 1px solid var(--jpmhr-border);
}

.jpmhr-policy-list a,
.jpmhr-resource-list a {
    display: block !important;

    padding: 8px 1px !important;

    color: var(--jpmhr-navy) !important;

    text-decoration: none !important;

    font-size: 0.86rem;
    line-height: 1.35;
}

.jpmhr-policy-list a:hover,
.jpmhr-resource-list a:hover {
    color: var(--jpmhr-teal) !important;
}


/* ============================================================
   19. CONTACT GRIDS
   ============================================================ */

.jpmhr-contact-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin: 18px 0;
}

.jpmhr-contact-item {
    min-width: 0;

    padding: 14px 15px;

    background: var(--jpmhr-bg);

    border: 1px solid var(--jpmhr-border);
    border-radius: 7px;

    color: var(--jpmhr-muted);

    font-size: 0.87rem;
    line-height: 1.45;
}

.jpmhr-contact-item strong {
    color: var(--jpmhr-navy-dark);

    font-size: 0.78rem;
}

.jpmhr-contact-item a {
    color: #0077a8;

    text-decoration: none;
}

.jpmhr-contact-item a:hover {
    text-decoration: underline;

    text-underline-offset: 2px;
}


/* ============================================================
   20. CALLOUT / NOTICE COMPONENTS
   ============================================================ */

.jpmhr-notice {
    margin: 16px 0;
    padding: 14px 16px;

    background: var(--jpmhr-info-bg);

    border: 1px solid var(--jpmhr-border);
    border-left: 3px solid var(--jpmhr-teal);
    border-radius: var(--jpmhr-radius-sm);
}

.jpmhr-notice-warning {
    background: var(--jpmhr-warning-bg);
    border-left-color: var(--jpmhr-gold);
}

.jpmhr-notice-success {
    background: var(--jpmhr-success-bg);
    border-left-color: #4f8b66;
}

.jpmhr-notice-danger {
    background: var(--jpmhr-danger-bg);
    border-left-color: #aa6159;
}


/* ============================================================
   21. BLOCKQUOTES
   ============================================================ */

.jpmhr-page blockquote,
.jpmhr-policy blockquote,
.jpmhr-about blockquote,
.jpmhr-editorial blockquote {
    margin: 17px 0;
    padding: 14px 16px;

    color: var(--jpmhr-text);
    background: var(--jpmhr-bg);

    border-left: 3px solid var(--jpmhr-gold);
    border-radius:
        0 var(--jpmhr-radius-sm)
        var(--jpmhr-radius-sm) 0;
}


/* ============================================================
   22. POLICY / PAGE CONTROL GRID
   ============================================================ */

.jpmhr-page-control,
.jpmhr-policy-control {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 0;

    margin-top: 22px;

    overflow: hidden;

    background: var(--jpmhr-white);

    border: 1px solid var(--jpmhr-border);
    border-top: 3px solid var(--jpmhr-gold);
    border-radius: var(--jpmhr-radius);
}

.jpmhr-page-control-item,
.jpmhr-policy-control-item {
    min-width: 0;

    padding: 13px 15px;

    border-right: 1px solid var(--jpmhr-border);
    border-bottom: 1px solid var(--jpmhr-border);
}

.jpmhr-page-control-item:nth-child(2n),
.jpmhr-policy-control-item:nth-child(2n) {
    border-right: 0;
}

.jpmhr-page-control-item:last-child:nth-child(odd),
.jpmhr-policy-control-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.jpmhr-page-control-item strong,
.jpmhr-policy-control-item strong {
    display: block;

    margin-bottom: 2px;

    color: var(--jpmhr-navy-dark);

    font-size: 0.72rem;
    font-weight: 700;
}

.jpmhr-page-control-item span,
.jpmhr-policy-control-item span {
    display: block;

    color: var(--jpmhr-muted);

    font-size: 0.85rem;
    line-height: 1.4;
}


/* ============================================================
   23. BUTTONS
   ============================================================ */

.jpmhr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 8px 15px;

    max-width: 100%;

    text-align: center;
    white-space: normal;        /* v2.3: wrap, never clip */
    overflow-wrap: anywhere;

    color: #ffffff !important;
    background: var(--jpmhr-navy);

    border: 1px solid var(--jpmhr-navy);
    border-radius: 7px;

    font-weight: 650;

    text-decoration: none !important;

    transition:
        background-color var(--jpmhr-transition),
        border-color var(--jpmhr-transition);
}

.jpmhr-btn:hover,
.jpmhr-btn:focus-visible {
    background: var(--jpmhr-navy-soft);
    border-color: var(--jpmhr-navy-soft);
}

.jpmhr-btn-secondary {
    color: var(--jpmhr-navy) !important;
    background: var(--jpmhr-white);

    border-color: var(--jpmhr-border-dark);
}

.jpmhr-btn-secondary:hover {
    color: var(--jpmhr-navy-dark) !important;
    background: var(--jpmhr-aqua);
}


/* ============================================================
   24. HOMEPAGE — NATIVE OJS SUMMARY
   No HTML/code editor required
   ============================================================ */

.page_index_journal .homepage_about,
.page_index_journal .additional_content,
.page_index_journal .journal_description,
.page_index_journal .homepage_additional,
.page_index_journal .pkp_page_content > .additional_content,
.page_index_journal .pkp_structure_main > .page > .additional_content,
.page_index_journal .pkp_structure_main .additional_content,
.page_index_journal .pkp_structure_main .homepage_about {
    position: relative;

    margin: 28px 0 32px !important;
    padding: 29px 31px !important;

    color: var(--jpmhr-text) !important;

    background:
        linear-gradient(
            112deg,
            #ffffff 0%,
            #fbfdfd 58%,
            #eef8f8 100%
        ) !important;

    border: 1px solid var(--jpmhr-border) !important;
    border-top: 3px solid var(--jpmhr-gold) !important;

    border-radius: var(--jpmhr-radius-lg) !important;

    box-shadow: var(--jpmhr-shadow) !important;
}


/* Homepage headings */

.page_index_journal .homepage_about h2,
.page_index_journal .homepage_about h3,
.page_index_journal .additional_content h2,
.page_index_journal .additional_content h3,
.page_index_journal .journal_description h2,
.page_index_journal .journal_description h3,
.page_index_journal .homepage_additional h2,
.page_index_journal .homepage_additional h3 {
    margin-top: 0 !important;
    margin-bottom: 17px !important;

    color: var(--jpmhr-navy-dark) !important;

    font-size: 1.48rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}


/* Gold heading marker */

.page_index_journal .homepage_about h2:first-child::after,
.page_index_journal .homepage_about h3:first-child::after,
.page_index_journal .additional_content h2:first-child::after,
.page_index_journal .additional_content h3:first-child::after,
.page_index_journal .journal_description h2:first-child::after,
.page_index_journal .journal_description h3:first-child::after,
.page_index_journal .homepage_additional h2:first-child::after,
.page_index_journal .homepage_additional h3:first-child::after {
    content: "";

    display: block;

    width: 36px;
    height: 2px;

    margin-top: 9px;

    background: var(--jpmhr-gold);
}


/* Homepage copy */

.page_index_journal .homepage_about p,
.page_index_journal .additional_content p,
.page_index_journal .journal_description p,
.page_index_journal .homepage_additional p {
    max-width: 970px;

    margin-top: 0 !important;
    margin-bottom: 14px !important;

    color: #4c636d !important;

    font-size: 0.94rem !important;
    line-height: 1.72 !important;
}

.page_index_journal .homepage_about strong,
.page_index_journal .additional_content strong,
.page_index_journal .journal_description strong,
.page_index_journal .homepage_additional strong {
    color: var(--jpmhr-navy-dark) !important;

    font-weight: 700 !important;
}


/* Homepage links */

.page_index_journal .homepage_about a,
.page_index_journal .additional_content a,
.page_index_journal .journal_description a,
.page_index_journal .homepage_additional a {
    color: #0077a8 !important;

    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

.page_index_journal .homepage_about a:hover,
.page_index_journal .additional_content a:hover,
.page_index_journal .journal_description a:hover,
.page_index_journal .homepage_additional a:hover {
    color: var(--jpmhr-navy-dark) !important;
}


/* Homepage lists */

.page_index_journal .homepage_about ul,
.page_index_journal .additional_content ul,
.page_index_journal .journal_description ul,
.page_index_journal .homepage_additional ul {
    margin: 12px 0 16px !important;
    padding-left: 1.3rem !important;
}

.page_index_journal .homepage_about li,
.page_index_journal .additional_content li,
.page_index_journal .journal_description li,
.page_index_journal .homepage_additional li {
    margin-bottom: 4px !important;

    color: #4c636d !important;
}


/* ============================================================
   25. OJS NATIVE PAGE HEADINGS
   Future-proof light treatment
   ============================================================ */

/*
   These rules intentionally remain restrained.
   They improve native OJS pages without turning forms,
   article pages or workflows into custom policy cards.
*/

.pkp_structure_main .page > h1,
.pkp_structure_main .page > .page_title,
.pkp_structure_main .page h1:first-child {
    color: var(--jpmhr-navy-dark);

    line-height: 1.25;
}

.pkp_structure_main .page > h1::after {
    content: "";

    display: block;

    width: 38px;
    height: 2px;

    margin-top: 9px;

    background: var(--jpmhr-gold);
}


/* ============================================================
   26. NATIVE OJS FORMS
   Login, registration, submissions, contact etc.
   ============================================================ */

.pkp_structure_main input[type="text"],
.pkp_structure_main input[type="email"],
.pkp_structure_main input[type="password"],
.pkp_structure_main input[type="search"],
.pkp_structure_main input[type="url"],
.pkp_structure_main input[type="number"],
.pkp_structure_main select,
.pkp_structure_main textarea {
    max-width: 100%;

    border-color: var(--jpmhr-border-dark);

    border-radius: var(--jpmhr-radius-sm);

    box-shadow: none;
}

.pkp_structure_main input:focus,
.pkp_structure_main select:focus,
.pkp_structure_main textarea:focus {
    border-color: var(--jpmhr-teal);

    outline: 2px solid rgba(0, 127, 134, 0.12);
    outline-offset: 1px;

    box-shadow: none;
}


/* OJS primary buttons */

.pkp_structure_main button:not(.jpmhr-btn),
.pkp_structure_main .pkp_button {
    border-radius: 6px;
}


/* ============================================================
   27. OJS ARCHIVES / ISSUE LISTS
   ============================================================ */

.page_issue_archive .issues_archive > li,
.page_search .search_results > li {
    border-bottom-color: var(--jpmhr-border);
}

.obj_issue_summary,
.obj_article_summary {
    min-width: 0;
}

.obj_issue_summary .title,
.obj_article_summary .title {
    color: var(--jpmhr-navy-dark);
}

.obj_issue_summary .title a,
.obj_article_summary .title a {
    color: var(--jpmhr-navy);
}

.obj_issue_summary .title a:hover,
.obj_article_summary .title a:hover {
    color: var(--jpmhr-teal);
}


/* ============================================================
   28. FOOTER — OJS OUTER STRUCTURE
   ============================================================ */

.pkp_structure_footer {
    margin-top: 46px !important;

    background: var(--jpmhr-footer-bg) !important;

    border-top: 1px solid #d4e1e3 !important;
}

.pkp_structure_footer .pkp_footer_content {
    max-width: var(--jpmhr-width) !important;

    margin: 0 auto !important;
    padding: 24px 30px 17px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

.pkp_structure_footer .pkp_brand_footer {
    max-width: var(--jpmhr-width);

    margin: 0 auto !important;
    padding: 6px 30px 13px !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   29. COMPACT FOUR-COLUMN FOOTER
   ============================================================ */

.jpmhr-footer {
    width: 100%;
}


/* Identity row */

.jpmhr-footer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 16px;
    padding-bottom: 14px;

    border-bottom: 1px solid #cddadd;
}

.jpmhr-footer-identity {
    min-width: 0;
}

.jpmhr-footer-kicker {
    margin: 0 0 2px !important;

    color: var(--jpmhr-teal) !important;

    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.jpmhr-footer-title {
    margin: 0 !important;

    color: var(--jpmhr-navy-dark) !important;

    font-size: 0.97rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* Compact journal metadata */

.jpmhr-footer-head-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 4px 12px;

    color: #64777f;

    font-size: 0.69rem;
    line-height: 1.3;
}

.jpmhr-footer-head-meta strong {
    color: #31525d;

    font-weight: 700;
}


/* Footer columns */

.jpmhr-footer-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 24px !important;

    width: 100%;
}

.jpmhr-footer-column {
    min-width: 0;
}

.jpmhr-footer-column h3 {
    margin: 0 0 7px !important;

    color: var(--jpmhr-navy-dark) !important;

    font-size: 0.74rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.015em;
}

.jpmhr-footer-column ul {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.jpmhr-footer-column li {
    margin: 0 !important;
    padding: 0 !important;
}

.jpmhr-footer-column a {
    display: block !important;

    padding: 2.5px 0 !important;
    margin: 0 !important;

    color: #3c5a64 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    text-decoration: none !important;

    font-size: 0.74rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;

    box-shadow: none !important;
}

.jpmhr-footer-column a:hover,
.jpmhr-footer-column a:focus-visible {
    color: var(--jpmhr-teal) !important;

    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}


/* Footer text */

.jpmhr-footer-column p {
    margin: 0 0 6px !important;

    color: #64777f !important;

    font-size: 0.73rem !important;
    line-height: 1.4 !important;
}

.jpmhr-footer-column p strong {
    color: #31525d !important;

    font-weight: 700 !important;
}


/* Footer bottom strip */

.jpmhr-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 18px;

    margin-top: 15px;
    padding-top: 11px;

    border-top: 1px solid #cddadd;

    color: #72848b;

    font-size: 0.67rem;
    line-height: 1.4;
}

.jpmhr-footer-bottom p {
    margin: 0 !important;
}

.jpmhr-footer-bottom a {
    display: inline !important;

    padding: 0 !important;
    margin: 0 !important;

    color: #42616b !important;
    background: transparent !important;

    border: 0 !important;

    text-decoration: none !important;

    box-shadow: none !important;
}

.jpmhr-footer-bottom a:hover {
    color: var(--jpmhr-teal) !important;

    text-decoration: underline !important;
}


/* Suppress conflicting decorative additions only */

.pkp_structure_footer a::before,
.pkp_structure_footer a::after {
    content: none !important;
}

.pkp_structure_footer .pkp_block {
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   30. ACCESSIBILITY / FOCUS
   ============================================================ */

.jpmhr-page a:focus-visible,
.jpmhr-policy a:focus-visible,
.jpmhr-about a:focus-visible,
.jpmhr-editorial a:focus-visible,
.jpmhr-footer a:focus-visible,
.jpmhr-btn:focus-visible,
.page_index_journal a:focus-visible {
    outline: 2px solid var(--jpmhr-teal);   /* v2.3: solid, >= 3:1 */
    outline-offset: 2px;
}


/* ============================================================
   31. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    /* v2.3: cover native OJS regions too, and stop animations
       and smooth scrolling, not only transitions */

    .jpmhr-page *,
    .jpmhr-policy *,
    .jpmhr-about *,
    .jpmhr-editorial *,
    .jpmhr-directory *,
    .jpmhr-footer *,
    .pkp_structure_head *,
    .pkp_structure_main *,
    .pkp_structure_sidebar *,
    .pkp_structure_footer * {
        transition-duration: 0.001ms !important;

        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }

}


/* ============================================================
   32. LARGE TABLET / SMALL DESKTOP
   ============================================================ */

@media (max-width: 1000px) {

    .jpmhr-people-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   33. TABLET — <= 900px
   ============================================================ */

@media (max-width: 900px) {

    .jpmhr-link-grid,
    .jpmhr-policy-links-grid,
    .jpmhr-link-group,
    .jpmhr-resource-grid,
    .jpmhr-directory-grid,
    .jpmhr-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .jpmhr-facts-grid,
    .jpmhr-meta-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .jpmhr-fact-card:nth-child(3n),
    .jpmhr-meta-item:nth-child(3n) {
        border-right: 1px solid var(--jpmhr-border);
    }

    .jpmhr-fact-card:nth-child(2n),
    .jpmhr-meta-item:nth-child(2n) {
        border-right: 0;
    }

    .jpmhr-policy-list,
    .jpmhr-resource-list {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .jpmhr-footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px 28px !important;
    }

}


/* ============================================================
   34. MOBILE — <= 620px
   ============================================================ */

@media (max-width: 620px) {

    /* Intro / sections */

    .jpmhr-page-intro,
    .jpmhr-policy-intro,
    .jpmhr-about-intro,
    .jpmhr-editorial-intro,
    .jpmhr-section,
    .jpmhr-policy-section,
    .jpmhr-about-section,
    .jpmhr-editorial-section {
        padding: 20px 17px !important;
    }


    /* Native homepage */

    .page_index_journal .homepage_about,
    .page_index_journal .additional_content,
    .page_index_journal .journal_description,
    .page_index_journal .homepage_additional,
    .page_index_journal .pkp_page_content > .additional_content,
    .page_index_journal .pkp_structure_main > .page > .additional_content,
    .page_index_journal .pkp_structure_main .additional_content,
    .page_index_journal .pkp_structure_main .homepage_about {
        padding: 21px 18px !important;
        margin: 20px 0 24px !important;
    }

    .page_index_journal .homepage_about h2,
    .page_index_journal .homepage_about h3,
    .page_index_journal .additional_content h2,
    .page_index_journal .additional_content h3,
    .page_index_journal .journal_description h2,
    .page_index_journal .journal_description h3,
    .page_index_journal .homepage_additional h2,
    .page_index_journal .homepage_additional h3 {
        font-size: 1.3rem !important;
    }


    /* All major grids */

    .jpmhr-link-grid,
    .jpmhr-policy-links-grid,
    .jpmhr-link-group,
    .jpmhr-resource-grid,
    .jpmhr-directory-grid,
    .jpmhr-grid,
    .jpmhr-facts-grid,
    .jpmhr-meta-grid,
    .jpmhr-page-control,
    .jpmhr-policy-control,
    .jpmhr-contact-grid,
    .jpmhr-people-grid,
    .jpmhr-footer-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .jpmhr-fact-card,
    .jpmhr-meta-item,
    .jpmhr-page-control-item,
    .jpmhr-policy-control-item {
        border-right: 0 !important;
    }


    /* Definition lists */

    .jpmhr-dl {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 3px;
    }

    .jpmhr-dl dd {
        margin-bottom: 10px;
    }


    /* Footer */

    .pkp_structure_footer .pkp_footer_content {
        padding: 21px 18px 15px !important;
    }

    .jpmhr-footer-head {
        display: block;
    }

    .jpmhr-footer-head-meta {
        justify-content: flex-start;

        margin-top: 7px;
    }

    .jpmhr-footer-grid {
        gap: 16px !important;
    }

    .jpmhr-footer-bottom {
        display: block;
    }

    .jpmhr-footer-bottom p + p {
        margin-top: 4px !important;
    }

}


/* ============================================================
   35. VERY SMALL DEVICES — <= 420px
   ============================================================ */

@media (max-width: 420px) {

    .jpmhr-page h2,
    .jpmhr-policy h2,
    .jpmhr-about h2,
    .jpmhr-editorial h2 {
        font-size: 1.3rem !important;
    }

    .jpmhr-group h3,
    .jpmhr-policy-group h3,
    .jpmhr-directory-group h3 {
        font-size: 0.95rem !important;
    }

    .jpmhr-link-grid > a,
    .jpmhr-policy-links-grid > a,
    .jpmhr-link-group > a,
    .jpmhr-resource-grid > a,
    .jpmhr-directory-grid > a,
    a.jpmhr-card-link,
    a.jpmhr-policy-card,
    a.jpmhr-policy-link,
    a.jpmhr-external-link {
        min-height: 44px;

        padding: 9px 11px !important;

        font-size: 0.83rem !important;
    }

}

/* ============================================================
   36. TYPOGRAPHIC SYSTEM (v2.0)
   Serif for display headings and titles, sans for body/UI.
   System font stacks only — nothing is downloaded.
   ============================================================ */

.pkp_structure_main .page,
.obj_article_details,
.obj_issue_toc {
    font-family: var(--jpmhr-sans);
    font-size: 1rem;
    line-height: 1.7;

    font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jpmhr-page h2,
.jpmhr-policy h2,
.jpmhr-about h2,
.jpmhr-editorial h2,
.pkp_structure_main .page > h1,
.pkp_structure_main .page > .page_title,
.obj_article_details .page_title,
.obj_article_summary .title,
.obj_issue_summary .title,
.page_index_journal .homepage_about h2,
.page_index_journal .additional_content h2,
.page_index_journal .journal_description h2,
.page_index_journal .homepage_additional h2 {
    font-family: var(--jpmhr-serif) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
}


/* ============================================================
   37. HEADER / PRIMARY NAVIGATION (v2.1)
   Default theme: white masthead, base-colour navigation bar.
   Masthead text is forced dark; nav-bar text is forced white.
   ============================================================ */

/* Masthead */

.pkp_structure_head {
    background: var(--jpmhr-white) !important;

    border-bottom: 0;
}

.pkp_structure_head .pkp_head_wrapper,
.pkp_navigation_primary_row .pkp_head_wrapper {
    max-width: var(--jpmhr-width);

    margin-inline: auto;
    padding-inline: 24px;
}

.pkp_site_name .is_img img {
    max-height: 76px;
    width: auto;
}

.pkp_site_name .is_text,
.pkp_site_name .is_text a,
.pkp_site_name a {
    color: var(--jpmhr-navy-dark) !important;

    font-family: var(--jpmhr-serif);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
}

.pkp_site_name .is_text a:hover,
.pkp_site_name .is_text a:focus-visible {
    color: var(--jpmhr-teal) !important;
}


/* User navigation (Login / Register / Dashboard / Profile) —
   sits in the white masthead, so it must be dark */

.pkp_navigation_user_wrapper {
    background: transparent !important;
}

.pkp_navigation_user > li > a,
.pkp_navigation_user a,
.pkp_navigation_user .has_submenu > a {
    color: var(--jpmhr-navy) !important;

    font-size: 0.82rem;
    font-weight: 600;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus-visible {
    color: var(--jpmhr-teal) !important;
}

.pkp_navigation_user ul,
.pkp_navigation_user .submenu {
    background: var(--jpmhr-white) !important;

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius-sm);

    box-shadow: var(--jpmhr-shadow);
}

.pkp_navigation_user ul a,
.pkp_navigation_user .submenu a {
    color: var(--jpmhr-navy) !important;
}


/* Primary navigation bar — keep theme base colour, white text */

.pkp_navigation_primary_row {
    background: var(--jpmhr-navy) !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > .has_submenu,
.pkp_navigation_primary > li > button {
    color: var(--jpmhr-white) !important;

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    transition: color var(--jpmhr-transition),
                box-shadow var(--jpmhr-transition);
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus-visible {
    color: var(--jpmhr-gold-soft) !important;

    box-shadow: inset 0 -3px 0 var(--jpmhr-gold);
}

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--jpmhr-gold);
}


/* Primary dropdowns: white panel, dark text */

.pkp_navigation_primary > li > ul,
.pkp_navigation_primary .submenu {
    background: var(--jpmhr-white) !important;

    border: 1px solid var(--jpmhr-border);
    border-radius: 0 0 var(--jpmhr-radius-sm) var(--jpmhr-radius-sm);

    box-shadow: var(--jpmhr-shadow);
}

.pkp_navigation_primary > li > ul a,
.pkp_navigation_primary .submenu a {
    color: var(--jpmhr-navy) !important;

    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.pkp_navigation_primary > li > ul a:hover,
.pkp_navigation_primary .submenu a:hover {
    color: var(--jpmhr-teal) !important;
    background: var(--jpmhr-aqua) !important;
}


/* Search control containment (v2.3.1)
   ------------------------------------------------------------
   The v2.1.1 "nudge" (right: 24px) could still lose to the
   theme's own absolute positioning at some widths, leaving the
   Search control half-clipped at the container edge. This
   version pins it hard: fixed right inset, left released,
   vertically centred, and never allowed to exceed the row. The
   mobile block (section 45) still resets it to static/full
   width below 992px. */

.pkp_navigation_primary_row .pkp_head_wrapper {
    position: relative;
}

@media (min-width: 993px) {

    .pkp_navigation_primary_row .pkp_search {
        position: absolute !important;

        top: 50% !important;
        right: 24px !important;
        left: auto !important;
        bottom: auto !important;

        transform: translateY(-50%);

        max-width: 40%;

        margin: 0 !important;

        white-space: nowrap;
    }

    /* Open search field drops down right-aligned, inside the row */

    .pkp_navigation_primary_row .pkp_search .search_controls {
        right: 0;
        left: auto;
    }

}

.pkp_navigation_primary_row .pkp_search a,
.pkp_navigation_primary_row .pkp_search .headerSearchPrompt {
    padding-right: 0;
}


/* Search control in the nav bar — dark gold (v2.3.1)
   Label/icon in gold-soft (≈6.8:1 on navy, WCAG AA); brand gold
   is reserved for the hover underline because #c79017 alone
   falls just under 4.5:1 against the navy at this text size. */

.pkp_navigation_primary_row .pkp_search a,
.pkp_navigation_primary_row .pkp_search .headerSearchPrompt,
.pkp_navigation_primary_row .pkp_search button,
.pkp_navigation_primary_row .pkp_search label {
    color: var(--jpmhr-gold-soft) !important;

    font-weight: 650;
}

.pkp_navigation_primary_row .pkp_search a:hover,
.pkp_navigation_primary_row .pkp_search a:focus-visible,
.pkp_navigation_primary_row .pkp_search .headerSearchPrompt:hover {
    color: var(--jpmhr-gold-soft) !important;

    box-shadow: inset 0 -3px 0 var(--jpmhr-gold);
}

.pkp_navigation_primary_row .pkp_search input[type="search"],
.pkp_navigation_primary_row .pkp_search input[type="text"] {
    color: var(--jpmhr-text);
    background: var(--jpmhr-white);

    border: 1px solid var(--jpmhr-border-dark);
    border-radius: var(--jpmhr-radius-sm);
}


/* ============================================================
   38. ARTICLE LANDING PAGE (v2.0)
   .obj_article_details — title, authors, metadata, abstract,
   galleys, citation
   ============================================================ */

.obj_article_details .page_title {
    max-width: var(--jpmhr-reading-width);

    margin: 0 0 14px;

    color: var(--jpmhr-navy-dark);

    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    line-height: 1.22;
}

.obj_article_details .subtitle {
    max-width: var(--jpmhr-reading-width);

    margin: -6px 0 14px;

    color: var(--jpmhr-navy-soft);

    font-family: var(--jpmhr-serif);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.4;
}


/* Authors */

.obj_article_details .authors {
    margin: 0 0 8px;
    padding: 0;

    list-style: none;
}

.obj_article_details .authors .name {
    color: var(--jpmhr-navy);

    font-size: 1rem;
    font-weight: 600;
}

.obj_article_details .authors .affiliation,
.obj_article_details .authors .orcid {
    color: var(--jpmhr-muted);

    font-size: 0.86rem;
}

.obj_article_details .authors .orcid a {
    color: var(--jpmhr-teal);
    text-decoration: none;
}

.obj_article_details .authors .orcid a:hover,
.obj_article_details .authors .orcid a:focus-visible {
    text-decoration: underline;
}


/* Metadata strip: DOI, dates, keywords, issue */

.obj_article_details .item.doi,
.obj_article_details .item.published,
.obj_article_details .item.keywords,
.obj_article_details .item.issue,
.obj_article_details .item.copyright {
    padding: 10px 0;

    border-top: 1px solid var(--jpmhr-border);

    font-size: 0.86rem;
}

.obj_article_details .item .label {
    display: block;

    margin-bottom: 2px;

    color: var(--jpmhr-muted);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.obj_article_details .item.doi a {
    color: var(--jpmhr-teal);

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    overflow-wrap: anywhere;
}


/* Abstract */

.obj_article_details .item.abstract {
    max-width: var(--jpmhr-reading-width);

    margin: 22px 0;
    padding: 20px 0 20px 20px;

    border-left: 3px solid var(--jpmhr-gold);

    font-size: 1.02rem;
    line-height: 1.75;
}

.obj_article_details .item.abstract h2,
.obj_article_details .item.abstract .label {
    margin: 0 0 8px;

    color: #946700;

    font-family: var(--jpmhr-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.obj_article_details .item.abstract p {
    margin-top: 0;
}

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


/* Galley / PDF buttons */

.obj_article_details .galleys {
    margin: 18px 0;
}

.obj_article_details .galleys .obj_galley_link {
    display: inline-block;

    margin: 0 6px 6px 0;
    padding: 9px 16px;

    color: var(--jpmhr-white);
    background: var(--jpmhr-navy);

    border: 0;
    border-radius: var(--jpmhr-radius-sm);

    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;

    transition: background var(--jpmhr-transition);
}

.obj_article_details .galleys .obj_galley_link:hover,
.obj_article_details .galleys .obj_galley_link:focus-visible {
    background: var(--jpmhr-teal);
    color: var(--jpmhr-white);
}


/* How to cite */

.obj_article_details .item.citation .csl-entry,
.obj_article_details .item.citation .citation_format_value {
    padding: 12px 14px;

    background: var(--jpmhr-aqua-light);

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius-sm);

    font-size: 0.86rem;
    line-height: 1.55;

    overflow-wrap: anywhere;
}


/* References */

.obj_article_details .item.references {
    max-width: var(--jpmhr-reading-width);

    font-size: 0.88rem;
    line-height: 1.6;
}

.obj_article_details .item.references .value > p,
.obj_article_details .item.references .value > div {
    padding-left: 1.2em;
    margin-bottom: 0.5em;
}


/* ============================================================
   39. ISSUE TABLE OF CONTENTS (v2.0)
   Typographic list with hairline rules, small-caps section labels
   ============================================================ */

.obj_issue_toc .section > h2 {
    margin: 30px 0 8px;
    padding-bottom: 6px;

    border-bottom: 2px solid var(--jpmhr-navy-dark);

    color: var(--jpmhr-navy-dark);

    font-family: var(--jpmhr-sans) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.obj_issue_toc .cmp_article_list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.obj_issue_toc .cmp_article_list > li {
    padding: 18px 0;

    border-bottom: 1px solid var(--jpmhr-border);
}

.obj_issue_toc .cmp_article_list > li:last-child {
    border-bottom: 0;
}

.obj_article_summary .title {
    margin: 0 0 4px;

    font-size: 1.12rem;
    line-height: 1.35;
}

.obj_article_summary .title a {
    text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.obj_article_summary .subtitle {
    margin: 0 0 4px;

    color: var(--jpmhr-navy-soft);

    font-family: var(--jpmhr-serif);
    font-size: 0.98rem;
}

.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages {
    color: var(--jpmhr-muted);

    font-size: 0.84rem;
}

.obj_article_summary .cmp_button_wrapper .obj_galley_link {
    display: inline-block;

    margin: 6px 6px 0 0;
    padding: 4px 11px;

    color: var(--jpmhr-navy);
    background: var(--jpmhr-white);

    border: 1px solid var(--jpmhr-border-dark);
    border-radius: 4px;

    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;

    transition: border-color var(--jpmhr-transition),
                color var(--jpmhr-transition);
}

.obj_article_summary .cmp_button_wrapper .obj_galley_link:hover,
.obj_article_summary .cmp_button_wrapper .obj_galley_link:focus-visible {
    color: var(--jpmhr-teal);

    border-color: var(--jpmhr-teal);
}


/* Issue cover + description block */

.obj_issue_toc .heading {
    margin-bottom: 24px;
    padding-bottom: 20px;

    border-bottom: 1px solid var(--jpmhr-border);
}

.obj_issue_toc .cover img {
    max-width: 220px;
    height: auto;

    border: 1px solid var(--jpmhr-border);
    border-radius: var(--jpmhr-radius-xs);
}

.obj_issue_toc .published {
    color: var(--jpmhr-muted);

    font-size: 0.86rem;
}


/* ============================================================
   40. SIDEBAR BLOCKS (v2.1)
   Container keeps its own gutter so blocks never touch the
   main-column rule.
   ============================================================ */

.pkp_structure_sidebar {
    padding: 28px 16px 28px 32px !important;

    border-left: 1px solid var(--jpmhr-border);
}

.pkp_structure_sidebar .pkp_block {
    margin: 0 0 26px;
    padding: 0 0 18px;

    border-bottom: 1px solid var(--jpmhr-border);
}

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

    border-bottom: 0;
}

.pkp_structure_sidebar .pkp_block .title {
    margin: 0 0 10px;

    color: var(--jpmhr-muted);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pkp_structure_sidebar .pkp_block .content {
    padding: 0;
}

.pkp_structure_sidebar .pkp_block a {
    color: var(--jpmhr-navy);

    font-size: 0.92rem;
    text-decoration: none;
}

.pkp_structure_sidebar .pkp_block a:hover,
.pkp_structure_sidebar .pkp_block a:focus-visible {
    color: var(--jpmhr-teal);

    text-decoration: underline;
    text-underline-offset: 2px;
}

.pkp_structure_sidebar .pkp_block ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.pkp_structure_sidebar .pkp_block li + li {
    margin-top: 7px;
}

@media (max-width: 992px) {

    .pkp_structure_sidebar {
        padding: 24px 0 0 !important;

        border-left: 0;
        border-top: 1px solid var(--jpmhr-border);
    }

}


/* ============================================================
   41. TABLES AND FIGURES IN NATIVE PAGES (v2.0)
   Applies to OJS content areas; custom .jpmhr-table rules in
   section 17 remain in force for custom pages.
   ============================================================ */

.pkp_structure_main .page table:not(.jpmhr-table) {
    width: 100%;

    border-collapse: collapse;

    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.pkp_structure_main .page table:not(.jpmhr-table) th {
    padding: 9px 10px;

    border-top: 2px solid var(--jpmhr-navy-dark);
    border-bottom: 1px solid var(--jpmhr-navy-dark);

    text-align: left;

    font-weight: 600;
}

.pkp_structure_main .page table:not(.jpmhr-table) td {
    padding: 8px 10px;

    border-bottom: 1px solid var(--jpmhr-border);

    vertical-align: top;
}

.pkp_structure_main .page caption,
.pkp_structure_main .page figcaption {
    caption-side: top;

    margin-bottom: 6px;

    color: var(--jpmhr-muted);

    font-size: 0.86rem;
    text-align: left;
}

.pkp_structure_main .page figure {
    margin: 20px 0;
}


/* ============================================================
   42. ACCENT DISCIPLINE (v2.0)
   Gold stays on: hero top rule, abstract rule, kickers.
   Removed from: every section h2 underline (kept on page h1).
   ============================================================ */

/* (v2.3) content:none override removed — the section 06 rule
   it cancelled no longer exists. */

.jpmhr-section > h2,
.jpmhr-policy-section > h2,
.jpmhr-about-section > h2,
.jpmhr-editorial-section > h2 {
    padding-bottom: 8px;

    border-bottom: 1px solid var(--jpmhr-border);
}


/* ============================================================
   43. QUIET SECTIONS — OPT-IN (v2.0)
   ------------------------------------------------------------
   OFF BY DEFAULT so existing custom pages do not change.
   To switch policy/about/editorial sections from boxed cards
   to rule-separated editorial blocks, remove the comment
   markers around the block below. Add class "is-boxed" to any
   section that should keep the card look.
   ============================================================ */

/*
.jpmhr-section:not(.is-boxed),
.jpmhr-policy-section:not(.is-boxed),
.jpmhr-about-section:not(.is-boxed),
.jpmhr-editorial-section:not(.is-boxed) {
    padding: 26px 0;

    background: transparent;

    border: 0;
    border-bottom: 1px solid var(--jpmhr-border);
    border-radius: 0;
}

.jpmhr-section:not(.is-boxed):last-child,
.jpmhr-policy-section:not(.is-boxed):last-child,
.jpmhr-about-section:not(.is-boxed):last-child,
.jpmhr-editorial-section:not(.is-boxed):last-child {
    border-bottom: 0;
}
*/


/* ============================================================
   44. PRINT STYLESHEET (v2.0)
   Article landing page and general pages.
   The only literal generated text in this file is the journal
   name below; it exists ONLY inside @media print and is never
   rendered on screen or to crawlers.
   ============================================================ */

@page {
    margin: 18mm 16mm;
}

@media print {

    /* Chrome that has no meaning on paper */

    .pkp_structure_head,
    .pkp_structure_sidebar,
    .pkp_structure_footer,
    .pkp_navigation_user_wrapper,
    .pkp_skip_link,
    .cmp_skip_to_content,
    .cmp_breadcrumbs,
    .obj_article_details .galleys,
    .obj_article_details .item.citation_formats,
    .obj_article_summary .cmp_button_wrapper,
    .jpmhr-btn {
        display: none !important;
    }


    /* Full-width content */

    .pkp_structure_main,
    .pkp_structure_content,
    .pkp_page_content,
    .obj_article_details,
    .page {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }


    /* Type for paper */

    body,
    .pkp_structure_main .page,
    .obj_article_details {
        color: #000 !important;
        background: #fff !important;

        font-size: 11pt;
        line-height: 1.5;
    }

    h1, h2, h3, h4 {
        color: #000 !important;

        page-break-after: avoid;
        break-after: avoid;
    }

    p, li, blockquote, table, figure {
        orphans: 3;
        widows: 3;
    }

    table, figure, .obj_article_details .item.abstract {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }


    /* Remove screen decoration */

    .jpmhr-page-intro,
    .jpmhr-policy-intro,
    .jpmhr-about-intro,
    .jpmhr-editorial-intro,
    .jpmhr-section,
    .jpmhr-policy-section,
    .jpmhr-about-section,
    .jpmhr-editorial-section,
    .jpmhr-card,
    .jpmhr-link-grid > a,
    .jpmhr-policy-links-grid > a,
    .jpmhr-link-group > a,
    .jpmhr-resource-grid > a,
    .jpmhr-directory-grid > a,
    a.jpmhr-card-link,
    a.jpmhr-policy-card,
    a.jpmhr-policy-link,
    a.jpmhr-external-link,
    .obj_article_details .item.citation .csl-entry {
        background: none !important;

        color: #000 !important;

        border-color: #999 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }


    /* Print header on the article page */

    .obj_article_details .page_title::before {
        content: "Journal of Precision Medicine and Health Research";

        display: block;

        margin-bottom: 10pt;
        padding-bottom: 4pt;

        border-bottom: 1px solid #000;

        font-family: var(--jpmhr-sans);
        font-size: 8.5pt;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .obj_article_details .page_title {
        font-size: 20pt;
        line-height: 1.2;
    }

    .obj_article_details .item.abstract {
        border-left-color: #000;
    }

    /* DOI block is already visible on the page; keep it prominent */

    .obj_article_details .item.doi {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }


    /* Links */

    a,
    a:visited {
        color: #000 !important;

        text-decoration: none !important;
    }

    /* Show the destination of external links; internal anchors omitted */

    .obj_article_details a[href^="http"]:not(.obj_galley_link)::after,
    .jpmhr-page a[href^="http"]::after {
        content: " (" attr(href) ")";

        color: #444;

        font-size: 8.5pt;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;

        overflow-wrap: anywhere;
    }

    /* Do not print the DOI URL twice (link text is already the URL) */

    .obj_article_details .item.doi a::after {
        content: none;
    }

}


/* ============================================================
   45. MOBILE HEADER, MENU AND TABLES (v2.2)
   Default theme switches to an off-canvas menu below 992px.
   Everything inside that panel sits on the base-colour
   background, so text there must be white; the toggle sits on
   the white masthead, so its bars must be dark.
   ============================================================ */

/* v2.3 FIX (critical)
   ------------------------------------------------------------
   In v2.2 every rule below sat OUTSIDE a media query. In the
   default theme, .pkp_site_nav_menu also wraps the user
   navigation (Login / Register) and search on DESKTOP, so:
   - the panel background painted a navy band into the white
     masthead design of section 37;
   - user-nav links were forced white → white-on-white
     (invisible) wherever the masthead stayed white;
   - the hamburger toggle could be re-shown on desktop because
     the unconditional display:inline-block loads after the
     theme's desktop display:none.
   Everything panel-related is therefore now scoped to the
   off-canvas breakpoint (<= 992px). Desktop keeps the section
   37 treatment: white masthead, dark user links, navy primary
   row, white primary links. */

@media (max-width: 992px) {

    /* Hamburger toggle — bars drawn dark on the white masthead */

    .pkp_site_nav_toggle {
        display: inline-block;

        color: var(--jpmhr-navy-dark) !important;
    }

    .pkp_site_nav_toggle span,
    .pkp_site_nav_toggle span::before,
    .pkp_site_nav_toggle span::after,
    .pkp_site_nav_toggle .pkp_screen_reader ~ span {
        background: var(--jpmhr-navy-dark) !important;
        border-color: var(--jpmhr-navy-dark) !important;
    }

    .pkp_site_nav_toggle:hover span,
    .pkp_site_nav_toggle:hover span::before,
    .pkp_site_nav_toggle:hover span::after {
        background: var(--jpmhr-teal) !important;
    }

    .pkp_site_nav_toggle:focus-visible {
        outline: 2px solid var(--jpmhr-teal);   /* v2.3: solid */
        outline-offset: 2px;
    }


    /* Off-canvas menu panel */

    .pkp_site_nav_menu {
        background: var(--jpmhr-navy) !important;
    }

    .pkp_site_nav_menu .pkp_navigation_primary_row,
    .pkp_site_nav_menu .pkp_navigation_user_wrapper,
    .pkp_site_nav_menu .pkp_search {
        background: transparent !important;
    }

    .pkp_site_nav_menu a,
    .pkp_site_nav_menu .pkp_navigation_user a,
    .pkp_site_nav_menu .pkp_navigation_user > li > a,
    .pkp_site_nav_menu .pkp_navigation_primary > li > a {
        color: var(--jpmhr-white) !important;
    }

    /* v2.3.1: search stays gold inside the panel as well */

    .pkp_site_nav_menu .pkp_search a,
    .pkp_site_nav_menu .pkp_search .headerSearchPrompt {
        color: var(--jpmhr-gold-soft) !important;
    }

    .pkp_site_nav_menu .pkp_navigation_user a:hover,
    .pkp_site_nav_menu .pkp_navigation_primary > li > a:hover,
    .pkp_site_nav_menu .pkp_search a:hover {
        color: var(--jpmhr-gold-soft) !important;
    }

    /* Submenus inside the panel: white card, dark text (already
       set in section 37) — keep it that way */

    .pkp_site_nav_menu .pkp_navigation_primary > li > ul a,
    .pkp_site_nav_menu .pkp_navigation_user ul a {
        color: var(--jpmhr-navy) !important;
    }

    .pkp_site_nav_menu .pkp_navigation_user_wrapper {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

}


@media (max-width: 992px) {

    /* Journal name: wrap, never clip */

    .pkp_site_name .is_text,
    .pkp_site_name .is_text a,
    .pkp_site_name a {
        display: block;

        max-width: 100%;

        font-size: 1.18rem !important;
        line-height: 1.3;
        text-align: left;

        white-space: normal;
        overflow-wrap: normal;
    }

    .pkp_structure_head .pkp_head_wrapper,
    .pkp_navigation_primary_row .pkp_head_wrapper {
        padding-inline: 16px;   /* v2.3: consistent mobile gutter */
    }


    /* Search: reset the desktop nudge, run full width in the panel */

    .pkp_navigation_primary_row .pkp_search {
        position: static !important;

        right: auto;

        width: 100%;

        margin: 0 !important;
        padding: 10px 0 !important;
    }

    .pkp_navigation_primary_row .pkp_search a,
    .pkp_navigation_primary_row .pkp_search .headerSearchPrompt {
        display: block;

        padding: 8px 0 !important;

        white-space: normal;
    }

    .pkp_navigation_primary_row .pkp_search .search_controls {
        position: static;

        width: 100%;
    }

    .pkp_navigation_primary_row .pkp_search input[type="search"],
    .pkp_navigation_primary_row .pkp_search input[type="text"] {
        width: 100%;

        min-height: 44px;

        font-size: 1rem;    /* v2.3: 16px stops iOS focus zoom */
    }


    /* v2.3: same iOS-zoom guard for native OJS forms
       (login, register, contact, submission metadata) */

    .pkp_structure_main input[type="text"],
    .pkp_structure_main input[type="email"],
    .pkp_structure_main input[type="password"],
    .pkp_structure_main input[type="search"],
    .pkp_structure_main input[type="url"],
    .pkp_structure_main input[type="number"],
    .pkp_structure_main select,
    .pkp_structure_main textarea {
        font-size: 1rem;
    }


    /* Menu items: comfortable tap targets, aligned */

    .pkp_site_nav_menu .pkp_navigation_primary > li > a,
    .pkp_site_nav_menu .pkp_navigation_user > li > a {
        display: block;

        min-height: 44px;

        padding: 10px 0;

        line-height: 1.4;
    }

    .pkp_site_nav_menu .pkp_navigation_primary > li > ul {
        margin: 6px 0 10px;
    }

    .pkp_site_nav_menu .pkp_navigation_primary > li > ul a {
        display: block;

        padding: 9px 12px;
    }


    /* Tables: scroll horizontally instead of shattering words */

    .jpmhr-table-wrap,
    .pkp_structure_main .page table:not(.jpmhr-table) {
        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .jpmhr-table,
    .jpmhr-policy-table {
        min-width: 640px;
    }

    .jpmhr-table th,
    .jpmhr-table td,
    .jpmhr-policy-table th,
    .jpmhr-policy-table td,
    .pkp_structure_main .page table th,
    .pkp_structure_main .page table td {
        overflow-wrap: normal;
        word-break: normal;

        hyphens: manual;
    }

    .jpmhr-table td a,
    .jpmhr-policy-table td a {
        overflow-wrap: anywhere;
    }

}


/* ============================================================
   46. MICRO VIEWPORTS — <= 360px (v2.3)
   Small Androids, iPhone SE/mini class, split-screen phones.
   Keeps the layout breathing without changing structure.
   ============================================================ */

@media (max-width: 360px) {

    /* Tighter card padding, more usable line length */

    .jpmhr-page-intro,
    .jpmhr-policy-intro,
    .jpmhr-about-intro,
    .jpmhr-editorial-intro,
    .jpmhr-section,
    .jpmhr-policy-section,
    .jpmhr-about-section,
    .jpmhr-editorial-section {
        padding: 16px 14px !important;
    }

    .page_index_journal .homepage_about,
    .page_index_journal .additional_content,
    .page_index_journal .journal_description,
    .page_index_journal .homepage_additional,
    .page_index_journal .pkp_structure_main .additional_content,
    .page_index_journal .pkp_structure_main .homepage_about {
        padding: 17px 14px !important;
    }


    /* Header: keep the logo from dominating the viewport */

    .pkp_site_name .is_img img {
        max-height: 56px;
    }

    .pkp_site_name .is_text,
    .pkp_site_name .is_text a,
    .pkp_site_name a {
        font-size: 1.06rem !important;
    }


    /* Article title on tiny screens */

    .obj_article_details .page_title {
        font-size: 1.45rem;
    }


    /* Chips and tables */

    .jpmhr-highlights span,
    .jpmhr-policy-highlights span,
    .jpmhr-about-highlights span,
    .jpmhr-editorial-highlights span {
        padding: 5px 9px;

        font-size: 0.7rem;
    }

    .jpmhr-table,
    .jpmhr-policy-table {
        font-size: 0.82rem;
    }

    .jpmhr-table th,
    .jpmhr-table td,
    .jpmhr-policy-table th,
    .jpmhr-policy-table td {
        padding: 9px 10px;
    }


    /* Abstract: reclaim the left inset a little */

    .obj_article_details .item.abstract {
        padding-left: 14px;
    }

}


/* ============================================================
   END OF FILE
   ============================================================ */