/* Blog-specific styles for enhanced markdown rendering */

body {
  padding-top: 50px;
}

.starter-template {
  padding: 40px 15px;
  text-align: center;
}

/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 10px;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.blog {
  margin-top: 20px;
}

.breadcrumbs {
  margin-bottom: 2rem;
}

/* Code blocks and syntax highlighting */
pre {
  background: #0d1117 !important;
  border: 1px solid #30363d !important;
  border-radius: 6px;
  padding: 16px !important;
  overflow: auto;
  font-size: 14px;
  line-height: 1.45;
  margin: 1em 0;
  color: #f0f6fc !important;
}

pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: none !important;
  font-size: inherit !important;
  white-space: pre !important;
}

/* Inline code styling */
code:not(pre code) {
  background: #21262d !important;
  color: #f0f6fc !important;
  padding: 0.2em 0.4em !important;
  border-radius: 3px;
  font-family:
    "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 85%;
  border: none !important;
}

/* Mermaid diagram styling */
.mermaid {
  text-align: center;
  margin: 1em 0;
  background: transparent !important;
  border: 1px solid #d1d9e0;
  border-radius: 6px;
  padding: 16px;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Task list styling */
.task-list-item {
  list-style-type: none;
}

.task-list-item input[type="checkbox"] {
  margin-right: 0.5em;
}

/* Admonition styling */
.admonition {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #58a6ff;
  background: rgba(88, 166, 255, 0.1);
  border-radius: 0 4px 4px 0;
}

.admonition-title {
  font-weight: bold;
  margin-bottom: 0.5em;
}

/* GitHub-style table styling */
table {
  background: transparent !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1em 0 !important;
  border: 1px solid #d1d9e0 !important;
}

table th,
table td {
  border: 1px solid #d1d9e0 !important;
  padding: 8px 12px !important;
  color: #24292f !important;
}

table th {
  background: #f6f8fa !important;
  font-weight: 600 !important;
  text-align: left !important;
}

table tbody tr:nth-child(odd) td {
  background: #f6f8fa !important;
}

/* Disable Bootstrap table hover effects */
table tr:hover td,
.table-hover tbody tr:hover td {
  background: inherit !important;
}

/* Grid and card layout for blog listings */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  margin: 1.5rem 0;
}

.card {
  background: #fff;
  border: 1px solid #d1d9e0;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.blog-entries p a {
  background: #fff;
  border: 1px solid #d1d9e0;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
}

.blog-entries p a:hover {
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}