/**
 * Journey helpers: guide selectors + adhesion offsets.
 * --zr-adhesion-h: mobile only (tab bar / chat / toasts) via zr-journey-adhesion.js.
 * --zr-calc-adhesion-h: all widths for calculator fixed bars; includes desktop ~90px adhesion.
 */

:root {
  --zr-adhesion-h: 0px;
  --zr-calc-adhesion-h: 0px;
}

/* Mobile: sit tab bar flush on top of Journey adhesion (measured height). */
@media (max-width: 1023px) {
  .zr-tabbar {
    bottom: var(--zr-adhesion-h) !important;
  }

  #zrai {
    bottom: calc(var(--zr-tabbar-h, 3.95rem) + var(--zr-adhesion-h) + 12px + env(safe-area-inset-bottom)) !important;
  }

  #zrai.is-open .zrai-panel {
    bottom: calc(var(--zr-tabbar-h, 3.95rem) + var(--zr-adhesion-h) + 80px + env(safe-area-inset-bottom)) !important;
  }

  .zr-toasts {
    bottom: calc(var(--zr-tabbar-h, 3.95rem) + var(--zr-adhesion-h) + 0.9rem + env(safe-area-inset-bottom)) !important;
  }

  body:has(.zr-hbar) .zr-toasts {
    bottom: calc(var(--zr-tabbar-h, 3.95rem) + var(--zr-adhesion-h) + 4.6rem + env(safe-area-inset-bottom)) !important;
  }

  /* Interactive bottom bars — use calculator adhesion var (mobile measured height). */
  .zr-hbar {
    bottom: calc(var(--zr-tabbar-h, 3.95rem) + var(--zr-calc-adhesion-h) + 0.45rem + env(safe-area-inset-bottom)) !important;
  }

  .zr-hcmpbar {
    bottom: calc(var(--zr-tabbar-h, 3.95rem) + var(--zr-calc-adhesion-h) + 0.6rem + env(safe-area-inset-bottom)) !important;
  }

  body:has(.zr-hbar) {
    padding-bottom: calc(var(--zr-tabbar-h, 3.95rem) + var(--zr-calc-adhesion-h) + 4.4rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Desktop: theme uses bottom 0.85rem / padding 4.6rem with no tab bar.
 * Lift only calculator bars by measured desktop adhesion; do NOT move tabbar/chat. */
@media (min-width: 1024px) {
  .zr-hbar {
    bottom: calc(var(--zr-calc-adhesion-h) + 0.85rem + env(safe-area-inset-bottom)) !important;
  }

  .zr-hcmpbar {
    bottom: calc(var(--zr-calc-adhesion-h) + 1rem + env(safe-area-inset-bottom)) !important;
  }

  body:has(.zr-hbar) {
    padding-bottom: calc(var(--zr-calc-adhesion-h) + 4.6rem + env(safe-area-inset-bottom)) !important;
  }
}

/* —— Guide Journey targeting —— */
.zr-guide-layout {
  display: grid !important;
  gap: 1.25rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.zr-guide-layout > #journey-content {
  min-width: 0;
  max-width: 48rem;
  font-size: 1.125rem !important;
  line-height: 1.65 !important;
  box-sizing: border-box;
}

.zr-guide-layout > #journey-content p {
  margin: 0 0 0.9rem;
}

.zr-guide-layout > #journey-content h2 {
  margin-top: 1.35rem;
  line-height: 1.3;
}

#journey-sidebar.journey-sidebar,
.zr-guide-sidebar.journey-sidebar {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0;
  position: static !important;
}

.zr-guide-sidebar .zr-drawer {
  margin: 0;
}

.zr-guide-sidebar__note {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--zr-border, #243740);
  border-radius: var(--zr-radius-sm, 10px);
  background: var(--zr-surface, #122028);
  color: var(--zr-muted, #9bb0bc);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 960px) {
  .zr-main.zr-doc:has(> .zr-guide-layout) {
    width: min(72rem, calc(100% - 2rem)) !important;
    max-width: none !important;
  }

  .zr-guide-layout {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    column-gap: 1.5rem;
  }

  #journey-sidebar.journey-sidebar,
  .zr-guide-sidebar.journey-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    justify-self: stretch;
    position: static !important;
    top: auto !important;
  }
}

.zr-hguide__main.journey-content {
  font-size: 1.125rem !important;
  line-height: 1.65 !important;
  min-width: 0;
}

@media (min-width: 960px) {
  .zr-hguide__layout {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }

  .zr-hguide__rail.journey-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    box-sizing: border-box;
    position: static !important;
    top: auto !important;
  }
}

/* —— Site-wide Journey targeting (pages, hubs, database, tools, events) ——
 * Markup from zr-journey-guide-layout.php: .zr-jlayout > #journey-content.zr-jcontent + #journey-sidebar.zr-jside
 * Content keeps the theme's own styles (no font-size override). Rail is 300px, non-sticky,
 * stretched to the content height so Journey's sticky sidebar ad has room to travel. */
.zr-jlayout {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.zr-jlayout > #journey-content.zr-jcontent {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.zr-jside {
  display: none;
}

@media (min-width: 1024px) {
  /* Narrow page shells (e.g. gift codes 52rem) widen so content + 300px rail fit. */
  .zr-main:has(> .zr-jlayout) {
    width: min(var(--zr-max, 1200px), calc(100% - 2rem)) !important;
    max-width: none !important;
  }

  .zr-jlayout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 1.5rem;
    align-items: stretch;
  }

  .zr-jlayout > #journey-content.zr-jcontent > :first-child {
    margin-top: 0;
  }

  .zr-jlayout > #journey-sidebar.zr-jside {
    display: block;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    align-self: stretch;
    position: static !important;
    top: auto !important;
    box-sizing: border-box;
  }
}

.zr-jside__box {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--zr-border, #243740);
  border-radius: var(--zr-radius-sm, 10px);
  background: var(--zr-surface, #122028);
}

.zr-jside__h {
  margin: 0 0 0.55rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zr-muted, #9bb0bc);
}

.zr-jside .zr-jside__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 0.15rem;
}

.zr-jside .zr-jside__list > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zr-jside .zr-jside__list > li::before,
.zr-jside .zr-jside__list > li::marker {
  content: none !important;
}

.zr-jside__list a {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  color: var(--zr-text, inherit);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.zr-jside__list a:hover,
.zr-jside__list a:focus-visible {
  background: var(--zr-surface-2, rgba(255, 255, 255, 0.05));
  color: var(--zr-primary, #e08a00);
}

.zr-jside__list a[aria-current="page"] {
  color: var(--zr-primary, #e08a00);
  font-weight: 600;
}