/* ============================================================
   FAQ — the live selrai.com.au FAQ component, value for value.
   Measured 2026-08-19 off www.selrai.com.au at 1440x900 (the
   `.selr-faq` card the site injects over the Framer CMS FAQ) and
   off the giant-word preset `framer-styles-preset-4ieb34`.

   Loads AFTER sections.css, so the older #your-day FAQ rules in
   sections.css no longer have anything to match: this file ships
   its own `selr-fq-*` names and the partial no longer carries
   `.selr-faq-wrap` / `.selr-faq-h` / `.selr-faq-list`.

   Accordion mechanics stay on motion.css (`.selr-acc`,
   `.selr-acc-btn`, `.selr-acc-panel`, `.selr-acc-body`,
   `.selr-acc-ico`). Everything here is restyle only.
   ============================================================ */

/* Section field — ground.css swells #your-day to its warm canvas (#F6F3EC),
   which was right for the old glass FAQ frame but leaves this card's #F7F5EF
   fill invisible: measured 246,243,236 ground under a 247,245,239 card. On the
   live site the FAQ card sits on #FCFCFA and reads clearly. Same gradient
   shape as ground.css so the section still starts and ends on the seam, just
   the near-white swell instead of the warm one. */
#your-day {
  background: linear-gradient(180deg,
    var(--gnd-seam, #FAF9F5) 0%, var(--gnd-light, #FCFCFA) 30%,
    var(--gnd-light, #FCFCFA) 70%, var(--gnd-seam, #FAF9F5) 100%) !important;
}

/* Section shell — site: section padding 120px 0, inner 0 60px,
   80px between the giant word and the card. */
#your-day > .selr-sec-inner {
  padding: 120px 60px;
  gap: 80px;
}

/* ---- the giant word ----------------------------------------
   Site preset 4ieb34: "Manrope Variable" wght 500, 120px,
   -0.04em, line-height 100%, #242424, centred.
   Breakpoints from the same preset: 80px 810-1199, 50px <=809.

   Scoped on #your-day, and the size carries !important, because vsl.css
   pins every `.selr-sec h2` to --selr-t-h2 with !important. That rule is the
   section-heading scale; this heading is the giant display word instead. */
.selr-fq-head { width: 100%; }
#your-day .selr-fq-word {
  margin: 0;
  width: 100%;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400;
  font-variation-settings: "wght" 500;
  font-size: 120px !important;
  letter-spacing: -0.04em;
  line-height: 100%;
  color: #242424;
  text-align: center;
}

/* ---- the card ---------------------------------------------- */
.selr-fq {
  width: 100%;
  max-width: 600px;
  background: #F7F5EF;
  border-radius: 40px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ---- category pills ---------------------------------------- */
.selr-fq-cats {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}
.selr-fq-cat {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  padding: 9px 13px;
  border-radius: 30px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: -0.325px;
  color: #242424;
  transition: background-color 300ms var(--selr-ease-over, cubic-bezier(.22, 1, .36, 1)),
              color 300ms var(--selr-ease-over, cubic-bezier(.22, 1, .36, 1));
}
.selr-fq-cat[aria-selected="true"] {
  background: #6736E2;
  color: #FFFFFA;
}
.selr-fq-cat:focus-visible {
  outline: var(--selr-focus-width, 2px) solid var(--selr-focus, #6736E2);
  outline-offset: var(--selr-focus-offset, 2px);
}

/* ---- the card list ----------------------------------------- */
.selr-fq-list {
  width: 100%;
  padding: 0 29px 19px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  /* filter fade: house standard curve, 150ms out + 150ms in = 300ms */
  transition: opacity 150ms var(--selr-ease, cubic-bezier(.4, 0, .2, 1));
}
.selr-fq-list.is-fq-out { opacity: 0; }
.selr-fq-list .selr-acc[hidden] { display: none; }

/* ---- one question ------------------------------------------ */
.selr-fq-list .selr-acc {
  border: 0;
  border-radius: 30px;
  background: #FFFFFA;
  overflow: hidden;
  transition: background-color 300ms var(--selr-ease-over, cubic-bezier(.22, 1, .36, 1));
}
/* The site nudges an open card to pure white; the palette here stops at
   #FFFFFA, and the difference is one blue step. Keep the one fill. */
.selr-fq-list .selr-acc.is-open { background: #FFFFFA; }

.selr-fq-list .selr-acc-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px;
  text-align: left;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: -0.51px;
  color: #242424;
}

/* Plus in an 18px canvas disc, 8x1.5 bars. Rotates 180deg to a minus. */
.selr-fq-list .selr-acc-ico {
  margin-left: 0;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: #F7F5EF;
}
.selr-fq-list .selr-acc-ico::before,
.selr-fq-list .selr-acc-ico::after {
  border-radius: 30px;
  background: #242424;
}
.selr-fq-list .selr-acc-ico::before { width: 8px; height: 1.5px; }
.selr-fq-list .selr-acc-ico::after {
  width: 1.5px; height: 8px;
  transition: opacity 300ms var(--selr-ease, cubic-bezier(.4, 0, .2, 1)),
              transform 450ms var(--selr-ease-over, cubic-bezier(.22, 1, .36, 1));
}
.selr-fq-list .selr-acc.is-open .selr-acc-ico::after { transform: scaleY(0); }

.selr-fq-list .selr-acc-body {
  padding: 0 25px 25px;
  opacity: .75;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.45px;
  color: #242424;
}

/* ---- narrow --------------------------------------------------
   Site: list padding 0 10px 10px, question 20px/16px,
   answer 0 20px 20px. Giant word drops to 50px at <=809. */
@media (max-width: 1199.98px) {
  #your-day .selr-fq-word { font-size: 80px !important; }
}
@media (max-width: 809.98px) {
  #your-day > .selr-sec-inner { padding: 70px 20px; gap: 40px; }
  #your-day .selr-fq-word { font-size: 50px !important; }
  .selr-fq-list { padding: 0 10px 10px; }
  .selr-fq-list .selr-acc-btn { padding: 20px; font-size: 16px; }
  .selr-fq-list .selr-acc-body { padding: 0 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .selr-fq-cat, .selr-fq-list, .selr-fq-list .selr-acc { transition: none; }
}