/* RönYen — "Common Questions" tabbed-accordion component.
   Ported from the approved standalone design; all selectors scoped under
   .ry-cq and all colours mapped to brand.css tokens (install/delivery use the
   neutral grey set). Shared by /faq/ and the site-wide footer block.
   Layout: centred eyebrow → centred pill tabs → heading; then a two-column
   body (accordion | dark aside). */

.ry-cq{ padding:104px 0; background:var(--surface); color:var(--body); }
/* On /faq/ the block sits right under the breadcrumb — trim the top padding. */
body.page-template-page-faqs .ry-cq{ padding-top:36px; }

.ry-cq .t-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:600;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.ry-cq .t-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--sauna); flex:none; }
/* Heading matched to the footer "Talk to us before you buy" h2 (.contact-split h2). */
.ry-cq .t-h2{ color:var(--heading); font-family:var(--f); letter-spacing:-.015em;
  font-weight:400; font-size:clamp(1.75rem,2.4vw,2.25rem); line-height:1.15; }
.ry-cq .faq-kw{ font-style:normal; color:var(--sauna-text); transition:color .3s ease; }

/* Centred head: (H1 or eyebrow) → tabs → dynamic heading */
.ry-cq .faq-head{ max-width:860px; margin:0 auto 46px; text-align:center; }
.ry-cq .faq-head .t-eyebrow{ justify-content:center; margin-bottom:16px; }
.ry-cq .faq-head .faq-title{ color:var(--heading); font-family:var(--f); font-weight:600;
  letter-spacing:-.02em; font-size:clamp(2rem,3.4vw,2.75rem); line-height:1.1; margin-bottom:22px; }

/* Body — two columns with the aside, single centred column without it (/faq/) */
.ry-cq .faq-body.has-aside{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
.ry-cq .faq-body.solo{ max-width:760px; margin:0 auto; }

/* Accordion list */
.ry-cq .faq-list{ border-top:1px solid var(--border); }
.ry-cq .faq-item{ border-bottom:1px solid var(--border); }
.ry-cq .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%; text-align:left; padding:22px 4px; cursor:pointer; font-family:var(--f);
  font-weight:500; font-size:1.05rem; color:var(--heading); background:none; border:0; }
.ry-cq .faq-q .pm{ width:32px; height:32px; flex:none; border:1px solid var(--border); border-radius:50%;
  background:no-repeat center/14px 14px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1F24' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition:transform .25s ease, background-color .15s, border-color .15s; }
.ry-cq .faq-q:hover .pm{ border-color:var(--heading); }
.ry-cq .faq-item.open .faq-q .pm{ transform:rotate(45deg); background-color:var(--nav); border-color:var(--nav);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ry-cq .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.ry-cq .faq-item.open .faq-a{ grid-template-rows:1fr; }
.ry-cq .faq-a > div{ overflow:hidden; }
.ry-cq .faq-a p{ padding:0 4px 24px; font-size:.95rem; line-height:1.65; color:var(--body); max-width:62ch; }
.ry-cq .faq-a p a{ color:var(--accent-text); font-weight:500; text-decoration:underline; text-underline-offset:3px; }

/* Dark aside */
.ry-cq .faq-aside{ background:var(--nav); color:#fff; border-radius:var(--r-xl); padding:40px 38px; }
.ry-cq .faq-aside h3{ color:#fff; font-weight:600; font-size:1.5rem; line-height:1.15; letter-spacing:-.02em; margin-bottom:12px; }
.ry-cq .faq-aside p{ color:var(--nav-muted); font-size:.95rem; line-height:1.6; margin-bottom:24px; }
.ry-cq .faq-aside .links{ display:flex; flex-direction:column; gap:2px; margin-bottom:28px; }
.ry-cq .faq-aside .links a{ display:flex; align-items:center; justify-content:space-between; padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.1); color:#fff; font-size:.95rem; font-weight:400; transition:color .15s, padding .15s; }
.ry-cq .faq-aside .links a:hover{ color:var(--sauna); padding-left:4px; }
.ry-cq .faq-aside .links a svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ry-cq .faq-aside .btn-primary{ background:var(--cta); color:#fff; border:0; }
.ry-cq .faq-aside .btn-primary:hover{ background:var(--cta-hover); }

/* Colour-coded category tabs — centred pills */
.ry-cq .faq-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.ry-cq .faq-tab{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--tab) 26%, var(--hairline)); background:var(--surface); cursor:pointer;
  font-family:var(--f); font-weight:500; font-size:.9rem; color:var(--body); white-space:nowrap; flex:0 0 auto;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.ry-cq .faq-tab .tdot{ width:9px; height:9px; border-radius:50%; background:var(--tab); flex:none; transition:transform .15s; }
.ry-cq .faq-tab:hover{ border-color:var(--tab); color:var(--tab-text); }
.ry-cq .faq-tab:active{ transform:scale(.99); }
.ry-cq .faq-tab.is-active{ background:var(--tab-light); color:var(--tab-text); border-color:var(--tab); font-weight:600;
  box-shadow:0 1px 3px color-mix(in oklab, var(--tab) 22%, transparent); }
.ry-cq .faq-tab.is-active .tdot{ transform:scale(1.2); }
.ry-cq .faq-panel{ display:none; }
.ry-cq .faq-panel.is-active{ display:block; animation:rycqfade .35s ease; }
@keyframes rycqfade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ry-cq .faq-panel.is-active{ animation:none; } }

@media (max-width:900px){
  .ry-cq{ padding:72px 0; }
  .ry-cq .faq-body{ grid-template-columns:1fr; gap:32px; }
  /* tabs scroll horizontally on mobile */
  .ry-cq .faq-tabs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; margin:0 -20px; padding:2px 20px 10px; scrollbar-width:none; }
  .ry-cq .faq-tabs::-webkit-scrollbar{ display:none; }
  .ry-cq .faq-tab{ scroll-snap-align:start; }
}