/*
 * Shared public-form design contract.
 *
 * Every public form root uses .site-form. Plugins own fields and validation;
 * this layer owns shared labels, required markers and controls. Brand changes
 * are made only through the tokens below.
 */
:root {
  --site-form-accent: var(--cv-yellow, #ffc800);
  --site-form-ink: var(--cv-chocolate, #351a10);
  --site-form-field-bg: #fff;
  --site-form-field-readonly-bg: #f3ece4;
  --site-form-field-border-color: var(--site-form-ink);
  --site-form-field-border-width: 2px;
  --site-form-field-radius: 0px;
  --site-form-field-height: 52px;
  --site-form-field-font-size: 16px;
  --site-form-field-font-weight: 700;
  --site-form-field-padding-inline: 16px;
  --site-form-select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23351a10' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --site-form-select-chevron-width: 12px;
  --site-form-select-chevron-height: 8px;
  --site-form-select-chevron-inset: 16px;
  --site-form-focus-bg: #fffdf4;
  --site-form-focus-ring-width: 4px;
  --site-form-focus-ring-color: rgba(255, 200, 0, .48);
  --site-form-label-color: var(--site-form-ink);
  --site-form-label-font-size: 13px;
  --site-form-label-font-weight: 900;
  --site-form-label-gap: 10px;
  --site-form-required-bg: var(--site-form-accent);
  --site-form-required-color: var(--site-form-ink);
  --site-form-required-border-color: var(--site-form-ink);
  --site-form-required-width: 38px;
  --site-form-required-height: 20px;
  --site-form-required-font-size: 9px;
}

html body .site-form .site-form__label {
  display: flex;
  align-items: center;
  gap: var(--site-form-label-gap);
  color: var(--site-form-label-color);
  font-size: var(--site-form-label-font-size);
  font-weight: var(--site-form-label-font-weight);
  line-height: 1.5;
}

/*
 * Theme-level label rules add vertical margins to nested <label> elements.
 * Reset them here so the field name and the fixed-height required badge share
 * one 20px alignment box across every public form.
 */
html body .site-form .site-form__label > label {
  display: flex;
  align-items: center;
  align-self: center;
  min-height: var(--site-form-required-height);
  margin: 0;
  padding: 0;
}

html body .site-form .site-form__required,
html body .site-form .site-required-badge.site-form__required {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--site-form-required-width);
  width: var(--site-form-required-width);
  min-width: var(--site-form-required-width);
  height: var(--site-form-required-height);
  min-height: var(--site-form-required-height);
  margin: 0;
  padding: 0 4px;
  color: var(--site-form-required-color);
  background: var(--site-form-required-bg);
  border: 1px solid var(--site-form-required-border-color);
  border-radius: 0;
  clip-path: none;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--site-form-required-font-size);
  font-weight: 900;
  line-height: 1;
}

html body .site-form .site-form__optional {
  color: #fff;
  background: var(--site-form-ink);
  border-color: var(--site-form-ink);
}

html body .site-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
  select,
  textarea,
  .jca-custom-select__trigger
) {
  width: 100%;
  min-height: var(--site-form-field-height);
  padding-right: var(--site-form-field-padding-inline);
  padding-left: var(--site-form-field-padding-inline);
  color: var(--site-form-ink);
  background-color: var(--site-form-field-bg);
  border: var(--site-form-field-border-width) solid var(--site-form-field-border-color);
  border-radius: var(--site-form-field-radius);
  box-shadow: none;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--site-form-field-font-size);
  font-weight: var(--site-form-field-font-weight);
  transition: border-color .2s ease, outline-color .2s ease, background-color .2s ease;
}

/* One outlined V-chevron for native and custom selects across all forms. */
html body .site-form select {
  padding-right: calc(
    var(--site-form-select-chevron-inset)
    + var(--site-form-select-chevron-width)
    + var(--site-form-field-padding-inline)
  ) !important;
  /* Legacy page skins use high-specificity triangle backgrounds. */
  background-image: var(--site-form-select-chevron-icon) !important;
  background-position: right var(--site-form-select-chevron-inset) center !important;
  background-size: var(--site-form-select-chevron-width) var(--site-form-select-chevron-height) !important;
  background-repeat: no-repeat !important;
}

html body .site-form .jca-custom-select__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid var(--site-form-ink);
  border-bottom: 2px solid var(--site-form-ink);
  transform: rotate(45deg) translateY(-2px);
}

html body .site-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
  select,
  .jca-custom-select__trigger
) {
  height: var(--site-form-field-height);
}

html body .site-form textarea {
  padding-top: 16px;
  padding-bottom: 16px;
}

html body .site-form :is(input, textarea)::placeholder {
  color: #9d8b82;
  opacity: 1;
}

html body .site-form :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
  select,
  textarea,
  .jca-custom-select__trigger
):focus,
html body .site-form .jca-custom-select.is-open .jca-custom-select__trigger {
  color: var(--site-form-ink);
  background-color: var(--site-form-focus-bg);
  border-color: var(--site-form-field-border-color);
  outline: var(--site-form-focus-ring-width) solid var(--site-form-focus-ring-color);
  outline-offset: 0;
  box-shadow: none;
}

html body .site-form input[readonly] {
  color: #725c52;
  background-color: var(--site-form-field-readonly-bg);
  border-style: dashed;
}

@media (max-width: 700px) {
  :root {
    --site-form-field-font-size: 16px;
  }
}

/* Application input: separate field groups while keeping labels close to controls. */
html body .job-application-form #job-application-input > .form-row:not(.btn-submit) {
  margin: 0 0 24px;
}

html body .job-application-form #job-application-input > .form-row > .form-label {
  margin: 0 0 8px;
}

html body .job-application-form .site-contact-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 32px 0 4px;
}

html body .job-application-form .site-contact-confirm-actions > .site-action-button {
  margin: 0;
}