/* =======================================================================
   signup-v2.css — Email signup (tee time alerts early-access)
   Component: src/_includes/components/email-signup.njk
   Behavior:  js/email-signup.js

   Loaded GLOBALLY in base-v2.njk. The footer variant renders on every page,
   so this cannot be a per-page (pageCss) stylesheet -- it would silently fail
   to apply on surfaces that do not load it (the S67 multi-surface lesson).

   All values from tokens.css -- no hardcoded hex or font strings.
   Selectors stay self-contained under .sct-signup; none are nested under a
   surface wrapper (.sct-search--area, .sct-page__body, etc.), so every rule
   applies wherever the partial renders (S51 cascade-scope lesson).
   ======================================================================= */

/* --- Visibility primitives ----------------------------------------- */
/* The form is set display:flex below and is toggled via the [hidden] attribute
   on success; the msg is [hidden] by default and shown by JS. An author display
   rule beats the UA [hidden]{display:none}, so re-assert it scoped to the
   component (the S67 "[hidden] defeated by an author display rule" trap). */
.sct-signup [hidden] { display: none !important; }

/* Honeypot: off-screen, NOT display:none -- bots still fill a rendered field. */
.sct-signup__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Visually-hidden email label (implicit <label>; no id, so multi-instance safe). */
.sct-signup__field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Shared form + controls ---------------------------------------- */
.sct-signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sct-space-2);
  margin: 0;
}

.sct-signup__input {
  flex: 1 1 220px;
  min-width: 0;
  height: var(--sct-btn-height);
  padding: 0 var(--sct-space-4);
  font-family: var(--sct-font-ui);
  font-size: 16px; /* >=16px prevents iOS Safari zoom-on-focus */
  color: var(--sct-ink-900);
  background: var(--sct-white);
  border: 1px solid var(--sct-ink-300);
  border-radius: var(--sct-radius-sm);
  transition: border-color var(--sct-transition-fast), box-shadow var(--sct-transition-fast);
}
.sct-signup__input::placeholder { color: var(--sct-ink-400); }
.sct-signup__input:focus-visible {
  outline: none;
  border-color: var(--sct-green-600);
  box-shadow: 0 0 0 3px var(--sct-overlay-field-focus);
}

.sct-signup__btn {
  flex: 0 0 auto;
  height: var(--sct-btn-height);
  padding: 0 var(--sct-space-6);
  font-family: var(--sct-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--sct-green-900);
  background: var(--sct-gold-700);
  border: 0;
  border-radius: var(--sct-radius-sm);
  cursor: pointer;
  transition: background var(--sct-transition-fast);
}
.sct-signup__btn:hover { background: var(--sct-gold-600); }
.sct-signup__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sct-gold-300);
}
.sct-signup__btn:disabled { opacity: 0.6; cursor: default; }

/* --- Messages (role=status; shown by JS on success/error) ---------- */
.sct-signup__msg {
  margin: var(--sct-space-3) 0 0;
  font-family: var(--sct-font-ui);
  font-size: 14px;
  line-height: 1.45;
}
.sct-signup__msg--success { color: var(--sct-gold-700); }
.sct-signup__msg--error   { color: var(--sct-status-closed); }

/* --- Legal microcopy ----------------------------------------------- */
.sct-signup__legal {
  margin: var(--sct-space-2) 0 0;
  font-family: var(--sct-font-ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--sct-ink-500);
}
/* a.classname (0,0,1,1) so a prose-surface `.sct-page__body a` rule cannot
   silently win the cascade if this component ever lands on one (S54 lesson). */
a.sct-signup__legal-link {
  color: var(--sct-ink-600);
  text-decoration: underline;
}
a.sct-signup__legal-link:hover { color: var(--sct-green-700); }

/* --- Shared copy elements ------------------------------------------ */
.sct-signup__tag {
  margin: 0 0 var(--sct-space-2);
  font-family: var(--sct-font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sct-signup__headline {
  margin: 0 0 var(--sct-space-2);
  font-family: var(--sct-font-display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.sct-signup__offer {
  margin: 0 0 var(--sct-space-4);
  font-family: var(--sct-font-ui);
  font-size: 15px;
  line-height: 1.5;
}
.sct-signup__micro {
  margin: var(--sct-space-3) 0 0;
  font-family: var(--sct-font-ui);
  font-size: 12px;
  color: var(--sct-ink-500);
}

/* =======================================================================
   VARIANT: inline -- homepage + market/Near Me pages
   Dark green CTA panel on the linen page.
   ======================================================================= */
.sct-signup--inline {
  max-width: 880px;
  margin: var(--sct-space-12) auto;
  padding: var(--sct-space-10) var(--sct-space-6);
  background: var(--sct-green-800);
  border-radius: var(--sct-radius-lg);
  color: var(--sct-paper);
  text-align: center;
}
.sct-signup--inline .sct-signup__tag      { color: var(--sct-gold-500); }
.sct-signup--inline .sct-signup__msg--success { color: var(--sct-gold-500); }
.sct-signup--inline .sct-signup__headline { color: var(--sct-paper); }
.sct-signup--inline .sct-signup__offer    { color: var(--sct-green-200); max-width: 52ch; margin-left: auto; margin-right: auto; }
.sct-signup--inline .sct-signup__form     { max-width: 460px; margin-left: auto; margin-right: auto; justify-content: center; }
.sct-signup--inline .sct-signup__micro    { color: var(--sct-green-300); }
.sct-signup--inline .sct-signup__legal    { color: var(--sct-green-300); }
.sct-signup--inline a.sct-signup__legal-link        { color: var(--sct-gold-300); }
.sct-signup--inline a.sct-signup__legal-link:hover  { color: var(--sct-gold-100); }

/* =======================================================================
   VARIANT: empty-state -- shown in the no-live-times flow
   Lighter paper card that sits within the results area.
   ======================================================================= */
.sct-signup--empty-state {
  margin: var(--sct-space-6) 0;
  padding: var(--sct-space-6);
  background: var(--sct-paper);
  border: var(--sct-rule-fine);
  border-radius: var(--sct-radius-md);
}
.sct-signup--empty-state .sct-signup__headline { color: var(--sct-green-800); font-size: clamp(20px, 3.5vw, 26px); }
.sct-signup--empty-state .sct-signup__offer    { color: var(--sct-ink-700); }

/* =======================================================================
   VARIANT: footer -- band at the top of the dark footer
   Sits inside .footer-v2 (green-800); label matches .footer-nav-heading.
   ======================================================================= */
.sct-signup--footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sct-space-8) var(--sct-space-5) var(--sct-space-6);
  border-bottom: 1px solid var(--sct-overlay-dark-divider-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sct-space-3);
}
.sct-signup--footer .sct-signup__label {
  margin: 0;
  font-family: var(--sct-font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sct-gold-500);
}
.sct-signup--footer .sct-signup__form  { max-width: 420px; }
.sct-signup--footer .sct-signup__msg--success { color: var(--sct-gold-500); }
.sct-signup--footer .sct-signup__legal { color: var(--sct-green-300); }
.sct-signup--footer a.sct-signup__legal-link       { color: var(--sct-gold-300); }
.sct-signup--footer a.sct-signup__legal-link:hover { color: var(--sct-gold-100); }

/* --- Responsive ---------------------------------------------------- */
@media (min-width: 768px) {
  .sct-signup--footer { padding: var(--sct-space-10) var(--sct-space-8) var(--sct-space-8); }
}
@media (max-width: 479px) {
  /* Button drops full-width below the input on phones. */
  .sct-signup__btn { flex: 1 1 100%; }
}