/* ==========================================================================
   HubSpot embedded form styling — ROI brand alignment
   Portal: 245143357 | Region: na2
   Applies to: Assessment Gate, Specialty PDF Gate, Footer Newsletter
   ========================================================================== */

/* Brand token overrides for HubSpot form containers */
.roi-hs-wrapper {
  --roi-navy: #0B1421;
  --roi-teal: #19BAB0;
  --roi-teal-dark: #148F87;
  --roi-gray-700: #334155;
  --roi-gray-500: #64748B;
  --roi-gray-200: #E2E8F0;
  --roi-gray-50: #F8FAFC;
}

/* PHI disclaimer banner — sits above every form */
.roi-phi-banner {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-left: 4px solid #F59E0B;
  color: #78350F;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 16px;
  font-weight: 500;
}

.roi-phi-banner strong { color: #78350F; }

/* Form block container */
.roi-hs-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--roi-gray-200);
  border-radius: 12px;
  padding: 24px;
  max-width: 720px;
  margin: 24px auto;
  box-shadow: 0 2px 8px rgba(11, 20, 33, 0.04);
}

.roi-hs-wrapper.roi-hs-inline {
  margin: 0;
  padding: 20px;
}

/* Footer newsletter wrapper — white card sitting in the navy footer.
   HubSpot v2 embeds as an iframe so parent CSS cannot style the form internals.
   We keep the wrapper light to match form defaults. */
.roi-hs-wrapper.roi-hs-footer {
  background: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 720px;
  margin: 0 auto 24px auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.roi-hs-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--roi-navy);
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.roi-hs-subheading {
  font-size: 0.95rem;
  color: var(--roi-gray-700);
  margin: 0 0 18px 0;
  line-height: 1.5;
}

.roi-hs-footer .roi-hs-heading {
  color: #0B1421;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.roi-hs-footer .roi-hs-subheading {
  color: #334155;
  font-size: 0.88rem;
  margin-bottom: 12px;
}

.roi-hs-footer .roi-phi-banner {
  /* use default light-yellow banner — no override needed */
  font-size: 0.78rem;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* HubSpot v2 embeds use iframes — parent CSS cannot style form internals.
   We keep the wrapper light (white card on navy footer) so HubSpot defaults are legible. */

/* HubSpot form element styling (targets .hs-form-frame and its injected children) */
.roi-hs-wrapper .hs-form-frame {
  width: 100%;
}

/* Style the iframe-rendered form when HubSpot applies a theme */
.roi-hs-wrapper .hs-form-frame iframe {
  width: 100% !important;
  min-height: 480px;
}

/* Success state (post-submit inline message) */
.roi-hs-success {
  background: #ECFDF5;
  border: 1px solid #10B981;
  color: #065F46;
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 640px) {
  .roi-hs-wrapper { padding: 18px; margin: 16px 0; border-radius: 10px; }
  .roi-hs-heading { font-size: 1.15rem; }
  .roi-hs-subheading { font-size: 0.88rem; }
}