/* ===========================================================================
   GolfWiz - Refer & Earn (affiliate onboarding)
   Built from Figma: Landing Page GolfWiz / new pages site
     desktop  2117:12   1424 wide
     mobile   2117:177   375 wide

   Every rule is scoped under #gw-refer so nothing here can leak into the
   Elementor header/footer that get_header()/get_footer() render around it.
   The theme already ships .eyebrow in styles/all.css - the scope is what keeps
   the two apart.

   Inter is NOT loaded here. styles/all.css self-hosts inter-v20-latin 400-900
   (see fonts/), so the Google Fonts request from the standalone HTML is gone.

   Breakpoints follow the website design system:
     mobile   < 640px    1 col, 20px gutter
     tablet   >= 640px   2 col, 32px gutter   (no Figma frame existed; derived)
     desktop  >= 1024px  3 col, 48px gutter
   =========================================================================== */

#gw-refer {
  /* colour - one job per hue */
  --primary:        #1A8AFF;
  --primary-press:  #1473D6;
  --success-text:   #1F8A5F;   /* legible green on white, not #34B884 */
  --bg:             #FFFFFF;
  --surface-muted:  #F3F4F6;
  --border:         #E5E7EB;
  --text:           #161A1A;
  --text-secondary: #5B616B;
  --placeholder:    #757575;
  --ink-dark:       #0F1115;

  /* spacing - v1.1 primitives */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px;

  /* rhythm - fluid by design, collapses toward 64 on a phone */
  --section-y: clamp(56px, 8vw, 112px);
  --gutter:    clamp(20px, 4vw, 48px);
  --container: 1140px;
  --radius-card: 16px;
  --radius-input: 8px;

  /* was `body` in the standalone file */
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#gw-refer *, #gw-refer *::before, #gw-refer *::after { box-sizing: border-box; }

#gw-refer img { max-width: 100%; }

#gw-refer .wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- type ramp ---------------------------------------------------------- */
#gw-refer .h1 {
  margin: 0;
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
}
#gw-refer .h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
#gw-refer .h3 { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
#gw-refer .h4 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; }
#gw-refer .lead {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--text-secondary);
  font-weight: 400;
}
#gw-refer .p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
#gw-refer .note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }

/* --- buttons ------------------------------------------------------------ */
#gw-refer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 53px;
  padding: 14px 32px;
  border: 0;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  font: 700 17px/1 Inter, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
#gw-refer .btn:hover { background: var(--primary-press); color: #fff; }
#gw-refer .btn:active { transform: translateY(1px); }
#gw-refer .btn:focus-visible { outline: 3px solid rgba(26,138,255,.4); outline-offset: 2px; }

/* =========================================================================
   HERO
   ========================================================================= */
#gw-refer .hero {
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  /* top was --s-32; .hb-breadcrumbs contributes its own 8px+ above */
  padding-block: var(--s-24) clamp(48px, 7vw, 80px);
  text-align: center;
}

/* Breadcrumb is the site-wide Rank Math one (.hb-breadcrumbs in
   styles/all.css, ~line 860): 13px, #5b616b, home glyph, bold .last. All that
   is inherited - the only thing owed here is the gap down to the eyebrow.
   .hb-breadcrumbs brings padding-block: 24px of its own, so the hero's own top
   padding is dropped to 8px to keep the Figma offset from the header.
   It stays left-aligned inside the centred hero: .hb-breadcrumbs p is
   display:flex, so the parent's text-align never reaches it. */
#gw-refer .hb-breadcrumbs {
  padding-block: 8px 0;
  margin-bottom: clamp(24px, 3.4vw, 38px);
  text-align: left;
}

#gw-refer .eyebrow {
  margin: 0 0 var(--s-12);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary-press);
}

#gw-refer .hero .h1 { margin-bottom: var(--s-16); }
#gw-refer .hero .h1 .accent { color: var(--primary); }
#gw-refer .hero .lead { max-width: 42ch; margin-inline: auto; }

