/* =========================
   CORA Brand Theme Overrides
   Primary teal from product UI: #208093
   ========================= */

/* Light mode */
:root {
  --cora-teal: #208093;
  --cora-teal-dark: #176a79;
  --cora-teal-soft: rgba(32, 128, 147, 0.12);

  /* Material primary tokens */
  --md-primary-fg-color: var(--cora-teal);
  --md-primary-fg-color--dark: var(--cora-teal-dark);
  --md-accent-fg-color: var(--cora-teal);

  /* Surface + typography polish */
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: rgba(0, 0, 0, 0.82);
  --md-typeset-a-color: var(--cora-teal);
}

/* Links hover */
.md-typeset a:hover {
  color: var(--cora-teal-dark);
}

/* Buttons (Material uses primary tokens; this improves feel) */
.md-button--primary {
  border-radius: 10px;
}

/* Make left nav feel closer to the product (cleaner, lighter) */
.md-sidebar__scrollwrap {
  scrollbar-width: thin;
}

/* Subtle card feel for content blocks */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
}

/* Tables: cleaner grid like enterprise UI */
.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: rgba(0, 0, 0, 0.03);
}

/* Optional: slightly soften header separation */
.md-header {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Better typography + readability */
.md-typeset {
  line-height: 1.65;
}

.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* Make the main content feel like a product doc */
.md-main__inner {
  padding-top: 1rem;
}

/* Smoother code blocks */
.md-typeset pre > code {
  border-radius: 12px;
}

.md-typeset img {
  /* Size Control */
  max-width: 80%;            /* Reduces size so it doesn't hit the edges */
  height: auto;              /* Maintains aspect ratio */
  display: block;            /* Centers the image with margin: auto */
  margin: 1.5em auto;        /* Adds space above/below and centers horizontally */

  /* Border & Polish */
  border: 1px solid #e2e8f0; /* Very light slate border */
  border-radius: 8px;        /* Matches your UI's rounded feel */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Soft depth */
}

/* Keep all top nav tabs visible on wide screens (e.g., German labels) */
@media screen and (min-width: 76.25em) {
  .md-tabs__list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }

  .md-tabs__item {
    padding-right: 0.05rem;
  }

  .md-tabs__link {
    margin-top: 0.35rem;
    font-size: 0.68rem;
  }
}