/* =============================================================================
   IA Front — corrections and additions on top of the iamodern theme.

   Registered above the theme's own stylesheet (priority 2000 against its 1000),
   which is the only reason the rules below can win. Everything is either
   namespaced ia-* or scoped to markup this plugin created, except the four
   corrections in section 1 — those deliberately reach into theme and PKP core
   markup, and each says why.

     1  Corrections: hero wash, issue section headings, current-issue label, ISSN
     2  About: the current-issue cover beside the prose
     3  Readership: site-wide world map on the home page
     4  Motion
     5  Print
   ========================================================================== */

/* =============================================================================
   1. CORRECTIONS
   ========================================================================== */

/* --- the hero's white wash stopped at the text column --------------------
   The wash is a bottom-up scrim that makes the headline legible over the
   video. It was painted on .iam-hero-body, which is capped at the page frame
   and centred, so it ended in a hard vertical seam at both edges. The scrim
   keeps its exact height here — moving it to the full-height .iam-hero-veil
   would wash out the video — but is drawn by a full-bleed layer behind the
   text. .th-hero2 clips overflow, so the 100vw width costs no scrollbar. */
.th-hero2 .iam-hero-body { background-image: none; }
.th-hero2 .iam-hero-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: linear-gradient(to top,
              #ffffff 0%, rgba(255, 255, 255, 0.82) 55%, transparent 100%);
  pointer-events: none;
}

/* --- issue table of contents: the rule cut through the section name -------
   PKP core draws a 1px rule as .section::before at a fixed top:45px and knocks
   a hole in it by giving the heading a white background. iamodern set that
   background to transparent and enlarged the type, so the rule ran straight
   through the glyphs. Painting the page colour back over the line would break
   on any tinted section and silently rot when a token changes; instead the
   rule is retired and redrawn from the heading itself, so it can never cross
   the text whatever the type size. */
.obj_issue_toc .galleys::before,
.obj_issue_toc .section::before { display: none; }

.obj_issue_toc .sections .section > h2,
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 1rem);
  left: 0;
  padding: 0;
  margin: 0 0 var(--sp-5, 1.25rem);
  color: var(--ia-journal-text, var(--th-accent, #08457E)) !important;
  font-size: var(--fs-h3, 20px) !important;
  font-weight: 600;
}
.obj_issue_toc .sections .section > h2::after,
.obj_issue_toc .section > h2::after,
.obj_issue_toc .section > h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--th-hairline, rgba(8, 69, 126, 0.14));
}
/* core offsets the heading leftwards to sit over the retired rule */
body[dir="rtl"] .obj_issue_toc .section > h2 { right: 0; }

/* --- the current-issue label read as machine output -----------------------
   It is a title, not a timestamp: the mono caps treatment belongs to the dates
   and field labels it was grouped with, not to the name of an issue. */
.current_issue .current_issue_title,
.current_issue_title {
  font-family: var(--th-font-body) !important;
  font-size: var(--fs-lead, 18px) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-body, -0.006em) !important;
  text-transform: none !important;
  color: var(--th-ink-2, #3E4A57) !important;
}

/* --- PKP core paints bare links and buttons in its own blue --------------
   #006798 is hardcoded in the core stylesheet, which loads before the theme
   but wins for anything the theme does not name. On EJAR that blue passes for
   the brand navy; on an orange or a green venue it is a foreign colour. */
