/* Short contact form (qform) — shared component.
 * Used by every page that embeds [data-qform]. Page-specific overrides stay
 * inline on each page; everything reusable lives here. Prefix: .qform-*
 */
.qform-*  (verified unused across all 36 HTML files in the repo).
 * Deliberately NOT .cform-* — that prefix is owned by the long homepage form
 * and lives in the homepage's own <style> block. No selector here can inherit
 * from, or bleed into, either that block or a page's local CSS.
 *
 * Colours/typography come from each page's own :root, not from literals:
 *   --accent      blue #2D7DD2 on the homepage, teal #1F8FA3 on procedure /
 *                 EN / blog pages. The component picks up whichever the host
 *                 page defines, so it looks native on both.
 *   --ink, --ink-soft, --ink-muted, --cream, --white, --rule-cool, --caribbean
 * Fallbacks are supplied only so the block still renders if it is ever pasted
 * onto a page that has not declared the tokens.
 *
 * Body font is inherited (Inter). The success heading uses the site's display
 * face (Fraunces) to match every other card heading on the site.
 */

.qform-band {
  padding: var(--section-y-tight, clamp(56px, 7vw, 96px)) var(--gutter, clamp(20px, 5vw, 96px));
}

.qform-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--cream, #F8F5EF);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 22px 50px rgba(0, 0, 0, 0.14);
}

.qform {
  padding: 26px clamp(20px, 3vw, 30px);
  display: grid;
  gap: 16px;
}

/* ---- intro ---- */
.qform-intro { display: grid; gap: 6px; }

.qform-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #0B2545);
  margin: 0;
}

.qform-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft, #2C3E5C);
  margin: 0;
}

/* ---- fields ---- */
.qform-field { display: grid; gap: 6px; }

.qform label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #2C3E5C);
  letter-spacing: 0.005em;
}

.qform input[type="text"],
.qform textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* >=16px stops iOS Safari zooming the viewport on focus */
  color: var(--ink, #0B2545);
  background: var(--white, #FFFFFF);
  border: 1px solid var(--rule-cool, #DCE3EC);
  border-radius: 9px;
  padding: 11px 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.qform input::placeholder,
.qform textarea::placeholder {
  color: var(--ink-muted, #6B7A92);
  opacity: 0.75;
}

.qform input:hover,
.qform textarea:hover { border-color: #BFCAD9; }

.qform input:focus,
.qform textarea:focus {
  outline: none;
  border-color: var(--accent, #2D7DD2);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.18);                                  /* fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2D7DD2) 22%, transparent);
}

.qform textarea { resize: vertical; min-height: 82px; }

/* ---- submit ---- */
.qform-submit {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: var(--accent, #2D7DD2);
  border: 1px solid var(--accent, #2D7DD2);
  border-radius: 999px;
  padding: 14px 24px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.qform-submit:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(45, 125, 210, 0.28);                                 /* fallback */
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #2D7DD2) 30%, transparent);
}

.qform-submit:active { transform: translateY(0); }

.qform-submit[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
  filter: none;
}

.qform-fine {
  font-size: 12px;
  color: var(--ink-muted, #6B7A92);
  text-align: center;
  margin: 0;
  line-height: 1.45;
}

/* ---- error ---- */
.qform-error {
  display: none;
  font-size: 13px;
  color: #A21B24;
  background: #FBEAEA;
  border: 1px solid #EEC7C7;
  border-radius: 9px;
  padding: 10px 12px;
  margin: 0;
  line-height: 1.45;
}
.qform-error.is-shown { display: block; }
.qform-error a { color: #A21B24; font-weight: 600; text-decoration: underline; }

/* ---- honeypot ---- */
.qform-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- success ---- */
.qform-success { display: none; padding: 38px 26px; text-align: center; }
.qform-success.is-shown {
  display: block;
  animation: qformRise 420ms cubic-bezier(.16, 1, .3, 1) both;
}
.qform-card.is-done .qform { display: none; }

.qform-mark {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: rgba(31, 143, 163, 0.14);                                            /* fallback */
  background: color-mix(in srgb, var(--caribbean, #1F8FA3) 14%, transparent);
  color: var(--caribbean, #1F8FA3);
}
.qform-mark svg { width: 28px; height: 28px; }

.qform-success h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #0B2545);
  margin: 0 0 10px;
}
.qform-success p {
  font-size: 14.5px;
  color: var(--ink-soft, #2C3E5C);
  max-width: 36ch;
  margin: 0 auto;
  line-height: 1.55;
}

@keyframes qformRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qform-success.is-shown { animation: none; }
  .qform-submit, .qform input, .qform textarea { transition: none; }
  .qform-submit:hover { transform: none; }
}