/* ═══════════════════════════════════════════════════
   NEXUS SUB-BRAND HUB — shared template
   Used by: health-nexus.html, ridgeline.html, verdant-science.html,
            charter.html, threnody.html
   Brand accent tokens (--brand / --brand-dk / --brand-tint / --brand-font)
   are set per-page in a small inline <style> block before this file
   is used, so this stylesheet stays brand-agnostic.
   ═══════════════════════════════════════════════════ */

/* Split hero: text sits on a plain, brand-tinted ground (never on top of the photo),
   the real wallpaper photo bleeds full-bleed in its own column to the right.
   This mirrors link.springer.com/brands/bmc's actual hero (text column + bleed-right
   picture), not a photo-behind-text wash. Threnody overrides --hero-* to go dark,
   because its wallpaper is dark and the brand's mood is meant to be. */
.nx-hero {
  --hero-bg: var(--brand-tint, #FAF9F6);
  --hero-ink: #15171A;
  --hero-ink-soft: #42454A;
  --hero-stat-bg: #FFFFFF;
  --hero-stat-border: rgba(21,23,26,0.12);
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.nx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 440px;
}
.nx-hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 40px 56px max(24px, calc((100vw - var(--max, 1280px)) / 2 + 24px));
}
.nx-hero-visual { position: relative; min-height: 280px; overflow: hidden; }
.nx-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-hero-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hero-ink-soft); opacity: .75; margin-bottom: 24px;
}
.nx-hero-breadcrumb a { color: inherit; text-decoration: none; }
.nx-hero-breadcrumb a:hover { color: var(--brand, #C4443D); }
.nx-hero-logo { height: 34px; margin-bottom: 22px; }
.nx-hero-logo img { height: 100%; display: block; }
.nx-hero h1 {
  font-family: var(--brand-font, 'Jost'), sans-serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700; line-height: 1.16; letter-spacing: -.01em;
  text-transform: none; hyphens: none; color: var(--hero-ink);
  max-width: 20ch; margin: 0 0 18px;
}
.nx-hero p.lede {
  max-width: 50ch; font-size: clamp(15px, 1.4vw, 17px); font-weight: 400;
  line-height: 1.6; color: var(--hero-ink-soft); margin: 0 0 28px;
}
.nx-hero-cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--brand, #C4443D); color: #fff; text-decoration: none;
  font-size: 14.5px; font-weight: 600; padding: 13px 22px; border-radius: 100px;
  margin-bottom: 32px; white-space: nowrap; transition: transform .15s ease;
}
.nx-hero-cta:hover { transform: translateY(-1px); }
.nx-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.nx-hero-ctas .nx-hero-cta { margin-bottom: 0; }
.nx-hero-ctas .nx-hero-cta.nx-cta-ghost { background: transparent; color: var(--hero-ink); border: 1.5px solid rgba(21,23,26,.22); }
.nx-hero-stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--hero-stat-border); border: 1px solid var(--hero-stat-border);
  border-radius: 8px; overflow: hidden; max-width: 560px;
}
.nx-hero-stats > div { flex: 1 1 148px; background: var(--hero-stat-bg); padding: 14px 16px; }
.nx-hero-stats dd { white-space: nowrap; }
.nx-hero-stats dt { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--hero-ink-soft); opacity: .75; margin-bottom: 6px; }
.nx-hero-stats dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--hero-ink); }
@media (max-width: 860px) {
  .nx-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .nx-hero-text { padding: 40px 24px; }
  .nx-hero-visual { min-height: 0; aspect-ratio: 16/10; }
  .nx-hero-visual img { position: static; }
}

/* Sub-pages (For Authors / Editorial / Policies) -- no wallpaper photo, so
   skip the two-column grid entirely and let the text column set its own
   width, same background/breadcrumb/h1/lede language as the brand hero. */
.nx-hero--sub .nx-hero-text {
  padding: 56px 24px; max-width: var(--max, 1280px); margin: 0 auto;
}
.nx-hero--sub h1 { max-width: 26ch; }
.nx-hero--sub p.lede { max-width: 62ch; }

/* Local sub-navigation: a second, brand-scoped tab strip beneath the
   site's main header, the way link.springer.com/brands/bmc separates
   "Home / Journals / About / Choose the right journal / Updates" from
   Springer's own global nav. Anchors into this single page's sections
   rather than routing to separate URLs -- the content per imprint is
   modest enough (one hero, one about, a handful of journals) that a
   real multi-page split would be over-engineering; the sub-nav gives
   the same "brand site within the site" feel without it. */
