/* Static-site extras. Visual tokens stay in site.css (compiled from the live theme). */

html.js .bc-reveal {
  opacity: 0;
  transform: translateY(0.875rem);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .bc-reveal.is-visible,
html:not(.js) .bc-reveal {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .bc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

header.bc-solid {
  border-bottom-color: var(--color-line);
  background-color: color-mix(in oklab, var(--color-canvas) 95%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Homepage header is dumped inverted (white on film). Flip colors when solid. */
header[data-over-hero="1"][data-inverted="0"] [aria-label="Startseite"] .inline-flex,
header[data-over-hero="1"][data-inverted="0"] [aria-label="Startseite"] span {
  color: var(--color-ink);
}
header[data-over-hero="1"][data-inverted="0"] nav[aria-label="Main"] a {
  color: color-mix(in oklab, var(--color-ink) 70%, transparent);
}
header[data-over-hero="1"][data-inverted="0"] nav[aria-label="Main"] a:hover,
header[data-over-hero="1"][data-inverted="0"] nav[aria-label="Main"] a[aria-current="page"] {
  color: var(--color-ink);
}
header[data-over-hero="1"][data-inverted="0"] a[href="/hilfe-in-krisen"],
header[data-over-hero="1"][data-inverted="0"] a[href="/en/crisis-support"] {
  color: var(--color-muted);
}
header[data-over-hero="1"][data-inverted="0"] a[href="/hilfe-in-krisen"]:hover,
header[data-over-hero="1"][data-inverted="0"] a[href="/en/crisis-support"]:hover {
  color: var(--color-ink);
}
header[data-over-hero="1"][data-inverted="0"] a[hreflang],
header[data-over-hero="1"][data-inverted="0"] a[hrefLang],
header[data-over-hero="1"][data-inverted="0"] [data-bc-theme] {
  color: var(--color-muted);
}
header[data-over-hero="1"][data-inverted="0"] a[hreflang]:hover,
header[data-over-hero="1"][data-inverted="0"] a[hrefLang]:hover,
header[data-over-hero="1"][data-inverted="0"] [data-bc-theme]:hover {
  color: var(--color-ink);
}
header[data-over-hero="1"][data-inverted="0"] [data-bc-menu] {
  color: var(--color-ink);
}

#mobile-nav:not([hidden]) {
  display: block;
}
#mobile-nav[hidden] {
  display: none !important;
}

.bc-dialog[hidden],
.bc-mockup-overlay[hidden],
[data-bc-join-panel][hidden],
[data-bc-success][hidden],
form[data-bc-form][hidden] {
  display: none !important;
}
.bc-dialog:not([hidden]) {
  display: block;
}
.bc-mockup-overlay:not([hidden]) {
  display: flex !important;
}

.bc-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: color-mix(in oklab, var(--color-ink) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.bc-dialog-panel {
  position: fixed;
  inset: 0;
  z-index: 81;
  display: flex;
  height: 100dvh;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  outline: none;
}
@media (min-width: 768px) {
  .bc-dialog-panel {
    inset: auto;
    left: 50%;
    top: 50%;
    height: auto;
    max-height: 90vh;
    width: min(40rem, calc(100vw - 2rem));
    transform: translate(-50%, -50%);
    border-radius: 12px;
    border: 1px solid var(--color-line);
  }
}

video[data-bc-hero] {
  pointer-events: none;
}

[data-bc-sticky].is-visible {
  transform: translateY(0);
}

[data-bc-error][hidden] {
  display: none !important;
}