/* enquiry component — GENERATED by tools/make-fixtures.py --emit-components
   from the same source ranges as widgets/enquiry/fixture.html
   (../../site/css/shared-responsive.css + ../../site/css/blocks-responsive.css + build/css/responsive.css via fixtures.config.json). Byte-identical rules are
   the contract: edit the stage-2 source and regenerate, never this file. */
/* == enquiry == STAGE 2. THE CONTACT FORM. A phone gets ONE column: the fields are full width with their
   labels above, the Yes/No pair takes its own row, the textarea is full width and the submit button spans the
   card (≤600). From 900 the two-column field rows return (each field 50% minus half the 48 gap); from 1500 the
   stage-1 composition exactly — the 951 column at margin-left 245, 677 intro, 395 fields, 838 textarea, 238
   button and every stage-1 height pin — so verify at 1600 sees stage 1. The card's paint (white ground, 1px
   gold inset ring) and the controls' paint (cream ground, gold inset ring, placeholder colour) are the same at
   every width; only the boxes move. */

.s-enquiry {
  /* this section's own rhythm, clamped from its stage-1 values (no global spacing token) */
  --gap-50: clamp(30px, 1.65289vw + 23.6037px, 50px);   /* form: intro → card */
  --gap-40: clamp(24px, 1.32231vw + 18.893px, 40px);    /* card / fields / rows, and a stacked row's own gap */
  --card-pad-y: clamp(20px, 1.73554vw + 13.2814px, 41px);
  --card-pad-x: clamp(20px, 3.05785vw + 8.12438px, 57px);
  padding: var(--gap-section) 0;   /* the band's own 80 above the form; --gap-section peaks at 80 at 1600 */
  background: var(--c-cream);
}

/* INSTANCE 12640:358 — a centred column. Below 1500 the column IS the .container: the stage-1 951/245 pins
   are a desktop device and would leave the card off-centre in a narrower container. */
.enquiry-form { display: flex; flex-direction: column; align-items: center; gap: var(--gap-50); width: 100%; margin: 0 auto; }   /* centred once it is capped at the design's 951 */

/* Frame 199 — title + lede, both capped at the design's 677 and centred by the form's counter axis */
.enquiry__intro { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 677px; }
.enquiry__title { text-align: center; }   /* stacked, the heading no longer fills its column — measured 286.7 of ink in a 349.9 box at 390 — so left-aligning it left 63px of slack on the right under a centred lede (QA 12.8, developer #10). Restored to start at 1200, where the design's column takes over. */
.enquiry__lede { text-align: center; }

/* Frame 176 — the white card. The stroke is an inset ring, never a border: a real border would eat the
   content width and re-wrap every field (GOTCHAS). Padding is fluid down to 20 on a phone. */
.enquiry__card {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-40);
  width: 100%;
  padding: var(--card-pad-y) var(--card-pad-x);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gold);
}
.enquiry__fields { display: flex; flex-direction: column; gap: var(--gap-40); width: 100%; }
.enquiry__rows   { display: flex; flex-direction: column; gap: var(--gap-40); }
/* one column below 900: the row is a stack and its gap is the same 40 rhythm as the gap between rows */
.enquiry__row    { display: flex; flex-direction: column; gap: var(--gap-40); }

.enquiry__field { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.enquiry__label { display: block; }   /* no nowrap: the longest label is 54.55 in the design's 395 column and ~210 at 320 — nothing to guard, and it trapped longer labels (stage 1 carries the measurement) */

/* "Entry Field": cream ground, the same 1px gold inset ring, the placeholder run 20 in and 13 down. Height is
   NOT pinned below 1500 — the box is padding 13/14 + one --t-body-lh line, i.e. 54 on a phone and exactly the
   stage-1 58 at 1600 — and 54 already clears the 44 tap-target bar. */
.enquiry__input {
  width: 100%;
  padding: 13px 20px 14px;
  background: var(--c-cream);
  border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--c-gold);
}
.enquiry__input::placeholder { color: var(--c-placeholder); opacity: 1; }   /* Firefox dims a placeholder by default */
.enquiry__textarea { display: block; padding: 13px 20px; resize: none; }    /* rows="5" sets the height below 1500 */

/* Frame 214 — the Yes/No pair. Fixed 27/23 text boxes and the 27x25 gold box are the design's own small
   metrics and do not scale; only their row position changes. */
