/*
 * foundation.css — Design tokens, PKP overrides, header, footer, global utilities
 * Split from modern-ojs.css for maintainability
 */

/*
 * OJS Modern Child Theme — Phase 1+2 Redesign
 * Spacing system benchmarked against Nature.com
 */

/* =========================================
   0. Design Tokens
========================================= */
:root {
    --academic-blue: #004660;
    --academic-blue-dark: #003042;
    --academic-blue-light: #005b7a;
    --action-color: #007398;
    --action-hover: #005b7a;
    --success-green: #2E7D32;
    --bg-page: #F7F7F7;
    --bg-white: #FFFFFF;
    --bg-trust: #F0F4F8;
    --text-primary: #222222;
    --text-secondary: #555555;
    --text-muted: #6B7280;
    --border-light: #E0E0E0;
    --border-dark: #CCCCCC;
    /* Shadow scale: sm = resting cards/buttons, md = hover lift/dropdowns, lg = modals/drawers.
       --focus-ring is the single focus indicator for inputs and interactive elements. */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --focus-ring: 0 0 0 3px rgba(0, 115, 152, 0.12);
    /* Radius scale: restrained look for an academic journal system.
       xs = badges/tags, sm = buttons/inputs, md = cards/dropdowns, lg = modals/hero panels.
       50% is reserved for avatars and circular icon buttons only. */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --font-ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-heading: 'Merriweather', 'Georgia', 'Noto Serif SC', serif;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --container-max: 1200px;

    /* Commonly referenced semantic aliases */
    --text-light: #6B7280;
    --text-color: #374151;
    --heading-color: #1C2833;
    --border-color: #E2E8F0;
    --bg-light: #F8FAFC;
    --bg-muted: #F1F5F9;

    /* Spacing scale (consistent vertical rhythm) */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-section: 48px;

    /* Type scale — bilingual (CJK + Latin) commercial journal standard.
       12px is the CJK legibility floor; all tokens in rem for user scaling. */
    --text-xs: 0.75rem;     /* 12px badges, meta, footnotes */
    --text-sm: 0.8125rem;   /* 13px secondary text, table cells */
    --text-md: 0.875rem;    /* 14px UI default: buttons, forms */
    --text-base: 0.9375rem; /* 15px card/list body text */
    --text-lg: 1rem;        /* 16px article body, lead text */

    /* Component title system (decoupled from HTML heading levels) */
    --title-2xl: 1.5rem;    /* 24px page titles */
    --title-xl: 1.375rem;   /* 22px section headers */
    --title-lg: 1.25rem;    /* 20px sub-sections */
    --title-md: 1.125rem;   /* 18px module titles */
    --title-sm: 1rem;       /* 16px card titles */
    --title-xs: 0.875rem;   /* 14px small headings */
    --title-weight: 600;
    --title-weight-bold: 700;

    /* Display scale (hero/banner only) */
    --display-sm: 1.75rem;  /* 28px */
    --display-md: 2rem;     /* 32px */
    --display-lg: 3rem;     /* 48px */

    /* Canonical aliases (indexSite EDS palette → global access) */
    --font-sans: var(--font-ui);
    --blue-600: #1A5276;
    --blue-500: #2471A3;
    --blue-400: #5499C7;
    --blue-200: #D4E6F1;
    --blue-100: #EBF5FB;
    --gray-900: #1C2833;
    --gray-700: #4A5568;
    --gray-500: #7B8D9E;
    --gray-300: #D5D8DC;
    --gray-200: #EAECEE;
    --gray-100: #F4F6F7;
    --white: #FFFFFF;
    --accent-green: #1E8449;
}


