/* Help & Support page (render_help_support in app/pages/) -- the FAQ
   search box and its result cards. Same per-page-CSS convention as
   loot-tracker.css / goal-tracking.css. */

.hs-search-group { position: relative; margin-bottom: 18px; }
.hs-search { height: 44px; padding: 0 58px 0 14px; font-size: 15px; }
.hs-search-clear {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  background: none; border: none; padding: 0; margin: 0;
  font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-faint); cursor: pointer;
}
.hs-search-clear:hover { color: var(--text); }

.hs-status { margin: 0 0 14px; text-align: center; color: var(--text-faint); font-size: 13px; }
.hs-status a { color: var(--gold-dim); }
.hs-status a:hover { color: var(--gold); }

.hs-note { margin: 18px 0 0; text-align: center; color: var(--text-faint); font-size: 13px; }
.hs-note a { color: var(--gold-dim); }
.hs-note a:hover { color: var(--gold); }

.hs-results { display: flex; flex-direction: column; gap: 18px; }

.hs-result {
  background: var(--panel-translucent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* The question row -- a full-width button: chevron on the left, question
   text beside it. Hover brightens the same way the dashboard cards do. */
.hs-result-q {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 20px;
  background: none; border: none; margin: 0;
  color: var(--text); font: inherit; font-size: 16px; letter-spacing: 0.02em;
  text-align: left; cursor: pointer;
}
.hs-result-q:hover { background-color: rgb(51, 51, 54); }
.hs-result-q:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: -1px; }
.hs-result-qtext { flex: 1 1 auto; min-width: 0; }

/* Right-pointing chevron that turns downward when the answer is open. */
.hs-chevron {
  flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--gold-dim); border-bottom: 2px solid var(--gold-dim);
  transform: rotate(-45deg); transition: transform 0.12s ease;
  margin-left: 2px;
}
.hs-result-q:hover .hs-chevron { border-color: var(--gold); }
.hs-result.open .hs-chevron { transform: rotate(45deg); }

/* Answer text lines up under the question text (20px padding + 8px icon
   + 2px margin + 14px gap = 44px). */
.hs-result-answer {
  margin: 0; padding: 14px 20px 18px 44px;
  color: var(--text-muted); font-size: 15px; line-height: 1.5;
}
.hs-result-answer[hidden] { display: none; }
.hs-result-answer a { color: var(--gold-dim); }
.hs-result-answer a:hover { color: var(--gold); }


/* ---- Phone ----------------------------------------------------------
   Same 320px centered column as the other phone pages (leaves a side
   gutter for thumb page-scroll). Scoped body:not(.landing). */
@media (max-width: 700px) {
  body:not(.landing) .hs-search-group,
  body:not(.landing) .hs-results,
  body:not(.landing) .hs-status,
  body:not(.landing) .hs-note { max-width: 320px; margin-left: auto; margin-right: auto; }
  body:not(.landing) .hs-search-group { margin-bottom: 14px; }
  /* 16px: phone browsers (iOS Safari) zoom the whole page in when a
     text field under 16px is focused. */
  body:not(.landing) .hs-search { font-size: 16px; padding-right: 64px; }
  /* Bigger tap target for CLEAR without moving it. */
  body:not(.landing) .hs-search-clear { right: 4px; padding: 12px 10px; font-size: 11px; }
  body:not(.landing) .hs-results { gap: 12px; }
  body:not(.landing) .hs-result-q { padding: 14px 14px; gap: 12px; font-size: 14px; line-height: 1.35; }
  /* Answer lines up under the question text: 14 + 8 + 2 + 12 = 36px. */
  body:not(.landing) .hs-result-answer { padding: 12px 14px 16px 36px; font-size: 14px; }
  body:not(.landing) .hs-result-answer,
  body:not(.landing) .hs-result-qtext { overflow-wrap: anywhere; }
}

/* Touch: no sticky hover highlight on a question row after tapping it. */
@media (hover: none) {
  body:not(.landing) .hs-result-q:hover { background-color: transparent; }
  body:not(.landing) .hs-result-q:hover .hs-chevron { border-color: var(--gold-dim); }
  body:not(.landing) .hs-result-q:active { background-color: rgb(51, 51, 54); }
  body:not(.landing) .hs-search-clear:hover { color: var(--text-faint); }
}


/* ---- Landing page "GOT QUESTIONS?" panel -----------------------------
   The same search box and result rows as the Help & Support page, as the
   last .landing-anchor before the closing call to action. Anchored to the
   top (like the app previews) so the panel doesn't jump as results change. */
.landing-anchor--faq {
  align-items: flex-start;
  padding-top: max(40px, 9vh);
}
.landing-faq { width: 100%; max-width: 880px; }
.landing-faq-title {
  margin: 0 0 28px;
  color: var(--gold);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
}
body.landing .hs-results { gap: 10px; }
body.landing .hs-result-q { padding: 14px 20px; }

@media (max-width: 700px) {
  body.landing .landing-faq-title { font-size: 30px; margin-bottom: 20px; }
  body.landing .hs-search-group { margin-bottom: 14px; }
  /* 16px: phone browsers zoom in when a text field under 16px is focused. */
  body.landing .hs-search { font-size: 16px; padding-right: 64px; }
  body.landing .hs-search-clear { right: 4px; padding: 12px 10px; font-size: 11px; }
  body.landing .hs-results { gap: 8px; }
  body.landing .hs-result-q { padding: 12px 14px; gap: 12px; font-size: 14px; line-height: 1.35; }
  body.landing .hs-result-answer { padding: 12px 14px 16px 36px; font-size: 14px; }
  body.landing .hs-result-answer,
  body.landing .hs-result-qtext { overflow-wrap: anywhere; }
}

@media (hover: none) {
  body.landing .hs-result-q:hover { background-color: transparent; }
  body.landing .hs-result-q:hover .hs-chevron { border-color: var(--gold-dim); }
  body.landing .hs-result-q:active { background-color: rgb(51, 51, 54); }
  body.landing .hs-search-clear:hover { color: var(--text-faint); }
}