.sample { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }   /* wraps rather than run off a narrow card */
.sample__option { display: flex; align-items: center; gap: 10px; }
.sample__text {
  flex: none;
  line-height: 21px;   /* Figma's own line height for "Yes" (its box is 27×21) */
  font-weight: 400; letter-spacing: var(--ls-body); color: var(--c-bronze);
  white-space: nowrap;
}
.sample__option--no .sample__text { line-height: 20px; }   /* Figma's second text is 20 tall, not 21 */
.sample__box {
  flex: none; width: 27px; height: 25px; margin: 0;   /* fixed: the design's 27×25 tick box (12640:216), a control with no content */
  appearance: none; -webkit-appearance: none;
  background: var(--c-cream);
  border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--c-gold);
  cursor: pointer;
}
/* CHECKED: the form set's second and third variants (12626:425 / :426) draw a 10×8 gold tick (VECTOR 12626:344,
   stroke 1.125, round caps) at (9,9) in the 27×25 box — exported as enquiry-check.svg, whose render bounds are
   12×10, so it sits at 8,8. The first build invented a gold fill (developer ticket 9). LONGHANDS on purpose: a
   `background` shorthand resets background-clip, and below 1024 the box's tap-target border relies on
   padding-box clipping — the shorthand painted the whole 45px hit area (the big gold square in the ticket). */
.sample__box:checked {
  background-image: url("../img/enquiry-check.svg");
  background-position: 8px 8px; background-size: 12px 10px; background-repeat: no-repeat;
}
.sample__box:disabled { opacity: 0.45; cursor: not-allowed; }   /* the fifth sample once four are chosen (WordPress widget) */

/* the sample picker — hidden until "Yes"; the design's rows wrap naturally at gap 20 / 26 in the 838 column */
.enquiry__samples { display: none; }
.enquiry__card:has(input[name="sample"][value="Yes"]:checked) .enquiry__samples { display: flex; }
.picks { display: flex; flex-wrap: wrap; column-gap: 26px; row-gap: 20px; }
.pick { cursor: pointer; }
.sample__box:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 2px; }

/* the submit button spans the card on a phone; from 600 it is its natural width (the label plus the button's
   padding — 241 at the design width against Figma's 238), centred by the card's counter axis */
.enquiry__submit { width: 100%; }

/* Tap targets below 1024: sweep measures the radio INPUT (a <label for> only EXTENDS a control that already
   has a box), and 25px is under the 44 bar. A transparent 10px block border grows the hit box to 45 without
   moving a painted pixel — an inset box-shadow is clipped to the PADDING box, so the gold ring still draws the
   27x25 rectangle — and background-clip keeps the cream inside that same rectangle. The −10px block margin
   hands the border back to the layout, so the pair's row stays 25 tall and the 10px gap after "Yes" is
   unchanged. A max-width query on purpose: at 1600 this device must not exist (a 45px border box would be a
   geometry row against stage 1), and undoing it upward would take four resets. The same 9px inline border
   takes the target to 45 WIDE: the −9px inline margin gives it back, so "Yes" still sits 10 from the ring and
   the 30 between the two options is untouched. Measured at 390/900/1023: hit box 45x45, painted ring 27x25. */
@media (max-width: 1023.98px) {
  .sample__box {
    width: 45px; height: 45px;
    border: 10px solid transparent; border-inline-width: 9px;
    margin: -10px -9px;
    background-clip: padding-box;
  }
}

@media (min-width: 600px) { .enquiry__submit { width: auto; } }

/* from 900 the two-column field rows return: 395 + 48 + 395 = 838 at 1600, i.e. 50% minus half the gap */
@media (min-width: 900px) {
  .enquiry__row { flex-direction: row; align-items: flex-start; gap: var(--gap-48); }
  .enquiry__field { flex: 1 1 0; min-width: 0; }   /* two equal columns of the card's content width */
  .enquiry__field--message { width: 100%; }
}

@media (min-width: 1200px) {
  /* the trailing track escapes the box so the design's own 677 column holds this title on one line (stage 1's
     comment carries the measurement); below 1200 the column is gone and it wraps as any heading does */
  .enquiry__title { margin-right: calc(-1 * var(--ls-title)); text-align: start; }   /* start from here: at 1200+ the run fills the design's column (ink 683.6 in a 677 box at 1600), so centring would move every glyph off the design */
}

/* the full desktop composition: every stage-1 value, so 1600 reproduces stage 1 exactly */
@media (min-width: 1600px) {
  .s-enquiry { padding: 80px 0; }                                  /* the band's 80 above the form and 80 below it (1013 = 80 + 853 + 80) */
  .enquiry-form { gap: 50px; max-width: 951px; }                   /* centred in the container; Figma rounded the true 324.5 to 325 */
  .enquiry__intro { gap: 10px; max-width: 677px; }
  .enquiry__card { gap: 40px; padding: 41px 57px 41px 56px; }      /* Figma pads inside the stroke */
  .enquiry__fields { gap: 40px; }
  .enquiry__rows { gap: 40px; }
  .enquiry__row { gap: 48px; }                                     /* 395 + 48 + 395 = the card's 838 */
  .enquiry__field--message { width: 100%; }
  .enquiry__textarea { height: 188px; }                            /* the design's message box (838×188) — a control's box, its content scrolls; rows="5" sizes it below this width */
}


