/*
 * Aloha prospect demo — styles.
 *
 * The page is two screenshots of https://www.aloha-events.co.il/, so there is
 * almost nothing to style: his design is already baked into the pixels. What is
 * left is (a) pinning his navbar so it behaves like the sticky one it is on his
 * site, (b) swapping desktop/mobile captures at a breakpoint, and (c) the demo
 * ribbon.
 *
 * No fonts, no colour tokens, no components. If this file starts growing, the
 * screenshot approach is being fought rather than used.
 */

:root {
  /*
   * Aspect ratio of the sliced navbar strip, as <width> / <height> in the STORED
   * asset's pixels. `prepare-screenshots.py` prints both numbers when it runs —
   * these two lines are the only thing that must be kept in step with it.
   *
   * Wrong values do not error, they just misalign: too tall leaves a white gap
   * under the nav, too short lets a sliver of the hero show above it.
   */
  --nav-aspect: 1920 / 83;

  /* Native width of the stored capture. Beyond this the page is letterboxed rather
     than upscaled — enlarging a screenshot past 1:1 makes the text visibly soft. */
  --page-width: 1920px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* White, not the default. The letterbox either side of the capture on very wide
     screens has to read as page background, not as a black bar. */
  background-color: #fff;
  /* Only the ribbon uses type; everything else is pixels. */
  font-family: "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- his sticky navbar ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  /* Full-bleed white so the bar spans the viewport even when the capture inside it
     is capped at --page-width and centred. */
  background-color: #fff;
}

.nav picture,
.nav-spacer,
.page picture {
  display: block;
  max-width: var(--page-width);
  margin-inline: auto;
}

/*
 * Holds open exactly the height the fixed nav occupies.
 *
 * The nav image scales with the viewport, so its rendered height changes with
 * width and a fixed pixel offset would drift — leaving a gap on wide screens and
 * clipping the top of the page on narrow ones. An aspect-ratio box tracks it
 * exactly, at every width, with no JavaScript and no resize listener.
 */
.nav-spacer {
  width: 100%;
  aspect-ratio: var(--nav-aspect);
}

/* ---------- the page body ---------- */

.page {
  /* The capture already contains every section, so there is nothing to lay out. */
  margin: 0;
}

/* ---------- mobile capture ----------
 * <picture> in the markup does the actual asset swap; this only has to restate the
 * geometry, because the mobile strip has a different aspect ratio and native width.
 * Keep the breakpoint here identical to the `media` attribute on the <source>
 * elements — if they disagree, one viewport range gets the mobile image laid out to
 * desktop proportions.
 */
@media (max-width: 700px) {
  :root {
    --nav-aspect: 860 / 120;
    --page-width: 860px;
  }
}

/* ---------- demo ribbon ----------
 * With the page reduced to a screenshot, his footer disclaimer is now pixels and
 * says nothing. This is the ONLY element distinguishing the demo from his real
 * site, so it is deliberately always-on and not dismissible.
 *
 * Bottom-RIGHT and lifted clear of the widget launcher, which occupies the corner
 * once the site key is provisioned.
 */
.demo-flag {
  position: fixed;
  /*
   * PHYSICAL left/bottom, not logical. `inset-inline-end` resolved to the LEFT on
   * this rtl page, which put the ribbon on the same side as both the widget
   * launcher's default corner and the WhatsApp button baked into his screenshot.
   *
   * Now: launcher bottom-RIGHT (data-position="start"), his WhatsApp pixel
   * bottom-left, and this ribbon raised above it so all three are legible at the
   * top of the page where they would otherwise pile up.
   */
  bottom: 8rem;
  left: 1.5rem;
  z-index: 60;
  background: rgba(10, 10, 10, 0.82);
  color: #f9f5f0;
  border: 1px solid rgba(249, 245, 240, 0.28);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid #3e3427;
  outline-offset: 3px;
}