/* =============================================================================
   OJS public journal UI — y2026_tcgc
   Loaded via OjsAsset on OJS views only.

   Order:
     1. Page chrome
     2. Journal shell (page head + left sidebar + main column)
     3. Component remap (ojs-cnnt-* mapped onto theme tokens)
     4. Utility shim (Tailwind classes used in views that Bootstrap 5 lacks)
     5. Responsive
   ========================================================================== */

/* =============================================================================
   1. Page chrome
   ========================================================================== */

body.ojs-public-page .breaking-strip {
    display: none !important;
}

body.ojs-public-page main.content {
    padding-top: 0 !important;
}

/* =============================================================================
   2. Journal shell
   ========================================================================== */

/* The journal nav renders as a left sidebar. Pages without it keep their own
   container, so the grid only applies when the sidebar is actually present. */
#main-content:has(> .ojs-journal-sidebar) {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    column-gap: 30px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 25px 15px 40px;
}

#main-content:has(> .ojs-journal-sidebar) > .ojs-page-head {
    grid-column: 1 / -1;
}

#main-content:has(> .ojs-journal-sidebar) > .ojs-journal-sidebar {
    grid-column: 1;
}

#main-content:has(> .ojs-journal-sidebar) > *:not(.ojs-page-head):not(.ojs-journal-sidebar) {
    grid-column: 2;
    min-width: 0;
}

/* Inner containers are redundant once the grid owns the page width. */
#main-content:has(> .ojs-journal-sidebar) > .container,
#main-content:has(> .ojs-journal-sidebar) .ojs-cnnt-wrap {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

#main-content:has(> .ojs-journal-sidebar) > .container {
    margin-top: 0;
}

/* Page head */

.ojs-page-head {
    margin-bottom: 20px;
}

.ojs-page-head__inner {
    position: relative;
    padding-left: 10px;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 15px;
}

.ojs-page-head__inner:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 2px;
    height: 20px;
    background: #ed1c24;
}

.ojs-page-head__eyebrow {
    display: block;
    font-size: 13px;
    font-family: var(--font-1);
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-highlight);
}

.ojs-page-head__title {
    margin: 6px 0 0;
    font-size: 28px;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1.3;
    color: var(--color-main);
}

.ojs-page-head__desc {
    margin: 10px 0 0;
    max-width: 900px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray);
}

.ojs-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

/* Left sidebar */

.ojs-journal-sidebar {
    align-self: start;
    border: 1px solid #e8e8e8;
    background: #fff;
}

.ojs-journal-sidebar__brand {
    display: block;
    padding: 15px;
    border-bottom: 1px solid #e8e8e8;
    text-align: center;
}

.ojs-journal-sidebar__brand img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 70px;
    margin: 0 auto 10px;
    object-fit: contain;
}

.ojs-journal-sidebar__brand-text strong {
    display: block;
    font-size: 15px;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-main);
}

.ojs-journal-sidebar__brand-text span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--gray);
}

.ojs-journal-sidebar__nav {
    display: flex;
    flex-direction: column;
}

.ojs-journal-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    font-family: var(--font-1);
    font-weight: bold;
    color: var(--color-main);
}

.ojs-journal-sidebar__link i {
    width: 16px;
    font-size: 14px;
    text-align: center;
    color: var(--gray);
}

.ojs-journal-sidebar__link:hover {
    background: #f7f7f7;
    color: var(--color-highlight);
}

.ojs-journal-sidebar__link:hover i {
    color: var(--color-highlight);
}

.ojs-journal-sidebar__link.is-active {
    background: #f7f7f7;
    color: var(--color-highlight);
    box-shadow: inset 3px 0 0 #ed1c24;
}

.ojs-journal-sidebar__link.is-active i {
    color: var(--color-highlight);
}

.ojs-journal-sidebar__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
}

.ojs-journal-sidebar__actions .ojs-theme-btn {
    justify-content: center;
}

/* =============================================================================
   3. Component remap — ojs-cnnt-* onto theme tokens
   ========================================================================== */

.ojs-cnnt-shell {
    background: none;
}

.ojs-cnnt-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.ojs-cnnt-main {
    padding-top: 0;
    padding-bottom: 20px;
}

.ojs-cnnt-page-head {
    margin: 0;
}