/* =========================================
   1. PKP Structure Override (MUST come first)
   Neutralize all default OJS grid/float/width rules
========================================= */
body .pkp_structure_page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body .pkp_structure_content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
body .pkp_structure_main {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body .pkp_structure_main::before,
body .pkp_structure_main::after {
    display: none !important;
}

/* Non-homepage: restore centered container */
body:not(.pkp_page_index) .pkp_structure_content {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding: var(--space-lg) var(--space-md) 0 !important;
}
body:not(.pkp_page_index) .pkp_structure_main {
    padding: 0 0 var(--space-xl) !important;
}

/* Heading margin normalization: only non-homepage OJS-native content
   OJS default sets 2.857rem (~46px) which is excessive.
   AC components use class-based title system, not heading elements. */
body:not(.pkp_page_index) .page h2,
body:not(.pkp_page_index) .page h3,
body:not(.pkp_page_index) .page h4 {
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-xs) !important;
}
body:not(.pkp_page_index) .page > h1:first-of-type {
    margin-top: 0 !important;
}
/* AC component container reset: headings inside .ac-* use class-based styling */
[class^="ac-"] > h1,
[class^="ac-"] > h2,
[class^="ac-"] > h3,
[class^="ac-"] > h4,
[class*=" ac-"] > h1,
[class*=" ac-"] > h2,
[class*=" ac-"] > h3,
[class*=" ac-"] > h4 {
    margin: 0 !important;
    font-size: inherit;
    font-weight: inherit;
}


/* =========================================
   2. Base Typography
========================================= */
body, body.pkp_page_index {
    font-family: var(--font-ui) !important;
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
    line-height: 1.65 !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading) !important;
    color: var(--academic-blue) !important;
    font-weight: 700 !important;
    margin-top: 0;
    line-height: 1.3;
}

a {
    color: var(--action-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--action-hover);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.ac-btn:focus-visible,
.ac-mobile-toggle:focus-visible,
.search-bar-btn:focus-visible,
.obj_galley_link:focus-visible,
.ac-sidebar-btn:focus-visible {
    outline: 2px solid var(--action-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
a:focus-visible {
    text-decoration: none;
}
/* Form fields match :focus-visible even on mouse click, so the offset outline
   reads as harsh there. Use the soft border tint + focus ring instead. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--action-color);
    box-shadow: var(--focus-ring);
}

.ac-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
    box-sizing: border-box;
}


/* =========================================
   3. Sticky Header
========================================= */
.ac-header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}
.ac-header-main {
    padding: var(--space-xs) 0;
}
.ac-header-main .ac-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
/* Desktop: never break the navbar into two rows; the brand name shrinks instead.
   The header rides a wider track than page content so long-locale (EN) menus
   and the journal name can coexist on one row */
@media (min-width: 1200px) {
    .ac-header-main .ac-container {
        flex-wrap: nowrap;
        max-width: 1360px;
    }
}
/* Tight window where the nowrap header hasn't gained extra width yet:
   EN labels leave no room for the full journal name, keep logo + acronym only */
@media (min-width: 1200px) and (max-width: 1359px) {
    html[lang="en"] .ac-brand-name {
        display: none;
    }
}
.ac-brand {
    font-family: var(--font-heading);
    font-size: var(--title-2xl);
    font-weight: bold;
    flex-shrink: 0;
}
.ac-brand a { color: var(--academic-blue); text-decoration: none; }
.ac-brand img { max-width: 100%; height: auto; max-height: 40px !important; }
.pkp_site_name img { max-height: 40px !important; }
.ac-nav-primary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-end;
}
/* Long-text locales need tighter rhythm to keep the navbar on one row */
html[lang="en"] .ac-nav-primary {
    gap: var(--space-xs);
}
.ac-nav-divider {
    width: 1px;
    height: 20px;
    background-color: var(--border-light);
}
.ac-menu-primary {
    list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-sm);
    align-items: center;
}
/* Tighter rhythm on desktop so long locales (EN) fit on a single row */
@media (min-width: 1025px) {
    html[lang="en"] .ac-menu-primary { gap: var(--space-xs); }
    html[lang="en"] .ac-menu-primary > li > a { font-size: var(--text-xs); }
    .ac-menu-primary > li > a { padding: var(--space-xs) 2px; }
}
.ac-menu-primary a {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}
.ac-menu-primary a:hover { color: var(--action-hover); text-decoration: none; }
.ac-menu-primary ul { display: none; }

/* ═══════════════════════════════════════════
   User Navigation — Pure CSS (no JS needed)
   ═══════════════════════════════════════════ */
