/* =========================================================================
   ForeverAfter.life — Help & support page
   Ported from templates/theme_dev/Help & Support.html; tokens remapped to
   --ff-*. The reference's own top bar, account dropdown and inline dust are
   dropped — this page uses the shared site header and the `dustfield`
   controller. The contact form at the foot is new. Loaded only on /help.
   ========================================================================= */

body { background: var(--ff-surface-2); }

/* ---- Page shell ---- */
.h-wrap { width: 100%; max-width: var(--ff-shell-max); margin: 0 auto; padding: 46px 32px 120px; }
@media (max-width: 600px) { .h-wrap { padding: 32px 18px 90px; } }

/* ---- Page header ---- */
.h-head { position: relative; overflow: hidden; padding-bottom: 32px; border-bottom: 1px solid var(--ff-line); margin-bottom: 36px; }
.b-crumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: var(--ff-ink-3); font-size: 0.9rem; font-weight: 500; margin-bottom: 14px; }
.b-crumb a { color: var(--ff-ink-3); transition: color .15s; }
.b-crumb a:hover { color: var(--ff-accent-deep); }
.b-crumb .sep { opacity: 0.6; }
.h-head h1 { position: relative; z-index: 1; font-family: var(--ff-font-serif); font-weight: 500; font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.01em; }
.h-head p { position: relative; z-index: 1; color: var(--ff-ink-2); font-size: 1.01rem; margin: 10px 0 0; max-width: 460px; }

/* ---- Search ---- */
.h-search-wrap { position: relative; z-index: 1; margin-top: 24px; }
.h-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ff-ink-3); pointer-events: none; }
.h-search-icon svg { width: 18px; height: 18px; display: block; }
.h-search { width: 100%; font: inherit; font-size: 1rem; color: var(--ff-ink); background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: 13px; padding: 14px 44px 14px 46px; transition: border-color .2s, box-shadow .2s; box-shadow: var(--ff-shadow-sm); }
.h-search:focus { outline: none; border-color: var(--ff-accent); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
.h-search::placeholder { color: var(--ff-ink-3); }
.h-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--ff-surface-2); color: var(--ff-ink-3); display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; line-height: 1; transition: background .15s, color .15s; }
.h-search-clear:hover { background: var(--ff-line); color: var(--ff-ink); }
.h-search-clear.visible { display: flex; }

/* ---- Search results banner ---- */
.h-results-bar { font-size: 0.88rem; color: var(--ff-ink-3); margin-bottom: 24px; min-height: 1.4em; }
.h-results-bar b { color: var(--ff-ink-2); }

/* ---- FAQ sections ---- */
.h-sections { display: flex; flex-direction: column; gap: 40px; }
.h-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.h-section-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--ff-accent-soft); display: grid; place-items: center; flex: none; color: var(--ff-accent-deep); }
.h-section-icon svg { width: 18px; height: 18px; }
.h-section-head h2 { font-family: var(--ff-font-serif); font-weight: 500; font-size: 1.5rem; }
.h-section-count { font-size: 0.84rem; color: var(--ff-ink-3); margin-left: 4px; font-family: var(--ff-font-sans); font-weight: 400; }

/* ---- Accordion card ---- */
.h-card { background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); overflow: hidden; }
.h-item { border-bottom: 1px solid var(--ff-line-soft); }
.h-item:last-child { border-bottom: 0; }
.h-item[hidden] { display: none; }
.h-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 20px 24px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--ff-ink); font-size: 0.98rem; font-weight: 600; line-height: 1.4; transition: background .15s, color .15s; }
.h-q:hover { background: var(--ff-surface-2); color: var(--ff-accent-deep); }
.h-q:hover .h-chevron { color: var(--ff-accent-deep); }
.h-item.open .h-q { color: var(--ff-accent-deep); background: var(--ff-accent-tint); }
.h-item.open .h-q .h-chevron { transform: rotate(180deg); color: var(--ff-accent-deep); }
.h-chevron { width: 18px; height: 18px; flex: none; color: var(--ff-ink-3); transition: transform .25s cubic-bezier(.4,0,.2,1), color .15s; }
.h-a-wrap { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.4,0,.2,1); }
.h-item.open .h-a-wrap { max-height: 600px; }
.h-a { padding: 0 24px 22px; color: var(--ff-ink-2); font-size: 0.97rem; line-height: 1.72; }
.h-a p { margin: 0 0 12px; }
.h-a p:last-child { margin-bottom: 0; }
.h-a a { color: var(--ff-accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.h-a a:hover { opacity: 0.8; }
.h-a ul { margin: 8px 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.h-a ul li { list-style: disc; }
.h-a strong { color: var(--ff-ink); font-weight: 600; }

/* ---- Empty state ---- */
.h-empty { display: none; text-align: center; padding: 64px 32px; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); }
.h-empty.show { display: block; }
.h-empty .h-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ff-surface-2); display: grid; place-items: center; margin: 0 auto 20px; color: var(--ff-ink-3); }
.h-empty .h-empty-icon svg { width: 24px; height: 24px; }
.h-empty h3 { font-family: var(--ff-font-serif); font-weight: 500; font-size: 1.5rem; margin-bottom: 10px; }
.h-empty p { color: var(--ff-ink-2); font-size: 0.97rem; max-width: 340px; margin: 0 auto; line-height: 1.6; }
.h-empty a { color: var(--ff-accent-deep); font-weight: 600; }

/* ---- Match highlight ---- */
mark { background: var(--ff-accent-soft); color: var(--ff-accent-deep); border-radius: 2px; padding: 0; font-weight: inherit; }

/* ---- Contact ---- */
.h-contact { margin-top: 48px; padding: 36px 32px; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); scroll-margin-top: 96px; }
@media (max-width: 600px) { .h-contact { padding: 28px 22px; } }
.h-contact-head h2 { font-family: var(--ff-font-serif); font-weight: 500; font-size: 1.6rem; }
.h-contact-head p { color: var(--ff-ink-2); font-size: 0.97rem; margin: 8px 0 0; }
.h-contact-form { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.h-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .h-field-row { grid-template-columns: 1fr; } }
.h-field label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--ff-ink-2); margin-bottom: 7px; }
.h-field label .opt { font-weight: 400; color: var(--ff-ink-3); margin-left: 5px; font-size: 0.8rem; }
.h-input { width: 100%; font: inherit; font-size: 0.97rem; color: var(--ff-ink); background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: 11px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.h-input:focus { outline: none; border-color: var(--ff-accent); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
.h-input::placeholder { color: var(--ff-ink-3); }
.h-input.is-invalid { border-color: oklch(0.62 0.16 25); background: oklch(0.985 0.012 25); }
textarea.h-input { resize: vertical; min-height: 120px; line-height: 1.6; }
.h-field-error { font-size: 0.8rem; color: oklch(0.55 0.17 25); margin-top: 6px; }
.h-alert { padding: 11px 14px; font-size: 0.86rem; font-weight: 500; color: oklch(0.45 0.16 25); background: oklch(0.97 0.02 25); border: 1px solid oklch(0.85 0.07 25); border-radius: 11px; }
.h-contact-foot { display: flex; justify-content: flex-end; }