/* =============================================================
   HubSpot form style overrides

   HubSpot forms ship with a built-in stylesheet that conflicts
   with the ThriveMap design. This file targets HubSpot's
   generated class names to restyle the embed without changing
   its markup. Include AFTER the HubSpot embed script loads.

   How to use:
   1. Drop the standard HubSpot embed code wherever a form is needed.
   2. Wrap the embed in <div class="tm-hs-form"> for scoping.
   3. This stylesheet does the rest.

   HubSpot's HTML structure is fixed. We can match the visual
   styling perfectly but cannot restructure the markup.
   ============================================================= */

@import url('tokens.css');

/* Scope all overrides under .tm-hs-form so we don't accidentally
   affect HubSpot embeds elsewhere (e.g. in a 3rd-party widget). */

.tm-hs-form .hs-form,
.tm-hs-form form.hs-form {
  font-family: var(--font-sans);
  color: var(--ink);
}

/* Form fields */
.tm-hs-form .hs-form-field {
  margin-bottom: 16px;
}

.tm-hs-form .hs-form-field > label,
.tm-hs-form .hs-form-field > label.hs-form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.tm-hs-form .hs-form-required {
  color: var(--cobalt);
  margin-left: 2px;
}

.tm-hs-form .hs-field-desc {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 4px;
}

/* Input, textarea, select — match our .field-input style */
.tm-hs-form input[type="text"],
.tm-hs-form input[type="email"],
.tm-hs-form input[type="tel"],
.tm-hs-form input[type="number"],
.tm-hs-form input[type="url"],
.tm-hs-form textarea,
.tm-hs-form select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--canvas);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.tm-hs-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 d='M1 1.5L6 6.5L11 1.5' stroke='%2374757F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.tm-hs-form textarea {
  min-height: 88px;
  resize: vertical;
}

.tm-hs-form input:focus,
.tm-hs-form textarea:focus,
.tm-hs-form select:focus {
  outline: none;
  border-color: var(--cobalt);
  background: var(--canvas-card);
}

/* Two-column field rows — HubSpot uses .hs-fieldtype-* + .hs-form-field
   wrapped in form_columns_2 for side-by-side fields */
.tm-hs-form .form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tm-hs-form .form-columns-2 .hs-form-field { margin-bottom: 0; }
@media (max-width: 600px) {
  .tm-hs-form .form-columns-2 { grid-template-columns: 1fr; gap: 16px; }
}

/* Three-column for things like address rows */
.tm-hs-form .form-columns-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .tm-hs-form .form-columns-3 { grid-template-columns: 1fr; gap: 16px; }
}

/* Checkbox and radio groups */
.tm-hs-form .inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tm-hs-form .inputs-list li {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tm-hs-form .inputs-list input[type="checkbox"],
.tm-hs-form .inputs-list input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--cobalt);
  cursor: pointer;
}
.tm-hs-form .inputs-list label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Legal consent text */
.tm-hs-form .legal-consent-container {
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.tm-hs-form .legal-consent-container p { font-size: 12px; color: var(--ink-mute); margin: 0 0 8px 0; }
.tm-hs-form .legal-consent-container a {
  color: var(--cobalt);
  text-decoration: none;
  border-bottom: 1px solid var(--cobalt-soft);
}

/* Submit button — matches .btn-primary */
.tm-hs-form .hs-button,
.tm-hs-form input[type="submit"].hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  padding: 14px 24px;
  background: var(--cobalt);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.tm-hs-form .hs-button:hover,
.tm-hs-form input[type="submit"].hs-button:hover {
  background: var(--cobalt-deep);
}

/* Error states */
.tm-hs-form .hs-form-field.field.error input,
.tm-hs-form .hs-form-field.field.error textarea,
.tm-hs-form .hs-form-field.field.error select,
.tm-hs-form .invalid {
  border-color: #B23A3A;
  background: rgba(178, 58, 58, 0.04);
}

.tm-hs-form .hs-error-msgs,
.tm-hs-form ul.hs-error-msgs {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
}
.tm-hs-form .hs-error-msgs li {
  margin: 0;
  font-size: 12px;
  color: #B23A3A;
  line-height: 1.4;
}

/* Success message after submission */
.tm-hs-form .submitted-message {
  padding: 24px 28px;
  background: var(--warm);
  border-left: 3px solid var(--cobalt);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.tm-hs-form .submitted-message p { font-size: 16px; color: var(--ink); margin: 0; }