.pkp_structure_main a:not([class]):not(.th-btn),
.pkp_structure_main a.read_more,
.obj_announcement_summary .read_more,
.pkp_structure_main .cmp_button_wire {
  color: var(--ia-journal-text, #08457E) !important;
}
/* ...except on the inverted surfaces, where the ground already carries the
   brand colour and a link painted in it disappears into the band */
/* ...and article titles stay ink, with the venue colour kept for hover — a
   list of headlines all in the brand colour reads as a list of buttons */
.pkp_structure_main .obj_article_summary .title a:not([class]):not(.th-btn),
.pkp_structure_main .obj_issue_toc .title a:not([class]):not(.th-btn),
.pkp_structure_main .cmp_article_list .title a:not([class]):not(.th-btn) {
  color: var(--th-ink, #0a0f14) !important;
}
.pkp_structure_main .obj_article_summary .title a:not([class]):not(.th-btn):hover,
.pkp_structure_main .obj_issue_toc .title a:not([class]):not(.th-btn):hover,
.pkp_structure_main .cmp_article_list .title a:not([class]):not(.th-btn):hover {
  color: var(--ia-journal-text, #08457E) !important;
}

/* the selectors above carry (0,3,1); these must out-rank them, hence the
   repeated :not() clauses rather than a shorter but weaker selector */
.pkp_structure_main .iam-article-masthead a:not([class]):not(.th-btn),
.pkp_structure_main .th-index-band a:not([class]):not(.th-btn),
.pkp_structure_page .th-footer a:not([class]):not(.th-btn) {
  color: rgba(255, 255, 255, .92) !important;
}
.pkp_structure_main .iam-article-masthead a:not([class]):not(.th-btn):hover,
.pkp_structure_main .th-index-band a:not([class]):not(.th-btn):hover {
  color: #fff !important;
}
.pkp_structure_main .cmp_button,
.pkp_structure_main .pkp_button,
.pkp_structure_main .pkp_button_primary,
.block_make_submission a {
  background-color: var(--th-dark, #08457E) !important;
  border-color: var(--th-dark, #08457E) !important;
  color: #fff !important;
}

/* --- section-heading underline was a fixed violet/blue gradient ------------
   It read as a third brand colour next to the venue's own. Rebuilt from the
   journal colour so each venue underlines in its own hue. */
.pkp_structure_main h2.th-h2::after,
.pkp_structure_page h2.th-h2::after {
  background: linear-gradient(90deg,
              var(--ia-journal, #08457E),
              color-mix(in srgb, var(--ia-journal, #08457E) 55%, #ffffff)) !important;
}

/* --- the header wrapped to two rows on every venue but EJAR ----------------
   The primary menu is a flex item, and the width flex handed it was narrower
   than its own links, so the list wrapped and the header grew by 40px. There
   is room for the nav at desktop widths — it only has to be allowed to keep
   its links on one line. Below ~1150px it wraps again, which is the intended
   degradation rather than an overflow. */
.cf-head-inner .cf-nav { flex: 0 1 auto; min-width: 0; }
.cf-head-inner .pkp_navigation_primary { flex-wrap: nowrap; }
.cf-head-inner .pkp_navigation_primary > li > a { white-space: nowrap; }

/* --- the footer ISSN links to its registry record ------------------------- */
.ia-issn-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.ia-issn-link:hover { text-decoration-color: currentColor; }
.ia-issn-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =============================================================================
   2. ABOUT: prose left, the journal's current-issue cover drifting right
   ========================================================================== */

.ia-abc-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--ia-measure, 44rem)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.ia-abc-prose { min-width: 0; }

.ia-abc {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  perspective: 1500px;
}
.ia-abc-card {
  --w: clamp(210px, 23vw, 320px);
  display: block; position: relative;
  width: var(--w);
  border-radius: 3px;
  text-decoration: none;
  transform-style: preserve-3d;
  /* two periods that do not divide evenly, so the drift never visibly loops */
  animation: ia-abc-drift 13s ease-in-out infinite,
             ia-abc-lift 9s ease-in-out infinite;
  will-change: transform;
}
.ia-abc-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 794 / 1123; object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 26px 50px -18px rgba(8, 26, 45, .55),
              0 8px 18px -8px rgba(8, 26, 45, .35);
  animation: ia-abc-shadow 9s ease-in-out infinite;
}
/* a specular sweep, as if the card catches a window */
.ia-abc-sheen {
  position: absolute; inset: 0; border-radius: 3px; overflow: hidden;
  pointer-events: none;
}
.ia-abc-sheen::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -40%; width: 32%;
  background: linear-gradient(100deg,
              rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(8deg);
  animation: ia-abc-sheen 13s ease-in-out infinite;
}

@keyframes ia-abc-drift {
  0%,  100% { transform: rotateY(-11deg) rotateX( 2.5deg) rotateZ(-1.4deg); }
  50%       { transform: rotateY(  4deg) rotateX(-2.0deg) rotateZ( 1.2deg); }
}
@keyframes ia-abc-lift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
@keyframes ia-abc-shadow {
  0%, 100% { box-shadow: 0 26px 50px -18px rgba(8,26,45,.55), 0 8px 18px -8px rgba(8,26,45,.35); }
  50%      { box-shadow: 0 44px 66px -20px rgba(8,26,45,.42), 0 14px 26px -10px rgba(8,26,45,.26); }
}
@keyframes ia-abc-sheen {
  0%, 62%  { left: -40%; }
  86%,100% { left: 108%; }
}

/* hover / keyboard focus: the card squares up to the reader and comes forward */
.ia-abc-card:hover,
.ia-abc-card:focus-visible {
  animation-play-state: paused;
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.045);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.ia-abc-card:hover img,
.ia-abc-card:focus-visible img { animation-play-state: paused; }
.ia-abc-card:focus-visible { outline: 2px solid var(--th-accent, #08457E); outline-offset: 6px; }

.ia-abc-note {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--th-ink-2, #444141) 65%, transparent);
}

@media (max-width: 900px) {
  .ia-abc-grid { grid-template-columns: minmax(0, 1fr); }
  .ia-abc { order: -1; }
  .ia-abc-card { --w: min(62vw, 260px); }
}

/* =============================================================================
   3. READERSHIP: where the whole site is read
   -----------------------------------------------------------------------------
   The inner parts reuse the theme's .iam-stat-row / .iam-map-* / .iam-country-*
   classes so this block and the one on an article page stay one design. What is
   restated here is only what differs on a home page — the two-column
   arrangement — plus the colour ramp, which the theme hard-codes to navy while
   every journal now has its own colour.
   ========================================================================== */

.ia-reach .ia-reach-wrap { display: grid; gap: clamp(20px, 3vw, 44px); }
@media (min-width: 1000px) {
  .ia-reach .ia-reach-wrap {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
  .ia-reach .iam-country-list { margin-top: 0; }
}

/* The journal's own colour, in five readable steps. The lowest steps used to
   start at 16%, which on white is almost nothing — most of the world sits in
   the bottom bucket, so the map read as blank. They now start high enough to
   be seen, and every reached country carries a hairline so its border reads
   even at the palest step. */
.ia-reach .iam-map-holder path.is-l0 { fill: color-mix(in srgb, var(--ia-journal, #08457E) 28%, #fff); }
.ia-reach .iam-map-holder path.is-l1 { fill: color-mix(in srgb, var(--ia-journal, #08457E) 45%, #fff); }
.ia-reach .iam-map-holder path.is-l2 { fill: color-mix(in srgb, var(--ia-journal, #08457E) 62%, #fff); }
.ia-reach .iam-map-holder path.is-l3 { fill: color-mix(in srgb, var(--ia-journal, #08457E) 82%, #fff); }
.ia-reach .iam-map-holder path.is-l4 { fill: var(--ia-journal, #08457E); }
.ia-reach .iam-map-holder path.is-active {
  stroke: color-mix(in srgb, var(--ia-journal, #08457E) 34%, #fff);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.ia-reach .iam-country-list i { background: var(--ia-journal, #08457E); }

/* countries appear in sequence, as if the map is being filled in */
.ia-motion .ia-reach.is-visible .iam-map-holder path.is-active {
  animation: ia-reach-in .5s ease-out both;
  animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes ia-reach-in { from { opacity: .15; } to { opacity: 1; } }
.ia-motion .ia-reach.is-visible .iam-country-list li {
  animation: ia-reach-row .45s ease-out both;
  animation-delay: calc(120ms + var(--i, 0) * 55ms);
}
@keyframes ia-reach-row {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ia-reach .iam-country-list i { transition: width .8s cubic-bezier(.22,.61,.36,1); }

.ia-reach-note {
  margin: var(--sp-5, 1.25rem) 0 0;
  font-size: var(--fs-caption, 12px);
  color: var(--th-smoke, rgba(10, 25, 41, 0.6));
}
.ia-reach.is-map-failed .iam-map-wrap { display: none; }

/* =============================================================================
   4. MOTION
   ========================================================================== */

/* the theme's reveal transition, applied to the rows this plugin annotates */
.ia-motion [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .ia-abc-card, .ia-abc-card img, .ia-abc-sheen::before { animation: none; }
  .ia-abc-card { transform: rotateY(-6deg); }
  .ia-motion .ia-reach .iam-map-holder path.is-active,
  .ia-motion .ia-reach .iam-country-list li { animation: none; }
  .ia-reach .iam-country-list i { transition: none; }
  .ia-motion [data-reveal] { transition-delay: 0s; }
}


/* =============================================================================
5. CALL FOR PAPERS
   These pages used to be styled by a per-journal stylesheet uploaded into OJS.
   That stylesheet also carried the previous design's violet theme,
so it was
   detached from every venue — which left the call-for-papers markup unstyled.
   The rules move here,
rebuilt on the venue's own colour tokens: decorative
   fills take the raw brand colour,
text takes the contrast-safe variant,
and
   the two alpha derivatives the old sheet baked in (7% and 28%) are mixed at
   render time instead.
   ========================================================================== */

.ia-cfp {
  --cfp: var(--ia-journal, #08457E);
  --cfp-text: var(--ia-journal-text, #08457E);
  --cfp-fill: var(--th-dark, #08457E);
  --cfp-soft: color-mix(in srgb, var(--ia-journal, #08457E) 7%, transparent);
  --cfp-line: color-mix(in srgb, var(--ia-journal, #08457E) 28%, transparent);
}

.ia-cfp h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--th-ink, #0f172a); }
.ia-cfp h2 {
  font-size: 1.25rem; margin: 2.4rem 0 .8rem; padding-left: .75rem;
  border-left: 4px solid var(--cfp); color: var(--th-ink, #0f172a);
}
.ia-cfp p { line-height: 1.65; }

.ia-cfp .ia-cfp-hero {
  background: var(--cfp-soft); border-top: 5px solid var(--cfp);
  padding: 1.6rem 1.5rem 1.4rem; margin-bottom: 1.5rem;
}
.ia-cfp .ia-cfp-kicker {
  font-size: .72rem; letter-spacing: .18em; font-weight: 700;
  color: var(--cfp-text); margin: 0 0 .5rem;
}
.ia-cfp .ia-cfp-journal { font-weight: 700; color: var(--cfp-text); margin: 0 0 .6rem; font-size: 1.02rem; }
.ia-cfp .ia-cfp-lead { margin: 0 0 1.1rem; max-width: 46rem; color: var(--th-ink-2, #334155); }

.ia-cfp .ia-cfp-actions { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
/* the filled button carries white text, so it takes the darkened token that is
guaranteed legible even on a pale venue colour */
.ia-cfp-btn {
  display: inline-block; background: var(--cfp-fill); color: #fff !important;
  font-weight: 600; padding: .7rem 1.2rem; border-radius: 3px;
  text-decoration: none !important;
}
.ia-cfp .ia-cfp-btn:hover { filter: brightness(1.12); }
.ia-cfp .ia-cfp-btn-ghost {
  background: #fff; color: var(--cfp-text) !important;
  box-shadow: inset 0 0 0 2px var(--cfp);
}

.ia-cfp ul,
.ia-cfp ol { padding-left: 0; }
.ia-cfp .ia-cfp-stats {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin: 0 0 .5rem; padding: 0 0 1.2rem; border-bottom: 1px solid var(--cfp-line);
}
.ia-cfp .ia-cfp-stat strong { display: block; font-size: 1.5rem; color: var(--cfp-text); line-height: 1.1; }
.ia-cfp .ia-cfp-stat span { font-size: .8rem; color: var(--th-smoke, #64748b); }

.ia-cfp .ia-cfp-facts {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .1rem 1.2rem;
}
.ia-cfp .ia-cfp-fact { padding: .55rem 0; border-bottom: 1px solid var(--th-hairline, #e2e8f0); }
.ia-cfp .ia-cfp-fact-k {
  display: block; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--th-smoke, #64748b); font-weight: 600;
}
.ia-cfp .ia-cfp-fact-v { font-weight: 600; color: var(--th-ink, #0f172a); }

.ia-cfp .ia-cfp-cards {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem;
}
.ia-cfp .ia-cfp-card {
  border: 1px solid var(--th-hairline, #e2e8f0); border-top: 3px solid var(--cfp);
  padding: .9rem 1rem;
}
.ia-cfp .ia-cfp-card-k {
  display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--th-smoke, #64748b); font-weight: 600; margin-bottom: .3rem;
}
.ia-cfp .ia-cfp-card-v { display: block; font-weight: 700; color: var(--cfp-text) !important; margin-bottom: .35rem; }
.ia-cfp .ia-cfp-card-d { display: block; font-size: .85rem; color: var(--th-ink-2, #475569); line-height: 1.5; }

.ia-cfp .ia-cfp-steps { margin: 0; padding-left: 1.3rem; }
.ia-cfp .ia-cfp-steps li { margin: .3rem 0; line-height: 1.55; }
.ia-cfp .ia-cfp-steps li::marker { color: var(--cfp-text); font-weight: 700; }

.ia-cfp .ia-cfp-dirs {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .1rem 1.2rem;
}
.ia-cfp .ia-cfp-dirs li {
  padding: .5rem 0 .5rem 1.1rem; border-bottom: 1px solid var(--th-hairline, #e2e8f0);
  position: relative;
}
.ia-cfp .ia-cfp-dirs li::before {
  content: ""; position: absolute; left: 0; top: .95rem;
  width: .5rem; height: .5rem; background: var(--cfp);
}

.ia-cfp .ia-cfp-req { margin: 0; padding-left: 1.2rem; }
.ia-cfp .ia-cfp-req li { margin: .35rem 0; line-height: 1.55; }
.ia-cfp .ia-cfp-req li::marker { color: var(--cfp-text); }

.ia-cfp .ia-cfp-more { margin: 1rem 0 0; }
.ia-cfp .ia-cfp-more a { font-weight: 600; color: var(--cfp-text) !important; }

.ia-cfp .ia-cfp-dls {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem;
}
.ia-cfp .ia-cfp-dl a {
  display: block; border: 1px solid var(--cfp-line); padding: .75rem .9rem;
  text-decoration: none !important; background: #fff;
}
.ia-cfp .ia-cfp-dl a:hover { background: var(--cfp-soft); }
.ia-cfp .ia-cfp-dl strong { display: block; color: var(--cfp-text); font-size: .95rem; }
.ia-cfp .ia-cfp-dl span { font-size: .8rem; color: var(--th-smoke, #64748b); }
.ia-cfp .ia-cfp-dl-doc a { border-style: dashed; }

.ia-cfp .ia-cfp-contacts {
  list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: .5rem .9rem;
}
.ia-cfp .ia-cfp-contacts a { font-weight: 600; color: var(--cfp-text) !important; }

@media (max-width: 640px) {
.ia-cfp h1 { font-size: 1.6rem; }
.ia-cfp .ia-cfp-hero { padding: 1.2rem 1rem; }
.ia-cfp .ia-cfp-btn { width: 100%; text-align: center; }
}

/* =============================================================================
   6. PRINT
   ========================================================================== */

@media print {
  .ia-reach, .ia-abc { display: none; }
  .th-hero2 .iam-hero-body::before { display: none; }
}