.ac-user-menu { position: relative; display: flex; align-items: center; }
.ac-menu-user {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.ac-menu-user > li { display: flex; }

/* Login Button — Primary action (blue pill) */
.ac-menu-user > li > a[href*="login"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff !important;
    background: var(--action-color);
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    line-height: 1.3;
}
.ac-menu-user > li > a[href*="login"]:hover {
    background: var(--action-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: #fff !important;
}
.ac-menu-user > li > a[href*="login"]::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") no-repeat center/contain;
    opacity: 0.9;
}

/* Register Button — Secondary action (outlined pill) */
.ac-menu-user > li > a[href*="register"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border: 1.5px solid #cbd5e1;
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    white-space: nowrap;
    line-height: 1.3;
    background: #fff;
}
.ac-menu-user > li > a[href*="register"]:hover {
    color: var(--action-color) !important;
    border-color: var(--action-color);
    background: rgba(36, 113, 163, 0.03);
    box-shadow: var(--shadow-sm);
}
.ac-menu-user > li > a[href*="register"]::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E") no-repeat center/contain;
}
.ac-menu-user > li > a[href*="register"]:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232471A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E");
}

/* ─── Authenticated: Avatar + Dropdown (JS-created) ─── */
.ac-nav-auth { position: relative; }
.ac-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
    outline: none;
}
.ac-avatar-btn:hover {
    border-color: var(--action-color);
    box-shadow: var(--shadow-sm);
}
.ac-avatar-btn[aria-expanded="true"] {
    border-color: var(--border-light);
    background: #f8fafc;
    box-shadow: var(--shadow-sm);
}
.ac-avatar-btn:focus-visible {
    box-shadow: var(--focus-ring);
}
.ac-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.ac-avatar-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ac-avatar-btn svg {
    color: #94a3b8;
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}
.ac-avatar-btn[aria-expanded="true"] svg:last-child {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.ac-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    padding: 8px;
    pointer-events: none;
    max-height: min(72vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ac-dropdown-panel.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.ac-dropdown-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 14px;
}
.ac-dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--text-base);
    font-weight: 700;
    flex-shrink: 0;
}
.ac-dropdown-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ac-dropdown-username {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-dropdown-useremail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 8px;
}
.ac-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    font-size: var(--text-sm) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast) !important;
    text-decoration: none !important;
}
.ac-dropdown-item svg {
    color: #94a3b8;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.ac-dropdown-item:hover {
    background: #f8fafc !important;
    color: var(--action-color) !important;
}
.ac-dropdown-item:hover svg { color: var(--action-color); }
.ac-dropdown-danger {
    color: #dc2626 !important;
}
.ac-dropdown-danger svg { color: #dc2626 !important; }
.ac-dropdown-danger:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/* --- User menu: site-admin entry, single-journal label, multi-journal accordion --- */
.ac-dropdown-admin { font-weight: 600 !important; color: var(--action-color) !important; }
.ac-dropdown-journal-label {
    padding: 6px 12px 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ac-dropdown-journal-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.ac-dropdown-journal-toggle:hover { background: #f8fafc; }
.ac-dropdown-journal-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ac-dropdown-journal-count {
    flex-shrink: 0;
    min-width: 18px;
    padding: 0 5px;
    font-size: var(--text-xs);
    line-height: 16px;
    text-align: center;
    color: #64748b;
    background: #f1f5f9;
    border-radius: var(--radius-xs);
}
.ac-dropdown-journal-caret {
    flex-shrink: 0;
    display: inline-flex;
    color: #94a3b8;
}
.ac-dropdown-journal-caret svg { transition: transform var(--transition-fast); }
.ac-dropdown-journal.is-open .ac-dropdown-journal-caret svg { transform: rotate(180deg); }
.ac-dropdown-journal-roles { display: none; }
.ac-dropdown-journal.is-open .ac-dropdown-journal-roles { display: block; }
.ac-dropdown-role { padding-left: 30px !important; }
.ac-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: var(--text-lg);
    background: var(--bg-subtle, #f1f5f9);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.ac-search-btn:hover {
    color: var(--action-color);
    background: #e2e8f0;
}

/* ─── Language Switcher — Pure CSS dropdown ─── */
.ac-lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
}
.ac-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.ac-lang-btn .fa-globe { font-size: var(--text-base); }
.ac-lang-caret { font-size: var(--text-xs); transition: transform var(--transition-fast); }
.ac-lang-switcher:hover .ac-lang-btn,
.ac-lang-switcher:focus-within .ac-lang-btn {
    color: var(--action-color);
    background: #e2e8f0;
}
.ac-lang-switcher:hover .ac-lang-caret,
.ac-lang-switcher:focus-within .ac-lang-caret {
    transform: rotate(180deg);
}
.ac-lang-menu {
    list-style: none;
    margin: 0;
    padding: 6px;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 1000;
}
.ac-lang-switcher:hover .ac-lang-menu,
.ac-lang-switcher:focus-within .ac-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(2px);
}
.ac-lang-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
}
.ac-lang-menu a:hover {
    background: var(--bg-subtle, #f1f5f9);
    color: var(--action-color);
}
.ac-lang-menu a .fa-check {
    width: 12px;
    font-size: var(--text-xs);
    visibility: hidden;
}
.ac-lang-menu a.is-current {
    color: var(--action-color);
    font-weight: 600;
}
.ac-lang-menu a.is-current .fa-check { visibility: visible; }

/* Navigation action buttons (Submit / Browse) */
.ac-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.ac-nav-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    transition: all var(--transition-fast);
    white-space: nowrap;
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    background: transparent;
}
.ac-nav-action-btn:hover {
    color: var(--action-color);
    border-color: var(--action-color);
    background: rgba(0, 115, 152, 0.04);
}
.ac-nav-action-btn i { font-size: var(--text-xs); }
.ac-nav-action-primary {
    background: var(--action-color);
    color: #fff !important;
    border-color: var(--action-color);
}
.ac-nav-action-primary:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: #fff !important;
}

