/* Herts Birth & Beyond
   Concept: "the circle" — the logo is five people ringed around one family,
   so the whole site is round: circular photos, round dots, soft radii.
   The five logo pastels are used only as small markers, never as washes.
   Plain CSS, mobile-first, no framework. */

:root {
  /* ink + ground: aubergine ink on a faint rose-grey, pulled from the
     logo's lavender rather than the usual cream/terracotta pairing */
  --ink: #35283c;
  --ink-soft: #6b5e72;
  --bg: #f8f5f6;
  --surface: #ffffff;
  --line: #e6dee7;

  /* one action colour, everywhere */
  --rose: #a33e6e;
  --rose-deep: #86315a;
  --rose-wash: #f9eef3;

  /* the ring: logo pastels, as markers only */
  --c-pink: #e8a9c4;
  --c-lavender: #c9a8de;
  --c-green: #8fc98a;
  --c-blue: #7ec4e0;
  --c-coral: #f0937b;
  --c-rose: #d98cae;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.25rem;
  --s5: 3.5rem;
  --s6: 5rem;

  --measure: 62ch;
  --wrap: 70rem;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem; /* 17px — easier on tired eyes than 16 */
  line-height: 1.65;
  font-weight: 400;
}

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 7vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

a { color: var(--rose); }
a:hover { color: var(--rose-deep); }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--rose);
  color: #fff;
  padding: var(--s1) var(--s2);
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.measure { max-width: var(--measure); }
.note { margin-top: var(--s2); color: var(--ink-soft); }

.section { padding: var(--s5) 0; }
.section--tight { padding: var(--s4) 0; }

/* banded sections: white against the rose-grey ground, to pace a long page */
.section--band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--band-top {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.section__intro { max-width: var(--measure); margin-bottom: var(--s4); }
.section__intro p { color: var(--ink-soft); font-size: 1.1rem; }

/* ---------- header: logo carries the brand, sized to be seen ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.site-header__logo {
  height: 60px;
  width: 60px;
  object-fit: contain;
  display: block;
}
.site-header__name {
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 7.5em;
}
@media (min-width: 48rem) {
  .site-header__name { max-width: none; white-space: nowrap; }
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.site-nav a:hover { background: var(--rose-wash); color: var(--rose-deep); }
.site-nav a[aria-current="page"] { background: var(--rose-wash); color: var(--rose-deep); }

/* On a phone the header must not eat the screen before the content starts.
   The logo already carries the name, so the wordmark goes visually hidden
   (kept for screen readers, since the logo's alt is empty). */
@media (max-width: 38rem) {
  .site-header__bar { padding-top: var(--s1); padding-bottom: var(--s1); }
  .site-header__logo { height: 46px; width: 46px; }
  .site-header__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-nav a { min-height: 44px; padding: 0 0.7rem; font-size: 1rem; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn--primary { background: var(--rose); color: #fff; }
.btn--primary:hover { background: var(--rose-deep); color: #fff; }
.btn--secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--secondary:hover { border-color: var(--rose); color: var(--rose-deep); }
.btn--large { min-height: 58px; font-size: 1.12rem; padding: 0.9rem 2rem; }

/* ---------- hero: the mark, centred, because the mark is radial ---------- */

.hero {
  position: relative;
  background: var(--surface);
  padding: var(--s4) 0 var(--s5);
  text-align: center;
  overflow: hidden;
}
@media (min-width: 48rem) { .hero { padding: var(--s5) 0 var(--s6); } }
.hero::before {
  /* one soft halo behind the logo — the only decorative flourish on the page */
  content: "";
  position: absolute;
  top: -14rem;
  left: 50%;
  width: 40rem;
  height: 40rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 168, 222, 0.22), rgba(232, 169, 196, 0.12) 45%, transparent 70%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero__logo {
  width: clamp(150px, 42vw, 215px);
  height: auto;
  margin: 0 auto var(--s3);
  display: block;
}
.hero__lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 auto var(--s4);
}

.hero__next {
  display: inline-block;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s3);
  max-width: 30rem;
  width: 100%;
}
.hero__next-label {
  font-weight: 700;
  color: var(--rose);
  margin-bottom: 0.15rem;
}
.hero__next-title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.15rem;
}
.hero__next-when { color: var(--ink-soft); margin-bottom: var(--s2); }
.hero__next .btn { width: 100%; }

/* ---------- the ring of support ---------- */

.ring {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 38rem) { .ring { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .ring { grid-template-columns: repeat(3, 1fr); } }

.ring li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s3);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.ring__dot {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  margin-top: 0.42rem;
}
.ring h3 { margin-bottom: 0.2rem; font-size: 1.1rem; }
.ring p { color: var(--ink-soft); font-size: 1rem; }

.dot-pink { background: var(--c-pink); }
.dot-lavender { background: var(--c-lavender); }
.dot-green { background: var(--c-green); }
.dot-blue { background: var(--c-blue); }
.dot-coral { background: var(--c-coral); }
.dot-rose { background: var(--c-rose); }

/* ---------- plain reassurances, no card chrome ---------- */

.plainlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  max-width: var(--measure);
}
.plainlist li { padding-left: 1.9rem; position: relative; }
.plainlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--c-green);
}
.plainlist strong { display: block; }

/* ---------- faces: everyone, as circles ---------- */

.faces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
}
.faces img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

/* ---------- cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
}

.practitioner-card { text-align: center; align-items: center; }
.practitioner-card__photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--s2);
}
.practitioner-card h3 { margin-bottom: 0.15rem; }
.practitioner-card__role {
  color: var(--rose);
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: var(--s2);
}
.practitioner-card p { color: var(--ink-soft); margin-bottom: var(--s3); }
/* margin-top:auto keeps the buttons on one line across cards of unequal height */
.practitioner-card .btn { margin-top: auto; }

.event-card__format {
  align-self: flex-start;
  background: var(--rose-wash);
  color: var(--rose-deep);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  margin-bottom: var(--s2);
}
.event-card__when { font-weight: 700; margin-bottom: 0.15rem; }
.event-card__where { color: var(--ink-soft); margin-bottom: var(--s2); }
.event-card__who { color: var(--ink-soft); }
.event-card__led-by { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: var(--s3); }
.event-card .btn { margin-top: auto; align-self: stretch; }

/* ---------- resources ---------- */

.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.resource-list__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s3);
}
.resource-list__type { color: var(--rose); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.resource-list__author { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 0; }

/* ---------- faq ---------- */

.faq { max-width: var(--measure); }
.faq > div { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.faq > div:first-child { border-top: 1px solid var(--line); }
.faq h3 { margin-bottom: 0.3rem; }
.faq p { color: var(--ink-soft); }

/* ---------- contact form ---------- */

.contact-form { display: grid; gap: var(--s1); max-width: 32rem; }
.contact-form label { font-weight: 700; margin-top: var(--s2); }
.contact-form input,
.contact-form textarea {
  font: inherit;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 48px;
  background: var(--surface);
}
.contact-form button { margin-top: var(--s3); }

/* ---------- closing call to action ---------- */

.closer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  text-align: center;
  padding: var(--s5) 0;
}
.closer p { max-width: 32rem; margin-left: auto; margin-right: auto; color: var(--ink-soft); font-size: 1.1rem; }
.closer .btn { margin-top: var(--s3); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: var(--s4) 0;
  color: var(--ink-soft);
}
.site-footer p { max-width: var(--measure); }
.site-footer__small { font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}