/* =========================================================================
   NGF — Base element styles & shared utility classes.
   ========================================================================= */

html {
  box-sizing: border-box;
  font-size: 100%; /* 16px equivalent; body's 1rem tokens resolve from this */
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--ngf-font-body);
  font-size:   var(--ngf-fs-base);
  line-height: var(--ngf-lh-body);
  color:       var(--ngf-fg-1);
  background:  var(--ngf-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--ngf-link);
  text-decoration: none;
  transition: color var(--ngf-dur-base) var(--ngf-ease-out);
}
a:hover { color: var(--ngf-link-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

/* Visible keyboard focus, standardized site-wide (WCAG 2.4.7).
   Uses the --ngf-focus-ring token (white inner + geodetic outer ring) so it
   stays visible on both light and dark backgrounds. The transparent outline
   keeps a focus ring in Windows High Contrast / forced-colors mode, where
   box-shadow is dropped. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ngf-focus-ring);
}

/* Skip-to-content link (WCAG 2.4.1): off-screen until it receives keyboard
   focus, then slides into the top-left corner. */
.ngf-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  margin: 8px;
  padding: 10px 16px;
  background: var(--ngf-white);
  color: var(--ngf-link);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--ngf-r-sm);
  transform: translateY(-150%);
  transition: transform var(--ngf-dur-base) var(--ngf-ease-out);
}
.ngf-skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ngf-skip-link { transition: none; }
}

/* Links embedded in body copy are underlined so they're distinguishable from
   surrounding text without relying on colour (WCAG 1.4.1). The link and body
   colours are both dark, so a hover-only underline would not be enough.
   Matches the existing always-underlined .ngf-prose convention (article.css). */
.ngf-text-section__body a:not(.ngf-index-card):not(.ngf-btn):not(.ngf-action-band__btn):not(.ngf-darow):not(.ngf-content-row),
.ngf-paragraph a:not(.ngf-index-card):not(.ngf-btn):not(.ngf-action-band__btn):not(.ngf-darow):not(.ngf-content-row) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ngf-font-display);
  font-weight: var(--ngf-w-bold);
  line-height: var(--ngf-lh-tight);
  color: var(--ngf-fg-1);
}
h1 { font-size: var(--ngf-fs-4xl); }
h2 { font-size: var(--ngf-fs-3xl); }
h3 { font-size: var(--ngf-fs-2xl); }
h4 { font-size: var(--ngf-fs-xl); }
h5 { font-size: var(--ngf-fs-lg); }
h6 { font-size: var(--ngf-fs-md); }

/* Canvas component CSS ships a preflight reset (ol,ul,menu{list-style:none})
   that loads on every page; restore markers for content lists. UI lists set
   their own list-style:none in component CSS. */
ul, ol { margin: 0 0 1.1em; padding-left: 1.4em; }
ul { list-style: disc outside; }
ol { list-style: decimal outside; }
li { margin: 0.3em 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1em;
  font-size: var(--ngf-fs-sm);
}
caption {
  text-align: left;
  font-weight: var(--ngf-w-semi);
  margin-bottom: var(--ngf-sp-2);
}
th, td {
  padding: var(--ngf-sp-2) var(--ngf-sp-3);
  border: 1px solid var(--ngf-border);
  text-align: left;
  vertical-align: top;
}
th {
  font-weight: var(--ngf-w-semi);
  background: var(--ngf-bg-subtle);
}

::selection { background: var(--ngf-seismic-200); color: var(--ngf-ink-900); }

.ngf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0);
  overflow: hidden; white-space: nowrap;
}

/* "‹ Back to X" link for returning to the previous step of a flow. Same
   visual convention as .ngf-article__back (article.css); generalized here
   since it's also used by the back-link SDC (Canvas pages) and the contact
   form's hook_form_alter markup — see ngf.theme / components/back-link. */
.ngf-back-link {
  display: inline-block;
  margin-bottom: var(--ngf-sp-6);
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ngf-tr-caps);
  color: var(--ngf-link);
  text-decoration: none;
}
.ngf-back-link:hover { color: var(--ngf-link-hover); }
.ngf-back-link::before { content: "\2039\00a0"; }