/* Brand name beside logo */
.ac-brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 0 1 auto;
    min-width: 0;
}
.ac-brand-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ac-brand-logo img {
    height: 32px;
    width: auto;
    max-width: 180px;
}
/* Two-line clamp: shows the full journal name in half the width,
   and shrinks (with ellipsis) before the nav would wrap to a second row */
.ac-brand-name {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 180px;
    /* Floor keeps the name legible when the nav presses in; the two-line
       clamp above truncates with ellipsis instead of collapsing to ~1ch */
    min-width: 96px;
    flex: 0 1 auto;
}
.ac-brand-name:hover {
    color: var(--action-color);
}


/* =========================================
   10. Footer
========================================= */
.ac-footer-wrapper {
    background-color: var(--academic-blue-dark);
    color: #CCCCCC;
    padding-top: var(--space-xl);
    margin-top: 0;
    border-top: 3px solid var(--action-color);
}
.ac-footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
}
.ac-footer-heading {
    color: var(--bg-white) !important;
    font-size: var(--title-sm) !important;
    font-family: var(--font-heading) !important;
    margin-bottom: var(--space-sm) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: var(--space-xs);
}
.ac-footer-text {
    font-size: var(--text-md);
    line-height: 1.55;
    margin-bottom: 10px;
}
.ac-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac-footer-links li { margin-bottom: 8px; }
.ac-footer-wrapper a {
    color: #CCCCCC;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.ac-footer-wrapper a:hover {
    color: var(--action-color);
    text-decoration: underline;
}
.ac-footer-brand img {
    filter: brightness(0) invert(1) opacity(0.8);
    max-width: 120px;
}
/* 出版者条 (publisher bar)：主办单位 + 出版平台，logo 为主 */
.ac-footer-publisher {
    border-top: 1px solid rgba(255,255,255,0.1);
}
.ac-footer-publisher-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-2xl);
    padding: var(--space-md) var(--space-sm);
}
.ac-footer-publisher-unit {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.ac-footer-publisher-logo img {
    display: block;
    max-height: 40px;
    max-width: 180px;
    width: auto;
}
.ac-footer-publisher-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ac-footer-publisher-label {
    font-size: var(--text-sm);
    color: #999999;
}
.ac-footer-wrapper .ac-footer-publisher-name {
    font-size: var(--text-base);
    color: var(--bg-white);
}
.ac-footer-wrapper a.ac-footer-publisher-name:hover {
    color: var(--action-color);
}
.ac-footer-bottom {
    background: #002230;
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
    text-align: center;
    color: #999999;
}
.ac-footer-bottom p { margin: 0; }


/* =========================================
   12. Global Page Container
========================================= */
body:not(.pkp_page_index) .page {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    max-width: var(--container-max, 1200px);
}
body:not(.pkp_page_index) .page > h1 {
    font-family: var(--font-heading) !important;
    font-size: var(--display-sm) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-md) !important;
    letter-spacing: -0.3px;
}
body:not(.pkp_page_index) .page > h2 {
    font-size: var(--title-lg) !important;
    margin-top: var(--space-md) !important;
    margin-bottom: var(--space-sm) !important;
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-light);
}
body:not(.pkp_page_index) .page p {
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}


