/* =========================================================
   Balo — FAQ (faq.php)
   Transparent shell; only the card paints.
   ========================================================= */

/* Tokens */
:root{
  --faq-max: 900px;
  --radius: 18px;
  --gap: clamp(14px, 2vw, 22px);

  --text: var(--zen-text, #e9eefb);
  --muted: var(--zen-muted, #9aa6b0);

  --card-bg: var(--zen-card-bg, rgba(10,14,20,.88));
  --card-bd: var(--zen-card-bd, rgba(148,163,184,.08));
  --shadow: var(--zen-shadow, 0 10px 30px rgba(0,0,0,.36));
}

/* Hero (no background changes) */
.faq-hero{
  text-align: center;
  padding: clamp(40px, 8vw, 84px) 16px clamp(16px, 3.5vw, 32px);
  background: transparent !important;
  color: var(--text);
}
.faq-title{
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.05;
  margin: 12px 0 8px;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.faq-subtitle{
  font-size: clamp(16px, 2.2vw, 19px);
  opacity: .95;
  margin: 0 auto;
  max-width: 70ch;
}

/* Main & Card */
.faq-main{
  background: transparent !important;
  padding: 0 16px clamp(28px, 5vw, 56px);
}
.faq-card{
  max-width: var(--faq-max);
  margin: 0 auto;
  background: var(--card-bg) !important;  /* intentional surface */
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.2vw, 26px);
}

/* Accordion */
.faq-accordion{ display: grid; gap: var(--gap); }
.faq-item{ border-bottom: 1px solid rgba(148,163,184,.14); padding-bottom: 6px; }
.faq-item:last-child{ border-bottom: 0; }

.faq-question{
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 12px;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(99,102,241,.10), rgba(99,102,241,0)),
    linear-gradient(180deg, rgba(26,39,83,.55), rgba(16,26,51,.6));
  color: var(--text);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 18px);
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.faq-question:hover{
  transform: translateY(-1px);
  border-color: rgba(129,140,248,.45);
  box-shadow: 0 0 36px 6px rgba(99,102,241,.18);
}
.faq-question:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(99,102,241,.22);
}
.faq-question[aria-expanded="true"]{
  border-color: rgba(129,140,248,.55);
}

.faq-panel{
  padding: 12px 6px 6px 6px;
  color: var(--text);
  opacity: .95;
}
.faq-panel p{ margin: 0 0 8px; }
.faq-panel ul{
  margin: 6px 0 10px 18px;
  padding: 0;
}
.faq-panel li{ margin: 4px 0; }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .faq-question{ transition: none !important; }
}