/* =====================================================================
   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: linear-gradient(180deg, var(--aegold-50), var(--bg-surface) 72%); }
.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, accordion + media rail) ----------
   The remaining questions stay in their published order in an enhanced gold
   accordion. A sticky decorative rail (tall dome image + gold dome seal) sits
   on the end side so the section reads as a designed two-column spread, not a
   dry single list. Native <details>/<summary>: no JS, keyboard accessible. */
.faq-body { background: var(--bg-page); }
.faq-layout { display: grid; grid-template-columns: 1.18fr .82fr;
  gap: clamp(32px, 4vw, 72px); align-items: start; }

/* accordion: separated white cards on the warm canvas */
.faq-acc { display: flex; flex-direction: column; gap: var(--space-8); }
.faq-item { 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),
              background var(--duration-base) var(--ease-standard); }
.faq-item:hover { border-color: var(--aegold-300); }
.faq-item[open] { border-color: var(--aegold-400); background: linear-gradient(180deg, var(--aegold-50), var(--bg-surface) 60%); }

/* 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 { 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: background var(--duration-base) var(--ease-standard),
              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); }
.faq-item:hover .faq-sign { border-color: var(--aegold-300); }
.faq-item[open] .faq-sign { background: var(--grad-gold); border-color: transparent; color: var(--fg-on-gold); }
.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; } }

/* decorative media rail: sticky tall dome image + gold dome seal */
.faq-rail { position: sticky; inset-block-start: calc(var(--hdr) + 24px);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.faq-rail .framed { display: block; width: 100%; }
.faq-rail .shot { aspect-ratio: 4 / 5; }

/* =====================================================================
   RESPONSIVE: faq sections
   ===================================================================== */
@media (max-width: 1080px) {
  .faq-intro .wrap { grid-template-columns: 1fr; gap: 44px; }
  .faq-intro-media { max-width: 520px; order: -1; }
  /* fold to one column: questions lead, the decorative rail follows */
  .faq-layout { grid-template-columns: 1fr; gap: 44px; }
  .faq-rail { position: static; flex-direction: row; justify-content: center;
    gap: clamp(20px, 4vw, 48px); max-width: 560px; margin-inline: auto; }
  .faq-rail .framed { max-width: 320px; }
  .faq-rail .shot { aspect-ratio: 1 / 1; }
}
@media (max-width: 640px) {
  .faq-rail { flex-direction: column; }
  .faq-rail .framed { max-width: 100%; }
  .faq-rail .shot { aspect-ratio: 4 / 3; }
  /* on the narrowest screens the answer clears its full width */
  .faq-a { padding-inline: clamp(20px, 2vw, 30px); }
}