/* =========================================
   13. Breadcrumbs
========================================= */
.cmp_breadcrumbs {
    list-style: none;
    padding: 0 !important;
    margin: 0 0 var(--space-md) 0 !important;
    font-size: var(--text-md);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.cmp_breadcrumbs a {
    color: var(--action-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}
.cmp_breadcrumbs a:hover {
    color: var(--action-hover);
    text-decoration: underline;
}
.cmp_breadcrumbs .separator {
    color: var(--text-muted);
    margin: 0 2px;
    font-size: var(--text-xs);
}
.cmp_breadcrumbs .current {
    color: var(--text-primary);
    font-weight: 600;
}

/* =========================================
   26. Breadcrumbs (Global)
========================================= */
body .cmp_breadcrumbs {
    font-size: var(--text-sm) !important;
    color: var(--text-muted) !important;
    padding: 0 0 var(--space-sm) 0 !important;
    margin: 0 0 var(--space-md) 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-family: var(--font-ui) !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
body .cmp_breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}
body .cmp_breadcrumbs li {
    display: inline-flex;
    align-items: center;
}
body .cmp_breadcrumbs a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast);
}
body .cmp_breadcrumbs a:hover {
    color: var(--action-color) !important;
}
body .cmp_breadcrumbs .current {
    color: var(--text-primary) !important;
    font-weight: 600;
}
body .cmp_breadcrumbs .separator {
    margin: 0 4px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    content: '›';
}


/* =========================================
   14. Forms
========================================= */
body .cmp_form,
body form.cmp_form {
    max-width: 560px;
}
body .cmp_form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
body .cmp_form .fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
body .cmp_form label .label,
body .cmp_form label > .label {
    display: block;
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--text-primary);
    margin-bottom: 6px;
}
body .cmp_form .required {
    color: #D32F2F;
    font-weight: 700;
}
body .cmp_form input[type="text"],
body .cmp_form input[type="email"],
body .cmp_form input[type="password"],
body .cmp_form input[type="url"],
body .cmp_form input[type="tel"],
body .cmp_form input[type="number"],
body .cmp_form textarea,
body .cmp_form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
    line-height: 1.5;
}
body .cmp_form input:focus,
body .cmp_form textarea:focus,
body .cmp_form select:focus {
    outline: none;
    border-color: var(--action-color);
    box-shadow: var(--focus-ring);
}
body .cmp_form input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: var(--action-color);
    transform: scale(1.1);
}
body .cmp_form .checkbox label,
body .cmp_form .optin label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-md);
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
}
body .cmp_form .checkbox label .label,
body .cmp_form .optin label .label {
    display: inline;
    font-weight: 400;
    margin-bottom: 0;
}

/* Buttons */
body .cmp_form .buttons,
body .page .buttons {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}
body button.submit,
body .cmp_form button.submit,
body .pkp_button,
body input[type="submit"] {
    padding: 11px 28px;
    background: var(--action-color);
    color: var(--bg-white) !important;
    border: 2px solid var(--action-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
body button.submit:hover,
body .cmp_form button.submit:hover,
body .pkp_button:hover,
body input[type="submit"]:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
    box-shadow: var(--shadow-sm);
}
body .cmp_form a.register,
body .cmp_form a.login {
    color: var(--action-color);
    font-weight: 600;
    font-size: var(--text-md);
    transition: color var(--transition-fast);
}
body .cmp_form a.register:hover,
body .cmp_form a.login:hover {
    color: var(--action-hover);
}

/* Error states */
body .pkp_form_error {
    background: #FFF3F0;
    color: #D32F2F;
    border: 1px solid #FFCDD2;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: var(--space-sm);
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.5;
}

/* =========================================
   28. Forms (Global)
========================================= */
body .cmp_form input[type="text"],
body .cmp_form input[type="email"],
body .cmp_form input[type="password"],
body .cmp_form input[type="url"],
body .cmp_form input[type="search"],
body .cmp_form input[type="tel"],
body .cmp_form input[type="number"],
body .cmp_form textarea,
body .cmp_form select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-md) !important;
    font-family: var(--font-ui) !important;
    color: var(--text-primary) !important;
    background: var(--bg-white) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    height: auto !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}
