@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

/* Fallback defaults — overridden per-request by GreatPaperThemePlugin::injectDynamicColors()
   based on the admin's Header/Footer Color settings. Every accent-colored rule in this file
   should reference var(--accent)/var(--accent-dark)/var(--footer-bg), never a hardcoded hex,
   so changing the theme color in Appearance settings updates the whole page consistently. */
:root {
    --accent: #1D4ED8;
    --accent-dark: #13338c;
    --footer-bg: #1D4ED8;
    /* Text color to use on top of --accent / --footer-bg — flips to dark
       automatically when the admin picks a light accent/footer color. */
    --on-accent: #ffffff;
    --on-footer: #ffffff;
    /* --accent itself, adjusted so it's always readable as TEXT on a white/
       light surface (Register button, CiteScore, "View Full Editorial
       Board", ...) — darkened only as much as needed, or falls back to a
       neutral dark if --accent is too pale for darkening alone to fix. */
    --accent-on-white: #1D4ED8;
}

body { font-family: 'Atkinson Hyperlegible', sans-serif; background-color: #f0f2f5; margin: 0; padding: 0; }
/* Capped (not unlimited) full width: still reads as "full width" on typical
   13"-27" screens, but stops content stretching indefinitely — and grid
   cells swimming in dead space — on ultra-wide monitors. */
/* Side margin scales with viewport (clamp) instead of a flat 24px — ScienceDirect-
   style generous gutters on desktop (up to 56px), without eating a third of the
   screen on narrow phones where the minimum (20px) kicks in instead. */
.page-wrapper { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

/* Homepage: the shared col-md-9 (from header.tpl) normally leaves room for a
   col-md-3 sidebar. indexJournal.tpl has none, so stretch it full width here
   without touching the shared markup other pages rely on. ".masthead" is
   the marker (homepage-only element) — used to be ".current-issue-section",
   removed when Current Issue was folded into the article-grid-widget tabs. */
.row:has(> .col-md-9 .masthead) > .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
}
a{ text-decoration:none;}

/* --- STYLING UMUM NAVBAR --- */
/* Rounded top corners — the page is a contained, centered box (max-width
   1280px) again, not edge-to-edge, so a hard-square navbar top reads as
   stiff against the soft gray page background around it. */
.navbar-custom {
    background-color: var(--accent);
    position: sticky;
    top: 0;
    z-index: 1060;
    padding: 0.6rem 39px;
    border-radius: 10px 10px 0 0;
    transition: box-shadow 0.3s ease;
}

.navbar-custom.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Brand (logo + journal name), reused in desktop and mobile bars */
.navbar-brand-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.navbar-logo {
    height: 36px;
    width: auto;
}

.navbar-journal-name {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--on-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* Dropdown navbar desktop */
.navbar-custom .dropdown-menu {
    background-color: #ffffff;
    border-radius: 0 0 10px 10px;
    box-shadow: 2px 2px 10px darkgray;
    padding: 8px 0;
    margin-top: 10px;
    min-width: 200px;
}

.navbar-custom .dropdown-item {
    font-size: 0.8rem;
    padding: 8px 15px;
    color: #333;
    transition: all 0.2s ease;
}

.navbar-custom .dropdown-item:hover {
    background-color: #f1f5f9;
    color: var(--accent-on-white);
}

/* Default hidden */
.navbar-custom .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
}

/* Saat hover */
.navbar-custom .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-custom .dropdown {
    position: relative;
}

.navbar-custom .dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px; /* buffer area */
}

/* Hover dropdown (optional desktop only) */
@media (min-width: 992px) {
    .navbar-custom .dropdown:hover .dropdown-menu {
        display: block;
    }
}

