/* ============================================================
   HYLO INNO — FORM STYLES
   Extends styles.css — do not use inline colors not in system.
   ============================================================ */

.form-section { max-width: 680px; }

.form-section h2 { margin-top: 1rem; }
.form-section .lede { margin-top: 1.4rem; }

.hylo-form { margin-top: 3rem; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}

/* Only target the direct field label, not nested checkbox/radio <label> elements */
.form-field > label {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Labels on ink sections */
.section--ink .form-field > label {
  color: var(--paper);
}

/* Hint text below a label (e.g. "Select all that apply") */
.form-label__hint {
  display: block;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.55;
  margin-top: 0.35em;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid currentColor;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: inherit;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
  transition: border-color 0.2s ease, outline 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  opacity: 0.4;
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* On ink bg, set select option contrast */
.section--ink .form-field select option {
  background: var(--ink);
  color: var(--paper);
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* Focus state uses system gold outline */
.form-field input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Honeypot: visually hidden but accessible */
.form-field--honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

/* Required marker */
.form-field .req {
  color: var(--magenta);
  font-family: var(--font-mono);
  margin-left: 0.2em;
}
.section--ink .form-field .req { color: var(--gold); }

/* Inline validation error */
.form-field__error {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  display: none;
}
.form-field.has-error .form-field__error { display: block; }
.form-field.has-error input:not([type="checkbox"]):not([type="radio"]),
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--magenta);
}
.section--ink .form-field.has-error .form-field__error { color: var(--gold); }

/* Submit row */
.form-submit-row {
  margin-top: 2.5rem;
}

/* Status messages */
.form-status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 1.4rem;
  display: none;
  line-height: 1.7;
}
.form-status.is-visible { display: block; }
.form-status--success { color: var(--gold); }
.form-status--error   { color: var(--magenta); }
.section--ink .form-status--error { color: var(--gold); }

.form-status a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Submitting state */
.btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

/* ---------- Phone illustration grid (sponsors page) ---------- */
.phone-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.phone-wrap {
  margin: 0;
}

.phone-wrap svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.phone-wrap figcaption {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 1.1rem;
  color: var(--ink);
  opacity: 0.42;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .phone-grid {
    grid-template-columns: 1fr;
  }
  .phone-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 260px;
    margin: 2.5rem auto 0;
  }
}

/* ---------- KPI comparison strip (sponsors page) ---------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(11,14,34,0.10);
  margin-top: 3rem;
}

.kpi {
  background: var(--paper);
  padding: 1.8rem 1.6rem;
}

.kpi__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 0.7rem;
}

.kpi__metric {
  display: block;
  font-size: 0.93rem;
  line-height: 1.65;
  color: rgba(11,14,34,0.72);
}

@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .kpi-strip { grid-template-columns: 1fr; }
}

/* ---------- Wide form variant ---------- */
.form-section--wide { max-width: min(820px, 100%); }

/* ---------- Form section header (visual break inside long forms) ---------- */
.form-section-header {
  padding-top: 2.8rem;
  margin-top: 1rem;
  padding-bottom: 0.2rem;
  border-top: 2px solid rgba(11,14,34,0.15);
  margin-bottom: 1.8rem;
}
.form-section-header:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.section--ink .form-section-header { border-top-color: rgba(250,250,247,0.18); }

/* ---------- Checkbox group ---------- */
.checkbox-group {
  border: 1px solid currentColor;
  /* default: single column flex */
  display: flex;
  flex-direction: column;
}

/* 2-column variant for long lists — applied via HTML class */
@media (min-width: 600px) {
  .checkbox-group--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  /* Column divider: right border on odd (left-column) cells */
  .checkbox-group--2col .checkbox-option:nth-child(odd) {
    border-right: 1px solid currentColor;
  }
  /* Last row cleanup for even item counts: remove bottom border from
     second-to-last item when it sits in an odd (left) position */
  .checkbox-group--2col .checkbox-option:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
}

.checkbox-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s ease;
}
.checkbox-option:last-child { border-bottom: none; }
.checkbox-option:hover { background: rgba(11,14,34,0.05); }
.section--ink .checkbox-option:hover { background: rgba(250,250,247,0.07); }

/* Gold row tint on checked */
.checkbox-option:has(input:checked) { background: rgba(209,163,44,0.14); }
.section--ink .checkbox-option:has(input:checked) { background: rgba(209,163,44,0.18); }

/* Hide native input — keep it as the invisible click target over the custom box */
.checkbox-option input[type="checkbox"] {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  z-index: 1;
}

/* Custom checkbox box lives on ::before of the label span */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 1.14rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

.checkbox-label::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

/* Checked: fill box gold, draw ink checkmark */
.checkbox-option:has(input:checked) .checkbox-label::before {
  background: var(--gold);
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 4L11 1' stroke='%230B0E22' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

/* Focus ring on custom box when input is keyboard-focused */
.checkbox-option:has(input:focus-visible) .checkbox-label::before {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.form-field.has-error .checkbox-group { border-color: var(--magenta); }
.section--ink .form-field.has-error .checkbox-group { border-color: var(--gold); }

/* ---------- Radio group ---------- */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid currentColor;
}

.radio-option {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease;
}
.radio-option:last-child { border-bottom: none; }
.radio-option:hover { background: rgba(11,14,34,0.04); }
.section--ink .radio-option:hover { background: rgba(250,250,247,0.06); }

.radio-option input[type="radio"] {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--magenta);
  cursor: pointer;
}
.radio-option input[type="radio"]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.radio-label {
  font-family: var(--font-body);
  font-size: 1.16rem;
  line-height: 1.5;
}

.form-field.has-error .radio-group { border-color: var(--magenta); }

/* ---------- Thank-you panel ---------- */
.form-thankyou { display: none; }
.form-thankyou.is-visible { display: block; }

.form-thankyou__summary {
  margin-top: 2.5rem;
  border-top: 2px solid var(--ink);
}

.form-thankyou__summary dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta);
  padding-top: 1.2rem;
  margin-bottom: 0.3rem;
}

.form-thankyou__summary dd {
  font-size: 1rem;
  line-height: 1.6;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(11,14,34,0.12);
  margin: 0;
  white-space: pre-wrap;
}

.form-thankyou__summary dd:last-of-type { border-bottom: none; }

/* Ink-background variant (founders page) */
.form-thankyou__summary--ink {
  border-top-color: rgba(250,250,247,0.2);
}
.form-thankyou__summary--ink dt {
  color: var(--gold);
}
.form-thankyou__summary--ink dd {
  color: rgba(250,250,247,0.88);
  border-bottom-color: rgba(250,250,247,0.12);
}

@media (prefers-reduced-motion: reduce) {
  .form-field input:not([type="checkbox"]):not([type="radio"]),
  .form-field select,
  .form-field textarea {
    transition: none;
  }
  .radio-option { transition: none; }
  .checkbox-option { transition: none; }
}