/* =====================================================================
   IJSSS theme
   plugins/themes/ijsss/styles/theme.css

   Loaded at STYLE_SEQUENCE_LATE, so it lands after the parent theme's
   compiled stylesheet and wins at equal specificity. No !important is
   used anywhere; if a rule below does not apply, raise its specificity
   rather than reaching for the hammer.

   Every value comes from tokens.css.

   BREAKPOINTS
   -----------
   The parent theme collapses its navigation at 992px. We use the SAME
   number rather than our own, because two breakpoint systems fighting
   over the same element is how layout bugs are born.
       992px  navigation collapses to the toggle
       600px  card grids and button rows go single column
   Everything in between is handled by the clamp()s in tokens.css.

   SECTIONS
   --------
    1. Base
    2. Layout
    3. Masthead
    4. Navigation
    5. Buttons
    6. Hero
    7. Prose and content
    8. OJS objects
    9. Sidebar
   10. Footer
   11. Print
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. BASE
   --------------------------------------------------------------------- */
/* The parent sets html to 14px. Restore the browser default only on the
   public journal frontend so rem tokens match the mockup. */
html:has(> body.ijsss) { font-size: 100%; }

body.ijsss {
  font-family: var(--ijsss-font-body);
  font-size: var(--ijsss-fs-base);
  line-height: var(--ijsss-lh-base);
  color: var(--ijsss-ink);
  background: var(--ijsss-bg);
  -webkit-font-smoothing: antialiased;
}

/* Full-bleed panels (the hero) use negative margins. Without this guard
   the scrollbar width leaks out as a horizontal scroll. */
.ijsss .pkp_structure_page {
  overflow-x: hidden;
}

.ijsss h1,
.ijsss h2,
.ijsss h3,
.ijsss h4 {
  font-family: var(--ijsss-font-head);
  color: var(--ijsss-navy);
  line-height: var(--ijsss-lh-tight);
  font-weight: 700;
  text-wrap: balance;
}

.ijsss h1 { font-size: var(--ijsss-fs-2xl); margin: 0 0 var(--ijsss-s-4); }
.ijsss h2 { font-size: var(--ijsss-fs-xl);  margin: var(--ijsss-s-6) 0 var(--ijsss-s-3); }
.ijsss h3 { font-size: var(--ijsss-fs-lg);  margin: var(--ijsss-s-5) 0 var(--ijsss-s-3); }
.ijsss h4 { font-size: var(--ijsss-fs-md);  margin: var(--ijsss-s-4) 0 var(--ijsss-s-2); }

.ijsss p { margin: 0 0 var(--ijsss-s-4); }

.ijsss a {
  color: var(--ijsss-navy);
  text-underline-offset: 2px;
}
.ijsss a:hover,
.ijsss a:focus { color: var(--ijsss-orange-700); }

.ijsss :focus-visible {
  outline: 2px solid var(--ijsss-orange);
  outline-offset: 2px;
}

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

.ijsss hr {
  border: 0;
  border-top: 1px solid var(--ijsss-rule);
  margin: var(--ijsss-s-6) 0;
}


/* ---------------------------------------------------------------------
   2. LAYOUT
   --------------------------------------------------------------------- */
.ijsss .pkp_structure_content {
  max-width: var(--ijsss-container);
  margin: 0 auto;
  padding: var(--ijsss-s-6) var(--ijsss-gutter) var(--ijsss-s-8);
}

.ijsss .pkp_structure_main {
  padding: 0;
  min-width: 0;              /* lets long tables scroll instead of pushing */
}

@media (min-width: 992px) {
  .ijsss .pkp_structure_content.has_sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--ijsss-s-7);
    align-items: start;
  }
}


/* ---------------------------------------------------------------------
   3. MASTHEAD
   --------------------------------------------------------------------- */
.ijsss .pkp_structure_head.ijsss-masthead {
  background: var(--ijsss-bg);
  border-bottom: 0;
}

.ijsss .ijsss-masthead__inner {
  max-width: var(--ijsss-container);
  margin: 0 auto;
  padding: var(--ijsss-s-4) var(--ijsss-gutter);
  display: flex;
  align-items: center;
  gap: var(--ijsss-s-5);
  flex-wrap: wrap;
  width: 100%;
}

.ijsss .ijsss-masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--ijsss-s-4);
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.ijsss .pkp_site_name.ijsss-masthead__logo {
  width: auto;
  font-size: inherit;
  flex: 0 0 auto;
  margin: 0;
}
.ijsss .ijsss-masthead__logo img {
  display: block;
  height: clamp(42px, 34px + 2.2vw, 62px);
  width: auto;
}
.ijsss .ijsss-masthead__logo .is_text {
  font-size: var(--ijsss-fs-lg);
  font-weight: 700;
  color: var(--ijsss-navy);
  text-decoration: none;
}

.ijsss .ijsss-masthead__titles { min-width: 0; }
.ijsss .ijsss-masthead__name {
  margin: 0;
  font-size: var(--ijsss-fs-md);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ijsss-navy);
}
.ijsss .ijsss-masthead__name a { text-decoration: none; color: inherit; }
.ijsss .ijsss-masthead__tagline {
  margin: var(--ijsss-s-1) 0 0;
  font-size: var(--ijsss-fs-sm);
  color: var(--ijsss-ink-soft);
}
.ijsss .ijsss-masthead__meta {
  margin: var(--ijsss-s-1) 0 0;
  font-size: var(--ijsss-fs-xs);
  color: var(--ijsss-ink-faint);
}

.ijsss .ijsss-masthead__cta { flex: 0 0 auto; }

/* Below the nav breakpoint the masthead is one row: logo left, toggle
   right. The title block and the button reappear inside the open menu. */
@media (max-width: 991px) {
  .ijsss .ijsss-masthead__titles,
  .ijsss .ijsss-masthead__cta { display: none; }
  .ijsss .ijsss-masthead__inner { flex-wrap: nowrap; }
  .ijsss .ijsss-masthead__brand { order: 1; }
}
@media (min-width: 992px) {
  .ijsss .ijsss-nav__extra { display: none; }
}


/* ---------------------------------------------------------------------
   4. NAVIGATION
   --------------------------------------------------------------------- */
.ijsss .pkp_site_nav_menu.ijsss-nav {
  background: var(--ijsss-navy);
  padding: 0;
  border-top: 0;
}

.ijsss .ijsss-nav__row {
  max-width: var(--ijsss-container);
  margin: 0 auto;
  padding: 0 var(--ijsss-gutter);
}

.ijsss .ijsss-nav__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ijsss-s-4);
  flex-wrap: wrap;
}

.ijsss .pkp_navigation_primary.ijsss-nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.ijsss .ijsss-nav__list > li { position: relative; }
.ijsss .ijsss-nav__list > li > a {
  display: block;
  padding: var(--ijsss-s-3) var(--ijsss-s-4);
  color: #fff;
  font-size: var(--ijsss-fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.ijsss .ijsss-nav__list > li > a:hover,
.ijsss .ijsss-nav__list > li > a:focus,
.ijsss .ijsss-nav__list > li.current > a {
  background: var(--ijsss-navy-800);
  color: #fff;
  border-bottom-color: var(--ijsss-orange);
}

/* Dropdowns. The parent theme's JS adds .dropdown-menu on wide screens. */
.ijsss .ijsss-nav__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--ijsss-navy-800);
  min-width: 15rem;
  border: 0;
  border-top: 3px solid var(--ijsss-orange);
  border-radius: 0;
  box-shadow: var(--ijsss-shadow);
}
.ijsss .ijsss-nav__list ul a {
  display: block;
  padding: var(--ijsss-s-3) var(--ijsss-s-4);
  color: #fff;
  font-size: var(--ijsss-fs-sm);
  text-decoration: none;
}
.ijsss .ijsss-nav__list ul a:hover,
.ijsss .ijsss-nav__list ul a:focus {
  background: var(--ijsss-navy-900);
  color: #fff;
}

.ijsss .ijsss-nav__search .pkp_search {
  color: #fff;
  font-size: var(--ijsss-fs-sm);
  font-weight: 600;
  text-decoration: none;
  padding: var(--ijsss-s-3) var(--ijsss-s-4);
  display: inline-block;
}
.ijsss .ijsss-nav__search .pkp_search:hover { color: var(--ijsss-orange); }

.ijsss .ijsss-nav__user .pkp_navigation_user {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0 var(--ijsss-gutter);
  max-width: var(--ijsss-container);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ijsss .ijsss-nav__user a {
  color: #C9D8E6;
  font-size: var(--ijsss-fs-xs);
  text-decoration: none;
  padding: var(--ijsss-s-2) var(--ijsss-s-3);
  display: inline-block;
}
.ijsss .ijsss-nav__user a:hover { color: #fff; }

/* --- Toggle button (CSS-only hamburger; parent JS drives the state) --- */
.ijsss .pkp_site_nav_toggle.ijsss-navtoggle {
  display: none;
  order: 3;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ijsss-rule);
  border-radius: var(--ijsss-radius);
  background: var(--ijsss-bg);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.ijsss .ijsss-navtoggle span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ijsss .ijsss-navtoggle::before,
.ijsss .ijsss-navtoggle::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--ijsss-navy);
}
.ijsss .ijsss-navtoggle::before { top: 15px; box-shadow: 0 7px 0 var(--ijsss-navy); }
.ijsss .ijsss-navtoggle::after  { top: 29px; }

