/* Site-wide chrome: header/nav + footer */

.nav-bar {
  background: var(--bg-navy-band);
  color: var(--color-white);
  /* Gold hairline under the bar, picked up from the logo's trim ring. */
  border-bottom: 2px solid var(--color-gold);
}
.nav-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.nav-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h3-size);
  color: var(--color-white);
  text-decoration: none;
}
/* The header carries the tower mark, not the seal: the seal's ring text is
   unreadable at this size, so it contributes nothing the wordmark beside it
   does not. icon-light is the cream colourway — the navy line work of
   icon.png would disappear into the band. */
.nav-bar__logo {
  width: 38px;
  height: 38px;
  flex: none;
}
/* Visible now that the mark alone no longer names the choir. The Join Us
   button that used to share this row is gone, which is what freed the width
   for it; it still wraps to two lines under 420px rather than pushing the
   hamburger off the bar. */
.nav-bar__brand-text {
  line-height: 1.15;
}
.nav-bar__toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-white);
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-bar__toggle-icon,
.nav-bar__toggle-icon::before,
.nav-bar__toggle-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  position: relative;
  border-radius: 2px;
}
.nav-bar__toggle-icon::before,
.nav-bar__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-bar__toggle-icon::before { top: -7px; }
.nav-bar__toggle-icon::after { top: 7px; }

.nav-bar__nav {
  order: 2;
}
.nav-bar__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-bar__nav a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 700;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.nav-bar__nav a:hover {
  color: rgba(255, 255, 255, 0.75);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}
.nav-bar__nav a[aria-current="page"] {
  border-bottom-color: var(--color-white);
}
/* Mobile nav */
@media (max-width: 959px) {
  .nav-bar__inner { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .nav-bar__toggle { display: flex; order: 0; }
  .nav-bar__brand { order: 1; margin-right: auto; }
  .nav-bar__nav {
    order: 4;
    width: 100%;
    max-height: 0;
    overflow: hidden;
  }
  .nav-bar__nav.is-open {
    max-height: 600px;
  }
  .nav-bar__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) 0 var(--space-4);
  }
  .nav-bar__nav a {
    display: block;
    font-size: var(--text-h3-size);
    padding: var(--space-4) 0;
    border-bottom: none;
  }
  .nav-bar__nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
/* Under 420px the h3-size wordmark is too wide to share the row with the
   hamburger, so the lockup steps down to body size. flex-basis 0 (rather than
   the default auto) is what keeps it on that row: .nav-bar__inner wraps, and
   wrapping is decided on the item's content width before flex-shrink ever
   applies — so at 320px an auto-basis brand jumps to a second row instead of
   letting the wordmark break. min-width: 0 lets it shrink past the text. */
@media (max-width: 419px) {
  .nav-bar__brand {
    font-size: var(--text-body-size);
    gap: var(--space-2);
    flex: 1 1 0;
    min-width: 0;
  }
  .nav-bar__logo { width: 34px; height: 34px; }
}

/* Footer */
.site-footer {
  background: var(--color-navy);
  border-top: 2px solid rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  padding: var(--space-7) 0 var(--space-6);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.site-footer__brand {
  display: block;
  height: 200px;
  width: 200px;
}
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__nav a {
  display: inline-block;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  /* A 16px/1.5 line box is only 24px with the text alone; the padding keeps
     these above the 24x24 minimum of WCAG 2.2 SC 2.5.8 once they sit in a
     row rather than inline in a sentence. */
  padding: var(--space-1) 0;
}
.site-footer__nav a:hover {
  text-decoration: underline;
}
.site-footer__nav a[aria-current="page"] {
  text-decoration: underline;
}
.site-footer__email {
  display: inline-block;
  color: var(--color-white);
  text-decoration: underline;
  padding: var(--space-1) 0;
}
.site-footer__copyright {
  font-size: var(--text-small-size);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Footer nav — vertical stack below 600px (--bp-tablet) */
@media (max-width: 599px) {
  .site-footer__nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .site-footer__nav li {
    width: 100%;
  }
  .site-footer__nav a {
    display: block;
    padding: var(--space-3) 0;
  }
}

.social-links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-links__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--text-small-size);
  font-weight: 700;
}
.social-links__link:hover {
  background: rgba(255, 255, 255, 0.24);
}
/* Glyphs are inline SVG in currentColor, so the badge's colour rules above
   still drive them on both the navy footer and the light contact band. */
.social-links__icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}