/* Legacy hero — flattened to the theme page-head look */

.ojs-cnnt-hero {
    position: relative;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #e8e8e8;
    background: none;
    color: var(--color-main);
}

/* Panels that intentionally sit on a dark background keep white text, but on
   the theme navy instead of the imported gradient. */
.hero-gradient,
.bg-\[linear-gradient\(145deg\2c \#16345a_0\%\2c \#204c80_45\%\2c \#d1a118_100\%\)\] {
    position: relative;
    overflow: hidden;
    border: 0;
    background: var(--color-main);
    color: #fff;
}

.hero-gradient h1,
.hero-gradient h2,
.hero-gradient h3,
.hero-gradient p,
.hero-gradient a,
.hero-gradient span {
    color: inherit;
}

.ojs-cnnt-hero::before {
    content: none;
}

.ojs-cnnt-hero__inner {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ojs-cnnt-hero__page {
    max-width: 900px;
}

.ojs-cnnt-hero__eyebrow,
.ojs-cnnt-hero__journal-label {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-family: var(--font-1);
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-highlight);
}

.ojs-cnnt-hero__eyebrow::before {
    content: none;
}

.ojs-cnnt-hero__title {
    margin-top: 6px;
    font-size: 28px;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--color-main);
}

.ojs-cnnt-hero__desc {
    margin-top: 10px;
    max-width: 900px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray);
}

.ojs-cnnt-hero .ojs-cnnt-chip,
.ojs-cnnt-hero .ojs-cnnt-chip.ojs-cnnt-chip--gold {
    border-color: #e8e8e8;
    background: #fff;
    color: var(--color-main);
}

.ojs-cnnt-hero .ojs-cnnt-btn--secondary {
    border-color: #d8d8d8;
    background: #fff;
    color: var(--color-main);
}

.ojs-cnnt-hero .ojs-cnnt-btn--secondary:hover {
    border-color: var(--color-highlight);
    background: #fff;
    color: var(--color-highlight);
}

/* Legacy top nav — superseded by the sidebar, kept harmless */

.ojs-cnnt-nav__frame {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
}

.ojs-cnnt-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ojs-cnnt-nav__brand img {
    width: auto;
    height: 52px;
    max-width: 100%;
    object-fit: contain;
}

.ojs-cnnt-nav__brand-text strong {
    display: block;
    font-size: 15px;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-main);
}

.ojs-cnnt-nav__brand-text span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--gray);
}

.ojs-cnnt-nav__menu {
    display: flex;
    flex: 1 1 420px;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ojs-cnnt-nav__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ojs-cnnt-nav__link,
.ojs-cnnt-nav__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 0;
    font-size: 14px;
    font-family: var(--font-1);
    font-weight: bold;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-main);
}

.ojs-cnnt-nav__link:hover,
.ojs-cnnt-nav__link.is-active {
    background: #f7f7f7;
    color: var(--color-highlight);
}

.ojs-cnnt-nav__action--primary {
    border: 1px solid var(--color-highlight);
    background: var(--color-highlight);
    color: #fff;
    box-shadow: none;
}

.ojs-cnnt-nav__action--primary:hover {
    background: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
}

.ojs-cnnt-nav__action--secondary {
    border: 1px solid #d8d8d8;
    background: #fff;
    color: var(--color-main);
}

.ojs-cnnt-nav__action--secondary:hover {
    border-color: var(--color-highlight);
    color: var(--color-highlight);
}

/* Surfaces */

.ojs-cnnt-panel,
.ojs-cnnt-box,
.ojs-cnnt-stat,
.ojs-cnnt-grid-card,
.ojs-cnnt-link-card,
.ojs-cnnt-list-row__media {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.ojs-cnnt-panel {
    overflow: hidden;
}

.ojs-cnnt-panel--soft {
    background: #fafafa;
}

.ojs-cnnt-box,
.ojs-cnnt-grid-card {
    padding: 15px;
}

.ojs-cnnt-stat {
    padding: 12px 15px;
}

.ojs-cnnt-stat strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    font-family: var(--font-1);
    font-weight: bold;
    color: var(--color-main);
}