@media (max-width: 991px) {
  .ijsss .pkp_site_nav_toggle.ijsss-navtoggle { display: block; }

  .ijsss .pkp_site_nav_menu.ijsss-nav {
    display: none;
    position: static;
    width: 100%;
    padding: 0 0 var(--ijsss-s-4);
  }
  /* Class toggled by plugins/themes/default/js/main.js */
  .ijsss .pkp_site_nav_menu.pkp_site_nav_menu--isOpen { display: block; }

  .ijsss .ijsss-nav__wrapper { display: block; }
  .ijsss .pkp_navigation_primary.ijsss-nav__list { display: block; }
  .ijsss .ijsss-nav__list > li > a {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .ijsss .ijsss-nav__list ul { box-shadow: none; border-top: 0; }
  .ijsss .ijsss-nav__list ul a { padding-left: var(--ijsss-s-6); }

  .ijsss .ijsss-nav__extra {
    padding: var(--ijsss-s-4) var(--ijsss-gutter) 0;
  }
  .ijsss .ijsss-nav__meta {
    margin: var(--ijsss-s-4) 0 0;
    font-size: var(--ijsss-fs-xs);
    line-height: 1.5;
    color: #9FB0C4;
  }
}


/* ---------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------- */
.ijsss .ijsss-btn {
  display: inline-block;
  padding: var(--ijsss-s-3) var(--ijsss-s-5);
  font-size: var(--ijsss-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--ijsss-radius);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.ijsss .ijsss-btn--block { display: block; width: 100%; }

.ijsss .ijsss-btn--primary {
  background: var(--ijsss-orange);
  color: #fff;
}
.ijsss .ijsss-btn--primary:hover,
.ijsss .ijsss-btn--primary:focus {
  background: var(--ijsss-orange-600);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transform: translateY(-1px);
}
.ijsss .ijsss-btn--primary:active { transform: translateY(0); }

.ijsss .ijsss-btn--navy { background: var(--ijsss-navy); color: #fff; }
.ijsss .ijsss-btn--navy:hover { background: var(--ijsss-navy-800); color: #fff; }

.ijsss .ijsss-btn--ghost {
  background: transparent;
  color: var(--ijsss-navy);
  border-color: var(--ijsss-navy);
}
.ijsss .ijsss-btn--ghost:hover { background: var(--ijsss-navy); color: #fff; }

/* Outline button for the navy hero. COMPLETELY transparent at rest - no
   fill, no blur, no inset highlight. The frosted glass appears only on
   hover, which is what the client signed off on. */
.ijsss .ijsss-btn--glass {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.ijsss .ijsss-btn--glass:hover,
.ijsss .ijsss-btn--glass:focus-visible {
  background: rgba(255, 255, 255, .09);
  border-color: #fff;
  color: #fff;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
              0 6px 18px rgba(0, 0, 0, .18);
  transform: translateY(-1px);
}
.ijsss .ijsss-btn--glass:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, .16);
}

.ijsss .ijsss-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ijsss-s-3);
}
@media (max-width: 600px) {
  .ijsss .ijsss-btn-row { flex-direction: column; }
  .ijsss .ijsss-btn-row .ijsss-btn { display: block; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ijsss .ijsss-btn { transition: none; }
  .ijsss .ijsss-btn:hover { transform: none; }
}


/* ---------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------- */
.ijsss .ijsss-hero {
  background: var(--ijsss-navy);
  color: #fff;
  /* Full bleed out of the centred content column.
     All horizontal padding belongs to __inner. Putting it here as well
     (the calc(50vw - 50%) trick) double-pads the box and pushes the page
     wider than the viewport on phones - which, with the overflow-x guard
     on .pkp_structure_page, silently clips the masthead's menu button. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding: var(--ijsss-s-8) 0;
  margin-bottom: var(--ijsss-s-7);
}
.ijsss .ijsss-hero__inner {
  max-width: var(--ijsss-container);
  margin: 0 auto;
  padding: 0 var(--ijsss-gutter);
}
.ijsss .ijsss-hero__heading {
  color: #fff;
  font-size: var(--ijsss-fs-2xl);
  max-width: 22ch;
  margin: 0 0 var(--ijsss-s-4);
}
.ijsss .ijsss-hero__rule {
  width: 72px;
  height: 4px;
  background: var(--ijsss-orange);
  margin: 0 0 var(--ijsss-s-5);
}
.ijsss .ijsss-hero__lede {
  font-size: var(--ijsss-fs-md);
  color: #D6E2EE;
  max-width: 60ch;
  margin: 0 0 var(--ijsss-s-5);
}


/* ---------------------------------------------------------------------
   7. PROSE AND CONTENT
   --------------------------------------------------------------------- */
.ijsss .pkp_structure_main ul,
.ijsss .pkp_structure_main ol { padding-left: 1.25rem; }
.ijsss .pkp_structure_main li { margin-bottom: var(--ijsss-s-2); }

.ijsss .cmp_breadcrumbs {
  font-size: var(--ijsss-fs-xs);
  color: var(--ijsss-ink-faint);
  margin: 0 0 var(--ijsss-s-4);
}
.ijsss .cmp_breadcrumbs a { color: var(--ijsss-ink-soft); }

.ijsss blockquote {
  border-left: 4px solid var(--ijsss-orange);
  background: var(--ijsss-bg-soft);
  margin: 0 0 var(--ijsss-s-5);
  padding: var(--ijsss-s-4) var(--ijsss-s-5);
  color: var(--ijsss-ink-soft);
}

.ijsss code, .ijsss pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
  background: var(--ijsss-navy-050);
}

/* Tables always scroll rather than push the page sideways. */
.ijsss .pkp_structure_main table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ijsss-fs-sm);
  margin: 0 0 var(--ijsss-s-5);
  display: block;
  overflow-x: auto;
}
.ijsss .pkp_structure_main th,
.ijsss .pkp_structure_main td {
  text-align: left;
  padding: var(--ijsss-s-3);
  border-bottom: 1px solid var(--ijsss-rule-soft);
  vertical-align: top;
}
.ijsss .pkp_structure_main thead th {
  background: var(--ijsss-navy-050);
  border-bottom: 2px solid var(--ijsss-navy-100);
  color: var(--ijsss-navy);
  font-weight: 700;
}

.ijsss .cmp_notification,
.ijsss .pkp_notification {
  background: var(--ijsss-orange-050);
  border: 1px solid var(--ijsss-orange);
  border-left-width: 4px;
  border-radius: var(--ijsss-radius);
  padding: var(--ijsss-s-4) var(--ijsss-s-5);
  margin: 0 0 var(--ijsss-s-5);
  color: var(--ijsss-ink);
}


/* ---------------------------------------------------------------------
   8. OJS OBJECTS
   --------------------------------------------------------------------- */
.ijsss .obj_article_summary,
.ijsss .obj_announcement_summary {
  border: 1px solid var(--ijsss-rule);
  border-left: 3px solid var(--ijsss-orange);
  border-radius: var(--ijsss-radius);
  padding: var(--ijsss-s-5);
  margin: 0 0 var(--ijsss-s-4);
  background: var(--ijsss-bg);
}
.ijsss .obj_article_summary > h3,
.ijsss .obj_announcement_summary > h3 {
  margin: 0 0 var(--ijsss-s-2);
  font-size: var(--ijsss-fs-md);
}
.ijsss .obj_article_summary .authors {
  color: var(--ijsss-ink-soft);
  font-size: var(--ijsss-fs-sm);
  margin: 0 0 var(--ijsss-s-2);
}
.ijsss .obj_article_summary .meta,
.ijsss .obj_article_summary .published,
.ijsss .obj_article_summary .pages {
  color: var(--ijsss-ink-faint);
  font-size: var(--ijsss-fs-xs);
}
.ijsss .obj_article_summary .galleys_links {
  list-style: none;
  padding: 0;
  margin: var(--ijsss-s-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ijsss-s-2);
}
.ijsss .galley_link,
.ijsss .obj_article_summary .galleys_links a {
  display: inline-block;
  padding: var(--ijsss-s-2) var(--ijsss-s-4);
  border: 2px solid var(--ijsss-navy);
  border-radius: var(--ijsss-radius);
  color: var(--ijsss-navy);
  font-size: var(--ijsss-fs-xs);
  font-weight: 700;
  text-decoration: none;
}
.ijsss .galley_link:hover,
.ijsss .obj_article_summary .galleys_links a:hover {
  background: var(--ijsss-navy);
  color: #fff;
}

/* The orange rule underlines the heading, not the column: fit-content
   keeps it the width of the words. max-width guards a long heading, which
   then wraps and the rule sits under the full block as before. */
.ijsss .obj_issue_toc > h2,
.ijsss .current_issue > h2 {
  border-bottom: 2px solid var(--ijsss-orange);
  padding-bottom: var(--ijsss-s-2);
  width: fit-content;
  max-width: 100%;
}
.ijsss .obj_issue_toc .section > h3 {
  font-size: var(--ijsss-fs-md);
  color: var(--ijsss-ink-soft);
  border-bottom: 1px solid var(--ijsss-rule);
  padding-bottom: var(--ijsss-s-2);
}
.ijsss .obj_issue_toc .cover img { border: 1px solid var(--ijsss-rule); }

.ijsss .obj_article_details .page_title {
  font-size: var(--ijsss-fs-xl);
  margin-bottom: var(--ijsss-s-4);
}
.ijsss .obj_article_details .authors { margin-bottom: var(--ijsss-s-5); }
.ijsss .obj_article_details .item {
  border-top: 1px solid var(--ijsss-rule-soft);
  padding: var(--ijsss-s-4) 0;
}
.ijsss .obj_article_details .label {
  font-weight: 700;
  color: var(--ijsss-navy);
}

.ijsss .obj_issue_summary {
  border: 1px solid var(--ijsss-rule);
  border-radius: var(--ijsss-radius);
  padding: var(--ijsss-s-5);
  margin: 0 0 var(--ijsss-s-4);
}

.ijsss .read_more {
  display: inline-block;
  margin-top: var(--ijsss-s-4);
  font-weight: 700;
  font-size: var(--ijsss-fs-sm);
}

/* Homepage image sits flush with the content column. */
.ijsss .homepage_image img {
  display: block;
  width: 100%;
  border-radius: var(--ijsss-radius);
}


/* ---------------------------------------------------------------------
   9. SIDEBAR
   --------------------------------------------------------------------- */
.ijsss .pkp_structure_sidebar.ijsss-sidebar {
  width: auto;
  padding: 0;
}
.ijsss .ijsss-sidebar .pkp_block {
  border: 1px solid var(--ijsss-rule);
  border-top: 3px solid var(--ijsss-orange);
  border-radius: var(--ijsss-radius);
  padding: var(--ijsss-s-5);
  margin: 0 0 var(--ijsss-s-5);
  background: var(--ijsss-bg-soft);
}
.ijsss .ijsss-sidebar .pkp_block .title {
  font-size: var(--ijsss-fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ijsss-navy);
  margin: 0 0 var(--ijsss-s-3);
}


/* ---------------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------------- */
.ijsss .pkp_structure_footer_wrapper.ijsss-footer {
  background: var(--ijsss-navy);
  color: #C9D8E6;
  margin-top: var(--ijsss-s-8);
}
.ijsss .ijsss-footer__inner {
  max-width: var(--ijsss-container);
  margin: 0 auto;
  padding: var(--ijsss-s-7) var(--ijsss-gutter) var(--ijsss-s-5);
}

.ijsss .ijsss-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ijsss-s-6);
}
@media (min-width: 601px) {
  .ijsss .ijsss-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .ijsss .ijsss-footer__grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
}

