/*
 * Homepage visual handoff
 * The homepage retains its useful interaction model, but now uses the shared
 * Baloo / Nunito / Caveat visual system used throughout the wider site.
 */

.r-shell {
  --r-ink: var(--ink);
  --r-ink-soft: var(--ink-soft);
  --r-coral: var(--coral);
  --r-coral-text: var(--coral-text);
  --r-cream: var(--cream);
  --r-card: var(--card);
  --r-peach: var(--peach);
  --r-green: var(--green);
  --r-green-bg: var(--green-bg);
  --r-teal: var(--teal);
  --r-teal-bg: var(--teal-bg);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
}

.r-shell *, .r-shell *::before, .r-shell *::after { box-sizing: border-box; }
.r-shell h1, .r-shell h2, .r-shell h3, .r-shell h4,
.r-shell button, .r-shell input, .r-shell select, .r-shell textarea {
  font-family: var(--font-heading);
}
.r-shell p, .r-shell input, .r-shell select, .r-shell textarea { font-family: var(--font-body); }

.r-announcement {
  background: var(--peach);
  border-bottom: 2px dashed var(--coral-text);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 600;
}
.r-announcement a { color: var(--coral-text); font-weight: 700; }

.r-header {
  background: var(--card);
  border-bottom: 3px solid var(--ink);
  box-shadow: none;
}
.r-brand { color: var(--ink); text-decoration: none; }
.r-brand img {
  width: 64px !important;
  height: auto !important;
  aspect-ratio: 450 / 334;
  object-fit: contain;
  transform: rotate(-2deg);
}
.r-brand span { line-height: .84; }
.r-brand em, .r-brand b, .r-brand strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.r-brand em { color: var(--coral-text); font-size: 18px; }
.r-brand b, .r-brand strong { font-size: 28px; }
.r-brand b { display: inline; }
.r-brand strong { display: inline; margin-left: 3px; }
.r-main-nav a, .r-mobile-nav a {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
}
.r-main-nav a:hover, .r-mobile-nav a:hover { color: var(--coral-text); }
.r-nav-course, .r-menu-button {
  border: 3px solid var(--ink) !important;
  border-radius: 40px !important;
  background: var(--coral) !important;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}
.r-menu-button { box-shadow: none; }
.r-mobile-nav { background: var(--card); border-bottom: 3px solid var(--ink); }

