/* Refer a Partner page.
   Sections reuse the shared design-system styling loaded alongside this file:
   .hero + .closing-band (find-work.css) and .apply-section + .form-embed-frame
   (care-workers-apply.css). Page-specific "amp it up" styling lives here, all
   scoped to .page-template-refer-a-friend so nothing leaks to other pages.

   The shared hero/closing CSS is built for the green aged-care-worker palette;
   this page re-points the --fw-* custom properties at fill'd brand blue so the
   whole page reads blue without forking the shared rules. */

/* The hero "Refer a partner" button scrolls to the form via #refer-form.
   This stylesheet only loads on the refer template, so scoping smooth scroll to
   `html` here keeps it off every other page. */
html {
  scroll-behavior: smooth;
}
/* offset the anchor so the form tucks just under the sticky header (~69px)
   with no sliver of the previous section showing above it */
#refer-form {
  scroll-margin-top: 64px;
}

@media (max-width: 640px) {
  #refer-form {
    scroll-margin-top: 60px;
  }
}

/* ============================================================
   Hero — blue palette, highlighted "$20 gift card", trust row
   ============================================================ */
.page-template-refer-a-friend .hero {
  --fw-hero-tag-text: var(--blue);
  --fw-hero-cta-bg: var(--blue);
  --fw-hero-cta-text: #fff;
  --fw-hero-underline: var(--blue-light);
}
.page-template-refer-a-friend .tag {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 15px;
}
/* The headline carries an explicit line break after "$20 gift card". At the
   shared 65px size the second phrase overflows the default text column and the
   forced break wraps raggedly. Give the referral hero's text column more room
   (narrower illustration) and size the headline fluidly so it holds at a strong
   size while still reading as two clean lines. */
.page-template-refer-a-friend .hero {
  grid-template-columns: 1.25fr 1fr;
}
.page-template-refer-a-friend .hero h1 {
  font-size: clamp(2.4rem, 5vw, 64px);
}
@media (max-width: 760px) {
  /* Stack like the shared hero on small screens (out-specifies .hero above). */
  .page-template-refer-a-friend .hero {
    grid-template-columns: 1fr;
  }
}
/* The mock highlights "$20 gift card" as solid blue text (no underline bar). */
.page-template-refer-a-friend .hero h1 .underline-accent {
  color: var(--blue);
  background-image: none;
}
.page-template-refer-a-friend .hero-cta .btn:hover {
  background: var(--blue-dark);
  opacity: 1;
}
.page-template-refer-a-friend .hero-cta-arrow {
  font-weight: 700;
  margin-left: 2px;
}

/* Trust badges under the button */
.page-template-refer-a-friend .hero-trust {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.page-template-refer-a-friend .hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #2a2a2a;
}
.page-template-refer-a-friend .hero-trust-icon {
  color: var(--blue);
  flex-shrink: 0;
}

/* Hero illustration (refferal-filld.webp — envelope + gift card) shown when no
   photo is set. Per the mock it floats on the white hero with no panel/shadow;
   the illustration's own white background blends into the section. */
.page-template-refer-a-friend .hero-image--illustration {
  background: none;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-template-refer-a-friend .hero-image--illustration img {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* ============================================================
   How it works — numbered + icon stepper on a dashed connector
   ============================================================ */
.page-template-refer-a-friend .refer-steps {
  background: #f2f7fd;
  padding: 56px 0 72px;
}
.page-template-refer-a-friend .refer-steps h2 {
  text-align: center;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.5px;
  margin: 0 auto;
}
.page-template-refer-a-friend .refer-steps-grid {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  position: relative;
}
/* dashed connector running behind the number circles */
.page-template-refer-a-friend .refer-steps-grid::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 10%;
  right: 10%;
  border-top: 2px dashed #b9d0f2;
  z-index: 0;
}
.page-template-refer-a-friend .refer-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 8px;
}
.page-template-refer-a-friend .refer-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.page-template-refer-a-friend .refer-step-icon {
  display: block;
  margin: 22px auto 14px;
  color: var(--blue);
  line-height: 0;
}
.page-template-refer-a-friend .refer-step-icon svg {
  width: 46px;
  height: 46px;
}
.page-template-refer-a-friend .refer-step h4 {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #14223a;
}
.page-template-refer-a-friend .refer-step-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: #5a6573;
  max-width: 184px;
  margin: 0 auto;
}
.page-template-refer-a-friend .refer-step-body p { margin: 0; }

/* ============================================================
   Form — frame the embed as a card so it reads as intentional
   ============================================================ */
.page-template-refer-a-friend .apply-section {
  background: #fff;
}
.page-template-refer-a-friend .apply-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.page-template-refer-a-friend .form-embed-frame {
  max-width: 760px;
  margin: 30px auto 0;
  background: #fff;
  border: 1px solid #e2ecf8;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(20, 40, 90, 0.08);
}

/* ============================================================
   Closing band — blue palette
   ============================================================ */
.page-template-refer-a-friend .closing-band {
  --fw-closing-bg: var(--blue-light);
  --fw-closing-heading: #14223a;
  --fw-closing-underline: var(--blue);
  --fw-closing-note: #2a2a2a;
  --fw-closing-cta-bg: var(--blue);
  --fw-closing-cta-text: #fff;
  --fw-closing-book-bg: #fff;
  --fw-closing-book-text: var(--blue);
  --fw-closing-book-border: var(--blue);
}

/* ============================================================
   Mobile — turn the stepper into a vertical timeline
   ============================================================ */
@media (max-width: 860px) {
  .page-template-refer-a-friend .refer-steps-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: 0;
    margin: 34px auto 0;
  }
  /* swap the horizontal connector for a per-step vertical dashed line that
     always runs circle-centre to circle-centre regardless of step height */
  .page-template-refer-a-friend .refer-steps-grid::before {
    content: none;
  }
  .page-template-refer-a-friend .refer-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
    text-align: left;
    padding: 14px 0;
  }
  .page-template-refer-a-friend .refer-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 35px;          /* circle centre: padding-top 14 + radius 21 */
    height: 100%;       /* one step tall = reaches the next circle centre */
    border-left: 2px dashed #b9d0f2;
    z-index: 0;
  }
  /* number + title share the top row; body spans beneath the title */
  .page-template-refer-a-friend .refer-step-num {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;         /* mask the dashed line behind the circle */
    margin: 0;
  }
  .page-template-refer-a-friend .refer-step h4 {
    grid-area: 1 / 2;
    margin: 0;
  }
  .page-template-refer-a-friend .refer-step-body {
    grid-area: 2 / 2 / 3 / 3;
    max-width: none;
    margin: 0;
  }
}