/* Vivly Living — Enquiry page + HBP form restyle (Phase 8).
   No Figma frame — mirrors the Contact page's construction (contact.css
   .vl-contact/.vl-contact__cols); form values restate the settled WPForms
   treatment (css/form-embed.css) onto the HBP plugin's own markup, which is
   NOT WPForms markup (.hbp_input/.hbp_select/.hbp_check/#hbp_submit — real
   rendered markup captured from the live plugin, see the plan's ground-truth
   note). The plugin ships three GLOBAL stylesheets at default priority; this
   file loads later (priority 20) and out-specifics them via the
   .vl-enquiry-form scope. Markup: template-enquiry.php. Chip styling for the
   developments multi-select lives in css/enquiry-multiselect.css. */

.vl-enquiry {
    padding-block: 89px 100px; /* template-family band padding (contact.css .vl-contact) */
}

.vl-enquiry__cols {
    display: grid;
    /* Contact's 1:2 (spec §5) — proportional minmax(0,…) tracks, never fixed
       pixels (contact.css's 2026-07-29 lesson + the min-size-auto trap). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 100px;
    align-items: start;
}

.vl-enquiry__cols > *,
.vl-enquiry-form {
    min-width: 0; /* items shrink inside the tracks (min-width:auto trap) */
}

/* ── Page heading — NO hero at all (Liam live review 2026-07-31, iterated
   same day: page hero -> image + ink titleband -> titleband alone -> none;
   the Confirmation page's no-hero precedent). The context title sits on the
   form column in Contact's form-heading construction ("Send us a message"
   — contact.css .vl-contact__form-heading, values mirrored EXACTLY per
   Liam: display token, Regular base + semibold <strong>, the same -1.75px
   tracking, 70px gap to the form stepping 50/40 in the media blocks below).
   It is the page's single h1 (template-enquiry.php). */
.vl-enquiry__form-heading {
    margin: 0 0 70px; /* the sitewide 70px heading→content rhythm (contact.css) */
    color: var(--vl-black);
    font-weight: var(--vl-weight-regular);
    font-size: var(--vl-text-display); /* 70px */
    letter-spacing: -1.75px; /* Contact's node-exact tracking, mirrored per Liam ("same font size etc") */
    line-height: 1; /* = font-size (Liam, 2026-07-23: big headings) */
}

.vl-enquiry__form-heading strong {
    font-weight: var(--vl-weight-semibold);
}

/* ── HBP form: field grid ─────────────────────────────────────────────────
   The plugin renders a flat sequence inside <fieldset>; the fieldset itself
   becomes the grid. Natural placement (no `order` juggling — DOM order =
   visual order = tab order): First|Surname, Email|Phone, Budget|Developments,
   Buyer position|(empty half), then Message + checks full width. The
   half-empty buyer row is the odd-field-count remainder — flagged for
   Liam's live review. */
.vl-enquiry-form fieldset {
    display: grid;
    /* FOUR tracks, not two (Liam live review 2026-07-31, Renmore checkbox
       port): fields span 2 so the visual field pairs are unchanged, and the
       four marketing consents span 1 each — Renmore's four-up row. */
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px;
    row-gap: 30px; /* the WPForms forms' settled field rhythm (form-embed.css) */
    margin: 0;
    padding: 0;
    border: 0; /* fieldset UA default */
    min-width: 0; /* fieldsets have min-width:min-content by UA default — the same shrink trap, different spelling */
}

.vl-enquiry-form .hbp_input,
.vl-enquiry-form .hbp_select {
    grid-column: span 2; /* half the form — the pre-4-track pair layout */
    min-width: 0;
    margin: 0;
}

/* Chevron anchor — the wrapper, not the <select> (see the chevron block
   below for why). */
.vl-enquiry-form .hbp_select {
    position: relative;
}

/* Full-width rows: the Message textarea's wrapper, the PRIVACY checkbox
   (Renmore's own full-width call — it's the load-bearing consent), the
   marketing title, the status line and the submit row. The four MARKETING
   checks are NOT here — they auto-place one per track = Renmore's four-up
   row. (:has is 2023-baseline; without it the message and privacy row sit
   narrower — acceptable degradation.) */
.vl-enquiry-form .hbp_input:has(> textarea),
.vl-enquiry-form .hbp_check:has(#hbp_privacyPolicyAccepted),
.vl-enquiry-form .hbp_FormMarketingTitle,
.vl-enquiry-form .hbp_status,
.vl-enquiry-form .hbp_success_msg,
.vl-enquiry-form #hbp_submit {
    grid-column: 1 / -1;
}