body .cmp_form input:focus,
body .cmp_form textarea:focus,
body .cmp_form select:focus {
    border-color: var(--action-color) !important;
    box-shadow: var(--focus-ring) !important;
}
body .cmp_form textarea {
    min-height: 100px !important;
    resize: vertical !important;
}
body .cmp_form label,
body .cmp_form .label {
    display: block !important;
    font-size: var(--text-md) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 6px !important;
    font-family: var(--font-ui) !important;
}
body .cmp_form .description,
body .cmp_form .sub_label {
    font-size: var(--text-xs) !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}
body .cmp_form .form_group,
body .cmp_form .fields {
    margin-bottom: var(--space-md) !important;
}
body .cmp_form .pkp_form_error,
body .cmp_form .error {
    color: var(--color-error) !important;
    font-size: var(--text-xs) !important;
    margin-top: 4px !important;
}

/* Buttons (Global) */
body button.submit,
body .cmp_form button.submit,
body input[type="submit"],
body .cmp_button,
body a.cmp_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    background: var(--action-color) !important;
    color: var(--bg-white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-md) !important;
    font-weight: 600 !important;
    font-family: var(--font-ui) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background var(--transition-fast), box-shadow var(--transition-fast) !important;
    line-height: 1.4 !important;
}
body button.submit:hover,
body .cmp_form button.submit:hover,
body input[type="submit"]:hover,
body .cmp_button:hover,
body a.cmp_button:hover {
    background: var(--action-hover) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Checkbox & Radio */
body .cmp_form input[type="checkbox"],
body .cmp_form input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    accent-color: var(--action-color) !important;
}


/* =========================================
   15. Notifications
========================================= */
body .cmp_notification {
    position: relative;
    overflow: hidden;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    background: #EBF5FB;
    color: var(--text-primary);
}
body .cmp_notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--action-color);
}
body .cmp_notification.warning {
    background: #FFF8E1;
    color: #5D4037;
}
body .cmp_notification.warning::before {
    background: #F9A825;
}
body .cmp_notification a {
    font-weight: 600;
    color: var(--action-color);
}

/* =========================================
   27. Notifications (Global)
========================================= */
body .cmp_notification {
    position: relative !important;
    overflow: hidden !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-info-bg) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-md) !important;
    margin-bottom: var(--space-md) !important;
    font-family: var(--font-ui) !important;
    line-height: 1.5 !important;
}
body .cmp_notification::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: var(--color-info) !important;
}
body .cmp_notification.warning::before,
body .cmp_notification.warn::before {
    background: var(--color-warning) !important;
}
body .cmp_notification.warning,
body .cmp_notification.warn {
    background: var(--color-warning-bg) !important;
}
body .cmp_notification.error::before {
    background: var(--color-error) !important;
}
body .cmp_notification.error {
    background: var(--color-error-bg) !important;
}
body .cmp_notification.success::before {
    background: var(--color-success) !important;
}
body .cmp_notification.success {
    background: var(--color-success-bg) !important;
}
body .cmp_notification a {
    color: var(--action-color) !important;
    font-weight: 600;
}


/* =========================================
   21. Pagination
========================================= */
.cmp_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
    font-size: var(--text-md);
    color: var(--text-muted);
    flex-wrap: wrap;
}
.cmp_pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--bg-white);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    color: var(--action-color);
    font-weight: 600;
    font-size: var(--text-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.cmp_pagination a:hover {
    background: var(--action-color);
    color: var(--bg-white);
    border-color: var(--action-color);
    text-decoration: none;
}

/* =========================================
   31. Pagination (Global)
========================================= */
body .cmp_pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: var(--space-lg) 0 !important;
    font-family: var(--font-ui) !important;
}
body .cmp_pagination a,
body .cmp_pagination .current {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-md) !important;
    text-decoration: none !important;
    transition: all var(--transition-fast) !important;
}
body .cmp_pagination a {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-light) !important;
    background: var(--bg-white) !important;
}
body .cmp_pagination a:hover {
    border-color: var(--action-color) !important;
    color: var(--action-color) !important;
}
body .cmp_pagination .current {
    background: var(--action-color) !important;
    color: var(--bg-white) !important;
    font-weight: 600 !important;
    border: 1px solid var(--action-color) !important;
}


