/* ============================================================================
   Genemap — Brand Override Layer
   ----------------------------------------------------------------------------
   Re-skins every existing page with the new Genemap brand identity:
     · Archivo Black wordmark (logo)
     · Instrument Serif for editorial display headings
     · DM Sans for body / labels / UI
     · Dark green accent (Clear Creek Pastoral Co palette)
     · Removes JetBrains Mono from production UI (kept only for code blocks)

   Loads AFTER core.css and helix.css so it overrides their rules.

   Pages keep their existing structure, classes and JS. This file changes
   nothing structural — only the visible brand voice.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* Override the global display token — Instrument Serif everywhere */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-brand: "Archivo Black", Arial, sans-serif;
}

/* ---- Topbar (rendered by nav.js) -------------------------------------- */
.mgt-topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
  padding: 18px 32px !important;
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-body);
}

.mgt-topbar .mgt-brand {
  font-family: var(--font-brand) !important;
  font-weight: 900 !important;
  color: var(--accent-dark) !important;
  font-size: 28px !important;
  letter-spacing: -0.022em;
  line-height: 1;
  text-decoration: none;
}
.mgt-topbar .mgt-brand .product {
  display: none !important; /* hide redundant product label, brand mark stands alone */
}
.mgt-topbar .mgt-nav { display: flex; gap: 22px; }
.mgt-topbar .mgt-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--soft);
  text-decoration: none;
  transition: color 0.15s;
}
.mgt-topbar .mgt-nav a:hover,
.mgt-topbar .mgt-nav a.active {
  color: var(--accent-dark);
}
.mgt-topbar .mgt-spacer { flex: 1; }
.mgt-topbar .mgt-cross-link {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}
.mgt-topbar .mgt-cross-link:hover { border-color: var(--accent); color: var(--accent); }
.mgt-topbar .mgt-user {
  font-size: 13px;
  color: var(--muted);
}
.mgt-topbar .mgt-user a { color: var(--accent); margin-left: 8px; text-decoration: none; }

/* ---- Page chrome -------------------------------------------------------- */
body { font-family: var(--font-body) !important; -webkit-font-smoothing: antialiased; }

/* H1 / H2 — Instrument Serif for editorial weight */
h1, .h1, .doc-prose h1, main h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
h2, .h2, .doc-prose h2, main h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ink);
}
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
}

/* Italic accent in display headings stays in dark green */
h1 em, h2 em, h3 em { color: var(--accent); font-style: italic; font-weight: 500; }

/* Subtitles */
.subtitle, .lede {
  color: var(--soft);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
}

/* ---- Buttons: pill-shaped, more confident ------------------------------ */
.btn, .btn-primary, .btn-secondary, .btn-ghost, button.btn {
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); }

/* ---- Cards: softer, more modern -------------------------------------- */
.card {
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: var(--card);
}

/* ---- Badges (used as page sub-context) -------------------------------- */
.badge {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 12px;
  vertical-align: 4px;
  font-family: var(--font-body);
}

/* ---- Footer (rendered by nav.js) -------------------------------------- */
.mgt-footer {
  border-top: 1px solid var(--border-light);
  padding: 36px 32px;
  background: var(--paper);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-body);
}
.mgt-footer a { color: var(--soft); text-decoration: none; }
.mgt-footer a:hover { color: var(--accent); }
.mgt-footer .version {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---- Calibration banner ----------------------------------------------- */
.calib-banner {
  margin: 22px auto;
  max-width: 1100px;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn);
  font-size: 13.5px;
  font-family: var(--font-body);
}
.calib-banner.ok {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
}
.calib-banner a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ---- Mono is reserved for code blocks only ---------------------------- */
.doc-prose pre, .doc-prose code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
/* Strip mono out of any general use in navigation, labels, etc.
   NOTE: h3/h4/h5/h6 deliberately NOT in this list — page-level styles
   need to be able to set them to Instrument Serif for maths blocks,
   citation blocks, principle cards, etc. The base h3-h6 default of
   var(--font-body) is still set above (line 95-98) without !important,
   so pages that don't override still get DM Sans as before. */
.subtitle, .badge, .stat-label, .ai-tag, .small-label, .section-eyebrow,
.eyebrow, .doc-eyebrow, label {
  font-family: var(--font-body) !important;
}
/* Display fonts: editorial serif by default. The brand wordmark
   (.brand-mark, .mgt-brand) keeps Archivo Black via its own rules,
   so do NOT !important the family — let element-level rules win. */
h1, h2, .doc-prose h1, .doc-prose h2 { font-family: var(--font-display); }
.brand-mark, .mgt-brand { font-family: "Archivo Black", Arial, sans-serif !important; }

/* ---- Wizard step strip ----------------------------------------------- */
.step-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 28px 0 36px;
}
.step-strip a, .step-strip span {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border-light);
  font-size: 12.5px;
  color: var(--soft);
  text-decoration: none;
}
.step-strip a:hover { border-color: var(--accent); color: var(--accent-dark); }
.step-strip .active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---- Wizard footer --------------------------------------------------- */
.wizard-footer {
  border-top: 1px solid var(--border-light);
  background: var(--card);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
}

/* ---- Heading sub-explainer "h-sub" ----------------------------------- */
.h-sub {
  font-size: 14px;
  color: var(--soft);
  line-height: 1.55;
  margin-bottom: 18px;
  font-family: var(--font-body);
}

/* ---- Form fields: rounded, friendly, modern -------------------------- */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  background: var(--paper);
  transition: border-color 0.15s, background 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
}

/* ---- Tables: cleaner ---------------------------------------------- */
table { font-family: var(--font-body); }

/* ---- Country / global indicator strip in topbar (NEW) -------------- */
.mgt-country-chip {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-left: 14px;
  padding: 4px 10px;
  background: var(--paper);
  border-radius: 999px;
  border: 1px solid var(--border-light);
}
.mgt-country-chip .flag { margin-right: 4px; }

/* ============================================================================
   Mobile responsive — marketing-surface topbar
   ----------------------------------------------------------------------------
   Every marketing page declares its own .topbar in an inline <style> block.
   The default declarations don't wrap and overflow on small viewports. This
   global media query hides .nav items below 700px and reduces topbar padding
   so the brand wordmark + sign-in remain visible. Pages can still surface
   navigation via the rich footer Company/Product/Use columns (which are
   already responsive via their own grid-template-columns: 1fr breakpoints).
   ============================================================================ */
@media (max-width: 700px) {
  .topbar {
    padding: 18px 20px !important;
    gap: 14px !important;
  }
  .topbar .brand {
    font-size: 24px !important;
  }
  .topbar .nav {
    display: none !important;
  }
  .topbar .signin {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    margin-left: auto !important;
  }
  /* Hero h1 still readable below 700px */
  h1 {
    font-size: clamp(32px, 9vw, 44px) !important;
  }
}