/**
 * Contact form (contact.purelei.com) — Figma 2912-16868.
 *
 * Loaded by the Rails contact form (rendered into the shop via iframe) as the
 * DELTA on top of the theme's shared design base. The Rails layout must link,
 * in this order, from the shop CDN:
 *
 *   1. karla.css          (fonts)
 *   2. design-tokens.css  (custom properties)
 *   3. purelei.css        (global bundle incl. forms/form-fields.css —
 *                          field/floating-label/checkbox system)
 *   4. contact-form.css   (this file)
 *
 * This file only carries the contact-page layout: container, heading,
 * field rows, file input, submit. The field styling itself comes from the
 * shared form system (.field / .field__input / .field__label).
 *
 * CSS-only limit: the Figma drop-zone (upload icon + two helper lines) cannot
 * be fully reproduced on a bare native <input type="file"> — this styles it
 * as a 160px bordered zone with a "Browse File"-style selector button. Full
 * fidelity needs a small markup addition on the Rails side.
 */

body {
  margin: 0;
  background: var(--color-neutral-white, #fff);
  font-family: var(--font-family-primary, Karla, sans-serif);
  color: var(--color-text-charcoal, #272727);
}

/* ------- Container (Figma: single column, px-48 desktop) ------- */

.contact {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

.contact *,
.contact *::before,
.contact *::after {
  box-sizing: border-box;
}

/* ------- Heading + intro ------- */

.contact .title {
  margin: 0 0 8px;
  font-family: var(--font-family-primary);
  font-size: 28px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.3;
  letter-spacing: -0.7px;
  color: var(--color-text-charcoal);
}

.contact .subheadline {
  margin: 0;
  padding: 8px 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-light, 300);
  line-height: 1.3;
  letter-spacing: -0.28px;
  color: var(--color-text-charcoal);
}

/* ------- Form layout (Figma: stacked, 12px gaps) ------- */

.contact form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Honeypot: visually removed (defensive — even if Rails does not hide it) */
.contact form > div:has(> #shopify_contact_form_hp) {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------- File input (Figma drop-zone approximation) ------- */

.contact .file__field__input {
  /* Native file input: no flex layout for the shadow parts — center via
     align-content (block containers) + text-align instead */
  display: block;
  width: 100%;
  min-height: 160px;
  margin-top: 12px;
  padding: 12px 10px;
  border: 1px solid var(--color-grey-50, #cac7c7);
  background: var(--color-neutral-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs, 12px);
  letter-spacing: -0.3px;
  color: var(--color-grey-400, #635f5f);
  text-align: center;
  align-content: center;
  cursor: pointer;
}

.contact .file__field__input::file-selector-button {
  display: block;
  margin: 0 auto 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-grey-50, #cac7c7);
  background: var(--color-neutral-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: -0.28px;
  color: var(--color-text-charcoal);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.contact .file__field__input::file-selector-button:hover {
  background: var(--color-neutral-charcoal, #272727);
  color: var(--color-neutral-white, #fff);
}

/* ------- Consent checkbox row ------- */

/* .field--checkbox base (box, gap, label, link) comes from the shared
   form system; only page-specific spacing here */
.contact .field--checkbox {
  padding-top: 12px;
}

/* ------- Submit (Figma: full-width dark CTA, pt-24) ------- */

.contact form > .field:last-child {
  padding-top: 24px;
}

.contact input[type="submit"] {
  width: 100%;
  padding: 12px 32px;
  border: 1px solid var(--color-neutral-charcoal, #272727);
  background: var(--color-neutral-charcoal, #272727);
  color: var(--color-neutral-white, #fff);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.3;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact input[type="submit"]:hover {
  opacity: 0.9;
}

@media (min-width: 768px) {
  .contact {
    padding: 24px 48px 48px;
  }
}