/* ==========================================================================
   path: ojs/immersion-child/eag-immersion.css
   description: Earth Access Geoscience — style layer on top of PKP's Immersion
   theme (v1.1.3.x, stable-3_5_0) for OJS 3.5 at journal.earthaccess.us/index.php/eag.
   Every selector below was read from Immersion's actual source (templates/ and
   resources/less/) — see ojs/immersion-child/IMMERSION_NOTES.md for the full
   class-name map and the load-order proof.

   ⚠️  DEPLOYMENT: upload via Settings → Website → Appearance → Advanced →
       Journal Style Sheet. OJS renames the upload to styleSheet.css — the field
       showing that name afterwards is NORMAL, not a failure.

   ⚠️  THE OJS ADMIN FIELD IS UNVERSIONED. This repo copy is the source of
       truth. Edit HERE, then upload. Never edit only in OJS — that edit is
       invisible to git and dies in the next migration.

   LOAD ORDER (verified in pkp-lib stable-3_5_0, PKPTemplateManager.php):
   Immersion registers app.min.css + its compiled LESS at STYLE_SEQUENCE_NORMAL
   (10); the Journal Style Sheet is registered at STYLE_SEQUENCE_LATE (15) and
   the print loop ksorts by priority — so this file loads AFTER Immersion's CSS
   and wins ties. No child theme needed; no !important needed anywhere in this
   file (Immersion's two inline styles — the hero photo and the description
   band colour — are worked WITH, not fought; see the notes file).

   ⚠️  TEAL IS A FILL, NOT A TEXT COLOUR. #12baa9 on white ≈ 2.4:1 — fails AA
   for body text (needs 4.5:1) AND large-text AA (needs 3:1). White ON #12baa9
   is also ≈2.4:1 — fails in both directions. Teal text on light uses
   --ea-teal-text (#0a7a6f, 5.2:1); labels on teal fills use --ea-ink
   (#212121, 6.6:1 on teal-500). All shipped pairs are computed in the notes.

   FONTS: Trueno (SIL OFL) is @font-face'd with RELATIVE urls — upload the four
   .otf files to a fonts/ folder NEXT TO styleSheet.css (public/journals/<id>/
   fonts/). If the fonts are absent everything falls back to Roboto, which
   Immersion already self-hosts. The logo faces (Loew Heavy, Local Brewery
   Bold) are COMMERCIAL, outlined inside the logo artwork only — they are
   never set as live text and never shipped as webfonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Brand tokens — from assets/brand/tokens/brand-tokens.css. Do not fork.
   -------------------------------------------------------------------------- */
:root {
  --ea-teal-100: #c0e1de;
  --ea-teal-200: #8ad4cd;
  --ea-teal-300: #5bcac0;
  --ea-teal-400: #2fc1b1; /* hover                                */
  --ea-teal-500: #12baa9; /* PRIMARY — fills only, never text     */
  --ea-teal-text: #0a7a6f; /* the only teal safe as text on light */
  --ea-ink: #212121;
  --ea-ink-body: #4f4f4f;
  --ea-rule: #bdbdbd;

  /* The dark used for hero scrim + nav bar. At alpha .78 over a pure-white
     worst-case photo pixel the composite is #424546 → white text 9.7:1. */
  --ea-hero-dark: 13, 17, 18;

  --ea-font-ui: 'Trueno', 'Roboto', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --ea-font-reading: 'Spectral', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   1. Trueno (SIL OFL) — relative to styleSheet.css; graceful Roboto fallback
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Trueno';
  src: url('fonts/TruenoRg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trueno';
  src: url('fonts/TruenoRgIt.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Trueno';
  src: url('fonts/TruenoBd.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trueno';
  src: url('fonts/TruenoExBd.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Typography — Trueno for headings + UI; serif kept for long-form reading
   (Trueno is a display face and fatigues at paragraph length).
   Immersion's own faces: body = Roboto (@font-family-primary), headings =
   Spectral 700 (@font-family-secondary — typography.less).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, legend {
  font-family: var(--ea-font-ui);
  font-weight: 700;
  letter-spacing: -0.01em; /* Immersion's -0.025em is tuned for Spectral */
}

.btn,
.article__btn,
.article__meta,
.announcement__date,
.issue-section__title,
.main-header {
  font-family: var(--ea-font-ui);
}

/* Long-form reading stays serif: article abstracts/bodies, issue blurbs,
   the journal description (promoted in §5), and the homepage Additional
   Content pitch (promoted in §5b). */
.article-page__abstract p,
.article-page p,
.issue-desc__content p,
.journal-description p,
.additional-home-content p {
  font-family: var(--ea-font-reading);
}

/* --------------------------------------------------------------------------
   3. Hero (header.main-header / #immersion_content_header)
   The photo arrives as an inline background-image on the <header>; Immersion
   puts the logo in .main-header__title (an <h1> on the homepage) at 75vw.
   -------------------------------------------------------------------------- */

/* 3.1 Scrim: transparent at the top, darker toward the base where the nav
   sits. ::before paints under .container-fluid (later in DOM = above). */
.main-header {
  position: relative; /* Immersion sets this too; restated for the scrim */
}
.main-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--ea-hero-dark), 0) 0%,
    rgba(var(--ea-hero-dark), 0.08) 40%,
    rgba(var(--ea-hero-dark), 0.28) 72%,
    rgba(var(--ea-hero-dark), 0.55) 100%
  );
}
.main-header > .container-fluid {
  position: relative; /* lift logo + nav above the scrim */
}

/* 3.2 Cap the logo. The lockup is ~3.3:1 horizontal, so width governs.
   Immersion's own rule is only `max-width: 100%` inside a 75vw title.
   The soft LIGHT halo lifts the black mark off the mid-tone photograph
   (a dark shadow would vanish; a hard outline is explicitly not wanted). */
.main-header__title img {
  width: min(460px, 82vw);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.5))
    drop-shadow(0 1px 3px rgba(255, 255, 255, 0.35));
}

