/* ==========================================================================
   plugins/themes/eagImmersion/resources/eag.css
   Earth Access theme CSS for the Immersion child theme (v2.0.0.2, 2026-10-04).

   Registered by EagImmersionThemePlugin::init() at STYLE_SEQUENCE_LATE, so it
   loads AFTER Immersion's app.min.css and compiled LESS and wins every
   equal-specificity tie. Zero !important. Every selector below was read from
   Immersion stable-3_5_0 (templates + compiled LESS) or the live DOM — never
   guessed (ojs/immersion-child/IMMERSION_NOTES.md §2 is the map).

   Design: light, compact masthead (logo + nav on one row, accent rule), a
   journal-identity band, the current issue as image-led article cards,
   announcements, quiet footer. Plan: docs/ojs-side/OJS_THEME_V2_PLAN_2026-10-04.md
   Mock: https://claude.ai/artifact/RKQ54K4GFSjaoFP66Q6cvy

   Palette: the per-journal ACCENT tokens (--ea-accent, --ea-accent-text,
   --ea-accent-wash, --ea-rule-tint) are emitted by the plugin from the
   `eagPalette` theme option as an inline :root rule that loads after this file.
   The defaults below are Earth Access Geoscience (teal) so the file is complete
   on its own. Accent is a FILL, never body text; labels on an accent fill are
   always --ea-ink (#12baa9 on white is 2.3:1).

   Day/night: follows the browser (prefers-color-scheme), §12. Dark is NOT an
   inversion — #12baa9 fails as text on white but passes on dark, so
   --ea-accent-text flips to the raw accent there; surfaces/ink are re-chosen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (mirror assets/brand/tokens/brand-tokens.css — never invent a hex)
   -------------------------------------------------------------------------- */
:root {
  --ea-accent: #12baa9;        /* teal-500 — fills, rules */
  --ea-accent-text: #0a7a6f;   /* 4.6:1 on white — the only accent allowed as text */
  --ea-accent-wash: #c0e1de;   /* teal-100 — image placeholder, hover washes */
  --ea-rule-tint: #dbeae7;     /* teal-tinted hairline */
  --ea-ink: #212121;           /* headings, labels on accent */
  --ea-ink-body: #4f4f4f;
  --ea-ink-muted: #6b6b6b;     /* 5.7:1 on white; brand gray-200 (#828282) fails AA at small sizes */
  --ea-rule: #bdbdbd;
  --ea-surface: #ffffff;
  --ea-surface-alt: #f4f9f8;
  --ea-font-ui: 'Trueno', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ea-font-reading: Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif;
}

/* --------------------------------------------------------------------------
   2. Fonts — served from INSIDE the plugin (resources/fonts/), so the URL is
   relative to this file and cannot drift the way the old public/journals/<id>/
   staging did. Trueno is SIL OFL (a Montserrat derivative) — embedding is
   permitted. Same UI face as author.earthaccess.us; reading text stays a
   system serif, the same rule as the author tool.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Trueno'; font-style: normal; font-weight: 400; font-display: swap; src: url('/plugins/themes/eagImmersion/resources/fonts/TruenoRg.woff2') format('woff2'); }
@font-face { font-family: 'Trueno'; font-style: italic; font-weight: 400; font-display: swap; src: url('/plugins/themes/eagImmersion/resources/fonts/TruenoRgIt.woff2') format('woff2'); }
@font-face { font-family: 'Trueno'; font-style: normal; font-weight: 700; font-display: swap; src: url('/plugins/themes/eagImmersion/resources/fonts/TruenoBd.woff2') format('woff2'); }
@font-face { font-family: 'Trueno'; font-style: normal; font-weight: 800; font-display: swap; src: url('/plugins/themes/eagImmersion/resources/fonts/TruenoExBd.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   3. Base type (Immersion: Roboto 300 UI, Spectral serif headings)
   -------------------------------------------------------------------------- */
