/*
 * Hy.ly form skin: makes the embedded Hy.ly form (#hy-XH4xPGofJ-1) match the
 * approved .form-card design (style.css → LEAD CAPTURE).
 *
 * Hy.ly injects its own <style> at runtime, after this file, so every rule is
 * scoped with #join (id specificity wins over Hy.ly's class selectors).
 * !important is used only where Hy.ly's own rule is !important.
 * Only Hy.ly's stable hooks are relied on: .hywrap, #hyform, #form-fields,
 * .control-group, .control-label, .controls, .form-actions, #form-success,
 * .LV_* (validation) and .pika-* (date picker).
 */

/* ── Container ── */
#join .hywrap {
  max-width: none; width: 100% !important; margin: 0;
  font-family: 'Jost', sans-serif; font-size: 14.5px; line-height: 1.5;
  color: var(--cream-light);
}
#join .hywrap * { line-height: 1.5; }
#join .hywrap #hyform,
#join .hywrap #form-fields,
#join .hywrap .meta { background: transparent; border: 0; margin: 0; padding: 0; color: var(--cream-light); }
#join .hywrap fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#join .hywrap legend { display: none; }

/* ── Grid: two columns on desktop, one on phones ── */
#join .hywrap #form-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
#join .hywrap .control-group {
  margin: 0; float: none; width: auto; clear: none;
  display: flex; flex-direction: column; gap: 8px;
}
#join .hywrap .control-group::before,
#join .hywrap .control-group::after { display: none; }
#join .hywrap .control-group.init_hidden { display: none; }
#join .hywrap .control-group.force_hidden { display: none !important; }
/* Full-width rows: name pair, comments, radios/checkboxes */
#join .hywrap .control-group.hy-name,
#join .hywrap .control-group.hytag_form_comment,
#join .hywrap .control-group:has(textarea),
#join .hywrap .control-group:has(input[type="radio"]),
#join .hywrap .control-group:has(input[type="checkbox"]) { grid-column: 1 / -1; }
/* First / last name sit side by side inside their own group */
#join .hywrap .name-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
#join .hywrap .name-fields li { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }

/* ── Labels (= .form-lbl) ── */
#join .hywrap .control-label,
#join .hywrap li label.control-label {
  float: none; width: auto; margin: 0; padding: 0; text-align: left;
  font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 9.5px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232,223,200,0.62);
}
#join .hywrap .required { display: none; }
#join .hywrap .controls { margin: 0; padding: 0; }

/* ── Inputs (= .form-ctrl) ── */
#join .hywrap input[type="text"],
#join .hywrap input[type="email"],
#join .hywrap input[type="tel"],
#join .hywrap select,
#join .hywrap textarea {
  display: block; width: 100%; height: auto; margin: 0 !important;
  padding: 12px 14px; box-sizing: border-box;
  border: 1px solid rgba(232,223,200,0.18); border-radius: 0;
  background: rgba(232,223,200,0.06); color: var(--cream-light);
  font-family: 'Jost', sans-serif; font-size: 14.5px; font-weight: 300; line-height: 1.4;
  outline: none; box-shadow: none; transition: border-color 200ms;
}
#join .hywrap select { appearance: auto; min-height: 47px; }
#join .hywrap textarea { min-height: 96px; resize: vertical; }
#join .hywrap input.datepicker { cursor: pointer; }
#join .hywrap input::placeholder,
#join .hywrap textarea::placeholder { color: rgba(232,223,200,0.3); opacity: 1; }
#join .hywrap input:focus,
#join .hywrap select:focus,
#join .hywrap textarea:focus { border-color: rgba(241,166,47,0.6); }
#join .hywrap input:focus-visible,
#join .hywrap select:focus-visible,
#join .hywrap textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#join .hywrap select option { background: var(--sage-dark); color: var(--cream-light); }

/* Radios / checkboxes (e.g. "Sign up for property updates", SMS opt-ins) */
#join .hywrap .radio,
#join .hywrap .checkbox {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-size: 14px !important; line-height: 26px !important;
  margin-right: 22px !important; text-align: left !important; width: auto !important;
  font-family: 'Jost', sans-serif; font-weight: 300; color: rgba(232,223,200,0.8);
  text-transform: none; letter-spacing: 0;
}
#join .hywrap .radio input,
#join .hywrap .checkbox input { margin: 0; width: auto; accent-color: var(--amber); }
#join .hywrap .sms-subscribed,
#join .hywrap .mms-subscribed {
  margin-top: 10px !important;
  font-size: 12px; line-height: 1.6; color: rgba(232,223,200,0.62);
}
#join .hywrap a { color: rgba(232,223,200,0.78); }