.r-hero {
  max-width: 1120px;
  margin: 30px auto 0;
  padding: clamp(30px, 5vw, 58px);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 34px 190px 32px 180px / 180px 34px 185px 30px;
  box-shadow: 8px 10px 0 rgba(42, 33, 28, .12);
}
.r-hero-copy { gap: 16px; }
.r-eyebrow, .r-field-tab {
  color: var(--coral-text) !important;
  font-family: var(--font-display) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.r-eyebrow span { display: none; }
.r-purpose-signpost {
  display: inline-flex;
  align-self: flex-start;
  max-width: 590px;
  gap: 9px;
  align-items: center;
  margin: 0 0 3px;
  padding: 8px 14px;
  border: 2px solid var(--green-text);
  border-radius: 28px 22px 30px 20px;
  background: var(--green-bg);
  color: var(--green-text-strong);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.r-purpose-signpost::before { content: "✦"; color: var(--coral-text); font-size: 17px; }
.r-hero h1, .r-hero h1 i {
  color: var(--ink);
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.02;
}
.r-hero h1 i { color: var(--coral-text); }
.r-intro { color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.r-hero-routes > p, .r-hero-note { font-family: var(--font-body); }
.r-route-button {
  border: 3px solid var(--ink) !important;
  border-radius: 26px 42px 22px 36px !important;
  background: var(--peach) !important;
  box-shadow: 4px 5px 0 rgba(42, 33, 28, .12);
  color: var(--ink) !important;
}
.r-route-button:hover { transform: translateY(-2px) rotate(-.25deg); border-color: var(--coral) !important; }
.r-route-childminder { background: var(--teal-bg) !important; }
.r-route-button small { color: var(--coral-text); font-family: var(--font-display); font-size: 18px; }
.r-route-childminder small { color: var(--teal-text); }
.r-hero-image { border: 0; }
.r-hero-image img {
  border: 3px solid var(--ink);
  border-radius: 180px 28px 170px 26px / 28px 170px 26px 180px;
  box-shadow: 6px 8px 0 rgba(42, 33, 28, .12);
}
.r-note { border: 2px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 rgba(42, 33, 28, .14); }

.r-route-section, .r-story, .r-about, .r-newsletter, .r-childminders, .r-courses, .r-question {
  background: var(--cream) !important;
}
.r-route-section, .r-about, .r-newsletter, .r-childminders, .r-courses, .r-question { border-top: 0; }
.r-section-heading h2, .r-story h2, .r-about h2, .r-newsletter h2, .r-childminders h2, .r-courses h2, .r-question h2 {
  color: var(--ink) !important;
  font-family: var(--font-heading) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}
.r-section-heading h2 i, .r-story h2 i, .r-about h2 i, .r-newsletter h2 i, .r-childminders h2 i, .r-courses h2 i, .r-question h2 i {
  color: var(--coral-text);
  font-family: var(--font-heading);
  font-style: normal;
}
.r-audience-switch { border-bottom: 3px dashed var(--border-muted); }
.r-audience-switch button { color: var(--ink); font-family: var(--font-heading); font-weight: 700; }
.r-audience-switch button.is-active { color: var(--coral-text); border-color: var(--coral-text); }
.r-route-panel, .r-about-principles article, .r-newsletter form {
  background: var(--card) !important;
  border: 3px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(42, 33, 28, .12);
}
.r-route-panel { border-radius: 26px 180px 24px 190px / 180px 26px 190px 24px; }
.r-route-panel-childminder { background: var(--teal-bg) !important; }
.r-mini-cards a { border: 2px solid var(--ink); border-radius: 24px 36px 20px 34px; background: var(--peach); color: var(--ink); }
.r-route-panel-childminder .r-mini-cards a { background: var(--card); }
.r-resources { background: var(--green-text-strong) !important; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.r-resources .r-section-heading h2, .r-resources .r-section-heading p { color: #fff8f0 !important; }
.r-resources .r-eyebrow { color: #ffe7d7 !important; }
.r-search { border: 3px solid var(--ink); border-radius: 28px; background: var(--card); }
.r-search input { font-family: var(--font-body); }
.r-quick-tags button { border: 2px solid #fff8f0; border-radius: 24px; background: transparent; color: #fff8f0; font-family: var(--font-heading); }
.r-resource-card { border: 3px solid var(--ink); border-radius: 26px 90px 24px 88px / 84px 26px 86px 24px; box-shadow: 5px 6px 0 rgba(42, 33, 28, .18); }
.r-resource-card:hover { transform: translateY(-3px) rotate(-.3deg); }
.r-resource-card h3, .r-resource-card p { color: var(--ink); }
.r-resource-card small { color: var(--coral-text); font-family: var(--font-display); font-size: 19px; }
.r-story-photo, .r-childminder-photo { border: 3px solid var(--ink); border-radius: 26px 180px 24px 190px / 180px 26px 190px 24px; overflow: hidden; box-shadow: 6px 8px 0 rgba(42, 33, 28, .12); }
.r-story-photo img, .r-childminder-photo img { border: 0; border-radius: 0; box-shadow: none; }
.r-about-principles article { border-left: 3px solid var(--coral-text); }
.r-contact-faq details { border: 2px solid var(--ink); border-radius: 20px; background: var(--card); }
.r-newsletter { background: var(--green-bg) !important; border-top: 3px dashed var(--green-text); border-bottom: 3px dashed var(--green-text); }
.r-newsletter form { border-radius: 24px 160px 22px 150px / 150px 24px 160px 22px; }
.r-newsletter input[type="email"], .r-newsletter select, .r-contact-fields input, .r-contact-fields select, .r-contact-fields textarea {
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}
.r-button, .r-newsletter .r-button, .r-contact-form .r-button {
  border: 3px solid var(--ink) !important;
  border-radius: 40px !important;
  background: var(--coral) !important;
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}
.r-button:hover, .r-newsletter .r-button:hover, .r-contact-form .r-button:hover { transform: translateY(-2px); }
.r-childminders { background: var(--teal-bg) !important; border-top: 3px solid var(--teal); border-bottom: 3px solid var(--teal); }
.r-course-list a { border-bottom: 3px dashed var(--border-muted); color: var(--ink); }
.r-question { background: var(--peach) !important; }
.r-footer { background: var(--card); border-top: 3px solid var(--ink); color: var(--ink-soft); }
.r-footer a { color: var(--ink); font-family: var(--font-heading); }

@media (max-width: 760px) {
  .r-hero { margin: 18px 16px 0; padding: 28px 22px; border-radius: 26px 80px 24px 74px / 78px 24px 78px 22px; }
  .r-brand img { width: 54px !important; }
  .r-brand em { font-size: 16px; }
  .r-brand b, .r-brand strong { font-size: 24px; }
  .r-purpose-signpost { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .r-route-button:hover, .r-resource-card:hover, .r-button:hover, .r-newsletter .r-button:hover, .r-contact-form .r-button:hover { transform: none; }
}

/* Feedback refinement: route-card labels must read as two clear lines, not one crowded sentence. */
.r-mini-cards a {
  align-items: start;
  row-gap: 8px;
}

.r-mini-cards a small {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.r-mini-cards a strong {
  display: block;
  max-width: 100%;
  line-height: 1.15;
}

@media (max-width: 680px) {
  .r-mini-cards a { padding: 18px 16px; }
  .r-mini-cards a small { font-size: 10px; }
  .r-mini-cards a strong { font-size: 18px; }
}