.vertical-line { border-left: 1px solid #dee2e6; height: 50px; margin: 0 25px; }
.journal-tagline { color: #1a1a1a; font-style: italic; font-size: 0.85rem; margin: 0; }

/* === MASTHEAD (large cover left; name, metrics, description stacked right) === */
.masthead {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    padding: 18px 39px;
    border-bottom: 1px solid #e2e4e8;
}

/* Fixed A4-ish proportion (matches journalThumbnail_en.png's real 2000x2828
   shape) — never cropped or stretched. This box used to stretch to match
   .masthead-content's height (align-items:stretch on .masthead) so a CTA
   button pinned to the bottom of the description column lined up with the
   cover's bottom edge; that button was later removed as redundant with the
   "Archives" nav link, so nothing needs that alignment anymore —
   align-items:flex-start above lets the cover just be its own natural
   size. */
.masthead-cover {
    width: 205px;
    aspect-ratio: 2000 / 2828;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
}

.masthead-cover-default {
    background: linear-gradient(160deg, var(--accent), var(--accent-dark));
}

.masthead-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.masthead-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 8px;
}

/* flex:1 + min-width:0 (rather than the row's old flex-wrap:wrap) lets a
   long title wrap onto a 2nd/3rd line INSIDE its own column instead of
   pushing .masthead-metrics down onto a new row — which used to make the
   whole content column much taller and, since .masthead-cover stretches
   to match that height (see its own comment above), over-crop the cover
   image as a side effect. */
.masthead-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.masthead-metrics {
    display: flex;
    gap: 44px;
    flex-shrink: 0;
}

.masthead-metric {
    text-align: center;
}

.masthead-metric-value {
    font-size: 26px;
    font-weight: 600;
    color: #1a1a1a;
}

.masthead-metric-label {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.masthead-description {
    max-width: 720px;
}

/* === UTILITY BAR (above the navbar: ISSN + author/editor/reviewer links) === */
/* Homepage only: strip the generic .main-content card border/padding
   (see the base .main-content rule below) so the utility bar, and every
   section after it, sits flat and flush with the navbar above instead of
   reading as a separate boxed card floating on the gray page background. */
.main-content:has(.utility-bar) {
    padding: 0;
    border: none;
}

/* Slightly darker than .navbar-custom (same --accent otherwise) plus a
   faint top hairline — without either, this bar and the navbar above it
   were the exact same flat color with no edge between them, reading as
   one oversized block instead of a primary nav + secondary utility bar.
   Sticky (not fixed) — stacks directly under .navbar-custom's own sticky
   bar (measured height ~57px) once scrolled past its normal position;
   see #utility-sentinel in the template + main.js for how ".is-stuck"
   gets toggled (CSS position:sticky alone can't detect that moment). */
.utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 39px;
    background: color-mix(in srgb, var(--accent) 85%, black);
    border-top: 1px solid color-mix(in srgb, var(--on-accent) 12%, transparent);
    color: var(--on-accent);
    font-size: 12px;
    position: sticky;
    top: 57px;
    z-index: 1055;
}

.utility-bar.is-stuck {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.utility-bar .utility-links {
    display: flex;
    gap: 14px;
    align-items: center;
}

/* opacity, not a fixed rgba(), so the muted/hover tones stay correct
   whichever text color --on-accent resolves to for this accent color */
.utility-bar a { color: var(--on-accent); opacity: 0.85; }
.utility-bar a:hover { opacity: 1; text-decoration: underline; }

/* Only "Submit Manuscript" changes appearance once stuck (a solid pill,
   like the real ScienceDirect reference's black "Submit your article"
   button) — "Guide for Authors" stays a plain link throughout. ISSN and
   "Editorial Board" are dropped entirely once stuck: Editorial Board is
   already reachable from the always-sticky navbar's "About" menu, so
   keeping it here too was redundant, and ISSN isn't worth the width. */
.utility-bar.is-stuck .utility-issn,
.utility-bar.is-stuck .utility-editorial-board {
    display: none;
}

/* .utility-bar is justify-content:space-between across TWO children
   (.utility-issn + .utility-links) — once .utility-issn is hidden above,
   .utility-links is the only child left, and a lone flex child under
   space-between sits at the main-start (left) edge, not centered or
   right. margin-left:auto pushes it to the right on its own once stuck,
   matching where the ScienceDirect reference keeps its sticky actions. */
.utility-bar.is-stuck .utility-links {
    margin-left: auto;
}

.utility-bar.is-stuck .utility-submit {
    background: #12172a;
    opacity: 1;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 700;
}

.utility-bar.is-stuck .utility-submit:hover {
    text-decoration: none;
    background: #1c2438;
}

/* === ABOUT + PUBLISHING OPTIONS (now nested right under the journal name) === */
.about-publishing-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 64px;
    margin-top: 6px;
}

.about-block-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.about-journal-block {
    display: flex;
    flex-direction: column;
}

/* Sits after the journal summary text, right-aligned — .about-journal-block
   is a flex column, so align-self:flex-end pulls just this link to the
   right without affecting the summary paragraphs above it. */
.masthead-view-all {
    align-self: flex-end;
    margin-top: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-on-white);
    text-decoration: none;
}

.masthead-view-all:hover {
    text-decoration: underline;
}

/* Both columns start at the same top line now that About also always has a
   heading-less content block (journalSummary and/or the CTA button). */
.publishing-options {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Thin divider between the two masthead columns, sitting centered in the
       (64px) grid gap — same idea as the "|" separators in the utility bar. */
    border-left: 1px solid #e2e4e8;
    padding-left: 32px;
    margin-left: -32px;
}

.publishing-options dt {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 14px 0 4px 0;
}

.publishing-options dt:first-child { margin-top: 0; }