body {
  font-family: var(--ea-font-ui);
  font-weight: 400;
  color: var(--ea-ink-body);
  background: var(--ea-surface);
}
h1, h2, h3, h4, h5, h6, legend {
  font-family: var(--ea-font-ui);
  font-weight: 700;
  color: var(--ea-ink);
  letter-spacing: -0.01em;
}
a { color: var(--ea-accent-text); }
a:hover, a:focus { color: var(--ea-ink); }
a:focus-visible { outline: 3px solid var(--ea-accent); outline-offset: 2px; }
.btn, .article__btn, .article__meta, .announcement__date, .issue-section__title, .main-header {
  font-family: var(--ea-font-ui);
}
.article-page__abstract p, .article-page p, .issue-desc__content p,
.journal-description p, .additional-home-content p {
  font-family: var(--ea-font-reading);
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   4. Masthead — header.main-header > .container-fluid holds, in DOM order:
   nav.main-header__admin (user links), .main-header__title (h1 on the
   homepage, div elsewhere), nav.main-header__nav (hamburger + #main-menu).
   Immersion: black ground (#000 unless a Homepage Image is set), 75vw logo,
   7.5vh/15vh margins. v2: white ground, one row, accent rule.
   -------------------------------------------------------------------------- */
.main-header {
  background-color: var(--ea-surface);
  background-image: none;
  border-bottom: 3px solid var(--ea-accent);
  height: auto;
  font-weight: 400;
}
.page_index:not(.indexSite) .main-header { padding-top: 0; }
.main-header > .container-fluid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'admin admin' 'logo nav';
  align-items: center;
  column-gap: 2rem;
}

/* 4.1 User links — top right, quiet text (Immersion: black chips) */
.main-header__admin { grid-area: admin; padding-top: 6px; font-size: 0.8125rem; }
.main-header__admin-link, .main-header__lang-link, #languageNav .main-header__lang-link {
  background-color: transparent;
  color: var(--ea-ink-muted);
  padding: 2px 4px;
  margin-left: 0.75em;
}
.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 {
  background-color: transparent;
  color: var(--ea-ink);
  text-decoration: underline;
}

/* 4.2 Logo — Immersion's .main-header__title is 75vw centred; homepage adds
   7.5vh/15vh margins. One rule pair covers both the h1 and the div form. */
.main-header__title,
.page_index:not(.indexSite) .main-header__title {
  grid-area: logo;
  width: auto;
  max-width: none;
  margin: 6px 0 12px;
  padding: 0;
  text-align: left;
  line-height: 0;
}
.main-header__title img { width: min(300px, 70vw); height: auto; filter: none; }
.main-header__title a.is_text span { background: transparent; color: var(--ea-ink); font-family: var(--ea-font-ui); }

/* 4.3 Primary nav — Immersion paints each link as an opaque white rectangle
   (hover black). v2: transparent, ink labels, accent underline on hover and
   on the current item. #navigationPrimary carries Bootstrap's mx-auto
   (margin: auto !important) so the nav wrapper is shrink-wrapped and pushed
   right instead of fighting that margin. */
.main-header__nav { grid-area: nav; justify-self: end; width: max-content; padding: 0; margin: 0 0 6px; }
.main-header__nav-link {
  background-color: transparent;
  color: var(--ea-ink);
  padding: 0.5em 0.75em;
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s ease;
}
.main-header__nav-link:hover, .main-header__nav-link:focus, .main-header__nav-link:active {
  background-color: transparent;
  color: var(--ea-ink);
  border-bottom-color: var(--ea-accent);
}
.nmi_type_current > .main-header__nav-link,
.page_issue.op_current .nmi_type_current > .main-header__nav-link { border-bottom-color: var(--ea-accent); }

/* 4.4 Dropdown panel. ⚠️ the open state is .dropdown-menu.show (1,2,0) — a
   rule on bare .dropdown-menu loses while the menu is open. */
#navigationPrimary .dropdown-menu,
#navigationPrimary .dropdown-menu.show {
  background: var(--ea-surface);
  border: 1px solid var(--ea-rule-tint);
  border-top: 3px solid var(--ea-accent);
  box-shadow: 0 8px 24px rgba(33, 33, 33, 0.08);
  padding: 0.25rem 0;
  min-width: 14rem;
}
#navigationPrimary .dropdown-item { background: transparent; padding: 0; }
#navigationPrimary .dropdown-item a {
  display: block;
  color: var(--ea-ink);
  background: transparent;
  border: 0;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}