.ijsss .ijsss-footer__logo { margin: 0 0 var(--ijsss-s-3); }
/* White knockout artwork, so it sits straight on the navy. No chip. */
.ijsss .ijsss-footer__logo img {
  display: block;
  height: 56px;
  width: auto;
}
.ijsss .ijsss-footer__tagline,
.ijsss .ijsss-footer__small {
  font-size: var(--ijsss-fs-xs);
  line-height: 1.6;
  margin: 0 0 var(--ijsss-s-3);
  color: #C9D8E6;
}
.ijsss .ijsss-footer a { color: #fff; }
.ijsss .ijsss-footer a:hover { color: var(--ijsss-orange); }

.ijsss .ijsss-footer__publisher { margin-top: var(--ijsss-s-5); }
.ijsss .ijsss-footer__publisher-label {
  font-size: var(--ijsss-fs-xs);
  color: #9FB0C4;
  margin: 0 0 var(--ijsss-s-2);
}
.ijsss .ijsss-footer__publisher-logo {
  display: block;
  height: 48px;
  width: auto;
}

.ijsss .ijsss-footer__col h4,
.ijsss .ijsss-footer__col .title {
  color: #fff;
  font-size: var(--ijsss-fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 var(--ijsss-s-3);
}
.ijsss .ijsss-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ijsss .ijsss-footer__links li { margin-bottom: var(--ijsss-s-2); }
.ijsss .ijsss-footer__links a {
  font-size: var(--ijsss-fs-sm);
  text-decoration: none;
  color: #C9D8E6;
}
.ijsss .ijsss-footer__links a:hover { color: var(--ijsss-orange); }
/* Footer menus are flat lists; hide any nested submenu. */
.ijsss .ijsss-footer__links ul { display: none; }

.ijsss .ijsss-footer__content {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: var(--ijsss-s-6);
  padding-top: var(--ijsss-s-4);
  font-size: var(--ijsss-fs-xs);
}

.ijsss .ijsss-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: var(--ijsss-s-6);
  padding-top: var(--ijsss-s-4);
  font-size: var(--ijsss-fs-xs);
  color: #9FB0C4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ijsss-s-3);
  justify-content: space-between;
}
.ijsss .ijsss-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ijsss-s-4);
}

/* The parent theme's "about this publishing system" badge. */
.ijsss .pkp_brand_footer { display: none; }


/* ---------------------------------------------------------------------
   11. PRINT
   --------------------------------------------------------------------- */
@media print {
  .ijsss .pkp_site_nav_menu,
  .ijsss .ijsss-masthead__cta,
  .ijsss .pkp_site_nav_toggle,
  .ijsss .ijsss-footer,
  .ijsss .ijsss-sidebar,
  .ijsss .ijsss-hero__rule,
  .ijsss .ijsss-btn-row { display: none; }

  .ijsss .ijsss-hero {
    background: none;
    color: #000;
    margin: 0;
    padding: 0;
  }
  .ijsss .ijsss-hero__heading { color: #000; }
  .ijsss .pkp_structure_content { max-width: none; padding: 0; }
  .ijsss a { text-decoration: underline; }
}

/* --- Default logo artwork -------------------------------------------
   Shipped as data URIs rather than files because this host offers no
   binary upload path through the cPanel API. It is also the better
   choice: two fewer HTTP requests, and it rides the stylesheet's
   7-day cache. Both are white knockouts with a live alpha channel, so
   they sit directly on the navy footer with no white chip.
   A journal manager can override either one with the matching
   'logo URL' theme option, in which case the template renders a plain
   <img> instead and these rules do not apply.
   -------------------------------------------------------------------- */
.ijsss .ijsss-footer__logo-img--journal {
  width: 115px;
  height: 56px;
  background: url("data:image/png;base64,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") no-repeat left center / contain;
}
.ijsss .ijsss-footer__logo-img--publisher {
  width: 112px;
  height: 48px;
  background: url("data:image/png;base64,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") no-repeat left center / contain;
}

/* ---------------------------------------------------------------------
   12. PARENT THEME RESETS

   Rules the default theme applies that fight this layout. Each one was
   read out of the parent's compiled stylesheet, not guessed. Appended
   last so they win at equal specificity without !important.
   --------------------------------------------------------------------- */

/* The parent draws two decorative 1px vertical rules as pseudo-elements
   on the main column:
     .pkp_structure_main:before,:after { position:absolute; width:1px;
                                         background:#ddd }
   with :after pinned at left:652px/728px. They cut straight through the
   full-bleed hero. */
.ijsss .pkp_structure_main:before,
.ijsss .pkp_structure_main:after {
  content: none;
  display: none;
}

/* The parent floats the main column at a fixed pixel width
   (float:left; width:652px | 860px). We lay out with grid instead. */
.ijsss .pkp_structure_main {
  float: none;
  width: auto;
  max-width: none;
}

/* The parent absolutely centres the user menu over the masthead:
     position:absolute; top:0; left:50%; transform:translateX(-50%)
   which drops Register/Login on top of the logo. */
.ijsss .pkp_navigation_user_wrapper.ijsss-nav__user {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  padding: 0;
  text-align: left;
}

/* The parent caps the brand row at 2.857rem, which clips the title block. */
.ijsss .pkp_site_name_wrapper.ijsss-masthead__brand {
  height: auto;
}

/* The parent fixes the header wrapper to 728/952/1160px. */
.ijsss .pkp_head_wrapper.ijsss-masthead__inner {
  width: 100%;
  max-width: var(--ijsss-container);
  padding-top: var(--ijsss-s-4);
}

/* Footer default logos are <span>s carrying a background image, so they
   need a box. Inline elements ignore width and height. */
.ijsss .ijsss-footer__logo-img {
  display: block;
  max-width: 100%;
}
.ijsss img.ijsss-footer__logo-img {
  height: 56px;
  width: auto;
}

/* The footer link columns only exist once the journal manager builds the
   footer1-footer3 navigation menus. Until then the brand block should
   not be squeezed into a quarter-width grid track, so lay the footer out
   with flex and let each present column claim its own space. */
.ijsss .ijsss-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ijsss-s-6) var(--ijsss-s-7);
  text-align: left;
}
.ijsss .ijsss-footer__brand { flex: 1 1 16rem; max-width: 28rem; }
.ijsss .ijsss-footer__col   { flex: 1 1 10rem; min-width: 10rem; }

/* --- Navigation resets ------------------------------------------------
   The parent pins these to fixed pixel widths and centres the list:
     .pkp_site_name_wrapper, .pkp_navigation_primary_wrapper,
     .pkp_navigation_user { width: 728px | 952px | 1160px; margin: 0 auto }
     .pkp_navigation_primary { display:inline-block; max-width:80% }
     .pkp_navigation_primary > li > a { margin: .357rem .5em 0 }
   Those fight our flex row and push the menu into the middle. */