.publishing-options dd {
    margin: 0;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

/* === EDITOR-IN-CHIEF BAND === */
.editor-band {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 39px;
    border-top: 1px solid #e2e4e8;
    border-bottom: 1px solid #e2e4e8;
}

.editor-band-label {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.editor-band-photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #e0e0e0;
    flex-shrink: 0;
    object-fit: cover;
}

.editor-band-name { font-size: 20px; font-weight: 700; }
.editor-band-affiliation { font-size: 14px; color: #666; margin-top: 2px; }

.editor-band .view-all-link { margin-left: auto; flex-shrink: 0; font-size: 13px; }

/* Same padding + bottom-border convention as .home-section (News/CFP/
   Special Issues) and .editor-band — every homepage section is separated
   from the next by this same rule; this one was missing it. */
.sort-tabs-card {
    padding: 26px 39px;
    border-bottom: 1px solid #e2e4e8;
}

/* Flat/editorial style by design (ScienceDirect-style reference) — no
   boxed card, border or shadow around the whole widget; tabs and cards
   sit directly on the page like the rest of the homepage's sections. */
.article-grid-widget {
    padding: 0;
}

.article-grid-tabs {
    border-bottom: 1px solid #e2e4e8;
}

.article-grid-widget .nav-link.tab-flat {
    border: none;
    border-bottom: 2px solid transparent;
    padding: 4px 0 12px 0;
    margin-right: 24px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #888;
}

.article-grid-widget .nav-link.tab-flat.active {
    border-bottom-color: var(--accent);
    color: #1a1a1a;
    background: transparent;
}

.article-grid-widget .tab-content {
    padding-top: 24px;
}

/* display:grid scoped to .active only — see the note this replaced
   above about Bootstrap's ".tab-content > .tab-pane { display: none }"
   otherwise tying on specificity and leaving a dead gap under the
   visible pane. */
.article-grid-widget .tab-pane.active {
    display: block;
}

.article-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px 28px;
    align-items: start;
}

.article-card {
    display: flex;
    flex-direction: column;
}

.article-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #5b5f66;
    margin-bottom: 8px;
}

.article-card-access {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-style: italic;
}

.article-card-access:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid #999;
}

.article-card-access--open {
    color: #1a7a4c;
}

.article-card-access--open:before {
    background: #1a7a4c;
    border-color: #1a7a4c;
}

.article-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.article-card-title:hover {
    color: var(--accent-on-white);
    text-decoration: underline;
}

.article-card-authors {
    font-size: 0.85rem;
    color: #444;
    margin: 0 0 4px 0;
}

.article-card-date {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 10px;
}

.article-card-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-on-white);
}

.article-card-pdf:hover {
    text-decoration: underline;
}

.article-card-pdf .fa-file-pdf {
    color: #d93025;
}

@media (max-width: 991px) {
    .article-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .article-card-grid { grid-template-columns: 1fr; }
}

/* === News / Calls for Papers / Special Issues === */
/* 44px, not 15px: the Current Issue/Most Viewed heading above sits inside an
   extra 28-29px of card padding on top of the shared 15px section padding —
   match that total so headings line up instead of these looking shifted left. */
.home-section {
    padding: 26px 39px;
    border-bottom: 1px solid #e2e4e8;
}

.home-section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.news-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px 36px;
}

.news-date {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}

.news-headline {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
}

.news-headline:hover {
    color: var(--accent-on-white);
    text-decoration: underline;
}

.cfp-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px 32px;
}

