/* =========================================================================
   template-parts/forms/hiring-model-form.php
   Moved out of the partial's inline <style id="es-hireform-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

/* ── Field primitives ─────────────────────────────────────────
   These match the `.es-form__*` rules in section-contact.php rule for rule.
   They are restated here rather than shared because those live inside that
   partial's own <style> block, behind its ENSTACKED_CONTACT_CSS guard, and
   reusing that guard from here would suppress the whole contact stylesheet
   on any page that rendered this form first.

   A page carrying both partials therefore ships these declarations twice.
   They are identical, so nothing cascades wrong, but the real fix is to
   lift `.es-form__*` into utilities.css as a shared primitive. That touches
   a live money page's stylesheet, so it is flagged rather than done here. */
.es-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.es-form__field { margin-bottom: var(--space-3); }
.es-form__row .es-form__field { margin-bottom: var(--space-3); }

.es-form__field input,
.es-form__field select,
.es-form__field textarea {
  width: 100%;
  padding: 13px var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.es-form__field input::placeholder { color: var(--text-muted); }

.es-form__field input:focus,
.es-form__field select:focus,
.es-form__field textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(232, 93, 32, 0.12);
}

.es-form__field input.error { border-color: var(--brand-500); }

.es-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 17 Sep 2026: was `overflow-x: auto`, which also turned on overflow-y and
   drew a scrollbar beside the 78px widget. See assets/css/forms/es-forms.css. */
.es-form__captcha { overflow: visible; }

.es-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.es-form__legal {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

/* ── Hiring model group ───────────────────────────────────────
   A real fieldset, so the question and its options are one thing to a
   screen reader. The browser default border and padding are removed; the
   grouping is semantic, not visual. */
.es-hmf__group {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.es-hmf__legend {
  padding: 0;
  margin-bottom: var(--space-3);
  color: var(--text-heading);
  font-size: var(--fs-small);
  font-weight: var(--font-semibold);
  line-height: var(--lh-body);
}

.es-hmf__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

/* The label is a bare positioning context. Everything visible is the tile
   span inside it, which is what lets the selected state be expressed as
   `input:checked + .es-hmf__tile`: a plain adjacent-sibling selector that
   every browser has supported for twenty years.

   This was written as `.es-hmf__option:has(input:checked)` first. The rule
   parsed, and Element.matches() agreed the label matched it, but the paint
   never landed on this page: font-weight from that rule applied while
   border-color, background and color did not, and an identical rule
   injected last into <head> behaved the same way. Rather than ship a
   selected state that depends on winning that argument, the state moved
   onto the sibling combinator, which does not need :has() at all. */
.es-hmf__option {
  position: relative;
  display: block;
  cursor: pointer;
}

/* The control covers its own tile rather than being parked off screen: a
   control positioned far from its label makes the focus ring land
   somewhere else on the page in some browsers. Zero opacity keeps it in
   place, focusable, and the thing the pointer actually hits. */
.es-hmf__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* min-height holds the 44px touch target the brief sets even when the
   label wraps to one short line. */
.es-hmf__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-body);
  font-size: var(--fs-caption);
  font-weight: var(--font-medium);
  line-height: 1.2;
  text-align: center;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}

.es-hmf__option:hover .es-hmf__tile {
  border-color: var(--brand-400);
  color: var(--text-heading);
}

/* Selection is carried by border, ground AND weight, never colour alone. */
.es-hmf__option input:checked + .es-hmf__tile {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: var(--font-semibold);
}

/* The ring goes on the tile because the input itself is invisible. */
.es-hmf__option input:focus-visible + .es-hmf__tile {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .es-form__row { grid-template-columns: 1fr; }

  /* The three models stay on ONE LINE at every width. They were dropping to
     a full-width column here, which was wrong twice over: three stacked
     full-width bars read as three separate yes/no questions rather than one
     choice between three, and they pushed the submit button off the bottom
     of a phone screen. Three short labels side by side is the control this
     actually is.

     Only the horizontal padding gives way, since that is what runs out
     first: at 375px each tile has about 95px, and 16px a side left roughly
     60px for "Fixed Cost". A label that still cannot fit wraps to a second
     line inside the tile, which min-height already has room for. */
  .es-hmf__tile {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    hyphens: none;
  }
}
