/*
 * vanbusiness168.ca — global "template style" theme block.
 *
 * IMPORTANT PROVENANCE NOTE (2026-07-10): this entire file was extracted from the CURRENT
 * live site's per-page rendered inline <style> tag (the tail portion after the page-specific
 * SP Page Builder addon rules) -- confirmed byte-for-byte identical across every page and
 * every language (home, contact, cafe, etc.) except the h1 font-family, which is handled
 * below via body-language classes instead. This is Helix3's per-template-style "custom
 * code"/color-preset output (#__template_styles rows), rendered dynamically per request --
 * there is no static file for it, so it must be captured from a rendered page, not linked.
 *
 * SUPERSEDES prior (WRONG) values in rebuild-extra.css: a previous build pass captured the
 * site during a since-fixed styling regression (Barry restored a 30-day-old SiteGround
 * backup on 2026-07-10) and shipped a light/gray theme (#sp-top-bar/#sp-bottom: #f5f5f5).
 * The restored, CURRENT live site is a DARK theme (see values below) -- re-verified directly
 * against https://vanbusiness168.ca/ post-restore. Do not reintroduce the #f5f5f5 values.
 */

body { font-family: ABeeZee, sans-serif; font-weight: normal; }
h2, h3, h4, h5, h6 { font-family: ABeeZee, sans-serif; font-weight: normal; }
.sp-megamenu-parent { font-family: ABeeZee, sans-serif; font-weight: normal; }

/* h1 font-family is language-specific on the live site (per-template-style row) */
body.en h1 { font-family: "Bowlby One SC", sans-serif; font-weight: normal; }
body.zh h1, body.zh-tw h1 { font-family: "ZCOOL QingKe HuangYou", sans-serif; font-weight: normal; }

#sp-header { background-color: #454c5e; }
#sp-main-body { background-color: #454c5e; }
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li:hover > a { color: white !important; }
.sp-megamenu-parent > li > a { color: #acacac; padding: 0 7px; }
#sp-top-bar { background: #3c465a; }
#sppb-addon-1496615652750,
#sppb-addon-1608151674372,
#sppb-addon-1608151674369,
#sppb-addon-1608151674366 { background-color: #454c5e; }
.hi-icon .sppb-icon .sppb-icon-container { background-color: #454c5e !important; }
.btn-primary, .sppb-btn-primary { background-color: #25303d !important; border-color: #25303d !important; }
.btn-primary, .sppb-btn-primary:hover { background-color: #25303d !important; border-color: #25303d !important; }
h1.logo a, #sp-logo .sp-column h1.logo a { color: #2998cc; }
/* NOTE: the live site's ".offcanvas-inner .sp-module:last-child{display:none}" rule hides a
 * SECOND (duplicate/stray) module the live Helix offcanvas renders after the real nav menu.
 * Our offcanvas markup (templates.js offcanvasNav()) only ever emits ONE module (the nav
 * itself), so that rule would hide our entire menu (it's both first- and last-child) --
 * deliberately dropped rather than ported verbatim. See root-cause taxonomy bucket 4
 * (markup/version drift): same visual intent, bridged to our simpler markup instead. */
.sp-copyright a:last-child { display: none; }
@media (min-width: 1400px) {
  .container { max-width: 1140px; }
}
#sp-bottom { padding: 40px 0 80px; }

/* #sp-page-title: an empty Helix "page title" section that renders with ZERO height on
 * desktop but a real 57px on mobile (confirmed globally, every page type, 390px viewport) --
 * no matching CSS rule found in the pulled site.css (likely computed by the live theme's own
 * JS layout code we don't have), so bridged directly here rather than reverse-engineered. */
@media (max-width: 767px) {
  #sp-page-title { height: 57px; }
}

/* MyGoodReal iframe responsive height override -- CONFIRMED 2026-07-10 the live site actually
 * has THREE height tiers for these iframes depending on viewport, not one static value:
 *   >= ~900px (desktop): the literal `height` HTML attribute (435/1280/2420/2750/3500/1000 --
 *     already configured per page in build/generate.js and build/pages.js)
 *   431-768px ("tablet"): 3250px !important (this rule, from the real site.css)
 *   <= 430px (phone): 800px !important, via JS `onload="iFrameHeight(this)"` setting an
 *     inline style (which is why it wins even over the 3250px !important rule above at
 *     narrower widths) -- we don't have that live JS (cross-origin/compromised-server
 *     caution, see PROGRESS.md), so bridged with a plain CSS media query on the iframe's
 *     real id="blockrandom" (a literal, non-unique id the live site itself uses on every
 *     one of these iframes -- added to every <iframe id="blockrandom"> in build/pages.js). */
@media (max-width: 768px) {
  .responsive-page iframe,
  #blockrandom { height: 3250px !important; }
}
@media screen and (max-width: 430px) {
  #blockrandom { height: 800px !important; }
}