/* ── Field order map (Liam live review 2026-07-31, on enabling the plugin's
   Plot field — it renders AFTER Buyer position in the plugin's fixed DOM):
   visual rows become First|Surname, Email|Phone, Developments|Plot,
   Budget to|Buyer position, then Message and the consent rows. Renmore's
   own technique (their template-forms.css order map). EVERY grid item
   carries an explicit order — an unordered (0) item would jump above the
   ordered ones. a11y note: tab order stays the plugin's DOM order, so focus
   hops within the Developments/Plot/Budget/Buyer cluster — Renmore shipped
   the same trade-off; the plugin's markup order isn't filterable. */
.vl-enquiry-form .hbp_input:has(#hbp_firstname)              { order: 1; }
.vl-enquiry-form .hbp_input:has(#hbp_surname)                { order: 2; }
.vl-enquiry-form .hbp_input:has(#hbp_contactemail)           { order: 3; }
.vl-enquiry-form .hbp_input:has(#hbp_primarycontactnumber)   { order: 4; }
.vl-enquiry-form .hbp_select:has(#hbp_developmentMultiSelect) { order: 5; }
.vl-enquiry-form .hbp_input:has(#hbp_plot)                   { order: 6; }
.vl-enquiry-form .hbp_input:has(#hbp_budgetTo)               { order: 7; }
.vl-enquiry-form .hbp_select:has(#hbp_buyerPosition)         { order: 8; }
.vl-enquiry-form .hbp_input:has(> textarea)                  { order: 9; }
.vl-enquiry-form .hbp_check:has(#hbp_privacyPolicyAccepted)  { order: 10; }
.vl-enquiry-form .hbp_FormMarketingTitle                     { order: 11; }
.vl-enquiry-form .hbp_check                                  { order: 12; } /* the four consents — DOM order holds among equals; privacy's own (0,3,0) rule above outranks this (0,2,0) */
.vl-enquiry-form #hbp_submit                                 { order: 13; }
.vl-enquiry-form .hbp_success_msg                            { order: 14; }
.vl-enquiry-form .hbp_status                                 { order: 15; }

/* ── Labels — 24/28 semibold, 5px above the field (form-embed values) ── */
.vl-enquiry-form .hbp_input label,
.vl-enquiry-form .hbp_select label {
    display: block;
    margin: 0 0 5px;
    color: var(--vl-black);
    font-size: var(--vl-text-card-title); /* 24px */
    font-weight: var(--vl-weight-semibold);
    line-height: 28px;
}

/* The plugin marks required with <span>*</span> inside the label. */
.vl-enquiry-form .hbp_input label span {
    color: var(--vl-brick);
}

/* ── Inputs / textarea / select — the settled field construction ── */
.vl-enquiry-form input[type="text"],
.vl-enquiry-form textarea,
.vl-enquiry-form select {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 20px;
    border: 1px solid var(--vl-brick);
    border-radius: 10px;
    background: var(--vl-white);
    color: var(--vl-black);
    font-family: inherit;
    font-size: var(--vl-text-body); /* 18px */
    resize: none;
}

.vl-enquiry-form input[type="text"],
.vl-enquiry-form select {
    height: 50px;
}

.vl-enquiry-form textarea {
    height: 150px; /* the WPForms forms' settled textarea height */
    padding-block: 15px;
}

/* Buyer-position select: same appearance-reset + chevron construction as
   the Developments-listing filters — COPY the select's appearance/
   background-image/padding-right declarations from css/dev-listing.css
   verbatim (restated here, scoped; keep its data-URI chevron).
   ⚠️ Ground-truth check (task-4 self-review): dev-listing.css's ACTUAL
   filter-select construction (.vl-listing-filters__select select /
   .vl-listing-filters__select::after, lines 263-301) is NOT a
   background-image on the select — it's an appearance-reset select plus a
   MASK-based ::after chevron anchored on the select's WRAPPER div (there
   because <select> elements don't reliably render ::after generated
   content). That wrapper pattern ports directly here: the plan's captured
   ground truth confirms .hbp_select IS itself a per-field wrapper div
   (label + select), structurally identical to .vl-listing-filters__select.
   So the appearance-reset below is copied verbatim onto the SELECT, and the
   chevron pseudo-element is copied verbatim onto the WRAPPER (.hbp_select,
   just above) — same visual result, correct anchor. Flagged for Liam:
   the brief's prose named background-image/background-position, but that
   pair doesn't exist in the source; this is the real construction it has. */
.vl-enquiry-form select {
    appearance: none; /* copied verbatim, dev-listing.css .vl-listing-filters__select select */
    -webkit-appearance: none; /* copied verbatim, dev-listing.css .vl-listing-filters__select select */
    -moz-appearance: none; /* copied verbatim, dev-listing.css .vl-listing-filters__select select */
    padding-right: 40px; /* copied verbatim, dev-listing.css: "padding: 0 40px 0 20px" — right clears the chevron */
}

/* Chevron — copied from dev-listing.css's .vl-listing-filters__select::after
   (lines 289-301: node vector 21x11, 9px in from the box's right edge). The
   right offset/size/mask are verbatim; the VERTICAL anchor is not — see the
   comment on `bottom`/`transform` below for why. Same data-URI chevron
   asset (assets/icon-chevron-down.svg). Note for Task 5:
   the Developments field is also a .hbp_select wrapper and will get this
   chevron too until Tom Select mounts and visually replaces its native
   control — harmless in the meantime, but worth a look once that lands. */
.vl-enquiry-form .hbp_select::after {
    content: '';
    position: absolute;
    /* Anchored to the SELECT's own 50px box via `bottom`, not `top: 50%` of
       the wrapper (dev-listing.css's anchor) — .vl-listing-filters__select
       wraps ONLY a select, so the wrapper's midpoint IS the select's
       midpoint; .hbp_select wraps a label (28px line-height + 5px margin =
       33px) ABOVE the select, so the wrapper is ~83px tall and `top: 50%`
       would centre the icon 41.5px down — 8.5px into the select box, ~16.5px
       above its true centre. The select sits flush with the wrapper's
       bottom edge, so its own vertical centre is 25px (half of 50px) above
       that edge. */
    right: 9px;
    bottom: 25px;
    width: 21px;
    height: 11px;
    transform: translateY(50%);
    background-color: var(--vl-ink);
    -webkit-mask: url("../assets/icon-chevron-down.svg") no-repeat center / contain;
    mask: url("../assets/icon-chevron-down.svg") no-repeat center / contain;
    pointer-events: none;
}

/* ── Checkboxes — Renmore's construction (their live template-forms.css,
   ported at Liam's live review 2026-07-31: 40×40 appearance-none box on a
   40px|label grid, 15px gap, SVG tick at 22×22), Vivly skin (brick 1px
   border, field radius; checked = solid brick + INK tick — the filled look
   Liam approved). Plugin ground truth (curl, task-4): shortcode_styles.css
   sets `.hbp_check { display: grid; width: 100%; grid-template-columns:
   6% 70%; column-gap: 1%; }` + `.hbp_check label { line-height: 1em; }` —
   our declarations below out-specific every one of them. */
.vl-enquiry-form .hbp_check {
    display: grid;
    grid-template-columns: 40px 1fr; /* Renmore's box|label geometry; beats plugin's 6% 70% */
    column-gap: 10px; /* 15 -> 10px (Liam live review 2026-07-31); beats plugin's column-gap: 1% */
    align-items: center;
}

.vl-enquiry-form .hbp_check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    border: 1px solid var(--vl-brick);
    border-radius: var(--vl-radius-field); /* 10px — the site field radius */
    background-color: var(--vl-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px; /* Renmore's tick scale */
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vl-enquiry-form .hbp_check input[type="checkbox"]:hover {
    border-color: var(--vl-brick-dark); /* the sitewide brick-hover deepen */
}

/* Checked: solid brick fill with an INK tick — the filled state Liam
   approved on the accent-color version, now explicit (Renmore's checked
   construction with Vivly colours; tick = their polyline at stroke 2.5). */
.vl-enquiry-form .hbp_check input[type="checkbox"]:checked {
    background-color: var(--vl-brick);
    border-color: var(--vl-brick);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332383B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.vl-enquiry-form .hbp_check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--vl-cornflower);
    outline-offset: 2px;
}

.vl-enquiry-form .hbp_check label {
    margin: 0;
    color: var(--vl-black);
    font-size: var(--vl-text-body);
    font-weight: var(--vl-weight-regular);
    line-height: 22px; /* neutralises plugin's `.hbp_check label { line-height: 1em; }` (shortcode_styles.css) */
    cursor: pointer;
}

.vl-enquiry-form .hbp_FormMarketingTitle {
    color: var(--vl-black);
    font-size: var(--vl-text-body);
    font-weight: var(--vl-weight-semibold);
    line-height: 22px; /* extra 10px top beat removed (Liam live review 2026-07-31) — the grid's 30px row-gap alone */
}

/* ── Submit — the sitewide brick pill (form-embed.css submit values) ──
   Plugin classes on the button: .update-button.button.button-primary. */
.vl-enquiry-form #hbp_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 200px;
    height: 50px;
    margin: 10px 0 0; /* +10px on the grid's 30px row-gap = 40px above the
                          button (Liam live review 2026-07-31) */
    padding: 0;
    border: 1px solid var(--vl-brick);
    border-radius: var(--vl-radius-pill);
    background: var(--vl-brick);
    color: var(--vl-white);
    font-family: inherit;
    font-size: var(--vl-text-nav);
    font-weight: var(--vl-weight-semibold);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vl-enquiry-form #hbp_submit:hover {
    background: var(--vl-brick-dark);
    border-color: var(--vl-brick-dark);
}

.vl-enquiry-form #hbp_submit:focus-visible,
.vl-enquiry-form input:focus-visible,
.vl-enquiry-form textarea:focus-visible,
.vl-enquiry-form select:focus-visible {
    outline: 2px solid var(--vl-cornflower);
    outline-offset: 2px;
}

/* ── Plugin status/error surface (Sending… / error messages) ── */
/* Hidden ENTIRELY while both message spans are empty (Liam live review
   2026-07-31: the empty div held a grid row + row-gap, inflating the gap
   after the Send button on every breakpoint). The plugin writes
   "Sending...." during submit and error text on failure — the :has guards
   bring the row back exactly then. Success never renders here: submission
   redirects to /thank-you/ (the plugin's hbp_redirectURL). Without :has
   support the div stays hidden — acceptable degradation: the button
   re-enables on failure either way. */
.vl-enquiry-form .hbp_status {
    display: none;
}

.vl-enquiry-form .hbp_status:has(.hbp_status_msg:not(:empty)),
.vl-enquiry-form .hbp_status:has(.hbp_error_msg:not(:empty)) {
    display: block;
}

.vl-enquiry-form .hbp_status_msg,
.vl-enquiry-form .hbp_success_msg {
    color: var(--vl-black);
    font-size: var(--vl-text-body);
    line-height: 22px;
}

.vl-enquiry-form .hbp_error_msg {
    color: #D63637; /* the WPForms forms' invalid red (form-embed.css) */
    font-size: var(--vl-text-body);
    line-height: 22px;
}

/* ── Sticky-zone props (CLAUDE.md rule — inert today: the tab is hidden on
   this template, but set per convention like contact.css does). ── */
body.page-template-template-enquiry-php .vl-sticky-zone {
    --vl-sticky-wait: 89px;
    --vl-sticky-stop: 100px;
}

/* ── Tablet (≤1024): single column, FORM FIRST (Contact's call — the card
   is reference info; contact-card.css carries the card's own order:2). ── */
@media (max-width: 1024px) {
    .vl-enquiry__form-heading {
        margin-bottom: 50px; /* display token steps 70 -> 52 here; the gap steps with it (contact.css) */
    }

    .vl-enquiry__cols {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .vl-enquiry__form {
        order: 1;
    }

    .vl-enquiry-form fieldset {
        /* TWO tracks, not 1fr: the span-2 fields fill the row (= stacked,
           as before), and the span-1 marketing consents pair up 2×2 —
           Renmore's four-up row adapted to the stacked tablet form. A
           1-track grid would force IMPLICIT columns under the span-2
           items and break the layout. */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Mobile (≤767) ── */
@media (max-width: 767px) {
    .vl-enquiry__form-heading {
        margin-bottom: 40px; /* sitewide mobile heading→content gap (contact.css) */
    }

    .vl-enquiry {
        padding-block: 60px; /* sitewide mobile section padding */
    }

    .vl-enquiry__cols {
        gap: 50px;
    }

    .vl-enquiry-form #hbp_submit {
        justify-self: stretch;
        width: 100%;
    }

    /* Marketing consents stack full-width on mobile (Renmore's own ≤767
       rule) — the 2×2 tablet pairing releases here. */
    .vl-enquiry-form .hbp_check {
        grid-column: 1 / -1;
    }

    body.page-template-template-enquiry-php .vl-sticky-zone {
        --vl-sticky-wait: 60px;
        --vl-sticky-stop: 60px;
    }
}