.nx-subnav {
  position: sticky; top: 80px; z-index: 40;
  background: #FFFFFF; border-bottom: 1px solid #E7E3DB;
}
.nx-subnav-row {
  display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none;
  padding: 14px 0;
}
.nx-subnav-row::-webkit-scrollbar { display: none; }
.nx-subnav-row a {
  font-size: 13px; font-weight: 600; color: #42454A; text-decoration: none;
  white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nx-subnav-row a:hover { color: var(--brand-dk, #970E1A); border-color: var(--brand-tint, transparent); }

/* Why-publish benefits grid: short, factual claims only -- each one is
   a policy or infrastructure commitment already stated elsewhere on
   the site (About, indexing, footer), not invented marketing copy. */
.nx-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin-top: 8px; }
.nx-benefit h3 { font-size: 15px; font-weight: 700; color: #15171A; margin: 0 0 6px; }
.nx-benefit p { font-size: 14px; color: #42454A; line-height: 1.65; margin: 0; }
@media (max-width: 700px) {
  .nx-benefits { grid-template-columns: 1fr; }
}

.nx-section { padding: clamp(48px, 7vw, 80px) 0; border-bottom: 1px solid #E7E3DB; }
.nx-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.nx-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand, #C4443D); font-weight: 700; margin-bottom: 10px; }
.nx-section-head h2 { font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; letter-spacing: -.01em; margin: 0; max-width: 26ch; }
.nx-section-head .nx-note { font-size: 14px; color: #787A7D; max-width: 42ch; }

/* Scalable journal listing: a compact, hairline-divided row per journal
   (title + subject tag + small cover thumbnail on the left, ISSN + explore
   link trailing on the right) rather than a fixed-column wall of large
   image cards. New rows just append to the list -- no re-templating as an
   imprint's journal count grows. Modeled on how Springer's BMC brand hub
   (link.springer.com/brands/bmc) lists journals within a subject: a
   scannable list, not a card grid. */
.nx-journal-list { display: flex; flex-direction: column; border-top: 1px solid #E7E3DB; }
.nx-journal-row {
  display: flex; align-items: center; gap: 18px; padding: 16px 6px;
  border-bottom: 1px solid #E7E3DB; flex-wrap: wrap;
  transition: background .15s ease, opacity .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.nx-journal-row:hover { background: #FAF9F6; }
.nx-journal-cover { flex: none; width: 44px; height: 60px; border-radius: 4px; background: #F2F0EA; overflow: hidden; }
.nx-journal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-journal-info { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nx-journal-tag { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand, #C4443D); font-weight: 700; }
.nx-journal-tag.new { color: #fff; background: var(--brand, #C4443D); display: inline-block; padding: 2px 8px; border-radius: 100px; width: fit-content; }
.nx-journal-title { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: #15171A; margin: 0; }
.nx-journal-trail { flex: none; display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nx-journal-meta { font-size: 12px; color: #787A7D; font-family: 'IBM Plex Mono', ui-monospace, monospace; white-space: nowrap; }
.nx-journal-link { font-size: 13px; font-weight: 600; color: var(--brand-dk, #970E1A); text-decoration: none; white-space: nowrap; }
.nx-journal-link:hover { text-decoration: underline; }
.nx-journal-link[aria-disabled="true"] { color: #A6A9AC; pointer-events: none; }
@media (max-width: 560px) {
  .nx-journal-trail { margin-left: 0; flex-basis: 100%; padding-left: 62px; gap: 16px; }
}

.nx-subject-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.nx-subject-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #E7E3DB; font-size: 14.5px; }
.nx-subject-row a { color: #15171A; text-decoration: none; font-weight: 500; }
.nx-subject-row a:hover { color: var(--brand-dk, #970E1A); }
.nx-subject-row span { color: #787A7D; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; }
/* Fact-only rows (no link, e.g. "Journal Information" key/value blocks) need
   the left-hand label styled like the usual anchor, not muted like the
   right-hand metadata -- both are otherwise plain <span> children. */
.nx-subject-row span.nx-fact-label { color: #15171A; font-weight: 500; font-family: inherit; font-size: 14.5px; }

.nx-about { max-width: 640px; }
.nx-about h2 { font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px; max-width: 20ch; color: #15171A; }
.nx-about p { font-size: 15.5px; line-height: 1.8; color: #42454A; margin: 0 0 16px; }
.nx-about p:last-of-type { margin-bottom: 0; }
.nx-about-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.nx-fact-pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 100px; background: var(--brand-tint, #FAF9F6); color: var(--brand-dk, #42454A); font-size: 12.5px; font-weight: 600; }

.nx-follow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.nx-follow-links { display: flex; gap: 14px; }
.nx-follow-links a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E7E3DB;
  display: flex; align-items: center; justify-content: center; color: #42454A; text-decoration: none;
}
.nx-follow-links a:hover { border-color: var(--brand, #C4443D); color: var(--brand-dk, #970E1A); }

.nx-siblings { background: #FAF9F6; }
.nx-siblings-row { display: flex; flex-wrap: wrap; gap: 12px; }
.nx-sib-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid #E7E3DB; border-radius: 100px; font-size: 13.5px; font-weight: 500;
  color: #42454A; text-decoration: none; background: #fff;
}
.nx-sib-chip:hover { border-color: #15171A; color: #15171A; }
.nx-sib-chip.current { border-color: var(--brand, #C4443D); color: var(--brand-dk, #970E1A); background: var(--brand-tint, #FBEEEC); }

@media (max-width: 860px) {
  .nx-subject-list { grid-template-columns: 1fr; }
}

/* Grouped subject lists -- For Authors / Editorial / Policies page sections
   group their .nx-subject-list rows under a small category label, so a
   longer list (8-12 items) still reads as organised categories rather
   than one undifferentiated wall of links. */
.nx-groups { display: flex; flex-direction: column; gap: 36px; }
.nx-group-head {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #787A7D; margin: 0 0 4px;
}
.nx-group .nx-subject-list { margin-top: 4px; }
.nx-lede { font-size: 15px; color: #42454A; line-height: 1.75; max-width: 62ch; margin: 0 0 28px; }
.nx-framework-note {
  font-size: 13.5px; color: #787A7D; line-height: 1.7; max-width: 62ch;
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #E7E3DB;
}
.nx-framework-note a { color: var(--brand-dk, #970E1A); font-weight: 600; }

/* Research domains (homepage) and disciplinary taxonomy (journals index)
   -- same three/six-up card grid, brand-colour rule instead of an icon,
   used wherever a set of subject areas needs real explanatory copy rather
   than an icon-and-label tile. */
.nx-domains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin-top: 8px; }
.nx-domain { border-top: 2px solid var(--brand, #C4443D); padding-top: 18px; }
.nx-domain-num { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .04em; color: #929598; margin-bottom: 10px; }
.nx-domain h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: #15171A; }
.nx-domain p { font-size: 13.5px; line-height: 1.7; color: #42454A; margin: 0; }
@media (max-width: 860px) { .nx-domains { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nx-domains { grid-template-columns: 1fr; } }

/* Publication journey -- numbered workflow steps (homepage + For Authors). */
.nx-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; margin-top: 8px; }
.nx-journey-step { border-left: 2px solid #E7E3DB; padding-left: 16px; }
.nx-journey-num { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--brand-dk, #970E1A); margin-bottom: 8px; }
.nx-journey-step h3 { font-size: 14.5px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: #15171A; }
.nx-journey-step p { font-size: 13px; line-height: 1.6; color: #42454A; margin: 0; }
@media (max-width: 860px) { .nx-journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nx-journey { grid-template-columns: 1fr; } }

/* Final editorial CTA band -- closing section of the homepage. */
.nx-final-cta { background: var(--brand-dk, #2C4568); color: #fff; padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.nx-final-cta h2 {
  font-family: var(--brand-font, 'Jost'), sans-serif; font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  max-width: 20ch; margin: 0 auto 28px;
}
.nx-final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nx-final-cta-actions a, .nx-final-cta-actions button {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 13px 24px; border-radius: 100px;
  border: 0; cursor: pointer; transition: transform .15s ease;
}
.nx-final-cta-actions .nx-cta-primary { background: #fff; color: var(--brand-dk, #2C4568); }
.nx-final-cta-actions .nx-cta-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.nx-final-cta-actions a:hover, .nx-final-cta-actions button:hover { transform: translateY(-1px); }