/* ============================================================
   U.S. Stablecoin Field Guide — MkDocs Material Overrides
   v0.7 — June 5, 2026
   Target: docs/stylesheets/extra.css
   ============================================================ */

/* ── Kepler Std font (Adobe Fonts) ─────────────────────────── */
/* Embed tag goes in mkdocs.yml or overrides/main.html:        */
/* <link rel="stylesheet" href="https://use.typekit.net/yvg2lbe.css"> */

:root {
  --sfg-font-body:    "kepler-std", Georgia, "Times New Roman", serif;
  --sfg-font-display: "kepler-std-condensed-subhead", "kepler-std", Georgia, "Times New Roman", serif;
  --sfg-font-sub:     "kepler-std-condensed-subhead", "kepler-std", Georgia, "Times New Roman", serif;
}

/* Apply Kepler to all body text */
body,
.md-content,
.md-typeset {
  font-family: var(--sfg-font-body) !important;
  font-weight: 300;
}

/* Display optical size for h1 */
.md-typeset h1 {
  font-family: var(--sfg-font-display) !important;
  font-weight: 700;
}

/* Subhead optical size for h2–h3 */
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--sfg-font-sub) !important;
  font-weight: 600;
}

/* Keep code blocks monospace */
.md-typeset code,
.md-typeset pre {
  font-family: "Roboto Mono", "Courier New", monospace !important;
}

/* ── Color palette ─────────────────────────────────────────── */
:root {
  --sfg-green-500:    #006605;
  --sfg-green-600:    #004d04;
  --sfg-green-50:     #f0f7f0;
  --sfg-green-200:    #b3d4b3;
  --sfg-green-400:    #339933;
  --color-text:       #1a1f36;
  --color-text-muted: #697386;
  --color-text-subtle:#8898aa;
  --color-border:     #e6e8ea;
  --color-heading:    #1a1f36;
  --radius:           6px;
  --transition:       0.15s ease;
}

/* Material primary color overrides */
[data-md-color-primary] {
  --md-primary-fg-color:        var(--sfg-green-500);
  --md-primary-fg-color--light: var(--sfg-green-400);
  --md-primary-fg-color--dark:  var(--sfg-green-600);
  --md-accent-fg-color:         var(--sfg-green-500);
}

/* ── Left Sidebar ──────────────────────────────────────────── */

/* Sidebar background and border */
.md-sidebar--primary .md-sidebar__scrollwrap {
  background: #ffffff;
  border-right: 1px solid var(--color-border);
}

/* Section labels — uppercase, small, muted */
.md-nav__title {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-subtle) !important;
  padding: 12px 16px 4px 20px !important;
  background: transparent !important;
  font-family: "kepler-std", Georgia, serif !important;
}

/* Hide top-level site title in left nav */
.md-nav--primary > .md-nav__title {
  display: none;
}

/* Nav link base */
.md-nav__item .md-nav__link {
  font-size: 0.845rem !important;
  font-family: var(--sfg-font-body) !important;
  color: var(--color-text) !important;
  padding: 5px 16px 5px 20px !important;
  border-left: 3px solid transparent;
  transition: color var(--transition), border-left-color var(--transition), background var(--transition);
  line-height: 1.45;
}

/* Hover */
.md-nav__item .md-nav__link:hover {
  color: var(--sfg-green-500) !important;
}

/* Active / current page */
.md-nav__item .md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--sfg-green-500) !important;
  border-left-color: var(--sfg-green-500) !important;
  font-weight: 600 !important;
  background: var(--sfg-green-50) !important;
}

/* Nested nav items */
.md-nav__item .md-nav .md-nav__link {
  padding-left: 32px !important;
  font-size: 0.82rem !important;
}

/* ── Right Sidebar (TOC) ───────────────────────────────────── */

/* "On This Page" label */
.md-sidebar--secondary .md-nav__title {
  font-size: 0 !important;        /* hide original translated text */
  visibility: visible !important;
}
.md-sidebar--secondary .md-nav__title::before {
  content: "On This Page";
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  font-family: "kepler-std", Georgia, serif;
}

