/* Runtime-safe overrides for OJS 3.5's legacy navigation dimensions. */
.pkp_head_wrapper {
  position: relative;
}

@media (min-width: 768px) {
  /* Keep the journal identity clear of the utility controls in the top row. */
  .pkp_site_name_wrapper {
    padding-right: 15rem !important;
  }
}

.pkp_navigation_user_wrapper {
  left: auto !important;
  right: var(--space-4) !important;
  width: auto !important;
}

#navigationUser {
  width: auto !important;
  max-width: 100%;
}

/* The default OJS dropdown is intentionally reset here because the custom
   header no longer inherits the default theme's list reset. */
.pkp_navigation_user_wrapper #navigationUser > li {
  position: relative;
  list-style: none;
}

.pkp_navigation_user_wrapper #navigationUser .dropdown-menu,
.pkp_navigation_user_wrapper #navigationUser li > ul {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  left: auto;
  z-index: 1003;
  display: none;
  min-width: 12rem;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  text-align: left;
}

.pkp_navigation_user_wrapper #navigationUser > li:hover > .dropdown-menu,
.pkp_navigation_user_wrapper #navigationUser > li:focus-within > .dropdown-menu,
.pkp_navigation_user_wrapper #navigationUser > li.open > .dropdown-menu {
  display: block;
}

.pkp_navigation_user_wrapper #navigationUser .dropdown-menu li,
.pkp_navigation_user_wrapper #navigationUser li > ul li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkp_navigation_user_wrapper #navigationUser .dropdown-menu a,
.pkp_navigation_user_wrapper #navigationUser li > ul a {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

/* Hide the accessible search name visually; the link still exposes it to
   assistive technology through aria-label and the screen-reader span. */
.pkp_navigation_search_wrapper .pkp_screen_reader {
  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;
}

.pkp_navigation_search_wrapper {
  right: 10rem !important;
}

.pkp_navigation_search_wrapper .pkp_search {
  flex: 0 0 auto;
}

html,
body {
  overflow-x: hidden;
}

/* Theme-owned base layer: keep new journal contexts independent from an
   optional per-journal styleSheet.css upload. */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

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

.cmp_breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp_breadcrumbs li {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

.cmp_breadcrumbs li + li::before {
  content: "/";
  margin: 0 var(--space-2);
  color: var(--color-text-muted);
}

.cmp_breadcrumbs .separator {
  display: none;
}

.cmp_breadcrumbs a {
  color: var(--color-info);
  text-decoration: none;
}

.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

/* OJS contexts without an uploaded journal stylesheet still need the
   accessible skip links to remain visually hidden until focused. */
.cmp_skip_to_content {
  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;
}

.cmp_skip_to_content a:focus {
  position: fixed !important;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2000;
  width: auto !important;
  height: auto !important;
  padding: var(--space-2) var(--space-3) !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  background: var(--color-accent);
  color: var(--color-primary);
  white-space: normal !important;
}

@media (max-width: 767px) {
  .pkp_head_wrapper {
    position: relative;
  }

  .pkp_site_name_wrapper {
    min-height: 58px;
    padding: var(--space-3) 0;
    padding-right: 3.5rem !important;
  }

  .pkp_site_name {
    min-width: 0;
    max-width: calc(100% - 3.5rem);
    flex: 1 1 auto;
    padding-right: 0 !important;
  }

  .pkp_site_name .is_text {
    font-size: var(--text-lg);
    display: -webkit-box;
    overflow: hidden;
    max-width: 100%;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pkp_site_nav_toggle {
    position: absolute;
    top: var(--space-3);
    right: 0;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0;
    line-height: 1;
  }

  .pkp_site_nav_toggle::after {
    content: "\2630";
    font-size: var(--text-lg);
  }

  .pkp_navigation_user_wrapper {
    top: 58px !important;
    right: 0 !important;
  }

  .pkp_navigation_user_wrapper #navigationUser .dropdown-menu,
  .pkp_navigation_user_wrapper #navigationUser li > ul {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: var(--space-2);
    border-radius: var(--radius-sm);
  }

  .pkp_navigation_user_wrapper #navigationUser > li:hover > .dropdown-menu,
  .pkp_navigation_user_wrapper #navigationUser > li:focus-within > .dropdown-menu,
  .pkp_navigation_user_wrapper #navigationUser > li.open > .dropdown-menu {
    display: block;
  }

  .pkp_navigation_search_wrapper {
    display: none;
  }
}