.ijsss .pkp_navigation_primary_wrapper.ijsss-nav__wrapper,
.ijsss .pkp_navigation_user.pkp_nav_list {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.ijsss .pkp_navigation_primary.ijsss-nav__list {
  max-width: none;
  width: auto;
}
.ijsss .ijsss-nav__list > li > a,
.ijsss .ijsss-nav__list > li:first-child > a,
.ijsss .ijsss-nav__list > li:last-child > a {
  margin: 0;
}

/* The navy band runs the full width of the viewport; only its contents are
   held to the container. Same full-bleed technique as the hero. */
.ijsss .pkp_site_nav_menu.ijsss-nav {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
@media (max-width: 991px) {
  /* Inside the collapsed menu the bleed is unnecessary and would fight the
     absolute positioning the parent applies at this width. */
  .ijsss .pkp_site_nav_menu.ijsss-nav {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* The user row sits under the primary bar, aligned to the same gutter. */
.ijsss .ijsss-nav__user .pkp_navigation_user {
  max-width: var(--ijsss-container);
  margin: 0 auto;
  padding: 0 var(--ijsss-gutter);
}

/* The hero is the first thing on the homepage, so it should meet the nav
   with no white band between them. The body carries pkp_page_index there. */
.ijsss.pkp_page_index .pkp_structure_content {
  padding-top: 0;
}
.ijsss .page_index_journal > .ijsss-hero:first-child {
  margin-top: 0;
}

/* --- The clearfix trap ------------------------------------------------
   The parent applies a float clearfix to this group of elements:

     .pkp_site_name_wrapper, .pkp_navigation_primary_wrapper,
     .pkp_navigation_user, .pkp_structure_content {
        width: 728px | 952px | 1160px; margin: 0 auto }
     ...:before { content:" "; display:table }
     ...:after  { clear:both }

   Two consequences once we lay these out with flex:
     1. ::before and ::after become FLEX ITEMS. With space-between they
        take the two outer positions and shove the real content into the
        middle - which is why the nav looked centred.
     2. the :before line box adds dead vertical space above the content.
   Neither is wanted; the layout uses flex and grid, so there is nothing
   to clear. */
.ijsss .ijsss-masthead__inner::before,
.ijsss .ijsss-masthead__inner::after,
.ijsss .ijsss-masthead__brand::before,
.ijsss .ijsss-masthead__brand::after,
.ijsss .ijsss-nav__wrapper::before,
.ijsss .ijsss-nav__wrapper::after,
.ijsss .ijsss-nav__user .pkp_navigation_user::before,
.ijsss .ijsss-nav__user .pkp_navigation_user::after,
.ijsss .pkp_structure_content::before,
.ijsss .pkp_structure_content::after {
  content: none;
  display: none;
}

/* Same shared selector pins the content column to a fixed pixel width. */
.ijsss .pkp_structure_content {
  width: auto;
}

/* Mockup alignment, 2026-09-09. Keep OJS's 992px navigation breakpoint:
   parent dropdown and toggle behaviour depends on it. */
.ijsss .pkp_head_wrapper.ijsss-masthead__inner {
  padding-top: var(--ijsss-s-5);
  padding-bottom: var(--ijsss-s-5);
}
.ijsss .ijsss-masthead__name { line-height: 1.3; }
.ijsss .ijsss-masthead__logo img {
  height: 62px;
  max-height: none;
}
.ijsss .ijsss-btn { line-height: 1.65; }
.ijsss .ijsss-hero__lede {
  color: #D6DEE8;
  max-width: 62ch;
  margin-bottom: var(--ijsss-s-6);
}
.ijsss .ijsss-hero__heading { text-wrap: wrap; }
.ijsss .ijsss-footer__tagline,
.ijsss .ijsss-footer__small {
  font-size: var(--ijsss-fs-sm);
  line-height: var(--ijsss-lh-base);
}
.ijsss .ijsss-footer__logo-img--journal {
  height: 64px;
  width: 131.43px;
}
.ijsss img.ijsss-footer__logo-img { height: 64px; }
/* Five columns: brand, three link lists, visitor flags. The flag column
   is auto-width so the counter image sets it and the link columns keep
   the remaining space evenly - that is what closed the empty gap on the
   right of the footer. */
.ijsss .ijsss-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
  gap: var(--ijsss-s-6);
}
.ijsss .ijsss-footer__flags { min-width: 0; }
.ijsss .ijsss-footer__flags img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--ijsss-radius);
}
.ijsss .ijsss-footer__flags a { display: inline-block; }
.ijsss .ijsss-footer__brand,
.ijsss .ijsss-footer__col { min-width: 0; max-width: none; }
.ijsss .ijsss-footer__links a { color: #fff; }
.ijsss .ijsss-footer a:hover { color: #fff; text-decoration: underline; }
.ijsss .ijsss-footer__col h4,
.ijsss .ijsss-footer__col .title { letter-spacing: .04em; }
@media (max-width: 991px) {
  .ijsss .pkp_head_wrapper.ijsss-masthead__inner {
    padding-top: var(--ijsss-s-4);
    padding-bottom: var(--ijsss-s-4);
  }
  .ijsss .ijsss-masthead__logo img { height: 44px; max-height: none; }
}
@media (max-width: 900px) {
  .ijsss .ijsss-footer__grid { grid-template-columns: 1fr 1fr; }
  .ijsss .ijsss-footer__flags { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ijsss .ijsss-hero { padding-top: var(--ijsss-s-7); padding-bottom: var(--ijsss-s-7); }
  .ijsss .ijsss-hero__heading { font-size: var(--ijsss-fs-xl); }
  .ijsss .ijsss-btn-row { flex-direction: column; }
  .ijsss .ijsss-btn-row .ijsss-btn { display: block; width: 100%; }
}
@media (max-width: 600px) {
  .ijsss .ijsss-footer__grid { grid-template-columns: 1fr; }
}

/* Navigation alignment and contained dropdowns, 2026-09-10. */
.ijsss .ijsss-nav__user .pkp_navigation_user.pkp_navigation_user {
  width: auto; max-width: none; margin: 0; padding: 0; border: 0;
  align-items: center;
}
.ijsss .ijsss-nav__user .pkp_navigation_user > li > a {
  margin: 0; padding: var(--ijsss-s-3) var(--ijsss-s-4);
  font-size: var(--ijsss-fs-sm); line-height: 1.65;
  color: #fff; border-bottom: 3px solid transparent;
}
.ijsss .ijsss-nav__user .pkp_navigation_user > li > a:hover,
.ijsss .ijsss-nav__user .pkp_navigation_user > li > a:focus {
  background: var(--ijsss-navy-800); color: #fff;
}
.ijsss .ijsss-nav__list ul,
.ijsss .ijsss-nav__user .pkp_navigation_user ul {
  box-sizing: border-box; padding: 0; border-radius: 0;
  background: var(--ijsss-navy-800); border: 0;
  border-top: 3px solid var(--ijsss-orange);
  min-width: 15rem; max-width: calc(100vw - 48px);
}
.ijsss .ijsss-nav__list ul li,
.ijsss .ijsss-nav__user .pkp_navigation_user ul li {
  margin: 0; padding: 0; width: 100%; box-sizing: border-box;
}
.ijsss .ijsss-nav__list ul li > a,
.ijsss .ijsss-nav__user .pkp_navigation_user ul li > a {
  display: block; box-sizing: border-box; width: 100%; margin: 0;
  padding: var(--ijsss-s-3) var(--ijsss-s-4);
  border: 0; border-radius: 0; color: #fff;
  font-size: var(--ijsss-fs-sm); white-space: normal;
}
.ijsss .ijsss-nav__list ul li > a:hover,
.ijsss .ijsss-nav__list ul li > a:focus,
.ijsss .ijsss-nav__user .pkp_navigation_user ul li > a:hover,
.ijsss .ijsss-nav__user .pkp_navigation_user ul li > a:focus {
  color: #fff; background: var(--ijsss-navy-900);
  border: 0; box-shadow: inset 3px 0 var(--ijsss-orange);
  outline-offset: -2px;
}
@media (min-width: 992px) {
  .ijsss .ijsss-nav__wrapper { flex-wrap: nowrap; gap: 0; }
  .ijsss .pkp_navigation_primary.ijsss-nav__list {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto;
  }
  .ijsss .ijsss-nav__list > li { flex: 0 0 auto; }
  .ijsss .ijsss-nav__list > li > a,
  .ijsss .ijsss-nav__search .pkp_search,
  .ijsss .ijsss-nav__user .pkp_navigation_user > li > a {
    padding-left: 10px; padding-right: 10px; white-space: nowrap;
  }
  .ijsss .pkp_navigation_search_wrapper.ijsss-nav__search {
    position: static; float: none; width: auto; margin: 0; flex: 0 0 auto;
  }
  .ijsss .pkp_navigation_user_wrapper.ijsss-nav__user { flex: 0 0 auto; }
  .ijsss .pkp_navigation_user_wrapper.ijsss-nav__user { margin-left: auto; }
  .ijsss .ijsss-nav__user .pkp_navigation_user { flex-wrap: nowrap; }
  .ijsss .ijsss-nav__user .pkp_navigation_user > li { position: relative; }
  /* Override both the parent's hover transform and Popper's inline click
     positioning. One anchored panel stays beneath the account in either state. */
  .ijsss .ijsss-nav__user .pkp_navigation_user > li > ul {
    display: none;
    position: absolute !important;
    top: 100% !important; bottom: auto !important;
    left: auto !important; right: 0 !important;
    transform: none !important; margin: 0;
    width: 240px; z-index: 1001;
  }
  .ijsss .ijsss-nav__user .pkp_navigation_user > li:hover > ul,
  .ijsss .ijsss-nav__user .pkp_navigation_user > li > ul.show { display: block; }
}
/* The parent initializes Bootstrap only above 992px; cover its exact boundary. */
@media (width: 992px) {
  .ijsss .ijsss-nav__user .pkp_navigation_user > li:focus-within > ul { display: block; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .ijsss .ijsss-nav__list > li > a {
    font-size: 13px; padding-left: 7px; padding-right: 7px;
  }
}
/* Icon-only search keeps its translated accessible name at every width. */
@media (min-width: 992px) and (max-width: 1023px) {
  .ijsss .ijsss-nav__list > li > a { padding-left: 6px; padding-right: 6px; }
}
.ijsss .ijsss-nav__search-label {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ijsss .ijsss-nav__search .pkp_search { min-width: 44px; text-align: center; }
.ijsss .ijsss-nav__search .pkp_search .fa-search { margin: 0; }
@media (max-width: 991px) {
  .ijsss .ijsss-nav__user .pkp_navigation_user { flex-wrap: wrap; }
  .ijsss .ijsss-nav__user .pkp_navigation_user ul { max-width: 100%; }
}

/* Compact mobile identity: reset the parent theme's positioned logo. */
@media (max-width: 991px) {
  .ijsss .pkp_site_name_wrapper.ijsss-masthead__brand {
    width: 100%; padding: 0; gap: 12px;
  }
  .ijsss .pkp_site_name.ijsss-masthead__logo {
    position: static; inset: auto; order: 1;
    flex: 0 0 44px; width: 44px; margin: 0; padding: 0;
  }
  .ijsss .ijsss-masthead__logo a.is_img { display: block; margin: 0; padding: 0; }
  .ijsss .ijsss-masthead__logo img {
    display: block; width: 44px; height: 44px; object-fit: contain;
  }
  .ijsss .ijsss-masthead__titles { display: block; order: 2; flex: 1 1 0; min-width: 0; }
  .ijsss .ijsss-masthead__name {
    margin: 0; font-size: 13px; line-height: 1.35; white-space: normal; overflow-wrap: break-word;
  }
  .ijsss .ijsss-masthead__name-line { display: block; }
  .ijsss .ijsss-masthead__tagline,
  .ijsss .ijsss-masthead__meta { display: none; }
  .ijsss .ijsss-navtoggle { order: 3; margin-left: 0; }
}

/* Homepage spacing and mobile overlay, 2026-09-10. */
.ijsss.pkp_page_index .pkp_structure_main { margin-top: 0; }
/* The desktop navigation is the last masthead row; no padding below it. */
@media (min-width: 992px) {
  .ijsss .pkp_head_wrapper.ijsss-masthead__inner { padding-bottom: 0; }
}
@media (max-width: 991px) {
  .ijsss .pkp_structure_head.ijsss-masthead { position: relative; z-index: 1001; }
  .ijsss .pkp_head_wrapper.ijsss-masthead__inner { position: static; }
  .ijsss .pkp_site_nav_menu.ijsss-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    width: 100%; margin: 0; z-index: 1002;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  }
  .ijsss .pkp_navigation_search_wrapper.ijsss-nav__search {
    position: static; float: none; width: auto; margin: 0;
  }
}

/* Shared footer matches the approved mockup, including its compact bottom row. */
.ijsss .ijsss-footer__inner { width: 100%; }
.ijsss .ijsss-footer a { text-decoration: none; }
.ijsss .ijsss-footer__logo { margin-bottom: var(--ijsss-s-4); }
.ijsss .ijsss-footer__tagline,
.ijsss .ijsss-footer__small { margin-bottom: var(--ijsss-s-4); }
.ijsss .ijsss-footer__links {
  font-size: var(--ijsss-fs-sm); line-height: var(--ijsss-lh-base);
}
.ijsss .ijsss-footer__publisher .ijsss-footer__logo-img {
  height: 48px; width: auto;
}
.ijsss .ijsss-footer__publisher .ijsss-footer__logo-img--publisher { width: 112px; }
.ijsss .ijsss-footer__publisher {
  display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;
}
.ijsss .ijsss-footer__publisher > * { flex: 0 0 auto; }
.ijsss .ijsss-footer__evolution-logo {
  display: block; height: 64px; width: auto; object-fit: contain;
}
.ijsss .ijsss-footer__bottom-links { gap: .25em; align-items: baseline; }

/* OJS Static Pages: scoped mockup design. */
.ijsss .ijsss-static-page {

  
  --navy:            #003265;   
  --orange:          #F16A10;   

  
  --navy-900:        #001B37;
  --navy-800:        #00254B;
  --navy-700:        #003265;   
  --navy-600:        #2D5680;
  --navy-500:        #59799A;
  --navy-100:        #E5EAEF;
  --navy-050:        #F2F4F7;

  
  --orange-500:      #F16A10;   
  --orange-600:      #D85F0E;   
  --orange-700:      #B44F0C;   
  --orange-800:      #903F09;   
  --orange-050:      #FEF3EB;   

  
  --ink:             #1A1D21;   
  --ink-soft:        #4A5057;   
  --ink-faint:       #6E757C;   
  --rule:            #D8DDE3;   
  --rule-soft:       #EAEEF2;
  --bg:              #FFFFFF;
  --bg-soft:         #F7F9FB;

  
  --ok:              #1E6B41;
  --warn-bg:         #FEF3EB;
  --warn-border:     var(--orange-500);

  
  
  --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-body);

  --fs-xs:    13px;   
  --fs-sm:    14px;    
  --fs-base:  16px;        
  --fs-md:    18px;    
  --fs-lg:    22px;    
  --fs-xl:    28px;     
  --fs-2xl:   36px;     

  --lh-tight: 1.25;
  --lh-base:  1.65;

  
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;     --s-7: 48px;     --s-8: 64px;

  
  --container: 1180px;
  --radius:    3px;         
  --shadow:    0 1px 3px rgba(0,32,80,.10);
font-size:16px;line-height:1.65;color:var(--ink);}
.ijsss .ijsss-static-page h1, .ijsss .ijsss-static-page h2, .ijsss .ijsss-static-page h3, .ijsss .ijsss-static-page h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  font-weight: 700;
}
.ijsss .ijsss-static-page h1 { font-size: var(--fs-2xl); }
.ijsss .ijsss-static-page h2 { font-size: var(--fs-xl); }
.ijsss .ijsss-static-page h3 { font-size: var(--fs-lg); }
.ijsss .ijsss-static-page h4 { font-size: var(--fs-md); }
.ijsss .ijsss-static-page p { margin: 0 0 var(--s-4); }
.ijsss .ijsss-static-page ul, .ijsss .ijsss-static-page ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.ijsss .ijsss-static-page li { margin-bottom: var(--s-2); }
.ijsss .ijsss-static-page a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.ijsss .ijsss-static-page a:hover { color: var(--orange); }
.ijsss .ijsss-static-page .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.ijsss .ijsss-static-page .layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--s-7);
  padding: var(--s-7) 0 var(--s-8);
}
.ijsss .ijsss-static-page .layout { grid-template-columns: 1fr; gap: var(--s-6); }
.ijsss .ijsss-static-page .btn {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}
.ijsss .ijsss-static-page .btn--primary { background: var(--orange); color: #fff; }
.ijsss .ijsss-static-page .btn--primary:hover { background: var(--orange-600); color: #fff; }
.ijsss .ijsss-static-page .btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.ijsss .ijsss-static-page .btn--ghost:hover { background: var(--navy); color: #fff; }
.ijsss .ijsss-static-page .btn--primary { transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.ijsss .ijsss-static-page .btn--primary:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transform: translateY(-1px); }
.ijsss .ijsss-static-page .btn--primary:active { transform: translateY(0); }
.ijsss .ijsss-static-page .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.ijsss .ijsss-static-page .pagehead { background: var(--navy-050); border-bottom: 1px solid var(--rule); }
.ijsss .ijsss-static-page .pagehead__inner { max-width: var(--container); margin: 0 auto; padding: var(--s-6) var(--s-5); }
.ijsss .ijsss-static-page .pagehead h1 { margin: 0; }
.ijsss .ijsss-static-page .breadcrumb { font-size: var(--fs-xs); color: var(--ink-faint); margin: 0 0 var(--s-2); }
.ijsss .ijsss-static-page .breadcrumb a { color: var(--ink-soft); }
.ijsss .ijsss-static-page .cards { display: grid; gap: var(--s-5); }
.ijsss .ijsss-static-page .cards--3 { grid-template-columns: repeat(3, 1fr); }
.ijsss .ijsss-static-page .card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--s-5);
  background: var(--bg);
}
.ijsss .ijsss-static-page .card h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.ijsss .ijsss-static-page .card p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--s-3); }
.ijsss .ijsss-static-page .card a { font-size: var(--fs-sm); font-weight: 700; color: var(--orange); }
.ijsss .ijsss-static-page .prose { max-width: 74ch; }

