/* ============================================================
   Balance Farm — help panel
   A floating question list in the bottom-right corner, appearing
   once the hero is scrolled past. Same surface and blur as the
   nav menu, so it reads as part of the same chrome.

   Questions are Crimson Text 16px / -1%; answers stay in the UI
   sans, so a reply is visibly distinct from the list around it.
   ============================================================ */

.help {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 40;                       /* above the page, below the modals (70) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  pointer-events: none;
}
.help > * { pointer-events: auto; }

/* the three actions read as one cluster */
.help__actions { display: flex; gap: var(--s-1); }

/* the actions are permanent chrome; only the panel is revealed */
.help__panel {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 420ms ease, transform 520ms var(--e-out);
}
.help:not(.is-open) .help__panel { pointer-events: none; }

/* ---- the panel ---- */
.help__panel {
  width: min(420px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--nav-surface);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
  border-radius: var(--r-md);
  color: var(--color-ink);
  visibility: hidden;
}
.help.is-open .help__panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
/* the cluster sits above the panel, so it comes second in the flow */
.help__actions { order: -1; }

.help__title {
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xl-track);
  line-height: 1;
  margin-bottom: 56px;               /* title → content */
}

/* ---- question list ---- */
.help__list { display: flex; flex-direction: column; }
.help__item { border-top: 1px solid var(--fill-1); }
.help__item:last-child { border-bottom: 1px solid var(--fill-1); }

.help__q {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  letter-spacing: var(--t-sm-track);
  line-height: 1.3;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .help__q:hover { opacity: 0.6; }
}

/* the answer reads in the UI sans, so it stands apart from the questions */
.help__a {
  overflow: hidden;
  max-height: 0;
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-md-track);
  line-height: 1.25;
  transition: max-height 420ms var(--e-move);
}
.help__item.is-open .help__a { max-height: 320px; }
.help__a p { margin: 0; padding: 0 0 12px; }

/* ---- contact ---- */
.help__foot { margin-top: 56px; }    /* content → contact us */
/* composes .c-pill; only the denser box is its own */
.help__contact { padding: 12px 20px; height: auto; }

/* Contact shares the toggle's box, so the cluster reads as one control
   split in two */
.help__action,
/* ---- toggle ---- */
/* composes .c-pill, but on the chrome surface rather than the grey fill.
   height:auto keeps the specced 8/12 box — the primitive's 48px would make
   this floating button half again too tall. */
.help__toggle {
  padding: 8px 12px;
  height: auto;
  background: var(--nav-surface);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
  font-size: var(--t-xs);
  letter-spacing: var(--t-2xs-track);
  line-height: 1;
  transition: background var(--d-fast) ease, opacity 420ms ease,
              transform 520ms var(--e-out);
}
@media (hover: hover) {
  .help__toggle:hover { background: var(--chrome-hover); }
}
.help__toggle-icon--close { display: none; }
.help.is-open .help__toggle-icon--open { display: none; }
.help.is-open .help__toggle-icon--close { display: block; }

@media (max-width: 768px) {
  /* The cluster moves to the bottom-right corner, clear of the weather
     caption on that row. The panel leaves the flow entirely and anchors above
     the pill: kept in flow, its (hidden but still measured) height pushed the
     pill away from the corner. */
  .help {
    top: auto;
    bottom: 64px;
    right: var(--chrome-inset);
  }
  .help__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--s-1));
    transform: translateY(12px);
  }
  .help.is-open .help__panel { transform: translateY(0); }

  /* one action only: a phone has no room for both pills in the corner */
  .help__action { display: none; }
  .help__panel { max-height: calc(100dvh - 140px); }
  .help__title { font-size: var(--t-lg); margin-bottom: 40px; }
  .help__foot { margin-top: 40px; }

  /* the cluster shares the bottom-right corner with the nav menu and the
     calendar panel on mobile — step aside while either is open */
  body:has(.nav.is-open) .help,
  body:has(.booking.is-open) .help {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
}

/* Cabin joins the cluster on desktop only — tablets have the menu for it, and
   three pills crowd the corner */
@media (max-width: 1024px) {
  .help__action--cabin { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .help__toggle, .help__panel, .help__a { transition-duration: 1ms !important; }
}