/*
 * vanbusiness168.ca static rebuild -- small additions on top of the ported live-site CSS.
 * These are NEW rules for markup that didn't exist verbatim on the live site (e.g. the
 * hand-built contact/lead-generation forms, which the live site built via SP Page Builder's
 * "Ajax Contact"/"Form Builder" addons with their own generated CSS we didn't port 1:1).
 * Kept deliberately minimal and scoped so the ported cascade still does most of the work.
 */

/* Global "preset"/theme rules NOW LIVE IN assets/css/theme.css (see that file's header
 * comment — a prior pass here captured a since-fixed pre-restore styling regression and
 * shipped the wrong #f5f5f5 light-theme values; superseded 2026-07-10). */

/* Confirmed 2026-07-10 via live computed style: the logo sits directly below the hero title
 * with NO negative margin (wrapper margin-top:0px, full-width wrapper around a naturally
 * small 142x77 image) -- a prior "-40px" pull-up value was a guess that doesn't match the
 * live site and was pushing the whole hero content block 50px short. The remaining 10px
 * (each SP Page Builder addon gets its own "sppb-addon-wrapper" with a small per-instance
 * margin-bottom we don't reproduce 1:1 -- confirmed 10px on the hero title's wrapper) is
 * bridged here since it's this element's own gap-before, not the title's gap-after. */
.logo-overlay { padding-top: 10px; }
/* zh/zh-tw home has an extra h4 subtitle addon between the h2 and the logo (en does not) --
 * confirmed 2026-07-10 the h4-to-logo gap needs ~20px more there than the h2-to-logo gap on en. */
body.zh .logo-overlay, body.zh-tw .logo-overlay { padding-top: 20px; }
.banner-block { position: relative; }

.sppb-icon-grid { display: flex; flex-wrap: wrap; }

/* Confirmed 2026-07-10 from live computed style (both contact-jack and for-buyer): section
 * padding is 50px (not 60px) and the heading's own margin-bottom is 30px (not the site.css
 * default 10px) -- together these closed a ~110px per-page shortfall. */
.contact-section, .lead-form-section { padding: 50px 0; }
.contact-section h2.sppb-addon-title,
.lead-form-section h2.sppb-addon-title { margin-bottom: 30px; }
/* Additional per-addon-block spacing (SP Page Builder gives every addon its own wrapper
 * margin-bottom, generated per-instance, plus a per-column bottom gap we don't reproduce
 * 1:1; bridged empirically with padding -- doesn't collapse like margin does -- to match the
 * observed ~110px live gap between the heading block and the form block below it). */
.contact-section .sppb-addon-header,
.lead-form-section .sppb-addon-header { padding-bottom: 80px; }
.lead-form-section .sppb-addon-text-block { margin-bottom: 30px; }
/* contact-jack/peter specifically (Ajax-Contact addon) nests the form in what the live DOM
 * shows as an EXTRA "Row/Section" addon layer around just the form (its own 50px pad-bottom
 * + the outer addon-wrapper's own 30px margin-bottom = 80px more spacing after the form than
 * for-buyer/for-seller have -- confirmed by comparing form-bottom-to-footer gaps directly:
 * contact-jack orig 130px vs for-buyer orig 80px, same-ish outer section padding on both). */
.contact-section .sppb-addon-form-builder { margin-bottom: 60px; }
/* Field widths/borders/padding/focus states now come from the REAL .sppb-form-control class
 * (already present in the ported site.css, class added to every input/select/textarea in
 * pages.js 2026-07-10) -- matches the live site's actual field styling instead of a hand-
 * rolled approximation. .sppb-form-row is our own structural wrapper (the live site achieves
 * the same 2-per-row layout via per-field addon-instance inline widths we don't reproduce
 * 1:1; this flex wrapper is visually equivalent). */
