/* Contact form. Inherits each site's fonts and colours; only layout and the accessibility-critical
   states are set here. Class prefix ld- so it cannot collide with a site's own .lead-form rules. */
.ld-form { max-width: 36rem; margin: 1.25rem 0; }
.ld-form .ld-hp { display: none !important; }
.ld-field { margin: 0 0 1rem; }
.ld-field label { display: block; margin: 0 0 .35rem; font-weight: 600; }
.ld-field .ld-hint { display: block; font-weight: 400; font-size: .92em; opacity: .85; }
.ld-field input[type="text"], .ld-field input[type="email"], .ld-field input[type="url"],
.ld-field select, .ld-field textarea {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem; font: inherit;
  color: inherit; background: transparent; border: 2px solid currentColor; border-radius: .35rem;
}
.ld-field textarea { min-height: 7rem; resize: vertical; }
.ld-form--compact .ld-field textarea { min-height: 4.5rem; }
.ld-form input:focus-visible, .ld-form select:focus-visible, .ld-form textarea:focus-visible,
.ld-form button:focus-visible, .ld-status:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.ld-consent { margin: 1rem 0; font-size: .95em; }
.ld-form .ld-button {
  padding: .75rem 1.5rem; font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2;
  color: #fff; background: var(--ld-accent, #123456);
  border: 2px solid var(--ld-accent, #123456); border-radius: .35rem;
}
.ld-form .ld-button:hover { filter: brightness(1.15); }
.ld-form .ld-button:disabled { opacity: .6; cursor: progress; }
.ld-status { min-height: 1.5em; margin: .75rem 0 0; }
.ld-status--error { font-weight: 600; }
.ld-status--error::before { content: "Error: "; }
.ld-alt { margin: .75rem 0 0; font-size: .95em; }

/* Mobile contact bar: a phone and a message button pinned to the bottom of a phone screen, for the
   designs that have no bar of their own. Hidden above 40rem. */
.ld-bar { display: none; }
@media (max-width: 40rem) {
  .ld-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: .5rem;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--ld-accent, #123456);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
  }
  .ld-bar a {
    flex: 1; box-sizing: border-box; min-height: 44px; display: flex; align-items: center; justify-content: center;
    padding: .6rem .5rem; font: inherit; font-weight: 700; text-decoration: none; border-radius: .35rem;
    color: #fff; border: 2px solid #fff;
  }
  .ld-bar a.ld-bar-main { background: #fff; color: var(--ld-accent, #123456); }
  .ld-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  body:has(.ld-bar) { padding-bottom: 4.5rem; }
}

/* Decision aids (tools.js): which size, nights to pay, listing self-check. */
.ld-tool { margin: 2rem 0; padding: 1.25rem; border: 2px solid currentColor; border-radius: .5rem; max-width: 40rem; }
.ld-tool h2 { margin-top: 0; }
.ld-q { border: 0; margin: 0 0 1.25rem; padding: 0; }
.ld-q legend { font-weight: 600; margin: 0 0 .5rem; padding: 0; }
.ld-opt { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .5rem; }
.ld-opt input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; }
.ld-opt label { font-weight: 400; }
.ld-result { margin-top: 1rem; }
.ld-result p { margin: 0 0 .6rem; }
.ld-tool-link { display: inline-block; padding: .65rem 1.1rem; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--ld-accent, #123456); border-radius: .35rem; }
.ld-tool-link:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.ld-tool .ld-field { margin: 0 0 1rem; }
.ld-tool .ld-field label { display: block; font-weight: 600; margin: 0 0 .35rem; }
.ld-tool .ld-field input, .ld-tool .ld-field select { width: 100%; box-sizing: border-box; padding: .6rem .7rem;
  font: inherit; color: inherit; background: transparent; border: 2px solid currentColor; border-radius: .35rem; }

/* A form placed inside a dark call-to-action band (lakeviewtraining.com): light button, text inherits. */
.cta-band .ld-form { margin-left: auto; margin-right: auto; text-align: left; }
.cta-band .ld-form .ld-button { background: #fff; color: #123456; border-color: #fff; }
.cta-band .ld-form .ld-hint { opacity: 1; }
.cta-band .ld-form a { color: inherit; }