/* ========================================================================
   Contrast pass — prevent legacy PKP controls from fighting the palette.
   ======================================================================== */

.page_search .submit button.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: var(--radius-sm);
  box-shadow: none !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  text-decoration: none;
}

.page_search .submit button.submit:hover,
.page_search .submit button.submit:focus-visible {
  background: var(--color-primary-light) !important;
  color: var(--color-text-inverse) !important;
  border-color: var(--color-primary-light) !important;
}

.page_search .submit button.submit::before,
.page_search .submit button.submit::after {
  color: var(--color-text-inverse) !important;
}

.page_search .search_advanced label,
.page_search .search_advanced .label,
.page_search .search_advanced legend {
  color: var(--color-text-secondary) !important;
}

.page_search .search_advanced legend {
  color: var(--color-primary) !important;
}

.page_search .search_advanced input,
.page_search .search_advanced select,
.page_search .search_advanced option {
  color: var(--color-text) !important;
  background-color: var(--color-bg) !important;
}

/* Feed badges are external PKP assets; give them a deliberate card treatment. */
.pkp_structure_sidebar .block_web_feed .content ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkp_structure_sidebar .block_web_feed .content li {
  margin: 0;
}

.pkp_structure_sidebar .block_web_feed .content li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-off);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
}

.pkp_structure_sidebar .block_web_feed .content li a:hover {
  background: var(--color-accent-08);
  border-color: var(--color-accent);
}

.pkp_structure_sidebar .block_web_feed .content img {
  width: auto;
  height: 1.125rem;
  max-width: 4.5rem;
  object-fit: contain;
}

/* User menus can be light panels while the top-level header links stay white. */
.pkp_navigation_user_wrapper #navigationUser .dropdown-menu,
.pkp_navigation_user_wrapper #navigationUser li > ul,
.pkp_navigation_user_wrapper .dropdown-menu {
  background: var(--color-bg) !important;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.pkp_navigation_user_wrapper #navigationUser .dropdown-menu a,
.pkp_navigation_user_wrapper #navigationUser li > ul a,
.pkp_navigation_user_wrapper .dropdown-menu a {
  color: var(--color-text) !important;
  background: transparent !important;
  text-decoration: none;
}

.pkp_navigation_user_wrapper #navigationUser .dropdown-menu a:hover,
.pkp_navigation_user_wrapper #navigationUser li > ul a:hover,
.pkp_navigation_user_wrapper .dropdown-menu a:hover {
  color: var(--color-primary) !important;
  background: var(--color-bg-off) !important;
}

.kolektif-page-intro {
  margin-bottom: var(--space-10);
  max-width: var(--content-narrow);
}

.kolektif-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-accent-dark);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kolektif-page-intro p {
  color: var(--color-text-secondary);
}

.kolektif-empty-state {
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.kolektif-empty-state .fa {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--text-5xl);
}

/* ========================================================================
   Theme-owned content frame
   The compiled fallback stylesheet can be used without the LESS bundle.
   Keep every journal page inside the same centered editorial container.
   ======================================================================== */

.pkp_structure_content {
  width: min(calc(100% - (var(--space-8) * 2)), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  padding: var(--space-12) 0 var(--space-16) !important;
}

.pkp_structure_content.has_sidebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width) !important;
  gap: var(--space-8) !important;
  align-items: start !important;
}

.pkp_structure_main {
  min-width: 0;
}

/* Archive catalog */
.page_issue_archive {
  min-width: 0;
}

.page_issue_archive .kolektif-page-intro {
  margin-bottom: var(--space-8);
}

.page_issue_archive .page_title {
  margin: 0 0 var(--space-3);
  font-size: clamp(2rem, 4vw, var(--text-4xl));
  line-height: var(--leading-tight);
}

.page_issue_archive .kolektif-page-intro p {
  max-width: 42rem;
  margin: 0;
}