/* Conference Book of Abstracts card grid. Built from the theme option
   IjsssThemePlugin::conferenceAbstracts() parses, rendered in content.tpl.
   Two columns: this page keeps the normal sidebar, so the content column
   is narrower than the full 1180px container - three columns made the
   longer conference titles cramped. */
.ijsss .ijsss-static-page .ijsss-conf-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.ijsss .ijsss-static-page .ijsss-conf-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--s-5);
  background: var(--bg);
}
/* Year filter chips, built by the inline script in content.tpl. */
.ijsss .ijsss-static-page .ijsss-conf-filter {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-5) 0 0;
}
.ijsss .ijsss-static-page .ijsss-conf-filter[hidden] { display: none; }
.ijsss .ijsss-static-page .ijsss-conf-filter button {
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  background: var(--bg); color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .35rem .9rem; line-height: 1.4;
}
.ijsss .ijsss-static-page .ijsss-conf-filter button:hover { border-color: var(--navy); color: var(--navy); }
.ijsss .ijsss-static-page .ijsss-conf-filter button[aria-pressed="true"] {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
/* The card is display:flex, which beats the UA's [hidden] rule - so the
   filter's hidden cards would stay visible without this. */
.ijsss .ijsss-static-page .ijsss-conf-card[hidden] { display: none; }
.ijsss .ijsss-static-page .ijsss-conf-card .badge {
  align-self: flex-start;
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  padding: .2rem .55rem;
  border-radius: var(--radius);
}
.ijsss .ijsss-static-page .ijsss-conf-card h3 {
  font-size: var(--fs-md);
  color: var(--navy);
  margin: var(--s-2) 0 0;
  line-height: 1.35;
}
.ijsss .ijsss-static-page .ijsss-conf-card h3 .acr {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}
.ijsss .ijsss-static-page .ijsss-conf-card .loc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: 0;
}
.ijsss .ijsss-static-page .ijsss-conf-card .isbn {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin: 0 0 var(--s-2);
}
.ijsss .ijsss-static-page .ijsss-conf-card .row {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
@media (max-width: 700px) {
  .ijsss .ijsss-static-page .ijsss-conf-cards { grid-template-columns: minmax(0, 1fr); }
}
.ijsss .ijsss-static-page .prose h2 { margin-top: var(--s-6); }
.ijsss .ijsss-static-page .prose h3 { margin-top: var(--s-5); }
.ijsss .ijsss-static-page .prose > :first-child { margin-top: 0; }
.ijsss .ijsss-static-page .prose .lede { font-size: var(--fs-md); color: var(--ink-soft); }
.ijsss .ijsss-static-page .definition { margin: 0 0 var(--s-5); }
.ijsss .ijsss-static-page .definition dt { font-weight: 700; color: var(--navy); }
.ijsss .ijsss-static-page .definition dd { margin: 0 0 var(--s-3); color: var(--ink-soft); }
.ijsss .ijsss-static-page .table-wrap { overflow-x: auto; margin-bottom: var(--s-5); }
.ijsss .ijsss-static-page table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.ijsss .ijsss-static-page th, .ijsss .ijsss-static-page td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.ijsss .ijsss-static-page thead th { background: var(--navy-050); color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--navy-100); }
.ijsss .ijsss-static-page .sidebar > * + * { margin-top: var(--s-5); }
.ijsss .ijsss-static-page .widget { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ijsss .ijsss-static-page .widget__head {
  background: var(--navy); color: #fff;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.ijsss .ijsss-static-page .widget__body { padding: var(--s-4); font-size: var(--fs-sm); }
.ijsss .ijsss-static-page .widget__body ul { list-style: none; padding: 0; margin: 0; }
.ijsss .ijsss-static-page .widget__body li { border-bottom: 1px solid var(--rule-soft); margin: 0; }
.ijsss .ijsss-static-page .widget__body li:last-child { border-bottom: 0; }
.ijsss .ijsss-static-page .widget__body li a { display: block; padding: var(--s-2) 0; text-decoration: none; }
.ijsss .ijsss-static-page .widget__body li a:hover { text-decoration: underline; }
.ijsss .ijsss-static-page .tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.ijsss .ijsss-static-page .tag-list li { margin: 0; }
.ijsss .ijsss-static-page .tag {
  display: inline-block; padding: var(--s-1) var(--s-3);
  background: var(--navy-050); border: 1px solid var(--navy-100);
  border-radius: var(--radius); font-size: var(--fs-xs); color: var(--navy-800);
}
.ijsss .ijsss-static-page .placeholder {
  border: 1px dashed var(--rule);
  background: var(--bg-soft);
  padding: var(--s-6);
  text-align: center;
  color: var(--ink-faint);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.ijsss .ijsss-static-page .layout { grid-template-columns:minmax(0,1fr) 300px; }
.ijsss .ijsss-static-page .prose { min-width:0; }
.ijsss .pkp_structure_content:has(.ijsss-static-page) { max-width:none; padding:0; display:block; }
.ijsss .pkp_structure_main:has(.ijsss-static-page) { margin-top:0; }
.ijsss .ijsss-static-page .widget__body ul { padding:0; }
.ijsss .ijsss-static-page .widget__body li { margin:0; }
@media(max-width:900px) { .ijsss .ijsss-static-page .layout { grid-template-columns:1fr; gap:32px; } }
@media(max-width:700px) { .ijsss .ijsss-static-page .cards--3 { grid-template-columns:1fr; } }

/* Editorial cards read OJS masthead users and their uploaded profile images. */
.ijsss .ijsss-board-page .layout { grid-template-columns: minmax(0,1fr); }
.ijsss .ijsss-board-page .prose { max-width: none; }
.ijsss .ijsss-people { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:32px; }
.ijsss .ijsss-person { padding:24px; border:1px solid var(--ijsss-rule); border-top:3px solid var(--ijsss-orange); border-radius:3px; }
.ijsss .ijsss-person__photo { width:80px; height:80px; border-radius:50%; overflow:hidden; background:var(--ijsss-navy-050); color:var(--ijsss-navy); display:grid; place-items:center; font-size:24px; font-weight:700; margin-bottom:16px; }
.ijsss .ijsss-person__photo img { width:100%; height:100%; object-fit:cover; }
.ijsss .ijsss-person p { font-size:14px; overflow-wrap:anywhere; }
.ijsss .ijsss-person .ijsss-person__role { color:var(--ijsss-orange-700); font-weight:700; }
@media(max-width:900px) { .ijsss .ijsss-people { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .ijsss .ijsss-people { grid-template-columns:minmax(0,1fr); } }

/* Shared title band for native OJS public pages. Keep headings and breadcrumb
   links in their original templates; only their surrounding layout changes. */
.ijsss .pkp_structure_content:has(.ijsss-pagehead) { padding-top: 0; }
.ijsss .pkp_structure_main:has(.ijsss-pagehead) { margin-top: 0; }
.ijsss .ijsss-pagehead {
  position: relative;
  isolation: isolate;
  padding: 32px 0;
  margin: 0 0 32px;
}
.ijsss .ijsss-pagehead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--ijsss-navy-050);
  border-bottom: 1px solid var(--ijsss-rule);
}
.ijsss .ijsss-pagehead .cmp_breadcrumbs {
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.65;
}
.ijsss .ijsss-pagehead .cmp_breadcrumbs ol { padding: 0; margin: 0; }
.ijsss .ijsss-pagehead .cmp_breadcrumbs li { margin-bottom: 0; }
.ijsss .ijsss-pagehead h1 {
  font-size: 36px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: initial;
}
.ijsss .ijsss-pagehead .subtitle { margin: 12px 0 0; }
.ijsss .pkp_structure_content:has(.ijsss-pagehead) .pkp_structure_sidebar { margin-top: 32px; }
@media (max-width: 600px) {
  .ijsss .ijsss-pagehead h1,
  .ijsss .ijsss-static-page .pagehead h1 { font-size: 28px; overflow-wrap: anywhere; }
}

/* Editorial board follows the mockup's narrow content column and quiet cards. */
.ijsss .ijsss-board-page .layout { grid-template-columns:minmax(0,1fr) 300px; }
.ijsss .ijsss-board-page .ijsss-person { padding:16px; border-top:1px solid var(--ijsss-rule); }
.ijsss .ijsss-board-page .ijsss-person__photo { width:72px; height:72px; font-size:20px; background:var(--ijsss-navy-100); margin-bottom:12px; }
.ijsss .ijsss-board-page .ijsss-person h3 { font-size:16px; line-height:1.65; margin:0 0 4px; }
.ijsss .ijsss-board-page .ijsss-person p { color:var(--ijsss-ink-soft); margin:0 0 8px; }
.ijsss .ijsss-board-page .ijsss-person .ijsss-person__role { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ijsss-orange); }
.ijsss .ijsss-board-page .ijsss-person p:last-child { font-size:13px; }
@media(max-width:900px) { .ijsss .ijsss-board-page .layout { grid-template-columns:minmax(0,1fr); } }

/* ---------------------------------------------------------------------
   Native About page  (templates/frontend/pages/about.tpl)
   Content is edited in OJS > Settings > Journal > Masthead > About.
   It renders outside .ijsss-static-page, so the unprefixed --fs-* / --s-*
   custom properties scoped to that wrapper are NOT in scope here. Use the
   global --ijsss-* tokens from tokens.css only.
   Content source of truth: static-pages/content-native/about-native.html
   --------------------------------------------------------------------- */
.ijsss .page_about .prose { max-width: 74ch; }
.ijsss .page_about .prose > :first-child { margin-top: 0; }
.ijsss .page_about .prose h2 { font-size: var(--ijsss-fs-xl); color: var(--ijsss-navy); margin: var(--ijsss-s-6) 0 var(--ijsss-s-3); }
.ijsss .page_about .prose .lede { font-size: var(--ijsss-fs-md); color: var(--ijsss-ink-soft); }
.ijsss .page_about .prose p { margin: 0 0 var(--ijsss-s-4); }
.ijsss .page_about .prose ul { margin: 0 0 var(--ijsss-s-4); padding-left: var(--ijsss-s-5); }
.ijsss .page_about .prose li { margin: 0 0 var(--ijsss-s-2); }
.ijsss .page_about .table-wrap { overflow-x: auto; margin-bottom: var(--ijsss-s-5); }
.ijsss .page_about table { border-collapse: collapse; width: 100%; font-size: var(--ijsss-fs-sm); }
.ijsss .page_about th, .ijsss .page_about td { text-align: left; padding: var(--ijsss-s-3); border-bottom: 1px solid var(--ijsss-rule); vertical-align: top; }
.ijsss .page_about thead th { background: var(--ijsss-navy-050); color: var(--ijsss-navy); font-weight: 700; border-bottom: 2px solid var(--ijsss-navy-100); }
.ijsss .page_about .muted { color: var(--ijsss-ink-faint); }

/* ---------------------------------------------------------------------
   Homepage editorial blocks  (.additional_content in indexJournal.tpl)
   Content is edited in OJS > Settings > Website > Appearance >
   Additional content. Same token rule as above: global --ijsss-* only.
   Content source of truth: static-pages/content-native/home-extra.html
   --------------------------------------------------------------------- */
.ijsss .page_index_journal .additional_content { margin-bottom: var(--ijsss-s-7); }
.ijsss .ijsss-home h2 {
  font-size: var(--ijsss-fs-xl);
  color: var(--ijsss-navy);
  border-bottom: 2px solid var(--ijsss-orange);
  padding-bottom: var(--ijsss-s-2);
  margin: var(--ijsss-s-7) 0 var(--ijsss-s-4);
  width: fit-content;
  max-width: 100%;
}
.ijsss .ijsss-home > :first-child { margin-top: 0; }
.ijsss .ijsss-home p { margin: 0 0 var(--ijsss-s-4); max-width: 74ch; }
.ijsss .ijsss-home .lede { font-size: var(--ijsss-fs-md); color: var(--ijsss-ink-soft); }
.ijsss .ijsss-home ul { margin: 0 0 var(--ijsss-s-4); padding-left: var(--ijsss-s-5); }
.ijsss .ijsss-home li { margin: 0 0 var(--ijsss-s-2); }
.ijsss .ijsss-home .cards { display: grid; gap: var(--ijsss-s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--ijsss-s-4); }
.ijsss .ijsss-home .card {
  border: 1px solid var(--ijsss-rule);
  border-top: 3px solid var(--ijsss-orange);
  border-radius: var(--ijsss-radius);
  padding: var(--ijsss-s-5);
  background: var(--ijsss-bg);
}
.ijsss .ijsss-home .card h3 { font-size: var(--ijsss-fs-md); color: var(--ijsss-navy); margin: 0 0 var(--ijsss-s-2); }
.ijsss .ijsss-home .card p { font-size: var(--ijsss-fs-sm); color: var(--ijsss-ink-soft); margin: 0 0 var(--ijsss-s-3); }
.ijsss .ijsss-home .card a { font-size: var(--ijsss-fs-sm); font-weight: 700; color: var(--ijsss-orange); text-decoration: none; }
.ijsss .ijsss-home .card a:hover { text-decoration: underline; }
.ijsss .ijsss-home .more { font-weight: 700; }
@media (max-width: 700px) {
  .ijsss .ijsss-home .cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Split hero — text left, portrait right (indexJournal.tpl)
   The image is decorative; the hero's meaning is carried by the heading
   and lede, so it is aria-hidden and carries an empty alt.
   The taller padding is deliberate: at a laptop fold the old hero ended
   just above the viewport bottom and showed a thin white strip.
   --------------------------------------------------------------------- */
/* Fill the first screen exactly: viewport minus the masthead and nav that
   sit above it. --ijsss-chrome is their combined height, measured from a
   headless render (masthead 129px + nav 56px desktop). It is a variable, not
   a literal, because the masthead shrinks at 991px. svh, not vh, so mobile
   browser toolbars do not push the fold off-screen. */
.ijsss .ijsss-hero--split {
  --ijsss-chrome: 185px;
  /* Capped at 900px: a normal 1080p screen still gets an exact full-screen hero (1080 - 185 = 895), but an unusually tall window cannot balloon it. */
  min-height: min(calc(100svh - var(--ijsss-chrome)), 900px);
  display: flex;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 52px;
}
.ijsss .ijsss-hero--split > .ijsss-hero__inner { width: 100%; }
.ijsss .ijsss-hero--split .ijsss-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--ijsss-s-7);
  align-items: center;
}
.ijsss .ijsss-hero--split .ijsss-hero__text { min-width: 0; }
.ijsss .ijsss-hero--split .ijsss-btn-row { margin-bottom: 0; }
.ijsss .ijsss-hero__media {
  min-width: 0;
  justify-self: end;
  width: 100%;
  max-width: max-content;
  /* The "white border" is a mat, not a CSS border: a white pad around the
     photo plus a soft drop shadow, so it reads as a print frame on navy. */
  background: #fff;
  padding: 6px;
  border-radius: var(--ijsss-radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
}
.ijsss .ijsss-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* This is a journal cover, not a photograph: never crop it. The height
     cap keeps the whole hero inside one laptop screen (masthead and nav
     take roughly 250px), and width follows from the natural ratio. */
  width: auto;
  max-width: 100%;
  /* Never taller than the band the hero is allowed to occupy, minus the
     hero padding, or the "fits one screen" guarantee breaks. */
  max-height: min(calc(100svh - var(--ijsss-chrome) - 120px), 430px);
  margin-inline: auto;
  border-radius: 2px;
}
@media (max-width: 991px) {
  .ijsss .ijsss-hero--split { --ijsss-chrome: 150px; }
}
@media (max-width: 900px) {
  /* Stacked layout: a forced full-screen hero just pushes the content away. */
  .ijsss .ijsss-hero--split { min-height: 0; display: block; }
  .ijsss .ijsss-hero--split .ijsss-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ijsss-s-6);
  }
  .ijsss .ijsss-hero__media { justify-self: start; max-width: 260px; }
  .ijsss .ijsss-hero__media img { max-height: none; }
}
@media (max-width: 700px) {
  .ijsss .ijsss-hero--split { padding-top: var(--ijsss-s-7); padding-bottom: var(--ijsss-s-7); }
  .ijsss .ijsss-hero__media { max-width: 100%; }
}
/* Print: the mat and shadow are screen decoration only. */
@media print {
  .ijsss .ijsss-hero__media { display: none; }
}