.ngf-container {
  max-width: var(--ngf-maxw-page);
  margin: 0 auto;
  padding-left: var(--ngf-sp-6);
  padding-right: var(--ngf-sp-6);
}

/* Shared "Side padding" prop, used by any section component offering the
   choice (index-card-grid, columns). The cap goes on the inner container, not
   the section, so a full-bleed background band stays full width and only the
   content insets within it. Percentages are of the section width, matching how
   an editor reads "10% on each side"; .ngf-container is already margin-inline
   auto, so capping it centers what is left.

   Mobile-first, so a single-column phone layout gets no inset at all; screen
   width is the scarce thing there. The breakpoints are the ones the card grid
   already uses for its column counts: at 640px it goes 2-up and takes half the
   inset, at 960px it reaches full width and full inset. */
@media (min-width: 640px) {
  .ngf-inset-medium > .ngf-container { max-width: 90%; }
  .ngf-inset-large > .ngf-container { max-width: 80%; }
}
@media (min-width: 960px) {
  .ngf-inset-medium > .ngf-container { max-width: 80%; }
  .ngf-inset-large > .ngf-container { max-width: 60%; }
}

/* Drupal status messages (drupal_set_message / Messenger). Previously
   completely unstyled sitewide; needed for the new contact forms' success
   and error feedback, so styled here rather than scoped to one form. */
.messages {
  max-width: var(--ngf-maxw-copy);
  margin: 0 auto var(--ngf-sp-6);
  padding: var(--ngf-sp-4) var(--ngf-sp-5);
  border: 1px solid var(--ngf-border-strong);
  border-left-width: 4px;
  border-radius: var(--ngf-r-md);
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-fg-1);
  background: var(--ngf-bg-surface);
}
.messages--status {
  border-left-color: var(--ngf-success);
}
.messages--error {
  border-left-color: var(--ngf-danger);
}
.messages--warning {
  border-left-color: var(--ngf-warning);
}
.messages ul {
  margin: 0;
  padding-left: 1.2em;
}

.ngf-stack > * + * { margin-top: var(--ngf-sp-4); }

.ngf-divider {
  height: 1px;
  background: var(--ngf-border);
  border: 0;
  margin: var(--ngf-sp-8) 0;
}

.ngf-layout__main {
  padding: var(--ngf-sp-8) 0;
}
.ngf-layout__main--canvas {
  padding: 0;
}

/* =========================================================================
   Shared homepage / editorial utilities (used across section components).
   ========================================================================= */

/* Kicker — small uppercase mono-ish label */
.ngf-kicker {
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ngf-tr-caps);
  color: var(--ngf-kicker-org);
}
.ngf-kicker--earthquake { color: var(--ngf-kicker-earthquake); }
.ngf-kicker--science    { color: var(--ngf-kicker-science); }
/* Kickers that link (article tag kickers -> the filtered /news listing). */
a.ngf-kicker { text-decoration: none; }
a.ngf-kicker:hover { text-decoration: underline; text-underline-offset: 3px; }
/* News editorial categories (field_news_category raw values). */
.ngf-kicker--organizational_news { color: var(--ngf-kicker-org); }
.ngf-kicker--earthscope_news     { color: var(--ngf-kicker-earthquake); }
.ngf-kicker--science_society     { color: var(--ngf-kicker-science); }
.ngf-kicker--workforce           { color: var(--ngf-warning); }

/* Chevron CTA (signature ">> READ MORE") */
.ngf-cta {
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ngf-tr-caps);
  color: var(--ngf-link);
  text-decoration: none;
  transition: color var(--ngf-dur-base) var(--ngf-ease-out);
}
.ngf-cta::before { content: ">> "; }
.ngf-cta:hover   { color: var(--ngf-link-hover); }

.ngf-meta {
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-fg-3);
}

/* Card hover lift */
.ngf-lift {
  transition: transform .35s var(--ngf-ease-out), box-shadow .35s var(--ngf-ease-out), border-color .35s var(--ngf-ease-out);
}
.ngf-lift:hover { transform: translateY(-3px); box-shadow: var(--ngf-shadow-3); }