#navigationPrimary .dropdown-item a:hover, #navigationPrimary .dropdown-item a:focus {
  background: var(--ea-surface-alt);
  color: var(--ea-accent-text);
}

/* 4.5 Mobile hamburger (Immersion: white box + black bars) */
button.hamburger { background: transparent; border: 0; }
.hamburger__wrapper { background: transparent; }
.hamburger__icon, .hamburger__icon::before, .hamburger__icon::after { background-color: var(--ea-ink); }

/* --------------------------------------------------------------------------
   5. Journal-identity band — section.journal-description (theme option
   "Journal description" ON; its colour option supplies the inline background,
   set to --ea-surface-alt per journal). Immersion: padding 10vh 0 7.5vh.
   -------------------------------------------------------------------------- */
.journal-description { padding: 28px 0; border-bottom: 1px solid var(--ea-rule-tint); }
.journal-description header.row h3 { font-size: 1.625rem; line-height: 1.2; margin-bottom: 0.5rem; }
.journal-description a:after { background: var(--ea-accent-text); }
.journal-description .btn-primary { margin-top: 0.75rem; }

/* 5b. Homepage "Additional Content" (aside > .container.additional-home-content) */
.additional-home-content { padding: 28px 16px; }

/* --------------------------------------------------------------------------
   6. Buttons — Immersion's .btn-primary is black/white.
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--ea-accent);
  border-color: var(--ea-accent);
  color: var(--ea-ink);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--ea-ink);
  border-color: var(--ea-ink);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   7. Current issue — section.issue (Immersion: background #000, white text)
   and the per-section TOC bands. ⚠️ .issue-section gets an INLINE
   background-color when the issue form sets a section colour; leave the
   issue's section colours blank (or white) in the issue form.
   -------------------------------------------------------------------------- */
.issue { background: var(--ea-surface); color: var(--ea-ink-body); padding: 36px 0 0; }
.issue .container { min-height: 0; padding-bottom: 0; } /* Immersion: min-height 20vh — the empty band under the issue header */
.issue.issue__empty { background: var(--ea-surface); }
.issue__header {
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ea-rule);
}
.issue__meta {
  color: var(--ea-ink-muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.issue__title { font-size: 1.75rem; color: var(--ea-ink); }
/* Immersion stacks the spans (display:block) and prefixes the last one with
   an em dash via ::before — "Volume 1,⏎— No. 1". One line, no dash. */
.issue__title span, .issue__title span:last-of-type { display: inline; font-weight: 700; }
.issue__title span:last-of-type::before { content: none; }
.issue__title .issue__localized_name { color: var(--ea-ink-body); font-weight: 400; }
.issue__title span.issue__localized_name:last-of-type::before { content: '· '; } /* must out-rank the content:none above */
.issue__doi, .issue__doi a { color: var(--ea-ink-muted); font-size: 0.875rem; }
.issue-desc { padding-top: 16px; }
.issue-desc__title { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ea-accent-text); }
.issue-desc__btn-group .article__btn { border-color: var(--ea-ink); color: var(--ea-ink); }

.issue-section { background: var(--ea-surface); color: var(--ea-ink-body); padding: 20px 0 24px; }
.issue-section__header { margin-bottom: 0; }
.issue-section__title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ea-accent-text);
  margin-bottom: 0.5rem;
}
.issue-section__title::after { display: none; }
.issue-section__toc { list-style: none; margin: 0; padding: 0; }
.issue-section__toc-item { margin: 0; padding: 0; }
.issue-section__toc-item + .issue-section__toc-item { border-top: 1px solid var(--ea-rule-tint); }

/* 7.1 Article card. Immersion renders <figure class="article__img"> in a
   col-md-4 when the publication has a cover image, and otherwise gives the
   text column offset-md-4 (an empty slot). v2: the image column is the key
   image, cropped 4:3; cards WITHOUT an image use the full width. */