.ojs-cnnt-empty {
    padding: 24px;
    border: 1px dashed #e0e0e0;
    border-radius: 0;
    background: #fafafa;
    text-align: center;
    font-size: 15px;
    color: var(--gray);
}

/* Typography */

.ojs-cnnt-section-title {
    font-size: 20px;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1.35;
    color: var(--color-main);
}

.ojs-cnnt-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: var(--font-1);
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-highlight);
}

.ojs-cnnt-label::before {
    content: "";
    width: 18px;
    height: 2px;
    background: #ed1c24;
}

.ojs-cnnt-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
}

.ojs-cnnt-meta {
    font-size: 13px;
    color: var(--gray);
}

.ojs-cnnt-richtext,
.ojs-cnnt-richtext p,
.ojs-cnnt-richtext li {
    font-size: 16px;
    font-family: var(--font-4);
    line-height: 1.7;
    color: var(--color-text);
}

.ojs-cnnt-richtext h1,
.ojs-cnnt-richtext h2,
.ojs-cnnt-richtext h3,
.ojs-cnnt-richtext h4 {
    font-family: var(--font-1);
    font-weight: bold;
    color: var(--color-main);
}

.ojs-cnnt-citation-list li + li {
    margin-top: 12px;
}

/* Chips */

.ojs-cnnt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fff;
    font-size: 13px;
    font-family: var(--font-1);
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-main);
}

.ojs-cnnt-chip--gold,
.ojs-cnnt-chip--red {
    border-color: var(--color-highlight);
    background: #fff;
    color: var(--color-highlight);
}

/* Buttons — same shape as .ojs-theme-btn in theme.css */

.ojs-cnnt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 0;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 14px;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
}

.ojs-cnnt-btn--primary {
    border-color: var(--color-highlight);
    background: var(--color-highlight);
    color: #fff;
    box-shadow: none;
}

.ojs-cnnt-btn--primary:hover {
    border-color: var(--color-main);
    background: var(--color-main);
    color: #fff;
    transform: none;
}

.ojs-cnnt-btn--secondary {
    border-color: #d8d8d8;
    background: #fff;
    color: var(--color-main);
}

.ojs-cnnt-btn--secondary:hover {
    border-color: var(--color-highlight);
    background: #fff;
    color: var(--color-highlight);
}

/* Forms */

.ojs-cnnt-form .form-group {
    margin-bottom: 0;
}

.ojs-cnnt-form .form-group + .form-group {
    margin-top: 18px;
}

.ojs-cnnt-form label,
.ojs-cnnt-form .control-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-family: var(--font-1);
    font-weight: bold;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-main);
}

.ojs-cnnt-form .form-control,
.ojs-cnnt-form select,
.ojs-cnnt-form textarea,
.ojs-cnnt-form input[type="file"],
.ojs-cnnt-form-control,
select.ojs-cnnt-form-control,
.ojs-cnnt-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    background: #fff;
    font-size: 15px;
    color: var(--color-text);
    box-shadow: none;
}

.ojs-cnnt-search-input {
    min-height: 44px;
}

.ojs-cnnt-form .form-control:focus,
.ojs-cnnt-form select:focus,
.ojs-cnnt-form textarea:focus,
.ojs-cnnt-form-control:focus,
select.ojs-cnnt-form-control:focus,
.ojs-cnnt-search-input:focus {
    border-color: var(--color-highlight);
    box-shadow: none;
    outline: none;
}

.ojs-cnnt-form .help-block {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--red);
}

.ojs-cnnt-form .hint-block {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray);
}

.ojs-cnnt-form .submission-abstract-editor .tox-tinymce {
    border-radius: 0 !important;
    border-color: #e0e0e0 !important;
    overflow: hidden;
}

.ojs-cnnt-form .submission-abstract-editor .tox .tox-edit-area__iframe,
.ojs-cnnt-form .submission-abstract-editor .tox .tox-edit-area__iframe body {
    background: #fff;
}

/* Lists and rows */

.ojs-cnnt-page-grid,
.ojs-cnnt-two-col,
.ojs-cnnt-list,
.ojs-cnnt-side-list {
    display: grid;
    gap: 20px;
}

.ojs-cnnt-list-row {
    display: grid;
    gap: 15px;
}

.ojs-cnnt-list-row__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ojs-cnnt-list-row__title {
    margin: 0;
    font-size: 18px;
    font-family: var(--font-1);
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-main);
}

