/* ==========================================================================
   Journal header
   --------------------------------------------------------------------------
   Two-row header used by header-journal.php and header-article.php:
     row 1 - white. journal title, ISSN, impact factor pill
     row 2 - brand blue. centred navigation + Submit Manuscript

   Condenses on scroll: row 1 collapses, row 2 tightens and picks up a
   shadow, and the journal name fades into the blue bar so orientation is
   never lost. ~140px down to ~54px.

   Deliberately uses its OWN class names (main-navigation, nav-list, nav-link,
   has-dropdown, dropdown-menu, mobile-menu-toggle, condensed-title) rather
   than #navbar / .navbar / .mobile-nav-toggle, which style.css (lines
   105-340) and main.js (line 92) are already bound to and which would fight
   this markup.

   Loaded ONLY by the two journal-domain headers, so none of this can leak
   onto the main publisher site.
   ========================================================================== */

/* Condensing the header shrinks the document, which can drop the page below
   the point where it needs a scrollbar. The classic scrollbar then vanishes,
   widening the viewport by ~15px and shifting every element sideways - and
   that width change re-lays-out the page and re-fires the scroll handler, so
   the header flaps between states instead of settling. Reserving the gutter up
   front means the scrollbar never appears or disappears, which removes the
   feedback loop at its source. Scoped to this stylesheet, which the journal
   domains load and the main publisher site never does. */
html {
  scrollbar-gutter: stable;
}

.journal-header {
  --jp-primary: #085f9f;
  --jp-primary-dark: #064e85;
  --jp-primary-light: #0a76c4;
  --jp-accent: #9fc658;
  --jp-accent-ink: #4d7a12;
  --jp-text: #171717;
  --jp-muted: #5a6570;
  --jp-border: #e2e7ec;
  --jp-white: #ffffff;

  /* Shared horizontal gutter, applied per-row rather than on the container.
     Row 1 needs it so the masthead does not touch the viewport edge; the
     blue bar deliberately does not use it on the container either, because
     it has to run full-bleed. */
  --jp-gutter: clamp(16px, 3.5%, 56px);

  width: 100%;
  background: var(--jp-white);
  /* Declared explicitly so no other stylesheet can frame or inset us.
     article-view.css carried a legacy `.journal-header` rule for the old
     banner - `border: 2px solid` and `padding: 10px` - and because only
     border-bottom was set here, those two survived on the article pages and
     gave that header a blue frame and a 10px inset the journal pages did
     not have. */
  border: 0;
  border-bottom: 1px solid var(--jp-border);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.journal-header *,
.journal-header *::before,
.journal-header *::after {
  box-sizing: border-box;
}

.journal-header a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   The container is a bare positioning context - no gutters of its own.
   Each row applies --jp-gutter individually so the blue bar can run
   full-bleed to the viewport edges while row 1 stays inset. Padding here
   would push the blue background inward and leave white gutters either
   side of it, which is what it did before.
   -------------------------------------------------------------------------- */

.journal-header .header-container {
  width: 100%;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Row 1 - title, ISSN, impact factor
   -------------------------------------------------------------------------- */

.journal-header .header-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 28px;
  padding: 22px var(--jp-gutter);
  /* Set from JS to row 1's measured height. A fixed value that overshoots
     (it was 200px against a row that is ~80px) wastes most of the transition
     doing nothing and then collapses in a snap at the end. The fallback only
     applies before the first measurement. */
  max-height: var(--jp-top-h, 110px);
  overflow: hidden;
  opacity: 1;
  border-bottom: 1px solid var(--jp-border);
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease,
              border-bottom-width .2s ease;
}

.journal-header .journal-title {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--jp-primary);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.25;
  min-width: 0;
}

/* One mark for every journal - a book glyph, drawn inline so it cannot be
   held up by the Font Awesome swap and inherits the brand blue for free. */
.journal-header .title-icon {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  color: var(--jp-primary);
  opacity: .92;
  transform: translateY(-1px);
}

.journal-header .header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.journal-header .journal-meta {
  color: var(--jp-muted);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  white-space: nowrap;
}

.journal-header .journal-meta strong {
  color: var(--jp-text);
  font-weight: 600;
}

/* Impact factor reads as a lime-tinted pill, not bare text */
.journal-header .impact-factor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(159, 198, 88, .18);
  color: var(--jp-accent-ink);
  font-size: 14px;
  font-weight: 500;
}

.journal-header .impact-factor::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jp-accent);
  flex-shrink: 0;
}

