/* Site styles (components). Palette variables are defined in palette.css */

.md-tabs__link {
  opacity: 1;
  font-weight: bold;
}

.md-tabs__item.md-tabs__item--active {
  border-bottom: 4px solid var(--md-default-fg-color);
}

.container {
  margin-top: 1rem;
}

.container .logo {
  text-align: center;
}

.logo .md-button {
  margin-bottom: 4px;
}

#home__title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: unset;
}

#home__logo {
  width: 10rem;
}

@media only screen and (max-width: 479px) {
  .home__logo {
    width: 6rem;
  }
}

/* Buttons: use primary brand colors */
.md-button, .md-typeset .md-button {
  border: none;
  background-color: var(--md-primary-fg-color);
  color: var(--md-default-bg-color);
}
.md-button:hover, .md-typeset .md-button:hover {
  background-color: var(--md-primary-fg-color--light);
}
.md-button:active, .md-typeset .md-button:active {
  background-color: var(--md-primary-fg-color--dark);
}

/* Links: ensure hover contrast */
.md-typeset a:hover {
  opacity: 0.9;
}

/* Admonitions: subtle brand accent */
.md-typeset .admonition, .md-typeset details {
  border-left: 0.25rem solid var(--md-accent-fg-color);
}

/* Headings colors and emphasis */
.md-typeset h1, .md-typeset h1 code {
  color: var(--heading-color);
  letter-spacing: -0.01em;
}
.md-typeset h2, .md-typeset h2 code {
  color: var(--heading-color);
}
.md-typeset h3, .md-typeset h3 code {
  color: var(--subheading-color);
}

/* -------- Full-width options -------- */
/* Global full-width (uncomment if you want always-on) */

.md-grid { max-width: 100%; }
.md-content { max-width: 80%; }
.md-content__inner { margin: 0; }


/* Per-section full-width helper: wrap content in <div class="full-width"> ... </div> */
.md-typeset .full-width {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}