/* On-brand styling for HubSpot forms rendered by the embed JS (FormEmbed / FormPopup islands).
   Both form generations render in LIGHT DOM (verified in DevTools — no shadow root), but with
   DIFFERENT class names, so we ship two styling layers:

   1. NEW (v4 / forms-next) forms use `hsfc-*` classes and style themselves from a documented set of
      `--hsf-*` CSS variables — each rule is `var(--hsf-X, var(--hsf-global, var(--hsf-default-X)))`.
      Defining `--hsf-*` on :root (below) themes EVERY v4 form site-wide from our --vn-* tokens, no
      form-editor styling. Exception: content authored with an INLINE colour (e.g. a rich-text
      description saved as color:#000 in the form editor) beats variables — the `.hsfc-*` !important
      overrides further down force those.
      Ref: developers.hubspot.com/docs/cms/start-building/features/forms/forms#define-custom-styling-for-embedded-forms-using-css
   2. LEGACY (v2) forms use `hs-*` classes; the `.vn-hsform .hs-*` selectors below style those.
      (v4 ignores those selectors; v2 ignores the --hsf-* vars — so we ship both.)

   Static .css only (no HubL — that would make the file a rejected template). The form always sits
   on a dark surface (a --vn-surface card inline, or the modal), so colours assume that context. */

:root {
  /* --- v4 (forms-next) forms: themed via HubSpot's documented --hsf-* custom properties --- */
  --hsf-global__font-family: var(--vn-font-body);
  --hsf-global__color: var(--vn-text);
  --hsf-global-error__color: #ff8a80;

  --hsf-row__vertical-spacing: var(--vn-space-4);
  --hsf-row__horizontal-spacing: var(--vn-space-3);
  --hsf-module__vertical-spacing: var(--vn-space-4);

  /* Transparent form: it sits inside our own modal/card, which supplies the surface. */
  --hsf-background__background-color: transparent;
  --hsf-background__border-style: none;
  --hsf-background__border-width: 0;
  --hsf-background__border-radius: 0;
  --hsf-background__padding: 0;

  --hsf-heading__font-family: var(--vn-font-heading);
  --hsf-heading__color: var(--vn-text);

  --hsf-richtext__font-family: var(--vn-font-body);
  --hsf-richtext__color: var(--vn-text-muted);

  --hsf-field-label__font-family: var(--vn-font-body);
  --hsf-field-label__font-size: var(--vn-text-sm);
  --hsf-field-label__color: var(--vn-text);
  --hsf-field-label-requiredindicator__color: var(--vn-accent);
  --hsf-field-description__font-family: var(--vn-font-body);
  --hsf-field-description__color: var(--vn-text-muted);
  --hsf-field-footer__font-family: var(--vn-font-body);
  --hsf-field-footer__color: var(--vn-text-muted);

  --hsf-field-input__font-family: var(--vn-font-body);
  --hsf-field-input__color: var(--vn-text);
  --hsf-field-input__background-color: color-mix(
    in srgb,
    #ffffff 6%,
    transparent
  );
  --hsf-field-input__placeholder-color: color-mix(
    in srgb,
    var(--vn-text-muted) 90%,
    transparent
  );
  --hsf-field-input__border-color: var(--vn-border);
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: var(--vn-radius-sm);
  --hsf-field-input__padding: 10px 12px;

  --hsf-field-textarea__font-family: var(--vn-font-body);
  --hsf-field-textarea__color: var(--vn-text);
  --hsf-field-textarea__background-color: color-mix(
    in srgb,
    #ffffff 6%,
    transparent
  );
  --hsf-field-textarea__placeholder-color: color-mix(
    in srgb,
    var(--vn-text-muted) 90%,
    transparent
  );
  --hsf-field-textarea__border-color: var(--vn-border);
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: var(--vn-radius-sm);
  --hsf-field-textarea__padding: 10px 12px;

  --hsf-field-checkbox__background-color: color-mix(
    in srgb,
    #ffffff 6%,
    transparent
  );
  --hsf-field-checkbox__color: var(--vn-accent);
  --hsf-field-checkbox__border-color: var(--vn-border);
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;

  --hsf-field-radio__background-color: color-mix(
    in srgb,
    #ffffff 6%,
    transparent
  );
  --hsf-field-radio__color: var(--vn-accent);
  --hsf-field-radio__border-color: var(--vn-border);
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;

  --hsf-button__font-family: var(--vn-font-heading);
  --hsf-button__font-size: var(--vn-text-sm);
  --hsf-button__color: #ffffff;
  --hsf-button__background-color: var(--vn-accent);
  --hsf-button__border-radius: var(--vn-radius-button);
  --hsf-button__padding: 10px 24px;
  --hsf-button__box-shadow: var(--vn-btn-shadow);

  --hsf-erroralert__font-family: var(--vn-font-body);
  --hsf-erroralert__color: #ff8a80;
  --hsf-infoalert__font-family: var(--vn-font-body);
  --hsf-infoalert__color: var(--vn-text);
}

