/* FAQ page styles — Gravity Projex. Loaded via inc/assets.php per-template loader. */
/* ============================================================
   FAQ page — fully self-contained styles (scoped .gp-faq-*).
   Deliberately NOT reliant on Tailwind utilities: utility classes
   used only inside strings/markup can be purged from the compiled
   build and silently vanish. Everything the component needs lives
   here so it can never lose its styling.
   ============================================================ */

.gp-faq-wrap { max-width: 60rem; margin-inline: auto; padding-inline: 1.5rem; }

/* Hero */
.gp-faq-hero { position: relative; overflow: hidden; background: #020617; padding: 8rem 0 4rem; margin-top: 5rem; }
.gp-faq-hero__glow { position: absolute; bottom: 25%; right: -8rem; width: 24rem; height: 24rem; background: rgba(6,182,212,.18); border-radius: 9999px; filter: blur(80px); pointer-events: none; }
.gp-faq-hero__inner { position: relative; z-index: 1; max-width: 56rem; margin-inline: auto; padding-inline: 1.5rem; text-align: center; }
.gp-faq-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #ff6b6b; }
.gp-faq-title { font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 800; line-height: 1.05; color: #fff; margin: 1rem 0 1.25rem; }
.gp-faq-sub { font-size: 1.2rem; color: #94a3b8; max-width: 40rem; margin: 0 auto 2.25rem; }

/* Search */
.gp-faq-search { position: relative; max-width: 34rem; margin-inline: auto; }
.gp-faq-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: #64748b; pointer-events: none; }
.gp-faq-search input { width: 100%; padding: 1.1rem 1.25rem 1.1rem 3rem; font-size: 1.05rem; color: #fff; background: rgba(15,23,42,.8); border: 1px solid #334155; border-radius: 9999px; }
.gp-faq-search input::placeholder { color: #64748b; }
.gp-faq-search input:focus { outline: 2px solid #7c3aed; outline-offset: 2px; border-color: transparent; }

/* Category pills */
.gp-faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 2.5rem 0 0; }
.gp-faq-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.15rem; font-size: .9rem; font-weight: 600; line-height: 1.4; color: #cbd5e1; background: transparent; border: 1px solid rgba(100,116,139,.55); border-radius: 9999px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.gp-faq-tab:hover { color: #fff; border-color: rgba(139,92,246,.6); }
.gp-faq-tab:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.gp-faq-tab[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(90deg, #7c3aed, #06b6d4); }

/* List container */
.gp-faq-section { padding-bottom: 5rem; }
.gp-faq-panel { background: rgba(15,23,42,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.5rem; }
@media (min-width: 768px){ .gp-faq-panel { padding: 2.5rem; } }
.gp-faq-count { font-size: .85rem; color: #64748b; margin: 0 0 .5rem; padding-inline: .25rem; }

/* Item */
.gp-faq-item { border-bottom: 1px solid rgba(255,255,255,.1); }
.gp-faq-item:last-child { border-bottom: 0; }
.gp-faq-item[hidden] { display: none; }
.gp-faq-item h3 { margin: 0; }
.gp-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem .25rem; text-align: left; background: none; border: 0; cursor: pointer; color: #fff; font-family: inherit; font-size: 1.12rem; font-weight: 600; line-height: 1.4; }
.gp-faq-q:hover { color: #22d3ee; }
.gp-faq-q:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; border-radius: .25rem; }
.gp-faq-chevron { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: #64748b; transition: transform .3s ease; }
.gp-faq-item.is-open .gp-faq-chevron { transform: rotate(180deg); }
.gp-faq-a { color: #94a3b8; line-height: 1.7; }
.gp-faq-a p { margin: 0; padding: 0 .25rem 1.5rem; }

/* Enhanced (JS on): collapse answers into an accordion. Without [data-enhanced]
   every answer stays open and readable — the no-JS / crawler baseline. */
[data-enhanced] .gp-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
[data-enhanced] .gp-faq-item.is-open .gp-faq-a { /* max-height set inline by JS to scrollHeight */ }

/* Empty state */
.gp-faq-empty { text-align: center; padding: 3rem 1rem; color: #94a3b8; }
.gp-faq-empty[hidden] { display: none; }

/* CTA */
.gp-faq-cta { position: relative; overflow: hidden; background: #020617; padding: 8rem 0; text-align: center; }
.gp-faq-cta__inner { position: relative; z-index: 1; max-width: 56rem; margin-inline: auto; padding-inline: 1.5rem; }
.gp-faq-cta__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; height: 500px; background: rgba(124,58,237,.2); border-radius: 9999px; filter: blur(80px); pointer-events: none; }
.gp-faq-cta__badge { width: 5rem; height: 5rem; border-radius: 9999px; background: linear-gradient(135deg, #8b5cf6, #06b6d4); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; box-shadow: 0 10px 30px rgba(124,58,237,.3); }
.gp-faq-cta h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; color: #fff; margin: 0 0 1.5rem; }
.gp-faq-cta p { font-size: 1.2rem; color: #94a3b8; max-width: 40rem; margin: 0 auto 2.5rem; }
.gp-faq-cta__link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #fff; font-size: 1.05rem; }
.gp-faq-cta__link:hover .gp-faq-cta__arrow { transform: translateX(4px); }
.gp-faq-cta__arrow { transition: transform .2s ease; }