/* Hayward Motivational Comedy: /sign-up and /contact form pages.
   Every value here was MEASURED on the live Squarespace (Momentum) site on 2026-09-07:
   reference/probes_2026-09-07/signup_styles.json, contact_styles.json, forms_rendered.md,
   mobile_probes_summary.md and reference/GROUND_TRUTH_SPEC_2026-09-07.md (sections 4, 5, 9).
   Loads AFTER /assets/css/site.css (shell tokens, bottom bar, mobile menu live there). */

/* ------------------------------------------------------------------------------------
   Page frame: mirrors Squarespace's #mainContent + the 12-column grid.
   Desktop: 1000px box, 64px padding, margin-bottom 86px (clears the 88px fixed bar).
   The grid row pulls 15px out on each side and every block pads 15px back in, so the
   content column is 872px wide starting at x=284 on a 1440 viewport.
   ------------------------------------------------------------------------------------ */
main.page-forms {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto 86px;
  padding: 64px;
  min-height: calc(100vh - 86px);      /* live #mainContent fills the viewport above the bar */
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.page-forms [hidden] { display: none !important; }

.sqs-row { margin: 0 -15px; }
.sqs-row::after { content: ""; display: table; clear: both; }
.sqs-block { position: relative; padding: 15px; }
.sqs-block.first { padding-top: 0; }   /* Momentum: first block of a layout has no top padding */

/* Contact page row: 2-col spacer | 8-col content | 2-col spacer. The spacers are empty, so the
   8-col (66.6667% of the 902px row = 601.33px, content 571.33px at x=434) is simply centered.
   George's custom CSS makes the row a flex container (min-width 768), which is also why the
   intro paragraph's top margin stays inside the column instead of collapsing out of it. */
.contact-row { display: flex; align-items: center; justify-content: center; }
.sqs-col-8 { width: 66.6667%; flex: 0 0 66.6667%; min-width: 0; }

/* ------------------------------------------------------------------------------------
   Sign-up title: the "Tell Me Where To Perform" sparkle block, verbatim from
   days/2026-05-01_website_update/title-sparkle-by-claude/title_sparkle_v6_revert_to_4.html.
   Measured: 25.6px / 400 / line-height 30.72px / letter-spacing .256px / #f297ee, centered.
   ------------------------------------------------------------------------------------ */
.sparkle-wrap { position: relative; text-align: center; }
.sparkle-base,
.sparkle-overlay {
  font-family: var(--font);
  font-size: 1.6rem;            /* 25.6px */
  font-weight: 400;
  line-height: 1.2;             /* 30.72px: Momentum heading line-height */
  letter-spacing: 0.01em;       /* .256px */
  text-transform: none;
  margin: 0;
}
.sparkle-base { color: #f297ee; }
.sparkle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #f297ee;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 245, 255, 0.70) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 150% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sparkle-sweep 7s ease-in-out 0.1s 1 forwards;   /* one-shot sweep on page load */
  pointer-events: none;
}
@keyframes sparkle-sweep {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle-overlay { animation: none; display: none; }
}

/* ------------------------------------------------------------------------------------
   Contact intro paragraph (the live code block, contact_page_intro_text.html).
   Measured: 22.4px / 300 / line-height 38.08px / letter-spacing .448px / #f297ee,
   margin 22.4px 0 20px (Momentum p margin 1em + the inline margin-bottom: 20px).
   ------------------------------------------------------------------------------------ */
.contact-intro {
  color: #f297ee;
  font-size: 1.4rem;            /* 22.4px */
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: left;
  margin: 1em 0 20px;
}

/* ------------------------------------------------------------------------------------
   Form (Squarespace "website.components.form" geometry).
   Plain block layout on purpose: the last field's 18px bottom margin collapses with the
   button wrapper's 40px top margin exactly like the live DOM (button lands 40px below).
   ------------------------------------------------------------------------------------ */
.form-wrapper { max-width: 100%; color: rgba(255, 255, 255, 0.7); }
.form-wrapper form { display: block; }
.form-wrapper.submitting .field-list { opacity: 0.7; }

.field-list { line-height: normal; }
.field-list fieldset,
.field-list legend { margin: 0; padding: 0; border: 0; min-width: 0; }

/* single fields (Email, Zip Code, Subject, Message...) */
.field-list .form-item.field { margin: 0 0 18px; }
/* grouped fields (Phone, Name): the fieldset has no margin, its inner .field carries the 18px */
.field-list .form-item.fields { margin: 0; }
.field-list .form-item.fields .field { margin: 0 0 18px; }
.field-list .form-item.fields.phone { display: flow-root; }

/* Line heights are written out in px instead of "normal" on purpose: the live site computes
   normal = 22px for 16px Proxima Nova (Adobe Fonts build, ascent 16 / descent 6), while the
   copy installed on this Mac computes 16px (ascent 12 / descent 4). The px values reproduce
   the live boxes everywhere and are what the production Adobe kit renders anyway. */

/* labels: 16px / 300 / rgba(255,255,255,.7); a label pads 4px below itself (26px tall),
   a fieldset legend does not (22px tall) */
.field-list .title {
  display: block;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.7);
}
.field-list label.title { padding: 0 0 4px; }
.field-list legend.title { padding: 0; }

