/*
 * Article pages (Abstract / Fulltext) – Bentham Open Science Preflight theme layer.
 *
 * article-core.css carries the migrated article component styles. This file:
 *   1. binds those components to the Preflight palette (--bos-* tokens from site-overrides.css),
 *   2. replaces the inline <style> blocks of the source article pages
 *      (early-view note, supplementary buttons, ORCID badge ...) with Preflight colours,
 *   3. adapts the layout to the Preflight header / sidebar and to small screens.
 *
 * Every rule is scoped to body.pf-article-page, so no other Preflight page is affected.
 */

.pf-article-page {
    --pfa-primary: var(--bos-primary, #2b5b8a);
    --pfa-primary-dark: var(--bos-primary-dark, #1f4368);
    --pfa-heading: var(--bos-heading, #123f6d);
    --pfa-border: var(--bos-border, #d9e1e8);
    --pfa-accent: var(--bos-accent, #f78118);
    --pfa-surface: #f7fafc;
    --pfa-text: #262626;
    --pfa-muted: #595959;
}

/* ------------------------------------------------------------------ layout */
.pf-article-page .pf-article-main {
    display: block;
    width: 100%;
    max-width: 100%;
}
.pf-article-page .pf-article-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
}
.pf-article-page .pf-article-col,
.pf-article-page .article-container,
.pf-article-page article[data-design] {
    min-width: 0;
    max-width: 100%;
}
.pf-article-page article[data-design] {
    overflow-wrap: break-word;
}

/* ------------------------------------------------------- typography/colour */
.pf-article-page article[data-design] h1[property=name] {
    /*color: var(--pfa-heading);*/
    font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
    line-height: 1.25;
    margin: .75rem 0 1rem;
}
.pf-article-page article[data-design] #bodymatter h2,
.pf-article-page article[data-design] #abstracts h2,
.pf-article-page article[data-design] #bibliography h2 {
    /*color: var(--pfa-heading);*/
}
.pf-article-page article[data-design] #bodymatter h3,
.pf-article-page article[data-design] #bodymatter h4,
.pf-article-page article[data-design] #abstracts h3,
.pf-article-page article[data-design] #abstracts h4,
.pf-article-page article[data-design] #abstracts h5 {
    /*color: var(--pfa-primary-dark);*/
}
.pf-article-page article[data-design] #bodymatter a,
.pf-article-page article[data-design] #abstracts a,
.pf-article-page article[data-design] #backmatter a {
    /*color: var(--pfa-primary);*/
}
.pf-article-page article[data-design] #bodymatter a:hover,
.pf-article-page article[data-design] #abstracts a:hover,
.pf-article-page article[data-design] #backmatter a:hover {
    /*color: var(--pfa-accent);*/
}
.pf-article-page article[data-design] a[role=doc-biblioref] {
    /*font-weight: 700;*/
    text-decoration: none;
}
.pf-article-page article[data-design] a[role=doc-biblioref]:hover,
.pf-article-page article[data-design] a[role=doc-biblioref]:focus {
    text-decoration: underline;
}
.pf-article-page .breadcrumbs .crumb {
    color: var(--pfa-heading);
}
.pf-article-page .breadcrumbs .current-crumb {
    color: var(--pfa-muted);
}

