/* ==========================================================================
   RÄCKE-FORMULÄR
   Stylesheet for the WPForms inquiry form.

   Scoped entirely to .racke-form so nothing leaks into the rest of the theme.

   PER-SITE BRANDING: change only the variables in the :root block below.
   Everything else derives from them.
   ========================================================================== */

:root {
  /* --- Change these per site -------------------------------------------- */
  --rf-accent:        #ef7202;  /* primary action colour — sampled from the site's own theme (logo icon, nav underline, CTA buttons) */
  --rf-accent-soft:   #fef4eb;  /* tinted background for accent blocks */
  --rf-accent-line:   #f9c79a;  /* border on accent blocks */

  /* --- Usually leave these alone ---------------------------------------- */
  --rf-ink:           #16181a;
  --rf-ink-muted:     #5f676d;
  --rf-ink-faint:     #8b9299;
  --rf-surface:       #ffffff;
  --rf-surface-2:     #f5f6f7;
  --rf-border:        #e1e4e7;
  --rf-border-strong: #c3c8cd;
  --rf-error:         #b3261e;

  --rf-radius:        10px;
  --rf-radius-sm:     8px;
  --rf-gap:           12px;

  /* Inherits the theme font by default. Override if you want a specific face. */
  --rf-font: inherit;
}

/* --------------------------------------------------------------------------
   1. SHELL
   -------------------------------------------------------------------------- */

.racke-form {
  font-family: var(--rf-font);
  color: var(--rf-ink);
  background: var(--rf-surface-2);
  border-radius: 14px;
  padding: 1rem 1.75rem 1.75rem;
  max-width: 760px;
  margin: 0 auto;
  scroll-margin-top: 100px; /* stops a sticky header covering the heading */
}

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

/* WPForms wrappers — strip their default chrome so ours shows through */
/* WPForms wraps the form in its own container and gives it `margin: 24px
   auto` via `div.wpforms-container-full:not(:empty)` — a selector with one
   type, one class, and one pseudo-class, which beats a plain two-class
   selector. That 24px top margin, sitting on top of .racke-form's own
   padding, is what pushed the title down. Same fix pattern as everywhere
   else in this file. */
.racke-form.racke-form .wpforms-container,
.racke-form.racke-form .wpforms-form { margin: 0; padding: 0; }

.racke-form.racke-form .wpforms-container .wpforms-field {
  padding: 0;
  margin: 0 0 16px;
}

.racke-form .wpforms-field:last-child { margin-bottom: 0; }

/* Field labels */
.racke-form.racke-form .wpforms-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--rf-ink-muted);
  margin: 0 0 7px;
  line-height: 1.4;
}

.racke-form.racke-form .wpforms-required-label {
  color: var(--rf-error);
  font-weight: 400;
  margin-left: 2px;
}

/* Sublabels / description text under a field */
.racke-form.racke-form .wpforms-field-sublabel,
.racke-form.racke-form .wpforms-field-description {
  font-size: 12px;
  color: var(--rf-ink-faint);
  line-height: 1.55;
  margin-top: 5px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   2. HEADER + BUSINESS BLOCK  (HTML fields — markup in the build guide)
   -------------------------------------------------------------------------- */

.racke-form.racke-form .racke-form__intro { margin-bottom: 18px; }

.racke-form.racke-form .racke-form__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  color: var(--rf-ink);
}

.racke-form.racke-form .racke-form__lede {
  font-size: 14px;
  color: var(--rf-ink-muted);
  line-height: 1.55;
  margin: 6px 0 0;
}

/* Business / BRF block, sits above section 01 */
.racke-form.racke-form .racke-b2b {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--rf-accent-soft);
  border: 1px solid var(--rf-accent-line);
  border-left: 3px solid var(--rf-accent);
  border-radius: var(--rf-radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.racke-form.racke-form .racke-b2b__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--rf-accent);
}

.racke-form.racke-form .racke-b2b__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--rf-accent);
  margin: 0;
}

.racke-form.racke-form .racke-b2b__text {
  font-size: 13px;
  color: var(--rf-ink-muted);
  line-height: 1.55;
  margin: 3px 0 0;
}

.racke-form.racke-form .racke-b2b__text a {
  color: var(--rf-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--rf-accent-line);
}

.racke-form.racke-form .racke-b2b__text a:hover { border-bottom-color: var(--rf-accent); }

