/* ==========================================================
   Contact pop-up ("Well, hello there!"), opened by the top-bar Hello! link.
   Same markup/look as the Labs page pop-up (_lab/lab.css section 11).
   Modal shell (.ciq-modal*) is styled in style.css.
   ========================================================== */
#contact-modal .lab-contact__dialog { max-width: 560px; }
#contact-modal .lab-contact { display: grid; gap: .35rem; font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; }
#contact-modal .lab-contact label { margin-top: .65rem; color: #002340; font-weight: 600; font-size: .95rem; }
#contact-modal .lab-contact label:first-of-type { margin-top: 0; }
#contact-modal .lab-contact label span { color: #2e7d32; }
#contact-modal .lab-contact input,
#contact-modal .lab-contact select,
#contact-modal .lab-contact textarea {
  width: 100%; box-sizing: border-box; padding: .6rem .75rem; font: inherit; font-size: 1rem;
  color: #1a1a1a; background: #fff; border: 1px solid #cfd6dc; border-radius: 6px;
}
#contact-modal .lab-contact textarea { resize: vertical; min-height: 7rem; }
#contact-modal .lab-contact input:focus,
#contact-modal .lab-contact select:focus,
#contact-modal .lab-contact textarea:focus {
  outline: none; border-color: #2e7d32; box-shadow: 0 0 0 1px #2e7d32;
}
#contact-modal .lab-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Site standard button (same spec as homepage .btn / _lab .lab-btn) */
#contact-modal .lab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; min-width: min(200px, 100%);
  padding: .7rem 1.5rem;
  border: 2px solid #002340; border-radius: 4px;
  background: #002340; color: #fff;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
#contact-modal .lab-btn:hover, #contact-modal .lab-btn:focus-visible { background: #001a30; border-color: #001a30; }
#contact-modal .lab-contact__submit { justify-self: center; margin-top: 1.25rem; }

/* "Well, hello there!" title a little larger (was 1rem). Backup: contact-modal.css.bak-titlesize */
#contact-modal-title { font-size: 1.2rem; }

/* Shorter message box so the whole pop-up fits without scrolling. Backup: contact-modal.css.bak-msgbox */
#contact-modal .lab-contact textarea { height: 4.5rem; min-height: 4.5rem; }

/* Message box fills the leftover height of the screen (pop-up max is 90% of the
   screen height), never below 4.5rem or above 16rem, so the pop-up never needs
   a scroll bar on normal screens. Backup: contact-modal.css.bak-msgfill */
#contact-modal .lab-contact textarea { height: clamp(4.5rem, calc(90vh - 600px), 16rem); }

/* Sent / error message at the top of the pop-up (after contact/send.php).
   The Contact page was removed 2026-09-27; this replaces its status line. Backup: contact-modal.css.bak-nocontact */
#contact-modal .lab-contact__status {
  margin: 0 0 .75rem; padding: .7rem .9rem; border-radius: 6px;
  font-size: .95rem; line-height: 1.4; font-weight: 600;
}
#contact-modal .lab-contact__status--ok { color: #2e7d32; border: 1px solid #2e7d32; background: #fff; }
#contact-modal .lab-contact__status--err { color: #002340; border: 1px solid #002340; background: #fff; }

/* Light gray example text in the "What neighborhood decision is on your desk?" box (2026-10-07) */
#contact-modal .lab-contact textarea::placeholder,
#contact-modal .lab-contact input::placeholder { color: #9ca3af; opacity: 1; }

#contact-modal .lab-contact__copy {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .9rem;
  color: #002340;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  cursor: pointer;
}
#contact-modal .lab-contact__copy input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: .15rem 0 0;
  flex: 0 0 auto;
  accent-color: #002340;
  cursor: pointer;
}
#contact-modal .lab-contact label.lab-contact__copy span { color: #002340 !important; font-weight: 600; }