.journal-header .impact-factor strong {
  color: var(--jp-accent-ink);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Row 2 - navigation + submit button
   --------------------------------------------------------------------------
   Flexbox rather than the old 1fr auto 1fr grid. The grid centred the nav in
   the FULL width, but the Submit button lives on the right of that same width,
   so the space left of "Home" came out one Submit-width larger than the space
   between the last nav item and the button - which read as Contact Us being
   glued to Submit while Home floated away from the edge. Letting the nav flex
   to fill the space that is left AFTER the button means its list centres in the
   remaining area, so both sides match no matter how wide the button is.
   -------------------------------------------------------------------------- */

.journal-header .header-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 62px;
  padding: 0 var(--jp-gutter);
  background: var(--jp-primary);
  transition: min-height .2s ease, box-shadow .2s ease;
}

/* Journal name, only once the header has condensed */
.journal-header .condensed-title {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--jp-white);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

/* The label owns its own ellipsis. text-overflow does not act through an
   anonymous flex item, so it has to sit on a real element. */
.journal-header .condensed-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The same book mark as the full masthead. On the blue bar a blue mark would
   vanish, so it takes the lime accent the nav underline already uses. */
.journal-header .condensed-title .title-icon {
  flex: 0 0 auto;
  color: var(--jp-accent);
  opacity: 1;
  transform: translateY(-1px);
}

.journal-header .main-navigation {
  flex: 1 1 auto;
  min-width: 0;
}

.journal-header .submit-button {
  flex: 0 0 auto;
}

.journal-header .nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.9vw, 32px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.journal-header .nav-list > li {
  position: relative;
}

.journal-header .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 2px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--jp-white);
  transition: color .2s ease;
}

.journal-header .nav-link:hover,
.journal-header .nav-link:focus-visible {
  color: var(--jp-white);
}

/* Growing lime underline - same motion language as the footer links */
.journal-header .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--jp-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}

.journal-header .nav-link:hover::after,
.journal-header .nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Dropdown arrow - a CSS chevron, no icon font dependency */
.journal-header .dropdown-arrow {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Dropdown menu
   -------------------------------------------------------------------------- */

.journal-header .dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 232px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: var(--jp-white);
  border: 1px solid var(--jp-border);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(6, 40, 66, .18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 1001;
}

.journal-header .dropdown-menu a {
  display: block;
  padding: 11px 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--jp-text);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease;
}

/* Staggered reveal, keyed off the parent li */
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(1) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(1) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(1) a { transition-delay: 0s, 0s, 0s, 0s; }
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(2) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(2) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(2) a { transition-delay: .03s, .03s, 0s, 0s; }
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(3) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(3) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(3) a { transition-delay: .06s, .06s, 0s, 0s; }
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(4) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(4) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(4) a { transition-delay: .09s, .09s, 0s, 0s; }
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(5) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(5) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(5) a { transition-delay: .12s, .12s, 0s, 0s; }
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(6) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(6) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(6) a { transition-delay: .15s, .15s, 0s, 0s; }
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(7) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(7) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(7) a { transition-delay: .18s, .18s, 0s, 0s; }
.journal-header .has-dropdown:hover > .dropdown-menu li:nth-child(n+8) a,
.journal-header .has-dropdown:focus-within > .dropdown-menu li:nth-child(n+8) a,
.journal-header .has-dropdown.open > .dropdown-menu li:nth-child(n+8) a { transition-delay: .21s, .21s, 0s, 0s; }

.journal-header .has-dropdown:hover > .dropdown-menu,
.journal-header .has-dropdown:focus-within > .dropdown-menu,
.journal-header .has-dropdown.open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.journal-header .has-dropdown:hover > .dropdown-menu a,
.journal-header .has-dropdown:focus-within > .dropdown-menu a,
.journal-header .has-dropdown.open > .dropdown-menu a {
  opacity: 1;
  transform: translateY(0);
}

.journal-header .dropdown-menu a:hover,
.journal-header .dropdown-menu a:focus-visible {
  color: var(--jp-primary);
  background: #f0f6fb;
}

.journal-header .has-dropdown:hover > .nav-link .dropdown-arrow,
.journal-header .has-dropdown:focus-within > .nav-link .dropdown-arrow,
.journal-header .has-dropdown.open > .nav-link .dropdown-arrow {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* --------------------------------------------------------------------------
   Submit Manuscript - white on the blue bar
   -------------------------------------------------------------------------- */

.journal-header .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--jp-white);
  border: 1px solid var(--jp-white);
  border-radius: 4px;
  color: var(--jp-primary);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.journal-header .submit-button:hover,