/* TOC links — ~3px smaller than Material default */
.md-sidebar--secondary .md-nav__link {
  font-size: 0.69rem !important;
  font-family: var(--sfg-font-body) !important;
  color: var(--color-text-muted) !important;
  padding: 3px 0 3px 12px !important;
  border-left: 2px solid var(--color-border) !important;
  line-height: 1.45 !important;
}

/* TOC nested (h3) */
.md-sidebar--secondary .md-nav__item .md-nav .md-nav__link {
  font-size: 0.65rem !important;
  padding-left: 20px !important;
}

/* TOC hover */
.md-sidebar--secondary .md-nav__link:hover {
  color: var(--color-text) !important;
  border-left-color: var(--sfg-green-400) !important;
}

/* TOC active */
.md-sidebar--secondary .md-nav__link--active {
  color: var(--sfg-green-600) !important;
  border-left-color: var(--sfg-green-500) !important;
  font-weight: 600 !important;
}

/* ── Hero block ────────────────────────────────────────────── */
.hero {
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 36px;
}
.hero img.hero-logo {
  height: 48px;
  width: auto;
  margin-bottom: 18px;
  display: block;
}
.hero h1 {
  font-size: 2.1rem !important;
  font-family: var(--sfg-font-display) !important;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
}
.hero .tagline {
  font-size: 1.0rem;
  font-family: var(--sfg-font-body);
  color: var(--color-text-muted);
  max-width: 580px;
  line-height: 1.6;
}

/* ── POC notice ────────────────────────────────────────────── */
.poc-notice {
  background: #fffbeb;
  border: 1px solid #f0d070;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 0.83rem;
  font-family: var(--sfg-font-body);
  color: #6b4c00;
  line-height: 1.55;
}
.poc-notice strong {
  color: #4a3300;
  font-weight: 700;
}