.vn-hsform {
  width: 100%;
}

/* Tighten v4 forms on phones: the default row/module spacing (space-4) makes an embedded form very
   tall in a modal, so a short field set needs a lot of scrolling and reads as over-padded. These
   --hsf-* vars are forwarded into the form (iframe) at load, so a mobile-width page load renders the
   compact spacing. */
@media (max-width: 767px) {
  :root {
    --hsf-row__vertical-spacing: var(--vn-space-3);
    --hsf-module__vertical-spacing: var(--vn-space-3);
    --hsf-field-input__padding: 9px 12px;
  }
}

.vn-hsform__status {
  margin: 0;
  padding: var(--vn-space-2) 0;
  color: var(--vn-text-muted);
  font-family: var(--vn-font-body);
  font-size: var(--vn-text-sm);
}

/* ============================================================
   Native form (HubSpotFormNative island) — OUR markup, submitted via the v3 API. Full control,
   light DOM, styled entirely from --vn-* tokens. No iframe, so this always looks on-brand.
   ============================================================ */
.vn-nform {
  width: 100%;
  font-family: var(--vn-font-body);
  color: var(--vn-text);
}

.vn-nform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vn-space-4);
}

/* Full-width fields span both columns; half fields sit two-per-row. */
.vn-nform__field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--vn-space-1);
  min-width: 0;
}
.vn-nform__field--half {
  grid-column: span 1;
}

.vn-nform__label {
  font-size: var(--vn-text-sm);
  font-weight: 600;
  color: var(--vn-text);
}
.vn-nform__req {
  color: var(--vn-accent);
  margin-left: 3px;
}

.vn-nform__input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 var(--vn-space-4);
  border-radius: var(--vn-radius-sm);
  border: 1px solid var(--vn-border);
  background: color-mix(in srgb, #ffffff 6%, transparent);
  color: var(--vn-text);
  font-family: var(--vn-font-body);
  font-size: var(--vn-text-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.vn-nform__input {
  height: auto;
  min-height: 120px;
  padding: var(--vn-space-3) var(--vn-space-4);
  resize: vertical;
}
.vn-nform__input::placeholder {
  color: color-mix(in srgb, var(--vn-text-muted) 90%, transparent);
}
.vn-nform__input:focus {
  outline: none;
  border-color: var(--vn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vn-accent) 28%, transparent);
}

/* Submit reuses the global .vn-button; just give it room on its own row by default. */
.vn-nform__submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--vn-space-1);
}
.vn-nform__submit[disabled] {
  opacity: 0.65;
  cursor: default;
}

.vn-nform__check {
  display: flex;
  align-items: flex-start;
  gap: var(--vn-space-2);
  margin-top: var(--vn-space-3);
  font-size: var(--vn-text-sm);
  color: var(--vn-text);
}
.vn-nform__check input {
  margin-top: 3px;
  accent-color: var(--vn-accent);
}