.ojs-cnnt-list-row__title a {
    color: inherit;
}

.ojs-cnnt-list-row__title a:hover {
    color: var(--color-highlight);
}

.ojs-cnnt-list-row__meta {
    margin-top: 8px;
    font-size: 13px;
    color: var(--gray);
}

.ojs-cnnt-list-row__summary {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
}

.ojs-cnnt-link-list {
    display: grid;
    gap: 8px;
}

.ojs-cnnt-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 15px;
    font-size: 15px;
    font-family: var(--font-1);
    font-weight: bold;
    color: var(--color-main);
}

.ojs-cnnt-link-card:hover {
    border-color: var(--color-highlight);
    color: var(--color-highlight);
}

.ojs-cnnt-grid-cards {
    display: grid;
    gap: 15px;
}

.ojs-cnnt-search-form {
    display: grid;
    gap: 10px;
}

/* Issue summary (legacy grid variant) */

.ojs-cnnt-issue-summary__grid {
    display: grid;
    min-height: 0;
}

.ojs-cnnt-issue-summary__cover {
    min-height: 220px;
}

.ojs-cnnt-issue-summary__cover img {
    width: 100%;
    max-width: 100%;
}

/* Pager */

.ojs-cnnt-pager .pagination,
.pagination-wrap .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding-left: 0;
    list-style: none;
}

.ojs-cnnt-pager .pagination > li > a,
.ojs-cnnt-pager .pagination > li > span,
.pagination-wrap .pagination > li > a,
.pagination-wrap .pagination > li > span {
    display: inline-flex;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fff;
    font-size: 14px;
    font-family: var(--font-1);
    font-weight: bold;
    color: var(--color-main);
}

.ojs-cnnt-pager .pagination > .active > a,
.ojs-cnnt-pager .pagination > .active > span,
.pagination-wrap .pagination > .active > a,
.pagination-wrap .pagination > .active > span {
    border-color: var(--color-highlight);
    background: var(--color-highlight);
    color: #fff;
}

/* Blocks whose markup carries no utility classes */

.stat-badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #e8e8e8;
    background: #fafafa;
    font-size: 13px;
    font-family: var(--font-1);
    font-weight: bold;
    color: var(--color-main);
}

.partner-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid #e8e8e8;
    background: #fff;
}

.partner-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.citation-raw-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    overflow-wrap: break-word;
}

/* Citation modal */

#citation-modal.flex {
    display: flex;
}

/* CMS policy pages opened from OJS */

.cnnt-page-content img {
    max-width: 100%;
    height: auto;
}

.cnnt-page-content table {
    width: 100%;
    border-collapse: collapse;
}