.cfp-card {
    border: 1px solid #e2e4e8;
    border-radius: 6px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cfp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.cfp-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.cfp-editors { font-size: 14px; color: #666; margin-bottom: 12px; line-height: 1.5; }
.cfp-deadline { font-size: 13.5px; font-weight: 700; color: #1a1a1a; }

.special-issues-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px 32px;
}

.special-issue-title { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-bottom: 10px; }
.special-issue-title:hover { color: var(--accent-on-white); text-decoration: underline; }
.special-issue-editors { font-size: 13.5px; color: #666; margin-bottom: 6px; }
.special-issue-date { font-size: 13px; color: #999; }

@media (max-width: 767px) {
    .about-publishing-grid { grid-template-columns: 1fr; }
    .news-grid, .special-issues-grid { grid-template-columns: 1fr; }
    .cfp-grid { grid-template-columns: 1fr; }
    .utility-bar { flex-wrap: wrap; gap: 8px; }

    /* The cover (205px fixed) + row gap alone eat almost the entire viewport
       below ~600px, leaving virtually no room for the name/metrics column —
       stack cover above content instead, and let name/metrics stack too. */
    .masthead {
        flex-direction: column;
        gap: 20px;
    }
    .masthead-cover {
        width: 100%;
        max-width: 205px;
        height: 220px;
    }
    .masthead-content {
        min-height: 0;
    }
    .masthead-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Label + photo + name/affiliation + "View Full Editorial Board" link don't
       fit on one row below ~600px — let them wrap instead of silently
       overflowing (clipped invisible by .main-content's overflow:hidden). */
    .editor-band {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .editor-band .view-all-link {
        margin-left: 0;
        width: 100%;
    }
}

/* CSS untuk Layout Content & Sidebar */
/* No top radius here (unlike an earlier attempt) — .navbar-custom already owns
   the page's top rounding, and .main-content sits flush right against it with
   no gap (the utility bar continues its background with no seam). Rounding
   BOTH independently created two separate curves stacked at almost the same
   spot instead of one — a torn/notched look where the gray page background
   peeked through between them, most visible on narrow/mobile widths. */
.main-content {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #e9ecef;
    border-top: none;
    position: relative;
    overflow: hidden;
}

/* overflow:hidden above breaks position:sticky for anything nested inside it
   (a sticky element can't stick past an ancestor that clips overflow) — the
   article outline sidebar AND the quick-actions card both need to stay
   visible while scrolling, and this page has no full-bleed color bar that
   would need the clipping anyway. .sidebar-card-sticky is included
   separately since .article-outline only renders when the article has
   full-text HTML — an article without it would otherwise fall back to
   overflow:hidden and silently break the quick-actions card's stickiness. */
.main-content:has(.article-outline),
.main-content:has(.sidebar-card-sticky) {
    overflow: visible;
}

/* Same reason as above — .utility-bar's own position:sticky would
   silently do nothing inside an ancestor that clips overflow. */
.main-content:has(.utility-bar) {
    overflow: visible;
}

.side-stat {
  max-width: 50%;
}
.list-galley {
  padding: 10px;
  border-bottom: 1px solid #c0baba;
}

.drop-fulltext li:last-child {
  border-bottom: none;
}

/* Detail Jurnal */
.journal-cover {
    width: 100%;
    max-width: 210px;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.journal-description {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
    text-align: justify;
}

.info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

/* === SUBMISSION TIMELINE (replaces the removed sidebar) === */
/* Named like every other section on this page (.about-block-title) so it
   doesn't read as an unlabeled strip of numbers, and left on the same
   white as the masthead card above / editor band below it — the earlier
   flat accent-tinted background made the page flip white -> blue -> white
   for no reason; a top rule + the columns' own dividers give it enough
   structure without that. */
.submission-timeline-title {
    font-size: 15px;
    font-weight: 700;
    padding: 0 39px;
    margin: 22px 0 12px;
}

/* "Days to decision" insights bar — 4 flat stats with an info tooltip on
   each (ScienceDirect journal-page pattern), replacing the earlier
   proportional journey line: real (unevenly-spaced) day gaps made that
   line read as mostly empty space rather than a deliberate layout. */
.days-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 24px 39px 8px;
    margin: 0 0 8px 0;
    border-top: 1px solid #e2e4e8;
}

/* flex:1 + min-width:0 gives all 4 items equal width (matching the
   reference's evenly-spaced columns) instead of each shrinking to fit
   its own content — which is also what forced "Submission to decision
   after review" (the longest label) into a narrower column than the
   others and made it wrap. */
.days-insights-item {
    flex: 1;
    min-width: 0;
    padding-left: 28px;
    border-left: 1px solid #e2e4e8;
}

.days-insights-item:first-child {
    padding-left: 0;
    border-left: none;
}

.days-insights-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.days-insights-label {
    font-size: 12.5px;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    line-height: 1.4;
}

/* Info icon + tooltip. A real <button> (not just a styled span) so the
   tooltip is reachable by keyboard (:focus) as well as :hover — Elsevier's
   own version is mouse-only, this is a small accessibility improvement
   over the reference at no extra visual cost. */
.di-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-on-white, var(--accent));
    cursor: pointer;
    flex-shrink: 0;
}

.di-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: #fff;
    color: #333;
    border: 1px solid #d5d8dd;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(20,20,40,.12);
    padding: 14px 16px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

/* Small pointer triangle connecting the box back to the info icon. */
.di-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -1px 1px rgba(20,20,40,.08));
}

.di-info:hover .di-tooltip,
.di-info:focus-visible .di-tooltip {
    opacity: 1;
    visibility: visible;
}

/* First item's tooltip would otherwise overflow the page's left edge
   (its icon sits near the far left of the bar) — anchor it to its own
   left edge instead of centering under the icon. */
.days-insights-item:first-child .di-tooltip {
    left: 0;
    transform: none;
}
.days-insights-item:first-child .di-tooltip::before {
    left: 9px;
    transform: none;
}

@media (max-width: 640px) {
    /* nowrap labels + flex:1 need real room to avoid squeezing illegibly —
       2 per row (each free to size by its own content again) reads better
       here than 4 cramped equal-width columns. */
    .days-insights { padding-inline: 16px; gap: 20px 24px; }
    .days-insights-item {
        flex: 0 0 calc(50% - 12px);
        padding-left: 20px;
    }
    .days-insights-item:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }
    .days-insights-label { white-space: normal; }
    .di-tooltip { width: 220px; }
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #1a1a1a;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a1a;
}

.tag-chip i {
    color: #1a1a1a;
}

.section-title {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* === EDITORIAL MASTHEAD (Editorial Team page) — member cards with
   circle-cropped photos === */
.masthead-role-title {
    font-size: 1.1rem;
    margin: 32px 0 16px;
}

.masthead-role-title:first-of-type {
    margin-top: 8px;
}

.masthead-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 8px;
}

.masthead-member {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e2e4e8;
    border-radius: 10px;
    background: #fff;
}

/* Real uploaded photo (Identity::profileImage) and the initials fallback
   share this box so both crop to the exact same circle regardless of the
   source image's own aspect ratio — object-fit:cover on the <img>, and
   the fallback is just centered text on a solid circle of the same size. */
.masthead-member-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.masthead-member-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, #1D4ED8) 12%, white);
    color: color-mix(in srgb, var(--accent, #1D4ED8) 75%, black);
    font-weight: 700;
    font-size: 0.95rem;
}

.masthead-member-info {
    min-width: 0;
}

.masthead-member-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.masthead-member-name .orcid {
    flex-shrink: 0;
    display: inline-flex;
}

.masthead-member-affiliation {
    font-size: 0.82rem;
    color: #555;
    margin-top: 2px;
}

.masthead-member-date {
    font-size: 0.76rem;
    color: #888;
    margin-top: 3px;
}

@media (max-width: 480px) {
    .masthead-member-grid { grid-template-columns: 1fr; }
}

/* Issue meta line (Vol/No + "View All Issues") shown above the grid on
   the merged "Latest Issue" tab — replaces the old standalone Current
   Issue section's own header now that it lives inside the tab widget. */
.article-grid-issue-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
}

.article-grid-issue-meta .view-all {
    font-weight: 600;
    color: var(--accent-on-white);
}

/* Article type badge: solid pill, colored per type (ToC-style) */
.badge-type {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 11px;
    border-radius: 20px;
    margin-bottom: 8px;
    background: #eef0f2;
    color: #555;
}

.badge-type.type-research { background: #e2f7f0; color: #1a1a1a; }
.badge-type.type-review { background: #e8f0fe; color: #1a1a1a; }
.badge-type.type-case-study { background: #fdf2e9; color: #1a1a1a; }

.badge-type .oa-flag {
    color: #1a1a1a;
}


.issue-meta .view-all {
    margin-left: 10px;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
}

.issue-meta .view-all:hover {
    text-decoration: underline;
    color: var(--accent-on-white);
}

.pkp_screen_reader {
    display:none !important;
}

/* === ARTICLE FULL TEXT + OUTLINE SIDEBAR === */
/* Only renders when a publication has full-text HTML content (the
   greatpaperFulltext publication setting) — most OJS articles only have a
   PDF galley and stop at the abstract, so this section is optional. */
.article-outline-layout {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-top: 32px;
}

.article-outline {
    flex: 0 0 220px;
    position: sticky;
    /* below the sticky navbar (~57px) + a little breathing room */
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.article-outline-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin-bottom: 12px;
}

.article-outline-list, .article-outline-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-outline-list {
    border-left: 2px solid #e2e4e8;
}

.article-outline-list a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #555;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.article-outline-list a:hover {
    color: var(--accent-on-white);
}

.article-outline-list a.active {
    color: var(--accent-on-white);
    border-left-color: var(--accent);
    font-weight: 700;
}

.article-outline-sublist {
    padding-left: 14px;
}

.article-outline-sublist a {
    font-size: 0.8rem;
}

.article-fulltext {
    flex: 1;
    min-width: 0;
    max-width: 760px;
}

.article-fulltext h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 40px 0 16px 0;
    scroll-margin-top: 90px;
}

.article-fulltext h2:first-child {
    margin-top: 0;
}

.article-fulltext h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 28px 0 12px 0;
    scroll-margin-top: 90px;
}

.article-fulltext p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 16px;
}