.vn-nform__legal {
  margin: var(--vn-space-3) 0 0;
  font-size: var(--vn-text-xs);
  line-height: 1.5;
  color: color-mix(in srgb, var(--vn-text-muted) 80%, transparent);
}
.vn-nform__legal a,
.vn-nform__check a {
  color: var(--vn-accent-soft, var(--vn-accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vn-nform__error {
  margin: var(--vn-space-3) 0 0;
  color: #ff8a80;
  font-size: var(--vn-text-sm);
}

.vn-nform--success p {
  margin: 0;
  color: var(--vn-text);
  font-size: var(--vn-text-lg);
}

/* Inline variant — the newsletter's single-row [ email ][ button ]. Our markup, so it just works. */
.vn-nform--inline .vn-nform__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vn-space-3);
  align-items: stretch;
}
.vn-nform--inline .vn-nform__field {
  flex: 1 1 220px;
}
.vn-nform--inline .vn-nform__submit {
  margin-top: 0;
  align-self: stretch;
}

@media (max-width: 720px) {
  .vn-nform--inline .vn-nform__grid {
    flex-direction: column;
  }
  /* In column direction the field's `flex: 1 1 220px` basis becomes a vertical size and grow stretches
     it — leaving a big gap between the 48px input and the button. Collapse it back to content height. */
  .vn-nform--inline .vn-nform__field {
    flex: 0 0 auto;
  }
  .vn-nform--inline .vn-nform__submit {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .vn-nform__field--half {
    grid-column: 1 / -1;
  }
}

/* --- v4 (forms-next) direct overrides ---
   v4 forms render in LIGHT DOM with hsfc-* classes (not shadow DOM, not the legacy hs-* classes).
   The --hsf-* variables above theme labels/inputs/buttons cleanly, but rich-text/heading content
   can carry an INLINE color (e.g. color:#000 authored in the form editor) that beats any variable.
   Since it's light DOM we can force it. Scoped to .vn-hsform so only our embeds are affected. */
.vn-hsform .hsfc-RichText,
.vn-hsform .hsfc-RichText p,
.vn-hsform .hsfc-RichText span,
.vn-hsform .hsfc-RichText li,
.vn-hsform .hsfc-Heading,
.vn-hsform .hsfc-Heading span,
.vn-hsform [class*='hsfc-'][data-hsfc-id='Heading'] {
  color: var(--vn-text) !important;
}

.vn-hsform .hsfc-RichText a {
  color: var(--vn-accent) !important;
}

/* Rich-text paragraph rhythm (post-submit thank-you message + any form description). HubSpot bakes
   inline `font-size`/`line-height` onto each <p> in the form editor, which renders cramped and
   oversized on our card — no gap between paragraphs and a tight 125% leading. Normalise to the
   theme's body size + comfortable leading, and give paragraphs real spacing. `!important` is needed
   to beat the inline styles. */
.vn-hsform .hsfc-RichText p {
  margin: 0 0 var(--vn-space-4);
  font-size: var(--vn-text-sm) !important;
  line-height: var(--vn-leading-normal) !important;
}
.vn-hsform .hsfc-RichText p:last-child {
  margin-bottom: 0;
}

/* Keep links reading as links even when the editor nests a colour-forcing <span> inside the <a>
   (this rule is more specific than the generic `.hsfc-RichText span` white override above). */
.vn-hsform .hsfc-RichText a,
.vn-hsform .hsfc-RichText a span {
  color: var(--vn-accent) !important;
  text-decoration: underline;
}

/* Post-submit thank-you message (`.hsfc-PostSubmit`): the copy sits in white on the dark card, so an
   accent-blue link (e.g. the contact email) reads as an odd standout. Force those links to the same
   white as the surrounding text. More specific than the generic `.hsfc-RichText a` rule above, so it
   wins; scoped to `.hsfc-PostSubmit` so pre-submit description/consent links keep the accent colour. */
.vn-hsform .hsfc-PostSubmit .hsfc-RichText a,
.vn-hsform .hsfc-PostSubmit .hsfc-RichText a span {
  color: var(--vn-text) !important;
}

/* Reset HubSpot's default widths so fields fill the container. */
.vn-hsform .hs-form,
.vn-hsform form.hs-form {
  width: 100%;
  color: var(--vn-text);
  font-family: var(--vn-font-body);
}

.vn-hsform .hs-form-field {
  margin-bottom: var(--vn-space-4);
}

.vn-hsform .hs-form-field > label,
.vn-hsform .hs-form-field > legend {
  display: block;
  margin-bottom: var(--vn-space-1);
  color: var(--vn-text);
  font-size: var(--vn-text-sm);
  font-weight: 600;
}

.vn-hsform .hs-form-required {
  color: var(--vn-accent);
  margin-left: 2px;
}

.vn-hsform .hs-field-desc {
  margin: var(--vn-space-1) 0 0;
  color: var(--vn-text-muted);
  font-size: var(--vn-text-xs);
}

/* Inputs, textareas, selects. */
.vn-hsform .hs-input,
.vn-hsform input[type='text'],
.vn-hsform input[type='email'],
.vn-hsform input[type='tel'],
.vn-hsform input[type='number'],
.vn-hsform input[type='date'],
.vn-hsform textarea,
.vn-hsform select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--vn-radius-sm);
  border: 1px solid var(--vn-border);
  background: color-mix(in srgb, #ffffff 6%, transparent);
  color: var(--vn-text);
  font-family: var(--vn-font-body);
  font-size: var(--vn-text-base);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vn-hsform .hs-input::placeholder,
.vn-hsform textarea::placeholder {
  color: color-mix(in srgb, var(--vn-text-muted) 90%, transparent);
}

.vn-hsform .hs-input:focus,
.vn-hsform textarea:focus,
.vn-hsform select:focus {
  outline: none;
  border-color: var(--vn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vn-accent) 28%, transparent);
}

.vn-hsform textarea {
  min-height: 120px;
  resize: vertical;
}

/* HubSpot renders multi-column rows via inline widths on .hs-form-field — keep the inner input
   full-width so those columns line up. */
.vn-hsform .hs-input.hs-fieldtype-intl-phone,
.vn-hsform .input {
  width: 100%;
}

/* Checkboxes / radios (including consent). */
.vn-hsform .hs-form-booleancheckbox-display,
.vn-hsform .hs-form-radio-display,
.vn-hsform .hs-form-checkbox-display {
  display: flex;
  align-items: flex-start;
  gap: var(--vn-space-2);
  font-size: var(--vn-text-sm);
  font-weight: 400;
  color: var(--vn-text);
}

.vn-hsform .hs-form-booleancheckbox-display input,
.vn-hsform .hs-form-radio-display input,
.vn-hsform .hs-form-checkbox-display input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--vn-accent);
}

