/* =============================================================================
   Landing page — New Seed Guatemala

   The visual language is taken from the methodological web
   (03_methodological_web/assets/styles.css + cosmo): same brand tokens, same
   Source Sans Pro, same card and callout geometry, so the three properties
   under newseed.azahardata.com read as one site.

   Contrast figures against white are the ones already measured for the
   methodological web and are not to be changed without re-measuring:
     --sn-red 4.94:1   --sn-red-dark 6.44:1   --sn-gray 4.83:1
     --sn-brown 11.47:1
   --sn-gold is used for borders and fills only, never for text.
   ========================================================================== */

:root {
  /* Brand tokens, verbatim from the methodological web */
  --sn-red: #C44441;
  --sn-red-dark: #A63937;
  --sn-red-light: #E57373;
  --sn-brown: #54311A;
  --sn-cream: #F5F5F0;
  --sn-gray: #6B7280;
  --sn-gold: #DA9441;
  --sn-gold-light: #FDF8F0;

  /* Layout tokens local to the landing */
  --sn-border: #e7e2da;
  --sn-rule: #e5e7eb;
  --sn-ink: #3a3a3a;
  /* --sn-gray on --sn-cream is 4.42:1. Same hue and saturation, lightness
     lowered to the first step that reaches AA on cream (4.55:1). Used only
     by the colophon and the footer, which sit on --sn-cream. */
  --sn-gray-on-cream: #69707E;
  /* One measure for every band, heroes and card grids included, so the left
     edge of the text never moves down the page. 820px is the width the
     methodological web gives .lead-paragraph and .section-intro.
     --wide is for site chrome only: the navbar. */
  --prose: 820px;
  --wide: 1080px;

  color-scheme: light;
}

/* The site it belongs to is light-only (theme: light: cosmo), so the palette
   is committed rather than theme-switched. Backgrounds are painted
   explicitly. */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--sn-ink);
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3, h4 {
  color: #1f1f1f;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1.1em; }

a { color: var(--sn-red); text-decoration: underline; }
a:hover { color: var(--sn-red-dark); }

:focus-visible {
  outline: 2px solid var(--sn-red-dark);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Skip link — same behaviour as the methodological web: off-screen until
   focused, first focusable element in the document.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.6rem 1.1rem;
  background: var(--sn-red-dark);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  text-decoration: underline;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  color: #ffffff;
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* -----------------------------------------------------------------------------
   Text read only by screen readers. Links that open a new tab carry one, so
   the change of tab is announced without altering what is on screen.
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   SITE NAVBAR
   Same red bar, white logo and link treatment as the methodological web, so
   moving between the three properties is visually continuous.
   ========================================================================== */
.site-nav { background: var(--sn-red); }
.nav-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo { height: 30px; width: auto; display: block; }
.nav-brand-text {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.98rem;
  border-left: 1px solid rgba(255,255,255,0.45);
  padding-left: 12px;
}
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.94rem;
  padding: 6px 12px;
  border-radius: 4px;
}
/* Nav icon. Inline SVG rather than the Bootstrap Icons webfont the
   methodological web loads: one glyph does not justify a font dependency.
   Same icon (bar-chart-line), same size relative to the label, and it
   inherits the link colour so it follows the hover state. */
.nav-links a svg {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  flex: none;
}
.nav-links a:hover { color: #ffffff; background: rgba(0,0,0,0.14); }
.nav-links a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.nav-links a.nav-cta {
  border: 1px solid #ffffff;
  font-weight: 600;
  margin-left: 6px;
}
.nav-links a.nav-cta:hover { background: #ffffff; color: var(--sn-red-dark); }

/* =============================================================================
   SECTION SCAFFOLD
   ========================================================================== */
.band { padding: 64px 24px; }
.band-cream { background: var(--sn-cream); }
.band-tight { padding: 44px 24px; }
.prose { max-width: var(--prose); margin: 0 auto; }

.band h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5em;
}
.eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sn-red-dark);
  margin: 0 0 10px;
}
.band-cream .eyebrow { color: var(--sn-brown); }

/* =============================================================================
   HERO — the red brand gradient used by the model diagram on the
   methodological web front page, with a single white rule under the title.
   All hero text is white: 4.94:1 on #C44441, the lighter end of the gradient,
   and 6.44:1 on #A63937. Focus rings are white here too, as in the navbar:
   the page-wide --sn-red-dark ring does not show against this ground.
   The top padding sets the visible gap between the navbar and the first ink
   of the title: about 78px on desktop and 58px on mobile.
   ========================================================================== */
