/* Black-and-pink header, matching the supplied official logo variant. */
.site-header {
  --header-background: #000000;
  --header-pink: #ff939e;

  background: var(--header-background);
  color: var(--header-pink);
  border-bottom-color: rgb(255 147 158 / 24%);
}

.site-header .brand-logo img {
  mix-blend-mode: normal;
}

.site-header .brand-ministry,
.site-header .menu-toggle,
.site-header .nav-wrap nav a {
  color: var(--header-pink);
}

.site-header .nav-wrap nav a:hover,
.site-header .nav-wrap nav a[aria-current='page'] {
  color: var(--header-pink);
}

.site-header::after,
.site-header .nav-wrap nav a::before,
.site-header .nav-wrap nav a[aria-current]::after {
  background: var(--header-pink);
}

.site-header .nav-join {
  background: var(--header-background);
  color: var(--header-pink);
  border: 1px solid var(--header-pink);
}

.site-header .nav-join:hover {
  background: var(--header-pink);
  color: var(--header-background);
  box-shadow: 0 6px 22px rgb(255 147 158 / 18%);
}

.site-header :focus-visible {
  outline-color: var(--header-pink);
}

@media (max-width: 1099px) {
  .site-header .nav-wrap nav {
    background: var(--header-background);
    border-bottom-color: rgb(255 147 158 / 24%);
    box-shadow: 0 12px 24px rgb(0 0 0 / 18%);
  }
}

/* Larger shared navigation, with compact spacing on narrow screens. */
.site-header .nav-wrap {
  min-height: 116px;
  gap: 20px;
}

.site-header .brand > .brand-logo {
  width: 92px;
  height: 92px;
}

.site-header .brand-ministry {
  font-size: 12px;
}

.site-header .nav-wrap nav {
  gap: 18px;
}

.site-header .nav-wrap nav a {
  font-size: 15px;
  min-height: 50px;
}

.site-header .nav-join {
  font-size: 13px;
  min-height: 52px;
  padding: 14px 20px;
}

html {
  scroll-padding-top: 132px;
}

@media (min-width: 1100px) and (max-width: 1199px) {
  .site-header .nav-wrap {
    gap: 14px;
  }
  .site-header .nav-wrap nav {
    gap: 12px;
  }
  .site-header .nav-wrap nav a {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .site-header .nav-wrap {
    min-height: 96px;
    gap: 8px;
  }
  .site-header .brand > .brand-logo {
    width: 72px;
    height: 72px;
  }
  .site-header .brand-ministry {
    font-size: 9px;
  }
  .site-header .nav-join {
    font-size: 11px;
    padding: 12px;
    min-height: 46px;
  }
  .site-header .nav-wrap nav a {
    font-size: 17px;
  }
  html {
    scroll-padding-top: 112px;
  }
}

@media (max-width: 380px) {
  .site-header .brand-ministry {
    display: none;
  }
}