/* "(required)" runs inline after the label text at 12px. line-height 1 keeps the small inline
   box inside the 16px strut so the label stays exactly 22px tall (measured), and the 4px gap
   after the space puts its "(" on the live pixel column (2px inside 12px captions). */
.field-list .description { font-size: 12px; line-height: 1; margin-left: 4px; white-space: nowrap; opacity: .7; }   /* Squarespace: .field-list .description { opacity:.7 } (measured luminance 124 live) */

/* name halves: 12px captions sit inline in the field's 16px line box (22px tall, the strut of
   the .field itself) above each input; the input is a block so it starts on the next line */
.field-list .form-item.fields .field { font-size: 16px; line-height: 22px; }
.field-list .caption { font-size: 12px; line-height: 1; }
.field-list .caption-text { font-size: 12px; line-height: 1; }
.field-list .caption .description { margin-left: 2px; }
.field-list .fields.name { display: flex; gap: 10px; }
.field-list .fields.name .field { flex: 1 1 0; min-width: 0; }

/* inputs: 40px tall, 10px padding, #fafafa on 1px #a9a9a9, square corners, sans-serif 16px */
.field-list .field-element {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 10px;
  background: #fafafa;
  color: #000;
  border: 1px solid #a9a9a9;
  border-radius: 0;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  box-sizing: border-box;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.field-list textarea.field-element { height: 100px; min-height: 100px; resize: vertical; }
.field-list .field-element::placeholder { color: #cfcfcf; opacity: 1; }
.field-list .field-element:focus { background: #fff; transition: background 0.1s ease-in; }

/* honeypot: off-screen, never displayed, tabindex -1 in the markup */
.field-list .form-item.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* submit: 148x59 pill, 16px/600 uppercase, 1px tracking, #f297ee outline on transparent */
.form-button-wrapper { display: block; text-align: center; margin: 40px 0 0; padding: 0; }
.form-submit-button {
  display: inline-block;
  margin: 0;
  padding: 16px 40px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;            /* live: normal = 23px for 16px semibold; 23 + 32 + 4 = 59px tall */
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #f297ee;
  background: transparent;
  border: 2px solid #f297ee;
  border-radius: 300px;
  box-shadow: rgb(19, 19, 19) 0 2px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.form-submit-button:hover { opacity: 0.8; }               /* Momentum's link-hover idiom */
.form-submit-button:disabled { opacity: 0.5; cursor: default; }

/* after a 2xx: the field list + button are hidden and this replaces them (Squarespace default) */
.form-submission-text {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.form-submission-text p { white-space: pre-wrap; margin: 0; }
.form-submission-text:focus { outline: none; }

/* inline error under the button (Momentum's error tint) */
.form-submission-error {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: #e99292;
}
.form-submission-error a { color: #f297ee; }

/* ------------------------------------------------------------------------------------
   Mobile (<= 736px, Momentum's breakpoint): #mainContent padding 16px, margin-bottom 43px
   (clears the 45px bar); blocks keep 15px padding INCLUDING the first block's top, so the
   content column is 343px on a 375 viewport. George's custom CSS shrinks the button.
   ------------------------------------------------------------------------------------ */
@media (max-width: 736px) {
  main.page-forms {
    padding: 16px;
    margin-bottom: 43px;
    min-height: calc(100vh - 43px);
  }
  .sqs-block.first { padding-top: 15px; }
  .form-button-wrapper { margin-top: 16px; }
  .form-submit-button { padding: 10px 24px; font-size: 0.85rem; line-height: 20px; }   /* 13.6px, 44px tall */
}
/* Squarespace collapses the 12-col grid at 640px: the contact column goes full width */
@media (max-width: 640px) {
  .contact-row { display: block; }
  .sqs-col-8 { width: auto; flex: none; }
}