/* =========================================
   25. Global Design Token Additions
========================================= */
:root {
    --color-info: #2196F3;
    --color-success: #4CAF50;
    --color-warning: #FF9800;
    --color-error: #f44336;
    --color-info-bg: #e3f2fd;
    --color-success-bg: #e8f5e9;
    --color-warning-bg: #fff3e0;
    --color-error-bg: #ffebee;
}


/* =========================================
   29. Page Container (Non-homepage)
========================================= */
body:not(.pkp_page_index) .page > h1 {
    font-family: var(--font-heading) !important;
    font-size: var(--display-sm) !important;
    font-weight: 700 !important;
    color: var(--academic-blue) !important;
    margin-bottom: var(--space-md) !important;
    line-height: 1.3 !important;
}
body:not(.pkp_page_index) .page > h2 {
    font-family: var(--font-ui) !important;
    font-size: var(--title-lg) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: var(--space-lg) 0 var(--space-sm) !important;
}
body:not(.pkp_page_index) .page > p,
body:not(.pkp_page_index) .page > div > p {
    font-size: var(--text-base) !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
}


/* =========================================
   30. About Sub-menu Fix (CRITICAL)
========================================= */
.ac-menu-primary > li {
    position: relative;
}
.ac-menu-primary > li > ul,
.ac-menu-primary > li > .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--bg-white);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-xs) 0;
    z-index: 1000;
    list-style: none;
}
.ac-menu-primary > li:hover > ul,
.ac-menu-primary > li:hover > .submenu,
.ac-menu-primary > li:focus-within > ul,
.ac-menu-primary > li:focus-within > .submenu {
    display: block;
}
/* Override default theme's .dropdown-menu class injected by main.js (Bootstrap) */
.ac-menu-primary > li > ul.dropdown-menu,
.ac-menu-primary > li > ul.dropdown-menu.show {
    display: none;
    left: 0;
}
.ac-menu-primary > li:hover > ul.dropdown-menu,
.ac-menu-primary > li:focus-within > ul.dropdown-menu {
    display: block;
}
.ac-menu-primary > li > ul > li > a,
.ac-menu-primary > li > .submenu > li > a {
    display: block;
    padding: 10px 20px;
    color: var(--text-primary);
    font-size: var(--text-md);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    border-left: none;
    border-radius: 0;
}
.ac-menu-primary > li > ul > li > a:hover,
.ac-menu-primary > li > .submenu > li > a:hover,
.ac-menu-primary > li > ul > li > a:focus,
.ac-menu-primary > li > .submenu > li > a:focus {
    background: var(--bg-page);
    border-left: none;
    color: var(--action-color);
}


/* =========================================
   33. Mobile Hamburger Menu
========================================= */
.ac-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}
.ac-mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--radius-xs);
    transition: all var(--transition-normal);
}
.ac-mobile-toggle.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.ac-mobile-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.ac-mobile-toggle.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* =========================================
   34. Navigation Active State
========================================= */
body.pkp_page_issue:not(.pkp_op_archive) .ac-menu-primary > li > a[href*="current"],
body.pkp_op_current:not(.pkp_op_archive) .ac-menu-primary > li > a[href*="current"],
body.pkp_page_issue.pkp_op_archive .ac-menu-primary > li > a[href*="archive"],
body.pkp_page_about .ac-menu-primary > li > a[href*="about"],
body.pkp_page_search .ac-menu-primary > li > a[href*="search"],
body.pkp_page_index .ac-menu-primary > li > a[href*="index"] {
    color: var(--action-color) !important;
    font-weight: 700;
}
/* The platform-home link URL also contains "index"; it must never be
   shown as the active page while browsing inside a journal. */
body.pkp_page_index .ac-platform-home > li > a[href*="index"] {
    color: var(--text-primary) !important;
    font-weight: 600;
}
.ac-platform-home > li > a .fa-home {
    margin-right: 2px;
    color: var(--text-secondary);
}
.ac-platform-home > li > a:hover .fa-home {
    color: var(--action-hover);
}
body.pkp_page_issue:not(.pkp_op_archive) .ac-menu-primary > li > a[href*="current"]::after,
body.pkp_op_current:not(.pkp_op_archive) .ac-menu-primary > li > a[href*="current"]::after,
body.pkp_page_issue.pkp_op_archive .ac-menu-primary > li > a[href*="archive"]::after,
body.pkp_page_about .ac-menu-primary > li > a[href*="about"]::after,
body.pkp_page_search .ac-menu-primary > li > a[href*="search"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: var(--action-color);
    border-radius: var(--radius-xs);
}
.ac-menu-primary > li > a {
    position: relative;
}


