/* `contact_form` — the enquiry form on `/pages/contact-us`.
 *
 * Measured off aeke.com's Globo app block at 1440. Every number here was read from the rendered
 * card, because the vendor injects its stylesheet at runtime and its rules are not in the document
 * in a form that can be read back:
 *
 *   card        1000px, radius 2px, Material shadow, 30px of padding, margin 30px auto
 *   heading     32px/48px, weight 400, 8px below it
 *   copy        18px on a 1.7 leading, 32px above the fields
 *   rows        flex, wrap, 4px between rows; a field item is 50% wide with 5px gutters
 *   label       16px on a 2.0 leading (32px tall), 4px above its control
 *   input       41px tall, 16px, transparent, on a line
 *   message     930px of the 940px row
 *   options     two to a row, 40px tall, 32px of left padding for the control
 *   submit      940x40, near-black, radius 4px, 6px 14px
 *
 * The two shapes the vendor's CSS owns and this file therefore *draws* — the input's line and the
 * radio's circle — use the app's own ink colour, which was readable in its inline variables. They
 * are flagged as drawn rather than measured, in this comment and in the template.
 *
 * Colours come from tokens wherever the site has one; the app's palette is one-off, so it lives
 * here as custom properties on the card.
 */

.contact-form-section {
  /* The spacing is a margin on the wrapper below, so the section has to hold it. */
  display: flow-root;
}

/* …and the wrapper has to hold the *card's* 30px margins: a plain div lets them collapse out, which
   cost the page 10px (the card's margins merged with the wrapper's instead of adding to them). */
.contact-form-section > .app-wrapper {
  display: flow-root;
}

.contact-form {
  /* The app's own ink and surface. `--gfb-color-text` was `28,28,28` and the panel pure white. */
  --contact-ink-rgb: 28, 28, 28;
  --contact-line-rgb: 28, 28, 28;

  box-sizing: border-box;
  max-width: 1000px;
  margin: 30px auto;
  padding: 30px;
  background: var(--surface-tile-light);
  border-radius: 2px;
  /* Measured, three layers: `rgba(0,0,0,.14) 0 2px 2px 0`, `rgba(0,0,0,.12) 0 3px 1px -2px`,
     `rgba(0,0,0,.2) 0 1px 5px 0`. */
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
  color: rgb(var(--contact-ink-rgb));
}

.contact-form__title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 48px;
  font-weight: 400;
  color: inherit;
}

.contact-form__description {
  margin: 0 0 32px;
  font-size: 18px;
  /* Measured as a 29px box: 18px on a 1.6 leading, not the 1.7 the app's own computed line-height
     round-trips to. Two pixels, and the section's height is asserted against live. */
  line-height: 1.6;
  color: rgb(var(--contact-ink-rgb) / 80%);
}

/* ---------------------------------------------------------------- notices

   Ours, not the app's: a submission needs an answer the page can stand behind. The wording is the
   client's own promise from the description above ("we'll get back to you shortly"), because the
   site knows the enquiry was stored and nothing more. */

.contact-form__notice {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-icon-link);
  border-radius: 2px;
  background: rgb(50 196 140 / 8%);
  font-size: 15px;
  line-height: 1.6;
}

.contact-form__notice--error {
  border-left-color: var(--color-accent);
  background: rgb(var(--color-accent-rgb) / 8%);
}

/* ---------------------------------------------------------------- fields */

.contact-form__rows {
  display: flex;
  flex-wrap: wrap;
  /* Measured: `gap: 4px normal` — 4px between rows, nothing between columns (the 5px gutters on
     each item are the columns' spacing). */
  row-gap: 4px;
  margin-bottom: 8px;
}

.contact-form__row-item {
  box-sizing: border-box;
  width: 50%;
  padding: 0 5px;
  /* Measured on the app's `.globo-form-control`: 24px below every field. */
  margin-bottom: 24px;
}

.contact-form__row-item--full {
  width: 100%;
}

.contact-form__control {
  display: block;
}

.contact-form__label {
  display: block;
  margin: 0 0 4px;
  /* 16px on a leading of 2 — which is why the label measures 32px, and why the field is 77px. */
  font-size: 16px;
  line-height: 2;
  color: inherit;
}

.contact-form__req {
  font-size: 0.875rem;
}

.contact-form__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 41px;
  padding: 0;
  border: 0;
  /* DRAWN to the measured 41px box rather than copied: the vendor's line rules live in a stylesheet
     its own script injects. The ink colour is the app's. */
  border-bottom: 1px solid rgb(var(--contact-line-rgb) / 42%);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 41px;
  color: inherit;
}

.contact-form__input::placeholder {
  /* Measured from the app: `rgba(0,0,0,0.5)`. */
  color: rgb(0 0 0 / 50%);
}

.contact-form__input:focus {
  outline: 0;
  border-bottom-color: rgb(var(--contact-line-rgb));
  border-bottom-width: 2px;
}

.contact-form__input--area {
  box-sizing: border-box;
  height: 100px;
  min-height: 100px;
  /* Measured: the app's textarea has no padding at all, and its 100px is the whole box. Ours had
     8px of padding and `rows="4"` driving the height, which made it 118 and the card 18 too tall. */
  padding: 0;
  line-height: 1.6;
  resize: vertical;
}

select.contact-form__input {
  /* A native select, not the theme's custom one: keyboard and assistive-technology support for
     free, and no script. Same decision as the collection page's sort control. */
  appearance: none;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 18px, calc(100% - 7px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------- radio groups */

.contact-form__group {
  border: 0;
  padding: 0 5px;
  margin: 0 0 24px;
}

.contact-form__options {
  display: flex;
  flex-wrap: wrap;
  /* Measured: 10px between the rows of options — the four-option group's area is 90px (40 + 10 +
     40) and the three-option group's is 40px, because three of them share one row. */
  row-gap: 10px;
}

.contact-form__option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Two or three to a row: the app lets the client set it per group, and the rendered option width
     is the only place it shows (465px against 310px). */
  width: calc(100% / var(--contact-option-columns, 2));
  height: 40px;
  /* Measured: 32px of left padding on the row, which is the room the control sits in. */
  padding-left: 32px;
  position: relative;
}

.contact-form__radio {
  position: absolute;
  left: 8px;
  /* DRAWN to the measured 20px control in that 32px gutter — see the note on `.contact-form__input`. */
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1px solid rgb(var(--contact-line-rgb) / 60%);
  border-radius: 50%;
  background: transparent;
}

.contact-form__radio:checked {
  border: 6px solid rgb(var(--contact-line-rgb));
}

.contact-form__radio:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.contact-form__option-label {
  font-size: 16px;
  color: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------------ submit */

.contact-form__submit {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 14px;
  border: 0;
  border-radius: 4px;
  background: rgb(20 21 21);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--surface-tile-light);
  cursor: pointer;
}

.contact-form__submit:hover {
  /* No invented palette: the button keeps its colour and brightens a little. */
  filter: brightness(1.25);
}

/* -------------------------------------------------------------- breakpoints */

@media (max-width: 47.99em) {
  .contact-form {
    margin: 20px 15px;
    padding: 20px;
  }

  /* One field to a row on a phone: 50% of 330px is not an input anyone can type an address into. */
  .contact-form__row-item,
  .contact-form__option {
    width: 100%;
  }

  .contact-form__option {
    padding-left: 0;
  }

  .contact-form__radio {
    position: static;
  }

  .contact-form__title {
    font-size: 26px;
    line-height: 36px;
  }
}