/* Visual identity for the kong-gateway docs.
   One accent colour, one gradient, generous spacing — the content here is dense and technical, so
   the styling exists to make it scannable, not to decorate it. */

:root {
  --kg-ink: #131a2b;
  --kg-accent: #2f6f6b;
  --kg-accent-soft: #e6f2f1;
  --kg-warn: #b4690e;
  --kg-danger: #b3261e;
  --md-primary-fg-color: #131a2b;
  --md-primary-fg-color--dark: #0c1120;
  --md-accent-fg-color: #2f6f6b;
  --md-typeset-a-color: #2f6f6b;
}

[data-md-color-scheme="slate"] {
  --kg-ink: #e7ecf5;
  --kg-accent: #67c9c1;
  --kg-accent-soft: rgba(103, 201, 193, .12);
  --kg-warn: #e9b949;
  --kg-danger: #ff8a80;
  --md-accent-fg-color: #67c9c1;
  --md-typeset-a-color: #67c9c1;
  --md-default-bg-color: #0e1320;
  --md-default-bg-color--light: #141a2a;
  --md-code-bg-color: #171e2f;
}

/* ---- Hero ------------------------------------------------------------- */

.kg-hero {
  margin: -1.2rem 0 2.4rem;
  padding: 2.6rem 2.2rem 2.2rem;
  border-radius: 1rem;
  color: #f4f7fb;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(103, 201, 193, .35) 0%, transparent 55%),
    linear-gradient(135deg, #131a2b 0%, #1d2a45 60%, #23364f 100%);
  box-shadow: 0 12px 32px rgba(19, 26, 43, .22);
}

.kg-hero h1 {
  margin: 0 0 .5rem;
  /* Scales down on a phone instead of hyphenating "kong-gateway" across two lines. */
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  hyphens: none;
  overflow-wrap: normal;
}

.kg-hero p {
  margin: 0;
  max-width: 46rem;
  font-size: .82rem;
  line-height: 1.7;
  color: rgba(244, 247, 251, .82);
}

.kg-hero .kg-kicker {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .18rem .62rem;
  border-radius: 999px;
  background: rgba(103, 201, 193, .18);
  border: 1px solid rgba(103, 201, 193, .38);
  color: #9fe3dc;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.kg-hero .kg-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }

.kg-hero .kg-actions a {
  display: inline-flex;
  align-items: center;
  padding: .48rem 1rem;
  border-radius: .5rem;
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.kg-hero .kg-actions a:hover { transform: translateY(-1px); }
.kg-hero .kg-actions .kg-primary { background: #67c9c1; color: #0d1524; }
.kg-hero .kg-actions .kg-primary:hover { background: #86dbd4; }
.kg-hero .kg-actions .kg-ghost {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #eef3f9;
}
.kg-hero .kg-actions .kg-ghost:hover { background: rgba(255, 255, 255, .14); }

/* ---- Cards ------------------------------------------------------------ */

.md-typeset .grid.cards > ul > li {
  border-radius: .7rem;
  border-color: var(--md-default-fg-color--lightest);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-2px);
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 8px 22px rgba(19, 26, 43, .12);
}
.md-typeset .grid.cards > ul > li > hr { margin: .7rem 0; }

/* ---- Status pills, used in the milestone tables ----------------------- */

.md-typeset .kg-pill {
  display: inline-block;
  padding: .08rem .5rem;
  border-radius: 999px;
  font-family: var(--md-code-font-family);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.md-typeset .kg-pass  { background: var(--kg-accent-soft); color: var(--kg-accent); }
.md-typeset .kg-xfail { background: rgba(233, 185, 73, .18); color: var(--kg-warn); }
.md-typeset .kg-red   { background: rgba(179, 38, 30, .12); color: var(--kg-danger); }

/* ---- Typography and tables -------------------------------------------- */

.md-typeset h2 {
  margin-top: 2.4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  font-weight: 650;
}
.md-typeset h3 { font-weight: 650; }

.md-typeset table:not([class]) {
  border-radius: .55rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--md-default-fg-color--lightest);
  border: none;
}
.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color--light);
  font-weight: 650;
  letter-spacing: .02em;
}
.md-typeset table:not([class]) tr:hover td { background: var(--md-default-fg-color--lightest); }

.md-typeset :is(pre, .highlight) > code,
.md-typeset .highlight { border-radius: .5rem; }

.md-typeset .admonition, .md-typeset details { border-radius: .55rem; }

/* The footer's "Made with Material" line is fine, but the nav deserves a little breathing room. */
.md-nav__title { font-weight: 650; }

@media screen and (max-width: 44.9375em) {
  .kg-hero { margin-top: -.6rem; padding: 1.8rem 1.3rem 1.5rem; border-radius: .8rem; }
  .kg-hero .kg-actions a { flex: 1 1 auto; justify-content: center; }
}