/* ==========================================================================
   MassMod brand theme for MkDocs Material
   Palette extracted from docs/assets/mm_logo.svg (blue -> indigo -> purple):
     blue #0060F8 · mid-blue #0080F8 · indigo #5030E0 · blue-violet #2050E0
     purple #6050C0 · light purple #7860D8
   This file is loaded via `extra_css` in mkdocs.yml.
   ========================================================================== */

:root {
  --mm-blue: #0060f8;
  --mm-blue-light: #0080f8;
  --mm-indigo: #5030e0;
  --mm-violet: #2050e0;
  --mm-purple: #6050c0;
  --mm-purple-light: #7860d8;
  --mm-gradient: linear-gradient(135deg, #0060f8 0%, #5030e0 55%, #6050c0 100%);
  --mm-gradient-soft: linear-gradient(135deg, #0060f8 0%, #6050c0 100%);
}

/* --- Brand the Material colour tokens (light scheme) --------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #2a2b6b;          /* deep brand indigo for the header */
  --md-primary-fg-color--light: #5030e0;
  --md-primary-fg-color--dark: #1c1d4d;
  --md-accent-fg-color: #5030e0;           /* interactive / hover */
  --md-typeset-a-color: #3a2fd0;           /* body links */
}

/* --- Dark scheme keeps the brand legible -------------------------------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1a1b40;
  --md-primary-fg-color--light: #7860d8;
  --md-primary-fg-color--dark: #101128;
  --md-accent-fg-color: #7860d8;
  --md-typeset-a-color: #9d8bff;
}

/* --- Header + tabs: dark bar so the colourful logo + white text read -----
   (the bright brand gradient is reserved for the hero, where text is large
   and always white). A thin brand underline keeps the brand present.       */
.md-header {
  background: #14143a;
  box-shadow: 0 2px 10px rgba(10, 10, 40, 0.35);
}
.md-tabs {
  background: #14143a;
  box-shadow: inset 0 -3px 0 var(--mm-indigo);
}
.md-header__title {
  font-weight: 700;
}
/* Give the logo more presence against the dark bar */
.md-header .md-logo img,
.md-header .md-logo svg {
  height: 1.7rem;
  width: auto;
}

/* ==========================================================================
   Hero band (contained, rounded, gradient)
   Usage in Markdown (with md_in_html):
     <div class="mm-hero" markdown> ... </div>
   ========================================================================== */
.mm-hero {
  background: var(--mm-gradient);
  color: #fff;
  border-radius: 18px;
  padding: 3rem 2.4rem;
  margin: 0.5rem 0 2.2rem;
  box-shadow: 0 18px 40px -18px rgba(48, 32, 160, 0.55);
  position: relative;
  overflow: hidden;
}
.mm-hero::after {
  /* subtle geometric shimmer echoing the logo blocks */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.18), transparent 42%),
    radial-gradient(circle at 12% 92%, rgba(255, 255, 255, 0.10), transparent 40%);
  pointer-events: none;
}
.mm-hero > * { position: relative; z-index: 1; }
.mm-hero .md-typeset h1,
.mm-hero h1 {
  color: #fff;
  font-weight: 800;
  font-size: 2.35rem;
  line-height: 1.12;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.mm-hero .mm-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.9;
  margin: 0 0 0.9rem;
}
.mm-hero p {
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 42rem;
  opacity: 0.97;
}
.mm-hero .mm-cta {
  margin-top: 1.4rem;
}
/* .mm-cta may hold the buttons directly or wrapped in a Markdown <p>;
   make whichever holds them the flex row so the gap applies. */
.md-typeset .mm-cta,
.md-typeset .mm-cta > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}
.md-typeset .mm-cta .md-button { margin: 0; }

/* ==========================================================================
   Buttons (brand variants of Material's .md-button)
   ========================================================================== */
.md-typeset .md-button.mm-btn {
  background: #fff;
  color: #2a2b6b;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.md-typeset .md-button.mm-btn:hover {
  background: #f3f2ff;
  color: #2a2b6b;
}
.md-typeset .md-button.mm-btn-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 10px;
  font-weight: 700;
}
.md-typeset .md-button.mm-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}
/* Solid brand button for use on white content (e.g. Help, tool pages) */
.md-typeset .md-button.mm-btn-solid {
  background: var(--mm-gradient-soft);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
}
.md-typeset .md-button.mm-btn-solid:hover {
  filter: brightness(1.06);
  color: #fff;
}

/* ==========================================================================
   Feature-card grid
   Usage:
     <div class="mm-grid" markdown>
       <a class="mm-card" href="..." markdown> ... </a>
     </div>
   ========================================================================== */
.mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.1rem;
  margin: 1.4rem 0 2rem;
}
.md-typeset .mm-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.4rem;
  background: var(--md-default-bg-color);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(20, 20, 60, 0.04);
}
.md-typeset .mm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(48, 32, 160, 0.45);
  border-color: var(--mm-indigo);
}
.md-typeset .mm-card .mm-card-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}
/* Actual app icon (overrides the emoji fallback) */
.md-typeset .mm-card .mm-card-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 13px;
  margin: 0 0 0.7rem;
  border: 0;
  aspect-ratio: auto;
}
.md-typeset .mm-card h3,
.md-typeset .mm-card .mm-card-title {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--md-default-fg-color);
}
.md-typeset .mm-card p,
.md-typeset .mm-card .mm-card-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
}
.md-typeset .mm-card .mm-card-more {
  margin-top: auto;
  padding-top: 0.7rem;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--mm-indigo);
}
[data-md-color-scheme="slate"] .md-typeset .mm-card .mm-card-more { color: var(--mm-purple-light); }

/* "Advanced" edition badge shown under a feature-page title */
.md-typeset .mm-edition {
  display: inline-block;
  margin: -0.6rem 0 1.3rem;
  padding: 0.14rem 0.62rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mm-indigo);
}
[data-md-color-scheme="slate"] .md-typeset .mm-edition { background: var(--mm-purple-light); color: #101128; }

/* Thumbnail sitting on top of a card */
.md-typeset .mm-card img {
  border-radius: 9px;
  margin: 0 0 0.85rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* ==========================================================================
   Product screenshots in body copy
   Usage: wrap image in <figure class="mm-shot"> ... <figcaption>…</figcaption>
   or just add {.mm-shot} to an image via attr_list.
   ========================================================================== */
.md-typeset .mm-shot,
.md-typeset img.mm-shot {
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 20px 45px -24px rgba(48, 32, 160, 0.5);
}
.md-typeset figure.mm-shot {
  margin: 1.6rem 0;
}
.md-typeset figure.mm-shot img {
  border-radius: 12px;
  width: 100%;
  display: block;
}
.md-typeset figure.mm-shot figcaption {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  text-align: center;
}

/* --- Small helpers ------------------------------------------------------ */
.mm-center { text-align: center; }
.md-typeset .mm-lead {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}
.mm-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-indigo) 12%, transparent);
  color: var(--mm-indigo);
}
[data-md-color-scheme="slate"] .mm-trust { color: var(--mm-purple-light); }

/* Responsive: tighten hero on phones */
@media screen and (max-width: 44.98em) {
  .mm-hero { padding: 2.1rem 1.4rem; }
  .mm-hero .md-typeset h1, .mm-hero h1 { font-size: 1.8rem; }
}