/* Welcome block: intro text left, the journal mark right. The mark is capped
   at its native 200px and the row is centre-aligned, so it sits inside the
   height the two paragraphs already occupy and never grows the section. */
.ijsss .ijsss-home .welcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 50 / 50 */
  gap: var(--ijsss-s-7);
  align-items: center;
}
.ijsss .ijsss-home .welcome__text { min-width: 0; }
.ijsss .ijsss-home .welcome__text > :last-child { margin-bottom: 0; }
.ijsss .ijsss-home .welcome__mark { margin: 0; justify-self: center; width: 100%; max-width: 371px; }
.ijsss .ijsss-home .welcome__mark img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 371px;   /* native size — never upscale, the source is only 371px wide */
  margin-inline: auto;
}
@media (max-width: 700px) {
  .ijsss .ijsss-home .welcome { grid-template-columns: minmax(0, 1fr); gap: var(--ijsss-s-5); }
  .ijsss .ijsss-home .welcome__mark { justify-self: start; max-width: 240px; }
}

/* =====================================================================
   LOGIN AND REGISTER - split panel
   templates/frontend/pages/userLogin.tpl, userRegister.tpl

   Only the wrapper is ours. Everything inside .cmp_form is stock OJS
   markup, so the rules below style it by its own class names rather
   than by any structure we introduced - that way CSRF fields, the
   error block, reCAPTCHA and altcha all keep working untouched.

   The panel wording comes from the theme locale file, not the markup.
   ===================================================================== */

