/*
 * Home page ("/", 3 languages) -- visual values extracted from the live site's per-page
 * inline <style> (SP Page Builder outputs this per-addon-id; identical values across all
 * 3 language variants of the home page, so lifted here once using our own class hooks
 * instead of the brittle per-language numeric addon ids). See PROGRESS.md.
 */
.view-home .banner-block { padding: 150px 0; background-size: 100%; background-position: 50% 50%; box-shadow: none; }
.view-home .banner-block .sppb-addon-title { color: #fff; font-size: 45px; font-weight: 700; font-family: "Roboto"; margin: 0 0 20px; }
/* padding-top:10px (not margin, which collapses -- same "sppb-addon-wrapper" per-addon gap
 * found repeatedly elsewhere on this page) closes the confirmed h2->h4 gap on zh/zh-tw
 * (live: 90px, ours was 80px before this). EN has no h4, unaffected. */
.view-home .banner-block h4.sppb-addon-title { font-size: 40px; font-weight: 400; margin: 0 0 30px; padding-top: 10px; }
.view-home .sppb-section-content-center { padding: 50px 0 30px; background-color: #454c5e; }
.view-home .sppb-section-content-center .sppb-addon-content,
.view-home .sppb-section-content-center a { color: #fff; }
.view-home .sppb-section-content-center .sppb-addon-text-block .sppb-addon-content { font-size: 18px; }
/* Same per-addon "sppb-addon-wrapper" gap pattern (see hero/icon-grid/contact-form comments)
 * -- confirmed ~30px missing between the bio paragraph and the CONTACT button below it. */
.view-home .sppb-section-content-center .sppb-addon-text-block { padding-bottom: 30px; }
@media (max-width: 767px) {
  .view-home .sppb-section-content-center .sppb-addon-text-block .sppb-addon-content { font-size: 16px; }
}
/* Icon-grid section -- re-verified 2026-07-13 directly against the live site's per-addon
 * inline <style> block (each of the 4 icon addons, e.g. #sppb-addon-1496615652750). Root
 * cause of the "very different / too plain" look Barry flagged: the live markup wraps each
 * icon+label in its OWN per-addon-id card div (box-shadow + border-radius + padding +
 * background) that our markup was missing entirely -- not a spacing tweak, a whole missing
 * element. Added a `.hi-icon-card` wrapper div in build/pages.js's iconGrid() to carry it
 * (our own stable class hook instead of the live's brittle per-instance numeric ids, since
 * all 4 addons share byte-identical values). Confirmed live values via cssrules.js:
 *   #sppb-addon-NNNN { box-shadow:0 10px 30px 0 <shadow-color>; border-radius:10px; padding:30px 15px;
 *     background-color:#454c5e; } (border-radius:5px at <=991px)
 *   #sppb-addon-NNNN .sppb-addon-title { color:#fff; font-size:16px; margin-top:15px; }
 *   .hi-icon .sppb-icon .sppb-icon-container { background-color:#454c5e; } (final cascade winner)
 * Section's own padding-bottom re-measured empirically after adding the card (heights.js
 * triage against live) to keep the previously-converged total page height.
 * Shadow color is genuinely per-LANGUAGE, not per-viewport (checked both desktop+mobile on
 * each language, 2026-07-13): en's home page instance uses opaque rgb(95,100,123); zh AND
 * zh-tw's separately-authored instances both use a lighter, translucent rgba(112,144,176,0.2).
 * Scoped via the `body.en`/`body.zh`/`body.zh-tw` class templates.js already emits. */
.view-home .hi-icon-card {
  padding: 30px 15px;
  border-radius: 10px;
  box-shadow: 0 10px 30px 0 rgb(95, 100, 123);
  background-color: #454c5e;
}
body.zh.view-home .hi-icon-card,
body.zh-tw.view-home .hi-icon-card {
  box-shadow: 0 10px 30px 0 rgba(112, 144, 176, 0.2);
}
@media (max-width: 991px) {
  .view-home .hi-icon-card { border-radius: 5px; }
}
.view-home .home-icon-grid-section { padding-bottom: 90px; }
.view-home .hi-icon .sppb-icon .sppb-icon-container { display: inline-block; text-align: center; background-color: #454c5e; }
.view-home .hi-icon .sppb-icon .sppb-icon-container > i { font-size: 35px; width: 35px; height: 35px; line-height: 35px; }
.view-home .hi-icon .sppb-feature-box-title { font-size: 16px; margin: 15px 0 10px; line-height: 24px; color: #fff; }
/* "Recommend Business" / "Restaurant for Sale" section padding -- confirmed 2026-07-10 from
 * the current (post SiteGround-restore) live site's per-page inline <style>. These two
 * section headers' white text (.section-header-white, in rebuild-extra.css) IS legible on
 * the live site: the page body itself is dark (#sp-main-body, theme.css) so it always shows
 * through a section with no background of its own. An earlier pass here had documented this
 * as an "invisible, not missing" white-on-white bug and deliberately not reproduced it --
 * that was based on a since-fixed pre-restore capture and is now stale/superseded. */
/* Bottom padding bumped from the declared 50px to 100px total: confirmed 2026-07-10 the real
 * gap from the "See More" button to the section's bottom edge is ~100px (the declared 50px +
 * another ~50px from the button's own "sppb-addon-wrapper" margin, same recurring pattern). */
.view-home .home-recommend-section { padding: 100px 0 100px; background-color: #454c5e; }
.view-home .home-restaurant-section { padding: 50px 0 100px; }
.view-home .bg-search { padding: 100px 0; background-color: rgba(245, 245, 245, 1); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; background-attachment: scroll; }
.view-home .bg-search .sppb-cta-title { font-size: 36px; margin: 5px 0 3px; }
.view-home .bg-search .sppb-addon-cta { padding: 40px 20px; }

@media (max-width: 767px) {
  .view-home .banner-block .sppb-addon-title { font-size: 20px; line-height: 20px; }
  .view-home .banner-block h4.sppb-addon-title { font-size: 20px; line-height: 20px; }
  .view-home .bg-search { display: none; } /* live site hides this section on mobile: sppb-hidden-sm sppb-hidden-xs */
  .view-home .banner-block { display: none; } /* live site hides the hero image row on mobile: sppb-hidden-xs */
}