/* ==========================================================================
   Lampstand Mail & Forms, front end styles.
   Every class is prefixed lbh-. These match the hand built site's tokens so
   the form does not look like it came from a different website.
   ========================================================================== */

.lbh-form-wrap{
  --lbh-black:#101014;
  --lbh-ink:#2A2A30;
  --lbh-grey:#6B6B73;
  --lbh-gold:#C9A227;
  --lbh-gold-d:#7E620F;   /* 5.77:1 on white. The only gold-toned text allowed */
  --lbh-ivory:#FAF7F0;
  --lbh-goldtint:#FBF3DE;
  --lbh-line:#E4E1DA;
  --lbh-white:#FFFFFF;
  --lbh-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--lbh-sans);
  color:var(--lbh-ink);
  max-width:720px;
}

.lbh-form-wrap *,.lbh-form-wrap *::before,.lbh-form-wrap *::after{box-sizing:border-box}

.lbh-form-wrap .lbh-row{display:grid;grid-template-columns:1fr;gap:6px 18px;margin:0 0 18px}
.lbh-form-wrap .lbh-row-2{grid-template-columns:1fr 1fr}
.lbh-form-wrap .lbh-f{display:flex;flex-direction:column;gap:7px;min-width:0}

.lbh-form-wrap label{
  font-size:12.6px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lbh-black);
}

.lbh-form-wrap input[type=text],
.lbh-form-wrap input[type=email],
.lbh-form-wrap input[type=tel],
.lbh-form-wrap input[type=url],
.lbh-form-wrap select,
.lbh-form-wrap textarea{
  font:400 15.4px/1.5 var(--lbh-sans);
  color:var(--lbh-ink);background:var(--lbh-white);
  border:1px solid var(--lbh-line);border-radius:0;
  padding:13px 14px;width:100%;max-width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.lbh-form-wrap textarea{min-height:132px;resize:vertical}
.lbh-form-wrap input:focus,
.lbh-form-wrap select:focus,
.lbh-form-wrap textarea:focus{
  border-color:var(--lbh-gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.16);
  outline:none;
}

.lbh-form-wrap .lbh-hint{
  display:block;font-size:12.6px;color:var(--lbh-grey);margin-top:6px;
  text-transform:none;letter-spacing:normal;font-weight:400;
}

.lbh-form-wrap .lbh-consent{margin:0 0 20px;font-size:13.8px;color:var(--lbh-grey);line-height:1.6}
.lbh-form-wrap .lbh-consent label{
  display:flex;gap:10px;align-items:flex-start;
  text-transform:none;letter-spacing:normal;font-weight:400;font-size:13.8px;color:var(--lbh-grey);
}
.lbh-form-wrap .lbh-consent input[type=checkbox]{margin-top:3px;flex:none;width:auto}
.lbh-form-wrap .wpcf7-list-item{margin:0}

/* Submit. Gold carries BLACK text. White on this gold is 2.42:1 and fails AA. */
.lbh-form-wrap .lbh-submit{margin:0}
.lbh-form-wrap input[type=submit],
.lbh-form-wrap button[type=submit],
.lbh-book{
  display:inline-flex;align-items:center;justify-content:center;
  font:600 14px/1 var(--lbh-sans);letter-spacing:.04em;
  padding:17px 30px;border:1px solid transparent;border-radius:0;
  background:var(--lbh-gold);color:var(--lbh-black);
  cursor:pointer;text-decoration:none;
  transition:transform .18s ease,background-color .18s ease;
}
.lbh-form-wrap input[type=submit]:hover,
.lbh-form-wrap button[type=submit]:hover,
.lbh-book:hover{background:#E3C766;color:var(--lbh-black);transform:translateY(-2px)}
.lbh-form-wrap input[type=submit]{width:100%}

.lbh-book{
  font-family:var(--lbh-sans);
  background:#C9A227;color:#101014;
}

/* Honeypot. Off screen rather than display:none, and skipped by screen
   readers and by keyboard. The paragraph Contact Form 7 wraps it in is
   collapsed to nothing rather than hidden, so the field stays in the flow
   where a bot will still find and fill it. */
.lbh-hp{
  position:absolute !important;left:-9999px !important;
  width:1px !important;height:1px !important;overflow:hidden !important;
}
.lbh-form-wrap .lbh-hp-wrap{margin:0;padding:0;height:0;overflow:hidden}

/* WordPress wraps a shortcode that sits on its own line in a paragraph, which
   leaves an empty <p> carrying a margin above the form. Harmless, but tidy it. */
p:has(> .lbh-form-wrap){margin:0}

/* Contact Form 7 runs its own autop over the form template. The markup is
   authored one paragraph per line so nothing is inserted, but if a stray break
   ever does appear inside a row it must not become a grid item. */
.lbh-form-wrap .lbh-row > br{display:none}

/* Contact Form 7 response messages, restyled to match the site */
.lbh-form-wrap .wpcf7-not-valid-tip{
  font-size:12.8px;color:#B3261E;font-weight:500;margin-top:6px;
}
.lbh-form-wrap .wpcf7-not-valid{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.10)}
.lbh-form-wrap .wpcf7-response-output{
  margin:20px 0 0 !important;padding:16px 18px !important;
  border:1px solid var(--lbh-line) !important;border-left:3px solid var(--lbh-gold) !important;
  background:var(--lbh-ivory);font-size:14.4px;color:var(--lbh-ink);border-radius:0 !important;
}
.lbh-form-wrap form.invalid .wpcf7-response-output,
.lbh-form-wrap form.failed .wpcf7-response-output{border-left-color:#B3261E !important}
.lbh-form-wrap .wpcf7-spinner{margin:0 0 0 10px}

/* Notice bar */
.lbh-notice{
  background:#FBF3DE;border:1px solid #E4E1DA;border-left:3px solid #C9A227;
  padding:16px 20px;font:400 14.6px/1.66 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:#2A2A30;
}
.lbh-notice p{margin:0 0 8px}
.lbh-notice p:last-child{margin:0}
.lbh-notice a{color:#7E620F;font-weight:600}

.lbh-tel{color:#7E620F;font-weight:600;text-decoration:none}
.lbh-tel:hover{color:#101014}

.lbh-warn{
  background:#FBF3DE;border-left:3px solid #C9A227;padding:14px 18px;
  font-size:14px;color:#2A2A30;
}

@media(max-width:575px){
  .lbh-form-wrap .lbh-row,
  .lbh-form-wrap .lbh-row-2{grid-template-columns:1fr;gap:6px;margin-bottom:14px}
  .lbh-form-wrap input[type=text],
  .lbh-form-wrap input[type=email],
  .lbh-form-wrap input[type=tel],
  .lbh-form-wrap select,
  .lbh-form-wrap textarea{padding:12px 13px;font-size:16px}  /* 16px stops iOS zooming on focus */
  .lbh-form-wrap input[type=submit],
  .lbh-book{padding:15px 22px;font-size:13.6px}
  .lbh-notice{padding:14px 16px;font-size:13.8px}
}
