/*
  DEMO TOOL · Status Bar Kit v1.3
  First earned on Automax Texoma (Oct 2026). Pair with status-bar.js.
  Requires <meta name="viewport" content="..., viewport-fit=cover">.
  The clock is phone-only. The 56px bleed below is already off on desktop.
  Desktop still uses the header colors (clear, scrolled, menu).
*/

html {
  background-color: var(--sb-page-bg, #000);
}

[data-sb-header] {
  transition: none !important;
}
:where(html:not([data-sb-inset="spacer"])) [data-sb-header] {
  padding-top: env(safe-area-inset-top, 0px);
}

/* inset: "spacer" keeps the site's own header padding (Tailwind py-*) and clears the clock with a child instead. */
.sb-inset {
  display: none;
}
html[data-sb-overlay][data-sb-inset="spacer"] .sb-inset {
  display: block;
  height: env(safe-area-inset-top, 0px);
}

/* A clear hero must start at y=0 under the header, so the header floats instead of taking space (sticky/static push the hero down). */
html[data-sb-overlay] [data-sb-header] {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.sb-cap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(env(safe-area-inset-top, 0px), 6px);
  z-index: 250;
  pointer-events: none;
  transition: none !important;
}

/* Over a clear hero nothing opaque may touch y=0, or Safari tints the status bar instead of showing the hero. */
html[data-sb-state="clear"] .sb-cap {
  display: none;
}

/* Safari tints from the page under an open menu too, so light content must not sit behind it. */
html[data-sb-state="menu"] [data-sb-under] {
  visibility: hidden;
}

/*
  Safari only draws page content behind the clock once the page is scrolled, so a clear hero is taller
  by the bleed and status-bar.js rests the page at that offset. Use var(--sb-bleed-active) in the hero height.
*/
:root {
  --sb-bleed-active: 0px;
}
@media (hover: none) and (pointer: coarse) {
  html[data-sb-bleed] {
    --sb-bleed-active: var(--sb-bleed, 56px);
  }
}
html[data-sb-bleed] [data-sb-hero] {
  min-height: calc(100svh + var(--sb-bleed-active));
}

/* In Facebook and Instagram those viewport units track the live screen, so a
   full-height hero jumps on a small scroll. iab-lock.js freezes --iab-vh. */
html[data-iab] [data-sb-hero] {
  height: auto !important;
  min-height: var(--iab-vh, 100svh) !important;
}
html[data-iab] [data-sb-header] {
  padding-top: var(--iab-safe-top, 0px) !important;
}
html[data-iab] .sb-inset {
  height: var(--iab-safe-top, 0px) !important;
}
html[data-iab] .sb-cap {
  height: max(var(--iab-safe-top, 0px), 6px) !important;
}