/* ============================================================
   app-popup.css — site-wide "Download our App!" prompt.

   Mobile: full-width banner pinned to the bottom of the viewport.
   Desktop (>=768px): compact card in the bottom-right corner.

   The markup is injected by js/app-popup.js, so this file and
   that script are the only two places the feature lives — no
   popup HTML is duplicated across the 12 pages that load it.
   Built entirely from the tokens in tokens.css.
   ============================================================ */

.bk-popup {
  /* AA-safe accent for small text (~7:1 on --bg). The raw --accent
     (#006DF8) is too dark for sub-16px copy on the black canvas. */
  --bk-popup-accent-text: #4C9AFF;

  position: fixed;
  z-index: var(--z-popup);
  display: flex;
  align-items: stretch;
  background-color: var(--bg);
  border: var(--border-width) solid var(--border);

  /* Mobile-first: edge-to-edge banner along the bottom edge.
     Side/bottom borders would sit off-screen, so only the top rule shows. */
  left: 0;
  right: 0;
  bottom: 0;
  border-inline: 0;
  border-bottom: 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
}

/* [hidden] must beat the display:flex above */
.bk-popup[hidden] { display: none; }

.bk-popup--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------- Clickable body ---------- */
.bk-popup__link {
  flex: 1 1 auto;
  display: block;
  min-height: 44px;
  padding: var(--space-4) var(--space-6);
  /* Clears the iPhone home indicator; resolves to 0px everywhere else */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  color: var(--fg);
  text-decoration: none;
  /* Drops the ~300ms double-tap-zoom wait on touch */
  touch-action: manipulation;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

/* Hard inversion — no fades, per the design system.
   :hover is deliberately NOT listed here. On a touch device a :hover rule
   makes the browser spend the first tap applying the hover state, so the
   link needs a second tap to actually navigate. Hover is re-attached in the
   @media (hover: hover) block at the bottom, where only real pointers match;
   :active gives touch users the same inversion as press feedback. */
.bk-popup__link:focus-visible,
.bk-popup__link:active {
  background-color: var(--accent);
  color: var(--accent-fg);
}

.bk-popup__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-fg);
  margin-bottom: var(--space-1);
}

.bk-popup__title {
  display: block;
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.bk-popup__cta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--bk-popup-accent-text);
}

/* Everything goes mono-colour once the card inverts */
.bk-popup__link:focus-visible .bk-popup__eyebrow,
.bk-popup__link:focus-visible .bk-popup__cta,
.bk-popup__link:active .bk-popup__eyebrow,
.bk-popup__link:active .bk-popup__cta {
  color: var(--accent-fg);
}

/* ---------- Dismiss ---------- */
.bk-popup__close {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  align-self: stretch;
  background: transparent;
  border: 0;
  border-left: var(--border-width) solid var(--border);
  color: var(--muted-fg);
  font-family: var(--font-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.bk-popup__close:focus-visible,
.bk-popup__close:active {
  background-color: var(--fg);
  color: var(--bg);
}

/* ---------- Hover, for real pointers only ----------
   Gated so touch devices never match it — see the note above. */
@media (hover: hover) and (pointer: fine) {
  .bk-popup__link:hover {
    background-color: var(--accent);
    color: var(--accent-fg);
  }

  .bk-popup__link:hover .bk-popup__eyebrow,
  .bk-popup__link:hover .bk-popup__cta {
    color: var(--accent-fg);
  }

  .bk-popup__close:hover {
    background-color: var(--fg);
    color: var(--bg);
  }
}

/* ---------- Desktop: bottom-right card ---------- */
@media (min-width: 768px) {
  .bk-popup {
    left: auto;
    right: var(--space-8);
    bottom: var(--space-8);
    width: 360px;
    max-width: calc(100vw - var(--space-16));
    border: var(--border-width) solid var(--border);
    /* Slide up from below the corner, clearing its own offset */
    transform: translateY(calc(100% + var(--space-8)));
  }

  .bk-popup--visible {
    transform: translateY(0);
  }

  .bk-popup__link {
    padding-bottom: var(--space-4);
  }
}

/* ---------- Collision: address-copied toast on location.html ----------
   .toast is fixed at bottom:var(--space-12) with z-index 10000, so on
   phones it lands on top of the banner. Lift it while the banner is up. */
body.bk-popup-visible .toast {
  bottom: calc(var(--space-12) + 88px);
}

/* ---------- Collision: full-screen UI that must win ----------
   The mobile menu is z-index 100 and the popup is 250, so an open menu
   would otherwise have the banner floating on top of it. Both are direct
   children of <body> and the popup is appended last, so a later-sibling
   combinator handles it with no JS bookkeeping — which is why
   app-popup.js must be the LAST deferred script on every page.
   #splash (10001) and .lightbox (10000) already paint above the popup;
   these rules make the intent explicit and cover the mobile banner. */
.mobile-menu[aria-hidden="false"] ~ .bk-popup,
body.splash-active .bk-popup,
body.lightbox-open .bk-popup {
  display: none;
}