.sppb-form-row { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 4px; }
/* flex-basis:0 + min-width:0 (not a fixed px basis) so the two fields always split the row
 * evenly and never hit the flex-wrap cliff at narrow (390px mobile) widths -- confirmed via
 * live mobile screenshot 2026-07-10 the fields stay 2-per-row all the way down to 390px. */
.sppb-form-row .sppb-form-group { flex: 1 1 0; min-width: 0; }
.sppb-form-group-full { width: 100%; }
.sppb-form-group label { display: block; margin-bottom: 6px; font-weight: 500; }
/* Real site.css only sets this 150px textarea height when the ancestor also carries
 * ".sppb-addon-form-builder-form" -- that class also makes the ancestor a flex container
 * with "width:100%" form-groups, which fights our own .sppb-form-row layout, so we don't
 * add it to <form>; instead set the same 150px height directly here (matches live). */
.sppb-form-group textarea.sppb-form-control { height: 150px; }
.form-status { margin-top: 12px; font-size: 14px; }
.form-status.ok { color: #2e7d32; }
.form-status.error { color: #c62828; }
.g-recaptcha { display: inline-block; min-height: 78px; }

/* Contact page (Ajax-Contact addon) vs for-buyer/for-seller (Form-Builder addon) render
 * with DIFFERENT default text colors on the live site's dark (#454c5e) page background --
 * confirmed by computed-style inspection of the current live site 2026-07-10: contact-jack's
 * heading + field labels are white (rgb(255,255,255)); for-buyer/for-seller's heading is
 * near-black (rgb(18,18,18)) and its labels/intro are mid-gray (rgb(119,119,119)) -- a real,
 * intentional-looking low-contrast styling difference between the two addon types on the
 * live site, reproduced as-is rather than "fixed", per the task's match-exactly bar. */
.contact-section h2.sppb-addon-title,
.contact-section .sppb-form-group label {
  color: #ffffff;
}
.lead-form-section h2.sppb-addon-title {
  color: #121212;
}
.lead-form-section .sppb-addon-text-block,
.lead-form-section .sppb-form-group label {
  color: #777777;
}

/* Home page "Recommend Business"/"Restaurant for Sale" iframe-section headers: confirmed
 * white on the live site's dark bio-color background (rgb(255,255,255) via computed style +
 * direct screenshot 2026-07-10) -- legible, not a white-on-white bug (an earlier pass here
 * had documented this as an "invisible, not missing" deviation based on a since-fixed
 * pre-restore capture; that note is now stale and superseded). */
.section-header-white h2.sppb-addon-title { color: #ffffff; }
/* Confirmed 2026-07-10: live gap between this heading and the iframe below it is ~30px, ours
 * was only ~10px -- same per-addon "sppb-addon-wrapper" spacing pattern found on the hero
 * title/contact form heading elsewhere on this page; bridged with padding (doesn't collapse). */
.section-header-white { padding-bottom: 20px; }

.full-iframe-section iframe,
.view-map-search iframe { display: block; }

/* Confirmed 2026-07-10 via live mobile (390px) screenshot: the contact/lead-gen forms stay
 * 2-per-row even on mobile (First/Last, Phone/Email columns don't stack to 100%) -- an
 * earlier pass here forced single-column below 767px, which was never verified against a
 * real mobile capture and added ~150-300px of extra height per form page. Removed. */
@media (max-width: 767px) {
  .sppb-form-row { gap: 12px; }
}
/* KNOWN OPEN GAP (see PROGRESS.md): at 390px mobile, live contact/lead-form pages show ~57px
 * more space between the header and the heading than our build (section padding itself is
 * confirmed 50px 0 on both -- same as desktop -- so the gap is elsewhere, not yet localized).
 * Total-page-height is not a reliable signal here since these pages also carry a real
 * Google reCAPTCHA iframe whose rendered height is genuinely non-deterministic (loads a
 * taller "language picker" error state on some runs) -- don't fit this rule to that noise. */