/* Shared components: header, nav, buttons, footer, cards, forms, sliders */

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--pill {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn--pill:hover { background: var(--color-dark); color: var(--color-white); }
.btn--outline {
  border: 2px solid var(--color-dark);
  color: var(--color-dark);
  background: var(--color-white);
}
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--submit {
  background: var(--color-primary);
  color: var(--color-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  width: 100%;
  font-weight: 700;
}
.btn--submit:hover { background: var(--color-white); color: var(--color-dark); }

/* Eyebrow chip link (e.g. "Together for Change", "About Us") */
.chip {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}
.chip:hover { color: var(--color-dark); }

/* ---------- Header ---------- */
.site-header {
  padding-block: var(--space-md);
  background: transparent;
}
@media (max-width: 767px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { width: 96px; height: auto; }
.site-nav { margin-inline: auto; }
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
}
.site-nav__list a {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--color-primary);
  padding: var(--space-2xs) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] { color: var(--color-ink); }
.chev {
  width: .5em; height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.has-sub { position: relative; }
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xs) 0;
  list-style: none;
  z-index: 20;
}
.sub-menu a { display: block; padding: var(--space-2xs) var(--space-sm); }
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu { display: block; }
.site-header__actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-dark);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
@media (max-width: 1024px) {
  .site-nav, .site-header__actions { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
}
.mobile-menu {
  background: var(--color-white);
  border-top: 1px solid var(--color-cream);
  padding: var(--space-lg) var(--section-pad-x) var(--space-xl);
  box-shadow: var(--shadow-card);
}
.mobile-menu ul { list-style: none; padding: 0; }
.mobile-menu li + li { margin-top: var(--space-sm); }
.mobile-menu nav a {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--color-dark);
}
.mobile-menu nav a:hover { color: var(--color-primary); }
.mobile-menu__actions {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.mobile-menu__call,
.mobile-menu__donate {
  font-family: var(--font-alt);
  font-weight: 600;
  color: var(--color-primary);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding-block: var(--space-3xl) var(--space-xl);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 1.2fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.site-footer__title {
  color: var(--color-white);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  margin-bottom: var(--space-xl);
}
.site-footer__logo { width: 120px; }
.site-footer__heading {
  color: var(--color-primary);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  margin-bottom: var(--space-md);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--space-xs); }
.site-footer a:hover { color: var(--color-primary); }
.site-footer address { font-style: normal; }
.site-footer address p { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.site-footer__credit {
  text-align: center;
  margin-top: var(--space-3xl);
}
.site-footer__credit a { color: var(--color-link-blue); }
.site-footer__credit a:hover { color: var(--color-white); }
@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* Footer + form icons (inline SVG backgrounds keep markup clean) */
.icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  margin-right: var(--space-2xs);
  background: var(--color-primary);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.icon--pin { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>'); }
.icon--phone { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M6.6 10.8a15.9 15.9 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z"/></svg>'); }
.icon--mail { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 7L4 6v12h16V6z"/></svg>'); }
.icon--facebook,
.icon--linkedin { background: var(--color-white); }
.icon--facebook { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.6V13h2.7v8z"/></svg>'); }
.icon--linkedin { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M6.5 8.5v12h-4v-12zM4.5 2a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zM10 8.5h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6v6.3h-4v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7h-4z"/></svg>'); }

/* ---------- Forms ---------- */
.pledge-form { display: grid; gap: var(--space-xs); }
.pledge-form__label { color: var(--color-white); font-size: var(--fs-body); }
.pledge-form__label span { color: var(--color-accent); }
.pledge-form input,
.pledge-form textarea,
.contact-form input,
.contact-form textarea {
  background: var(--color-cream-2);
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  width: 100%;
}
.pledge-form input:focus-visible,
.pledge-form textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}
.field-error { border-color: var(--color-accent) !important; }
.form-status { font-size: var(--fs-body); min-height: var(--lh-body); }
.form-status--ok { color: var(--color-primary); }
.form-status--err { color: var(--color-accent); }

/* ---------- Section headers ---------- */
.section-head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .chip { margin-bottom: var(--space-sm); }

/* ---------- Stat counters ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg);
  text-align: center;
}
.stat__number {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  color: var(--color-ink);
}
.stat__label { font-family: var(--font-serif); font-weight: 500; }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}
.card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
}
.card h3 { font-size: var(--fs-card-sm); line-height: var(--lh-card-sm); margin-bottom: var(--space-xs); }
.card p { font-size: var(--fs-body); color: var(--color-muted); }
.card__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Campaign cards (GiveWP replacement) ---------- */
.campaign-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.campaign-card img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; }
.campaign-card__body { padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.campaign-card__title {
  font-size: var(--fs-card-sm);
  line-height: var(--lh-card-sm);
}
.campaign-card__amounts {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-body);
}
.progress {
  height: 8px;
  background: var(--color-cream);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* ---------- Testimonial slider ---------- */
.slider { position: relative; overflow: hidden; }
.slider__track {
  display: flex;
  transition: transform .5s ease;
}
.slider__slide { flex: 0 0 100%; padding: var(--space-sm); }
.slider__nav {
  display: flex;
  gap: var(--space-2xs);
  justify-content: center;
  margin-top: var(--space-md);
}
.slider__nav button {
  width: 12px; height: 12px;
  border-radius: var(--radius-circle);
  background: var(--color-cream);
  border: 1px solid var(--color-muted);
}
.slider__nav button[aria-current="true"] { background: var(--color-primary); }

/* ---------- Sponsor marquee ---------- */
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  gap: var(--space-3xl);
  align-items: center;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee__track img { height: 48px; width: auto; filter: grayscale(1); opacity: .8; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Video embed ---------- */
.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
}