/* Tighten Immersion's homepage spacing (7.5vh top / 15vh bottom pushed
   everything below the fold together with the giant logo). */
.page_index:not(.indexSite) .main-header__title {
  margin: 6vh auto 10vh auto;
}

/* --------------------------------------------------------------------------
   4. Navigation
   4.1 Primary nav (.main-header__nav wraps the hamburger + #main-menu).
   Immersion paints each .main-header__nav-link as an opaque white rectangle
   (header.less: background-color:#fff) — the "debris" on the photograph.
   Replace with ONE translucent dark bar, teal top-rule, white labels.
   (White-on-dark passes easily; it is white-on-TEAL that fails.)
   -------------------------------------------------------------------------- */
.main-header__nav {
  background-color: rgba(var(--ea-hero-dark), 0.78);
  border-top: 3px solid var(--ea-teal-500);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.3rem 1rem;
}

.main-header__nav-link {
  background-color: transparent; /* kills the white rectangles */
  color: #fff;
  padding: 0.5em 0.9em;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.main-header__nav-link:hover,
.main-header__nav-link:focus,
.main-header__nav-link:active {
  background-color: var(--ea-teal-500);
  color: var(--ea-ink); /* NEVER white on teal — 2.4:1 */
}
.main-header__nav-link:focus-visible {
  outline: 2px solid var(--ea-teal-100);
  outline-offset: 2px;
}

/* 4.2 Dropdown panel — matched to the nav bar, not a white slab.
   Immersion's open-state rule is `#navigationPrimary .dropdown-menu.show`
   (specificity 1,2,0 — header.less, ≥992px) with a WHITE background, so the
   `.show` variant must be named explicitly or the white panel wins while
   open. The panel is absolutely positioned and FLOATS OVER the page content
   below the hero (that is correct menu behaviour) — so it must read as a
   panel ABOVE the page, not bleed into it: near-solid background (α .96 —
   at the bar's .78 the page h1 showed through and looked like a rendering
   bug), an explicit z-index above page content, and a downward drop shadow
   that separates its bottom edge from whatever it covers. White labels on
   the worst-case composite = 17.4:1 (§5 of the notes); hover = teal fill +
   ink, as the bar. */
#navigationPrimary .dropdown-menu,
#navigationPrimary .dropdown-menu.show {
  background-color: rgba(var(--ea-hero-dark), 0.96);
  border: 0;
  border-top: 3px solid var(--ea-teal-500);
  border-radius: 0;
  z-index: 1030; /* > Bootstrap's dropdown default 1000; < the login modal */
  box-shadow: 0 14px 28px rgba(var(--ea-hero-dark), 0.35),
    0 3px 8px rgba(var(--ea-hero-dark), 0.28);
}
/* Bootstrap paints li.dropdown-item's own hover (--bs-dropdown-link-hover-bg)
   — keep the li transparent so only the link's teal fill shows. */
#navigationPrimary .dropdown-menu .dropdown-item {
  background-color: transparent;
}
/* Immersion gives the links a white 1px border at rest and a WHITE hover
   fill (header.less). White labels at rest; teal fill + ink on hover. */
#navigationPrimary .dropdown-item a {
  color: #fff;
  border-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#navigationPrimary .dropdown-item a:hover,
#navigationPrimary .dropdown-item a:focus {
  background-color: var(--ea-teal-500);
  border-color: var(--ea-teal-500);
  color: var(--ea-ink);
}
#navigationPrimary .dropdown-item a:focus-visible {
  outline: 2px solid var(--ea-teal-100);
  outline-offset: 2px;
}

