/* Site link/accent color (RGB 0,105,92). */

:root {
  --site-teal:        #00695C;
  --site-teal-light:  #26A69A;
  --site-teal-dark:   #004D40;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--site-teal);
  --md-primary-fg-color--light:  var(--site-teal-light);
  --md-primary-fg-color--dark:   var(--site-teal-dark);
  --md-accent-fg-color:          var(--site-teal);
  --md-typeset-a-color:          var(--site-teal);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--site-teal);
  --md-primary-fg-color--light:  var(--site-teal-light);
  --md-primary-fg-color--dark:   var(--site-teal-dark);
  --md-accent-fg-color:          var(--site-teal-light);
  --md-typeset-a-color:          var(--site-teal-light);
}

/* ==== Landing page (index.md) ==== */

.hero {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
  text-align: center;
}

.hero .eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-teal);
  margin-bottom: 0.75rem;
}

[data-md-color-scheme="slate"] .hero .eyebrow {
  color: var(--site-teal-light);
}

.md-typeset .hero h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.md-typeset .hero .subtitle {
  color: var(--md-default-fg-color--light);
  max-width: 36rem;
  margin: 0 auto 1.25rem;
}

.hero .actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Overview block sits between hero and cards */

.landing-overview {
  max-width: 64rem;
  margin: 1rem auto 2rem;
  text-align: center;
}

.landing-overview .mermaid {
  max-width: 60rem;
  margin: 1rem auto 0;
}

/* Mermaid stamps an intrinsic max-width inline on its <svg>, which wins
   over a normal selector by inline-style specificity. Override with
   !important so the diagram scales up to the wrapper's max-width. */
.landing-overview .mermaid svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Tighten hero on small screens */

@media (max-width: 48em) {
  .hero {
    padding: 2rem 0.75rem 1.5rem;
  }
  .md-typeset .hero h1 {
    font-size: 1.6rem;
  }
}