/* ── Section card grid ─────────────────────────────────────── */
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.section-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none !important;
  color: inherit !important;
  transition: all var(--transition);
  display: block;
}
.section-card:hover {
  border-color: var(--sfg-green-400);
  box-shadow: 0 2px 8px rgba(30,120,60,0.08);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.section-card .card-section {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sfg-green-600);
  font-family: "kepler-std", Georgia, serif;
  margin-bottom: 5px;
}
.section-card h3 {
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  font-family: var(--sfg-font-sub) !important;
  color: var(--color-heading) !important;
  margin: 0 0 5px !important;
  border: none !important;
  padding: 0 !important;
}
.section-card p {
  font-size: 0.81rem;
  font-family: var(--sfg-font-body);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Survey / Comment SVP block ────────────────────────────── */
.survey-block {
  background: var(--sfg-green-50);
  border: 1px solid var(--sfg-green-200);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 40px 0;
  text-align: center;
}
.survey-block h3 {
  font-size: 1.05rem !important;
  font-family: var(--sfg-font-sub) !important;
  color: var(--color-heading) !important;
  margin: 0 0 6px !important;
  border: none !important;
  padding: 0 !important;
}
.survey-block p {
  color: var(--color-text-muted);
  font-family: var(--sfg-font-body);
  font-size: 0.875rem;
  margin: 0 0 16px;
}
.survey-btn {
  display: inline-block;
  font-size: 0.87rem;
  font-weight: 600;
  font-family: var(--sfg-font-body);
  color: #fff !important;
  background: var(--sfg-green-500);
  border-radius: var(--radius);
  padding: 9px 22px;
  text-decoration: none !important;
  transition: background var(--transition);
}
.survey-btn:hover {
  background: var(--sfg-green-600);
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Homepage h2 section headings ──────────────────────────── */
/* Slightly more breathing room above section headers on homepage */
.md-content article h2 {
  margin-top: 40px;
  padding-top: 0;
  border-bottom: none;
}

/* ── Heading spacing — tighter rhythm ─────────────────────── */
/* Remove space below headings so they sit directly on the      */
/* paragraph beneath; reduce space above by 50%.                */
/* Material defaults (em): h1 ~0 top / ~1.25em bottom via flow  */
/* h2 1.5625em top / 0.8em bottom                               */
/* h3 1.25em top  / 0.8em bottom                                */
/* h4 1.0em top   / 0.8em bottom                                */
.md-typeset h1 {
  margin-bottom: 0 !important;
}
.md-typeset h2 {
  margin-top:    0.78em !important;  /* 1.5625 × 0.5 */
  margin-bottom: 0      !important;
}
.md-typeset h3 {
  margin-top:    0.625em !important; /* 1.25 × 0.5   */
  margin-bottom: 0       !important;
}
.md-typeset h4 {
  margin-top:    0.5em !important;   /* 1.0 × 0.5    */
  margin-bottom: 0     !important;
}

/* Collapse the paragraph top-margin that creates the visual gap  */
/* "below" a heading. Move that space to margin-bottom instead,   */
/* so paragraph-to-paragraph spacing is unchanged.                */
/* Material default p margin-top is ~0.6em; bottom is ~0.         */
.md-typeset h1 + p,
.md-typeset h2 + p,
.md-typeset h3 + p,
.md-typeset h4 + p {
  margin-top:    0      !important;
  margin-bottom: 0.6em  !important;
}

/* ── Page metadata line (trust block) ──────────────────────── */
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 20px;
  padding: 8px 12px;
  border-left: 3px solid #cfd6df;
  background: #f7f8fa;
  border-radius: var(--radius);
  font-family: var(--sfg-font-body);
  font-size: 0.74rem;
  line-height: 1.5;
  color: #4a5560;
}
.page-meta a { color: inherit; text-decoration: underline; }
.page-meta__flag {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}
.page-meta--archived { border-left-color: #c8a44a; background: #fdf8ec; color: #6b4c00; }
.page-meta--reference { border-left-color: #7fa6c9; background: #eef4fa; }

/* ── Email capture: signup bar, form, briefing link (v1.0) ─── */
.md-banner { background: var(--sfg-green-600); color: #fff; }
.md-banner__inner { margin: 0.4rem auto; font-size: 0.75rem; }
.sfg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.6rem; }
.sfg-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.sfg-bar__cta { font-weight: 700; background: #fff; color: var(--sfg-green-600) !important; text-decoration: none !important; padding: 0.15rem 0.7rem; border-radius: var(--radius); }
.sfg-bar__cta:hover, .sfg-bar__cta:focus { background: var(--sfg-green-50); }

.sfg-signup { margin: 2.5rem 0 1rem; padding: 1.4rem 1.5rem; background: var(--sfg-green-50); border: 1px solid var(--sfg-green-200); border-radius: var(--radius); }
.md-typeset .sfg-signup__title { margin: 0 0 0.3rem; font-size: 1.15rem; color: var(--color-heading); }
.md-typeset .sfg-signup__promise { margin: 0 0 0.9rem; color: var(--color-text-muted); }
.sfg-signup__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sfg-signup__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sfg-signup__row input { flex: 1 1 14rem; min-width: 0; padding: 0.55rem 0.75rem; font: inherit; font-size: 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; color: var(--color-text); }
.sfg-signup__row input:focus { outline: 2px solid var(--sfg-green-400); outline-offset: 1px; }
.sfg-signup__row button { padding: 0.55rem 1.2rem; font: inherit; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--sfg-green-500); border: 0; border-radius: var(--radius); cursor: pointer; }
.sfg-signup__row button:hover, .sfg-signup__row button:focus { background: var(--sfg-green-600); }
.sfg-signup__hp { position: absolute; left: -5000px; }
.md-typeset .sfg-signup__status { min-height: 1.2em; margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--sfg-green-600); }
.md-typeset .sfg-signup__fine { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--color-text-muted); }
.md-typeset .sfg-signup__status.is-error { color: #a4161a; }
.sfg-signup__row button:disabled { opacity: 0.7; cursor: wait; }

/* ---- Top tabs: Subscribe sits at the far right (last nav item) ---- */
.md-tabs__list { width: 100%; }
.md-tabs__item:last-child { margin-left: auto; }

/* ---- Glossary page: full-width three-column table (fixed widths on wider screens) ---- */
.sfg-glossary table:not([class]) td { vertical-align: top; }
@media screen and (min-width: 45em) {
  .sfg-glossary .md-typeset__table { display: block; }
  .sfg-glossary table:not([class]) { display: table; width: 100%; table-layout: fixed; }
  .sfg-glossary table:not([class]) th:nth-child(1) { width: 22%; }
  .sfg-glossary table:not([class]) th:nth-child(2) { width: 58%; }
  .sfg-glossary table:not([class]) th:nth-child(3) { width: 20%; }
}
@media screen and (max-width: 44.99em) {
  .sfg-glossary table:not([class]) td:first-child { min-width: 8rem; }
  .sfg-glossary table:not([class]) td:nth-child(2) { min-width: 14rem; }
  .sfg-glossary table:not([class]) td:last-child { min-width: 7rem; }
}

/* ---- Glossary controls: Type filter and sortable Type header ---- */
.sfg-glossary__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.8rem; font-size: 0.75rem; }
.sfg-glossary__controls label { font-weight: 700; }
.sfg-glossary__controls select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; color: var(--color-text); }
.sfg-glossary__controls select:focus { outline: 2px solid var(--sfg-green-400); outline-offset: 1px; }
.sfg-glossary__count { color: var(--color-text-muted); }
.sfg-glossary__sort { font: inherit; font-weight: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.sfg-glossary__sort:hover, .sfg-glossary__sort:focus-visible { color: var(--sfg-green-500); }
.sfg-glossary__arrow::after { content: "\21C5"; opacity: 0.55; }
.sfg-glossary__sort.is-active .sfg-glossary__arrow::after { content: "\25B2"; opacity: 1; font-size: 0.7em; }
.sfg-glossary__sort.is-active { color: var(--sfg-green-600); }

/* ---- Green-header tables (matches the graphic tables, e.g. Stablecoin v. ACH) ----
   Wrap a Markdown table in <div class="sfg-table-green" markdown> ... </div>. */
.md-typeset .sfg-table-green table:not([class]) th {
  background-color: var(--sfg-green-500);
  color: #fff;
  border-color: var(--sfg-green-500);
}
.md-typeset .sfg-table-green table:not([class]) th a { color: #fff; }

/* ---- Buy-Side Summary: full width, persona column wider ---- */
@media screen and (min-width: 45em) {
  .sfg-buyside .md-typeset__table { display: block; }
  .sfg-buyside table:not([class]) { display: table; width: 100%; table-layout: fixed; }
  .sfg-buyside table:not([class]) th:nth-child(1) { width: 22%; }
  .sfg-buyside table:not([class]) th:nth-child(2) { width: 31%; }
  .sfg-buyside table:not([class]) th:nth-child(3) { width: 31%; }
  .sfg-buyside table:not([class]) th:nth-child(4) { width: 16%; }
}
.sfg-buyside table:not([class]) td { vertical-align: top; }

/* Use Cases Overview: DMA score tables fit the content column */
.md-typeset .sfg-score-table .md-typeset__table,
.md-typeset .sfg-score-table table:not([class]) { display: table; width: 100%; table-layout: fixed; font-size: 0.64rem; }
.md-typeset .sfg-score-table .md-typeset__scrollwrap { overflow-x: visible; }
.md-typeset .sfg-score-table table:not([class]) th,
.md-typeset .sfg-score-table table:not([class]) td { padding: 0.45em 0.5em; vertical-align: top; overflow-wrap: break-word; hyphens: manual; }
.md-typeset .sfg-score-full th:nth-child(1) { width: 4%; }
.md-typeset .sfg-score-full th:nth-child(2) { width: 13%; }
.md-typeset .sfg-score-full th:nth-child(3) { width: 5%; }
.md-typeset .sfg-score-full th:nth-child(4) { width: 10%; }
.md-typeset .sfg-score-full th:nth-child(5) { width: 20%; }
.md-typeset .sfg-score-full th:nth-child(6) { width: 17%; }
.md-typeset .sfg-score-full th:nth-child(7) { width: 17%; }
.md-typeset .sfg-score-full th:nth-child(8) { width: 14%; }
.md-typeset .sfg-score-top th:nth-child(1) { width: 6%; }
.md-typeset .sfg-score-top th:nth-child(2) { width: 30%; }
.md-typeset .sfg-score-top th:nth-child(3) { width: 12%; }
.md-typeset .sfg-score-top th:nth-child(4) { width: 52%; }