/* =====================================================================
   FAQ PAGE (الأسئلة المتكررة): masthead, featured definition card,
   accordion list with a decorative sticky media rail.
   Page-specific layout. Loaded only on pages/faq.html.
   Built entirely on the shared tokens + motifs (dome frame, gold rule,
   lattice watermark, kicker/h-sec, the +/- accordion sign). No new hues,
   no raw values, no side-stripe accents, no gradient text.
   ===================================================================== */

/* ---------- 1. MASTHEAD ----------
   Reuses the shared `.page-hero` component (assets/css/base.css). No
   page-specific rules required. */

/* ---------- 2. FEATURED DEFINITION (cream-warm light band) ----------
   The anchor question ("ما هو المجلس؟") is lifted out of the list and shown
   open by default as a two-column split: the answer rides the start side, a
   dome-framed council image rides the end side. This is the page's strongest
   image + contrast beat, and it keeps the published question order (this is
   the first item) intact. */
.faq-intro { background: var(--bg-page); }
.faq-intro .wrap { display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center; }
.faq-intro-q { font-family: var(--font-heading-ar); font-weight: 800;
  font-size: clamp(26px, 3vw, 42px); line-height: var(--leading-snug); letter-spacing: 0;
  color: var(--ink); margin: 0 0 var(--space-12); }
.faq-intro-a { font-size: 16.5px; line-height: 1.95; color: var(--aeblack-700);
  margin: 0; max-width: 60ch; }
.faq-intro-media { justify-self: center; width: 100%; }
.faq-intro-media .framed { display: block; width: 100%; }
.faq-intro-media .shot { aspect-ratio: 4 / 3; }

/* ---------- 3. FAQ BODY (canvas, full-width accordion) ----------
   The remaining questions stay in their published order in an enhanced gold
   accordion spanning the content width. Native <details>/<summary>: no JS,
   keyboard accessible. */
.faq-body { background: var(--bg-page); }
.faq-layout { display: block; }
.faq-acc { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.faq-item { position: relative; isolation: isolate; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard); }
/* Open tint rides a pseudo-element so it eases in; a solid-to-gradient background swap cannot be transitioned. */
.faq-item::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-muted); opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard); }
.faq-item:hover { border-color: var(--aegold-300); }
.faq-item[open] { border-color: var(--aegold-400); }
.faq-item[open]::before { opacity: 1; }

/* question row */
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: var(--space-9); padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 30px); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px;
  border-radius: var(--radius-lg); }
.faq-q-text { flex: 1; font-family: var(--font-heading-ar); font-weight: var(--weight-semibold);
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: var(--ink);
  transition: color var(--duration-base) var(--ease-standard); }
.faq-item[open] .faq-q-text { color: var(--aegold-800); font-weight: var(--weight-bold); }

/* expand / collapse affordance: a gold chip holding a chevron caret that flips
   open and fills with gold. Centered with flex (no inset-vs-transform conflict),
   so the glyph renders crisply in both RTL and LTR. */
.faq-sign { position: relative; isolation: isolate; flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--aegold-50); border: 1px solid var(--aegold-200); color: var(--aegold-700);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard); }
.faq-sign::before { content: ""; width: 9px; height: 9px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  border-bottom-right-radius: 2px; transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-emphasis); }
/* Gold fill cross-fades on ::after when the item opens; ::before is the chevron. */
.faq-sign::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--grad-gold); opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard); }
.faq-item:hover .faq-sign { border-color: var(--aegold-300); }
.faq-item[open] .faq-sign { border-color: transparent; color: var(--fg-on-gold); }
.faq-item[open] .faq-sign::after { opacity: 1; }
.faq-item[open] .faq-sign::before { transform: translateY(2px) rotate(-135deg); }

/* answer body: revealed with a soft fade (honors reduced motion). The answer
   sits flush under the question text, clearing the sign column. */
.faq-a { padding-block: 0 clamp(18px, 2vw, 26px);
  padding-inline: clamp(20px, 2vw, 30px) calc(clamp(20px, 2vw, 30px) + 38px + var(--space-9)); }
.faq-item[open] .faq-a { animation: faqReveal var(--duration-slow) var(--ease-emphasis); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-a-text { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--aeblack-700); }
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-a { animation: none; } }

/* =====================================================================
   RESPONSIVE: faq sections
   ===================================================================== */
@media (max-width: 1080px) {
  .faq-intro .wrap { grid-template-columns: 1fr; gap: 44px; }
  .faq-intro-media { max-width: 520px; order: -1; }
}
@media (max-width: 640px) {
  /* on the narrowest screens the answer clears its full width */
  .faq-a { padding-inline: clamp(20px, 2vw, 30px); }
  .faq-sign {
    inline-size: 44px;
    block-size: 44px;
  }
}