/* ==========================================================
   YOGERA — FAQ PAGE STYLES (creative redesign)
   Used by: faq.html only. Depends on shared.css + resources.css
   (reuses .res-note, .faq-item/.faq-q/.faq-a from shared.css).
   ========================================================== */

.faq-ambient{
  position:absolute; top:120px; left:50%; transform:translateX(-50%);
  width:640px; height:360px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, var(--blue-soft) 0%, transparent 65%),
             radial-gradient(ellipse at 70% 30%, var(--purple-soft) 0%, transparent 60%);
  filter:blur(10px); opacity:0.8;
}

.faq-hero-wrap{ position:relative; z-index:1; padding:170px 24px 10px; text-align:center; }
.faq-hero-wrap h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing:-0.01em; margin-top:14px; }
.faq-hero-wrap p{ margin-top:14px; color:var(--text-muted); font-size:15.5px; }

.faq-search{
  position:relative; max-width:520px; margin:28px auto 0;
  display:flex; align-items:center; gap:12px;
  background:var(--surface-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-pill);
  padding:15px 22px; box-shadow:0 16px 40px var(--shadow-md);
  transition:border-color var(--dur-micro) var(--ease), box-shadow var(--dur-comp) var(--ease);
}
.faq-search:focus-within{ border-color:var(--blue); box-shadow:0 16px 40px var(--blue-glow); }
.faq-search i{ color:var(--text-faint); font-size:15px; }
.faq-search input{ flex:1; border:none; background:none; outline:none; font-size:15px; color:var(--text-primary); font-family:inherit; }

.faq-body-wrap{ position:relative; z-index:1; padding:44px 24px 0; }

.faq-pills{ display:none; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.faq-pill{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); font-size:12.5px; font-weight:600; color:var(--text-secondary);
  transition:all var(--dur-micro) var(--ease); white-space:nowrap;
}
.faq-pill:hover{ border-color:var(--blue-glow); color:var(--text-primary); }
.faq-pill.is-active{ background:linear-gradient(135deg, var(--blue), var(--purple)); color:#fff; border-color:transparent; }

.faq-layout{ display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:start; }
.faq-rail{ position:sticky; top:110px; display:flex; flex-direction:column; gap:2px; }
.faq-rail-item{
  text-align:left; padding:11px 14px; border-radius:var(--radius-md); font-size:13.5px; font-weight:600;
  color:var(--text-muted); transition:all var(--dur-micro) var(--ease);
}
.faq-rail-item:hover{ background:var(--surface-hover); color:var(--text-primary); }
.faq-rail-item.is-active{ background:var(--blue-soft); color:var(--blue); }

.faq-content{ min-width:0; }
.faq-list{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:6px 24px; }
.faq-list .faq-item.is-hidden{ display:none; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:18px 4px; text-align:left; font-size:14.5px; font-weight:600; color:var(--text-primary); }
.faq-q:hover{ color:var(--blue); }

.faq-empty{ display:none; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:60px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); }
.faq-empty.is-visible{ display:flex; }
.faq-empty i{ font-size:34px; color:var(--text-faint); }
.faq-empty p{ color:var(--text-muted); font-size:14.5px; max-width:360px; }

.faq-help-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:40px; padding:30px 32px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--blue-soft), var(--purple-soft)), var(--surface);
  border:1px solid var(--line);
}
.faq-help-card h3{ font-family:var(--font-display); font-size:19px; margin-bottom:6px; }
.faq-help-card p{ color:var(--text-muted); font-size:13.5px; }
.faq-help-actions{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:860px){
  .faq-layout{ grid-template-columns:1fr; }
  .faq-rail{ display:none; }
  .faq-pills{ display:flex; overflow-x:auto; padding-bottom:4px; }
}
@media (max-width:640px){
  .faq-help-card{ flex-direction:column; align-items:flex-start; }
  .faq-list{ padding:2px 16px; }
}