/* =========================================
   35. Responsive — Non-homepage pages
========================================= */
/* Drawer nav up to 1024px: between 769–1024px the full EN nav (~890px)
   does not fit the container and would overflow horizontally */
@media (max-width: 1024px) {
    /* Mobile hamburger menu */
    .ac-mobile-toggle {
        display: flex;
    }
    .ac-nav-primary {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        background: var(--bg-white);
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        flex-direction: column;
        padding: 80px var(--space-md) var(--space-md);
        z-index: 1000;
        overflow-y: auto;
    }
    .ac-nav-primary.is-open {
        display: flex;
    }
    .ac-nav-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }
    .ac-nav-backdrop.is-open {
        display: block;
    }
    .ac-menu-primary {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .ac-menu-primary > li > a {
        display: block !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--border-light);
        font-size: var(--text-base) !important;
    }
    .ac-menu-user {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px !important;
    }
    .ac-menu-primary > li > ul,
    .ac-menu-primary > li > .submenu {
        position: static !important;
        box-shadow: none !important;
        min-width: auto !important;
        padding-left: var(--space-sm) !important;
        display: block !important;
    }
    .ac-nav-divider {
        display: none;
    }
    .ac-nav-actions {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        margin-top: var(--space-sm);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--border-light);
    }
    .ac-nav-action-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: var(--text-md);
    }
    .ac-brand-name {
        display: none;
    }
    .ac-search-btn {
        display: block;
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--border-light);
    }
    .ac-lang-switcher {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: var(--space-sm);
    }
    .ac-lang-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
    .ac-lang-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        min-width: auto;
        padding: 0 var(--space-sm);
    }
    .ac-user-menu {
        margin-top: var(--space-sm);
        padding-top: var(--space-sm);
        border-top: 2px solid var(--border-light);
        justify-content: center;
    }
    .ac-nav-auth {
        width: 100%;
    }
    .ac-dropdown-panel {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        pointer-events: auto !important;
        padding: 4px 0 !important;
        margin-top: 8px;
    }
    .ac-avatar-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* Non-homepage pages */
    body:not(.pkp_page_index) .page {
        padding: var(--space-md) var(--space-sm);
    }
    body:not(.pkp_page_index) .page > h1 {
        font-size: var(--title-xl) !important;
    }
    .page_issue_archive .issues_archive {
        grid-template-columns: 1fr !important;
    }
    .page_search .search-date-range {
        flex-direction: column;
        gap: 8px;
    }
    .page_search .search-date-separator {
        display: none;
    }
    .page_search .search-bar-btn {
        padding: 14px 16px !important;
        font-size: var(--text-md) !important;
    }
    .page_search .search-hero > h1 {
        font-size: var(--title-lg) !important;
    }
    .page_search .search-hero {
        padding: var(--space-sm) 0 var(--space-xs);
    }
    .page_about .contact {
        padding: var(--space-sm);
    }
    .page_masthead .user_listing {
        grid-template-columns: 1fr;
    }

    /* Login/Register mobile */
    body.pkp_page_login .page_login {
        margin: 0 var(--space-sm);
        padding: var(--space-md) var(--space-sm) !important;
    }
    body.pkp_page_user.pkp_op_register .page_register .cmp_form {
        padding: var(--space-md) var(--space-sm) !important;
    }
}

@media (max-width: 600px) {
    body:not(.pkp_page_index) .pkp_structure_content {
        padding: var(--space-md) var(--space-sm) 0 !important;
    }
    body .cmp_form .buttons {
        flex-direction: column;
        align-items: stretch;
    }
    body button.submit,
    body .cmp_form button.submit {
        width: 100%;
    }
}


/* =========================================
   24. Galley Links
========================================= */
body .obj_galley_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: all var(--transition-fast);
    background: var(--bg-white);
}
body .obj_galley_link:hover {
    border-color: var(--action-color);
    color: var(--action-color) !important;
    box-shadow: var(--shadow-sm);
}
body .obj_galley_link.pdf {
    background: var(--action-color) !important;
    color: var(--bg-white) !important;
    border-color: var(--action-color) !important;
}
body .obj_galley_link.pdf:hover {
    background: var(--action-hover) !important;
}