.article-fulltext ul {
    margin: 0 0 16px 0;
    padding-left: 1.4rem;
}

.article-fulltext li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 8px;
}

.article-fulltext strong {
    color: #1a1a1a;
}

/* Tables inserted via the dashboard's Full Text editor (TinyMCE's table
   plugin, tagged "article-table" — see GreatPaperThemePlugin.php) get the
   same soft/rounded treatment as the rest of the theme instead of the
   editor's own bare default borders. Wrapped in a scroll container since
   a wide table (many columns) shouldn't force the whole article column
   to scroll sideways. */
.article-fulltext table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 8px 0 24px 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.article-fulltext table th,
.article-fulltext table td {
    padding: 10px 14px;
    border: 1px solid #e2e4e8;
    text-align: left;
    color: #333;
}

.article-fulltext table th {
    background: color-mix(in srgb, var(--accent, #1D4ED8) 6%, #f8f9fc);
    font-weight: 700;
    color: #1a1a1a;
}

.article-fulltext table tr:nth-child(even) td {
    background: #fafbfc;
}

/* MathJax equations (LaTeX typed as $...$ / $$...$$ in the Full Text
   field) shouldn't visually clash with the surrounding prose. */
.article-fulltext mjx-container {
    font-size: 105%;
}
.article-fulltext mjx-container[display="true"] {
    margin: 20px 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
}

@media (max-width: 991px) {
    .article-outline-layout {
        flex-direction: column;
        gap: 20px;
    }
    .article-outline {
        position: static;
        max-height: none;
        flex: 1 1 auto;
        width: 100%;
        padding-bottom: 16px;
        border-bottom: 1px solid #e2e4e8;
    }
}

/* article detail */
.detail-title {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
}
.badge-article {
  background: #a1c0bd;
  color: #0e1d69;
}

.list_affiliation {
  margin: 0;
  font-size: 0.9rem;
}
.corresponden_info {
  margin: 5px 0;
  font-size: 0.9em;
}
.article-info {
  font-size: 0.75em;
  border-top: 1px dotted gray;
  padding: 10px 0;
  margin: 10px 0;
  border-bottom: 1px dotted gray;
  color: #1a1a1a;
  background: #ede7e72b;
}
.left-line {
  border-left: 1px dotted gray;
}
.btn-cite {
  border: 1px solid #bab6b6 !important;
  background: #fafafa;
}
.btn-download {
  border: 1px solid #0e1d69;
  background: #0e1d69;
  color: #fff !important;
}
.get-article, .btn-download, .btn-cite {
  font-size: 0.95em !important;
}
.btn-download:hover {
  background: #3e50ab;
}
.btn-cite:hover {
  background: #c3c3c3;
}
.header-citation {
  padding: 10px 15px;
}
ol.list_references {
  padding-left: 1.2rem;
}

.badge_keywords {
  margin: 0;
  padding: 0;
  list-style: none;
}
.badge_keywords li {
  display: inline-block;
  background: #cacaca;
  border-radius: 5px;
  padding: 1px 6px;
  margin: 3px 0;
  color: #333;
  font-size: 0.9em;
}
.publication-info {
  font-size: 0.85em;
}
.publication-info td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px dotted gray;
}

.stat-container {
    color: #1a1a1a;
}
.stat-number {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.stat-label {
    font-size: 0.8rem;
    color: #4a5568;
}
.stat-icon {
    font-size: 1.5rem;
    margin-right: 15px;
}
.counter_name {
  text-align: center;
  padding: 0 0 5px;
  font-size: 0.9em !important;
  color: #0e1d69 !important;
  font-weight: bold;
}
.__dimensions_badge_embed__ {
  text-align: center !important;
  padding-top:5px !important;
}
.scite-badge {
  padding-left: 20px;
}
p {
  text-align: justify;
}
.pkp_block > .content > ul {
  padding: 0 0 0 1em;
  list-style-type: circle;
}
/* CARD */
.article-card {
    position: relative;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 18px;
    height: 100%;
    transition: all 0.2s ease;
}

.article-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.article-card > a {
  text-decoration: none;
}

.nav-tabs .nav-link.active {
  border: none;
  border-bottom: 2px solid var(--accent);
}

/* BADGE */
.article-card .badge {
    font-size: 0.7rem;
    padding: 5px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
    display: inline-block;
}

.badge-research {
    background: #e6f4f1;
    color: #1a1a1a;
}

.badge-review {
    background: #eef2ff;
    color: #3b5bdb;
}

.badge-case {
    background: #fff4e6;
    color: #f08c00;
}

.bread_separator {
  font-size: 0.7em;
  color: #403e3e;
}

.cmp_breadcrumbs a {
  color: #1a1a1a;
  text-decoration: none;
}

.cmp_breadcrumbs a:hover {
  color: var(--accent-on-white);
  text-decoration: underline;
}

/* No top border — it only ever spanned the width of the main content
   column (col-md-9), never the full page, so next to a sidebar it read
   as a line cut off partway rather than a deliberate divider. The
   navbar's own bottom edge already separates it from the page content
   above, so this doesn't need one of its own. */
.cmp_breadcrumbs {
  padding: 15px 0 0 0;
  margin: 0 0 10px 0;
}

/* === ADDITIONAL HOME SECTION === */
.additional-home-section {
    margin-top: 18px;
}

.galley_view {
  position: absolute;
  top: 3rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: hidden;
}
.header_view {
  padding: 10px;
}
.header_view > .download {
  position: absolute;
  right: 0;
  border: 1px solid #5e5656;
  margin: 0 5px 5px 0;
  border-radius: 5px;
  padding: 3px 10px;
  background: #d9ded9;
}
/* BOX */
.info-box {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    transition: all 0.2s ease;
}

.info-box:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* HEADER */
.info-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.info-header i {
    font-size: 1.2rem;
    color: #1a1a1a;
    margin-right: 10px;
}

.info-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* TEXT */
.info-box p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* LINK */
.info-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
}

.info-link:hover {
    text-decoration: underline;
}

/* INDEXING GRID */
.indexing-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 10px 0 15px 0;
}