/* 4.3 Top-right user/admin chips (.main-header__admin-link) — Immersion
   paints them solid black. Same translucent treatment as the nav bar.
   (α .65 over a white worst-case composites to #64686a → white text 6.0:1.) */
.main-header__admin-link,
.main-header__lang-link,
#languageNav .main-header__lang-link {
  background-color: rgba(var(--ea-hero-dark), 0.65);
  color: #fff;
}
.main-header__admin-link:hover,
.main-header__admin-link:focus,
.main-header__admin-link:active,
.main-header__lang-link:hover,
.main-header__lang-link:focus,
.main-header__lang-link:active,
#languageNav .main-header__lang-link:hover,
#languageNav .main-header__lang-link:focus,
#languageNav .main-header__lang-link:active {
  background-color: var(--ea-teal-500);
  color: var(--ea-ink);
}

/* 4.4 Mobile hamburger — Immersion gives it a white box + black bars. */
.hamburger {
  background-color: rgba(var(--ea-hero-dark), 0.78);
}
.hamburger__icon,
.hamburger__icon::before,
.hamburger__icon::after {
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   5. Journal description (section.journal-description on the homepage) —
   promoted from caption to lead. Centred band, ~46rem measure, larger lead
   paragraph.
   NOTE: the band's background arrives as an INLINE style from the theme
   option "Journal description background". Set that option to #ffffff (see
   the notes file) rather than fighting the inline style with !important.
   -------------------------------------------------------------------------- */
.journal-description {
  padding: 7vh 0 6vh 0;
}

/* Centre the "About" header row + give it the brand underline. */
.journal-description header.row {
  justify-content: center;
}
.journal-description header.row h3 {
  flex: 0 0 auto;
  width: auto;
  text-align: center;
  margin-top: 0;
}
.journal-description header.row h3::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  background-color: var(--ea-teal-500);
  margin: 0.6rem auto 0 auto;
}

/* Immersion crams the text into .col-md-6.col-lg-8, flush left. Centre the
   column itself and cap the measure at ~46rem (~75 characters). */
.journal-description .col-md-6.col-lg-8 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* The first sentence carries the entire proposition — let it lead. */
.journal-description p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ea-ink-body);
}
.journal-description .col-md-6.col-lg-8 > p:first-of-type {
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--ea-ink);
}

/* Immersion hardcodes the link-underline pseudo to white here (it assumed
   the default black band). currentColor works on any band colour. */
.journal-description a::after {
  border-color: currentColor;
}

/* If the band option is ever set dark again (.section_dark), keep the
   promoted type legible — inherit Immersion's white text on dark. */
.journal-description.section_dark p,
.journal-description.section_dark .col-md-6.col-lg-8 > p:first-of-type {
  color: inherit;
}

/* --------------------------------------------------------------------------
   5b. Homepage "Additional Content" (aside > .container.additional-home-content,
   indexJournal.tpl) — THE block that actually carries the pitch on the live
   homepage (selector confirmed from live page source 2026-07-13; the §5
   .journal-description band is a DIFFERENT element and does not render there).
   Until the first issue publishes, <main> is empty and this is the only prose
   on the page — promoted from caption to lead.

   Background: PLAIN WHITE, deliberately. The hero photo + dark nav are the
   page's one strong band; a tinted strip here would recreate the stranded-
   caption feel and add a second visual system to a one-paragraph-group page.
   White hands the stage to the promoted type — the same call already made
   for the description band option (§3 of the notes). Setting no background
   also stays out of the way of Immersion's optional inline $lastSectionColor.

   .container fight: Bootstrap's media-scoped `.container { max-width: … }`
   rules are specificity 0,1,0 — `.container.additional-home-content` (0,2,0)
   outranks them at every breakpoint, no !important. Below 768px Bootstrap
   containers go fluid and the 46rem cap simply stops binding — responsive
   behaviour intact. */
.container.additional-home-content {
  max-width: 46rem; /* ~75ch measure; full-bleed body text was the core sin */
  margin-left: auto;
  margin-right: auto; /* Bootstrap sets this too; restated for independence */
  padding-top: 9vh;
  padding-bottom: 11vh; /* placed, not stranded — page is otherwise empty */
}

/* Body paragraphs: comfortable long-form reading. Text stays left-aligned —
   the BLOCK is centred; centred prose at this length reads as a poster. */
.additional-home-content p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ea-ink-body);
}

/* Lead paragraph carries the entire proposition. Weight 500 resolves to the
   400 face today (Immersion ships Spectral 400/700 only — fonts.less; no
   synthesis, nearest-lower wins) — the promotion comes from size + ink; the
   500 is future-proofing if a medium cut ever loads. */
.additional-home-content p:first-of-type {
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ea-ink);
}

