/*
 * site-engine.css — base layout for rebuilt studio pages (website_pages), used with /site-engine.js.
 * The page's own CSS (from the studio's design) positions and styles every element; this file only
 * provides the canvas model it expects. Written for B4Shoot; no ShowIt engine code.
 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { position: relative; line-height: 1; }
.sp :where(div, span, h1, h2, h3, h4, h5, h6, p, a, em, strong, b, i, u, ol, ul, li, figure, figcaption, blockquote, section, nav, img, svg):not(.b4f, .b4f *) {
  border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline;
}
.sp :where(b, strong):not(.b4f *) { font-weight: 700; }
.sp :where(em, i):not(.b4f *) { font-style: italic; }
.sp :where(ol, ul):not(.b4f *) { list-style: none; }
.sp a, .sp a:link, .sp a:visited, .sp a:hover, .sp a:active { color: inherit; text-decoration: none; }

/* Page, sections, canvases */
.sp { position: relative; width: 100%; min-width: 320px; overflow-x: clip; }
.sb { position: relative; width: 100%; pointer-events: none; }
.sb.b4-hidden-mode { display: none !important; }
.sb.lock-st { position: sticky; top: 0; }
.sb.lock-fixed { position: fixed; left: 0; width: 100%; }
.sb.lock-t { top: 0; }
.sb.lock-b { bottom: 0; }
.ss-s { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.sb.lock-st .ss-s, .sb.lock-fixed .ss-s { overflow: visible; }
.sb-m { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
.sb-m.fixed { background-attachment: fixed; }
.ss { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.ss.sactive { display: block; }
.sc { position: absolute !important; left: 0; top: 0; margin: 0; transform-origin: 0 0; pointer-events: none; }

/* Elements */
.se { position: absolute; box-sizing: border-box; display: block; outline: none; pointer-events: auto; transform-origin: 50% 50%; }
.se-t { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; margin: 0; }
.se-rc a { text-decoration: underline !important; }
.se-rc a:hover { opacity: .8; }
.se-t-list ol, .se-t-list ul { margin-left: 1.4em; }
.se-img, .se-gr { width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
.se-icon, .se-line { display: block; width: 100%; height: 100%; }
.se-icon svg, .se-line svg { width: 100%; height: 100%; vertical-align: top; }
.se-button, .se-simple { border: 0 solid transparent; box-sizing: border-box; width: 100%; height: 100%; }
.se-button { display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: fit-content; }
.se-button span { line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-s { position: relative; z-index: 0; overflow: hidden; }
.sg-s .slide { position: absolute; inset: 0; transition: opacity 1s ease; }
.si-embed[data-b4-form] { width: 100% !important; height: auto !important; transform: none !important; background: transparent; }

/* Lazy photos fade in */
.slzy { opacity: 0; transition: opacity .35s ease; }
.slzy.in { opacity: 1; }

/* Overlay sections (mobile menu) */
@keyframes b4SlideInDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes b4SlideOutUp { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.sb.b4-in { animation: b4SlideInDown .6s ease both; }
.sb.b4-out { animation: b4SlideOutUp .5s ease both; }

.preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; font: 13px system-ui, -apple-system, Arial, sans-serif; background: #1a1a1a; color: #fff; padding: 8px 12px; text-align: center; }