/* rate tiles */
#gw-refer .tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  max-width: 704px;
  margin: clamp(32px, 4vw, 52px) auto 0;
}
#gw-refer .tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(18px, 2vw, 24px) var(--s-16);
}
#gw-refer .tile__eyebrow {
  margin: 0;
  font-size: clamp(10px, 1vw, 11px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
#gw-refer .tile--boosted .tile__eyebrow { color: var(--success-text); }
#gw-refer .tile__pct {
  margin: var(--s-8) 0 var(--s-4);
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
}
#gw-refer .tile__label { margin: 0; font-size: clamp(13px, 1.3vw, 15px); color: var(--text-secondary); }

#gw-refer .hero .btn { margin-top: clamp(32px, 4vw, 48px); }
#gw-refer .hero .note { margin-top: var(--s-20); }

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
#gw-refer .how { padding-block: var(--section-y); text-align: center; }
#gw-refer .how .h2 { margin-bottom: clamp(40px, 5vw, 77px); }

#gw-refer .steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 5vw, 32px);
  max-width: 1044px;
  margin-inline: auto;
}
#gw-refer .step { display: flex; flex-direction: column; align-items: center; }
#gw-refer .step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--ink-dark);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: var(--s-16);
}
#gw-refer .step .h3 { margin-bottom: var(--s-8); }
#gw-refer .step .p { max-width: 33ch; }

/* =========================================================================
   BENEFITS
   ========================================================================= */
#gw-refer .benefits {
  background: var(--surface-muted);
  padding-block: var(--section-y);
}
#gw-refer .benefits .h2 { text-align: center; margin-bottom: clamp(40px, 5vw, 48px); }

#gw-refer .ben-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  max-width: 1044px;
  margin-inline: auto;
}
#gw-refer .benefit {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s-24);
}
#gw-refer .benefit__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: var(--surface-muted);
  margin-bottom: var(--s-16);
}
#gw-refer .benefit__ic svg { width: 24px; height: 24px; display: block; }
#gw-refer .benefit .h4 { margin-bottom: var(--s-8); }

/* =========================================================================
   APPLY
   ========================================================================= */
#gw-refer .apply { padding-block: var(--section-y); }
#gw-refer .apply__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  max-width: 1044px;
  margin-inline: auto;
}
#gw-refer .apply__intro .h2 { margin-bottom: var(--s-16); }
#gw-refer .apply__intro .lead { max-width: 46ch; }

#gw-refer .form-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 48px);
}
/* The Zoho embed brings its own card and padding - ours is only the frame.
   Height is set by Zoho over postMessage (see refer-and-earn.js); the value
   here is only the pre-handshake fallback. */
#gw-refer .form-card--embed { padding: 0; overflow: hidden; }
#gw-refer .zoho-form {
  display: block;
  width: 100%;
  height: 620px;
  border: none;
  transition: height .2s ease;
}

/* =========================================================================
   TABLET  >= 640px   - no Figma frame for this; derived from the DS reflow
   ========================================================================= */
@media (min-width: 640px) {
  #gw-refer .tiles { gap: var(--s-24); }
  #gw-refer .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-32); }
  #gw-refer .ben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   DESKTOP  >= 1024px
   ========================================================================= */
@media (min-width: 1024px) {
  #gw-refer .ben-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #gw-refer .apply__inner { grid-template-columns: minmax(0, 467fr) minmax(0, 513fr); }
  #gw-refer .apply__intro .h2 { max-width: 12ch; }
}

@media (prefers-reduced-motion: reduce) {
  #gw-refer * { transition: none !important; }
}

/* Dark mode: the theme sets data-theme="dark" on <html>. */
[data-theme="dark"] #gw-refer {
  --success-text:   #34B884;
  --bg:             #0F1115;
  --surface-muted:  #171A20;
  --border:         rgba(255, 255, 255, 0.12);
  --text:           #F3F4F6;
  --text-secondary: #9AA1AB;
  --placeholder:    #7D8590;
  /* the always-dark band needs lifting off the dark page */
  --ink-dark:       #1C2027;
}