/* Image hover scale within a bounded card */
.ngf-img-wrap { overflow: hidden; }
.ngf-img-wrap > .ngf-img { transition: transform .5s var(--ngf-ease-out); width: 100%; height: 100%; }
.ngf-lift:hover .ngf-img { transform: scale(1.04); }

/* Imagery placeholders (swap for real images) */
.ngf-pic {
  position: relative;
  background: var(--ngf-ink-200);
  overflow: hidden;
}

/* Editorial gradient backdrops (placeholder imagery) */
.ngf-bg-seismic  { background: linear-gradient(135deg, var(--ngf-seismic-900) 0%, var(--ngf-seismic-500) 50%, var(--ngf-seismic-200) 100%); }
.ngf-bg-geodetic { background: linear-gradient(135deg, var(--ngf-geodetic-900) 0%, var(--ngf-geodetic-500) 50%, var(--ngf-geodetic-200) 100%); }
.ngf-bg-ink      { background: linear-gradient(135deg, #242b2d 0%, #4e5759 50%, #9ba2a4 100%); }
.ngf-bg-deep     { background: linear-gradient(135deg, #0c3038 0%, #2a4756 50%, #3391a3 100%); }
.ngf-bg-warm     { background: linear-gradient(135deg, #5c2313 0%, #a84120 60%, #e26a36 100%); }
.ngf-bg-cool     { background: linear-gradient(135deg, #081e23 0%, #165c6c 60%, #3391a3 100%); }

/* Shared "tone" palette — the canonical set of 16 named accent colours
   offered by every card component's tone/colour dropdown (index-card,
   edu-card, support-card, partner-group, data-app-card), so editors picking
   a colour for a new card see the same options everywhere and can spread
   cards across distinct hues instead of repeating one or two. These bg-*
   gradients back the decorative image-placeholder blocks (index-card,
   edu-card); the accent solid/tint/border/fg values each of those
   components derives from the same hues live in each component's own CSS. */
.ngf-bg-teal    { background: linear-gradient(135deg, #0c343b 0%, #17707e 50%, #6bbcc4 100%); }
.ngf-bg-gold    { background: linear-gradient(135deg, #6b480d 0%, #ab7c1c 50%, #e0b968 100%); }
.ngf-bg-plum    { background: linear-gradient(135deg, #2a1530 0%, #6b3170 50%, #b478b8 100%); }
.ngf-bg-forest  { background: linear-gradient(135deg, #1d4d30 0%, #3f9760 50%, #8ccba0 100%); }
.ngf-bg-rust    { background: linear-gradient(135deg, #6b2018 0%, #b8472f 50%, #e59274 100%); }
.ngf-bg-amber   { background: linear-gradient(135deg, #7a5607 0%, #c99a10 50%, #eecb72 100%); }
.ngf-bg-slate   { background: linear-gradient(135deg, #263540 0%, #4d6d82 50%, #9db4c2 100%); }
.ngf-bg-olive   { background: linear-gradient(135deg, #40401b 0%, #7c7c34 50%, #bcbc78 100%); }
.ngf-bg-sage    { background: linear-gradient(135deg, #33452f 0%, #6c9273 50%, #aecab2 100%); }
.ngf-bg-copper  { background: linear-gradient(135deg, #6b3a1f 0%, #b56a3c 50%, #e0ac82 100%); }
.ngf-bg-wine    { background: linear-gradient(135deg, #45162a 0%, #8a3255 50%, #c67c9c 100%); }
.ngf-bg-navy    { background: linear-gradient(135deg, #101c2c 0%, #2c4a72 50%, #7c9bbd 100%); }
.ngf-bg-sand    { background: linear-gradient(135deg, #5c4a2e 0%, #9c7f50 50%, #cbb488 100%); }

/* Section label — "§ 03 — Title ........ >> Action" */
.ngf-section-label {
  display: flex;
  align-items: baseline;
  gap: var(--ngf-sp-6);
  margin-bottom: 28px;
}
.ngf-section-label__n {
  font-family: var(--ngf-font-mono);
  font-size: var(--ngf-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ngf-seismic-500);
  white-space: nowrap;
}
.ngf-section-label__rule { flex: 1; height: 1px; background: var(--ngf-border); }
.ngf-section-label__action {
  font-size: var(--ngf-fs-xs);
  font-weight: var(--ngf-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ngf-tr-caps);
  color: var(--ngf-link);
  white-space: nowrap;
}
.ngf-section-label__action::before { content: ">> "; }

/* On small screens the nowrap title + nowrap action can't share a row;
   drop the action to its own line under the title. */
@media (max-width: 768px) {
  .ngf-section-label { flex-wrap: wrap; row-gap: 10px; }
  .ngf-section-label__n { white-space: normal; }
  .ngf-section-label__action { flex-basis: 100%; }
}

/* =========================================================================
   Buttons — shared across hero, data, instrumentation, etc.
   ========================================================================= */
.ngf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: var(--ngf-r-sm);
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--ngf-dur-base) var(--ngf-ease-out),
              color var(--ngf-dur-base) var(--ngf-ease-out),
              border-color var(--ngf-dur-base) var(--ngf-ease-out);
}

.ngf-btn--primary {
  background: var(--ngf-seismic-500);
  color: #fff;
}
.ngf-btn--primary:hover { background: var(--ngf-seismic-600); color: #fff; }

.ngf-btn--secondary {
  background: transparent;
  color: var(--ngf-fg-1);
  border-color: var(--ngf-border-strong);
}
.ngf-btn--secondary:hover {
  background: var(--ngf-ink-800);
  color: #fff;
  border-color: var(--ngf-ink-800);
}

.ngf-btn--ghost {
  background: transparent;
  color: var(--ngf-fg-1);
}
.ngf-btn--ghost:hover { background: var(--ngf-ink-50); color: var(--ngf-fg-1); }

.ngf-btn svg { stroke-width: 2.4; }

/* Section subnav (About bar) is suppressed on the landing page. */
.path-frontpage .ngf-subnav { display: none; }

/* =========================================================================
   Standalone listing pages (Events /events, News /news).
   page--events / page--news render a flush page-hero, then the view inside
   .ngf-listing. Row cards reuse the events-news component CSS, attached via
   the ngf/listing library. See views-view--events--page-1 / --news--page-1.
   ========================================================================= */
.ngf-listing {
  padding-top: var(--ngf-sp-12);
  padding-bottom: var(--ngf-sp-20);
}
/* /events is now a canvas_page with an Action band between the hero and this
   view (unlike /news, /geophysical-events, which still go straight from a
   flush hero into .ngf-listing) — the top padding above has nothing to pair
   against there, so the events views templates opt out of it. */
.ngf-listing--flush-top {
  padding-top: 0;
}
.ngf-listing__pager {
  margin-top: var(--ngf-sp-10);
}
/* Core's pager markup (nav.pager > ul.pager__items > li.pager__item), styled
   to match the .ngf-pill treatment used by the filter-bar above the grid. */
.ngf-listing__pager .pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ngf-sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ngf-listing__pager .pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--ngf-sp-3);
  border-radius: 999px;
  border: 1px solid var(--ngf-border-strong);
  background: var(--ngf-white);
  color: var(--ngf-fg-1);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  text-decoration: none;
  transition: background-color var(--ngf-dur-fast) var(--ngf-ease-out), color var(--ngf-dur-fast) var(--ngf-ease-out), border-color var(--ngf-dur-fast) var(--ngf-ease-out);
}
.ngf-listing__pager .pager__item a:hover {
  background: var(--ngf-ink-800);
  color: var(--ngf-white);
  border-color: var(--ngf-ink-800);
}
.ngf-listing__pager .pager__item.is-active a {
  background: var(--ngf-ink-800);
  color: var(--ngf-white);
  border-color: var(--ngf-ink-800);
}
.ngf-listing__pager .pager__item--ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  color: var(--ngf-fg-2);
}
.ngf-listing__empty {
  margin: 0;
  font-family: var(--ngf-font-serif);
  color: var(--ngf-fg-2);
}