/* meta panel: article type + share */
.pf-article-page .meta-panel {
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.pf-article-page .meta-panel__type,
.pf-article-page .meta-panel__type span {
    color: var(--pfa-primary);
    letter-spacing: .04em;
}

/* authors line */
.pf-article-page .contributors .authors a {
    color: var(--pfa-text);
}
.pf-article-page .contributors .authors a:hover {
    color: var(--pfa-primary);
}
.pf-article-page .contributors .to-authors-affiliations {
    color: var(--pfa-primary) !important;
    font-weight: 700;
}
.pf-article-page .self-citation {
    font-size: .85rem;
    color: var(--pfa-muted);
    overflow-wrap: anywhere;
}
.pf-article-page .self-citation [property=isPartOf] {
    color: var(--pfa-heading);
    font-weight: 700;
}

/* ORCID badge (a green inline style on the source page) */
.pf-article-page .pf-orcid-badge {
    text-decoration: none !important;
    margin-left: 2px;
}
.pf-article-page .pf-orcid-badge span {
    display: inline-block;
    min-width: 16px;
    padding: 2px 3px;
    border-radius: 50px;
    background: var(--pfa-primary);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.pf-article-page .pf-orcid-badge:hover span,
.pf-article-page .pf-orcid-badge:focus span {
    background: var(--pfa-accent);
}
.pf-article-page .pf-corresp-mail {
    text-decoration: none !important;
    color: var(--pfa-primary) !important;
    margin-left: 2px;
}

/* share links (replace the third-party share widget) */
.pf-article-page .pf-share-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pf-article-page .pf-share-links li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pf-article-page .pf-share-links li::before,
.pf-article-page .pf-share-links li::marker {
    content: none;
}
.pf-article-page .pf-share-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--pfa-border);
    background: #fff;
    color: var(--pfa-primary) !important;
    font-size: 1rem;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pf-article-page .pf-share-links a:hover,
.pf-article-page .pf-share-links a:focus {
    background: var(--pfa-primary);
    border-color: var(--pfa-primary);
    color: #fff !important;
}

/* preflight / early-view note (source inline styles, Preflight colours) */
.pf-article-page .early-view-note {
    margin: 12px 0 18px;
    background: var(--pfa-surface);
    border: 1px solid var(--pfa-border);
    border-left: 4px solid var(--pfa-accent);
    font-size: 14px;
    color: var(--pfa-text);
}
.pf-article-page .early-view-note summary {
    position: relative;
    padding: 12px 45px 12px 14px;
    cursor: pointer;
    list-style: none;
    line-height: 1.6;
}
.pf-article-page .early-view-note summary::-webkit-details-marker { display: none; }
.pf-article-page .early-view-note summary::marker { content: ""; }
.pf-article-page .early-view-note .note-label {
    font-weight: 700;
    color: var(--pfa-accent);
    margin-right: 4px;
}
.pf-article-page .early-view-note:not([open]) .note-text {
    display: inline-block;
    max-width: calc(100% - 55px);
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-article-page .early-view-note[open] .note-text { white-space: normal; }
.pf-article-page .early-view-note summary::after {
    content: "";
    position: absolute;
    right: 17px;
    top: 17px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--pfa-heading);
    border-bottom: 2px solid var(--pfa-heading);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.pf-article-page .early-view-note[open] summary::after { transform: rotate(225deg); top: 21px; }
.pf-article-page .early-view-note summary:hover { background: #eef3f7; }
.pf-article-page .early-view-note summary:focus-visible { outline: 2px solid var(--pfa-primary); outline-offset: 2px; }

/* info panel: tools + previous / next */
.pf-article-page .info-panel {
    flex-wrap: wrap;
    gap: .5rem;
}
.pf-article-page .info-panel .btn--slim {
    color: var(--pfa-primary);
}
.pf-article-page .info-panel .btn.btn-secondary {
    background: var(--pfa-primary);
    border-color: var(--pfa-primary);
    color: #fff;
}
.pf-article-page .info-panel .btn.btn-secondary:hover,
.pf-article-page .info-panel .btn.btn-secondary:focus {
    background: var(--pfa-primary-dark);
    border-color: var(--pfa-primary-dark);
}
.pf-article-page .pf-article-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}
.pf-article-page .pf-article-nav a {
    gap: .35rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.pf-article-page .pf-article-nav a:hover {
    color: var(--pfa-accent);
}
.pf-article-page .pf-article-nav__sep {
    color: var(--pfa-border);
}

/* download buttons (below abstract / Download panel) */
.pf-article-page .pf-abstract-downloads,
.pf-article-page .pf-collateral-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.pf-article-page .btn-outline-secondary.mini-title,
.pf-article-page .btn-outline-primary.mini-title,
.pf-article-page .btn2 {
    border: 1px solid var(--pfa-primary);
    border-radius: 2rem;
    color: var(--pfa-primary) !important;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
}
.pf-article-page .btn-outline-secondary.mini-title:hover,
.pf-article-page .btn-outline-secondary.mini-title:focus,
.pf-article-page .btn-outline-primary.mini-title:hover,
.pf-article-page .btn-outline-primary.mini-title:focus,
.pf-article-page .btn2:hover,
.pf-article-page .core-supplementary-material .core-link a:hover,
.pf-article-page .core-supplementary-material .core-link a:focus-visible {
    background: var(--pfa-primary);
    border-color: var(--pfa-primary);
    color: #fff !important;
}
.pf-article-page .pf-supplementary-missing {
    opacity: .6;
    cursor: not-allowed;
}

/* section navigation (left) */
.pf-article-page .sections-navbar ul a {
    /*color: var(--pfa-heading);*/
}
.pf-article-page .sections-navbar ul a.active,
.pf-article-page .sections-navbar ul a:hover {
    color: var(--pfa-primary);
}
.pf-article-page .sections-navbar ul a:before {
    background-color: var(--pfa-accent) !important;
}
.pf-article-page .sections-navbar__trigger {
    color: var(--pfa-primary) !important;
}

/* sticky article bar (cloned from the page header by the article scripts) */
.pf-article-page .st-header__content {
    background: var(--pfa-heading) !important;
    color: #fff;
}
.pf-article-page .st-header__item + .st-header__item {
    border-left-color: rgba(255, 255, 255, .18);
}
.pf-article-page .st-header .breadcrumbs .crumb,
.pf-article-page .st-header .breadcrumbs i,
.pf-article-page .st-header__item i[class*=icon-] {
    color: #fff;
}
.pf-article-page .st-header .breadcrumbs .current-crumb {
    color: #fdd4ad;
}

/* reference pop-up / tooltips: Preflight's global build disables the .fade opacity
   rule, but these article components rely on it to stay hidden until opened */
.pf-article-page .references-pop-up.fade:not(.show),
.pf-article-page .tooltip.fade:not(.show) {
    opacity: 0;
    visibility: hidden;
}
.pf-article-page .references-pop-up.fade {
    transition: opacity .15s linear, visibility .15s linear;
}
.pf-article-page .references-pop-up {
    border-top: 3px solid var(--pfa-accent);
}
.pf-article-page .references-pop-up__title {
    color: var(--pfa-heading);
}

/* highlighted reference / focused element */
.pf-article-page .focused:not([role=tabpanel]):not(section):not(article) {
    background: rgba(247, 129, 24, .12);
    box-shadow: inset 3px 0 0 var(--pfa-accent);
}

/* pill menu */
.pf-article-page nav[data-core-nav=collateral] a:hover i,
.pf-article-page nav[data-core-nav=collateral] a.active i {
    color: var(--pfa-accent);
}
.pf-article-page [role=tabpanel] > header h2 i {
    color: var(--pfa-primary);
}

/* citation export form */
.pf-article-page .pf-citation-export select {
    width: 100%;
    max-width: 100%;
    padding: 7px;
    color: var(--pfa-muted);
    border: 1px solid var(--pfa-border);
    border-radius: 4px;
    background: #fff;
}
.pf-article-page .pf-citation-export .form-button {
    margin-top: 10px;
    padding: .5rem 1.25rem;
    border: 0;
    border-radius: 2rem;
    background: var(--pfa-primary);
    color: #fff;
    font-weight: 700;
    letter-spacing: .03em;
}
.pf-article-page .pf-citation-export .form-button:hover:not([disabled]) {
    background: var(--pfa-primary-dark);
}
.pf-article-page .pf-citation-export .form-button[disabled] {
    background: #c9d1d8;
    cursor: not-allowed;
}
.pf-article-page .pf-metrics-empty {
    color: var(--pfa-muted);
    font-size: .875rem;
}
.pf-article-page .pf-affiliation-email {
    margin-top: .35rem;
    overflow-wrap: anywhere;
}
.pf-article-page .affiliations hr {
    border-color: var(--pfa-border);
    margin: .5rem 0;
}
.pf-article-page .orcid-id {
    overflow-wrap: anywhere;
}

/* figures / tables / equations */
.pf-article-page article[data-design] img {
    max-width: 100%;
    height: auto;
}
.pf-article-page article[data-design] .table-wrap,
.pf-article-page article[data-design] .collapsible-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pf-article-page article[data-design] figure .heading,
.pf-article-page article[data-design] figure .caption strong {
    /*color: var(--pfa-heading);*/
}

/* references */
.pf-article-page #bibliography [role=doc-biblioentry] .label {
    /*color: var(--pfa-heading);*/
    /*color: var(--pfa-heading);*/
    font-weight: 700;
}
.pf-article-page #bibliography .citation-content {
    overflow-wrap: anywhere;
}

/* sidebar (Preflight widgets) */
.pf-article-page .pf-article-aside {
    min-width: 0;
}
.pf-article-page .pf-article-aside__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.pf-article-page .pf-article-aside__cover {
    text-align: center;
}
.pf-article-page .pf-article-aside__cover img {
    max-width: 200px;
    width: 100%;
    height: auto;
    border: 1px solid var(--pfa-border);
    box-shadow: 0 6px 18px rgba(18, 63, 109, .12);
}
.pf-article-page .pf-article-aside .preflight-volume-widget {
    width: 100%;
    max-width: 100%;
}

/* back to top */
.pf-article-page .back-to-top__action__ring {
    stroke: var(--pfa-accent);
}

/* not found / unavailable */
.pf-article-page .pf-article-notfound {
    max-width: 760px;
    margin: 3rem auto 4rem;
    padding: 0 1rem;
    text-align: center;
}
.pf-article-page .pf-article-notfound h1 {
    color: var(--pfa-heading);
}
.pf-article-page .pf-article-unavailable {
    padding: 1rem;
    border: 1px solid var(--pfa-border);
    border-left: 4px solid var(--pfa-accent);
    background: var(--pfa-surface);
}

/* corresponding-author modal */
.pf-article-page .pf-corresp-modal .modal-title {
    color: var(--pfa-heading);
    font-size: 1rem;
}
.pf-article-page .pf-corresp-modal .modal-body a {
    color: var(--pfa-primary);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1199.98px) {
    .pf-article-page .pf-article-aside__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        border-top: 1px solid var(--pfa-border);
        margin-top: 1rem;
    }
    .pf-article-page .pf-article-aside__cover img { max-width: 150px; }
    .pf-article-page .pf-article-aside .preflight-volume-widget { flex: 1 1 280px; }
}

