/* ===== Help Center — matches Figma "ZABA app" design ===== */
/* Colors reference tokens.css. Ink/label alphas are derived from their
   token via rgb(from …) so they stay identical but still track the token. */

html { scroll-behavior: smooth; }

/* ===== Hero ===== */
.help-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* pill + title */
  max-width: 707px;
  margin: 56px auto 0; /* nav + content */
  padding: 0 24px;
  text-align: center;
}
.help-hero .title-block { gap: 16px; } /* title + sub */
.help-hero__title {
  font-size: 64px; /* desktop — tweak in px */
  font-weight: var(--font-weight-extrabold);
  color: var(--color-label-primary);
}
.help-hero__sub {
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-bold);
  color: var(--color-label-secondary);
  line-height: var(--line-height-l); 
  padding: 0 96px;
}

/* ===== Layout ===== */
.help-layout {
  display: flex;
  align-items: flex-start;
  gap: 72px; /* sidebar + content */
  max-width: 1280px;
  margin: 72px auto 0; /* title and sub + content */
  padding: 0 96px;
}

/* ===== Sidebar ===== */
.help-aside {
  position: sticky;
  top: 32px;
  flex-shrink: 0;
  width: 254px;
  display: flex;
  flex-direction: column;
  gap: 40px; /* search field + sidebar */
}

.help-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-white);
  border: 1px solid rgb(from var(--color-label-primary) r g b / 0.08);
  border-radius: 9999px;
  cursor: text;
}
.help-search i { font-size: 18px; color: rgb(from var(--color-label-secondary) r g b / 0.45); }
.help-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-body-l); 
  font-weight: var(--font-weight-medium);
  color: var(--color-label-primary);
}
.help-search input::placeholder { color: rgb(from var(--color-label-secondary) r g b / 0.45); font-weight: var(--font-weight-medium); }
/* Hide the browser's native search clear button — we use our own */
.help-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.help-search__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-label-secondary);
  font-size: 18px;
  line-height: var(--line-height-s);
}
.help-search__clear:hover { color: var(--color-label-primary); }
.help-search__clear.hidden { display: none; }

/* Search-term highlight in answers */
.qa-q mark.hl,
.qa-body mark.hl {
  background: var(--color-yellow-200);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.toc-label {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-extrabold); 
  color: rgb(from var(--color-label-secondary) r g b / 0.45);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.toc {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 0px;
  font-size: var(--font-size-body-m); 
  font-weight: var(--font-weight-extrabold);
  color: rgb(from var(--color-label-secondary) r g b / 0.7);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.toc a::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 18px;
  border-radius: 4px;
  background: transparent;
}
.toc a:hover { background: rgb(from var(--color-label-primary) r g b / 0.03); }
.toc a.active { background: var(--color-brown-fill); color: var(--color-label-brown); } 
.toc a.active::before { background: var(--color-label-brown); }

/* ===== Content ===== */
.help-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px; /* section padding */
}
.topic { scroll-margin-top: 24px; }
.topic-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px; /* card title + card */
}
.topic-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.topic-icon i { font-size: 28px; line-height: var(--line-height-s); } /* icon size */
.topic-head h2 {
  font-size: var(--font-size-heading-m);
  font-weight: var(--font-weight-extrabold); 
  color: var(--color-label-primary);
}

/* ===== Accordions ===== */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qa {
  background: var(--color-white);
  border-radius: 20px;
  overflow: hidden;
}
.qa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.qa-q {
  font-size: var(--font-size-heading-xs); 
  font-weight: var(--font-weight-extrabold); 
  color: var(--color-label-primary);
}
.qa-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-label-primary);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qa-toggle i { font-size: 10px; font-weight: bold; } 
.qa.open .qa-toggle { transform: rotate(180deg); } /* flip to point up when open */

@media (prefers-reduced-motion: reduce) {
  .qa-toggle { transition: none; }
}

/* Smooth expand/collapse via grid-template-rows */
.qa-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.qa.open .qa-answer { grid-template-rows: 1fr; }
.qa-answer > div { overflow: hidden; }

.qa-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px 20px;
  font-size: var(--font-size-body-m); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-l); /* was 1.62 → 1.5 */
  color: rgb(from var(--color-label-primary) r g b / 0.72);
}
.qa-body ul,
.qa-body ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
}
.qa-body li { line-height: var(--line-height-l); } /* was 1.62 → 1.5 */
.qa-body strong { font-weight: var(--font-weight-bold); color: var(--color-label-primary); }
.qa-body .lead {
  font-size: var(--font-size-body-l); /* was 17px → 18px */
  font-weight: var(--font-weight-bold); /* was 800 */
  color: var(--color-label-primary);
  margin-top: 4px;
}
.qa-body a { color: var(--color-blue-600); font-weight: var(--font-weight-bold); text-decoration: none; word-break: break-word; }
.qa-body a:hover { text-decoration: underline; }

/* ===== CTA ===== */
.help-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 1088px;
  margin: 96px auto 0;
  padding: 56px 24px;
  background: var(--cta-orange);
  border-radius: 32px;
  text-align: center;
}
.help-cta__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-cta h2 { font-size: var(--font-size-heading-xl-mobile); font-weight: var(--font-weight-bold); color: var(--color-white); } /* 40px, was 800 */
.help-cta p { font-size: var(--font-size-body-xl); font-weight: var(--font-weight-medium); color: rgb(from var(--color-white) r g b / 0.62); } /* 20px */
.help-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-width: 300px;
  padding: 16px 32px;
  background: var(--color-accent-yellow);
  color: var(--color-label-primary);
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-bold); /* CTA button label, was 800 */
  border-radius: 9999px;
  text-decoration: none;
}
.help-cta__btn:hover { filter: brightness(0.97); }

/* Footer spacing on this page */
.site-footer { margin-top: 64px; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  /* ↓↓↓ HELP PAGE — MOBILE TWEAKABLES (adjust freely) ↓↓↓ */
  .title-block { align-self: stretch; text-align: center; } /* left-align hero title + sub on mobile */
  .help-hero__title { font-size: 32px; }        /* hero title size */
  .help-hero__sub   { font-size: 14px; padding: 0; } /* hero subtitle */
  .help-layout {
    flex-direction: column;
    gap: 40px;                                   /* sidebar ↔ content gap */
    padding: 0 20px;                             /* layout side padding */
  }
  .help-content { gap: 24px; }                   /* gap between topic sections */
  .topic-head h2 { font-size: 22px; }            /* topic heading size */
  .topic-head { margin-bottom: 12px; }           /* heading → cards gap */
  .qa-q { font-size: 16px; }                     /* question text size */
  .help-aside { position: static; width: 100%; gap: 32px; } /* ← gap between search field and TOC (tweak me) */
  .help-cta { margin-top: 56px; padding: 40px 20px; } /* CTA padding */
  .help-cta h2 { font-size: var(--font-size-heading-l); }
  .help-cta__btn { min-width: 0; width: 100%; }
}