.index-item {
    font-size: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
    color: #444;
}


/* === FOOTER === */
/* Bottom corners rounded — the page is a contained, centered box (max-width
   1280px) again, not edge-to-edge, so this is the bottom of the same rounded
   silhouette the navbar starts at the top. */
.footer-custom {
  background-color: var(--footer-bg);
  color: var(--on-footer);
  padding: 32px 39px 20px 39px;
  border-radius: 0 0 10px 10px;
}

/* Bootstrap's .container-fluid (unlike a .row's children) keeps its own
   12px side padding uncancelled — on top of footer-custom's own 39px this
   pushed footer text ~12px further in than every other section's shared
   39px inset, so it never quite lined up. */
.footer-custom .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
/* TOP AREA */
.footer-top {
    margin-bottom: 20px;
}

/* BRAND */
.footer-brand {
    gap: 15px;
}

.footer-logo {
    width: 45px;
    height: 45px;
    border: 1px dashed color-mix(in srgb, var(--on-footer) 50%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo i {
    font-size: 1.2rem;
}

.footer-brand h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.footer-brand p {
    font-size: 0.8rem;
    color: var(--on-footer);
    opacity: 0.75;
    margin: 5px 0 0 0;
}

/* TITLES */
.footer-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* LIST */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    font-size: 0.8rem;
    color: var(--on-footer);
    margin-bottom: 8px;
}

/* opacity on the link itself (not inherited from a muted parent), so hover
   can raise it back up rather than compounding into an even dimmer state */
.footer-list a {
    color: var(--on-footer);
    opacity: 0.75;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-list a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-list i {
    margin-right: 6px;
    font-size: 0.7rem;
    color: #1a1a1a;
}

.footer-brand {
    align-items: flex-start;
}

/* SOCIAL */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #fff;
    color: #001d3d;
    border-radius: 50%;
    margin-right: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.social-icons a:hover {
    background: var(--accent);
    color: var(--on-accent);
}

/* DIVIDER */
.footer-divider {
    border-top: 1px solid color-mix(in srgb, var(--on-footer) 20%, transparent);
    margin: 15px 0;
}

/* BOTTOM */
.footer-bottom {
    font-size: 0.75rem;
    color: var(--on-footer);
    opacity: 0.75;
}
/* TITLE */
.article-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}
.issue-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* The title text sits inside a nested <a> — an inherited color always loses
   to the browser's own default link color specified directly on that <a>,
   so .issue-title's #1a1a1a alone doesn't reach it without this rule. */
.issue-title a {
    color: inherit;
    text-decoration: none;
}

.issue-title a:hover {
    color: var(--accent-on-white);
    text-decoration: underline;
}

.orcid_icon {
  max-width: 16px;
}
.author_name {
  font-weight: bold;
}
.affiliaton_name {
  text-align: left;
}

/* AUTHOR */
.article-author {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 8px;
}

/* META */
.article-meta {
    font-size: 0.75rem;
    color: #888;
}

.article-meta span {
    margin: 0 5px;
}

/* ICON */
.article-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #adb5bd;
    font-size: 1rem;
}