/* --------------------------------------------------------------------------
   3. SECTIONS  (HTML fields)
   -------------------------------------------------------------------------- */

.racke-form.racke-form .racke-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--rf-border);
}

/* first section header needs no rule above it */
.racke-form.racke-form .racke-section--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.racke-form.racke-form .racke-section__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rf-accent);
  font-variant-numeric: tabular-nums;
}

.racke-form.racke-form .racke-section__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--rf-ink);
}

/* --------------------------------------------------------------------------
   4. TEXT INPUTS, SELECT, TEXTAREA
   -------------------------------------------------------------------------- */

/* NOTE ON SPECIFICITY: WPForms ships its own reset rule,
   `div.wpforms-container-full *`, which resets width, height, background,
   border, margin, padding and more on every element inside the form. That
   selector's specificity is one class + one type (0,1,1). A selector like
   ".racke-form select" is ALSO one class + one type — a tie, and ties are
   decided by cascade order, which is fragile (breaks under a WPForms
   update, a caching plugin's CSS concatenation, or a stylesheet load-order
   change). ".racke-form.racke-form select" repeats the class to reach two
   classes + one type (0,2,1), which always wins regardless of order. This
   is the same failure mode that broke the business-block icon — fixed here
   pre-emptively for every bare-tag selector in the file. */

.racke-form input[type="text"],
.racke-form input[type="email"],
.racke-form input[type="tel"],
.racke-form input[type="number"],
.racke-form input[type="url"],
.racke-form.racke-form select,
.racke-form.racke-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--rf-ink);
  background: var(--rf-surface);
  border: 1px solid var(--rf-border-strong);
  border-radius: var(--rf-radius-sm);
  padding: 11px 13px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.racke-form.racke-form textarea {
  min-height: 96px;
  resize: vertical;
}

.racke-form.racke-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f676d' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

.racke-form input::placeholder,
.racke-form textarea::placeholder { color: var(--rf-ink-faint); }

.racke-form.racke-form.racke-form input:focus,
.racke-form.racke-form.racke-form select:focus,
.racke-form.racke-form.racke-form textarea:focus {
  outline: none;
  border-color: var(--rf-accent);
  box-shadow: 0 0 0 3px var(--rf-accent-soft);
}

