/* =====================================================================
   APS · V4 forms (loaded on every page after v4.css)
   The contact form, the checklist request in the final CTA, and their
   loading / error / success states. Behaviour: static/js/main.js.
   Status colours: red = error, green = success (the rest is the V4 palette).
   ===================================================================== */
:root {
  --danger: #A3271B;
  --danger-bg: #F7E6E2;
  --danger-on-dark: #F3B3A8;
  --success: #2E6A3B;
  --success-on-dark: #B9DDB0;
  --field-bg: #FFFDF9;
}

/* Honeypot: off-screen for people, still in the DOM for bots */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Submit button loading state: a small ring before the label */
.btn .spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.btn.is-loading .spinner { display: inline-block; animation: v4-spin .7s linear infinite; }
.btn:disabled { cursor: progress; opacity: .82; }
.btn:disabled:active { transform: none; }
@keyframes v4-spin { to { transform: rotate(360deg); } }

/* Turnstile slot: reserves the widget's height so nothing jumps when it appears */
[data-turnstile] { min-height: 65px; }
[data-turnstile]:empty:not([data-sitekey=""]) { position: relative; border-radius: var(--r-s); background: linear-gradient(90deg, rgba(14, 17, 23, .05) 0%, rgba(14, 17, 23, .09) 50%, rgba(14, 17, 23, .05) 100%) 0 0 / 200% 100%; }
[data-turnstile].is-loading:empty { animation: v4-shimmer 1.4s linear infinite; }
[data-turnstile][data-sitekey=""] { display: none; }
@keyframes v4-shimmer { to { background-position: -200% 0; } }

/* Form-level message (role="alert") */
.form-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--danger-bg); color: var(--danger); font-size: 15px; line-height: 1.45; border-left: 3px solid var(--danger); }
.form-alert[hidden] { display: none; }
.form-alert i { flex: none; font-size: 20px; margin-top: 1px; }
.form-alert .link { color: inherit; text-decoration-color: currentColor; }
.form-alert-dark { margin-top: 12px; background: rgba(243, 179, 168, .12); color: var(--danger-on-dark); border-left-color: var(--danger-on-dark); }

/* =====================================================================
   Contact form (on a stone card, cream fields)
   ===================================================================== */
.v4-form { display: grid; gap: var(--s4); }
.v4-form[hidden], .magnet-form[hidden] { display: none; }
.v4-form .form-note { font-size: 14px; color: var(--ink-3); }
.v4-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.v4-form .field { display: grid; gap: 6px; align-content: start; }
.v4-form .field label { font: 600 14px/1.3 var(--text); color: var(--ink); }
.v4-form .field .opt { margin-left: 4px; font-weight: 400; color: var(--ink-3); }
.v4-form .input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); background: var(--field-bg); color: var(--ink); font: 400 16px/1.4 var(--text); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.v4-form .input::placeholder { color: #8A847B; }
.v4-form .input:hover { border-color: var(--ink-3); }
.v4-form .input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 21, 176, .18); }
.v4-form .input:focus-visible { outline: none; }
.v4-form .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.v4-form .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(163, 39, 27, .2); }
.v4-form textarea.input { min-height: 148px; resize: vertical; }
.v4-form .select-wrap { position: relative; }
.v4-form .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.v4-form .select-wrap i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-3); pointer-events: none; }
.v4-form .field-hint { font-size: 13.5px; color: var(--ink-3); }
.v4-form .field-error { font-size: 14px; font-weight: 500; color: var(--danger); }
.v4-form .field-error:empty { display: none; }
.v4-form .form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.v4-form .form-footer .fine .link { text-underline-offset: 3px; }
.text-btn { appearance: none; padding: 6px 0; border: 0; background: none; color: var(--ink-2); font: 600 15px/1.3 var(--text); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); cursor: pointer; transition: color .2s, text-decoration-color .2s; }
.text-btn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Success + fallback panels replace the form */
.form-state { display: grid; justify-items: start; gap: var(--s2); padding: var(--s5) 0 var(--s2); outline: none; }
.form-state[hidden] { display: none; }
.form-state > i { font-size: 44px; line-height: 1; }
.form-success > i { color: var(--success); }
.form-fallback > i { color: var(--gold-dk); }
.form-state h3 { font-size: clamp(30px, 2.6vw, 38px); }
.form-state p { max-width: 34em; color: var(--ink-2); }
.form-state-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.form-state .text-btn { margin-top: var(--s1); }
@media (prefers-reduced-motion: no-preference) {
  .form-state:not([hidden]) { animation: open-panel .45s var(--ease) both; }
}
@media (max-width: 640px) {
  .v4-form .form-row { grid-template-columns: 1fr; }
  .v4-form .form-footer .btn { width: 100%; }
}

/* =====================================================================
   Checklist request (final CTA, brown ground, cream fields)
   Two inputs on one row, then the "not a robot" check beside the button.
   ===================================================================== */
.magnet-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.mf-field { min-width: 0; }
.magnet-form input:focus { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.mf-error { margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--danger-on-dark); }
.mf-error:empty { display: none; }
.mf-verify { min-width: 0; }
.magnet-form .btn { align-self: center; justify-self: end; }
.magnet-form noscript, .mf-noscript { grid-column: 1 / -1; font-size: 14.5px; color: var(--on-dark-2); }
.mf-success { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 16px 18px; border-radius: var(--r-s); background: rgba(185, 221, 176, .1); border-left: 3px solid var(--success-on-dark); color: var(--on-dark); font-size: 15.5px; line-height: 1.5; outline: none; }
.mf-success[hidden] { display: none; }
.mf-success i { flex: none; font-size: 24px; color: var(--success-on-dark); }
.mf-success b { color: var(--on-dark); }
.checklist .fine .link { color: var(--on-dark); text-underline-offset: 3px; }
@media (max-width: 700px) {
  .magnet-form { grid-template-columns: 1fr; }
  .magnet-form .btn { justify-self: stretch; }
}
@media (max-width: 760px) {
  /* Larger hit area for the privacy link under the submit button (no visual size change) */
  .v4-form .form-footer .fine .link { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .v4-form .form-footer { row-gap: var(--s2); }
}