/* ============================================================
   FRND — the ACCORDION atom
   One treatment, three homes: the landing page FAQ (frnd.html
   "10 / FAQ"), the Trust & Safety FAQ, and the report-year groups
   on the Trust & Safety page.

   Built on <details>/<summary> so it opens, closes and is
   keyboard-reachable with the JS switched off; frnd-faq.js only
   adds the height animation and the one-open-at-a-time rule.

   The open row is the page's accent: pink ring, pink toggle. The
   closed rows are a quiet outline so a stack of five does not
   shout louder than the heading above it.
   ============================================================ */

.fqs{ display:flex; flex-direction:column; gap:calc(18 * var(--s)); }

.fq{
  position:relative;
  border-radius:calc(28 * var(--s));
  background:transparent;
  box-shadow:inset 0 0 0 calc(2.5 * var(--s)) rgba(255,255,255,.14);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.fq[open]{
  background:#2A211E;
  box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--pink);
}
/* on the light grounds (policy pages) the same atom flips */
.fqs--light .fq{ box-shadow:inset 0 0 0 calc(2.5 * var(--s)) rgba(23,17,15,.16); }
.fqs--light .fq[open]{ background:#fff; box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--pink); }

.fq__q{
  display:flex; align-items:center; gap:calc(20 * var(--s));
  padding:calc(32 * var(--s)) calc(36 * var(--s));
  margin:0; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:800;
  font-size:max(17px, calc(26 * var(--s)));
  line-height:1.18; letter-spacing:-.02em;
  color:#fff;
}
.fqs--light .fq__q{ color:var(--ink); }
.fq__q::-webkit-details-marker{ display:none; }
.fq__q:focus-visible{ outline:calc(3 * var(--s)) solid var(--pink); outline-offset:calc(3 * var(--s)); border-radius:calc(28 * var(--s)); }

/* the +/− knob. A real element, not a glyph in the text flow, so it
   stays on the optical centre whatever the question wraps to. */
.fq__tg{
  flex:none; margin-left:auto; position:relative;
  width:calc(44 * var(--s)); height:calc(44 * var(--s));
  border-radius:999px; background:rgba(255,255,255,.12);
  transition:background-color .3s var(--ease), transform .4s var(--bounce);
}
.fqs--light .fq__tg{ background:rgba(23,17,15,.08); }
.fq[open] .fq__tg{ background:var(--pink); transform:rotate(180deg); }
.fq__tg::before, .fq__tg::after{
  content:''; position:absolute; left:50%; top:50%;
  width:calc(15 * var(--s)); height:calc(2.5 * var(--s));
  border-radius:2px; background:#fff;
  transform:translate(-50%,-50%);
  transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.fqs--light .fq__tg::before, .fqs--light .fq__tg::after{ background:var(--ink); }
.fq__tg::after{ transform:translate(-50%,-50%) rotate(90deg); }
.fq[open] .fq__tg::before, .fq[open] .fq__tg::after{ background:#fff; }
.fq[open] .fq__tg::after{ opacity:0; transform:translate(-50%,-50%) rotate(0deg); }

/* The answer. grid-template-rows 0fr -> 1fr is the only way to
   animate to an UNKNOWN height; max-height guesses and either
   clips a long answer or makes a short one crawl open. */
.fq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease);
}
.fq.is-open .fq__a{ grid-template-rows:1fr; }
.fq__a > div{ overflow:hidden; }
.fq__a p{
  margin:0;
  padding:0 calc(36 * var(--s)) calc(36 * var(--s));
  font-weight:500;
  font-size:max(14.5px, calc(18 * var(--s)));
  line-height:1.66;
  color:rgba(255,255,255,.72);
}
.fqs--light .fq__a p{ color:rgba(23,17,15,.76); }
/* the hairline between question and answer */
.fq__a p::before{
  content:''; display:block;
  height:calc(2 * var(--s)); margin:0 0 calc(24 * var(--s));
  background:rgba(255,255,255,.14);
}
.fqs--light .fq__a p::before{ background:rgba(23,17,15,.12); }

/* No JS: <details> still toggles, it just snaps. Without this the
   closed rows would animate from 0fr and never show anything,
   because the browser hides the content outright. */
html:not(.js) .fq[open] .fq__a{ grid-template-rows:1fr; }

@media (max-width:1040px){
  .fqs{ gap:14px; }
  .fq{ border-radius:24px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.14); }
  .fq[open]{ box-shadow:inset 0 0 0 2px var(--pink); }
  .fqs--light .fq{ box-shadow:inset 0 0 0 2px rgba(23,17,15,.16); }
  .fqs--light .fq[open]{ box-shadow:inset 0 0 0 2px var(--pink); }
  .fq__q{ padding:22px; gap:14px; font-size:18px; }
  .fq__tg{ width:36px; height:36px; }
  .fq__tg::before, .fq__tg::after{ width:13px; height:2px; }
  .fq__a p{ padding:0 22px 24px; font-size:15.5px; line-height:1.62; }
  .fq__a p::before{ height:2px; margin-bottom:18px; }
}

@media (prefers-reduced-motion: reduce){
  .fq, .fq__tg, .fq__a{ transition:none !important; }
}