.hero-sober {
  background: linear-gradient(135deg, #C44441 0%, #A63937 100%);
  color: #ffffff;
  padding: 67px 24px 60px;
}
.hero-sober .hero-inner { max-width: var(--prose); margin: 0 auto; }
.hero-sober h1 {
  color: #ffffff;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;
}
.hero-sober h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: #ffffff;
  margin-top: 22px;
}
.hero-sober .deck {
  font-size: 1.14rem;
  font-style: italic;
  color: #ffffff;
  max-width: 660px;
  margin-bottom: 1.6em;
}
.hero-sober .hero-body { max-width: 760px; font-size: 1.05rem; }
.hero-sober .hero-body p:last-of-type {
  font-weight: 600;
  color: #ffffff;
  font-size: 1.12rem;
}
.hero-sober .btn-row { margin-top: 26px; }
.hero-sober :focus-visible { outline-color: #ffffff; }

/* =============================================================================
   BUTTONS
   ========================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 11px 22px;
  border-radius: 6px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* White on --sn-red is 4.94:1; on --sn-red-dark, 6.44:1. */
.btn-primary { background: #ffffff; color: var(--sn-red-dark); border-color: #ffffff; }
.btn-primary:hover { background: #fbe8e6; color: var(--sn-red-dark); }
/* The ghost hover darkens its ground, as the navbar links do, so the white
   label stays above 4.5:1 across the whole gradient. */
.btn-ghost { color: #ffffff; border-color: rgba(255,255,255,0.75); }
.btn-ghost:hover { background: rgba(0,0,0,0.14); color: #ffffff; }
.btn-solid { background: var(--sn-red); color: #ffffff; border-color: var(--sn-red); }
.btn-solid:hover { background: var(--sn-red-dark); color: #ffffff; border-color: var(--sn-red-dark); }
.btn-outline { color: var(--sn-red-dark); border-color: var(--sn-red); background: #ffffff; }
.btn-outline:hover { background: var(--sn-red); color: #ffffff; }

/* =============================================================================
   PATHWAY — the "seed to impact" chain.
   ========================================================================== */
.pathway { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: step; }
.pathway li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 58px;
  line-height: 1.55;
}
.pathway li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  z-index: 1;              /* sits on top of the connector */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sn-red);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Connector. Drawn full-height on every step and passing behind the marker,
   so the steps join into one unbroken line whatever their height. The two
   ends are trimmed to the centre of the first and last marker. */
.pathway li::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 2px;
  background: var(--sn-border);
}
.pathway li:first-child::after { top: 16px; }
.pathway li:last-child { padding-bottom: 0; }
.pathway li:last-child::after { bottom: auto; height: 16px; }
/* Outlined markers instead of filled. */
.pathway.quiet li::before {
  background: #ffffff;
  color: var(--sn-red-dark);
  border: 2px solid var(--sn-red);
}

/* =============================================================================
   CALLOUTS
   .method-note is the gold panel the methodological web uses for its
   methodological asides.
   ========================================================================== */
.method-note {
  background: var(--sn-gold-light);
  border-left: 4px solid var(--sn-gold);
  border-radius: 6px;
  padding: 22px 26px;
  margin: 30px 0;
  line-height: 1.6;
}
.method-note :last-child { margin-bottom: 0; }
/* On cream the gold-light fill is too close to the ground to read as a panel,
   so the note turns white and keeps its gold rule. */
.band-cream .method-note { background: #ffffff; }

/* =============================================================================
   ACCESS CARDS — the two destinations (Shiny app, methodological web).
   Same geometry as .dimension-card: 1px border, 4px accent on top.
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  margin-top: 32px;
}
.access-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sn-border);
  border-top: 4px solid var(--sn-red);
  border-radius: 8px;
  padding: 26px 28px 28px;
  background: #ffffff;
}
.access-card.economic { border-top-color: var(--sn-gold); }
.access-card .card-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--sn-red);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 12px;
}
.access-card.economic .card-tag { background: var(--sn-brown); }
.access-card h3 { font-size: 1.22rem; margin-bottom: 0.5em; }
.access-card p { font-size: 0.98rem; }
.access-card .btn-row { margin-top: auto; padding-top: 8px; }

/* =============================================================================
   SUPPORT PANEL — the donation call.
   ========================================================================== */
.support-panel {
  border: 1px solid var(--sn-border);
  border-left: 5px solid var(--sn-red);
  border-radius: 8px;
  background: #ffffff;
  padding: 30px 32px;
  margin-top: 34px;
}
.support-panel p:last-of-type { margin-bottom: 1.4em; }

/* =============================================================================
   COLOPHON AND FOOTER
   ========================================================================== */
.colophon {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--sn-gray-on-cream);
  border-top: 1px solid var(--sn-rule);
  padding-top: 18px;
  margin-top: 34px;
}

.site-footer {
  background: var(--sn-cream);
  border-top: 1px solid var(--sn-rule);
  padding: 26px 24px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--sn-gray-on-cream);
}
.site-footer p { margin: 0; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .band { padding: 48px 20px; }
  .hero-sober { padding: 50px 20px 46px; }
  .nav-brand-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}