/* ===========================================================================
   Pyre — Ember theme for MkDocs Material
   Vivid ember-orange flame + cream on near-black with an amber glow.
   =========================================================================== */

:root {
  --pyre-ember:        #F2683C;  /* the flame */
  --pyre-ember-bright: #FF7A45;
  --pyre-ember-soft:   #FF9A6B;
  --pyre-cream:        #F3E9DD;  /* the droplet highlight */
  --pyre-ink:          #0F0C0B;  /* page background */
  --pyre-ink-2:        #15110F;  /* header / cards */
  --pyre-ink-3:        #1C1714;  /* code / raised surfaces */
  --pyre-line:         #2A211C;
}

/* ---- Dark scheme variable overrides ------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 20;

  --md-primary-fg-color:        var(--pyre-ink-2);
  --md-primary-fg-color--light: #2A1E18;
  --md-primary-fg-color--dark:  #0B0807;

  --md-accent-fg-color:         var(--pyre-ember-bright);

  --md-default-bg-color:        var(--pyre-ink);
  --md-default-fg-color:        #ECE3DA;
  --md-default-fg-color--light: #C9BDB2;
  --md-default-fg-color--lighter: #8C8077;

  --md-typeset-a-color:         var(--pyre-ember);
  --md-code-bg-color:           var(--pyre-ink-3);
  --md-code-fg-color:           #E9DFD4;

  --md-footer-bg-color:         #0B0807;
  --md-footer-bg-color--dark:   #080605;
}

/* Header: near-black with a hairline ember underline */
.md-header {
  background-color: var(--pyre-ink-2);
  border-bottom: 1px solid var(--pyre-line);
  box-shadow: 0 0 24px rgba(242, 104, 60, 0.08);
}
.md-tabs { background-color: var(--pyre-ink-2); }

/* Logo gets a soft ember glow so the flame reads on the dark bar */
.md-header__button.md-logo img {
  filter: drop-shadow(0 0 6px rgba(242, 104, 60, 0.45));
}

/* Links + accents */
.md-typeset a { color: var(--pyre-ember); }
.md-typeset a:hover { color: var(--pyre-ember-bright); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--pyre-ember-bright); }

/* Search */
.md-search__input { background-color: rgba(255,255,255,0.06); }

/* Headings: subtle warmth + a flame bullet on H2 */
.md-typeset h1 { color: #FBF4EC; font-weight: 800; letter-spacing: -0.02em; }
.md-typeset h2 {
  color: #F8EEE4;
  font-weight: 700;
  border-bottom: 1px solid var(--pyre-line);
  padding-bottom: .3rem;
}
.md-typeset h3 { color: var(--pyre-ember-soft); }

/* Inline code + field names */
.md-typeset code {
  background-color: var(--pyre-ink-3);
  border: 1px solid var(--pyre-line);
  border-radius: .3rem;
}

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid var(--pyre-line);
}
.md-typeset table:not([class]) th {
  background-color: var(--pyre-ink-2);
  color: var(--pyre-cream);
}

/* Admonitions: ember-tinted note/tip */
.md-typeset .admonition,
.md-typeset details {
  border-radius: .4rem;
  border-left-width: .2rem;
}
.md-typeset .admonition.tip > .admonition-title,
.md-typeset .admonition.note > .admonition-title {
  background-color: rgba(242, 104, 60, 0.12);
}

/* ---- Grid cards (used on Home + section landings) ----------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--pyre-line);
  border-radius: .6rem;
  background: linear-gradient(180deg, #16110E 0%, #120E0C 100%);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--pyre-ember);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(242, 104, 60, 0.10);
}

/* ---- Hero (Home page) --------------------------------------------------- */
.pyre-hero {
  position: relative;
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
  margin: -1.2rem 0 1.5rem;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(242,104,60,0.18) 0%, rgba(242,104,60,0) 60%),
    var(--pyre-ink);
  border-bottom: 1px solid var(--pyre-line);
}
.pyre-hero img.pyre-hero__logo {
  width: 76px; height: 76px;
  filter: drop-shadow(0 0 26px rgba(242,104,60,0.55));
}
.pyre-hero h1 {
  font-size: 2.9rem;
  margin: .6rem 0 .2rem;
  background: linear-gradient(92deg, #FFFFFF 0%, var(--pyre-ember-soft) 60%, var(--pyre-ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pyre-hero__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: .5rem;
}
.pyre-hero__brand h1 { margin: .2rem 0; }
.pyre-hero p.pyre-hero__tagline {
  font-size: 1.15rem;
  color: var(--pyre-cream);
  max-width: 40rem;
  margin: .2rem auto .4rem;
}
.pyre-hero p.pyre-hero__sub {
  color: var(--md-default-fg-color--light);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pyre-hero p.pyre-hero__pitch {
  color: var(--pyre-cream);
  font-size: 1.05rem;
  max-width: 42rem;
  margin: .1rem auto .2rem;
  line-height: 1.5;
}

/* Highlight chips row (Home) — slightly tighter than full cards */
.md-typeset .grid.pyre-chips { margin-top: 1.2rem; }
.md-typeset .grid.pyre-chips > ul > li { padding: .8rem 1rem; }
.md-typeset .grid.pyre-chips .lg { color: var(--pyre-ember); }

/* Hero buttons */
.pyre-cta { margin-top: 1.2rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.md-typeset .pyre-cta .md-button {
  border-radius: 2rem;
  border-width: 2px;
  color: var(--pyre-ember);
  border-color: var(--pyre-ember);
}
.md-typeset .pyre-cta .md-button:hover {
  color: #1a0d07;
  background-color: var(--pyre-ember-bright);
  border-color: var(--pyre-ember-bright);
}
.md-typeset .pyre-cta .md-button--primary {
  background-color: var(--pyre-ember);
  border-color: var(--pyre-ember);
  color: #1a0d07;
  font-weight: 700;
}
.md-typeset .pyre-cta .md-button--primary:hover {
  background-color: var(--pyre-ember-bright);
  border-color: var(--pyre-ember-bright);
}

/* Pill row under the hero */
.pyre-pills { text-align:center; margin: 0 0 1.4rem; }
.pyre-pills span {
  display:inline-block;
  margin:.2rem;
  padding:.25rem .7rem;
  font-size:.78rem;
  color: var(--pyre-cream);
  border:1px solid var(--pyre-line);
  border-radius:2rem;
  background: var(--pyre-ink-2);
}

/* Footer flame tint */
.md-footer-meta { border-top: 1px solid var(--pyre-line); }

/* Make the content a touch wider/cozier */
@media screen and (min-width: 76.25em) {
  .md-grid { max-width: 64rem; }
}