/*
 * install-prompt.css — styling for the in-page PWA install card
 * =============================================================================
 * Companion to /assets/js/install-prompt.js. The JS injects a card into
 * <div id="ll-install-host"></div> and toggles .is-visible to animate it in.
 *
 * Design notes:
 *   - Bottom-right anchored, fixed position, above content but below modals.
 *   - Matches site palette (--forest, --gold, --cream from style.css).
 *   - Translates off-screen when hidden so it doesn't intercept clicks.
 *   - Respects prefers-reduced-motion (no slide, just fade).
 *   - Small enough on mobile that it doesn't cover article text — sits in
 *     the bottom safe-area, accounting for iOS home-bar via env(safe-area-…).
 *   - Class names prefixed `ll-install-` to avoid collisions with the
 *     site's existing .btn / .btn-primary system.
 */

#ll-install-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;             /* under cookie modal (which is on top) */
  pointer-events: none;     /* container is invisible; only the card catches clicks */
  transform: translateY(150%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
}

#ll-install-host.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #ll-install-host {
    transition: opacity .15s linear;
    transform: none;
  }
}

.ll-install-card {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .4rem .35rem .85rem;
  background: var(--forest, #1A3A2A);
  color: var(--warm-white, #FFFDF8);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.1);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: .92rem;
  line-height: 1;
  max-width: calc(100vw - 2rem);
}

.ll-install-action {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem .55rem .25rem;
  border-radius: 999px;
}

.ll-install-action:hover,
.ll-install-action:focus-visible {
  background: rgba(255,255,255,.08);
}
.ll-install-action:focus-visible {
  outline: 2px solid var(--gold, #C9A84C);
  outline-offset: 2px;
}

.ll-install-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #C9A84C);
  flex-shrink: 0;
}

.ll-install-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-install-dismiss {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.08);
  border: 0;
  color: var(--warm-white, #FFFDF8);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ll-install-dismiss:hover,
.ll-install-dismiss:focus-visible {
  background: rgba(255,255,255,.18);
}
.ll-install-dismiss:focus-visible {
  outline: 2px solid var(--gold, #C9A84C);
  outline-offset: 1px;
}

/* iOS hint variant — wider card so the instruction fits on one or two lines.
   Triggered by JS adding .is-hint to the card after the user taps Install
   on iOS Safari. */
.ll-install-card.is-hint {
  border-radius: 12px;
  padding: .9rem 1rem;
  max-width: min(360px, calc(100vw - 2rem));
  font-size: .9rem;
  line-height: 1.45;
  align-items: flex-start;
  gap: .75rem;
}

.ll-install-hint {
  margin: 0;
  color: var(--warm-white, #FFFDF8);
  flex: 1 1 auto;
}

.ll-install-card.is-hint .ll-install-dismiss {
  margin-top: -.2rem;     /* visual alignment with the first line of text */
}

/* On very small screens, anchor the card to the full width with margins
   so the text never gets cramped against the right edge. */
@media (max-width: 420px) {
  #ll-install-host {
    right: .75rem;
    left: .75rem;
  }
  .ll-install-card {
    width: 100%;
    justify-content: space-between;
  }
  .ll-install-card.is-hint {
    max-width: none;
  }
}