/* Visible keyboard focus everywhere else */
.racke-form :focus-visible {
  outline: 2px solid var(--rf-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. TWO-UP ROWS
   Uses WPForms' built-in column classes: wpforms-one-half / wpforms-first
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .racke-form .wpforms-one-half {
    width: calc(50% - 6px);
    float: left;
    margin-left: 12px;
  }
  .racke-form .wpforms-one-half.wpforms-first {
    margin-left: 0;
    clear: both;
  }
  /* clear the float after each pair */
  .racke-form .wpforms-one-half.wpforms-first::before {
    content: "";
    display: table;
    clear: both;
  }
}

.racke-form .wpforms-submit-container::before {
  content: "";
  display: table;
  clear: both;
}

/* Any field that is NOT itself part of a two-up row must always clear the
   floats above it. Without this, a field immediately following a
   .wpforms-one-half pair renders in the leftover sliver of space beside the
   still-floated inputs — its text then wraps one character per line. */
.racke-form .wpforms-field:not(.wpforms-one-half) {
  clear: both;
}

/* --------------------------------------------------------------------------
   6. PILL RADIOS  — add CSS class "racke-pills" to the field in WPForms
   -------------------------------------------------------------------------- */

/* WPForms forces its own display:grid, single-column layout onto every
   radio/checkbox choice list via a selector with three classes and two
   element types (0,3,2 / 0,3,3 for the <li>). ".racke-form .racke-pills"
   alone is only two classes — it loses. Repeating each class
   (.racke-form.racke-form, .racke-pills.racke-pills) raises the class
   count to four without changing what the selector matches, so it always
   wins regardless of type count or cascade order. Same fix pattern as the
   business-block icon and the select/textarea rules above. */

.racke-form.racke-form .racke-pills.racke-pills ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.racke-form.racke-form .racke-pills.racke-pills li {
  margin: 0;
  padding: 0;
  width: auto;
  flex: 0 0 auto;
}

/* Fieldsets size themselves via a shrink-to-fit algorithm rather than
   filling their container like a normal block element — a long-standing
   browser quirk. WPForms wraps radio/checkbox choices in <fieldset>, and
   combined with the wrapping flex list inside it, that quirk was
   collapsing the whole choice list down to a few px instead of the full
   row width, forcing every pill onto its own line. Forcing width:100%
   here overrides the shrink-to-fit behavior. */
.racke-form.racke-form .racke-pills.racke-pills fieldset {
  width: 100%;
  min-width: 0;
}

.racke-form.racke-form .racke-pills input[type="radio"],
.racke-form.racke-form .racke-pills input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.racke-form.racke-form .racke-pills label {
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  padding: 9px 18px;
  border: 1px solid var(--rf-border-strong);
  border-radius: 999px;
  background: var(--rf-surface);
  color: var(--rf-ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  margin: 0;
}

.racke-form.racke-form .racke-pills label:hover { border-color: var(--rf-accent); }

.racke-form.racke-form .racke-pills input:checked + label {
  background: var(--rf-accent);
  border-color: var(--rf-accent);
  color: #fff;
  font-weight: 500;
}

.racke-form.racke-form .racke-pills input:focus-visible + label {
  outline: 2px solid var(--rf-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. DESIGN / INSPIRATION GRID  — add CSS class "racke-designs" to the field
   Targets WPForms Image Choices markup.
   -------------------------------------------------------------------------- */

.racke-form.racke-form .racke-designs.racke-designs ul.wpforms-image-choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.racke-form.racke-form .racke-designs.racke-designs fieldset {
  width: 100%;
  min-width: 0;
}

.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item label {
  display: block;
  margin: 0;
  padding: 0;
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item label:hover {
  border-color: var(--rf-border-strong);
  box-shadow: 0 2px 8px rgba(22, 24, 26, 0.06);
}

.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-image {
  display: block;
  border-bottom: 1px solid var(--rf-border);
  background: var(--rf-surface-2);
}

.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-image img {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.racke-form.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-label {
  display: block;
  padding: 6px 10px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--rf-ink);
}

.racke-form.racke-form .racke-designs.racke-designs input[type="radio"],
.racke-form.racke-form .racke-designs.racke-designs input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Selected state — :has() first, WPForms' own class as fallback */
.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item:has(input:checked) label,
.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item.wpforms-selected label {
  border-color: var(--rf-accent);
  box-shadow: 0 0 0 1px var(--rf-accent);
}

.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item:has(input:checked)
  .wpforms-image-choices-label,
.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item.wpforms-selected
  .wpforms-image-choices-label {
  color: var(--rf-accent);
  font-weight: 600;
}

.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-item:has(input:focus-visible) label {
  outline: 2px solid var(--rf-accent);
  outline-offset: 2px;
}

/* The "Egen idé" tile — mark it with choice class racke-design-custom */
.racke-form.racke-form .racke-designs.racke-designs .racke-design-custom label {
  background: var(--rf-accent-soft);
  border-style: dashed;
  border-color: var(--rf-accent-line);
}

.racke-form.racke-form .racke-designs.racke-designs .racke-design-custom .wpforms-image-choices-image {
  background: transparent;
  border-bottom-style: dashed;
  border-bottom-color: var(--rf-accent-line);
}

.racke-form.racke-form .racke-designs.racke-designs .racke-design-custom .wpforms-image-choices-label {
  color: var(--rf-accent);
}

/* Framing note above the grid */
.racke-form.racke-form .racke-designs__note {
  font-size: 13px;
  color: var(--rf-ink-muted);
  line-height: 1.55;
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   8. FILE UPLOAD
   Covers both the Modern (drag & drop) and Classic upload styles.
   Verify class names against your WPForms version — see the build guide.
   -------------------------------------------------------------------------- */

.racke-form.racke-form .wpforms-field-file-upload .wpforms-uploader,
.racke-form.racke-form .wpforms-field-file-upload .dz-message {
  border: 1px dashed var(--rf-border-strong);
  border-radius: var(--rf-radius);
  background: var(--rf-surface);
  padding: 22px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--rf-ink-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.racke-form.racke-form .wpforms-field-file-upload .wpforms-uploader:hover,
.racke-form.racke-form .wpforms-field-file-upload .dz-drag-hover {
  border-color: var(--rf-accent);
  background: var(--rf-accent-soft);
}

.racke-form.racke-form .wpforms-field-file-upload input[type="file"] {
  font-size: 14px;
  color: var(--rf-ink-muted);
}

/* Uploaded file rows */
.racke-form.racke-form .wpforms-uploader .dz-preview {
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   9. GDPR / CONSENT CHECKBOX
   -------------------------------------------------------------------------- */

.racke-form.racke-form .wpforms-field-gdpr-checkbox ul,
.racke-form.racke-form .racke-consent ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.racke-form.racke-form .wpforms-field-gdpr-checkbox li,
.racke-form.racke-form .racke-consent li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.racke-form.racke-form .wpforms-field-gdpr-checkbox input[type="checkbox"],
.racke-form.racke-form .racke-consent input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--rf-accent);
  cursor: pointer;
}

.racke-form.racke-form .wpforms-field-gdpr-checkbox label,
.racke-form.racke-form .racke-consent label {
  font-size: 13px;
  color: var(--rf-ink-muted);
  line-height: 1.55;
  cursor: pointer;
  margin: 0;
}

.racke-form.racke-form .wpforms-field-gdpr-checkbox a,
.racke-form.racke-form .racke-consent a {
  color: var(--rf-accent);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. SUBMIT
   -------------------------------------------------------------------------- */

.racke-form.racke-form .wpforms-submit-container {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.racke-form.racke-form.racke-form button[type="submit"],
.racke-form.racke-form .wpforms-submit.wpforms-submit {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background-color: #373a3a; /* matches the theme's own button color (e.g. "Ring Oss"), sampled live from the site */
  border: 0;
  border-radius: var(--rf-radius-sm);
  padding: 14px 30px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.racke-form.racke-form.racke-form button[type="submit"]:hover,
.racke-form.racke-form .wpforms-submit.wpforms-submit:hover { background-color: var(--rf-accent); }

.racke-form button[type="submit"]:active { transform: translateY(1px); }

.racke-form button[type="submit"][disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.racke-form.racke-form .racke-reassure {
  font-size: 13px;
  color: var(--rf-ink-faint);
}

/* --------------------------------------------------------------------------
   11. ERRORS + CONFIRMATION
   -------------------------------------------------------------------------- */

.racke-form label.wpforms-error,
.racke-form em.wpforms-error {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--rf-error);
  margin-top: 5px;
}

.racke-form input.wpforms-error,
.racke-form select.wpforms-error,
.racke-form textarea.wpforms-error { border-color: var(--rf-error); }

.racke-form.racke-form .wpforms-confirmation-container,
.racke-form.racke-form .wpforms-confirmation-container-full {
  background: var(--rf-accent-soft);
  border: 1px solid var(--rf-accent-line);
  border-left: 3px solid var(--rf-accent);
  border-radius: var(--rf-radius);
  padding: 20px 22px;
  color: var(--rf-ink);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. PAGE BREAKS (only if you split the form into steps)
   -------------------------------------------------------------------------- */

.racke-form.racke-form .wpforms-page-indicator {
  margin-bottom: 22px;
  background: transparent;
  padding: 0;
}

.racke-form.racke-form .wpforms-page-indicator-page-progress {
  background: var(--rf-accent) !important;
}

.racke-form.racke-form .wpforms-page-button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--rf-radius-sm);
  padding: 13px 26px;
  cursor: pointer;
  border: 1px solid var(--rf-border-strong);
  background: var(--rf-surface);
  color: var(--rf-ink);
}

.racke-form.racke-form .wpforms-page-next {
  background: var(--rf-ink);
  border-color: var(--rf-ink);
  color: #fff;
}

.racke-form .wpforms-page-next:hover {
  background: var(--rf-accent);
  border-color: var(--rf-accent);
}

/* --------------------------------------------------------------------------
   13. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
  .racke-form { padding: 0.75rem 1.25rem 1.25rem; border-radius: 12px; }

  .racke-form__title { font-size: 20px; }

  .racke-form.racke-form .racke-designs.racke-designs ul.wpforms-image-choices {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .racke-form.racke-form.racke-form .racke-designs.racke-designs .wpforms-image-choices-image img { height: 128px; }

  .racke-form .racke-pills label { padding: 9px 15px; font-size: 13.5px; }

  .racke-form .wpforms-submit-container { flex-direction: column; align-items: stretch; }

  .racke-form button[type="submit"] { width: 100%; }

  .racke-form .racke-reassure { text-align: center; }
}

/* --------------------------------------------------------------------------
   14. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .racke-form *,
  .racke-form *::before,
  .racke-form *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}