/*
 * SHUKEN / HubSpot developer embed
 * Shared parent: .shuken-hubspot-form (no form ID dependency)
 * Add .shuken-hubspot-form to the existing article around each developer embed.
 * Desktop: label | field. Mobile (<= 767px): stacked.
 * Uses the published forms' hsfc-* classes, checked 2026-10-27.
 */

.shuken-hubspot-form .hs-form-html {
  --shuken-label-width: 220px;
  --shuken-column-gap: 28px;
  --shuken-row-gap: 32px;
  --shuken-border-color: #beb9b4;
  --shuken-text-color: #000000;
  --shuken-focus-color: #5b554e;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  color: var(--shuken-text-color);
  font-family: inherit;
  line-height: 1.6;
}

/* HubSpot variables are set on the renderer, within each shared form wrapper. */
.shuken-hubspot-form .hs-form-html .hsfc-Renderer {
  --hsf-global__font-family: inherit;
  --hsf-global__font-size: 14px;
  --hsf-global__color: var(--shuken-text-color);
  --hsf-background__padding: 0px;
  --hsf-row__vertical-spacing: var(--shuken-row-gap);
  --hsf-field-input__background-color: #fff;
  --hsf-field-input__border-color: var(--shuken-border-color);
  --hsf-field-input__border-radius: 0px;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__padding: 10px 12px;
  --hsf-field-textarea__background-color: #fff;
  --hsf-field-textarea__border-color: var(--shuken-border-color);
  --hsf-field-textarea__border-radius: 0px;
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__padding: 10px 12px;
  --hsf-field-radio__background-color: #fff;
  --hsf-field-radio__border-color: var(--shuken-border-color);
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__padding: 8px;
  --hsf-field-radio__color: var(--shuken-text-color);
  --hsf-navigationrow-buttons-single__justify-content: center;
  font-family: inherit;
}

/* Match the Contact footer's .link_bgblue button, including its arrow. */
.shuken-hubspot-form .hs-form-html .hsfc-Button[type="submit"] {
  --hsf-button__font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", "游ゴシック", "Meiryo", "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  --hsf-button__font-size: 16px;
  --hsf-button__font-weight: 300;
  --hsf-button__color: #fff;
  --hsf-button__background-color: #34426A;
  --hsf-button__background-image: none;
  --hsf-button--hover__color: #34426A;
  --hsf-button--hover__background-color: #fff;
  --hsf-button__border-color: #34426A;
  --hsf-button__border-style: solid;
  --hsf-button__border-width: 1px;
  --hsf-button__border-radius: 0px;
  --hsf-button__padding: .7em 50px;
  --hsf-button__box-shadow: none;
  --hsf-button__width: 320px;
  width: var(--hsf-button__width);
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  line-height: 1.6;
  transition: all 0.4s ease-out;
  backface-visibility: hidden;
}

/* Keep the button still, as with the footer link; override HubSpot's lift. */
.shuken-hubspot-form .hs-form-html .hsfc-Button[type="submit"]:not([disabled]):hover {
  color: #34426A;
  background-color: #fff;
  border-color: #34426A;
  transform: none;
}

.shuken-hubspot-form .hs-form-html .hsfc-Button[type="submit"]:not([disabled]):active {
  transform: none;
}

/* Use ::before so HubSpot's loading spinner in ::after remains available. */
.shuken-hubspot-form .hs-form-html .hsfc-Button[type="submit"]:not(.hsfc-Button--loading):not([aria-busy="true"])::before {
  content: "→";
  font-family: "Roboto Condensed", serif;
  color: #fff;
  background: #34426A;
  font-size: 14px;
  text-align: center;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 20px;
  border: 1px solid #fff;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

@media (max-width: 575px) {
  .shuken-hubspot-form .hs-form-html .hsfc-Button[type="submit"] {
    --hsf-button__width: 300px;
    --hsf-button__font-size: 14px;
  }
}


/* Keep one property per row, even if editor fields were placed side by side. */
.shuken-hubspot-form .hs-form-html .hsfc-Row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--shuken-row-gap);
}

