@import url("site-base.css");

/* Mobile guided demo corrections.
   The demo becomes a compact product tour instead of a full-height desktop canvas. */
@media (max-width:680px){
  html body .demo-modal{
    height:auto!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  }

  html body .demo-app{
    flex:0 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  html body .demo-scenes{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 230px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  /* The desktop implementation positions every scene absolutely. On mobile that
     created a full-height empty canvas. Only the active scene participates in layout. */
  html body .demo-scene{
    position:relative!important;
    inset:auto!important;
    display:none!important;
    width:100%!important;
    min-height:0!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
    overflow:visible!important;
  }
  html body .demo-scene.active{
    display:block!important;
  }

  /* Product selection is deliberately text-first on mobile. The old CSS-drawn
     desktop thumbnails caused headset/hub shapes to escape the card. */
  html body .demo-product-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  html body .demo-product-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 30px!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:3px!important;
    width:100%!important;
    min-height:78px!important;
    padding:13px 15px!important;
    text-align:left!important;
  }
  html body .demo-product-img{
    display:none!important;
  }
  html body .demo-product-card b{
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
  }
  html body .demo-product-card small{
    grid-column:1!important;
    grid-row:2!important;
    margin:0!important;
  }
  html body .demo-product-card i{
    position:static!important;
    grid-column:2!important;
    grid-row:1 / 3!important;
    align-self:center!important;
    justify-self:end!important;
    right:auto!important;
    top:auto!important;
  }

  html body .demo-action-wide{
    margin-top:10px!important;
  }

  html body .demo-guide{
    position:relative!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Horizontal steps are status indicators. Guided flow and Next keep scene + copy in sync. */
  html body .demo-app-sidebar button{
    pointer-events:none!important;
    user-select:none!important;
  }
}

/* Bulqsoft ownership and contact details.
   The existing footer markup is shared by Home and Insights, so this keeps the
   contact information consistent across the current site without duplicating page markup. */
.site-footer .footer-grid{
  flex-wrap:wrap;
}
.site-footer .footer-grid::after{
  content:"Contact  ·  info@bulqsoft.com  ·  bulqsoft.com  ·  Bulqsoft B.V.  ·  Amsterdam, Netherlands";
  order:3;
  flex:0 0 100%;
  display:block;
  margin-top:8px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:#7c8796;
  font-size:10px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.6;
}
.site-footer .footer-links span[data-i18n="footerBrand"]{
  font-size:0;
  color:var(--ink);
}
.site-footer .footer-links span[data-i18n="footerBrand"]::after{
  content:"Built by Bulqsoft";
  font-size:10px;
  font-weight:900;
  color:var(--ink);
}

/* Branding guide Variant 1: the public wordmark is lowercase and the q is Lime.
   The Q symbol remains available as a standalone mark, but is not combined with
   the wordmark as an improvised lock-up in the public header/footer. */
.brand-wordmark{
  gap:0!important;
  font-family:"Sora",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:850;
  letter-spacing:-.065em;
}
.brand-wordmark .brand-q,
.brand .brand-q,
.migration-core .brand-q{
  color:var(--lime);
}
.site-header .brand-mark,
.site-footer .brand-mark{
  display:none;
}
.button-login{
  min-height:43px;
  padding:0 15px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  box-shadow:none;
}
.button-login:hover{
  border-color:#cbd3dd;
  background:#f8fafb;
}
.mobile-nav .button-login{
  width:100%;
  justify-content:flex-start;
}

@media (max-width:680px){
  .site-footer .footer-grid::after{
    margin-top:4px;
    padding-top:16px;
    font-size:9px;
    line-height:1.8;
  }
}