/* The author.earthaccess.us link is the site's only call to action and the
   only signal that OJS is NOT the submission portal. Teal-text (5.22:1 on
   white — §5 of the notes), real underline, offset for daylight. */
.additional-home-content a {
  color: var(--ea-teal-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.additional-home-content a:hover,
.additional-home-content a:focus {
  color: var(--ea-teal-text);
  text-decoration-thickness: 3px;
}
.additional-home-content a:focus-visible {
  outline: 2px solid var(--ea-teal-text); /* on white; teal-100 is for dark */
  outline-offset: 2px;
}
/* Immersion's content-link underline convention is an ::after pseudo with a
   hardcoded border colour (§5). If it applies inside the aside, keep it on
   currentColor; harmless no-op otherwise. */
.additional-home-content a::after {
  border-color: currentColor;
}

/* --------------------------------------------------------------------------
   6. Buttons — Immersion's .btn-primary is black/white (forms.less).
   Teal FILL with near-black label (6.6:1); hover teal-400 (7.2:1).
   The --bs-* custom properties cover Bootstrap 5's variable-driven rules
   in the pre-compiled app.min.css.
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--ea-teal-500);
  --bs-btn-border-color: var(--ea-teal-500);
  --bs-btn-color: var(--ea-ink);
  --bs-btn-hover-bg: var(--ea-teal-400);
  --bs-btn-hover-border-color: var(--ea-teal-400);
  --bs-btn-hover-color: var(--ea-ink);
  --bs-btn-active-bg: var(--ea-teal-400);
  --bs-btn-active-border-color: var(--ea-teal-400);
  --bs-btn-active-color: var(--ea-ink);
  background-color: var(--ea-teal-500);
  border: 1px solid var(--ea-teal-500);
  color: var(--ea-ink);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--ea-teal-400);
  border: 1px solid var(--ea-teal-400);
  color: var(--ea-ink);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--ea-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. Current-issue band + article cards + galley buttons (ready for content)
   Immersion's .issue band is pure #000; soften to brand ink and rule it teal.
   -------------------------------------------------------------------------- */
.issue {
  background-color: var(--ea-ink); /* white text on #212121 = 16.1:1 */
  border-top: 4px solid var(--ea-teal-500);
}
.issue.issue__empty {
  border-top: 4px solid var(--ea-teal-500); /* keeps its white bg (issue_toc.less) */
}

.issue-section__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--ea-teal-500);
  margin-top: 0.5rem;
}

/* Galley buttons (.article__btn, galley_link.less): Immersion inverts
   black/white. Keep the quiet outline at rest; hover = teal fill + ink. */
.article__btn:hover,
.article__btn:focus,
.article__btn:active,
.issue-desc__btn-group .article__btn:hover,
.issue-desc__btn-group .article__btn:focus,
.issue-desc__btn-group .article__btn:active {
  background-color: var(--ea-teal-500);
  border-color: var(--ea-teal-500);
  color: var(--ea-ink);
}

/* Card meta (authors, DOI, dates) reads quieter than titles. */
.article__meta {
  color: var(--ea-ink-body);
}
.section_dark .article__meta,
.issue .article__meta {
  color: inherit; /* keep Immersion's light text on dark section bands */
}

/* --------------------------------------------------------------------------
   8. Footer (footer.main-footer / #immersion_content_footer)
   Immersion gives it 7.5vh padding top+bottom (the stranding) and lets the
   PKP badge fill its grid column (col-2 → enormous). Attribution stays —
   smaller and quieter, never removed.
   -------------------------------------------------------------------------- */
.main-footer {
  padding: 3rem 0 2rem 0;
  border-top: 4px solid var(--ea-teal-500);
}
.main-footer p,
.main-footer li {
  color: var(--ea-ink-body);
  font-size: 0.9rem;
}
.main-footer a img.img-fluid {
  width: 90px;
  max-width: 90px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.main-footer a:hover img.img-fluid,
.main-footer a:focus img.img-fluid {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   9. Mobile (Immersion/Bootstrap breakpoints; hero + nav under 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .main-header__title {
    width: 90vw;
  }
  .main-header__title img {
    width: min(320px, 80vw);
  }
  .page_index:not(.indexSite) .main-header__title {
    margin: 4vh auto 6vh auto;
  }
  /* Collapsed menu items stack inside the dark bar — full-width tap targets */
  .main-header__nav-link {
    display: block;
    margin: 0.15rem 0;
  }
  .journal-description {
    padding: 5vh 0 4vh 0;
  }
  .journal-description .col-md-6.col-lg-8 > p:first-of-type {
    font-size: 1.2rem;
  }
  .container.additional-home-content {
    padding-top: 6vh;
    padding-bottom: 8vh;
  }
  .additional-home-content p:first-of-type {
    font-size: 1.3rem;
  }
}