/* Compact FAQ (TEST build). One shared file for the home, tinnitus, St Annes and Cleveleys pages. Built with faq-compact.js.
   All widths: questions sit in soft 3D panels with thin gold lines, slim rows and a + that becomes -.
   Phones (to 620px): one panel, the short list first with "Show all N questions", topics on one sliding row, slim help bar.
   Wider (from 621px): short FAQs show every question in two panels; long ones (.fc-long) use one column with the short list first.
   Search and topics on one line, one-line help bar. Works with both search styles on the site (.sf and the home page's .faqt).
   The pages' own card rules use !important, so these start with #faq to win. */
.fc__all{display:none}
/* panel face: the same bright cream as the site's cards, a touch lighter than the section behind, so panels read as raised */
#faq.has-fc{--fc-face:linear-gradient(160deg,#FFFDFA 0%,#FCF8F3 55%,#F8F1E8 100%);--fc-lift:6px 6px 16px rgba(163,136,108,.22),-6px -6px 14px rgba(255,255,255,.95),inset 0 0 0 1px rgba(201,162,91,.26)}
#faq.has-fc .fc__all{align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin:14px auto 0;padding:10px 16px;border:0;border-radius:999px;cursor:pointer;
  font:600 .95rem/1.2 'Outfit',sans-serif;color:#482C5B;background:var(--fc-face);
  box-shadow:4px 4px 10px rgba(163,136,108,.30),-4px -4px 10px rgba(255,255,255,.9)}
#faq.has-fc .fc__all:active{box-shadow:inset 3px 3px 7px rgba(163,136,108,.30),inset -3px -3px 7px rgba(255,255,255,.9)}
#faq.has-fc .fc__all:focus-visible{outline:2px solid #E6B85C;outline-offset:3px}

/* ---------- all widths: the panels and rows ---------- */
#faq.has-fc .faq__list .faq__item{border:0 !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important;transform:none !important;
  border-top:1px solid rgba(201,162,91,.30) !important}
#faq.has-fc .fc-col .faq__item:first-child{border-top:0 !important}
#faq.has-fc .faq__list .faq__item[open]{background:rgba(255,255,255,.55) !important}
#faq.has-fc .faq__chev{position:relative;transform:none !important;background:var(--fc-face);border:0;
  box-shadow:2px 2px 5px rgba(163,136,108,.32),-2px -2px 5px rgba(255,255,255,.9)}
#faq.has-fc .faq__chev svg{display:none}
#faq.has-fc .faq__chev::before,#faq.has-fc .faq__chev::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:#A0482D;transition:transform .2s}
#faq.has-fc .faq__chev::after{transform:rotate(90deg)}
#faq.has-fc .faq__item[open] .faq__chev{background:var(--fc-face);box-shadow:inset 2px 2px 5px rgba(163,136,108,.32),inset -2px -2px 5px rgba(255,255,255,.9)}
#faq.has-fc .faq__item[open] .faq__chev::after{transform:rotate(0)}
#faq.has-fc .faq__a{border-top:0}
#faq.has-fc .fc-col:not(:has(.faq__item:not([hidden]))){display:none}

/* ---------- wider than a phone ---------- */
@media(min-width:621px){
  #faq.has-fc.sec{padding-top:56px !important;padding-bottom:56px !important}
  #faq.has-fc .sec-head{margin-bottom:26px !important}

  /* search and topics on one line */
  #faq.has-fc :is(.sf,.faqt){display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;max-width:1060px;margin:0 auto 18px;text-align:left}
  #faq.has-fc :is(.sf__search,.faqt__search){flex:0 1 380px;margin:0}
  #faq.has-fc :is(.sf__search,.faqt__search) input{padding:12px 18px 12px 46px;font-size:.96rem}
  #faq.has-fc :is(.sf__search,.faqt__search) svg{left:17px;width:18px;height:18px}
  #faq.has-fc :is(.sf__chips,.faqt__chips){flex:1 1 0;justify-content:flex-end;gap:8px}
  #faq.has-fc :is(.sf__chip,.faqt__chip){padding:8px 14px;font-size:.86rem}
  #faq.has-fc :is(.sf__count,.faqt__count){flex:1 0 100%;min-height:0;margin:0;text-align:left}
  #faq.has-fc :is(.sf__count,.faqt__count):empty{display:none}

  /* the panels: two side by side, or one column for long lists */
  #faq.has-fc .faq__list{grid-template-columns:1fr 1fr !important;gap:24px !important;max-width:1060px !important;margin:0 auto !important}
  #faq.has-fc .fc-col{align-self:start;border-radius:20px;overflow:hidden;background:var(--fc-face);
    box-shadow:var(--fc-lift)}
  #faq.has-fc .faq__list.fc-single .fc-col{grid-column:1/-1}
  #faq.has-fc .faq__q{padding:15px 20px;min-height:58px;font-size:1.02rem}
  #faq.has-fc .faq__chev{flex:0 0 28px;width:28px;height:28px}
  #faq.has-fc .faq__a{padding:0 20px 18px}
  #faq.has-fc .tf__next{margin-top:10px}

  #faq.has-fc.fc-long .faq__list{grid-template-columns:1fr !important;max-width:900px !important}
  #faq.has-fc.fc-long :is(.sf,.faqt,.sf__help){max-width:900px}
  #faq.has-fc.fc-long :is(.sf__search,.faqt__search){flex-basis:330px}
  #faq.has-fc.fc-long:not(.fc-open):not(.fc-filtering) .faq__item.fc-more{display:none !important}
  #faq.has-fc.fc-long .fc__all{display:flex;max-width:900px}
  #faq.has-fc.fc-long.fc-filtering .fc__all{display:none}

  /* one-line help bar */
  #faq.has-fc .sf__help{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;max-width:1060px;margin-top:22px;padding:14px 16px 14px 24px;border-radius:20px;text-align:left}
  #faq.has-fc .sf__help strong{font-size:1.12rem;margin:0}
  #faq.has-fc .sf__help span{margin:0;font-size:.95rem}
  #faq.has-fc .sf__helpbtns{flex-wrap:nowrap;gap:10px}
  #faq.has-fc .sf__btn{min-width:0;min-height:44px;padding:10px 20px;font-size:.94rem}
}
@media(min-width:621px) and (max-width:900px){
  #faq.has-fc :is(.sf__search,.faqt__search){flex:1 1 100%}
  #faq.has-fc :is(.sf__chips,.faqt__chips){justify-content:flex-start}
  #faq.has-fc .sf__help{grid-template-columns:1fr}
}
@media(min-width:621px) and (max-width:760px){
  #faq.has-fc .faq__list{grid-template-columns:1fr !important}
}

