/* =========================================================
   FAQ COMPONENT
   Comes after the camera. Cards are built by js/faq/main.js (edit ITEMS there).
   Font: Biro Script (see assets/fonts/README.txt), falls back to Reenie Beanie.
   ========================================================= */

/* Biro Script by Ingo Zimmermann. Put the font file in assets/fonts/ (see the README there).
   If it isn't installed or found, the page falls back to Reenie Beanie (Google Fonts). */
@font-face{
  font-family:"Biro Script";
  src:local("Biro Script"),
      local("Biro Script reduced"),
      local("BiroScript"),
      url("../assets/fonts/BiroScript.woff2") format("woff2"),
      url("../assets/fonts/BiroScript.woff") format("woff"),
      url("../assets/fonts/BiroScript.ttf") format("truetype");
  font-display:swap;
}



.faq-section{
  /* sits above the fixed dots layer, like the camera section */
  position:relative;
  z-index:1;
  font-family:"Biro Script","Reenie Beanie","Bradley Hand","Segoe Print",cursive;
  color:#323232;
}

.faq{
  max-width:541px;
  margin:0 auto;
  padding:clamp(12px,4vw,40px) clamp(8px,3vw,16px);
  padding-bottom:max(clamp(12px,4vw,40px),env(safe-area-inset-bottom,0px));
}

/* Frame proportions come from the original SVG (541 wide: 4 margin, 80 tab, 453 panel).
   100cqw = the item's width = 541 design units, so everything scales together. */
.faq__item{
  container-type:inline-size;
  margin-bottom:clamp(8px,2.2vw,14px);
  filter:drop-shadow(0 .74cqw .37cqw rgba(0,0,0,.25));
}

.faq__card{
  all:unset;
  display:flex;                            /* a <button> centres its content vertically by default, which pushed the question down while the card grew */
  flex-direction:column;
  justify-content:flex-start;              /* keep the question pinned to the top */
  position:relative;
  margin:0 calc(100cqw * 4 / 541);
  overflow:hidden;
  background:#55ABD2;                      /* panel */
  cursor:pointer;
  /* no JS sizing: the card is as tall as its content, never shorter than the frame strip */
  min-height:calc(100cqw * 108 / 541);
  transition:min-height .45s ease;
  -webkit-tap-highlight-color:transparent;
}
.faq__card::before{                         /* tab */
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:calc(100cqw * 80 / 541);
  background:#3C9BBD;
}
.faq__card:focus-visible{outline:3px solid #323232;outline-offset:2px}

/* natural-height content: measured by JS to size the card */
.faq__inner{
  position:relative;
  display:block;
  padding:7.6cqw 2.5cqw 4.6cqw calc(100cqw * 80 / 541 + 2.5cqw);
  text-align:center;
  overflow-wrap:anywhere;
}
.faq__q,
.faq__a{display:block}
.faq__q{
  font-size:6.6cqw;
  line-height:1.15;
  color:#323232;
  padding:0 7cqw 0 0;                       /* keeps long questions clear of the edge */
}
.faq__card[aria-expanded="true"]{min-height:calc(100cqw * 372 / 541)}   /* open: at least the full frame */

/* answer folds open with a grid-rows animation, so the closed card is exactly the question row */
.faq__ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.faq__card[aria-expanded="true"] .faq__ans{grid-template-rows:1fr}
.faq__clip{display:block;overflow:hidden;min-height:0}
.faq__a{
  margin-top:7cqw;
  font-size:6.2cqw;
  line-height:1.3;
  color:#323232;
}

/* plus -> minus (strokes from the original asset, viewBox is the top strip of the frame) */
.faq__icon{
  position:absolute;
  left:calc(-100cqw * 4 / 541);
  top:0;
  width:100cqw;
  height:auto;
  pointer-events:none;
}
.faq__plus{transform-box:view-box;transform-origin:44px 64px;transition:transform .45s ease}
.faq__vbar{transform-box:fill-box;transform-origin:center;transition:transform .35s ease,opacity .35s ease}
.faq__card[aria-expanded="true"] .faq__plus{transform:rotate(180deg)}
.faq__card[aria-expanded="true"] .faq__vbar{transform:scaleY(0);opacity:0}

@media (prefers-reduced-motion:reduce){
  .faq__card,.faq__ans,.faq__plus,.faq__vbar{transition:none}
}

/* used by js/faq/main.js while it measures the tallest state */
.faq--measuring *{transition:none !important}

/* =========================================================
   SCATTERED HORIZONTAL LAYOUT
   The five cards lie side by side on a fixed-size "table", tilted like loose strips.
   Each card is pinned to its own spot (absolute), so opening/closing one grows it in
   place, on top of its neighbours, and nothing else moves. The table never changes size.
   Tweak per card: --rot (degrees), left / top (% of the table).
   ========================================================= */
.faq-section{
  overflow-x:clip;                              /* no scrollbar, ever; tilted cards just stay inside the width */
  overflow-y:visible;                           /* an opened card may overlap whatever is below it */
  z-index:2;                                    /* so an opened card is drawn above the next section */
  padding:0;
}
/* The table is exactly as tall as the cards need, with the same empty margin (60 of 477 units)
   above the highest card and below the lowest one. */
.faq{
  position:relative;
  width:100%;
  max-width:none;
  aspect-ratio:1190 / 477;
  margin:0 auto;
  padding:0;
}
.faq__item{
  position:absolute;
  width:30%;
  margin:0;
  transform:rotate(var(--rot,0deg));
  transform-origin:50% 0;                       /* grows downward from its top edge, pivot stays put */
}
.faq__item:nth-child(1){--rot:-15deg; left:0%;  top:25.3%}
.faq__item:nth-child(2){--rot:8deg;   left:23.4%; top:44.2%}
.faq__item:nth-child(3){--rot:-8deg;  left:38.7%; top:17.8%}
.faq__item:nth-child(4){--rot:30deg;  left:60.7%; top:55.8%}
.faq__item:nth-child(5){--rot:-17deg; left:68.5%; top:25.9%}

/* the card being read comes to the front */
.faq__item:has(.faq__card[aria-expanded="true"]){z-index:5}

/* =========================================================
   TABLET AND SMALLER (1024px and below): plain vertical list
   Cards are stacked in one straight column, no tilt. Opening one still never moves
   anything else on the page: js/faq/main.js reserves the height of the tallest state.
   ========================================================= */
@media (max-width:1024px){
  .faq{
    position:static;
    aspect-ratio:auto;
    max-width:541px;
    padding:clamp(12px,4vw,40px) clamp(8px,3vw,16px);
    padding-bottom:max(clamp(12px,4vw,40px),env(safe-area-inset-bottom,0px));
  }
  .faq__item{
    position:relative;
    width:auto;
    transform:none;
    margin-bottom:clamp(8px,2.2vw,14px);
  }
  .faq__item:nth-child(n){left:auto;top:auto}
}

/* used by js/faq/main.js while it measures the tallest state */
.faq--measuring *{transition:none !important}