/* ============================================
   ALVEX STUDIO — Demo Chrome
   The only stylesheet shared by all six template demos.
   Deliberately neutral so it reads as an overlay, not
   part of any template's own design system.
   ============================================ */

/* Markup, identical on every demo page:

   <div class="demo-ribbon">
     <span>Alvex Studio template demo. All content is placeholder.</span>
     <a href="/contact" target="_top">Make this yours</a>
   </div>

   target="_top" is required: the demos run inside an iframe on
   /templates, so the link must break out of the frame. */

/* Every demo reads this for its own sticky header offset and scroll margins,
   so the ribbon's real height and what the demos clear can never drift apart.
   Use var(--demo-ribbon-h), never a hardcoded 34px. */
:root { --demo-ribbon-h: 34px; }

.demo-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
  height: var(--demo-ribbon-h);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 8px 16px;
  background: #080F18; color: rgba(240,237,230,.75);
  font: 500 12px/1.4 system-ui, sans-serif; letter-spacing: .02em;
}
.demo-ribbon a { color: #7BA3F5; text-decoration: underline; text-underline-offset: 3px; }
body { padding-top: var(--demo-ribbon-h); }   /* every demo body clears the ribbon */

/* Below ~560px the one-line ribbon no longer fits, so it stacks to a known
   two-line height rather than wrapping to an unpredictable one and clipping
   whatever each demo pins beneath it. */
@media (max-width: 560px) {
  :root { --demo-ribbon-h: 46px; }
  .demo-ribbon {
    flex-direction: column; gap: 1px;
    padding: 5px 12px;
    font-size: 11px; line-height: 1.35;
    text-align: center;
  }
}