/*
 * filolnauki-theme-phase2.css
 * Филологические науки — OJS Immersion theme enhancement, Phase 2
 * Load AFTER filolnauki-theme.css (base vars, fonts, typography already defined there)
 * Drop into /var/www/html/public/ and reference from journal CSS settings
 */

/* ============================================================
   1. HEADER / WORDMARK
   ============================================================ */

.main-header__title {
  padding: 16px 0 14px;
  line-height: 1.15;
}

.main-header__title a,
.main-header__title a:hover,
.main-header__title a:visited {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Main journal name.
   Override Immersion's `.main-header__title span { background:#fff; padding:.5rem }`
   which made our white text invisible on a white box. */
.main-header__title a span {
  display: block;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  line-height: 1.2;
  background: transparent !important;
  padding: 0 !important;
}

/* Subtitle pseudo-element below the journal name */
.main-header__title a::after {
  content: 'Научный рецензируемый журнал';
  display: block;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
}

/* ============================================================
   2. ARCHIVE GRID — override Bootstrap col-md-3 / col-lg-2
   ============================================================ */

/* 3 columns on desktop */
.archived-issue.col-md-3,
.archived-issue.col-lg-2,
.archived-issue[class*="col-"] {
  width: 33.3333% !important;
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
}

/* 2 columns on tablet */
@media (max-width: 991px) {
  .archived-issue.col-md-3,
  .archived-issue.col-lg-2,
  .archived-issue[class*="col-"] {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* 1 column on mobile */
@media (max-width: 575px) {
  .archived-issue.col-md-3,
  .archived-issue.col-lg-2,
  .archived-issue[class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Card base */
.archived-issue {
  padding: 10px !important;
}

.archived-issue > * {
  /* inner content wrapper — use the link or article as card face */
}

/* Style the issue summary block as a card */
.archived-issue .issue-summary,
.archived-issue > article,
.archived-issue > div:not(.cover-placeholder) {
  background: #ffffff;
  border: 1px solid #e2e6ea;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.archived-issue:hover .issue-summary,
.archived-issue:hover > article,
.archived-issue:hover > div:not(.cover-placeholder) {
  box-shadow: 0 4px 16px rgba(26, 58, 92, 0.13);
  transform: translateY(-2px);
}

/* Cover image — fill top of card, 3:4 aspect ratio */
.archived-issue .img-wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #e2e6ea;
  flex-shrink: 0;
}

.archived-issue .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text area below cover */
.archived-issue .archived-issue__title {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a3a5c;
  line-height: 1.35;
  margin: 10px 12px 4px;
}

.archived-issue .series {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  color: #6b7280;
  margin: 0 12px 4px;
}

.archived-issue .archived-issue__date {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  color: #9ca3af;
  margin: 0 12px 8px;
}

/* "Читать →" pseudo-button at bottom of each card */
.archived-issue a.issue-summary__link::after,
.archived-issue a.img-wrapper ~ a::after {
  content: 'Читать →';
  display: block;
  margin: auto 12px 12px;
  padding: 5px 10px;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1a3a5c;
  border: 1px solid #1a3a5c;
  border-radius: 3px;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

/* Hover state for the pseudo-button */
.archived-issue:hover a.issue-summary__link::after,
.archived-issue:hover a.img-wrapper ~ a::after {
  background: #1a3a5c;
  color: #ffffff;
}

/* Unclassified issue — muted styling */
.archived-issue--unclassified .archived-issue__title {
  color: #6b7280;
  font-style: italic;
}

.archived-issue--unclassified > article,
.archived-issue--unclassified > div:not(.cover-placeholder),
.archived-issue--unclassified .issue-summary {
  border-color: #d1d5db;
  background: #f9fafb;
}

/* ============================================================
   3. COVER PLACEHOLDER (for issues without cover image)
   ============================================================ */

.cover-placeholder {
  width: 100%;
  min-height: 160px;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #1a3a5c 0%, #2a5080 60%, #1e4570 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* decorative top stripe */
.cover-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #c47c2b;
}

.cover-placeholder__inner {
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cover-placeholder__title {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.cover-placeholder__volume {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  line-height: 1.4;
}

/* ============================================================
   4. HOMEPAGE HERO — current issue panel
   ============================================================ */

.issue__header {
  border-left: 4px solid #c47c2b;
  padding: 20px 24px;
  background: #f8f9fa;
  margin-bottom: 28px;
  border-radius: 0 4px 4px 0;
}

/* "Текущий выпуск" badge */
.issue__meta:first-child,
.issue__meta .label {
  display: inline-block;
  background: #1a3a5c;
  color: #ffffff;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.issue__title {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a3a5c;
  line-height: 1.3;
  margin: 8px 0 12px;
}

.issue__volume,
.issue__number {
  color: #1a3a5c;
}

.issue__localized_name {
  display: block;
  font-size: 17px;
  color: #6b7280;
  font-style: italic;
  margin-top: 4px;
}

/* Section headers within homepage TOC */
.issue-section__header {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 16px;
  color: #1a3a5c;
  border-bottom: 2px solid #e2e6ea;
  padding-bottom: 6px;
  margin: 24px 0 12px;
}

/* Article list on homepage */
.issue-section__toc {
  list-style: none;
  padding: 0;
  margin: 0;
}

.issue-section__toc-item {
  border-bottom: 1px solid #f0f2f4;
  padding: 10px 0;
}

.issue-section__toc-item:last-child {
  border-bottom: none;
}

.article__title a {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 15px;
  color: #1a3a5c;
  text-decoration: none;
}

.article__title a:hover {
  color: #8b4513;
  text-decoration: underline;
}

.article__meta {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  color: #6b7280;
  margin-top: 3px;
}

/* ============================================================
   5. ISSUE PAGE HEADER (page_issue)
   ============================================================ */

.page_issue .issue > .issue__header,
.page_issue .issue__header {
  background: linear-gradient(135deg, #1a3a5c 0%, #2a5080 100%);
  color: #ffffff;
  padding: 32px 28px 24px;
  border-radius: 4px;
  border-left: none;
  margin-bottom: 32px;
}

.page_issue .issue__title {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin: 10px 0 8px;
}

/* Override section 4 globals so volume/number stay readable on the navy hero. */
.page_issue .issue__title .issue__volume,
.page_issue .issue__title .issue__number,
.page_issue .issue__volume,
.page_issue .issue__number {
  color: #ffffff;
}

.page_issue .issue__localized_name {
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
}

.page_issue .issue__meta {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-family: 'PT Sans', Arial, sans-serif;
}

/* Issue cover image injected by JS */
.issue-cover-img {
  float: right;
  margin: 0 0 16px 24px;
  max-width: 160px;
}

.page_issue .issue-cover-img {
  float: right;
  margin: 0 0 16px 24px;
  max-width: 140px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
}

.issue-cover-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   6. ARTICLE PAGE IMPROVEMENTS
   ============================================================ */

.article-page__title span {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: #1a3a5c;
  line-height: 1.35;
}

/* Authors */
.authors-string {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 15px;
  color: #6b7280;
  margin: 8px 0 16px;
}

/* Meta dl — 2-column grid */
.article-page__meta dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 6px;
  font-size: 14px;
  margin: 16px 0;
}

.article-page__meta dt {
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: 700;
  color: #1f1f1f;
  grid-column: 1;
}

.article-page__meta dd {
  font-family: 'PT Sans', Arial, sans-serif;
  font-weight: 400;
  color: #374151;
  margin: 0;
  grid-column: 2;
}

/* Abstract section header */
h3.label {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #1a3a5c;
  border-bottom: 2px solid #e2e6ea;
  padding-bottom: 8px;
  margin: 28px 0 14px;
}

/* Keywords */
.keywords {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
  color: #6b7280;
  margin-top: 12px;
}

/* ============================================================
   7. TRUST ROW (injected by JS)
   ============================================================ */

.filol-trust-row {
  background: #f8f9fa;
  border-bottom: 1px solid #e2e6ea;
  padding: 6px 0;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  color: #6b7280;
}

.filol-trust-row .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.trust-item {
  display: inline-block;
  background: #ffffff;
  border: 1px solid #e2e6ea;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.trust-sep {
  color: #d1d5db;
  padding: 0 2px;
  user-select: none;
}

@media (max-width: 575px) {
  .filol-trust-row .container {
    font-size: 11px;
    gap: 3px;
  }
  .trust-item {
    font-size: 11px;
    padding: 2px 7px;
  }
}

/* ============================================================
   8. FOOTER ENHANCEMENT (injected by JS)
   ============================================================ */

.main-footer {
  background: #1a3a5c;
  color: #9ca3af;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
}

.filol-footer-enhanced {
  padding: 40px 0 24px;
}

.filol-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

@media (max-width: 991px) {
  .filol-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .filol-footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.filol-footer-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filol-footer-journal-name {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.filol-footer-issn,
.filol-footer-doi {
  font-size: 12px;
  color: #9ca3af;
}

.filol-footer-license a,
.filol-footer-license a:visited {
  font-size: 12px;
  color: #c47c2b;
  text-decoration: none;
}

.filol-footer-license a:hover {
  color: #e8a050;
  text-decoration: underline;
}

.filol-footer-heading {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.filol-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filol-footer-nav li a,
.filol-footer-nav li a:visited {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.15s;
}

.filol-footer-nav li a:hover {
  color: #ffffff;
}

.filol-footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.filol-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 3px 8px;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}

.filol-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filol-footer-sep {
  color: rgba(255, 255, 255, 0.2);
}

.filol-footer-bottom a,
.filol-footer-bottom a:visited {
  color: #9ca3af;
  text-decoration: none;
}

.filol-footer-bottom a:hover {
  color: #ffffff;
}

/* ============================================================
   9. PURCHASES / CABINET DASHBOARD
   ============================================================ */

.page_purchases h1,
.page_purchases h2 {
  font-family: 'PT Serif', Georgia, serif;
  color: #1a3a5c;
}

.cabinet-tabs .nav-tabs .nav-link {
  color: #6b7280;
  border-color: #e2e6ea;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
}

.cabinet-tabs .nav-tabs .nav-link.active {
  color: #1a3a5c;
  border-color: #e2e6ea #e2e6ea #ffffff;
  font-weight: 700;
}

.cabinet-tabs .nav-tabs .nav-link:hover {
  color: #1a3a5c;
}

.cabinet-tabs .table {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
}

.cabinet-tabs .table thead th {
  background: #f8f9fa;
  color: #1a3a5c;
  border-bottom: 2px solid #e2e6ea;
  font-weight: 700;
}

.cabinet-tabs .table td {
  vertical-align: middle;
  border-color: #f0f2f4;
}

.cabinet-tabs .table tbody tr:hover {
  background: #f8f9fa;
}

/* ============================================================
   10. STATIC PAGES
   ============================================================ */

.page .page__content,
.pkp_page_index .page__content {
  max-width: 780px;
  line-height: 1.75;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 16px;
  color: #1f1f1f;
}

.page .page__content h2,
.pkp_page_index .page__content h2 {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 22px;
  color: #1a3a5c;
  margin-top: 32px;
  margin-bottom: 12px;
}

.page .page__content h3,
.pkp_page_index .page__content h3 {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 18px;
  color: #1a3a5c;
  margin-top: 24px;
  margin-bottom: 8px;
}

/* Responsive tables in static pages */
.page .page__content table,
.pkp_page_index .page__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  overflow-x: auto;
  display: block;
}

.page .page__content table th,
.pkp_page_index .page__content table th {
  background: #f8f9fa;
  color: #1a3a5c;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid #e2e6ea;
  text-align: left;
}

.page .page__content table td,
.pkp_page_index .page__content table td {
  padding: 7px 12px;
  border: 1px solid #e2e6ea;
  vertical-align: top;
}

.page .page__content table tbody tr:nth-child(even) td,
.pkp_page_index .page__content table tbody tr:nth-child(even) td {
  background: #f8f9fa;
}

/* ============================================================
   11. GENERAL POLISH
   ============================================================ */

/* Breadcrumbs */
.pkp_site_nav_breadcrumbs {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  color: #9ca3af;
  padding: 8px 0;
}

.pkp_site_nav_breadcrumbs a {
  color: #6b7280;
  text-decoration: none;
}

.pkp_site_nav_breadcrumbs a:hover {
  color: #1a3a5c;
}

/* Pagination */
.pagination .page-item .page-link {
  color: #1a3a5c;
  border-color: #e2e6ea;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
}

.pagination .page-item.active .page-link {
  background-color: #1a3a5c;
  border-color: #1a3a5c;
  color: #ffffff;
}

.pagination .page-item .page-link:hover {
  background: #f0f4f8;
  color: #1a3a5c;
}

/* OP Archive page heading */
.op_archive h1,
.op_archive h2 {
  font-family: 'PT Serif', Georgia, serif;
  color: #1a3a5c;
}

/* User navigation links */
.pkp_navigation_user a {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
}

/* ============================================================
   12. MOBILE CLEANUP
   ============================================================ */

@media (max-width: 767px) {
  .main-header__title a span {
    font-size: 18px;
  }

  .main-header__title a::after {
    font-size: 10px;
  }

  .issue__header {
    padding: 14px 16px;
  }

  .issue__title {
    font-size: 18px;
  }

  .article-page__title span {
    font-size: 20px;
  }

  .article-page__meta dl {
    grid-template-columns: 1fr;
  }

  .article-page__meta dt,
  .article-page__meta dd {
    grid-column: 1;
  }

  .article-page__meta dd {
    margin-bottom: 8px;
  }

  .issue-cover-img {
    float: none;
    margin: 0 auto 16px;
    max-width: 120px;
  }

  .filol-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ============================================================
   13. HOMEPAGE MVP — hero, compact TOC, teaser blocks
   Scope: body.page_index.op_index (journal homepage only)
   ============================================================ */

/* The issue__header on homepage is replaced by .filol-hero (JS-injected).
   Hide the original to avoid duplication. */
body.page_index.op_index .issue > .container > .issue__header {
  display: none;
}

/* Prompt 58 D7 — kill the ~250 px black gap before the hero.
   Immersion paints `.issue { padding-top: 7.5vh; background: #000 }`
   and forces `.issue > .container { min-height: 20vh }`. On homepage
   the original `.issue__header` is hidden, so the container is empty
   and the only visible result is a long black void above the hero. */
body.page_index.op_index section.issue {
  padding-top: 16px;
  background: #ffffff;
  color: inherit;
}

body.page_index.op_index section.issue > .container {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Prompt 58 D8 — placeholder author meta on homepage looks like
   migration garbage ("- 1298 (Автор)"). Hide the meta row only on
   homepage; article and issue pages keep showing it. */
body.page_index.op_index .issue-section__toc-item article.article .article__meta {
  display: none;
}

/* Hero block (JS-injected immediately before .issue-section) */
body.page_index.op_index .filol-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
  background: linear-gradient(180deg, #f7f4ee 0%, #ffffff 100%);
  border-left: 4px solid #c47c2b;
  border-radius: 0 6px 6px 0;
  padding: 28px 32px;
  margin: 8px 0 36px;
}

body.page_index.op_index .filol-hero__cover {
  width: 100%;
  aspect-ratio: 3/4;
  background: #ffffff;
  border: 1px solid #e2e6ea;
  box-shadow: 0 6px 24px rgba(26, 58, 92, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page_index.op_index .filol-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page_index.op_index .filol-hero__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page_index.op_index .filol-hero__badge {
  display: inline-block;
  background: #1a3a5c;
  color: #ffffff;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  align-self: flex-start;
  margin-bottom: 4px;
}

body.page_index.op_index .filol-hero__title {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #1a3a5c;
  line-height: 1.25;
  margin: 0;
}

body.page_index.op_index .filol-hero__subtitle {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 18px;
  color: #6b7280;
  font-style: italic;
  margin: 0;
}

body.page_index.op_index .filol-hero__meta {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  color: #6b7280;
  margin: 4px 0 0;
}

body.page_index.op_index .filol-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c47c2b;
  color: #ffffff !important;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 12px 28px;
  border-radius: 3px;
  margin-top: 12px;
  align-self: flex-start;
  transition: background 0.18s ease;
}

body.page_index.op_index .filol-hero__cta:hover,
body.page_index.op_index .filol-hero__cta:focus {
  background: #8b4513;
  text-decoration: none !important;
  outline: none;
}

/* Compact TOC: hide everything inside an article except meta + title.
   The Immersion homepage outputs full abstract + references inside
   <article class="article">. We keep article__meta + article__title
   visible and collapse the rest. */
body.page_index.op_index .issue-section__toc-item article.article > .row > [class*="col-"] > *:not(.article__meta):not(.article__title) {
  display: none;
}

body.page_index.op_index .issue-section__toc-item article.article {
  padding: 12px 0;
}

body.page_index.op_index .issue-section__toc-item article.article .article__title {
  margin: 4px 0 0;
}

/* Limit the TOC to the first 8 items unless .issue-section__toc--expanded is set */
body.page_index.op_index .issue-section__toc:not(.issue-section__toc--expanded) > li.issue-section__toc-item:nth-child(n+9) {
  display: none;
}

/* "View all" CTA below the compact list */
body.page_index.op_index .filol-toc-more {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
}

body.page_index.op_index .filol-toc-more a {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1a3a5c;
  text-decoration: none;
  border: 1px solid #1a3a5c;
  border-radius: 3px;
  padding: 10px 22px;
  transition: background 0.18s ease, color 0.18s ease;
}

body.page_index.op_index .filol-toc-more a:hover,
body.page_index.op_index .filol-toc-more a:focus {
  background: #1a3a5c;
  color: #ffffff;
  outline: none;
}

/* "About / Announcements" teaser blocks below TOC */
body.page_index.op_index .filol-home-teasers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0 0;
}

body.page_index.op_index .filol-home-teaser {
  background: #ffffff;
  border: 1px solid #e2e6ea;
  border-radius: 4px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page_index.op_index .filol-home-teaser__heading {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a3a5c;
  margin: 0;
}

body.page_index.op_index .filol-home-teaser__body {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
  color: #4a5560;
  line-height: 1.55;
  margin: 0;
}

body.page_index.op_index .filol-home-teaser__link {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #c47c2b;
  text-decoration: none;
  margin-top: auto;
}

body.page_index.op_index .filol-home-teaser__link:hover {
  color: #8b4513;
  text-decoration: underline;
}

/* Mobile homepage tweaks */
@media (max-width: 767px) {
  body.page_index.op_index .filol-hero {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 16px;
  }

  body.page_index.op_index .filol-hero__cover {
    width: 160px;
    margin: 0 auto;
  }

  body.page_index.op_index .filol-hero__title {
    font-size: 22px;
  }

  body.page_index.op_index .filol-hero__subtitle {
    font-size: 15px;
  }

  body.page_index.op_index .filol-home-teasers {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ============================================================
   14. PRE-DEMO POLISH (Prompt 57)
   - Compact homepage header (Immersion's 7.5vh+15vh title margin too tall)
   - Article page contrast: keep Immersion's dark bg, force light text
   ============================================================ */

/* 14.1 Homepage header — compact margins.
   Immersion sets:
     .page_index:not(.indexSite) .main-header { padding-top: 2.5vh }
     .page_index:not(.indexSite) .main-header__title { margin: 7.5vh auto 15vh auto }
   At 900 px viewport that's 18 + 67 + 135 = ~220 px of empty header. */
body.page_index:not(.indexSite) .main-header {
  padding-top: 0 !important;
}

body.page_index:not(.indexSite) .main-header__title {
  margin: 8px auto 12px auto !important;
  max-width: none;
  width: auto;
  text-align: left;
  padding-left: 8px;
}

/* 14.2 Article page — Immersion paints .article-page bg #000 + color #fff,
   but our section-6 colors made title/h3.label/meta dt+dd dark on dark.
   Scope to body.page_article so listings on other pages aren't affected. */
body.page_article .article-page__title span {
  color: #ffffff;
}

body.page_article .authors-string,
body.page_article .authors-string__item,
body.page_article .authors-string__item span {
  color: rgba(255, 255, 255, 0.85);
}

body.page_article .article-page__meta dt {
  color: rgba(255, 255, 255, 0.78);
}

body.page_article .article-page__meta dd {
  color: rgba(255, 255, 255, 0.95);
}

body.page_article .article-page__meta dd a {
  color: #f4d49a;
}

body.page_article .article-page__meta dd a:hover,
body.page_article .article-page__meta dd a:focus {
  color: #ffffff;
}

body.page_article h3.label {
  color: #f4d49a;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

body.page_article .keywords {
  color: rgba(255, 255, 255, 0.85);
}

body.page_article .keywords strong,
body.page_article .keywords b {
  color: #ffffff;
}

/* Article body copy (abstract paragraphs, references) inside .article-page */
body.page_article .article-page p,
body.page_article .article-page li,
body.page_article .article-page .csl-entry {
  color: rgba(255, 255, 255, 0.95);
}

/* Galley link button stays readable */
body.page_article .list-galleys a,
body.page_article .article-page .btn {
  background-color: #c47c2b;
  border: 1px solid #c47c2b;
  color: #ffffff;
}

body.page_article .list-galleys a:hover,
body.page_article .article-page .btn:hover {
  background-color: #8b4513;
  border-color: #8b4513;
  color: #ffffff;
}

/* ============================================================
   15. GLOBAL HEADER REDESIGN (Prompt 59)
   Replace Immersion's black header with a light academic wordmark
   strip. Trust row already light-grey, kept as-is.
   ============================================================ */

/* 15.1 Header chrome — ivory bg, thin navy bottom rule */
header.main-header {
  background: #faf8f3 !important;
  background-color: #faf8f3 !important;
  background-image: none !important;
  color: #1a3a5c !important;
  border-bottom: 2px solid #1a3a5c;
  padding: 8px 0 0 !important;
  height: auto !important;
  min-height: 0;
}

header.main-header > .container-fluid {
  padding-top: 0;
  padding-bottom: 0;
}

/* 15.2 Top auth row (Регистрация / Вход) — quiet text links */
header.main-header .main-header__admin {
  padding: 4px 16px 0;
}

header.main-header .main-header__admin .main-header__admin-link {
  background: transparent !important;
  background-color: transparent !important;
  color: #4a5560 !important;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 4px 8px !important;
  margin-left: 6px;
  border-radius: 0;
  text-decoration: none;
}

header.main-header .main-header__admin .main-header__admin-link:hover,
header.main-header .main-header__admin .main-header__admin-link:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: #c47c2b !important;
  text-decoration: underline;
  outline: none;
}

/* 15.3 Wordmark — dark navy on ivory */
header.main-header .main-header__title {
  text-align: left;
  width: auto;
  max-width: none;
  margin: 4px 0 8px 16px !important;
  padding: 4px 0 !important;
}

header.main-header .main-header__title a,
header.main-header .main-header__title a:hover,
header.main-header .main-header__title a:visited,
header.main-header .main-header__title a:focus {
  color: #1a3a5c !important;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

header.main-header .main-header__title a span {
  color: #1a3a5c !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  font-family: 'PT Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

header.main-header .main-header__title a::after {
  content: 'Научный рецензируемый журнал';
  display: block;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: 2px;
}

/* 15.4 Primary nav — inline academic links, no white pills */
header.main-header .main-header__nav {
  background: transparent !important;
  padding: 0 8px;
}

header.main-header #navigationPrimary,
header.main-header .navbar-nav {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px 6px;
  padding: 4px 0 8px;
  margin: 0;
}

header.main-header .main-header__nav-link {
  background: transparent !important;
  background-color: transparent !important;
  color: #1a3a5c !important;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 10px !important;
  margin: 0 !important;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

header.main-header .main-header__nav-link:hover,
header.main-header .main-header__nav-link:focus {
  background: rgba(196, 124, 43, 0.10) !important;
  background-color: rgba(196, 124, 43, 0.10) !important;
  color: #8b4513 !important;
  text-decoration: none;
  outline: none;
}

/* Hamburger only relevant on small screens; keep light */
header.main-header .hamburger {
  background-color: transparent;
  color: #1a3a5c;
}

header.main-header .hamburger__icon,
header.main-header .hamburger__icon::before,
header.main-header .hamburger__icon::after {
  background-color: #1a3a5c;
}

/* 15.5 Override homepage-specific Prompt-57 rule that hid title margins.
   On the new ivory header we want consistent compact spacing on every
   page including homepage. */
body.page_index:not(.indexSite) .main-header {
  padding-top: 8px !important;
}

body.page_index:not(.indexSite) .main-header__title {
  margin: 4px 0 8px 16px !important;
  text-align: left;
  padding-left: 0;
}

/* 15.6 Trust row — sit flush under the new header */
.filol-trust-row {
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
}

/* 15.7 Mobile compaction — keep header readable, no overflow */
@media (max-width: 767px) {
  header.main-header {
    padding: 4px 0 0 !important;
  }
  header.main-header .main-header__title {
    margin: 4px 0 4px 12px !important;
    text-align: center;
  }
  header.main-header .main-header__title a {
    align-items: center;
  }
  header.main-header .main-header__title a span {
    font-size: 18px;
  }
  header.main-header .main-header__title a::after {
    font-size: 10px;
  }
  header.main-header .main-header__nav-link {
    font-size: 13px;
    padding: 5px 8px !important;
  }
  body.page_index:not(.indexSite) .main-header__title {
    margin: 4px 0 4px 12px !important;
    text-align: center;
  }
}

/* ============================================================
   16. STATIC PAGES TYPOGRAPHY NORMALIZATION (Prompt 60)
   Imported Drupal pages carry inline font-family (lucida, roboto,
   tahoma), red underlined `<span>` headings, dark-blue old links.
   We can't safely strip inline styles in HTML — instead we
   override them through scoped !important rules. Scope is the
   list of static-page body classes only; article/issue/homepage
   are NOT touched.
   ============================================================ */

/* Common font-family + color reset across all imported page bodies */
body.page_for-authors .page,
body.page_subscription .page,
body.page_about .page,
body.page_editorial-board .page,
body.page_editorial-council .page,
body.page_contact .page,
body.page_for-authors .page p,
body.page_subscription .page p,
body.page_about .page p,
body.page_editorial-board .page p,
body.page_editorial-council .page p,
body.page_contact .page p,
body.page_for-authors .page span,
body.page_subscription .page span,
body.page_about .page span,
body.page_editorial-board .page span,
body.page_editorial-council .page span,
body.page_contact .page span,
body.page_for-authors .page strong,
body.page_subscription .page strong,
body.page_about .page strong,
body.page_editorial-board .page strong,
body.page_editorial-council .page strong,
body.page_contact .page strong,
body.page_for-authors .page em,
body.page_subscription .page em,
body.page_about .page em,
body.page_editorial-board .page em,
body.page_editorial-council .page em,
body.page_contact .page em,
body.page_for-authors .page b,
body.page_subscription .page b,
body.page_about .page b,
body.page_editorial-board .page b,
body.page_editorial-council .page b,
body.page_contact .page b,
body.page_for-authors .page i,
body.page_subscription .page i,
body.page_about .page i,
body.page_editorial-board .page i,
body.page_editorial-council .page i,
body.page_contact .page i,
body.page_for-authors .page li,
body.page_subscription .page li,
body.page_about .page li,
body.page_editorial-board .page li,
body.page_editorial-council .page li,
body.page_contact .page li,
body.page_for-authors .page td,
body.page_subscription .page td,
body.page_about .page td,
body.page_editorial-board .page td,
body.page_editorial-council .page td,
body.page_contact .page td,
body.page_for-authors .page th,
body.page_subscription .page th,
body.page_about .page th,
body.page_editorial-board .page th,
body.page_editorial-council .page th,
body.page_contact .page th,
body.page_for-authors .page div,
body.page_subscription .page div,
body.page_about .page div,
body.page_editorial-board .page div,
body.page_editorial-council .page div,
body.page_contact .page div {
  font-family: "PT Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Headings inside imported page body get PT Serif */
body.page_for-authors .page h1,
body.page_subscription .page h1,
body.page_about .page h1,
body.page_editorial-board .page h1,
body.page_editorial-council .page h1,
body.page_contact .page h1,
body.page_for-authors .page h2,
body.page_subscription .page h2,
body.page_about .page h2,
body.page_editorial-board .page h2,
body.page_editorial-council .page h2,
body.page_contact .page h2,
body.page_for-authors .page h3,
body.page_subscription .page h3,
body.page_about .page h3,
body.page_editorial-board .page h3,
body.page_editorial-council .page h3,
body.page_contact .page h3,
body.page_for-authors .page h4,
body.page_subscription .page h4,
body.page_about .page h4,
body.page_editorial-board .page h4,
body.page_editorial-council .page h4,
body.page_contact .page h4 {
  font-family: "PT Serif", "Noto Serif", Georgia, serif !important;
  color: #1a3a5c !important;
}

/* Kill the red underlined Drupal span "Договор об условиях..." and
   any similar red-on-white pseudo-heading. Inline style:
   color: rgb(255, 0, 0); font-family: lucida ...; text-decoration: underline */
body.page_for-authors .page [style*="rgb(255, 0, 0)"],
body.page_subscription .page [style*="rgb(255, 0, 0)"],
body.page_about .page [style*="rgb(255, 0, 0)"],
body.page_editorial-board .page [style*="rgb(255, 0, 0)"],
body.page_editorial-council .page [style*="rgb(255, 0, 0)"],
body.page_contact .page [style*="rgb(255, 0, 0)"],
body.page_for-authors .page [style*="color:#ff0000"],
body.page_subscription .page [style*="color:#ff0000"],
body.page_about .page [style*="color:#ff0000"],
body.page_editorial-board .page [style*="color:#ff0000"],
body.page_editorial-council .page [style*="color:#ff0000"],
body.page_contact .page [style*="color:#ff0000"],
body.page_for-authors .page [style*="color:red"],
body.page_subscription .page [style*="color:red"],
body.page_about .page [style*="color:red"],
body.page_editorial-board .page [style*="color:red"],
body.page_editorial-council .page [style*="color:red"],
body.page_contact .page [style*="color:red"] {
  color: #1a3a5c !important;
  text-decoration: none !important;
  font-family: "PT Serif", "Noto Serif", Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  display: inline-block;
}

/* Old navy text color rgb(0,0,128) -> our navy */
body.page_for-authors .page [style*="rgb(0, 0, 128)"],
body.page_subscription .page [style*="rgb(0, 0, 128)"],
body.page_about .page [style*="rgb(0, 0, 128)"],
body.page_editorial-board .page [style*="rgb(0, 0, 128)"],
body.page_editorial-council .page [style*="rgb(0, 0, 128)"],
body.page_contact .page [style*="rgb(0, 0, 128)"],
body.page_for-authors .page [style*="color:#000080"],
body.page_subscription .page [style*="color:#000080"],
body.page_about .page [style*="color:#000080"],
body.page_editorial-board .page [style*="color:#000080"],
body.page_editorial-council .page [style*="color:#000080"],
body.page_contact .page [style*="color:#000080"] {
  color: #1a3a5c !important;
}

/* Strip stray underline from random spans inside .page (Drupal habit) */
body.page_for-authors .page span[style*="underline"],
body.page_subscription .page span[style*="underline"],
body.page_about .page span[style*="underline"],
body.page_editorial-board .page span[style*="underline"],
body.page_editorial-council .page span[style*="underline"],
body.page_contact .page span[style*="underline"] {
  text-decoration: none !important;
}

/* Body links inside static pages — academic orange link style */
body.page_for-authors .page a,
body.page_subscription .page a,
body.page_about .page a,
body.page_editorial-board .page a,
body.page_editorial-council .page a,
body.page_contact .page a {
  color: #c47c2b !important;
  text-decoration: underline;
}

body.page_for-authors .page a:hover,
body.page_subscription .page a:hover,
body.page_about .page a:hover,
body.page_editorial-board .page a:hover,
body.page_editorial-council .page a:hover,
body.page_contact .page a:hover {
  color: #8b4513 !important;
}

/* Legacy <font> tag from Drupal: face/color HTML4 attributes carry
   lucida + maroon. Force inherit so the page font cascade wins. */
body.page_for-authors .page font,
body.page_subscription .page font,
body.page_about .page font,
body.page_editorial-board .page font,
body.page_editorial-council .page font,
body.page_contact .page font {
  font-family: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* Case-insensitive catch for uppercase inline `color:#FF0000` and
   variants. CSS Level 4 attribute selector with `i` flag. */
body.page_for-authors .page [style*="#FF0000" i],
body.page_subscription .page [style*="#FF0000" i],
body.page_about .page [style*="#FF0000" i],
body.page_editorial-board .page [style*="#FF0000" i],
body.page_editorial-council .page [style*="#FF0000" i],
body.page_contact .page [style*="#FF0000" i],
body.page_for-authors .page [style*="color:#F00" i],
body.page_subscription .page [style*="color:#F00" i],
body.page_about .page [style*="color:#F00" i],
body.page_editorial-board .page [style*="color:#F00" i],
body.page_editorial-council .page [style*="color:#F00" i],
body.page_contact .page [style*="color:#F00" i] {
  color: #1a3a5c !important;
  text-decoration: none !important;
  font-family: "PT Serif", "Noto Serif", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Maroon (#800000 / rgb(128,0,0)) used in <font color> on /about
   admonition. Just make it a calm dark grey, not legacy red. */
body.page_for-authors .page [color="#800000" i],
body.page_subscription .page [color="#800000" i],
body.page_about .page [color="#800000" i],
body.page_editorial-board .page [color="#800000" i],
body.page_editorial-council .page [color="#800000" i],
body.page_contact .page [color="#800000" i] {
  color: #4a5560 !important;
}

/* ============================================================
   17. RU/EN LANGUAGE SWITCHER (Prompt 60)
   Injected by mvp.js as <ul class="filol-locale-switch"> inside
   the auth row.  RU = active, EN = pending (links to OJS
   /user/setLocale/en_US which 302→homepage when EN is not
   enabled in OJS supportedLocales).
   ============================================================ */

.filol-locale-switch {
  list-style: none;
  margin: 0 8px 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filol-locale-switch li {
  display: inline-block;
  margin: 0 2px;
}

.filol-locale-switch li + li::before {
  content: '|';
  color: #d3d6da;
  margin-right: 6px;
}

.filol-locale-switch a,
.filol-locale-switch span {
  display: inline-block;
  padding: 4px 6px;
  color: #4a5560;
  text-decoration: none;
  font-weight: 600;
}

.filol-locale-switch a:hover,
.filol-locale-switch a:focus {
  color: #c47c2b;
  text-decoration: underline;
  outline: none;
}

.filol-locale-switch .filol-locale-active {
  color: #1a3a5c;
  border-bottom: 2px solid #c47c2b;
  padding-bottom: 2px;
}

/* Prompt 61 — real switch in place; pending state no longer used.
   Class kept harmless in case older cached JS still emits it. */
.filol-locale-switch .filol-locale-pending {
  color: #4a5560;
}

@media (max-width: 767px) {
  .filol-locale-switch {
    margin: 4px 8px 0 0;
    font-size: 11px;
  }
}

/* ============================================================
   18. ISSUE VIEW BLACK-ZONE FIX (Prompt 61)
   On /issue/view/<id> Immersion paints `<section class="issue">`
   with `background: #000; color: #fff` (issue_toc.less). Our
   navy gradient on `.issue__header` becomes a card on top of a
   wide black backdrop. Replace the backdrop with the same
   ivory used by the new global header so the navy card sits on
   a calm academic surface. Article-page contrast (Prompt 57) is
   scoped via body.page_article and stays untouched.
   ============================================================ */

body.page_issue section.issue {
  background: #faf8f3 !important;
  color: inherit !important;
}

body.page_issue section.issue > .container {
  background: transparent;
  color: inherit;
}

/* The TOC inside issue view already has its own white container;
   make sure inherited light bg stays consistent. */
body.page_issue .issue-section {
  background: #ffffff;
}

/* ============================================================
   19. BLACK SURFACE REMOVAL + LOCALE UI POLISH (Prompt 62)
   - Hide Immersion's native locale dropdown — its black trigger
     button duplicates our .filol-locale-switch which actually
     drives the locale change after Prompt 61.
   - Restyle .filol-locale-switch as a compact segmented pill.
   - Repaint article-page from Immersion's #000 backdrop to a
     light academic card so titles, abstracts, references and
     metadata sit on the same surface as the rest of the site.
   ============================================================ */

/* 19.1 — Hide native OJS/Immersion language dropdown.
   The element appears once site has more than one supported
   locale. We keep the data accessible (visually-hidden so screen
   readers can still reach it), but the visible button is gone. */
.main-header .language-toggle,
.main-header__admin .language-toggle,
.main-header #navigationLanguage,
.main-header__admin #navigationLanguage,
.main-header .nmi_type_locale_user,
.main-header__admin .nmi_type_locale_user,
.main-header .main-header__lang-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
}

/* 19.2 — Compact segmented pill for our switcher.
   Override the stripe-with-pipes look from section 17. */
.filol-locale-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin: 0 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid #1a3a5c;
  border-radius: 999px;
  overflow: hidden;
}

.filol-locale-switch li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Kill the previous "|" separator from section 17 */
.filol-locale-switch li + li::before {
  content: none;
}

.filol-locale-switch a,
.filol-locale-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 10px;
  color: #1a3a5c;
  background: transparent;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  border-radius: 0;
  line-height: 1;
}

.filol-locale-switch a:hover,
.filol-locale-switch a:focus {
  background: rgba(26, 58, 92, 0.08);
  color: #1a3a5c;
  text-decoration: none;
  outline: none;
}

.filol-locale-switch .filol-locale-active {
  background: #1a3a5c;
  color: #ffffff;
  border-bottom: 0;
  padding: 4px 10px;
}

@media (max-width: 767px) {
  .filol-locale-switch {
    margin: 0 8px 0 0;
    font-size: 11px;
  }
  .filol-locale-switch a,
  .filol-locale-switch span,
  .filol-locale-switch .filol-locale-active {
    min-width: 28px;
    padding: 3px 8px;
  }
}

/* 19.3 — Article page: light academic surface.
   Override Immersion's `.article-page { background: #000; color: #fff }`
   AND the Prompt-57 light-on-dark text overrides. Scope strictly
   to body.page_article so issue/homepage/static stay untouched.
   We also keep the order: section 19 lives later in the file than
   section 14, so on equal specificity it wins. */
body.page_article .article-page {
  background: #ffffff !important;
  color: #1f1f1f !important;
  padding: 32px 40px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(26, 58, 92, 0.05);
}

body.page_article .article-page a {
  color: #c47c2b !important;
}

body.page_article .article-page a:hover,
body.page_article .article-page a:focus {
  color: #8b4513 !important;
}

/* Title — back to navy on white */
body.page_article .article-page__title span {
  color: #1a3a5c !important;
}

/* Authors / meta */
body.page_article .authors-string,
body.page_article .authors-string__item,
body.page_article .authors-string__item span {
  color: #4a5560 !important;
}

body.page_article .article-page__meta dt {
  color: #4a5560 !important;
}

body.page_article .article-page__meta dd {
  color: #1f1f1f !important;
}

body.page_article .article-page__meta dd a {
  color: #c47c2b !important;
}

body.page_article .article-page__meta dd a:hover,
body.page_article .article-page__meta dd a:focus {
  color: #8b4513 !important;
}

/* Abstract / section labels */
body.page_article h3.label {
  color: #1a3a5c !important;
  border-bottom-color: #e2e6ea !important;
}

/* Body copy */
body.page_article .article-page p,
body.page_article .article-page li,
body.page_article .article-page .csl-entry {
  color: #1f1f1f !important;
}

/* Keywords */
body.page_article .keywords {
  color: #4a5560 !important;
}

body.page_article .keywords strong,
body.page_article .keywords b {
  color: #1f1f1f !important;
}

/* PDF / galley buttons stay orange — readable on both light and
   dark, just keep the high-contrast palette already set in section 14. */
body.page_article .list-galleys a,
body.page_article .article-page .btn {
  background-color: #c47c2b !important;
  border: 1px solid #c47c2b !important;
  color: #ffffff !important;
}

body.page_article .list-galleys a:hover,
body.page_article .article-page .btn:hover {
  background-color: #8b4513 !important;
  border-color: #8b4513 !important;
  color: #ffffff !important;
}

/* ============================================================
   20. ARCHIVE CARDS LAYOUT POLISH (Prompt 63)
   Section-2 (Phase 1) attempted to turn Bootstrap col children
   into a card via the selector
     `.archived-issue > div:not(.cover-placeholder)`
   but Immersion's archive markup has no wrapper <div>; instead
   it lays out a flat list of children:
     <div class="cover-placeholder"> (JS-injected)
     <a class="issue-summary__link"><h3 class="archived-issue__title">…</h3></a>
     <div class="series"><span>…volume/year…</span></div>
     <p class="archived-issue__date">…</p>
   The buggy selector matched `.series`, which inherited
   `height: 100%; display: flex; border; bg`, blowing it up
   to a 595 px white block underneath the placeholder cover.
   This section turns `.archived-issue` itself into the card
   surface and unwinds the Section-2 mistake — strictly scoped
   to body.page_issue.op_archive so issue/article/homepage stay
   untouched.
   ============================================================ */

/* Card surface lives directly on .archived-issue */
body.page_issue.op_archive .archived-issue {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e6ea;
  border-radius: 6px;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

body.page_issue.op_archive .archived-issue:hover {
  box-shadow: 0 4px 16px rgba(26, 58, 92, 0.13);
  transform: translateY(-2px);
}

/* Reset the broken wrapper rule from Section 2 — `.series`,
   `.archived-issue__date` and any stray <div>/<p> children
   stop being flexed full-height card surfaces. */
body.page_issue.op_archive .archived-issue > div:not(.cover-placeholder),
body.page_issue.op_archive .archived-issue > p {
  height: auto !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Cover / placeholder — flush with card top, fixed 4:5 ratio
   to keep cards compact and even regardless of cover state. */
body.page_issue.op_archive .archived-issue .cover-placeholder,
body.page_issue.op_archive .archived-issue > a > img,
body.page_issue.op_archive .archived-issue > img {
  margin: 0 !important;
  width: 100%;
  aspect-ratio: 4 / 5;
  flex: 0 0 auto;
  display: block;
}

body.page_issue.op_archive .archived-issue > img,
body.page_issue.op_archive .archived-issue > a > img {
  object-fit: cover;
}

/* Title link */
body.page_issue.op_archive .archived-issue a.issue-summary__link {
  display: block;
  padding: 12px 14px 4px;
  color: #1a3a5c !important;
  text-decoration: none;
  flex: 0 0 auto;
}

body.page_issue.op_archive .archived-issue a.issue-summary__link:hover .archived-issue__title {
  color: #8b4513 !important;
}

body.page_issue.op_archive .archived-issue__title {
  margin: 0 !important;
  font-family: 'PT Serif', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #1a3a5c !important;
}

/* Series (volume/year) — single text line */
body.page_issue.op_archive .archived-issue .series {
  margin: 0 14px 4px !important;
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #6b7280 !important;
}

/* Date */
body.page_issue.op_archive .archived-issue .archived-issue__date {
  margin: 0 14px 14px !important;
  font-family: 'PT Sans', Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #9ca3af !important;
}

/* Kill the Section-2 ::after CTA on the link (would render
   between title and series, in the middle of the card body). */
body.page_issue.op_archive .archived-issue a.issue-summary__link::after,
body.page_issue.op_archive .archived-issue a.img-wrapper ~ a::after {
  content: none !important;
  display: none !important;
}

/* CTA "Читать →" pinned at card bottom via flex auto margin.
   Generated by ::after on the card itself — flex item ordered
   last by source position, lifted to the bottom by margin-top:auto. */
body.page_issue.op_archive .archived-issue::after {
  content: 'Читать →';
  display: block;
  margin: auto 14px 14px 14px;
  padding: 6px 12px;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a3a5c;
  border: 1px solid #1a3a5c;
  border-radius: 3px;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
  flex: 0 0 auto;
  align-self: stretch;
}

body.page_issue.op_archive .archived-issue:hover::after {
  background: #1a3a5c;
  color: #ffffff;
}

/* Unclassified bin keeps its muted look */
body.page_issue.op_archive .archived-issue--unclassified {
  background: #f9fafb;
  border-color: #d1d5db;
}

body.page_issue.op_archive .archived-issue--unclassified .archived-issue__title {
  color: #6b7280 !important;
  font-style: italic;
}

/* Section 2 still controls the column-count grid (3 cols / 2 / 1).
   Mobile sanity — make sure date/series don't overflow narrow card. */
@media (max-width: 575px) {
  body.page_issue.op_archive .archived-issue .archived-issue__title {
    font-size: 15px !important;
  }
}

/* ============================================================
   21. PUBLIC UI TYPOGRAPHY COMPLIANCE (Prompt 64)
   Immersion compiles `@font-family-primary: 'Roboto'` and
   `@font-family-secondary: 'Spectral'` via variables.less, plus
   Bootstrap stacks `font-family:-apple-system,...,Roboto,...` on
   .btn / form controls. On Linux/Chromium without Apple/Segoe UI
   the cascade lands on Roboto — visible everywhere on issue and
   article pages, in the locale pill, in metadata and in tables.
   This section forces PT Sans on the entire public DOM and PT
   Serif on headings/title-like elements. Values from
   05_docs/04_trebovaniya_k_dizainu.md govern font choice.
   ============================================================ */

/* Default = PT Sans for body and every descendant (covers <p>, <a>,
   <span>, <strong>, <em>, <li>, <td>, <th>, <label>, <button>,
   <input>, <select>, <textarea>, <small>, <blockquote>, <figcaption>,
   metadata, tables, breadcrumbs, locale pill, etc.). */
body,
body * {
  font-family: 'PT Sans', 'Noto Sans', Arial, sans-serif !important;
}

/* PT Serif for headings and title-like elements that the wide rule
   above would otherwise repaint to PT Sans. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .main__title,
body .main__title span,
body .article-page__title,
body .article-page__title span,
body .archived-issue__title,
body .archived-issue__title span,
body .filol-hero__title,
body .filol-hero__subtitle,
body .filol-home-teaser__heading,
body .issue__title,
body .issue__title span,
body .issue-section__title,
body .main-header__title a span,
body .filol-footer-journal-name,
body h3.label,
body .obj_static_page h1,
body .obj_static_page h2,
body .obj_static_page h3,
body .pkp_page_index .page__content h1,
body .pkp_page_index .page__content h2,
body .pkp_page_index .page__content h3 {
  font-family: 'PT Serif', 'Noto Serif', Georgia, serif !important;
}

/* Static-page imported headings (Section 16 already handled
   `.page h1-h4`). Reaffirm here to win against the wide rule. */
body[class*="page_for-authors"] .page h1,
body[class*="page_for-authors"] .page h2,
body[class*="page_for-authors"] .page h3,
body[class*="page_for-authors"] .page h4,
body[class*="page_subscription"] .page h1,
body[class*="page_subscription"] .page h2,
body[class*="page_subscription"] .page h3,
body[class*="page_subscription"] .page h4,
body[class*="page_about"] .page h1,
body[class*="page_about"] .page h2,
body[class*="page_about"] .page h3,
body[class*="page_about"] .page h4,
body[class*="page_editorial-board"] .page h1,
body[class*="page_editorial-board"] .page h2,
body[class*="page_editorial-board"] .page h3,
body[class*="page_editorial-board"] .page h4,
body[class*="page_editorial-council"] .page h1,
body[class*="page_editorial-council"] .page h2,
body[class*="page_editorial-council"] .page h3,
body[class*="page_editorial-council"] .page h4 {
  font-family: 'PT Serif', 'Noto Serif', Georgia, serif !important;
}

/* Ensure red-pseudo-headings (Prompt 60 D-12) keep their PT Serif
   even though section 21 PT-Sans rule sits later in cascade. */
body .page [style*="rgb(255, 0, 0)"],
body .page [style*="color:#ff0000"],
body .page [style*="color:red"],
body .page [style*="#FF0000" i],
body .page [style*="color:#F00" i] {
  font-family: 'PT Serif', 'Noto Serif', Georgia, serif !important;
}