/* ==== hand-maintained widget-phase additions (widgets/enquiry/wp-extra.css) ==== */
/* enquiry — WIDGET-PHASE rules: Contact Form 7 renders OUR field template inside the card, wrapped in its own
   elements; these make the wrappers transparent to the card's flex column and give CF7's radio markup the
   stage-2 .sample paint. Every value mirrors 12-enquiry.responsive.css. */
.enquiry__card > form, .enquiry__card .wpcf7, .enquiry__card form.wpcf7-form { display: contents; }
.enquiry__card .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.enquiry__card .wpcf7-form-control-wrap { display: block; width: 100%; }
.enquiry__card .wpcf7-spinner { display: none; }
.enquiry__card .wpcf7-form.submitting .wpcf7-spinner { display: block; }
.enquiry__card .wpcf7-response-output { width: 100%; margin: 0; padding: 13px 20px; border: 0; box-shadow: inset 0 0 0 1px var(--c-gold); color: var(--c-bronze); }
.enquiry__card .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: var(--t-small); line-height: var(--t-small-lh); color: #b3261e; }
/* CF7's radio: <span.wpcf7-radio.sample><span.wpcf7-list-item><label><input><span.wpcf7-list-item-label> — the
   design reads "Yes [ ]", so the label row is reversed; the inputs take the .sample__box paint verbatim */
.wpcf7-radio.sample { display: flex; align-items: center; gap: 30px; }
.wpcf7-radio.sample .wpcf7-list-item { display: flex; margin: 0; }
.wpcf7-radio.sample label { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; cursor: pointer; }
.wpcf7-radio.sample .wpcf7-list-item-label { flex: none; line-height: 21px; font-weight: 400; letter-spacing: var(--ls-body); color: var(--c-bronze); white-space: nowrap; }
.wpcf7-radio.sample .wpcf7-list-item.last .wpcf7-list-item-label { line-height: 20px; }
.wpcf7-radio.sample input[type="radio"] { flex: none; width: 27px; height: 25px; margin: 0; appearance: none; -webkit-appearance: none; background-color: var(--c-cream); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--c-gold); cursor: pointer; }
.wpcf7-radio.sample input[type="radio"]:checked, .wpcf7-checkbox.picks input[type="checkbox"]:checked {
  /* the design's tick, as .sample__box:checked — longhands, so the phone tap target keeps its padding-box clip */
  background-image: url("../img/enquiry-check.svg"); background-position: 8px 8px; background-size: 12px 10px; background-repeat: no-repeat;
}
/* the sample picker in CF7's checkbox markup: <span.wpcf7-checkbox.picks><span.wpcf7-list-item><label><input>
   <span.wpcf7-list-item-label> — the same row-reversed pair and the same box as the Yes/No radios */
.wpcf7-checkbox.picks { display: flex; flex-wrap: wrap; column-gap: 26px; row-gap: 20px; }
.wpcf7-checkbox.picks .wpcf7-list-item { display: flex; margin: 0; }
.wpcf7-checkbox.picks label { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; cursor: pointer; }
.wpcf7-checkbox.picks .wpcf7-list-item-label { flex: none; line-height: 21px; font-weight: 400; letter-spacing: var(--ls-body); color: var(--c-bronze); white-space: nowrap; }
.wpcf7-checkbox.picks input[type="checkbox"] { flex: none; width: 27px; height: 25px; margin: 0; appearance: none; -webkit-appearance: none; background-color: var(--c-cream); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--c-gold); cursor: pointer; }
.wpcf7-checkbox.picks input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
.wpcf7-checkbox.picks input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 2px; }
.wpcf7-radio.sample input[type="radio"]:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 2px; }
@media (max-width: 1023.98px) {
  .wpcf7-radio.sample input[type="radio"], .wpcf7-checkbox.picks input[type="checkbox"] { width: 45px; height: 45px; border: 10px solid transparent; border-inline-width: 9px; margin: -10px -9px; background-clip: padding-box; }
}
/* the submit is an <input> here (CF7), not a <button>. An input has no flex items, so the button family's
   align/justify do nothing; text-align: center is what centres its value the way the <button> label centres. */
input.enquiry__submit { text-align: center; }