/* Full-bleed out of the centred content column, same trick as the hero.
   The page head band is deliberately gone on these two pages: the panel
   states where you are, so a breadcrumb strip on top of it is noise. */
/* Deliberately NOT full-bleed. The parent theme caps the content column at
   its own width (1160px at desktop, narrower at each breakpoint), which
   wins over the theme token - so any hand-computed side padding here would
   line up at one viewport and drift at the next. Instead the block lives in
   the normal column, inheriting the exact edges the nav and masthead use,
   and only the COLOUR is bled outwards with a pseudo-element. */
.ijsss .ijsss-auth { position: relative; }
.ijsss.pkp_page_login .pkp_structure_content,
.ijsss.pkp_page_user .pkp_structure_content { padding-top: 0; }
/* The parent also puts a top margin on the main column and the content
   column is width-capped; both leave a white strip above the panel. */
/* The parent pads the main column by 6.43rem at the bottom, which left a
   tall white band under the split panel. Both ends are zeroed here. */
.ijsss .pkp_structure_main:has(.ijsss-auth) { margin-top: 0; padding: 0; }
.ijsss .pkp_structure_content:has(.ijsss-auth) { padding-top: 0; padding-bottom: 0; }
.ijsss .ijsss-auth { margin-top: 0; }
/* The footer normally floats 4rem clear of the page content. Against a
   full-bleed panel that reads as a white strip, so the navy meets the
   footer directly on these two pages. */
.ijsss.pkp_page_login .pkp_structure_footer_wrapper.ijsss-footer,
.ijsss.pkp_op_register .pkp_structure_footer_wrapper.ijsss-footer { margin-top: 0; }

/* The two colour fields run edge to edge, but the TEXT inside them must
   line up with every other page, which is capped at --ijsss-container and
   centred. So each outer edge gets the same gutter the container would
   have: half the leftover viewport, never less than the normal gutter. */
.ijsss .ijsss-auth__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 62svh;
}

/* --- the navy half ------------------------------------------------- */
.ijsss .ijsss-auth__brand {
  position: relative;
  background: var(--ijsss-navy);
  color: #fff;
  padding: var(--ijsss-s-8) var(--ijsss-s-7) var(--ijsss-s-8) 0;
}
/* The navy runs to the left edge of the window; the text does not. */
.ijsss .ijsss-auth__brand::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 100%;
  width: 100vw;
  background: var(--ijsss-navy);
}
/* Registration is a long form, so the panel copy sits at the top of the
   navy column rather than being stranded halfway down it. The panel
   itself still stretches, so the navy reaches the footer.
   Not position:sticky - that needs align-self:start, which would shrink
   the panel to its content and leave white below it. */
.ijsss .ijsss-auth__brand > * { max-width: 46ch; }
.ijsss .ijsss-auth__brand { display: grid; align-content: start; }
.ijsss .ijsss-auth__brand h2 {
  color: #fff;
  font-size: var(--ijsss-fs-xl);
  line-height: var(--ijsss-lh-tight);
  max-width: 20ch;
  margin: 0 0 var(--ijsss-s-4);
}
.ijsss .ijsss-auth__rule {
  width: 72px; height: 4px;
  background: var(--ijsss-orange);
  margin: 0 0 var(--ijsss-s-5);
}
.ijsss .ijsss-auth__brand p {
  color: #D6DEE8;
  font-size: var(--ijsss-fs-sm);
  max-width: 46ch;
  margin: 0 0 var(--ijsss-s-5);
}
.ijsss .ijsss-auth__brand ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: var(--ijsss-s-3);
  font-size: var(--ijsss-fs-sm);
  color: #D6DEE8;
}
.ijsss .ijsss-auth__brand li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0;
}
.ijsss .ijsss-auth__brand li::before {
  content: "";
  position: absolute; left: 0; top: .62rem;
  width: 8px; height: 8px;
  background: var(--ijsss-orange);
}

