/* ==========================================================================
   Contact page — page 49485, /contact-new/
   Source file: readable and unscoped. build_contact.py prefixes every
   selector with #lpen-form at deploy time (CLAUDE.md §18b.3), because the
   Elementor kit stylesheet outbids bare class selectors.

   This file is deliberately small. The page is built from native Elementor
   widgets (§18-0) and almost everything is styled through Elementor
   controls. What is left here is the handful of things the Form widget's
   controls cannot express.
   ========================================================================== */

/* --- progressive-enhancement helper --------------------------------------
   Fields that only apply to some topics are hidden by lpen-contact.js, never
   by the server. With JavaScript off every field stays visible and the form
   still works — it is just longer.                                          */
#lpen-form .lpen-hide {
  display: none !important;
}

/* Give the conditional fields a little motion so they don't just pop in. */
#lpen-form .elementor-field-group {
  transition: opacity .18s ease;
}

/* --- required marker ------------------------------------------------------
   Elementor renders the asterisk in the label. Colour it so it reads as
   "required" rather than as a typo, and stop it wrapping onto its own line. */
#lpen-form .elementor-mark-required .elementor-field-label:after {
  color: #B3261E;
  margin-inline-start: 2px;
}

/* --- help text under a field ---------------------------------------------
   The Form widget has no per-field description control, so the hints live in
   the placeholder and in one html-free note below the form. What this rule
   does is keep Elementor's own inline validation messages legible instead of
   inheriting the kit's Primary typography (the same trap §18c hit with the
   side cart).                                                               */
#lpen-form .elementor-message {
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

#lpen-form .elementor-message.elementor-message-success {
  color: #0B4465;
  background: #E5EEF3;
  border: 1px solid #9ABFD6;
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 8px;
}

#lpen-form .elementor-message.elementor-message-danger {
  color: #8C1D18;
}

/* --- select fields --------------------------------------------------------
   Native selects render at wildly different heights across platforms next to
   Elementor's text inputs. Pin the height to the md input size so a row of
   "text + select" doesn't look broken.                                       */
#lpen-form .elementor-field-type-select select.elementor-field {
  height: 48px;
  line-height: 1.4;
  background-color: #FFFFFF;
}

/* --- checkbox / acceptance rows ------------------------------------------- */
#lpen-form .elementor-field-type-checkbox .elementor-field-subgroup label,
#lpen-form .elementor-field-type-acceptance label {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #4A5666;
}

/* --- submit button --------------------------------------------------------
   Full width on phones; auto elsewhere. Elementor's button_width control is
   all-or-nothing across breakpoints.                                         */
@media (max-width: 767px) {
  #lpen-form .elementor-field-type-submit button {
    width: 100%;
    justify-content: center;
  }
}

/* --- focus ---------------------------------------------------------------
   A visible focus ring on every control. Elementor's default is the browser
   outline, which several themes suppress. This is an accessibility floor,
   not decoration.                                                            */
#lpen-form .elementor-field:focus,
#lpen-form .elementor-field-type-submit button:focus-visible {
  outline: 2px solid #0F5C96;
  outline-offset: 2px;
  border-color: #0F5C96;
}