/**
 * Beast of Africa — Onboarding & Safari Guide System (Phase 4)
 * Reuses the theme's global custom properties (--gold, --glass, --surface,
 * --text, --muted, --border …) defined in style.css :root so onboarding UI
 * always matches the site, wherever it renders.
 */

:root {
  --ob-ease: cubic-bezier(.16,1,.3,1);
  --ob-z-popup: 9999;
  --ob-z-tour: 9998;
  --ob-z-guide: 9990;
  --ob-z-hint: 9985;
  --ob-serif: 'Cormorant Garamond', Georgia, serif;
  --ob-sans: 'Jost', 'Helvetica Neue', sans-serif;
}

.boa-ob-lock-scroll { overflow: hidden; }

/* ══════════════ Shared button ══════════════ */
.boa-ob-btn {
  font-family: var(--ob-sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .75rem 1.6rem;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ob-ease), background .25s, box-shadow .25s;
}
.boa-ob-btn--primary {
  background: var(--gold, #c8b28a);
  color: #0d1210;
}
.boa-ob-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,178,138,.28); }
.boa-ob-btn--ghost {
  background: transparent;
  color: var(--text, #eef5f2);
  border-color: var(--border, rgba(238,245,242,.18));
}
.boa-ob-btn--ghost:hover { border-color: var(--gold, #c8b28a); color: var(--gold, #c8b28a); }
.boa-ob-btn:focus-visible { outline: 2px solid var(--gold, #c8b28a); outline-offset: 2px; }
.boa-ob-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════ First-visit popup ══════════════ */
.boa-ob-popup {
  position: fixed; inset: 0; z-index: var(--ob-z-popup);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; transition: opacity .3s var(--ob-ease);
}
.boa-ob-popup.is-visible { opacity: 1; }
.boa-ob-popup.is-closing { opacity: 0; }
.boa-ob-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(6,10,9,.72);
  backdrop-filter: blur(6px);
}
.boa-ob-popup__card {
  position: relative;
  max-width: 460px; width: 100%;
  background: var(--glass, rgba(13,22,21,.9));
  border: 1px solid var(--gold-border, rgba(200,178,138,.22));
  border-radius: 18px;
  padding: 2.4rem 2.2rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: translateY(14px) scale(.98);
  transition: transform .35s var(--ob-ease);
}
.boa-ob-popup.is-visible .boa-ob-popup__card { transform: translateY(0) scale(1); }
.boa-ob-popup__eyebrow {
  display: inline-block; font-family: var(--ob-sans); font-size: .64rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gold, #c8b28a);
  margin-bottom: .75rem;
}
.boa-ob-popup__title {
  font-family: var(--ob-serif); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--text-bright, #fff); margin: 0 0 1rem;
}
.boa-ob-popup__body p {
  font-family: var(--ob-sans); font-size: .92rem; line-height: 1.75;
  color: var(--muted, rgba(238,245,242,.72)); margin: 0 0 .85rem;
}
.boa-ob-popup__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ══════════════ Guided tour ══════════════ */
.boa-ob-tour { position: fixed; inset: 0; z-index: var(--ob-z-tour); opacity: 0; transition: opacity .25s var(--ob-ease); }
.boa-ob-tour.is-visible { opacity: 1; }
.boa-ob-tour.is-closing { opacity: 0; }
.boa-ob-tour__overlay { position: absolute; inset: 0; background: rgba(6,10,9,.68); }
.boa-ob-tour__overlay--dim-only .boa-ob-tour__spotlight { display: none; }
.boa-ob-tour__spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(6,10,9,.68);
  border: 2px solid var(--gold, #c8b28a);
  transition: top .35s var(--ob-ease), left .35s var(--ob-ease), width .35s var(--ob-ease), height .35s var(--ob-ease), opacity .25s;
  pointer-events: none;
}
.boa-ob-tour__card {
  position: fixed;
  max-width: 320px;
  background: var(--glass-2, rgba(20,35,33,.94));
  border: 1px solid var(--gold-border, rgba(200,178,138,.22));
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transition: top .35s var(--ob-ease), left .35s var(--ob-ease);
}
.boa-ob-tour__card:focus { outline: none; }
.boa-ob-tour__close {
  position: absolute; top: .6rem; right: .7rem;
  background: none; border: none; color: var(--muted, rgba(238,245,242,.6));
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .25rem;
}
.boa-ob-tour__close:hover { color: var(--gold, #c8b28a); }
.boa-ob-tour__title { font-family: var(--ob-serif); font-weight: 400; font-size: 1.15rem; color: var(--text-bright, #fff); margin: 0 0 .5rem; }
.boa-ob-tour__body { font-family: var(--ob-sans); font-size: .85rem; line-height: 1.6; color: var(--muted, rgba(238,245,242,.75)); margin: 0 0 1.1rem; }
.boa-ob-tour__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.boa-ob-tour__counter { font-family: var(--ob-sans); font-size: .7rem; letter-spacing: .08em; color: var(--faint, rgba(238,245,242,.4)); }
.boa-ob-tour__nav { display: flex; gap: .5rem; }
.boa-ob-tour__nav .boa-ob-btn { padding: .5rem 1.1rem; font-size: .74rem; }

/* ══════════════ Safari Guide button + panel ══════════════ */
.boa-ob-guide-btn {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--ob-z-guide);
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--glass, rgba(13,22,21,.88));
  border: 1px solid var(--gold-border, rgba(200,178,138,.28));
  color: var(--text, #eef5f2);
  font-family: var(--ob-sans); font-size: .8rem; font-weight: 600; letter-spacing: .03em;
  padding: .8rem 1.2rem; border-radius: 999px; cursor: pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  transition: transform .25s var(--ob-ease), box-shadow .25s, border-color .25s;
}
.boa-ob-guide-btn:hover { transform: translateY(-3px); border-color: var(--gold, #c8b28a); box-shadow: 0 16px 40px rgba(200,178,138,.22); }
.boa-ob-guide-btn:focus-visible { outline: 2px solid var(--gold, #c8b28a); outline-offset: 3px; }
.boa-ob-guide-btn svg { color: var(--gold, #c8b28a); flex-shrink: 0; }

.boa-ob-guide-panel {
  position: fixed; right: 1.5rem; bottom: 5.4rem; z-index: var(--ob-z-guide);
  width: min(360px, calc(100vw - 3rem));
  max-height: min(560px, calc(100vh - 8rem));
  overflow-y: auto;
  background: var(--glass-2, rgba(20,35,33,.96));
  border: 1px solid var(--gold-border, rgba(200,178,138,.24));
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .25s var(--ob-ease), transform .25s var(--ob-ease);
}
.boa-ob-guide-panel.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.boa-ob-guide-panel__header { position: relative; margin-bottom: .5rem; padding-right: 1.6rem; }
.boa-ob-guide-panel__eyebrow { display: block; font-family: var(--ob-sans); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold, #c8b28a); margin-bottom: .35rem; }
.boa-ob-guide-panel__title { font-family: var(--ob-serif); font-weight: 400; font-size: 1.25rem; color: var(--text-bright, #fff); margin: 0; }
.boa-ob-guide-panel__close { position: absolute; top: -.2rem; right: -.3rem; background: none; border: none; color: var(--muted, rgba(238,245,242,.6)); font-size: 1.3rem; cursor: pointer; padding: .25rem; }
.boa-ob-guide-panel__close:hover { color: var(--gold, #c8b28a); }
.boa-ob-guide-panel__intro { font-family: var(--ob-sans); font-size: .82rem; line-height: 1.65; color: var(--muted, rgba(238,245,242,.72)); margin: 0 0 1.1rem; }
.boa-ob-guide-panel__topics { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.boa-ob-guide-panel__topic {
  text-align: left; font-family: var(--ob-sans); font-size: .82rem; color: var(--text, #eef5f2);
  background: rgba(255,255,255,.04); border: 1px solid var(--border, rgba(238,245,242,.1));
  border-radius: 9px; padding: .65rem .85rem; cursor: pointer; transition: border-color .25s, background .25s;
}
.boa-ob-guide-panel__topic:hover { border-color: var(--gold, #c8b28a); background: rgba(200,178,138,.08); }
.boa-ob-guide-panel__answer {
  font-family: var(--ob-sans); font-size: .84rem; line-height: 1.7; color: var(--text, #eef5f2);
  background: rgba(200,178,138,.08); border: 1px solid var(--gold-border, rgba(200,178,138,.2));
  border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1rem;
}
.boa-ob-guide-panel__replay {
  width: 100%; text-align: center; font-family: var(--ob-sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .04em; color: var(--gold, #c8b28a); background: transparent;
  border: 1px dashed var(--gold-border, rgba(200,178,138,.3)); border-radius: 9px; padding: .6rem; cursor: pointer;
}
.boa-ob-guide-panel__replay:hover { background: rgba(200,178,138,.08); }

/* ══════════════ Contextual hint toast ══════════════ */
.boa-ob-hint {
  position: fixed; left: 50%; bottom: 1.75rem; z-index: var(--ob-z-hint); max-width: calc(100% - 200px);
  transform: translate(-50%, 12px);
  display: inline-flex; align-items: center; gap: .7rem;
  max-width: min(420px, calc(100vw - 2rem));
  background: var(--glass-2, rgba(20,35,33,.95));
  border: 1px solid var(--gold-border, rgba(200,178,138,.24));
  border-radius: 999px;
  padding: .7rem 1.1rem .7rem 1.3rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s var(--ob-ease), transform .25s var(--ob-ease);
}
.boa-ob-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }
.boa-ob-hint__text { font-family: var(--ob-sans); font-size: .8rem; color: var(--text, #eef5f2); }
.boa-ob-hint__dismiss { background: none; border: none; color: var(--muted, rgba(238,245,242,.55)); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: .1rem .2rem; }
.boa-ob-hint__dismiss:hover { color: var(--gold, #c8b28a); }

/* ══════════════ Page intro card ══════════════ */
.boa-ob-intro-card {
  background: var(--glass, rgba(13,22,21,.7));
  border: 1px solid var(--border, rgba(238,245,242,.1));
  border-radius: 12px;
  margin: 1rem auto;
  max-width: 900px;
  overflow: hidden;
}
.boa-ob-intro-card--floating {
  position: fixed; left: 1.5rem; top: calc(var(--hdr-total, 100px) + 1rem); z-index: 500;
  max-width: min(360px, calc(100vw - 3rem));
}
.boa-ob-intro-card__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer; padding: .95rem 1.2rem; text-align: left;
}
.boa-ob-intro-card__title { font-family: var(--ob-sans); font-size: .82rem; font-weight: 600; color: var(--text, #eef5f2); }
.boa-ob-intro-card__chevron { color: var(--gold, #c8b28a); flex-shrink: 0; transition: transform .25s var(--ob-ease); }
.boa-ob-intro-card.is-collapsed .boa-ob-intro-card__chevron { transform: rotate(-90deg); }
.boa-ob-intro-card__body { max-height: 200px; overflow: hidden; transition: max-height .3s var(--ob-ease), opacity .3s; padding: 0 1.2rem 1rem; }
.boa-ob-intro-card__body p { margin: 0; font-family: var(--ob-sans); font-size: .84rem; line-height: 1.65; color: var(--muted, rgba(238,245,242,.72)); }
.boa-ob-intro-card.is-collapsed .boa-ob-intro-card__body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

/* ══════════════ Accessibility ══════════════ */
.boa-ob-popup.is-reduced-motion,
.boa-ob-tour.is-reduced-motion,
.boa-ob-popup.is-reduced-motion .boa-ob-popup__card {
  transition-duration: .01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  .boa-ob-popup, .boa-ob-popup__card, .boa-ob-tour, .boa-ob-tour__spotlight,
  .boa-ob-tour__card, .boa-ob-guide-panel, .boa-ob-hint, .boa-ob-guide-btn,
  .boa-ob-intro-card__body, .boa-ob-intro-card__chevron {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
@media (forced-colors: active) {
  .boa-ob-popup__card, .boa-ob-tour__card, .boa-ob-guide-panel, .boa-ob-hint, .boa-ob-guide-btn, .boa-ob-intro-card {
    border: 1px solid CanvasText;
  }
}

/* ══════════════ Mobile ══════════════ */
@media (max-width: 640px) {
  .boa-ob-guide-btn span { display: none; }
  .boa-ob-guide-btn { padding: .85rem; }
  .boa-ob-guide-panel { right: .85rem; left: .85rem; width: auto; bottom: 4.6rem; }
  .boa-ob-tour__card { left: 1rem !important; right: 1rem; max-width: none; width: calc(100% - 2rem); }
  .boa-ob-intro-card--floating { position: static; margin: 1rem; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING UI STACK — one lane, no overlap
   Multiple floating helpers (Safari Guide button, its panel, hints, PWA
   prompts) all anchor bottom-right. Rather than let them pile on top of each
   other, they share a defined vertical rhythm and z-order. The button owns the
   corner; the panel opens ABOVE it; nothing else may occupy the same spot.
═══════════════════════════════════════════════════════════════════════════ */

/* The launcher button is always the bottom-most, right-most element. */
.boa-ob-guide-btn{
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 9600 !important;
}

/* Its panel opens above it — never beside, never under. */
.boa-ob-guide-panel{
  bottom: 5.4rem !important;
  right: 1.5rem !important;
  z-index: 9590 !important;
}

/* On the Explorer, the map's own zoom control shares this corner. Move the
   guide button to the LEFT of the zoom stack so the two never touch. */
body.page-template-page-explore .boa-ob-guide-btn{
  right: 5.2rem !important;   /* clears the ~52px zoom control + gap */
}
body.page-template-page-explore .boa-ob-guide-panel{
  right: 1.5rem !important;
  bottom: 1.5rem !important;  /* panel opens from the corner, full height */
}

/* Collapse the guide button to an icon-only orb below 1100px OR when it would
   crowd other controls — keeps it a clean pop-up trigger, not a wide pill. */
@media (max-width: 1100px){
  .boa-ob-guide-btn span{ display: none; }
  .boa-ob-guide-btn{ padding: .85rem; border-radius: 50%; }
}

/* Hint toast never sits on the launcher. */
.boa-ob-hint{
  right: 6.5rem !important;
  bottom: 1.75rem !important;
  left: auto !important;
  transform: none !important;
}
@media (max-width: 700px){
  .boa-ob-hint{ right: 1rem !important; left: 1rem !important; bottom: 5.5rem !important; }
  body.page-template-page-explore .boa-ob-guide-btn{ right: 1.2rem !important; bottom: 5.5rem !important; }
}