.kolektif-empty-state--archive {
  min-height: 18rem;
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-6);
  background: linear-gradient(135deg, var(--color-bg-off), var(--color-bg));
  border: var(--border-thin);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.kolektif-empty-state--archive__content {
  max-width: 34rem;
}

.kolektif-empty-state--archive .fa {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  color: var(--color-accent-dark);
  background: var(--color-accent-15);
  font-size: var(--text-2xl);
}

.kolektif-empty-state--archive h2 {
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
}

.kolektif-empty-state--archive p {
  max-width: 30rem;
  margin: 0 auto;
  color: var(--color-text-secondary);
}

/* ========================================================================
   Internal pages — bring inherited OJS pages into the Kolektif system.
   The PKP templates for About, Search and contact pages render directly
   below .pkp_structure_page, so they need their own editorial frame.
   ======================================================================== */

.pkp_structure_page > .page {
  width: min(100% - (var(--space-8) * 2), var(--content-max));
  margin: 0 auto;
  padding: var(--space-10) 0 var(--space-12);
  color: var(--color-text);
}

.pkp_structure_page > .page > .cmp_breadcrumbs {
  display: block;
  width: auto;
  margin: 0 0 var(--space-8);
  padding: 0 0 var(--space-4);
  border-bottom: var(--border-thin);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.pkp_structure_page > .page > h1,
.pkp_structure_page > .page > .page_title {
  max-width: var(--content-narrow);
  margin: 0 0 var(--space-8);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, var(--text-4xl));
  line-height: var(--leading-tight);
}

.pkp_structure_page > .page > h1::after,
.pkp_structure_page > .page > .page_title::after {
  content: "";
  display: block;
  width: 3.5rem;
  margin-top: var(--space-4);
  border-bottom: 3px solid var(--color-accent);
}

.page_about > .cmp_breadcrumbs + h1,
.page_search > .cmp_breadcrumbs + h1,
.page_contact > .cmp_breadcrumbs + h1,
.page_privacy > .cmp_breadcrumbs + h1,
.page_submissions > .cmp_breadcrumbs + h1,
.page_masthead > .cmp_breadcrumbs + h1 {
  margin-bottom: var(--space-8);
}

.page_about {
  max-width: var(--content-max) !important;
}

.kolektif-about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: var(--space-10);
  align-items: stretch;
  margin-bottom: var(--space-12);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.kolektif-about-hero__copy {
  max-width: 42rem;
}

.kolektif-about-hero .kolektif-eyebrow {
  color: var(--color-accent-light);
}

.kolektif-about-hero h1 {
  margin-bottom: var(--space-5);
  color: var(--color-text-inverse);
  font-size: clamp(2.25rem, 5vw, 3.6rem);
}

.kolektif-about-hero h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  margin-top: var(--space-4);
  border-bottom: 3px solid var(--color-accent);
}

.kolektif-about-hero .pkp_edit_link,
.kolektif-about-hero .pkp_edit_link a {
  color: var(--color-accent-light);
}

.kolektif-about-hero .cmp_edit_link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 var(--space-5);
  padding: 0.45rem 0.75rem;
  color: var(--color-accent-light) !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.kolektif-about-hero .cmp_edit_link:hover,
.kolektif-about-hero .cmp_edit_link:focus {
  color: var(--color-text-inverse) !important;
  border-color: var(--color-accent-light);
  background: rgba(255, 255, 255, 0.16);
  text-decoration: none;
}

.kolektif-about-hero__lead,
.kolektif-about-hero .kolektif-richtext {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.kolektif-about-hero .kolektif-richtext p:last-child {
  margin-bottom: 0;
}

.kolektif-about-hero__mark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  color: var(--color-accent-light);
  text-align: right;
}

.kolektif-about-hero__mark > .fa {
  margin-bottom: var(--space-5);
  font-size: 4rem;
  opacity: 0.9;
}

.kolektif-about-hero__mark-line {
  display: block;
  width: 4rem;
  margin-bottom: var(--space-3);
  border-top: 2px solid var(--color-accent);
}

.kolektif-about-hero__mark-caption {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  line-height: var(--leading-relaxed);
  text-transform: uppercase;
}

.kolektif-about-links {
  margin-bottom: var(--space-10);
}

