:root {
    --md-primary-fg-color: #cc0033;
    --md-accent-fg-color: #aa002b;
    --md-primary-fg-color--light: #cc0033;
    --md-primary-fg-color--dark: #aa002b;
}

/* Override header logo appearance */
.md-header__button.md-logo img {
  border-radius: 0.1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;

  height: auto !important;
  max-height: 1.7rem;
  width: auto;
  padding: 0.2rem 0.2rem;
  background: white;
  box-sizing: content-box;
}

@media (max-width: 1024px) {
  .md-header__button.md-logo img {
    max-height: 1.5rem;
    padding: 0.1rem;
  }

  .md-header__title {
    font-size: 1rem;
    margin-left: 0.4rem;
  }
}

/* Hover effect: slight scale-up */
.md-header__button.md-logo:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Make the entire logo clickable */
.md-header__button.md-logo {
  pointer-events: auto;
  padding: 0;
}

/* Change destination of the logo to UniTrento website */
.md-header__button.md-logo {
  cursor: pointer;
}

.md-header__title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-left: 0.75rem;
  white-space: nowrap;
}

/* Footer background + text color */
.md-footer {
  background-color: var(--md-primary-fg-color) !important;
  color: white !important;
}

.md-footer a {
  color: white !important;
}

.md-footer a:hover {
  text-decoration: underline;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #aa002b;
  --md-accent-fg-color: #cc0033;

  --md-default-bg-color: #111;
  --md-default-fg-color: #f0f0f0;
  --md-typeset-color: var(--md-default-fg-color);

  --md-typeset-a-color: #ff3355;
  --md-typeset-a-hover-color: #ffffff;
}

.md-typeset a {
  color: var(--md-typeset-a-color);
  font-weight: 500;
  text-decoration: underline dotted;
}

.md-typeset__scrollwrap {
  overflow-x: visible
}

.md-typeset__table {
  overflow-x: auto
}

.md-typeset table {
  width: 100% !important;
  table-layout: fixed !important;
  word-break: break-word !important;
  border-collapse: collapse !important;
}

.md-typeset table th,
.md-typeset table td {
  width: 25% !important;
  table-layout: fixed !important;
  word-break: break-word !important;
  white-space: normal !important;
}

@media (max-width: 1024px) {
  .md-typeset__scrollwrap,
  .md-typeset__table {
    overflow-x: scroll !important;
  }
  .md-typeset th,
  .md-typeset td {
    padding: 2em;
    font-size: 0.75rem;
  }
}

.md-typeset pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--md-code-bg-color);
}

.md-typeset pre > code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1024px) {
  .md-typeset pre > code {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 512px) {
  .md-typeset pre > code {
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* Apply same styling to sidebar logo (on small screens) */
.md-nav__title .md-logo img {
  border-radius: 0.1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background: white;
  transition: all 0.25s ease;
  padding: 0.2rem;
  max-height: 1.5rem;
  box-sizing: content-box;
}

.md-nav__title .md-logo:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}