.vn-hsform .legal-consent-container,
.vn-hsform .hs-richtext {
  color: var(--vn-text-muted);
  font-size: var(--vn-text-xs);
  line-height: 1.5;
}

.vn-hsform .legal-consent-container a,
.vn-hsform .hs-richtext a {
  color: var(--vn-accent);
  text-decoration: underline;
}

/* Validation. */
.vn-hsform .hs-error-msg,
.vn-hsform .hs-error-msgs label {
  color: #ff8a80;
  font-size: var(--vn-text-xs);
}

.vn-hsform .hs-input.invalid,
.vn-hsform .hs-input.error {
  border-color: #ff8a80;
}

/* Submit button — reuse the site's button tokens so it matches every other CTA. */
.vn-hsform .hs-button,
.vn-hsform input[type='submit'].hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--vn-space-2);
  padding: var(--vn-btn-pad-y) var(--vn-btn-pad-x);
  border: none;
  border-radius: var(--vn-btn-radius);
  background: var(--vn-btn-bg);
  color: var(--vn-btn-fg);
  font-family: var(--vn-font-body);
  font-size: var(--vn-btn-font-size);
  font-weight: var(--vn-btn-font-weight);
  letter-spacing: var(--vn-btn-letter-spacing);
  box-shadow: var(--vn-btn-shadow);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.vn-hsform .hs-button:hover,
.vn-hsform input[type='submit'].hs-button:hover {
  background: var(--vn-btn-bg-hover);
  box-shadow: var(--vn-btn-shadow-hover);
}

/* Post-submit inline thank-you message. */
.vn-hsform .submitted-message,
.vn-hsform .hs-main-font-element {
  color: var(--vn-text);
  font-family: var(--vn-font-body);
}

/* ---------- Inline variant ----------
   For single-field forms (e.g. the "Få besked om nye fonde" newsletter) that should read as one
   row: [ email input ][ button ]. Applied via FormEmbed variant="inline" (wrapper gets
   .vn-hsform--inline). Requires the form to render as raw HTML (not a legacy iframe). */
.vn-hsform--inline .hs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vn-space-3);
}

/* The input field grows; the submit sits beside it. */
.vn-hsform--inline .hs-form-field {
  flex: 1 1 220px;
  min-width: 0;
  margin-bottom: 0;
}

.vn-hsform--inline .hs_submit,
.vn-hsform--inline .hs-submit,
.vn-hsform--inline .actions {
  flex: 0 0 auto;
  margin: 0;
}

/* Visually hide labels (the placeholder carries the meaning) but keep them for screen readers. */
.vn-hsform--inline .hs-form-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;
}

/* Match the card's original input + button height/shape. */
.vn-hsform--inline .hs-input,
.vn-hsform--inline input[type='email'],
.vn-hsform--inline input[type='text'] {
  height: 48px;
  padding: 0 var(--vn-space-4);
  border-radius: var(--vn-radius-button, 5px);
  background: color-mix(in srgb, var(--vn-canvas-deep) 55%, transparent);
}

.vn-hsform--inline .hs-button,
.vn-hsform--inline input[type='submit'].hs-button {
  min-height: 48px;
  margin-top: 0;
}

/* Let validation / consent text drop to its own full-width line without breaking the row. */
.vn-hsform--inline .hs-error-msgs,
.vn-hsform--inline .legal-consent-container {
  flex: 1 1 100%;
}

@media (max-width: 720px) {
  .vn-hsform--inline .hs-form {
    flex-direction: column;
  }
  .vn-hsform--inline .hs-form-field,
  .vn-hsform--inline .hs_submit,
  .vn-hsform--inline .hs-submit,
  .vn-hsform--inline .actions {
    flex: 1 1 100%;
  }
}