/* KWCS site-footer styles — extracted from _assets/kwcs-homepage-v4.html */

/* ─── FOOTER ─── */
  .kwcs-footer {
    background: var(--navy-deep);
    padding: 88px 80px 40px;
    position: relative;
    overflow: hidden;
  }

.kwcs-footer .face-pattern { opacity: 0.3; }

.footer-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 56px;
    margin-bottom: 56px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

.footer-tagline {
    font-size: 14.5px;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin-top: 18px;
    margin-bottom: 24px;
    max-width: 320px;
    font-weight: 500;
  }

.footer-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--navy-deep);
    padding: 12px 26px;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
  }

.footer-donate-btn:hover { background: var(--gold-light); transform: translateY(-1px); }

.footer-col-title {
    font-family: 'Chewy', cursive;
    font-size: 20px;
    color: var(--gold-light);
    margin-bottom: 18px;
  }

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

.footer-links a {
    font-size: 14.5px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 600;
  }

.footer-links a:hover { color: var(--gold-light); }

.footer-contact {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.75;
    font-weight: 500;
    margin-top: 24px;
  }

.footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

.footer-copy {
    font-size: 12.5px;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
    font-weight: 500;
  }

.footer-copy a { color: rgba(255,255,255,0.55); text-decoration: underline; }

.footer-charity-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(245,166,35,0.12); border: 1.5px solid rgba(245,166,35,0.35);
    border-radius: 100px; padding: 8px 18px;
    text-decoration: none; transition: background 0.2s;
  }

.footer-charity-badge:hover { background: rgba(245,166,35,0.2); }

.footer-charity-badge span {
    font-size: 12.5px; font-weight: 800; color: var(--gold-light); letter-spacing: 0.04em;
  }

@media (max-width: 1024px) {
  .kwcs-footer { padding: 64px 32px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  .kwcs-footer { padding: 56px 20px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; margin-bottom: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Contact details are links (tel:/mailto:) rather than the mockup's plain
   text, so they need the footer's own colour instead of the global link navy. */
.footer-contact a {
    color: inherit;
    text-decoration: none;
  }

.footer-contact a:hover {
    color: var(--gold-light);
    text-decoration: underline;
  }

/* ─── CONNECT STRIP ───
   Sits directly above the footer on every page. Same shape as the donate
   strip; the gold faces background comes from .orange-background-with-faces,
   so everything here reads navy-on-gold like the quote section. */
  .connect-strip {
    padding: 76px 80px;
    position: relative;
    overflow: hidden;
  }

.connect-strip-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 56px;
    max-width: 1400px;
    margin: 0 auto;
  }

.connect-strip-title {
    font-size: clamp(34px, 3.6vw, 52px);
    color: var(--navy-deep);
    line-height: 1;
    margin-bottom: 16px;
  }

.connect-strip-text {
    font-size: 17px;
    line-height: 1.65;
    color: var(--navy-deep);
    font-weight: 600;
    max-width: 560px;
  }

.connect-details {
    display: grid;
    gap: 22px;
    min-width: 300px;
  }

.connect-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
    color: var(--navy-deep);
    font-weight: 700;
  }

.connect-detail-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(30,75,143,0.7);
  }

.connect-detail a {
    color: var(--navy-deep);
    text-decoration: none;
    border-bottom: 2px solid rgba(30,75,143,0.35);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: border-color 0.2s, color 0.2s;
  }

.connect-detail a:hover { color: var(--navy); border-color: var(--navy-deep); }

@media (max-width: 1024px) {
  .connect-strip { padding: 56px 32px; }
  .connect-strip-inner { grid-template-columns: 1fr; gap: 36px; }
  .connect-details { min-width: 0; }
}

@media (max-width: 768px) {
  .connect-strip { padding: 48px 20px; }
}