/* ============================================================
   PEMLAK Wiki — Custom Styles
   ============================================================ */

/* Hero section on the main page */
.hero-section {
  text-align: center;
  padding: 2rem 1rem;
}

.hero-section h2 {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--md-primary-fg-color);
}

/* Grid cards styling */
.grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.grid.cards > ul > li:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Footer note */
.footer-note {
  text-align: center;
  opacity: 0.7;
  font-size: 0.85rem;
  margin-top: 3rem;
}

/* Step-by-step instructions styling */
.md-typeset ol li {
  margin-bottom: 0.75rem;
}

/* Screenshot images */
.md-typeset img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
}

/* Admonition customizations */
.md-typeset .admonition.tip {
  border-left-width: 4px;
}

.md-typeset .admonition.warning {
  border-left-width: 4px;
}

/* Keyboard keys */
.md-typeset kbd {
  font-size: 0.85em;
}

/* Table improvements */
.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}