/* Iscatek colour palette — shared across both modes */
:root {
  --md-primary-fg-color:        #00c8a0;
  --md-primary-fg-color--light: #009e7f;
  --md-primary-fg-color--dark:  #007a60;
  --md-accent-fg-color:         #4db8ff;
  --md-accent-fg-color--transparent: rgba(77, 184, 255, 0.1);
}

/* Dark mode — matches iscatek.com */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #0b1623;
  --md-default-bg-color--light:    #111e2e;
  --md-default-bg-color--lighter:  #162032;
  --md-default-bg-color--lightest: #1e3050;
  --md-default-fg-color:           #e2eaf4;
  --md-default-fg-color--light:    #7a9bbf;
  --md-default-fg-color--lighter:  #7a9bbf;
  --md-default-fg-color--lightest: rgba(122, 155, 191, 0.5);
  --md-code-bg-color:              #111e2e;
  --md-code-fg-color:              #e2eaf4;
}

/* Product card grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 230px));
  gap: 1rem;
  margin: 1.5rem 0;
}

.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.4rem;
  overflow: hidden;
  text-decoration: none;
  background: var(--md-default-bg-color--light);
  border: 1px solid var(--md-default-bg-color--lightest);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.product-card:hover {
  border-color: var(--md-primary-fg-color);
  transform: translateY(-3px);
}

.product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #ffffff;
  padding: 1rem;
}

.product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color--light);
  font-size: 0.85rem;
  font-family: var(--md-code-font-family);
  letter-spacing: 0.05em;
}

.product-card__name {
  padding: 0.4rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  border-top: 1px solid var(--md-default-bg-color--lightest);
}

/* Full-width layout — stretch content between sidebars */
.md-grid {
  max-width: 100%;
}

/* Sidebar delimiter line — scoped to viewports where the sidebar is visible */
@media screen and (min-width: 76.25em) {
  .md-content {
    border-left: 1px solid var(--md-default-bg-color--lightest);
  }
}

/* Compact list — tight spacing only. Use on any <div class="compact-list" markdown> */
.md-typeset .compact-list li,
.md-typeset .prereq-list li {
  margin-top: 0.1em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.4 !important;
}

/* Prereq list — additionally removes bullets and indent */
.md-typeset .prereq-list ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.md-typeset .prereq-list li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Prerequisite tick icon colour */

.prereq-tick {
  color: var(--md-primary-fg-color);
  vertical-align: middle;
  margin-right: 0.25em;
}

/* Tighter tables with shaded header */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.3em 0.6em !important;
  font-size: 0.75rem !important;
}

.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--lighter) !important;
  font-weight: 600;
}

/* Hide empty footer meta bar */
.md-footer-meta {
  display: none;
}

/* Light mode */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           #f5f8fc;
  --md-default-bg-color--light:    #eaf0f8;
  --md-default-bg-color--lighter:  #dde7f2;
  --md-default-bg-color--lightest: #cfdaea;
  --md-default-fg-color:           #0b1623;
  --md-default-fg-color--light:    #2e4a6a;
  --md-default-fg-color--lighter:  #4a6a8a;
  --md-default-fg-color--lightest: rgba(46, 74, 106, 0.4);
  --md-code-bg-color:              #eaf0f8;
  --md-code-fg-color:              #0b1623;
}