.cnnt-page-view .panel {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

/* =============================================================================
   4. Utility shim
   Only classes used by OJS views that Bootstrap 5 does not already provide.
   Bootstrap owns m/p 0-5, gap-0-5, d-*, flex-column, align-items-*,
   justify-content-*, text-center, bg-white, text-white, border, rounded.
   ========================================================================== */

/* Display and position */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-2 { top: 8px; }
.top-3 { top: 12px; }
.right-0 { right: 0; }
.right-2 { right: 8px; }
.right-3 { right: 12px; }
.left-0 { left: 0; }
.bottom-0 { bottom: 0; }
.z-10 { z-index: 10; }
.z-\[100\] { z-index: 100; }
.z-\[120\] { z-index: 120; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* Flex and grid */

.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-6 { gap: 24px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-5 > * + * { margin-top: 20px; }
.space-y-6 > * + * { margin-top: 24px; }
.space-y-8 > * + * { margin-top: 32px; }

.divide-y > * + * { border-top: 1px solid #e8e8e8; }
.divide-cnnt-line > * + * { border-color: #e8e8e8; }

/* Sizing */

.w-full { width: 100%; }
.w-9 { width: 36px; }
.w-96 { width: 384px; }
.h-9 { height: 36px; }
.h-96 { height: 384px; }
.h-full { height: 100%; }
.max-w-lg { max-width: 512px; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-7xl { max-width: 1320px; }
.max-h-48 { max-height: 192px; }
.max-h-\[85vh\] { max-height: 85vh; }
.min-h-\[100px\] { min-height: 100px; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.object-cover { object-fit: cover; }

/* Spacing beyond the Bootstrap 0-5 scale */

.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.pb-6 { padding-bottom: 24px; }
.pl-5 { padding-left: 20px; }
.pr-12 { padding-right: 48px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.-mt-2 { margin-top: -8px; }

/* Typography */

.font-title { font-family: var(--font-1); }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold,
.font-extrabold,
.font-black { font-weight: bold; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.text-left { text-align: left; }
.text-justify { text-align: justify; }
.whitespace-pre-line { white-space: pre-line; }
.break-words { overflow-wrap: break-word; }
.list-none { list-style: none; }
.list-decimal { list-style: decimal; }

.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base,
.text-md { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 22px; }
.text-3xl { font-size: 26px; }
.text-4xl { font-size: 30px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[15px\] { font-size: 15px; }
.text-\[1\.35rem\] { font-size: 19px; }
.text-\[1\.45rem\] { font-size: 20px; }
.text-\[1\.55rem\] { font-size: 21px; }
.text-\[1\.7rem\] { font-size: 23px; }
.text-\[1\.8rem\] { font-size: 24px; }

.leading-tight { line-height: 1.3; }
.leading-relaxed { line-height: 1.7; }
.leading-7 { line-height: 1.75; }
.tracking-tight { letter-spacing: -0.01em; }
.tracking-wider { letter-spacing: 0.04em; }
.tracking-\[0\.12em\],
.tracking-\[0\.14em\],
.tracking-\[0\.16em\],
.tracking-\[0\.18em\],
.tracking-\[0\.25em\] { letter-spacing: 0.04em; }

.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Colors */

.text-cnnt-navy { color: var(--color-main); }
.text-cnnt-red { color: var(--color-highlight); }
.text-cnnt-body { color: var(--color-text); }
.text-cnnt-muted { color: var(--gray); }
.text-slate-900,
.text-slate-800,
.text-slate-700 { color: var(--color-text); }
.text-slate-600,
.text-slate-500,
.text-slate-400 { color: var(--gray); }
/* Used only inside the dark navy panels above. */
.text-red-50,
.text-red-100,
.text-red-100\/90,
.text-red-200\/70 { color: rgba(255, 255, 255, 0.85); }

.bg-cnnt-red { background-color: var(--color-highlight); }
.bg-slate-50,
.bg-\[\#fffdf7\],
.bg-\[\#fff4df\],
.bg-white\/60 { background-color: #fafafa; }
.bg-white\/15,
.bg-white\/10,
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.12); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-slate-900\/30 { background-color: rgba(0, 0, 0, 0.3); }

.border-cnnt-line,
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border-\[\#f1d9a5\] { border-color: #e8e8e8; }
.border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }
.border-t { border-top: 1px solid #e8e8e8; }
.border-b { border-bottom: 1px solid #e8e8e8; }
.border-b-2 { border-bottom: 2px solid #e8e8e8; }

/* Radius, shadow, effects — flattened to match the theme */

.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-\[18px\],
.rounded-\[20px\],
.rounded-\[22px\],
.rounded-\[1\.15rem\],
.rounded-\[1\.75rem\] { border-radius: 0; }
.rounded-full { border-radius: 999px; }

.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-\[0_24px_70px_rgba\(8\2c 31\2c 58\2c 0\.18\)\] { box-shadow: none; }

/* Decorative blurred blobs from the imported design — no equivalent here. */
.blur-3xl { display: none; }
.backdrop-blur-sm,
.backdrop-blur-md { backdrop-filter: none; }
.opacity-20 { opacity: 0.2; }
.translate-x-1\/3,
.-translate-x-1\/3,
.translate-y-1\/2,
.-translate-y-1\/2 { transform: none; }

.transition,
.transition-all,
.transition-colors,
.transition-opacity { transition: all 0.2s ease; }
.cursor-pointer { cursor: pointer; }
.outline-none { outline: none; }

/* Interaction variants */

.hover\:text-cnnt-red:hover,
.group:hover .group-hover\:text-cnnt-red { color: var(--color-highlight); }
.hover\:text-white:hover { color: #fff; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-white:hover { background-color: #fff; }
.hover\:bg-white\/25:hover { background-color: rgba(255, 255, 255, 0.25); }
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-red-50:hover,
.hover\:bg-\[\#f7f9fb\]:hover { background-color: #f7f7f7; }
.hover\:border-cnnt-gold:hover,
.hover\:border-cnnt-line:hover { border-color: var(--color-highlight); }
.hover\:shadow-md:hover { box-shadow: none; }
.hover\:scale-\[1\.02\]:hover { transform: none; }
.focus\:border-cnnt-gold:focus { border-color: var(--color-highlight); }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-4:focus,
.focus\:ring-cnnt-gold\/20:focus { box-shadow: none; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group-open\:rotate-180 { transition: transform 0.2s ease; }
details[open] .group-open\:rotate-180 { transform: rotate(180deg); }
.last\:border-0:last-child { border: 0; }
.last\:pb-0:last-child { padding-bottom: 0; }
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; }
.animate-fade-in { animation: ojs-fade-in 0.2s ease both; }

@keyframes ojs-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =============================================================================
   5. Responsive
   ========================================================================== */

@media (min-width: 576px) {
    .sm\:flex { display: flex; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-start { align-items: flex-start; }
    .sm\:items-end { align-items: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:gap-4 { gap: 16px; }
    .sm\:p-6 { padding: 24px; }
    .sm\:px-6 { padding-left: 24px; padding-right: 24px; }
    .sm\:text-right { text-align: right; }
    .sm\:max-w-\[65\%\] { max-width: 65%; }
}

@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:p-6 { padding: 24px; }
    .md\:p-7 { padding: 28px; }
    .md\:p-8 { padding: 32px; }
    .md\:p-10 { padding: 40px; }
    .md\:py-16 { padding-top: 64px; padding-bottom: 64px; }
    .md\:py-24 { padding-top: 96px; padding-bottom: 96px; }
    .md\:text-xl { font-size: 20px; }
    .md\:text-5xl { font-size: 34px; }
    .md\:text-6xl { font-size: 40px; }

    .ojs-cnnt-list-row {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }

    .ojs-cnnt-search-form {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .ojs-cnnt-grid-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ojs-cnnt-issue-summary__grid {
        min-height: 280px;
        grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
    }

    .ojs-cnnt-issue-summary__cover {
        border-right: 1px solid #e8e8e8;
        min-height: 100%;
    }

    .ojs-cnnt-issue-summary__body {
        min-height: 100%;
    }
}

@media (min-width: 992px) {
    .lg\:px-8 { padding-left: 32px; padding-right: 32px; }
    .lg\:w-3\/4 { width: 75%; }
}

@media (min-width: 1200px) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] { grid-template-columns: minmax(0, 1fr) 320px; }
    .xl\:sticky { position: sticky; }
    .xl\:top-6 { top: 24px; }

    .ojs-cnnt-page-grid,
    .ojs-cnnt-two-col {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

/* Sidebar collapses above the content on tablet and below. */
@media (max-width: 991.98px) {
    #main-content:has(> .ojs-journal-sidebar) {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    #main-content:has(> .ojs-journal-sidebar) > .ojs-page-head {
        grid-column: 1;
        order: 1;
    }

    #main-content:has(> .ojs-journal-sidebar) > .ojs-journal-sidebar {
        order: 3;
        margin-top: 25px;
    }

    #main-content:has(> .ojs-journal-sidebar) > *:not(.ojs-page-head):not(.ojs-journal-sidebar) {
        grid-column: 1;
        order: 2;
    }

    .ojs-journal-sidebar__nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ojs-journal-sidebar__link {
        flex: 1 1 auto;
        border-bottom: 0;
        border-right: 1px solid #f0f0f0;
    }

    .ojs-journal-sidebar__link.is-active {
        box-shadow: inset 0 -3px 0 #ed1c24;
    }

    .ojs-journal-sidebar__actions {
        flex-direction: row;
        flex-wrap: wrap;
        border-top: 1px solid #f0f0f0;
    }

    .ojs-cnnt-nav__frame,
    .ojs-cnnt-nav__actions {
        justify-content: flex-start;
    }

    .ojs-cnnt-nav__brand {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .ojs-page-head__title,
    .ojs-cnnt-hero__title {
        font-size: 22px;
    }
}