/* FAME — forms (contact, apply, newsletter)
   Companion to /assets/js/forms.js. Targets form[data-fame-form].

   Defensive: the form sits inside .brxe-block which is `display:flex;
   flex-direction:column; align-items:flex-start` — so its child wrappers
   collapse to intrinsic width. We force the wrapper chain to 100%, then
   lay the form out as a 2-column grid. !important on layout primitives
   because we're overriding multiple WP-era stylesheets that load late.

   All var() calls have explicit fallbacks so styling still works if a
   Bricks/ACSS variable isn't defined at evaluation time. */

/* --- Force wrapper chain to full width when it contains our form --- */

.brxe-ws-form-form:has(> form[data-fame-form]),
.contact__form:has(> form[data-fame-form]),
.brxe-block:has(> .brxe-ws-form-form > form[data-fame-form]) {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

/* --- Form: 2-column grid --- */

form[data-fame-form] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: var(--space-s, 1rem);
  row-gap: var(--space-s, 1rem);
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  font-family: "Jakarta", sans-serif;
  color: var(--white, #fff);
}

/* Every direct child of the form defaults to spanning the full grid. */
form[data-fame-form] > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Half-width modifier — same selector depth as the default so it wins. */
form[data-fame-form] > .form-row--half {
  grid-column: span 1;
}

@media (max-width: 600px) {
  form[data-fame-form] > .form-row--half {
    grid-column: 1 / -1;
  }
}

/* --- Row internals (label + input + error) --- */

form[data-fame-form] .form-row {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--space-xs, 0.5rem) / 2);
  width: 100%;
  margin: 0;
}

/* --- Labels --- */

form[data-fame-form] .form-label {
  font-family: "Jakarta", sans-serif;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--base-semi-light, #c8c8c8);
  margin: 0;
  display: block;
  line-height: 1.2;
}

/* --- Text inputs, selects, textareas --- */

form[data-fame-form] .form-input,
form[data-fame-form] .form-select,
form[data-fame-form] .form-textarea {
  font-family: "Jakarta", sans-serif;
  font-size: var(--text-s, 0.9rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--white, #fff);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--primary-trans-30, rgba(190, 30, 45, 0.4));
  border-radius: var(--radius-xs, 4px);
  padding: 0.75em 1em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

form[data-fame-form] .form-textarea {
  resize: vertical;
  min-height: 7rem;
}

form[data-fame-form] .form-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--base-semi-light, #c8c8c8) 50%),
                    linear-gradient(135deg, var(--base-semi-light, #c8c8c8) 50%, transparent 50%);
  background-position: calc(100% - 1.1em) 1.05em, calc(100% - 0.7em) 1.05em;
  background-size: 0.4em 0.4em, 0.4em 0.4em;
  background-repeat: no-repeat;
  padding-right: 2.5em;
  cursor: pointer;
}

form[data-fame-form] .form-input::placeholder,
form[data-fame-form] .form-textarea::placeholder {
  color: var(--base-semi-light, #c8c8c8);
  opacity: 0.7;
}

form[data-fame-form] .form-input:hover,
form[data-fame-form] .form-select:hover,
form[data-fame-form] .form-textarea:hover {
  border-color: var(--primary, #BE1E2D);
}

form[data-fame-form] .form-input:focus,
form[data-fame-form] .form-select:focus,
form[data-fame-form] .form-textarea:focus {
  outline: none;
  border-color: var(--primary, #BE1E2D);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px var(--primary-trans-20, rgba(190, 30, 45, 0.25));
}

form[data-fame-form] .form-row.has-error .form-input,
form[data-fame-form] .form-row.has-error .form-select,
form[data-fame-form] .form-row.has-error .form-textarea {
  border-color: var(--bricks-text-danger, #fa4362);
}

/* --- Checkbox row --- */

form[data-fame-form] .form-check {
  display: flex;
  align-items: center;
  column-gap: var(--space-xs, 0.5rem);
  font-family: "Jakarta", sans-serif;
  font-size: var(--text-s, 0.9rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--white, #fff);
  cursor: pointer;
  margin: 0;
  line-height: 1.3;
}

form[data-fame-form] .form-checkbox {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--primary, #BE1E2D);
  flex-shrink: 0;
}

/* --- Error messages --- */

form[data-fame-form] .fame-error {
  font-family: "Jakarta", sans-serif;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  color: var(--bricks-text-danger, #fa4362);
  min-height: 1em;
  line-height: 1.3;
  margin: 0;
}

form[data-fame-form] p[data-fame-form-error].fame-error:empty {
  display: none;
}

/* --- Honeypot --- */

form[data-fame-form] .fame-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
}

/* --- Success state (toggled by forms.js) --- */

form[data-fame-form] [data-fame-success] {
  display: none;
  font-family: "Jakarta", sans-serif;
  font-size: var(--text-m, 1rem);
  color: var(--white, #fff);
  text-align: center;
  padding: var(--space-s, 1rem) 0;
}

form[data-fame-form] [data-fame-success] p {
  margin: 0;
}

/* --- Submit button --- */

form[data-fame-form] button[type="submit"] {
  font-family: "Jakarta", sans-serif;
  font-size: var(--text-s, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white, #fff);
  background-color: var(--primary, #BE1E2D);
  border: 1px solid var(--primary, #BE1E2D);
  border-radius: var(--radius-xs, 4px);
  padding: 0.9em 1.6em;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
  justify-self: start;
  margin-top: var(--space-xs, 0.5rem);
}

form[data-fame-form] button[type="submit"]:hover {
  background-color: var(--primary-dark, #8a1620);
  border-color: var(--primary-dark, #8a1620);
}

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

form[data-fame-form] button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* --- Cloudflare Turnstile widget --- */

form[data-fame-form] .cf-turnstile {
  margin-top: var(--space-xs, 0.5rem);
}