.issue-cover {
  padding-bottom: 15px !important;
}

/* Sidebar Styling */
.sidebar-card, .pkp_block {
    background: #fff;
    border: 1px solid #e2e4e8;
    padding: 20px;
    margin-top: 20px;
}

.sidebar-title, .pkp_block > h2.title, .pkp_block > .content > p.title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1a1a1a;
    margin-bottom: 15px;
    display: block;
}

/* "Download PDF" / "Cite this Article" quick-actions card — sticky like
   .article-outline (same top:76px, clearing the sticky navbar), so it
   stays reachable while scrolling a long article instead of only living
   in .get-article at the very top of the page. */
.sidebar-card-sticky {
    position: sticky;
    top: 76px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pkp_screen_reader{
    display: none;
}

.view-all-link {
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
}

.announcement-item h6 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #001d3d;
    margin-bottom: 4px;
}

.announcement-item p {
    font-size: 0.75rem;
    color: #999;
    margin: 0;
}
.announcement-item {
  margin-top: 10px;
  border-top: 1px solid #eee9e9;
  padding-top: 10px;
}

/* popover styling  */
.author-link {
  cursor: pointer;
}
.custom-popover .popover-arrow {
    display: none !important;
}

.custom-popover {
    --bs-popover-bg: #1e293b;            
    --bs-popover-border-color: #334155;   
    --bs-popover-border-radius: 5px;
    --bs-popover-box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); /* Shadow lebih halus */
}

.popover-body-custom {
    padding: 5px;
    font-size: 0.9rem;
    color: #f8fafc; 
    line-height: 1.6;
}

.popover-body-custom h6 {
    color: #38bdf8 !important; /* Warna biru muda cerah (sky blue) */
}

.popover-body-custom .text-secondary, 
.popover-body-custom hr {
    color: #94a3b8 !important;
    opacity: 0.3; /* Menjaga kejelasan garis pembatas */
}

