/* Custom styles for MkDocs Material */

/* Card grid for homepage */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.grid.cards > * {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  padding: 1.5rem;
  transition: all 0.25s;
}

.grid.cards > *:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Custom admonition styles */
.md-typeset .admonition,
.md-typeset details {
  border-left: 0.2rem solid;
  border-radius: 0.2rem;
}

/* Code block improvements */
.md-typeset pre > code {
  border-radius: 0.2rem;
}

.md-typeset .highlight {
  border-radius: 0.2rem;
  margin: 1em 0;
}

.md-typeset .highlight code {
  display: block;
  padding: 1em;
  overflow-x: auto;
}

/* Line numbers styling */
.md-typeset .linenodiv {
  padding-right: 0.5em;
}

.md-typeset .highlight .linenodiv pre {
  margin: 0;
  padding: 0;
}

/* Table improvements */
.md-typeset table:not([class]) {
  border-radius: 0.2rem;
  overflow: hidden;
}

/* PlantUML diagram styling */
.plantuml,
.uml-diagram {
  text-align: center;
  margin: 2rem 0;
  display: block;
}

.plantuml img,
.uml-diagram img,
.md-typeset img[alt*="uml"] {
  max-width: 100%;
  height: auto;
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
  background: white;
  padding: 1rem;
}

[data-md-color-scheme="slate"] .plantuml img,
[data-md-color-scheme="slate"] .uml-diagram img,
[data-md-color-scheme="slate"] .md-typeset img[alt*="uml"] {
  background: white;
  padding: 1rem;
}

/* Mermaid diagram styling */
.mermaid {
  text-align: center;
  margin: 2rem 0;
}

/* Navigation improvements */
.md-nav__item--active > .md-nav__link {
  font-weight: 600;
}

/* Custom grid layout */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
  .grid.cards {
    grid-template-columns: 1fr;
  }
}

/* Hero section on homepage */
.md-typeset h1:first-child {
  margin-top: 0;
  font-weight: 700;
}

/* Icon styling in cards */
.lg.middle {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}