@media (max-width: 767.98px) {
    .pf-article-page .info-panel__left-content,
    .pf-article-page .info-panel__right-content {
        max-width: 100%;
    }
    .pf-article-page .early-view-note summary {
        padding-right: 36px;
    }
}

@media (max-width: 575.98px) {
    .pf-article-page .pf-article-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .pf-article-page .pf-article-aside__inner {
        flex-direction: column;
    }
    .pf-article-page .pf-article-aside__cover img { max-width: 140px; }
    .pf-article-page .pf-article-nav a span { display: none; }
    .pf-article-page .pf-share-links a { width: 30px; height: 30px; }
    .pf-article-page .references-pop-up {
        right: .5rem;
        left: .5rem;
        width: auto;
    }
}

/* ---------------------------------------------- pill panels / mobile bar */
.pf-article-page [id^="core-collateral-"] > header {
    background: var(--pfa-heading) !important;
    color: #fff;
}
.pf-article-page [id^="core-collateral-"] > header h2,
.pf-article-page [id^="core-collateral-"] > header h2 i,
.pf-article-page [id^="core-collateral-"] > header button {
    color: #fff !important;
}
.pf-article-page [id^="core-collateral-"] > header button[data-close] {
    background: rgba(255, 255, 255, .12);
}
.pf-article-page [id^="core-collateral-"] > header button[data-close]:hover {
    background: var(--pfa-accent);
}
.pf-article-page .sticky-menu {
    background: var(--pfa-heading) !important;
}
.pf-article-page .sticky-menu a.active,
.pf-article-page nav[data-core-nav=collateral] a.active {
    background: var(--pfa-primary) !important;
    color: #fff !important;
}
.pf-article-page .sticky-menu a.active i,
.pf-article-page nav[data-core-nav=collateral] a.active i {
    color: #fff !important;
}
.pf-article-page li:has(> a[href="#core-collateral-fulltext-options"].inactive) {
    display: none !important;
}
.pf-article-page .btn-dark.figure-pop-btn {
    background: var(--pfa-primary);
    border-color: var(--pfa-primary);
    color: #fff;
}
.pf-article-page .btn-dark.figure-pop-btn:hover,
.pf-article-page .btn-dark.figure-pop-btn:focus {
    background: var(--pfa-accent);
    border-color: var(--pfa-accent);
}
.pf-article-page .info-panel .btn.btn-secondary {
    background: var(--pfa-primary) !important;
    border-color: var(--pfa-primary) !important;
    color: #fff !important;
}
.pf-article-page [role=tablist] > button.active {
    color: var(--pfa-heading);
    border-color: var(--pfa-accent);
}

@media (max-width: 575.98px) {
    .pf-article-page .meta-panel {
        flex-direction: column;
        align-items: flex-start;
    }
    .pf-article-page .meta-panel__right-content,
    .pf-article-page .meta-panel__share {
        max-width: 100%;
        margin-left: 0 !important;
    }
}

/* mobile bottom article bar: keep inside the viewport, icons scroll horizontally */
.pf-article-page .sticky-menu-container,
.pf-article-page .sticky-menu {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* figure / table viewer (lightbox) toolbar */
.pf-article-page .fv .js--active,
.pf-article-page .fv a.active,
.pf-article-page .fv button.active {
    background-color: var(--pfa-primary) !important;
    border-color: var(--pfa-primary) !important;
    color: #fff !important;
}

/* author list: the scripts insert an "and" separator before the last author;
   the comma-separator rule must not add a second comma after it */
.pf-article-page article[data-design] .comma-separated > span:not([property]) + span:before {
    content: none;
}