.popover-body-custom a {
    color: #38bdf8 !important;
}
.popover-body-custom a:hover {
    color: #7dd3fc !important;
    text-decoration: underline !important;
}


        @media (min-width: 992px) {
            .nav-desktop-only { display: flex !important; width: 100%; align-items: center; gap: 18px; }
            .nav-desktop-only > .d-flex { margin-left: auto; }
            .nav-mobile-only { display: none !important; }

            .navbar-custom .nav-link {
                color: var(--on-accent) !important;
                font-weight: 400;
                font-size: 0.9rem;
                padding: 0.5rem 0.5rem !important;
                opacity: 0.9;
                text-decoration: none;
                transition: opacity 0.15s ease;
            }

            .navbar-custom .nav-link:hover {
                opacity: 1;
                text-decoration: underline;
                text-underline-offset: 4px;
            }

            /* Shrinks with the viewport between the 992px breakpoint and ~1200px
               instead of a fixed 200px, which overflowed right at 992px once the
               nav font size went up — see clamp() min/max for the safe range. */
            .search-box-desktop {
                background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 4px 10px;
                display: flex; align-items: center; width: clamp(130px, 18vw, 200px); margin-left: 10px;
            }
            .search-box-desktop input { border: none; outline: none; width: 100%; font-size: 0.8rem; background: transparent; }
            .search-box-desktop i { color: #666 !important; }

            .btn-register-desktop {
                background-color: #ffffff; color: #1a1a1a !important;
                border-radius: 6px;
                padding: 6px 16px !important;
                font-weight: 700; font-size: 0.9rem; margin-left: 10px;
            }
        }

        @media (max-width: 991px) {
            .nav-desktop-only { display: none !important; }
            .nav-mobile-only { display: block !important; width: 100%; }

            .mobile-top-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 45px; }
            /* min-width:0 lets this flex item shrink below its content size — without it,
               .navbar-journal-name's ellipsis never engages and the name pushes the search/
               user icons off-screen on narrow phones (~320-360px). */
            .mobile-top-bar .navbar-brand-custom { flex: 1; justify-content: center; min-width: 0; }

            .nav-icon-mobile { color: var(--on-accent); font-size: 1.2rem; background: none; border: none; padding: 5px; margin-left: 10px; }

            /* Menu collapse mobile */
            .navbar-collapse {
                background: #ffffff; border-top: 1px solid #e2e4e8;
                margin-top: 10px;
            }
            .navbar-collapse .nav-link { color: #1a1a1a !important; padding: 12px 0; border-bottom: 1px solid #eef0f2; }

            /* Quick Links collapses by default on mobile (see .homepage-sidebar reorder rules) */
        }

        @media (max-width: 991px) {
            .navbar-custom .dropdown-menu {
                display: none !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }

            .navbar-custom .dropdown-menu.show {
                display: block !important;
            }
        }

/* === EDITORIAL TEAM (Static Page: path "editorial-team") — row-style
   roster, reused as raw class names inside the Static Page's own stored
   HTML (that content isn't a Smarty template, just admin-authored markup,
   so the classes below are the only thing tying it to the theme). === */
.editorial-team-role {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 28px 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent, #1D4ED8);
}

.editorial-team-role:first-of-type {
    margin-top: 8px;
}

.editorial-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.editorial-team-row:last-of-type {
    border-bottom: none;
}

.editorial-team-row-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1a1a;
}

.editorial-team-row-affiliation {
    font-size: 0.85rem;
    color: #555;
    margin-top: 2px;
}

.editorial-team-row-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Fallback when the generator (tools/editorial-team-generator.html) is
   used without a photo URL — same idea as .masthead-member-initials on
   the Editorial Masthead page, kept as its own class here since this one
   is dropped into raw Static Page HTML, not a Smarty template. */
.editorial-team-row-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, #1D4ED8) 12%, white);
    color: color-mix(in srgb, var(--accent, #1D4ED8) 75%, black);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Academic profile badges (ORCID, Sinta, Google Scholar, Scopus, ...) —
   small circular icon links under a person's name. ORCID uses OJS's own
   bundled official icon (lib/pkp/templates/images/orcid.svg); the others
   have no equivalent bundled asset, so they're generic monogram badges
   in each platform's approximate brand color, not exact logo
   reproductions — same treatment as the homepage's "Indexed In" strip. */
.editorial-team-row-affiliation + .editorial-team-profile {
    margin-top: 6px;
}

.editorial-team-profile {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editorial-team-profile-label {
    font-size: 0.78rem;
    color: #777;
    margin-right: 2px;
}

.editorial-team-profile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.editorial-team-profile svg {
    width: 100%;
    height: 100%;
    display: block;
}

.editorial-team-row-expertise,
.editorial-team-row-email {
    font-size: 0.82rem;
    color: #555;
    margin-top: 4px;
}

.editorial-team-row-expertise b,
.editorial-team-row-email b {
    color: #333;
    font-weight: 700;
}

.editorial-team-row-email a {
    color: var(--accent-on-white, var(--accent, #1D4ED8));
}

/* === LOGIN / REGISTER (professional card) === */
/* Centers the card in the page's own light background — .row/.col-lg-12
   above already provide the outer page chrome (rounded corners, white
   .main-content), so this just needs generous top/bottom breathing room. */
.auth-page {
    display: flex;
    justify-content: center;
    padding: 48px 20px 64px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(20,20,40,.06), 0 2px 8px rgba(20,20,40,.04);
    padding: 36px 36px 32px;
}

.auth-card-header {
    text-align: center;
    margin-bottom: 26px;
}

.auth-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #151a26;
}

.auth-card-subtitle {
    font-size: 0.85rem;
    color: #5b6472;
    margin-top: 4px;
}

/* Google's own brand guidelines for a "Sign in with Google" button: white
   background, a light gray 1px border, the full-color "G" mark, medium
   gray text — deliberately NOT styled in the journal's own accent color,
   since Google's guidelines ask that the button read as Google's own UI
   element, not a themed one. */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    color: #3c4043;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow .15s ease, background .15s ease;
}

.btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60,64,67,.15);
    color: #3c4043;
    text-decoration: none;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #9aa3b2;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e4e8;
}

/* Registration has many more fields than login (name, affiliation,
   consent checkboxes, reviewer opt-in...) — a wider card keeps those from
   feeling cramped the way the login card's 440px would. */
.auth-card-wide {
    max-width: 620px;
}

.auth-google-note {
    text-align: center;
    font-size: 0.78rem;
    color: #5b6472;
    margin: 10px 0 0;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .auth-card { padding: 28px 22px 26px; }
}