/* ===== Hearts Held Foundation: loads AFTER style.css and overrides it ===== */

/* Brand colours taken from the logo */
:root {
  --blue: #3a7f7c;
  --blue-dark: #25666b;
  --ink: #1f4750;
  --yellow: #d9a84e;
  --coral: #de8f80;
  --green: #7bb5a0;
}

[hidden] { display: none !important; }
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Header and hero */
.brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 13px; }
.button-primary { background: var(--blue-dark); box-shadow: 0 10px 25px rgba(37,102,107,.25); }
.age-card.featured { background: var(--blue-dark); }
.hero { isolation: isolate; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); letter-spacing: -1px; }
.art-card { background: #fff; display: grid; place-items: center; }
.hero-photo { width: 78%; height: auto; object-fit: contain; display: block; }
.hero-actions .button { padding: 13px 19px; }

/* About: values */
.values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.values span { padding: 7px 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--blue-dark); }

/* Services and age cards */
.service-card.green { border-color: var(--green); }
.service-card p { min-height: 0; }
.services-note { max-width: 760px; margin: 34px auto 0; text-align: center; color: var(--muted); font-size: .85rem; }
@media (min-width: 901px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card:last-child { grid-column: 1 / -1; }
  .age-grid { grid-template-columns: repeat(4, 1fr); }
}
.age-card .age-number { display: block; }

/* Get support pathways */
.pathway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 26px; }
.pathway-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; }
.pathway-card p { color: var(--muted); }
.pathway-card .button { margin-top: 8px; }
.pathway-card .button-secondary { background: var(--soft); }

/* Safeguarding and get involved cards */
.policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.policy-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; border-top: 5px solid var(--blue); }
.policy-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.policy-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.emergency { margin-top: 30px; padding: 22px 26px; background: #fdf0ec; border-left: 5px solid var(--coral); border-radius: 16px; }
.emergency p { margin: 6px 0 0; font-size: .92rem; }
.involved-cta { text-align: center; margin: 36px 0 0; }

/* Contact and footer */
.contact-action small { color: rgba(255,255,255,.7); }
.contact-fallback { margin: 0; color: rgba(255,255,255,.85); }
.footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.footer-brand img { border-radius: 12px; object-fit: contain; }
.footer a { color: var(--blue-dark); font-weight: 700; text-decoration: underline; }

@media (max-width: 900px) {
  .pathway-grid { grid-template-columns: 1fr; }
}