/* DPC Startup Kit - Custom Styles */
/* Complements Material theme with medical/tech aesthetic */

/* Root color variables */
:root {
  --dpc-teal: #14b8a6;
  --dpc-teal-dark: #0d9488;
  --dpc-cyan: #22d3d1;
  --dpc-slate: #1e293b;
}

/* Dark mode specific overrides */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f172a;
  --md-default-bg-color--light: #1e293b;
  --md-default-bg-color--lighter: #334155;
  --md-default-bg-color--lightest: #475569;
}

/* Admonition styling for GitHub-style alerts */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #3b82f6;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #22c55e;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #eab308;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: #ef4444;
}

.md-typeset .admonition.important,
.md-typeset details.important {
  border-color: #a855f7;
}

/* Navigation tabs styling */
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* Header styling */
.md-header {
  background-color: rgba(15, 23, 42, 0.95);
}

[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(15, 23, 42, 0.98);
}

/* Code block styling */
.md-typeset code {
  background-color: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.2);
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(20, 184, 166, 0.15);
}

/* Table styling */
.md-typeset table:not([class]) {
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.md-typeset table:not([class]) th {
  background-color: rgba(20, 184, 166, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(20, 184, 166, 0.2);
}

/* Link styling */
.md-typeset a {
  color: var(--dpc-teal);
}

.md-typeset a:hover {
  color: var(--dpc-cyan);
}

/* Quick summary box styling */
.md-typeset blockquote {
  border-left: 4px solid var(--dpc-teal);
  background-color: rgba(20, 184, 166, 0.05);
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  background-color: rgba(20, 184, 166, 0.1);
}

/* Footer styling */
.md-footer {
  background-color: var(--md-default-bg-color--light);
}

/* Search highlighting */
.md-search-result__meta {
  color: var(--dpc-teal);
}

.md-search-result mark {
  background-color: rgba(20, 184, 166, 0.3);
}

/* Navigation section headers */
.md-nav__title {
  color: var(--dpc-teal);
}

/* Content max-width for readability */
.md-content {
  max-width: 900px;
}

/* Hero section styling (for home page) */
.hero-section {
  text-align: center;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.hero-section h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-badges {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

/* Card grid for sections */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.card {
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 8px;
  padding: 1.25rem;
  background-color: rgba(20, 184, 166, 0.03);
  transition: border-color 0.2s, transform 0.2s;
}

.card:hover {
  border-color: var(--dpc-teal);
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .card {
  background-color: rgba(20, 184, 166, 0.08);
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
  .hero-section h1 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 44.9375em) {
  .hero-section h1 {
    font-size: 1.5rem;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}