/* ==============================================
   Brokk Contact / Sales form
   ==============================================

   Looks like the WS Form it replaces on the dark contact section (see
   bricks-child/components/contact-form/contact-form.css): uppercase 11px
   labels with a yellow required mark, 50px dark fields with a #444 border
   that turns yellow on focus, two-column grid, consent text left and the
   primary button right on the last row.

   The form is 100% wide; the Bricks container it is embedded in owns the
   width and the dark surface. Only .bcsf-scoped selectors here. */

.bcsf {
  --bcsf-field: #141414;
  --bcsf-border: #444;
  --bcsf-border-hover: #5a5a5a;
  --bcsf-accent: var(--primary, #ffcd00);
  --bcsf-text: #fff;
  --bcsf-faint: #a6a6a6;
  --bcsf-placeholder: #6f6f6f;
  --bcsf-gap: 20px;
  --bcsf-radius: var(--radius-xs, 2px);

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.bcsf *,
.bcsf *::before,
.bcsf *::after { box-sizing: border-box; }

.bcsf__form { margin: 0; width: 100%; }

.bcsf__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bcsf-gap);
}

.bcsf__field { grid-column: 1 / -1; min-width: 0; }
.bcsf__field--half { grid-column: span 1; }

@media (max-width: 640px) {
  .bcsf__grid { grid-template-columns: minmax(0, 1fr); }
  .bcsf__field--half { grid-column: 1 / -1; }
}

/* ---- Labels ---- */
.bcsf__label {
  display: block;
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bcsf-faint);
}

.bcsf__req { color: var(--bcsf-accent); }

/* ---- Fields ---- */
.bcsf__input {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 16px;
  background: var(--bcsf-field);
  border: 1px solid var(--bcsf-border);
  border-radius: var(--bcsf-radius);
  color: var(--bcsf-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease;
}

.bcsf__input:hover { border-color: var(--bcsf-border-hover); }
.bcsf__input:focus { border-color: var(--bcsf-accent); }
.bcsf__input::placeholder { color: var(--bcsf-placeholder); opacity: 1; }
.bcsf__input[aria-invalid="true"] { border-color: #ff9a8a; }

.bcsf__textarea {
  height: auto;
  min-height: 132px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

/* iOS Safari zooms into any field under 16px on focus. */
@media (max-width: 640px) {
  .bcsf__input { font-size: 16px; }
}

/* Select: native arrow removed, our own one drawn as a sibling (white, as the
   WS Form arrow renders on the live site). */
.bcsf__select { position: relative; }

.bcsf__select .bcsf__input {
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.bcsf__select .bcsf__input option { background: var(--bcsf-field); color: var(--bcsf-text); }

/* ACSS .form--light (the contact hub wraps the form in it) draws its own select
   arrow as two background gradients, which landed on top of ours. Three
   classes beat its .form--light select:not(:has(+ span)). */
.bcsf .bcsf__select .bcsf__input {
  background-image: none;
  background-color: var(--bcsf-field);
}

.bcsf__arrow {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--bcsf-text);
  pointer-events: none;
}

/* Honeypot: off-screen, never display:none (some bots skip hidden inputs). */
.bcsf__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Consent + button row ---- */
.bcsf__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bcsf-gap);
  margin-top: var(--bcsf-gap);
}

/* Same proportions as the WS Form row: consent 8/12, button 4/12, so the text
   wraps at the same point ("…about your / request."). */
.bcsf__consent {
  flex: 0 1 calc(66.666% - var(--bcsf-gap));
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-light-muted, var(--bcsf-faint));
}

.bcsf__consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bcsf__consent a:hover { color: var(--bcsf-accent); }

@media (max-width: 640px) {
  .bcsf__footer { flex-direction: column; align-items: stretch; }
}

/* The button carries bricks-button btn--primary so ACSS styles it like every
   other primary button. The declarations below are the same tokens the theme
   sets on WS Form buttons, so the result matches even if ACSS changes order. */
.bcsf .bcsf__submit {
  flex: 0 0 auto;
  width: auto;
  min-width: var(--btn-min-width, 14rem);
  margin: 0;
  padding: var(--btn-pad-y, .875em) var(--btn-pad-x, 1.5em);
  font-family: "Saira Semi Condensed", sans-serif;
  font-size: var(--btn-font-size, var(--text-m, 1rem));
  font-weight: 600;
  line-height: var(--btn-line-height, 1);
  letter-spacing: var(--btn-letter-spacing, 0);
  text-transform: var(--btn-text-transform, uppercase);
  background: var(--primary, #ffcd00);
  border: var(--btn-border-width, 2px) solid var(--primary, #ffcd00);
  border-radius: var(--btn-radius, var(--radius-xs, 2px));
  color: var(--primary-ultra-dark, #332900);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.bcsf .bcsf__submit:hover,
.bcsf .bcsf__submit:focus-visible {
  background: var(--primary-hover, #ffd324);
  border-color: var(--primary-hover, #ffd324);
  color: var(--primary-ultra-dark, #332900);
}

.bcsf .bcsf__submit[disabled] { opacity: .6; cursor: default; }

/* ---- Messages ---- */
.bcsf__error {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #ff9a8a;
}

.bcsf__success {
  padding: 16px;
  border: 1px solid var(--bcsf-accent);
  border-radius: var(--bcsf-radius);
  color: var(--bcsf-text);
  font-size: 15px;
}

/* ==============================================
   Light variant — [brokk_contact_sales_form variant="light"]
   ==============================================

   For white and light grey surfaces: Career, Custom Machines, the Product
   Options modal, the contact page and the office pages. Measured from the WS
   Form it replaces there (2026-09-18): 60px white fields with a #d9d9d9
   border, 14px sentence-case labels in #404040.

   Two deliberate departures from that form, both from the icon/colour rules
   in DESIGN.md: the required mark and the focus ring are not yellow (yellow on
   white is ~1.6:1), and the select arrow is the icon set's Chevron. */

.bcsf--light {
  --bcsf-field: var(--white, #fff);
  --bcsf-border: var(--neutral-light, #d9d9d9);
  --bcsf-border-hover: var(--base-semi-light, #a6a6a6);
  --bcsf-accent: var(--text-dark, #111);
  --bcsf-text: var(--text-dark, #111);
  --bcsf-faint: var(--neutral-dark, #404040);
  --bcsf-placeholder: var(--base-semi-light, #8a8a8a);
}

.bcsf--light .bcsf__label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.bcsf--light .bcsf__req { color: inherit; }

.bcsf--light .bcsf__input { height: 60px; }
.bcsf--light .bcsf__textarea { height: auto; }
.bcsf--light .bcsf__input[aria-invalid="true"] { border-color: #b3261e; }

.bcsf--light .bcsf__consent { color: var(--neutral-dark, #404040); font-size: 14px; }
.bcsf--light .bcsf__consent a,
.bcsf--light .bcsf__consent a:hover { color: var(--text-dark, #111); font-weight: 600; }

.bcsf--light .bcsf__error { color: #b3261e; }

.bcsf--light .bcsf__success {
  border-color: var(--neutral-light, #d9d9d9);
  background: var(--white, #fff);
}