.journal-header .submit-button:focus-visible {
  background: #eef5fb;
  color: var(--jp-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

.journal-header .submit-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Mobile menu button
   -------------------------------------------------------------------------- */

.journal-header .mobile-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.journal-header .hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.journal-header .hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--jp-white);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

.journal-header .header-bottom.menu-open .hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.journal-header .header-bottom.menu-open .hamburger span:nth-child(2) {
  opacity: 0;
}

.journal-header .header-bottom.menu-open .hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Condensed (scrolled) state
   -------------------------------------------------------------------------- */

.journal-header.is-condensed .header-top {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}

.journal-header.is-condensed .header-bottom {
  min-height: 54px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

.journal-header.is-condensed .condensed-title {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .journal-header .header-top {
    gap: 10px 20px;
    padding: 18px var(--jp-gutter);
  }

  .journal-header .journal-title {
    font-size: 23px;
  }

  .journal-header .header-meta {
    gap: 12px;
  }

  .journal-header .journal-meta {
    font-size: 14px;
  }

  .journal-header .impact-factor {
    font-size: 13px;
    padding: 4px 11px;
  }

  .journal-header .header-bottom {
    gap: 14px;
    min-height: 58px;
  }

  .journal-header .nav-list {
    gap: 16px;
  }

  .journal-header .nav-link {
    font-size: 14px;
  }

  .journal-header .submit-button {
    padding: 0 15px;
    font-size: 14px;
    min-height: 38px;
  }

  .journal-header .condensed-title {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .journal-header .header-top {
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    padding: 15px var(--jp-gutter);
  }

  .journal-header .journal-title {
    grid-column: 1 / -1;
    font-size: 21px;
  }

  .journal-header .header-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .journal-header .journal-meta {
    font-size: 13px;
    white-space: normal;
  }

  .journal-header .impact-factor {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* Back to flex so the hamburger and button can share the top line */
  .journal-header .header-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 58px;
  }

  .journal-header .mobile-menu-toggle {
    display: inline-flex;
    order: 1;
  }

  .journal-header .condensed-title {
    display: block;
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 2px;
    font-size: 14px;
  }

  .journal-header .submit-button {
    order: 3;
    margin-left: auto;
    padding: 0 13px;
    font-size: 13px;
    min-height: 38px;
  }

  .journal-header .main-navigation {
    display: none;
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    justify-self: stretch;
  }

  .journal-header .header-bottom.menu-open .main-navigation {
    display: block;
    animation: jp-menu-in .28s ease both;
  }

  @keyframes jp-menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .journal-header .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .22);
  }

  .journal-header .nav-list > li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
  }

  .journal-header .nav-link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 8px 4px;
    font-size: 15px;
    white-space: normal;
  }

  /* Underline becomes a left bar so it reads in a vertical list */
  .journal-header .nav-link::after {
    left: 0;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 3px;
    height: 0;
    border-radius: 0 2px 2px 0;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
  }

  .journal-header .nav-link:hover::after,
  .journal-header .nav-link:focus-visible::after {
    transform: translateY(-50%) scaleY(1);
    height: 22px;
  }

  /* Dropdowns become inline accordions rather than flyouts */
  .journal-header .dropdown-menu {
    position: static;
    left: auto;
    min-width: 0;
    width: 100%;
    padding: 0 0 8px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transform: none;
  }

  .journal-header .has-dropdown:hover > .dropdown-menu,
  .journal-header .has-dropdown:focus-within > .dropdown-menu,
  .journal-header .has-dropdown.open > .dropdown-menu {
    visibility: visible;
    height: auto;
    transform: none;
  }

  .journal-header .dropdown-menu a {
    padding: 11px 12px;
    color: rgba(255, 255, 255, .86);
    opacity: 1;
    transform: none;
    transition-delay: 0s !important;
  }

  .journal-header .dropdown-menu a:hover,
  .journal-header .dropdown-menu a:focus-visible {
    color: var(--jp-white);
    background: rgba(255, 255, 255, .1);
  }
}

/* --------------------------------------------------------------------------
   Small mobile
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  .journal-header .journal-title {
    font-size: 18px;
  }

  .journal-header .journal-meta {
    font-size: 12px;
  }

  .journal-header .impact-factor {
    font-size: 11px;
    padding: 3px 9px;
  }

  .journal-header .submit-button {
    padding: 0 10px;
    font-size: 12px;
  }

  .journal-header .condensed-title {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   The header occupies its own space in normal flow (sticky, not fixed), so
   the global #main compensation in style.css:27 would leave a dead gap.
   -------------------------------------------------------------------------- */

body.journal-site #main {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Reduced motion - condense instantly, no flourish
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .journal-header,
  .journal-header .header-top,
  .journal-header .header-bottom,
  .journal-header .condensed-title,
  .journal-header .nav-link,
  .journal-header .nav-link::after,
  .journal-header .dropdown-arrow,
  .journal-header .dropdown-menu,
  .journal-header .dropdown-menu a,
  .journal-header .submit-button,
  .journal-header .hamburger span {
    transition: none !important;
    animation: none !important;
  }

  .journal-header .has-dropdown:hover > .dropdown-menu a,
  .journal-header .has-dropdown:focus-within > .dropdown-menu a,
  .journal-header .has-dropdown.open > .dropdown-menu a {
    transition-delay: 0s !important;
  }
}