/* =============================================================================
 * The Lupaxa Project Portal
 * Accessibility and Compatibility Overrides
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .lupaxa-header__nav-link,
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid.cards > li,
  .md-typeset .md-button,
  .md-typeset .catalogue-category,
  .md-typeset .catalogue-grid p:has(img.catalogue-logo) > a,
  .md-typeset .catalogue-grid p:has(img.catalogue-logo) > button,
  .filter-panel-clear {
    transition: none;
  }
}

.md-typeset a:focus-visible,
.md-typeset .md-button:focus-visible {
  outline: 0.15rem solid var(--lupaxa-light-blue);
  outline-offset: 0.15rem;
}

/* Header compatibility overrides */

.md-header .lupaxa-header__drawer-button,
.md-header .md-header__button.md-logo.lupaxa-header__logo,
.md-header .lupaxa-header__inner > .md-header__option {
  position: relative;
  z-index: 50;
  pointer-events: auto;
}

.md-header .md-header__button.md-logo.lupaxa-header__logo {
  width: 4.5rem !important;
  height: 4.5rem !important;
}

.md-header .md-header__button.md-logo.lupaxa-header__logo img,
.md-header .md-header__button.md-logo.lupaxa-header__logo svg {
  width: 4.5rem !important;
  height: 4.5rem !important;
  max-width: none !important;
  max-height: none !important;
}

/* Catalogue logo compatibility overrides */

.md-typeset .grid.cards.catalogue-grid p:has(img.catalogue-logo) {
  display: flex !important;
  width: 100%;
  min-height: 8rem;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 var(--lupaxa-spacing-md);
  padding: 0;
  text-align: center;
}

.md-typeset .grid.cards.catalogue-grid p:has(img.catalogue-logo) > a,
.md-typeset .grid.cards.catalogue-grid p:has(img.catalogue-logo) > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto;
}

.md-typeset .grid.cards.catalogue-grid img.catalogue-logo {
  display: block !important;
  margin: 0 auto !important;
}

@media screen and (max-width: 76.234375em) {
  .md-header .md-header__button.md-logo.lupaxa-header__logo {
    width: 3.25rem !important;
    height: 3.25rem !important;
  }

  .md-header .md-header__button.md-logo.lupaxa-header__logo img,
  .md-header .md-header__button.md-logo.lupaxa-header__logo svg {
    width: 3.25rem !important;
    height: 3.25rem !important;
  }
}