/* Brain: Runbooks/watts-bar (prototype, local-only)
   Repo: watts.bar/prototypes/water-system/faq.css
   Purpose: a MINIMIZED FAQ. The live site's FAQ is a tall single-column accordion that
   eats ~1100px even collapsed. This keeps every question + answer in the DOM (crawlable)
   and regenerates the FAQPage JSON-LD from the markup (faq.js), so nothing is lost for
   SEO, but the default footprint is a quiet few rows: the whole set sits behind one
   master disclosure, and when opened it's a dense two-column accordion. No content is
   removed or display:none'd off the DOM, so there is no hidden-content penalty risk. */

.faqx { background: var(--paper-inset); border-radius: 4px 4px 14px 14px; box-shadow: var(--shadow-light); margin-bottom: 18px; padding: 15px 18px 16px; }
.faqx[hidden] { display: none; }

.faqx-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; }
.faqx-title { font-family: var(--body); font-weight: 700; font-size: clamp(13px, 3vw, 15px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.faqx-intro { font-family: var(--body); font-size: 12.5px; font-weight: 500; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.5; }

/* master disclosure: the whole set collapses to one quiet row by default */
.faqx-all { margin-top: 11px; }
.faqx-all > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--water-text); padding: 8px 0; }
.faqx-all > summary::-webkit-details-marker { display: none; }
.faqx-all > summary:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; border-radius: 3px; }
.faqx-all > summary .faqx-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.18s ease; flex: 0 0 auto; margin-bottom: 2px; }
.faqx-all[open] > summary .faqx-chev { transform: rotate(45deg); margin-bottom: 0; }
.faqx-all[open] > summary .faqx-open { display: none; }
.faqx-all:not([open]) > summary .faqx-close { display: none; }
@media (prefers-reduced-motion: reduce) { .faqx-all > summary .faqx-chev { transition: none; } }

/* "Show all 19 questions" toggle revealing the remaining questions below the featured 6 */
.faqx-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.18s ease; flex: 0 0 auto; margin-bottom: 2px; }
[open] > summary > .faqx-chev { transform: rotate(45deg); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .faqx-chev { transition: none; } }
.faqx-more { margin-top: 2px; }
.faqx-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--water-text); padding: 11px 0 7px; }
.faqx-more > summary::-webkit-details-marker { display: none; }
.faqx-more > summary:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; border-radius: 3px; }
.faqx-more[open] .faqx-more-show { display: none; }
.faqx-more:not([open]) .faqx-more-hide { display: none; }

/* the dense two-column accordion (split into two independent column lists so expanding
   one item never reflows the other column) */
.faqx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-top: 8px; }
@media (max-width: 620px) { .faqx-cols { grid-template-columns: 1fr; gap: 0; } }
.faqx-col { min-width: 0; }

.faqx-item { border-top: 1px solid var(--rule-ghost); }
.faqx-item > summary { cursor: pointer; list-style: none; position: relative; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.32; padding: 9px 24px 9px 0; transition: color 0.15s ease; }
.faqx-item > summary::-webkit-details-marker { display: none; }
.faqx-item > summary:focus-visible { outline: 2px solid var(--water); outline-offset: 1px; border-radius: 3px; }
.faqx-item > summary::after { content: "+"; position: absolute; right: 3px; top: 7px; font-family: var(--mono); font-size: 16px; font-weight: 400; line-height: 1; color: var(--ink-faint); transition: color 0.15s ease, transform 0.2s cubic-bezier(0.2,0.7,0.2,1); transform-origin: center; }
.faqx-item[open] > summary::after { content: "\2212"; }
/* hover + tap feedback: the question and its +/- pick up the link teal; the marker
   nudges on press so a tap feels acknowledged (reads great on a phone). */
.faqx-item > summary:hover { color: var(--water-text); }
.faqx-item > summary:hover::after { color: var(--water-text); }
.faqx-item > summary:active { color: var(--water-text); }
.faqx-item > summary:active::after { color: var(--water-text); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .faqx-item > summary, .faqx-item > summary::after { transition: none; } .faqx-item > summary:active::after { transform: none; } }
.faqx-item > div { padding: 0 4px 11px 0; }
.faqx-item p { font-family: var(--body); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.faqx-item a { color: var(--water-text); text-underline-offset: 2px; }
.faqx-item strong { color: var(--ink); font-weight: 700; }
.faqx-live { display: inline-flex; align-items: center; gap: 5px; }