/* Labelled fields share columns regardless of form ID or property type. */
/* Standalone consent checkboxes keep their full-width layout. */
.shuken-hubspot-form .hs-form-html :where(.hsfc-Row) > :has(> .hsfc-FieldLabel):not(:where(.hsfc-CheckboxField)) {
  display: grid;
  grid-template-columns: var(--shuken-label-width) minmax(0, 1fr);
  column-gap: var(--shuken-column-gap);
  row-gap: 8px;
  align-items: start;
  min-width: 0;
}

.shuken-hubspot-form .hs-form-html :where(.hsfc-Row) > :has(> .hsfc-FieldLabel):not(:where(.hsfc-CheckboxField)) > * {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}

.shuken-hubspot-form .hs-form-html :where(.hsfc-Row) > :has(> .hsfc-FieldLabel):not(:where(.hsfc-CheckboxField)) > .hsfc-FieldLabel {
  grid-column: 1;
  grid-row: 1;
  padding-top: 10px;
  line-height: 1.6;
}

.shuken-hubspot-form .hs-form-html :is(.hsfc-RadioFieldGroup, .hsfc-CheckboxFieldGroup) > .hsfc-FieldLabel {
  padding-top: 4px;
}

.shuken-hubspot-form .hs-form-html .hsfc-FieldLabel__RequiredIndicator {
  margin-left: 4px;
}

/* Shared helper text beneath form fields. */
.shuken-hubspot-form .hs-form-html .hsfc-FieldDescription,
.shuken-hubspot-form .hs-form-html .hsfc-FieldDescription span {
  color: #000;
}

.shuken-hubspot-form .hs-form-html :is(.hsfc-TextInput, .hsfc-TextareaInput) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  line-height: 1.6;
}

.shuken-hubspot-form .hs-form-html .hsfc-TextareaInput {
  min-height: 180px;
  resize: vertical;
}

/* Wrap whole choices naturally without fixed option widths. */
.shuken-hubspot-form .hs-form-html :is(.hsfc-RadioFieldGroup__Options, .hsfc-CheckboxFieldGroup__Options) {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 10px 22px;
}

.shuken-hubspot-form .hs-form-html :is(.hsfc-RadioFieldGroup__Options, .hsfc-CheckboxFieldGroup__Options) > div {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.shuken-hubspot-form .hs-form-html :is(.hsfc-RadioFieldGroup__Options, .hsfc-CheckboxFieldGroup__Options) .hsfc-FieldLabel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 28px;
  padding-block: 3px;
  cursor: pointer;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.shuken-hubspot-form .hs-form-html :is(.hsfc-RadioFieldGroup__Options, .hsfc-CheckboxFieldGroup__Options) :is(.hsfc-RadioInput, .hsfc-CheckboxInput) {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin-top: 2px;
}

.shuken-hubspot-form .hs-form-html :is(.hsfc-TextInput, .hsfc-TextareaInput, .hsfc-RadioInput, .hsfc-CheckboxInput, .hsfc-Button):focus-visible {
  outline: 2px solid var(--shuken-focus-color);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .shuken-hubspot-form .hs-form-html {
    --shuken-row-gap: 24px;
  }

  .shuken-hubspot-form .hs-form-html :where(.hsfc-Row) > :has(> .hsfc-FieldLabel):not(:where(.hsfc-CheckboxField)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .shuken-hubspot-form .hs-form-html :where(.hsfc-Row) > :has(> .hsfc-FieldLabel):not(:where(.hsfc-CheckboxField)) > * {
    grid-column: 1;
  }

  .shuken-hubspot-form .hs-form-html :where(.hsfc-Row) > :has(> .hsfc-FieldLabel):not(:where(.hsfc-CheckboxField)) > .hsfc-FieldLabel {
    padding-top: 0;
  }

  /* 16px input text avoids automatic zoom on mobile browsers. */
  .shuken-hubspot-form .hs-form-html :is(.hsfc-TextInput, .hsfc-TextareaInput) {
    font-size: 16px;
  }

  .shuken-hubspot-form .hs-form-html :is(.hsfc-RadioFieldGroup__Options, .hsfc-CheckboxFieldGroup__Options) {
    gap: 8px 18px;
  }
}