/* --- the form half ------------------------------------------------- */
/* Both columns start at the same top padding so the panel heading and the
   form heading sit on one line. Centring either one breaks that. */
.ijsss .ijsss-auth__form {
  background: var(--ijsss-bg);
  padding: var(--ijsss-s-8) 0 var(--ijsss-s-8) var(--ijsss-s-7);
}
.ijsss .ijsss-auth__inner { width: 100%; max-width: 420px; margin: 0; }
.ijsss .ijsss-auth__inner--wide { max-width: 560px; }
.ijsss .ijsss-auth__inner > h1 {
  font-size: var(--ijsss-fs-lg);
  color: var(--ijsss-navy);
  margin: 0 0 var(--ijsss-s-2);
}
/* The "* denotes a required field" line OJS prints above the form. */
.ijsss .ijsss-auth__inner > p {
  font-size: var(--ijsss-fs-xs);
  color: var(--ijsss-ink-faint);
  margin: 0 0 var(--ijsss-s-5);
}

/* --- stock OJS form, restyled in place ----------------------------- */
.ijsss .ijsss-auth .cmp_form fieldset { border: 0; margin: 0; padding: 0; }
/* The parent reserves 2.14rem of padding under every field row purely to
   hold an absolutely-positioned inline error message. That is far more
   air than the approved mockup. The row is tightened to the mockup
   spacing and the error is put back in normal flow, so it still appears
   under its own field and pushes the next one down only when present. */
.ijsss .ijsss-auth .cmp_form .fields > div {
  margin-bottom: 0;
  padding-bottom: var(--ijsss-s-4);
}
.ijsss .ijsss-auth .cmp_form .fields > div .error {
  position: static;
  display: block;
  margin-top: var(--ijsss-s-1);
  padding: var(--ijsss-s-1) var(--ijsss-s-2);
  border-radius: var(--ijsss-radius);
  font-size: var(--ijsss-fs-xs);
}
.ijsss .ijsss-auth .cmp_form fieldset { margin-bottom: 0; }
.ijsss .ijsss-auth .cmp_form legend:not(.pkp_screen_reader) {
  font-size: var(--ijsss-fs-sm); font-weight: 700; color: var(--ijsss-navy);
  text-transform: uppercase; letter-spacing: .04em;
  margin: var(--ijsss-s-4) 0 var(--ijsss-s-3); padding-top: var(--ijsss-s-4);
  border-top: 1px solid var(--ijsss-rule-soft); width: 100%;
}
.ijsss .ijsss-auth .cmp_form fieldset:first-of-type legend:not(.pkp_screen_reader) {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.ijsss .ijsss-auth .cmp_form .label,
.ijsss .ijsss-auth .cmp_form label > span.label {
  display: block;
  font-size: var(--ijsss-fs-sm);
  font-weight: 700;
  color: var(--ijsss-navy);
  margin-bottom: var(--ijsss-s-1);
}
.ijsss .ijsss-auth .cmp_form .required { color: var(--ijsss-orange-700); }
.ijsss .ijsss-auth .cmp_form input[type="text"],
.ijsss .ijsss-auth .cmp_form input[type="email"],
.ijsss .ijsss-auth .cmp_form input[type="password"],
.ijsss .ijsss-auth .cmp_form select,
.ijsss .ijsss-auth .cmp_form textarea {
  width: 100%;
  /* The parent caps every field at 20em and pins both height and
     line-height to 2.143rem. With our own padding that clips the text
     inside a select. Let the control size itself. */
  max-width: none;
  height: auto;
  line-height: var(--ijsss-lh-base);
  font: inherit;
  font-size: var(--ijsss-fs-sm);
  padding: .6rem .7rem;
  border: 1px solid var(--ijsss-rule);
  border-radius: var(--ijsss-radius);
  background: #fff;
  color: var(--ijsss-ink);
}
.ijsss .ijsss-auth .cmp_form input:focus,
.ijsss .ijsss-auth .cmp_form select:focus,
.ijsss .ijsss-auth .cmp_form textarea:focus {
  outline: 2px solid var(--ijsss-navy-600);
  outline-offset: 1px;
  border-color: var(--ijsss-navy-600);
}
/* Checkbox rows: the input must not stretch to full width. */
.ijsss .ijsss-auth .cmp_form input[type="checkbox"],
.ijsss .ijsss-auth .cmp_form input[type="radio"] {
  width: auto;
  margin-right: var(--ijsss-s-2);
}
.ijsss .ijsss-auth .cmp_form .checkbox label,
.ijsss .ijsss-auth .cmp_form .optin label {
  font-size: var(--ijsss-fs-sm);
  font-weight: 400;
  color: var(--ijsss-ink-soft);
  line-height: var(--ijsss-lh-base);
}
.ijsss .ijsss-auth .cmp_form .checkbox .label,
.ijsss .ijsss-auth .cmp_form .optin .label {
  display: inline;
  font-weight: 400;
  color: var(--ijsss-ink-soft);
}
/* The forgot-password link sits inside the password label. */
.ijsss .ijsss-auth .cmp_form .password a {
  display: inline-block;
  margin-top: var(--ijsss-s-2);
  font-size: var(--ijsss-fs-xs);
  font-weight: 700;
  color: var(--ijsss-orange-700);
}
/* Mockup: one full-width primary button, with the alternate route
   ("no account yet?" / "already registered?") centred beneath it. */
.ijsss .ijsss-auth .cmp_form .buttons {
  display: grid;
  justify-items: center;
  gap: var(--ijsss-s-4);
  margin-top: var(--ijsss-s-3);
  padding-top: var(--ijsss-s-5);
  border-top: 1px solid var(--ijsss-rule-soft);
}
.ijsss .ijsss-auth .cmp_form .buttons button[type="submit"],
.ijsss .ijsss-auth .cmp_form .buttons .submit {
  font: inherit;
  font-size: var(--ijsss-fs-sm);
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  padding: .7rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--ijsss-radius);
  background: var(--ijsss-orange);
  color: #fff;
}
.ijsss .ijsss-auth .cmp_form .buttons button[type="submit"]:hover { background: var(--ijsss-orange-600); }
.ijsss .ijsss-auth .cmp_form .buttons a {
  font-size: var(--ijsss-fs-sm);
  font-weight: 700;
  color: var(--ijsss-orange-700);
  margin-left: 0;   /* parent adds 1em, which breaks the centring */
}
.ijsss .ijsss-auth .pkp_form_error,
.ijsss .ijsss-auth .pkp_form_error_list {
  background: var(--ijsss-warn-bg);
  border: 1px solid var(--ijsss-orange);
  border-left-width: 3px;
  border-radius: var(--ijsss-radius);
  padding: var(--ijsss-s-3) var(--ijsss-s-4);
  margin: 0 0 var(--ijsss-s-4);
  font-size: var(--ijsss-fs-sm);
  color: var(--ijsss-ink);
}

@media (max-width: 900px) {
  /* Stacked: the panel becomes a short intro above the form, not a
     full screen the visitor has to scroll past to reach the fields. */
  .ijsss .ijsss-auth__wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ijsss .ijsss-auth__brand { padding: var(--ijsss-s-6) 0; }
  .ijsss .ijsss-auth__brand h2 { font-size: var(--ijsss-fs-lg); }
  .ijsss .ijsss-auth__form { padding: var(--ijsss-s-6) 0; }
  .ijsss .ijsss-auth__inner { max-width: none; }
}

/* --- Registration: two columns -------------------------------------
   OJS groups the fields into fieldsets (.identity, .login, .consent,
   .reviewer) and each row is a .fields > div. Only the two short-field
   fieldsets are paired up; consent and reviewer stay full width because
   their labels are sentences, not field names.
   Affiliation spans both columns - institution names are long. */
.ijsss .page_register .ijsss-auth__inner--wide { max-width: 640px; }

.ijsss .ijsss-auth.page_register .cmp_form fieldset.identity > .fields,
.ijsss .ijsss-auth.page_register .cmp_form fieldset.login > .fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ijsss-s-5);
}
/* Strict two columns - affiliation sits beside country rather than
   spanning the row. */
/* A stray checkbox or long-label row inside a paired fieldset must not be
   squeezed into half a line. */
.ijsss .ijsss-auth.page_register .cmp_form fieldset.identity > .fields > div:has(input[type="checkbox"]),
.ijsss .ijsss-auth.page_register .cmp_form fieldset.login > .fields > div:has(input[type="checkbox"]) {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .ijsss .ijsss-auth.page_register .cmp_form fieldset.identity > .fields,
  .ijsss .ijsss-auth.page_register .cmp_form fieldset.login > .fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* PORTRAIT GUARD. "Fill the first screen" only makes sense on a landscape
   screen. On a phone with Chrome's "Desktop site" switched on, the page is
   laid out 980px wide on a very tall viewport (roughly 980 x 2180), so the
   hero rule above produced a ~2000px navy block with the content lost in
   the middle - reported by the client on 2026-10-01 and reproduced exactly
   over the DevTools protocol. Any viewport taller than it is wide now
   sizes the hero to its content instead. Normal desktops are unaffected. */
@media (max-aspect-ratio: 4/5) {
  .ijsss .ijsss-hero--split { min-height: 0; }
}