/* Site theme: navy blue to match navbar (#0B3D91). */
:root {
    --kjohns-blue: #0B3D91;
    --kjohns-blue-hover: #0b5ed7;
}

/* General Styles */
.abstract-box {
    background:#f8f9fa;
    padding:20px;
    border-left:4px solid var(--kjohns-blue);
    margin-bottom:25px;
}

/* Main article title: plain black per editorial style (title is already
   emphasised by large size + bold; colouring it would clash with the
   blue brand elements below). */
.article-title {
    color: #000;
}

.sidebar-sticky {
    position: sticky;
    top:20px;
}

.keyword-box span {
    background:#e9ecef;
    padding:5px 10px;
    margin-right:6px;
    margin-bottom:5px;
    display:inline-block;
    border-radius:4px;
    font-size:13px;
}

.section-title {
    border-bottom:1px solid #ddd;
    padding-bottom:6px;
    margin-top:28px;
    margin-bottom:15px;
}

.pdf-viewer, .journal-iframe {
    border:1px solid #ddd;
    border-radius:5px;
}

.article-body {
    column-count: 2;
    column-gap: 40px;
    text-align: justify;
    margin-bottom: 25px;
    /* CSS counters drive the auto-numbered "Fig. N." / "Table N." prefix
       on captions below. They only increment when a figcaption / caption
       element is rendered, so text that is merely mentioned in prose
       ("see Fig. 1 above") is never counted twice. */
    counter-reset: kjohns-figure kjohns-table;
}

@media(max-width: 992px) {
    .article-body {
        column-count: 1;
    }
}

/* ---------------------------------------------------------------------------
 * Figure & table caption styling (UX_REVIEW.md §6.1 #1).
 *
 * Applies to any rich HTML the DOCX → HTML pipeline emits inside the
 * article body. The intent:
 *   - Figures and tables span the full article-body width (they break
 *     out of the 2-column text layout so images aren't compressed).
 *   - Captions use the serif body font in italic at a slightly smaller
 *     size, centered under the figure / above the table, to match
 *     scholarly-print convention.
 *   - Auto-number captions "Fig. 1.", "Table 1." via CSS counters so
 *     even un-numbered source markup gets consistent labels.
 * -------------------------------------------------------------------------*/
.article-body figure,
.article-body table {
    column-span: all;
    -webkit-column-span: all;
    margin: 1.25rem auto;
    max-width: 100%;
    break-inside: avoid;
    page-break-inside: avoid;
}

.article-body figure {
    display: block;
    text-align: center;
}

.article-body figure > img,
.article-body figure > picture > img,
.article-body figure > svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.article-body figure > figcaption,
.article-body table > caption {
    display: block;
    font-family: var(--font-serif, "Source Serif 4", Georgia, "Times New Roman", serif);
    font-size: 0.9rem;
    font-style: italic;
    color: #333;
    line-height: 1.45;
    margin: 0.5rem auto 0;
    padding: 0 0.5rem;
    max-width: 42rem;
    text-align: center;
    caption-side: bottom;
}

.article-body table {
    border-collapse: collapse;
    width: 100%;
}

.article-body table > caption {
    caption-side: top;
    margin: 0 auto 0.5rem;
}

.article-body table th,
.article-body table td {
    border: 1px solid #ccc;
    padding: 0.35rem 0.55rem;
    font-size: 0.95rem;
}

.article-body table thead th {
    background: #f5f6f8;
    font-weight: 600;
}

/* CSS-counter-driven auto labels. The ``::before`` is applied once per
   caption; if the source markup already starts with "Figure" / "Table"
   the author can opt-out by adding class="no-autolabel" on the caption. */
.article-body figure > figcaption::before {
    counter-increment: kjohns-figure;
    content: "Fig. " counter(kjohns-figure) ". ";
    font-weight: 600;
    font-style: normal;
    color: #111;
}

.article-body table > caption::before {
    counter-increment: kjohns-table;
    content: "Table " counter(kjohns-table) ". ";
    font-weight: 600;
    font-style: normal;
    color: #111;
}

.article-body figure > figcaption.no-autolabel::before,
.article-body table > caption.no-autolabel::before {
    content: "";
    counter-increment: none;
}

/* Journal Container */
.journal-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.journal-main {
    flex: 1 1 65%;
}

.journal-sidebar {
    flex: 1 1 30%;
}

/* Floating Quick Nav Toolbar */
.quick-nav {
    position: fixed;
    top: 150px;
    right: 10px;
    z-index: 999;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quick-nav a {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--kjohns-blue);
    text-decoration: none;
    transition: color 0.3s, font-weight 0.3s;
}

.quick-nav a:hover {
    text-decoration: underline;
}

.quick-nav a.active {
    font-weight: bold;
    color: var(--kjohns-blue-hover);
}

/* ---------------------------------------------------------------------------
 * Print stylesheet.
 *
 * When a reader prints the article page (or "Save as PDF" from the browser),
 * strip every piece of site chrome — navbar, journal masthead, skip link,
 * quick-nav, sidebar, share/citation buttons, and the embedded PDF viewer —
 * so the printed output is a clean, single-column reading copy of the
 * article (title, authors, abstract, body, references, declarations).
 *
 * Matches the print layout we deliver in the typeset PDF: serif body,
 * generous margins, black on white. Page breaks are allowed between
 * sections but we avoid orphan headings.
 * -------------------------------------------------------------------------*/
@media print {
    @page {
        size: A4;
        margin: 18mm 16mm;
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-family: var(--font-serif, Georgia, "Times New Roman", serif);
        font-size: 11pt;
        line-height: 1.5;
    }
    /* Hide every piece of site chrome + interactive-only affordances. */
    .navbar,
    .journal-header,
    .skip-to-content,
    .quick-nav,
    .journal-sidebar,
    nav,
    footer,
    .no-print,
    .d-print-none,
    button,
    .btn,
    form,
    input,
    select,
    textarea,
    iframe,
    .pdf-viewer {
        display: none !important;
    }
    /* Force single-column article body and remove column gutters. */
    .article-body,
    .article-body p,
    .article-body li {
        column-count: 1 !important;
        column-gap: 0 !important;
        text-align: justify;
        font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    }
    .journal-container {
        display: block !important;
    }
    .journal-main {
        flex: none !important;
        width: 100% !important;
    }
    /* Links: show the target URL once, in light grey, after the link text. */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
        word-break: break-all;
    }
    /* Don't print URLs for on-page anchors or mailto: links. */
    a[href^="#"]::after,
    a[href^="mailto:"]::after {
        content: "";
    }
    /* Keep abstract visually distinct on paper — thin rule, no coloured
       left bar (which prints as a heavy block on low-ink monochrome). */
    .abstract-box {
        background: #fff !important;
        border: 1px solid #999 !important;
        padding: 10pt 12pt;
    }
    /* Avoid splitting headings from the first line of the following
       paragraph (standard scholarly-print convention). */
    h1, h2, h3, h4, h5, h6,
    .section-title {
        page-break-after: avoid;
        break-after: avoid;
        color: #000 !important;
    }
    /* Figures and tables stay together with their captions. */
    figure, table {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* Keep caption typography consistent in print: serif italic, centered,
       one notch smaller than body copy. The ::before counter labels are
       inherited from the screen stylesheet so "Fig. 1."/"Table 1." still
       print even when the browser strips background colours. */
    .article-body figure > figcaption,
    .article-body table > caption {
        font-size: 10pt;
        font-style: italic;
        color: #000 !important;
        text-align: center;
    }
    .article-body figure > figcaption::before,
    .article-body table > caption::before {
        color: #000 !important;
    }
}