.article { padding: 18px 0; margin: 0; }
.article .offset-md-4 { margin-left: 0; }
.article .row { align-items: flex-start; }
.article__img {
  margin: 0;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ea-accent-wash);
  border-radius: 2px;
}
.article__img a { display: block; height: 100%; }
.article__img img, .article__img img.img-fluid { display: block; width: 100%; height: 100%; object-fit: cover; }
.article__meta { font-size: 0.9375rem; color: var(--ea-ink-body); margin: 0 0 0.25rem; }
.article__title { font-size: 1.3125rem; line-height: 1.3; margin: 0; }
.article__title a { color: var(--ea-ink); }
.article__title a:hover, .article__title a:focus { color: var(--ea-accent-text); }
.article__abstract-fadeout, .article .article__abstract { font-family: var(--ea-font-reading); font-size: 0.96875rem; margin-top: 0.625rem; }
ul.article__btn-group { margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.article__btn-group li { margin: 0; }
.article__btn,
a.article__btn {
  display: inline-block;
  border: 1px solid var(--ea-ink);
  color: var(--ea-ink);
  background: transparent;
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
  margin: 0;
}
.article__btn:hover, .article__btn:focus, .article__btn:active,
a.article__btn:hover, a.article__btn:focus {
  background: var(--ea-accent);
  border-color: var(--ea-accent);
  color: var(--ea-ink);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   8. Announcements — section.announcements (its colour option supplies the
   inline background; set to --ea-surface-alt per journal).
   -------------------------------------------------------------------------- */
.announcements { padding: 32px 0; border-top: 1px solid var(--ea-rule-tint); border-bottom: 1px solid var(--ea-rule-tint); }
.announcements header.row h3 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ea-accent-text);
  margin-bottom: 0.75rem;
}
.announcement__date { color: var(--ea-ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; margin-bottom: 0.25rem; }
.announcement__title { font-size: 1.0625rem; }
.announcement__title a { color: var(--ea-ink); }

/* --------------------------------------------------------------------------
   9. Article page — Immersion paints section.article-page BLACK with white
   text and white-outlined galley buttons (.list-galleys a). v2: white page,
   ink text, AGU proportions; the sidebar (aside.article-sidebar) keeps its
   cover image, citation block and copyright. Selectors from the live DOM
   (2026-10-04) + compiled LESS.
   -------------------------------------------------------------------------- */
.article-page {
  background: var(--ea-surface);
  color: var(--ea-ink-body);
  padding-top: 28px;
  padding-bottom: 40px;
}
.article-page a { color: var(--ea-accent-text); }
.article-page a:hover, .article-page a:focus { color: var(--ea-ink); }
.article-page__header .article-page__meta:first-child,
.article-page > .article-page__meta:first-child { margin-top: 0; }
.article-page__title { font-size: 2rem; line-height: 1.2; margin: 0.5rem 0 0.75rem; }
.article-page__meta { font-size: 0.9375rem; color: var(--ea-ink-body); }
.article-page__meta .authors-string { font-size: 1rem; }
.article-page__galleys { margin: 1.25rem 0; }
.list-galleys a {
  background-color: transparent;
  border: 1px solid var(--ea-ink);
  color: var(--ea-ink);
  padding: 5px 12px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  border-radius: 3px;
}
.list-galleys a:hover, .list-galleys a:focus {
  background-color: var(--ea-accent);
  border-color: var(--ea-accent);
  color: var(--ea-ink);
}
.article-page .btn { border-color: var(--ea-ink); color: var(--ea-ink); }
.article-page .label, .article-page h2.label, .article-page h3.label, .article-side__title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ea-accent-text);
  margin: 1.5rem 0 0.5rem;
}
.article-page__abstract p { font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; }
.article-page__abstract a, .article-page__references a { text-decoration: underline; color: var(--ea-accent-text); }
.article-page__abstract a:hover, .article-page__references a:hover { background: transparent; color: var(--ea-ink); }
.article-page__alert { border-color: var(--ea-rule); }
.article-sidebar {
  padding-top: 28px;
  font-size: 0.9375rem;
  color: var(--ea-ink-body);
}
.article-sidebar img { border-radius: 2px; margin-bottom: 1rem; }
.copyright-info { margin: 2rem 0 1rem; font-size: 0.875rem; color: var(--ea-ink-muted); }
.item.downloads_chart { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   10. Footer — footer.main-footer (Immersion: padding 7.5vh 0, darkgrey rule,
   PKP badge fills its grid column)
   -------------------------------------------------------------------------- */
.main-footer {
  background: var(--ea-surface); /* Immersion paints it white; must follow night mode */
  padding: 24px 0;
  border-top: 3px solid var(--ea-accent);
  font-size: 0.84375rem;
  color: var(--ea-ink-muted);
}
.main-footer a { color: var(--ea-ink-body); }
.main-footer li { display: inline-block; margin-right: 1rem; }
.main-footer a img.img-fluid { max-width: 48px; opacity: 0.7; }
.main-footer a:hover img.img-fluid, .main-footer a:focus img.img-fluid { opacity: 1; }

/* --------------------------------------------------------------------------
   11. Mobile (Bootstrap breakpoints: navbar-expand-sm collapses under 576px;
   the md grid stacks under 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .main-header > .container-fluid {
    grid-template-columns: 1fr;
    grid-template-areas: 'admin' 'logo' 'nav';
    justify-items: center;
  }
  .main-header__admin { justify-self: end; }
  .main-header__title, .page_index:not(.indexSite) .main-header__title { text-align: center; margin: 4px 0 8px; }
  .main-header__nav { justify-self: center; width: 100%; }
  .main-header__nav .navbar-nav { justify-content: center; flex-wrap: wrap; }
  .article__img { max-width: 420px; margin-bottom: 0.75rem; }
  .issue__title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .main-header__nav-link { transition: none; }
}

/* --------------------------------------------------------------------------
   12. Night — follows the browser setting; no toggle, no storage.
   Re-declares tokens only, so every rule above inherits the night values.
   Exceptions that need more than tokens are listed and explained below.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ea-accent-text: var(--ea-accent); /* teal passes on dark (≈9:1 on #0d1112) */
    --ea-accent-wash: #16302d;
    --ea-rule-tint: #243a37;
    --ea-ink: #f3f5f5;
    --ea-ink-body: #c9cfce;
    --ea-ink-muted: #9aa3a1;   /* 6.2:1 on #0d1112 */
    --ea-rule: #3a4442;
    --ea-surface: #0d1112;     /* brand hero-dark */
    --ea-surface-alt: #151b1c;
  }
  /* The theme options paint .journal-description / .announcements with an
     INLINE background-color (#f4f9f8, set per journal). Inline beats any
     selector, so this is the one place !important is justified. */
  .journal-description, .announcements { background-color: var(--ea-surface-alt) !important; }
  .issue-section { background-color: var(--ea-surface) !important; }
  /* Immersion's logo is one uploaded <img> (the black lockup). Swap to the
     white lockup shipped in the plugin by painting it behind a transparent img. */
  .main-header__title a.is_img {
    display: inline-block;
    background: url('/plugins/themes/eagImmersion/resources/logo-dark-mode.png') left center / contain no-repeat;
  }
  .main-header__title img { opacity: 0; }
  /* Accent fills keep ink labels: on a dark page that ink token is light, so
     pin the label colour to the dark ink for every accent-filled control. */
  .btn-primary, .article__btn:hover, .article__btn:focus, a.article__btn:hover, a.article__btn:focus,
  .list-galleys a:hover, .list-galleys a:focus { color: #212121; }
  .btn-primary:hover, .btn-primary:focus { background-color: var(--ea-ink); border-color: var(--ea-ink); color: var(--ea-surface); }
  .article__img img, .article-sidebar img { opacity: 0.92; }
  #navigationPrimary .dropdown-menu, #navigationPrimary .dropdown-menu.show { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
  .main-footer a img.img-fluid { filter: invert(1) hue-rotate(180deg); }
}