/* ── Validation messages (LiveValidation) ── */
#join .hywrap .LV_validation_message,
#join .hywrap .LV_invalid {
  display: block; clear: both; margin: 6px 0 0;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.02em;
  color: #F2A490;
}
#join .hywrap .LV_valid { display: none; }
#join .hywrap .LV_invalid_field,
#join .hywrap input.LV_invalid_field:focus { border-color: rgba(242,164,144,0.75); }

/* ── Submit (= .form-submit) ── */
#join .hywrap .form-actions {
  margin: 24px 0 0; padding: 0; border: 0; background: none; text-align: center;
}
#join .hywrap .form-actions button,
#join .hywrap button[type="submit"] {
  display: block; width: 100%; margin: 0; box-sizing: border-box;
  background: var(--amber); color: var(--charcoal);
  border: none; padding: 16px 32px;
  border-radius: 999px 999px 0 0; box-shadow: none; text-shadow: none;
  font-family: 'Jost', sans-serif; font-size: 10px; line-height: 1.4;
  letter-spacing: 0.24em; font-weight: 500; text-transform: uppercase;
  cursor: pointer; transition: background 200ms;
}
#join .hywrap .form-actions button:hover,
#join .hywrap button[type="submit"]:hover { background: #d4922a; color: var(--charcoal); border: none; }
#join .hywrap button[type="submit"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* "Save time, click here…" reveals the optional address fields */
#join .hywrap #more-info { margin-top: 18px; }
#join .hywrap #more-info a {
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; letter-spacing: 0.04em;
  color: rgba(232,223,200,0.62); text-decoration: underline; text-underline-offset: 3px;
}
#join .hywrap #more-info a:hover { color: var(--cream-light); }
#join .hywrap .reveal-btn { margin-left: 0; }

/* ── Success state ── */
#join .hywrap #form-success {
  background-color: transparent !important;
  border: 0 none !important;
  padding: 24px 8px !important;
  text-align: center !important;
}
#join .hywrap #form-success .ss-msg,
#join .hywrap #form-success {
  font-family: 'Corbyn', serif; font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; color: var(--cream-light);
}

/* ── Date picker (Pikaday is appended to <body>, outside #join) ── */
body .pika-single {
  z-index: 200; display: block; position: relative;
  background: var(--cream-light); color: var(--charcoal);
  border: 1px solid var(--stone); border-radius: 0;
  font-family: 'Jost', sans-serif;
}
body .pika-single.is-hidden { display: none; }
body .pika-single.is-bound { position: absolute; box-shadow: 0 18px 40px -12px rgba(8,31,26,0.55); }
body .pika-single .pika-label {
  background-color: var(--cream-light); color: var(--charcoal);
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
body .pika-single .pika-table th { color: var(--warm-gray); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; }
body .pika-single .pika-table abbr { text-decoration: none; }
body .pika-single .pika-button {
  background: transparent; color: var(--charcoal);
  font-family: 'Jost', sans-serif; font-size: 13px; text-align: center; border-radius: 0;
}
body .pika-single .is-today .pika-button { color: var(--amber-deep); font-weight: 600; }
body .pika-single .is-selected .pika-button {
  background: var(--sage); color: var(--cream-light); box-shadow: none; border-radius: 0;
}
body .pika-single .pika-button:hover {
  color: var(--charcoal) !important;
  background: var(--amber) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body .pika-single .is-disabled .pika-button { color: var(--muted); opacity: 0.45; }

@media (max-width: 600px) {
  #join .hywrap #form-fields,
  #join .hywrap .name-fields { grid-template-columns: 1fr; }
}

/* Turnstile slot for the lead backup (visible only if Cloudflare needs an interaction) */
#join .hyly-mirror-captcha { margin-top: 16px; display: flex; justify-content: center; }
#join .hyly-mirror-captcha:empty { display: none; }

/* reCAPTCHA v3 on the lead backup: Google's floating badge is hidden and replaced by
   the disclosure line Google requires in that case (inserted by hyly-mirror.js) */
.grecaptcha-badge { visibility: hidden; }
#join .hyly-mirror-legal {
  margin-top: 18px; text-align: center;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; line-height: 1.6;
  color: rgba(232,223,200,0.62);
}
#join .hyly-mirror-legal a { color: rgba(232,223,200,0.78); text-decoration: underline; text-underline-offset: 2px; }
#join .hyly-mirror-legal a:hover { color: var(--cream-light); }