/* =========================================================
   COMMUNITY — community.css
   Page-level polish for community.html. The heavy lifting
   is done by the shared classes.css components; this adds
   the per-programme accent bars used across the community
   pages and the Schools contact card.
   ========================================================= */

/* ── Per-programme tile accent bars ───────────────────────
   Each section's tiles pick up the same accent colour as
   its lead bar in classes.css, so tiles read as belonging
   to their programme. */
#disability   .prog-tile { border-top: 4px solid #5a8a44; }
#love-to-move .prog-tile { border-top: 4px solid var(--color-red); }
#open         .prog-tile { border-top: 4px solid var(--color-grey); }
#homeed       .prog-tile { border-top: 4px solid #7b5e9e; }
#schools      .prog-tile { border-top: 4px solid #1a7a8c; }

/* ── Schools contact card ─────────────────────────────── */
.community-contact {
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-navy);
  border-top: 4px solid #1a7a8c;
  box-shadow: 0 8px 28px rgba(4, 51, 108, 0.18);
}

.community-contact__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 2px;
}

.community-contact__role {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-sm);
}

.community-contact p {
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}

.community-contact a {
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.2s ease;
}

.community-contact a:hover,
.community-contact a:focus-visible {
  border-bottom-color: var(--color-white);
}