/* FantasyEdge Pro landing page styles */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #04060d;
  color: #e6f1ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.page {
  width: 100%;
  display: flex;
  justify-content: center;
}

.page img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
}

/* Page 3 — image with overlaid interactive form.
   The wrap gets an explicit aspect ratio matching pg3.jpg so its height is
   definite, which is required for the percentage heights on the form fields
   below to resolve correctly. */
.page-3-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 847 / 846;
}

.page-3-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.overlay-form {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* clicks fall through except on fields */
}

.overlay-form .field {
  position: absolute;
  pointer-events: auto;
  display: block;
}

.overlay-form input,
.overlay-form select,
.overlay-form textarea,
.overlay-form button {
  width: 100%;
  height: 100%;
  background: #0b1220;
  color: #e6f1ff;
  border: 1px solid #1c2740;
  border-radius: 8px;
  padding: 0 14px;
  font-family: inherit;
  font-size: clamp(11px, 1.4vw, 16px);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.overlay-form textarea {
  padding: 10px 14px;
  resize: none;
  line-height: 1.4;
}

.overlay-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2360a5fa' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.overlay-form input::placeholder,
.overlay-form textarea::placeholder {
  color: #7a8aa8;
}

.overlay-form input:focus,
.overlay-form select:focus,
.overlay-form textarea:focus,
.overlay-form button:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25);
}

.overlay-form button {
  background: linear-gradient(180deg, #0b3a4a 0%, #082731 100%);
  border: 1.5px solid #22d3ee;
  color: #22d3ee;
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 26px);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}

.overlay-form button:hover {
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
}

.overlay-form button:active {
  transform: translateY(1px);
}

.overlay-form button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/*
  Field positions, expressed as percentages of the pg3 image (847x846).
  Coordinates measured by pixel-scanning the image:
    Full Name   y=248..277  x=351..784
    Email       y=312..341  x=351..784
    Sport       y=380..412  x=351..525   (dropdown only — league logos sit to its right)
    Player Type y=450..480  x=351..784
    Decisions   y=543..595  x=351..784
    Get My Edge y=600..643  x=350..785   (cyan-bordered button)
  Using top/right/bottom/left (not width/height) so each field's dimensions
  are derived directly from its bounding box.
*/
.field-name        { top: 29.3%; left: 41.4%; right:  7.4%; bottom: 67.3%; }
.field-email       { top: 36.9%; left: 41.4%; right:  7.4%; bottom: 59.7%; }
.field-sport       { top: 44.9%; left: 41.4%; right: 33.0%; bottom: 51.3%; }
.field-player-type { top: 53.2%; left: 41.4%; right:  7.4%; bottom: 43.3%; }
.field-decisions   { top: 63.5%; left: 41.4%; right:  7.4%; bottom: 28.0%; }
.field-submit      { top: 70.9%; left: 41.3%; right:  7.3%; bottom: 24.0%; }

/* Status / success / error messages, positioned near submit button */
.form-status {
  position: absolute;
  left: 42.5%;
  width: 51.5%;
  top: 79%;
  text-align: center;
  font-size: clamp(11px, 1.3vw, 14px);
  pointer-events: none;
  min-height: 1.4em;
}

.form-status.success { color: #22d3ee; }
.form-status.error   { color: #f87171; }

/*
  Mobile fallback:
  On small viewports, overlaid inputs become unreadably small.
  Hide overlay positioning and stack the form below the image.
*/
@media (max-width: 700px) {
  /* Drop the aspect-ratio + absolute image so pg3 sits in normal flow
     and the form below it isn't painted-over by the absolutely-positioned
     image. */
  .page-3-wrap {
    aspect-ratio: auto;
  }
  .page-3-wrap img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
  }
  .overlay-form {
    position: static;
    inset: auto;
    pointer-events: auto;
    padding: 20px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #04060d;
  }
  .overlay-form .field {
    position: static;
    width: 100%;
    height: auto;
  }
  .overlay-form .sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 6px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    display: block;
  }
  .overlay-form input,
  .overlay-form select,
  .overlay-form textarea {
    height: 44px;
    font-size: 16px; /* prevents iOS zoom */
  }
  .overlay-form textarea {
    height: auto;
    min-height: 80px;
  }
  .overlay-form button {
    height: 52px;
    font-size: 18px;
  }
  .form-status {
    position: static;
    width: 100%;
    padding: 8px 16px 16px;
    text-align: center;
  }
}