/* Olive Tree Mortuary - shared form labels, hints, errors and the Quick check panel.
   Plan: plans/website-labels-2026-11-08/PLAN.md. Include before </head>:
   <link rel="stylesheet" href="assets/css/form-labels.css?v=20261108">
   Scope classes: .ot-form .ot-field .ot-label .ot-req .ot-opt .ot-hint .ot-phone .ot-check .ot-check-title
   .ot-check-help .ot-check-widget .ot-check-msg .ot-check--quiet. Page input looks (colours, radius) are left alone. */

:root {
  --ot-olive: #556428;
  --ot-ink: #2d3436;
  --ot-slate: #4a5568;
  --ot-muted: #6e7681;
  --ot-border: #e1dcd3;
  --ot-panel: #f6f4ef;
  --ot-danger: #c0392b;
}

/* ---- field wrapper and spacing -------------------------------------------- */
.ot-field { position: relative; margin: 0 0 1rem; }
.ot-form .form-group.ot-field { margin-bottom: 1rem; }
.ot-field + .ot-field { margin-top: 0; }

/* ---- label ---------------------------------------------------------------- */
.ot-label,
label.ot-label {
  display: block;
  margin: 0 0 .35rem;
  font-size: .8rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ot-slate);
  text-transform: none;
}
.ot-label .ot-req { color: var(--ot-danger); font-weight: 700; margin-left: 2px; }
.ot-label .ot-opt { font-weight: 400; color: var(--ot-muted); }
.ot-field.is-invalid > .ot-label,
.ot-field:has(> .is-invalid) > .ot-label { color: var(--ot-danger); }

/* ---- controls: tap size only, the page keeps its own border/colour/radius -- */
.ot-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
.ot-field select,
.ot-field textarea,
.ot-field .form-control,
.ot-field .form-select { min-height: 44px; width: 100%; }
.ot-field .input-group .form-control,
.ot-field .input-group select { width: auto; }
.ot-field textarea { min-height: 120px; }
.ot-field .input-group.ot-phone { display: flex; flex-wrap: nowrap; align-items: stretch; }
.ot-field .input-group.ot-phone > select { flex: 0 0 auto; min-width: 84px; } /* 375 px + 16 px font: "+1" must not clip to "+"; selector beats Bootstrap's .input-group>.form-control{min-width:0} */
.ot-phone > select { min-width: 84px; }
.ot-field .input-group.ot-phone > input { flex: 1 1 auto; min-width: 0; }

/* ---- hint and error ------------------------------------------------------- */
.ot-hint,
.ot-field .help-text-inline {
  display: block;
  margin: .3rem 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ot-muted);
}
.ot-field .err,
.ot-err {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ot-danger);
}
.ot-field .err:empty { display: none; margin: 0; }

/* ---- Quick check panel ---------------------------------------------------- */
.ot-check {
  margin: 1rem 0 1.25rem;
  padding: .85rem 1rem 1rem;
  background: var(--ot-panel);
  border: 1px solid var(--ot-border);
  border-radius: 10px;
  max-width: 100%;
}
.ot-check-title {
  margin: 0 0 .15rem;
  font-size: .95rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ot-ink);
}
.ot-check-help {
  display: block;
  margin: 0 0 .65rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ot-muted);
}
.ot-check-widget { max-width: 100%; }
.ot-check-widget > div,
.ot-check-widget iframe { max-width: 100%; }
.ot-check-msg,
.ot-check .err {
  display: block;
  margin: .45rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ot-danger);
}
/* Turnstile managed mode: the page adds this while the widget is invisible, so no empty grey box shows */
.ot-check.ot-check--quiet { margin: 0; padding: 0; background: none; border: 0; }

/* ---- small screens -------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ot-field .form-control,
  .ot-field .form-select,
  .ot-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  .ot-field select,
  .ot-field textarea { font-size: 16px !important; } /* stops iOS zoom on focus */
  /* a 304 px reCAPTCHA must sit inside the panel at 375 px: the panel grows .5rem into the column gutter and pads .5rem */
  .ot-check { padding: .75rem .5rem .85rem; margin-left: -.5rem; margin-right: -.5rem; max-width: none; }
}