.kolektif-section-heading {
  margin-bottom: var(--space-6);
}

.kolektif-section-heading .kolektif-eyebrow {
  margin-bottom: var(--space-2);
}

.kolektif-section-heading h2 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
}

.kolektif-about-links__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.kolektif-about-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.kolektif-about-link:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}

.kolektif-about-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent-dark);
  background: var(--color-accent-15);
  border-radius: 50%;
}

.kolektif-about-link strong,
.kolektif-about-link small {
  display: block;
}

.kolektif-about-link strong {
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.kolektif-about-link small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.kolektif-about-link > .fa-arrow-right {
  color: var(--color-accent-dark);
}

.page_about > .cmp_breadcrumbs + h1 + .pkp_edit_link,
.page_contact > .cmp_breadcrumbs + h1 + .pkp_edit_link {
  margin: calc(var(--space-4) * -1) 0 var(--space-6);
}

.page_about > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link),
.page_privacy > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link),
.page_contact .contact_section,
.page_submissions > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) {
  max-width: var(--content-narrow);
  padding: var(--space-8) clamp(var(--space-5), 5vw, var(--space-10));
  background: var(--color-bg);
  border: var(--border-thin);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.page_about > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link),
.page_privacy > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link),
.page_submissions > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) {
  line-height: var(--leading-relaxed);
}

.page_about > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) p:last-child,
.page_privacy > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) p:last-child {
  margin-bottom: 0;
}

.page_about > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) h2,
.page_privacy > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) h2,
.page_submissions > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) h2,
.page_contact .contact_section h2 {
  margin-top: var(--space-8);
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.page_about > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) h2:first-child,
.page_privacy > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) h2:first-child,
.page_submissions > .cmp_breadcrumbs ~ :not(h1):not(.pkp_edit_link) h2:first-child {
  margin-top: 0;
}

/* The About landing sections are deliberately wider than a plain policy card. */
.page_about > .cmp_breadcrumbs ~ .kolektif-about-hero.kolektif-about-hero {
  max-width: none;
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.page_about > .cmp_breadcrumbs ~ .kolektif-about-links.kolektif-about-links {
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Search is an intentionally quieter utility page, with a strong search card. */
.page_search > .cmp_breadcrumbs + h1 {
  margin-bottom: var(--space-6);
}

.page_search > .cmp_form {
  max-width: none;
  margin: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  background: var(--color-bg);
  border: var(--border-thin);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.page_search .search_input {
  margin-bottom: var(--space-5);
}

.page_search .search_input input {
  min-height: 3.25rem;
  border-color: var(--color-divider);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}

.page_search .search_advanced {
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-bg-off);
}

.page_search .search_advanced legend {
  padding: 0 var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.page_search .date_range,
.page_search .author {
  width: auto;
}

.page_search .date_range > div,
.page_search .author {
  margin-bottom: var(--space-5);
}

.page_search .date_range label,
.page_search .date_range legend {
  color: var(--color-text-secondary);
}

.page_search .submit {
  display: flex;
  justify-content: flex-start;
}

.page_search .submit button {
  width: auto;
  min-width: 9rem;
}

.page_search > h2:not(.pkp_screen_reader) {
  margin-top: var(--space-10);
  color: var(--color-primary);
}

.page_search .search_results {
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}

.page_search .search_results > li {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-md);
}

.page_search .cmp_notification {
  max-width: var(--content-narrow);
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-bg-off);
  color: var(--color-text-secondary);
}

.page_contact .contact_section {
  display: grid;
  gap: var(--space-6);
}

.page_contact .contact,
.page_contact .address {
  padding: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-bg-off);
}

.page_contact .contact h2 {
  margin-top: 0;
}

/* Editorial masthead is rendered by OJS as a flat sequence. Keep that
   sequence inside one theme-owned editorial frame so empty role lists and the
   history link do not become unrelated oversized cards. */
.page_masthead.kolektif-editorial-page {
  max-width: var(--content-max);
}

.kolektif-editorial-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  gap: var(--space-8);
  align-items: stretch;
  margin-bottom: var(--space-8);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  background: var(--color-bg);
  border: var(--border-thin);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.kolektif-editorial-intro__copy {
  max-width: 42rem;
}