/* ---------- phones ---------- */
@media(max-width:620px){
  /* tighter section and heading */
  #faq.has-fc.sec{padding-top:40px !important;padding-bottom:40px !important}
  #faq.has-fc .sec-head{margin-bottom:18px !important}
  #faq.has-fc .sec-head h2{font-size:1.75rem !important;margin-bottom:6px !important}
  #faq.has-fc .sec-head .lede{font-size:.95rem !important;line-height:1.5 !important;margin-top:0 !important}

  /* search, then the topics on one row that slides sideways */
  #faq.has-fc :is(.sf,.faqt){margin-bottom:14px}
  #faq.has-fc :is(.sf__search,.faqt__search){margin-bottom:10px}
  #faq.has-fc :is(.sf__search,.faqt__search) input{padding:12px 18px 12px 46px;font-size:.98rem}
  #faq.has-fc :is(.sf__search,.faqt__search) svg{left:17px;width:18px;height:18px}
  #faq.has-fc :is(.sf__chips,.faqt__chips){flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;margin:0 -16px;padding:6px 16px 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  #faq.has-fc :is(.sf__chips,.faqt__chips)::-webkit-scrollbar{display:none}
  #faq.has-fc :is(.sf__chip,.faqt__chip){flex:none;padding:8px 14px;font-size:.86rem;scroll-snap-align:start}
  #faq.has-fc :is(.sf__count,.faqt__count){min-height:0;margin-top:4px}
  #faq.has-fc :is(.sf__count,.faqt__count):empty{display:none}

  /* one panel: the columns melt into a single list */
  #faq.has-fc .faq__list{grid-template-columns:1fr !important;gap:0 !important;border-radius:20px;overflow:hidden;background:var(--fc-face);
    box-shadow:var(--fc-lift)}
  #faq.has-fc .fc-col{display:contents}
  #faq.has-fc .fc-col+.fc-col .faq__item:first-child{border-top:1px solid rgba(201,162,91,.30) !important}
  #faq.has-fc .faq__list .fc-col:first-child .faq__item:first-child{border-top:0 !important}
  #faq.has-fc .faq__q{padding:13px 16px;min-height:52px;font-size:.98rem;line-height:1.3}
  #faq.has-fc .faq__chev{flex:0 0 26px;width:26px;height:26px}
  #faq.has-fc .faq__a{padding:0 16px 16px}
  #faq.has-fc .tf__next{margin-top:10px;padding:7px 13px;font-size:.88rem}

  /* the short list first, the rest one tap away */
  #faq.has-fc:not(.fc-open):not(.fc-filtering) .faq__item.fc-more{display:none !important}
  #faq.has-fc .fc__all{display:flex}
  #faq.has-fc.fc-filtering .fc__all{display:none}

  /* slim "Still have a question?" bar, buttons side by side */
  #faq.has-fc .sf__help{margin-top:16px;padding:14px;border-radius:18px;text-align:left}
  #faq.has-fc .sf__help strong{font-size:1.08rem;margin-bottom:2px}
  #faq.has-fc .sf__help span{font-size:.9rem;margin-bottom:10px}
  #faq.has-fc .sf__helpbtns{flex-wrap:nowrap;gap:8px;justify-content:stretch}
  #faq.has-fc .sf__btn{flex:1 1 0;width:auto;min-width:0;min-height:44px;padding:8px 10px;font-size:.88rem;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){#faq .faq__chev::before,#faq .faq__chev::after{transition:none}}