/* Legibility overrides for the sketch's enquiry form. Sofia, 2026-09-17.
 *
 * The sketch's own values put the fields at rgba(19,16,13,.6) on a
 * rgba(28,23,19,.8) card — the inputs were DARKER than the surface behind them,
 * so the boxes disappeared, and placeholders sat at 40% opacity on top of that.
 *
 * This keeps Sofia's design (shape, type, colours, spacing) and fixes only
 * readability. Loaded AFTER sketch-form.css so it wins, and kept in its own file
 * so scripts/build-contact-section.py can be re-run without wiping it.
 * `!important` is deliberate: the extracted rules are single-class utilities.
 */

form[data-testid="contact-form"] input,
form[data-testid="contact-form"] textarea {
  background-color: rgba(236, 226, 208, 0.10) !important;
  border-color: rgba(212, 163, 89, 0.55) !important;
  color: #f8f4ec !important;
}

form[data-testid="contact-form"] input::placeholder,
form[data-testid="contact-form"] textarea::placeholder {
  color: rgba(236, 226, 208, 0.70) !important;
  opacity: 1 !important;
}

form[data-testid="contact-form"] input:focus,
form[data-testid="contact-form"] textarea:focus {
  background-color: rgba(236, 226, 208, 0.15) !important;
  border-color: rgba(232, 192, 120, 0.95) !important;
}

/* the small uppercase field labels — were 70% ochre, too dim on the card */
form[data-testid="contact-form"] label span {
  color: rgba(242, 216, 162, 0.95) !important;
}

/* browsers draw the date field and its icon from the colour scheme */
form[data-testid="contact-form"] input[type="date"] {
  color-scheme: dark;
}

/* the number field's spinner sat on the dark fill */
form[data-testid="contact-form"] input[type="number"] {
  color-scheme: dark;
}

/* ---------------------------------------------------------------
   Size, matched on both pages so the home form and the contact form
   cannot drift apart again. Sofia: "MAKE THE LETTERS BIGGER".
   The sketch's originals were inputs 16px / labels 12px / button 12px.
   --------------------------------------------------------------- */

form[data-testid="contact-form"] input,
form[data-testid="contact-form"] textarea {
  font-size: 1.22rem !important;   /* 19.5px, was 16px */
  line-height: 1.45 !important;
}

form[data-testid="contact-form"] label span {
  font-size: 0.9rem !important;    /* 14.4px, was 12px */
  letter-spacing: 0.12em !important;
}

form[data-testid="contact-form"] button[data-testid="contact-form-submit"] {
  font-size: 0.9rem !important;    /* 14.4px, was 12px */
  letter-spacing: 0.2em !important;
}

/* ---------------------------------------------------------------
   Match the home page's type scale and pin the families.
   The home page's injected CSS forces `main p` to 1.3/1.45rem and
   `main .font-narrative` to 1.24rem; none of that reached this page,
   which is why the same section looked different on the two pages.
   These rules load on BOTH pages, so the two now resolve identically.
   --------------------------------------------------------------- */

/* the section's own words, at the home page's scale */
#contact p {
  font-size: 1.3rem !important;
  line-height: 1.8 !important;
}
@media (min-width: 640px) {
  #contact p { font-size: 1.45rem !important; }
}

/* families pinned to the design's own, on both pages */
form[data-testid="contact-form"] input,
form[data-testid="contact-form"] textarea {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}
form[data-testid="contact-form"] label span,
form[data-testid="contact-form"] button[data-testid="contact-form-submit"] {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ---------------------------------------------------------------
   Headings: stop pages.css leaking into this section.

   pages.css has `h1,h2,h3{font-weight:600}` as an element rule, and it
   is loaded here but NOT on the home page. `.font-display` sets only the
   family, so 600 leaked through and Cinzel Decorative rendered visibly
   thicker than the same heading on the home page (Sofia, 2026-09-17).
   The home page's h2 measures weight 400, 48px, line-height 48px.
   --------------------------------------------------------------- */

#contact h1, #contact h2, #contact h3 {
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
}