/* opm brand palette — harmonizes with TEI Publisher / e-editiones (orange #F5A623). */

:root {
  --md-primary-fg-color:        #F5A623;
  --md-primary-fg-color--light: #f7b850;
  --md-primary-fg-color--dark:  #d98c12;
  /* dark text/icons on the light-orange header for readable contrast */
  --md-primary-bg-color:        #21222C;
  --md-primary-bg-color--light: rgba(33, 34, 44, 0.7);

  --md-accent-fg-color:         #d98c12;
  --md-accent-fg-color--transparent: rgba(245, 166, 35, 0.1);
}

/* Dark mode: keep the orange accent, but use the light body text on the header. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:  #d98c12;
  --md-primary-bg-color:  #ffffff;
  --md-accent-fg-color:   #F5A623;
}

/* Give the header logo a touch of breathing room. */
.md-header__button.md-logo img {
  height: 1.6rem;
}

/* --- Supporters ------------------------------------------------------- */

/* :not([hidden]) matches the theme's own `display: flow-root` specificity */
.md-typeset .supporters:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem 1.5rem;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
  list-style: none;
}

/* three per row; a trailing partial row stays centred */
.md-typeset .supporters:not([hidden]) li {
  flex: 0 1 calc((100% - 3.2rem) / 3);
  max-width: calc((100% - 3.2rem) / 3);
  /* let wide logos shrink into the column instead of forcing a wrap */
  min-width: 0;
  margin: 0;
}

@media screen and (max-width: 44.98em) {
  .md-typeset .supporters:not([hidden]) li {
    flex-basis: calc((100% - 1.6rem) / 2);
    max-width: calc((100% - 1.6rem) / 2);
  }
}

@media screen and (max-width: 29.98em) {
  .md-typeset .supporters:not([hidden]) li {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.md-typeset .supporters:not([hidden]) li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 0;
  color: inherit;
  text-align: center;
  transition: opacity 125ms;
}

.md-typeset .supporters:not([hidden]) li > a:hover,
.md-typeset .supporters:not([hidden]) li > a:focus {
  opacity: .7;
}

.md-typeset .supporters img {
  height: auto;
  width: auto;
  max-height: 3rem;
  max-width: 100%;
  object-fit: contain;
}

/* the ZB mark is squarer than the other wordmarks, so it needs more box
   height before its "Zentralbibliothek Zürich" line is readable */
.md-typeset .supporters img[src*="ZB_Logo"] {
  max-height: 4.2rem;
}

.md-typeset .supporters .supporters__note {
  font-size: .62rem;
  line-height: 1.35;
  color: var(--md-default-fg-color--light);
}

.md-typeset .supporters--initiative:not([hidden]) {
  display: flex;
  justify-content: center;
}

.md-typeset .supporters--initiative img {
  max-height: 2.6rem;
}

/* --- Slideshow (see javascripts/slideshow.js) --------------------------- */

.md-typeset .slideshow {
  position: relative;
  margin: 1.5rem 0 2rem;
  overflow: hidden;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .4rem;
}

.md-typeset .slideshow__track {
  display: flex;
  transition: transform .6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .slideshow__track { transition: none; }
}

.md-typeset .slideshow__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
}

.md-typeset .slideshow__slide img {
  display: block;
  width: 100%;
  height: 22rem;
  object-fit: contain;
  padding: 1.2rem 1.2rem 2rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
}

@media screen and (max-width: 29.98em) {
  .md-typeset .slideshow__slide img { height: 16rem; }
}

.md-typeset .slideshow__slide figcaption {
  box-sizing: border-box;
  max-width: none;
  height: 4.2rem;
  margin: 0;
  padding: .6rem 12% 0;
  text-align: center;
  font-style: normal;
  background: var(--md-default-bg-color);
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .slideshow__slide figcaption strong {
  display: block;
  font-size: .85rem;
}

.md-typeset .slideshow__prev,
.md-typeset .slideshow__next {
  position: absolute;
  top: 0;
  bottom: 4.2rem;
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-default-fg-color);
  opacity: .5;
  cursor: pointer;
  transition: opacity .15s;
}

.md-typeset .slideshow__prev { left: 0; }
.md-typeset .slideshow__next { right: 0; }

.md-typeset .slideshow__prev:hover,
.md-typeset .slideshow__next:hover,
.md-typeset .slideshow__prev:focus-visible,
.md-typeset .slideshow__next:focus-visible {
  opacity: .9;
}

.md-typeset .slideshow__prev svg,
.md-typeset .slideshow__next svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

.md-typeset .slideshow__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.8rem;
  display: flex;
  justify-content: center;
  gap: .35rem;
}

.md-typeset .slideshow__dots button {
  width: 1.5rem;
  height: .2rem;
  padding: 0;
  border: 0;
  background: var(--md-default-fg-color);
  opacity: .3;
  cursor: pointer;
  transition: opacity .6s;
}

.md-typeset .slideshow__dots button.active {
  opacity: .9;
}