/* Poly Journals Theme - Main Stylesheet */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--pjt-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: #1f2937;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pjt-font-heading, 'Georgia', serif);
    color: #111827;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

a { color: var(--pjt-primary, #2563eb); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--pjt-secondary, #1e40af); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--pjt-primary, #2563eb); outline-offset: 2px; border-radius: 2px; }

img { max-width: 100%; height: auto; }

/* === Skip to Content (a11y) === */
.pjt-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 8px 16px;
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.pjt-skip-link:focus {
    left: 8px;
    top: 8px;
}

/* === Layout === */
.pjt-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.pjt-narrow { max-width: 800px; }

.pjt-main { min-height: 60vh; padding: 48px 0; }

/* === Header === */
.pjt-header {
    background: #fff;
    border-bottom: 3px solid var(--pjt-primary, #2563eb);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Two rows: lockup and account actions on top, navigation centred below.
   The navigation keeps a full row to itself, which is what makes this safe for a
   whitelabel theme — the earlier "logo left / menu right" header worked only while
   the journal name was short enough to leave room for a seven-item menu, and
   degraded silently when it was not. Here a long name competes with three buttons
   rather than with the whole menu, and wraps visibly when it runs out of room. */
.pjt-header-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pjt-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* The lockup may shrink; min-width:0 lets it, since a flex item's automatic
   minimum is its content and a long name would otherwise refuse to yield and push
   the buttons off the row entirely. */
.pjt-header-top > .pjt-logo {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
}

.pjt-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

/* The actions are a menu, so they inherit .pjt-menu; keep them in a row and drop
   the centring the navigation row wants. */
.pjt-header-actions .pjt-menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 10px;
    row-gap: 6px;
}

@media (max-width: 767px) {
    /* On a narrow screen the hamburger sits beside the lockup and the buttons take
       their own line beneath, rather than crushing into the same row. */
    .pjt-header-actions {
        order: 3;
        flex: 1 0 100%;
        margin-left: 0;
    }
    .pjt-header-actions .pjt-menu { justify-content: flex-start; }
}

/* Desktop: the navigation row, centred. */
@media (min-width: 768px) {
    .pjt-nav { justify-content: center; }
}

.pjt-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pjt-logo img { max-height: 50px; width: auto; }

/* Fallback lockup: bundled institution mark + short journal name */
.pjt-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}
.pjt-logo-link:hover { text-decoration: none; }

.pjt-default-logo {
    height: 50px;
    width: auto;
    flex-shrink: 0;
}

.pjt-site-title {
    font-family: var(--pjt-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pjt-secondary, #1e40af);
    text-decoration: none;
    /* Deliberately NOT white-space: nowrap. That protected the title while leaving
       the menu unprotected, so the menu was squeezed until its labels broke
       mid-phrase ("Submit / Manuscript"). Both now shrink on equal terms. */
    min-width: 0;
}
.pjt-site-title:hover { color: var(--pjt-primary, #2563eb); text-decoration: none; }

.pjt-tagline {
    font-size: 0.8rem;
    color: #6b7280;
    display: none;
}

@media (min-width: 768px) {
    .pjt-tagline { display: inline; }
}

/* Mobile menu toggle */
.pjt-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.2s;
}
.pjt-menu-toggle:hover { background: #f3f4f6; }
.pjt-menu-toggle:focus-visible { outline: 2px solid var(--pjt-primary, #2563eb); outline-offset: 2px; }

.pjt-menu-toggle span {
    width: 24px;
    height: 2px;
    background: #374151;
    transition: transform 0.3s, opacity 0.3s;
    display: block;
}

/* Hamburger animation */
.pjt-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pjt-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pjt-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 768px) {
    .pjt-menu-toggle { display: none; }
}

/* Navigation */
.pjt-nav {
    display: none;
}

.pjt-nav.pjt-nav-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
    .pjt-nav {
        display: block;
        position: static;
        background: none;
        border: none;
        padding: 0;
        box-shadow: none;
    }
}

.pjt-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 768px) {
    .pjt-menu {
        flex-direction: row;
        /* wrap whole items onto a second row rather than letting the text inside
           an item break mid-phrase */
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        column-gap: 24px;
    }
}

/* A flex item's `min-width: auto` resolves to its LONGEST WORD, not its full
   label — which is why "Submit Manuscript" collapsed to the width of
   "Manuscript" and wrapped. Pinning the basis stops that. */
.pjt-menu li { flex: 0 0 auto; }

.pjt-menu li a {
    display: block;
    padding: 8px 0;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
    white-space: nowrap;
}

.pjt-menu li a:hover { color: var(--pjt-primary, #2563eb); text-decoration: none; }
.pjt-menu li a:focus-visible { outline: 2px solid var(--pjt-primary, #2563eb); outline-offset: 2px; }
.pjt-menu li.current-menu-item a { color: var(--pjt-primary, #2563eb); font-weight: 600; }

/* === Dropdown submenus ===
   The menu has always emitted depth-2 markup (header.php passes depth => 2); there
   was simply nothing to display it, so every child item rendered as another
   top-level link. That is why the live menu reads as one flat row of seven. */

.pjt-menu li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.36em;
    height: 0.36em;
    margin-left: 0.45em;
    vertical-align: 0.15em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.pjt-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Mobile first: the submenu is a plain indented list, revealed by the toggle
   button. No hover on touch, so hover must never be the only way in. */
@media (max-width: 767px) {
    .pjt-menu .sub-menu {
        display: none;
        padding-left: 16px;
        border-left: 2px solid #e5e7eb;
        margin: 2px 0 6px;
    }
    .pjt-menu li.pjt-open > .sub-menu { display: block; }
    .pjt-menu li.pjt-open > a::after { transform: rotate(-135deg); }
}

@media (min-width: 768px) {
    .pjt-menu li.menu-item-has-children { position: relative; }

    .pjt-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        min-width: 15rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        padding: 6px;
        z-index: 60;

        /* Hidden without display:none, so the items stay focusable in sequence and
           the panel can be revealed by keyboard as well as pointer. */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    }

    /* focus-within carries the keyboard path; pjt-open carries touch and the
       explicit toggle. Hover alone would strand both. */
    .pjt-menu li.menu-item-has-children:hover > .sub-menu,
    .pjt-menu li.menu-item-has-children:focus-within > .sub-menu,
    .pjt-menu li.pjt-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .pjt-menu li.menu-item-has-children:hover > a::after,
    .pjt-menu li.menu-item-has-children:focus-within > a::after,
    .pjt-menu li.pjt-open > a::after { transform: rotate(-135deg); }

    .pjt-menu .sub-menu li a {
        padding: 8px 12px;
        border-radius: 6px;
        /* Submenu labels may be long ("Open Access Statement") and the panel is
           free to be as wide as it needs, so they wrap rather than force the panel
           off-screen. The top level keeps nowrap. */
        white-space: normal;
    }
    .pjt-menu .sub-menu li a:hover { background: #f3f4f6; }
}

/* === Account actions and the call to action ===
   Login, Register and Call for Papers are given classes by the plugin's menu
   builder so they can be buttons here without the theme having to guess at
   labels — a whitelabel theme cannot match on the word "Login". */

.pjt-menu li.pjt-nav-action > a,
.pjt-menu li.pjt-nav-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.2;
}

.pjt-menu li.pjt-nav-action > a {
    border: 1px solid #d1d5db;
    color: #374151;
}
.pjt-menu li.pjt-nav-action > a:hover {
    border-color: var(--pjt-primary, #2563eb);
    color: var(--pjt-primary, #2563eb);
    background: #f9fafb;
}

.pjt-menu li.pjt-nav-cta > a {
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    border: 1px solid transparent;
}
.pjt-menu li.pjt-nav-cta > a:hover {
    color: #fff;
    filter: brightness(0.94);
}
.pjt-menu li.pjt-nav-cta > a:focus-visible,
.pjt-menu li.pjt-nav-action > a:focus-visible {
    outline: 2px solid var(--pjt-primary, #2563eb);
    outline-offset: 2px;
}

/* Nudge the account group away from the navigation proper, so the row reads as
   "pages ... then actions" rather than one undifferentiated list. On mobile the
   menu is a column and the margin would be wrong, so it is desktop-only. */
@media (min-width: 768px) {
    .pjt-menu li.pjt-nav-action:first-of-type { margin-left: 8px; }
}

/* The submenu toggle the script inserts. Hidden from pointer users on desktop,
   where hover and focus-within already open the panel — but never display:none,
   because that would take it out of the accessibility tree on touch devices that
   also report a fine pointer (a laptop with a touchscreen). */
.pjt-submenu-toggle {
    appearance: none;
    background: none;
    border: 0;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    color: inherit;
    line-height: 0;
}

.pjt-submenu-toggle::before {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

.pjt-submenu-toggle:focus-visible {
    outline: 2px solid var(--pjt-primary, #2563eb);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    /* On mobile the parent link and its toggle share a row, so the link stays
       tappable as a link and the caret opens the panel. */
    .pjt-menu li.menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .pjt-menu li.menu-item-has-children > a { flex: 1 1 auto; }
    .pjt-menu li.menu-item-has-children > .sub-menu { flex: 1 0 100%; }
    /* The CSS caret on the parent link would duplicate the button's. */
    .pjt-menu li.menu-item-has-children > a::after { display: none; }
}

@media (min-width: 768px) {
    /* Desktop keeps the caret on the link itself and hides the button, which stays
       in the DOM for touch. */
    .pjt-submenu-toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }
    .pjt-submenu-toggle:focus-visible {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        clip-path: none;
    }
}

/* === Hero === */
.pjt-hero {
    background: linear-gradient(135deg, var(--pjt-secondary, #1e40af) 0%, var(--pjt-primary, #2563eb) 60%, #3b82f6 100%);
    color: #fff;
    text-align: center;
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

.pjt-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.pjt-hero-title {
    font-size: 2.8rem;
    margin: 0 0 16px;
    color: #fff;
    position: relative;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pjt-hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.92;
    margin: 0 0 12px;
    position: relative;
    font-weight: 400;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pjt-hero-issn {
    font-size: 0.85rem;
    opacity: 0.65;
    margin: 0;
    position: relative;
    font-family: var(--pjt-font-body);
    letter-spacing: 0.05em;
}

@media (max-width: 640px) {
    .pjt-hero { padding: 48px 24px; }
    .pjt-hero-title { font-size: 2rem; }
    .pjt-hero-subtitle { font-size: 1.05rem; }
}

/* === Front Page === */
.pjt-front-page { padding-top: 0; }

/* Hero CTA buttons */
.pjt-hero-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
}

.pjt-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    color: var(--pjt-secondary, #1e40af);
    border: 2px solid #fff;
    transition: all 0.2s;
}

.pjt-btn-hero:hover {
    background: rgba(255,255,255,0.9);
    color: var(--pjt-primary, #2563eb);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.pjt-btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.7);
    transition: all 0.2s;
}

.pjt-btn-hero-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

/* About / Info Cards */
.pjt-about-text {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.8;
    /* Was capped at 800px, which left it visibly short of the section rule above
       it. Now runs the full section width by request. Restore the cap here if the
       lines ever read too long. */
    max-width: none;
    margin-bottom: 28px;
}

/* auto-FIT, not auto-fill: auto-fill keeps the empty trailing tracks, so three
   cards in a four-track row stopped ~3/4 of the way across. auto-fit collapses
   the empty track and lets the cards stretch.
   NOTE: .pjt-issues-grid deliberately keeps auto-fill — a lone issue card is
   meant to stay one column wide, not stretch. Do not "unify" these. */
.pjt-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.pjt-info-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.pjt-info-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.pjt-info-card-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.pjt-info-card h3 {
    font-size: 0.95rem;
    margin: 0 0 6px;
    color: var(--pjt-secondary, #1e40af);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.pjt-info-card p {
    margin: 0;
    color: #4b5563;
    font-size: 0.9rem;
}

/* Conference date on front page */
.pjt-conf-date {
    font-weight: 600;
    color: var(--pjt-primary, #2563eb);
    margin: 4px 0;
}

/* Getting Started Steps (admin only) */
.pjt-setup-steps {
    display: grid;
    gap: 16px;
}

.pjt-setup-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.pjt-setup-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pjt-setup-step-content h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.pjt-setup-step-content p {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: #6b7280;
}

/* Shortcode Reference */
.pjt-shortcode-ref {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
}

.pjt-shortcode-ref h3 {
    margin: 0 0 16px;
    font-size: 1rem;
}

.pjt-shortcode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.pjt-shortcode-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.85rem;
}

.pjt-shortcode-item code {
    background: #e5e7eb;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.pjt-shortcode-item span {
    color: #6b7280;
}

/* === Empty States === */
.pjt-empty-state {
    text-align: center;
    padding: 48px 24px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    background: #fafbfc;
}

.pjt-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

.pjt-empty-state p {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0 0 16px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Progress Bar */
.pjt-progress-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pjt-progress-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.pjt-progress-fill {
    height: 100%;
    background: var(--pjt-accent, #059669);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.pjt-progress-label {
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
}

/* Completed setup step */
.pjt-step-done {
    opacity: 0.6;
}

.pjt-step-done .pjt-setup-step-number {
    background: var(--pjt-accent, #059669);
    font-size: 0.9rem;
}

/* === Sections === */
.pjt-section { padding: 56px 0; }
.pjt-section-alt { background: #f8fafc; }

.pjt-section-title {
    font-size: 1.6rem;
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pjt-primary, #2563eb);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pjt-section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--pjt-accent, #059669);
    border-radius: 2px;
    flex-shrink: 0;
}

/* === Articles Grid === */
.pjt-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.pjt-article-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.pjt-article-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: var(--pjt-primary, #2563eb);
}

.pjt-article-card-title {
    font-size: 1.1rem;
    margin: 0 0 8px;
    line-height: 1.4;
}
.pjt-article-card-title a { color: var(--pjt-secondary, #1e40af); }
.pjt-article-card-title a:hover { text-decoration: none; color: var(--pjt-primary, #2563eb); }

.pjt-article-card-authors {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 6px;
}

.pjt-article-card-date {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0 0 10px;
}

.pjt-article-card-abstract {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0 0 16px;
    line-height: 1.6;
    flex-grow: 1;
}

.pjt-article-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.pjt-doi { font-size: 0.75rem; color: #9ca3af; font-family: monospace; }

/* === Article Single === */
.pjt-article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 900px) {
    .pjt-article-layout {
        grid-template-columns: 1fr 320px;
    }
}

.pjt-article-header { margin-bottom: 36px; }

.pjt-article-title {
    font-size: 2.2rem;
    margin: 12px 0 16px;
    letter-spacing: -0.02em;
}

.pjt-article-authors {
    font-size: 1.05rem;
    color: #4b5563;
    margin: 0 0 12px;
}

.pjt-article-meta-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 20px;
    padding: 12px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}

.pjt-article-meta-bar span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pjt-article-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pjt-article-metrics {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 12px;
}

.pjt-article-metrics span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pjt-article-section {
    margin-bottom: 36px;
}

.pjt-article-section h2 {
    font-size: 1.3rem;
    margin-bottom: 16px;
    color: var(--pjt-secondary, #1e40af);
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

.pjt-abstract {
    background: #f8fafc;
    padding: 24px;
    border-radius: 10px;
    border-left: 4px solid var(--pjt-primary, #2563eb);
    line-height: 1.8;
    font-size: 0.95rem;
    color: #374151;
}

.pjt-keywords {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* === ORCID === */
.pjt-orcid-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #a6ce39;
    text-decoration: none;
}
.pjt-orcid-link:hover { color: #82a530; }

.pjt-orcid-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* === Sidebar === */
.pjt-article-sidebar {
    font-size: 0.9rem;
}

.pjt-sidebar-section {
    margin-bottom: 28px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}

.pjt-sidebar-section h3 {
    font-size: 0.95rem;
    margin: 0 0 12px;
    color: var(--pjt-secondary, #1e40af);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.pjt-sidebar-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pjt-sidebar-section li {
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.pjt-sidebar-section li:last-child { border-bottom: none; }

.pjt-author-list li {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* === Issue Templates === */
.pjt-issue-header {
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--pjt-primary, #2563eb);
}

.pjt-issue-header h1 {
    margin: 0 0 8px;
    font-size: 2rem;
}

.pjt-issue-meta {
    font-size: 1.05rem;
    color: #6b7280;
}

.pjt-issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.pjt-issue-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    background: #fff;
}

.pjt-issue-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.pjt-issue-card-cover {
    height: 8px;
    background: linear-gradient(90deg, var(--pjt-primary, #2563eb), var(--pjt-accent, #059669));
}

.pjt-issue-card-body { padding: 24px; }

.pjt-issue-card-title { margin: 0 0 8px; font-size: 1.2rem; }
.pjt-issue-card-title a { color: var(--pjt-secondary, #1e40af); }
.pjt-issue-card-title a:hover { color: var(--pjt-primary, #2563eb); text-decoration: none; }

.pjt-issue-card-meta { font-size: 0.9rem; color: #6b7280; margin: 0 0 8px; }
.pjt-issue-card-count {
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Table of Contents */
.pjt-toc { margin-top: 28px; }

.pjt-toc-entry {
    padding: 24px 0;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s;
}

.pjt-toc-entry:hover { background: #fafbfc; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 8px; }

.pjt-toc-entry h3 {
    font-size: 1.15rem;
    margin: 0 0 8px;
    line-height: 1.4;
}
.pjt-toc-entry h3 a { color: var(--pjt-secondary, #1e40af); }
.pjt-toc-entry h3 a:hover { color: var(--pjt-primary, #2563eb); text-decoration: none; }

.pjt-toc-authors { font-size: 0.85rem; color: #6b7280; margin: 0 0 8px; }
.pjt-toc-abstract { font-size: 0.9rem; color: #4b5563; margin: 0 0 12px; line-height: 1.6; }
.pjt-toc-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #6b7280;
    align-items: center;
}

/* === CFPs === */
.pjt-cfp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.pjt-cfp-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    background: #fff;
}

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

.pjt-cfp-card h3 { margin: 0 0 10px; font-size: 1.1rem; }
.pjt-cfp-card p { font-size: 0.9rem; color: #4b5563; line-height: 1.6; }

.pjt-cfp-deadline {
    color: #d97706;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === Archive Header === */
.pjt-archive-header {
    margin-bottom: 36px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--pjt-primary, #2563eb);
}

.pjt-archive-header h1 { margin: 0 0 4px; font-size: 2rem; }
.pjt-archive-desc { color: #6b7280; margin: 0; }

/* === Editorial Board === */
.pjt-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.pjt-board-member {
    text-align: center;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: box-shadow 0.25s;
}

.pjt-board-member:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }

/* === Badges === */
.pjt-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.75rem;
    border-radius: 20px;
    background: #eff6ff;
    color: var(--pjt-primary, #2563eb);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pjt-badge-type { background: #f0fdf4; color: var(--pjt-accent, #059669); }
.pjt-badge-small { font-size: 0.65rem; padding: 2px 8px; }

/* === Buttons === */
.pjt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.pjt-btn-primary {
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    border-color: var(--pjt-primary, #2563eb);
}

.pjt-btn-primary:hover {
    background: var(--pjt-secondary, #1e40af);
    border-color: var(--pjt-secondary, #1e40af);
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.pjt-btn-primary:focus-visible { outline: 2px solid var(--pjt-primary, #2563eb); outline-offset: 2px; }

.pjt-btn-outline {
    background: transparent;
    color: var(--pjt-primary, #2563eb);
    border-color: var(--pjt-primary, #2563eb);
}

.pjt-btn-outline:hover {
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.pjt-btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* === Guidelines === */
.pjt-guidelines {
    background: #f8fafc;
    padding: 28px;
    border-radius: 10px;
    margin: 28px 0;
    border: 1px solid #e9ecef;
}

.pjt-checklist {
    list-style: none;
    padding: 0;
}

.pjt-checklist li {
    padding: 10px 0 10px 32px;
    position: relative;
    border-bottom: 1px solid #f3f4f6;
}

.pjt-checklist li::before {
    content: "\2610";
    position: absolute;
    left: 0;
    color: var(--pjt-primary, #2563eb);
    font-size: 1.1rem;
}

.pjt-checklist li:last-child { border-bottom: none; }

/* === Footer === */
.pjt-footer {
    background: #0f172a;
    color: #cbd5e1;
    padding: 56px 0 28px;
    margin-top: 56px;
}

.pjt-footer a { color: #93c5fd; transition: color 0.2s; }
.pjt-footer a:hover { color: #bfdbfe; }

.pjt-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 36px;
    margin-bottom: 36px;
}

.pjt-footer-brand h3 { color: #fff; margin: 0 0 10px; font-size: 1.2rem; }
.pjt-issn { font-size: 0.85rem; font-family: monospace; letter-spacing: 0.02em; }

.pjt-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pjt-footer-menu li { padding: 5px 0; }
.pjt-footer-menu li a:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

.pjt-social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pjt-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #94a3b8;
    transition: all 0.2s;
}

.pjt-social-link:hover {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
    text-decoration: none;
}

.pjt-social-link svg { width: 16px; height: 16px; fill: currentColor; }

.pjt-footer-bottom {
    border-top: 1px solid #1e293b;
    padding-top: 20px;
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
}

/* === Pagination === */
.nav-links {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 36px;
}

.nav-links a, .nav-links span {
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.nav-links a:hover {
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    border-color: var(--pjt-primary, #2563eb);
    text-decoration: none;
}

.nav-links .current {
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    border-color: var(--pjt-primary, #2563eb);
}

/* === View All / CTA === */
.pjt-center-cta {
    text-align: center;
    margin-top: 28px;
}

/* === Responsive === */
@media (max-width: 1024px) {
    .pjt-article-layout {
        grid-template-columns: 1fr;
    }

    .pjt-article-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .pjt-articles-grid,
    .pjt-issues-grid,
    .pjt-cfp-grid {
        grid-template-columns: 1fr;
    }

    .pjt-article-title { font-size: 1.6rem; }
    .pjt-section { padding: 36px 0; }
    .pjt-container { padding: 0 16px; }
    .pjt-footer { padding: 40px 0 20px; }
}

/* === Print Stylesheet === */
@media print {
    .pjt-header,
    .pjt-footer,
    .pjt-menu-toggle,
    .pjt-article-actions,
    .pjt-nav,
    .nav-links,
    .pjt-skip-link { display: none !important; }

    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    .pjt-article-layout { grid-template-columns: 1fr; }
    .pjt-abstract { border: 1px solid #ccc; }
    .pjt-article-sidebar { page-break-before: always; }

    .pjt-article-meta-bar::after {
        content: " - Printed from " attr(data-url);
        display: block;
        font-size: 10pt;
        color: #666;
    }

    .pjt-paywall-card { display: none !important; }
}

/* === Paywall Card === */
.pjt-paywall-card {
    text-align: center;
    padding: 48px 32px;
    margin: 32px 0;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: linear-gradient(135deg, #fefce8 0%, #fff 50%, #ecfdf5 100%);
}

.pjt-paywall-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.pjt-paywall-card h3 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    color: #1f2937;
}

.pjt-paywall-card > p {
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.pjt-paywall-options {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pjt-paywall-option {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 24px;
    min-width: 200px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pjt-paywall-option strong {
    font-size: 0.95rem;
    color: #374151;
}

.pjt-paywall-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pjt-primary, #1e40af);
}

.pjt-paywall-code {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.pjt-paywall-code label {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
}

.pjt-paywall-code input[type="text"] {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
}

.pjt-paywall-login {
    margin-top: 16px;
    font-size: 0.9rem;
    color: #6b7280;
}

.pjt-paywall-login a {
    color: var(--pjt-primary, #1e40af);
    font-weight: 600;
}

@media (max-width: 600px) {
    .pjt-paywall-options {
        flex-direction: column;
        align-items: center;
    }
    .pjt-paywall-option {
        width: 100%;
    }
}

/* === Calls for papers archive === */
.pjt-cfp-list { display: grid; gap: 20px; margin: 24px 0; }

.pjt-cfp-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 22px;
    background: #fff;
}
.pjt-cfp-title { margin: 0 0 8px; font-size: 1.2rem; }
.pjt-cfp-deadline { margin: 0 0 10px; color: #6b7280; font-size: 0.92rem; }
.pjt-cfp-deadline--passed { color: #9ca3af; }
.pjt-cfp-closed {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pjt-cfp-excerpt { color: #374151; margin-bottom: 14px; }

/* An empty archive is a normal state between calls, so it is styled as a
   deliberate message rather than left as a bare line of text. */
.pjt-empty-state {
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    padding: 40px 24px;
    text-align: center;
    color: #6b7280;
    margin: 24px 0;
}
.pjt-empty-title { font-weight: 600; color: #374151; margin-bottom: 6px; }
.pjt-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.pjt-button {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--pjt-primary, #2563eb);
    color: #fff;
    font-weight: 600;
    border: 1px solid transparent;
}
.pjt-button:hover { color: #fff; filter: brightness(0.94); text-decoration: none; }
.pjt-button--outline {
    background: transparent;
    color: #374151;
    border-color: #d1d5db;
}
.pjt-button--outline:hover { color: var(--pjt-primary, #2563eb); border-color: var(--pjt-primary, #2563eb); filter: none; }