.kolektif-editorial-intro h1 {
  margin: 0 0 var(--space-4);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, var(--text-4xl));
  line-height: var(--leading-tight);
}

.kolektif-editorial-intro h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  margin-top: var(--space-4);
  border-bottom: 3px solid var(--color-accent);
}

.kolektif-editorial-intro__summary {
  max-width: 38rem;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.kolektif-editorial-history {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-height: 9rem;
  padding: var(--space-5);
  color: var(--color-primary);
  background: var(--color-bg-off);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.kolektif-editorial-history:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.kolektif-editorial-history__icon {
  color: var(--color-accent-dark);
  font-size: var(--text-2xl);
}

.kolektif-editorial-history a {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.kolektif-editorial-history a:hover,
.kolektif-editorial-history a:focus {
  color: var(--color-accent-dark);
}

.kolektif-editorial-history strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.kolektif-editorial-history small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.kolektif-editorial-sections {
  display: grid;
  gap: var(--space-5);
  max-width: var(--content-narrow);
}

.kolektif-editorial-role {
  padding: var(--space-6) clamp(var(--space-5), 5vw, var(--space-8));
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.kolektif-editorial-role h2 {
  margin: 0 0 var(--space-4);
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.kolektif-editorial-role .user_listing {
  margin: 0;
}

.kolektif-editorial-role .user_listing li {
  padding: var(--space-4) 0;
}

.kolektif-editorial-role .user_listing li:first-child {
  padding-top: 0;
}

.kolektif-editorial-role .user_listing li:last-child {
  padding-bottom: 0;
}

.kolektif-editorial-role--reviewers {
  background: var(--color-bg-off);
}

.kolektif-editorial-role--reviewers > p {
  color: var(--color-text-secondary);
}

.page_masthead .user_listing {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.page_masthead .user_listing li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}

.page_masthead .user_listing li:last-child {
  border-bottom: 0;
}

.page_masthead .name {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.page_masthead .affiliation,
.page_masthead .date_start {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.kolektif-empty-state--issue {
  min-height: 23rem;
  padding: var(--space-16) var(--space-6);
  background: var(--color-bg);
  border: var(--border-thin);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.kolektif-empty-state--issue .kolektif-eyebrow {
  margin-top: var(--space-4);
}

.kolektif-empty-state--issue .page_title {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
}

.kolektif-empty-state--issue p {
  max-width: 34rem;
  margin-right: auto;
  margin-left: auto;
  color: var(--color-text-secondary);
}

/* Keep the date labels in the advanced search form in normal flow. */
.page_search .date_range > div > fieldset label {
  position: static !important;
  display: block;
  height: auto !important;
}

/* The empty current-issue state no longer uses the inherited two-column rails. */
.pkp_structure_content:has(.kolektif-empty-state--issue) .pkp_structure_main::before,
.pkp_structure_content:has(.kolektif-empty-state--issue) .pkp_structure_main::after {
  display: none !important;
}

@media (min-width: 768px) {
  .page_search .search_advanced {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(15rem, 0.9fr);
    column-gap: var(--space-8);
  }

  .page_search .search_advanced legend {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .pkp_structure_content {
    width: calc(100% - (var(--space-6) * 2)) !important;
    padding: var(--space-8) 0 var(--space-12) !important;
  }

  .pkp_structure_content.has_sidebar {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

  .kolektif-empty-state--archive {
    min-height: 15rem;
    padding: var(--space-8) var(--space-4);
  }

  .pkp_structure_page > .page {
    width: min(100% - (var(--space-4) * 2), var(--content-max));
    padding-top: var(--space-8);
  }

  .page_search .search_advanced {
    padding: var(--space-4);
  }

  .page_search .date_range,
  .page_search .author {
    display: block;
  }

  .kolektif-empty-state--issue {
    min-height: 18rem;
    padding: var(--space-10) var(--space-4);
  }

  .kolektif-about-hero {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .kolektif-about-hero__mark {
    align-items: flex-start;
    text-align: left;
  }

  .kolektif-about-links__grid {
    grid-template-columns: 1fr;
  }

  .kolektif-editorial-intro {
    grid-template-columns: 1fr;
  }
}