/* =========================================================
   Shared collapsible-sections ("accordion") component — for
   reference/FAQ-style article pages linked from the "Updates"
   or "Troubleshooting" nav dropdowns, where content is grouped
   into independently-relevant named sections a reader may want
   to expand/collapse one at a time.

   Pairs with css/guide.css: use the SAME .gp-banner header and
   .wrap reading column as a normal guide page, then swap the
   numbered .steps list for one or more .acc sections. Callouts
   (.callout), individual numbered steps (.step/.step-num/...),
   prose helpers (.body-text/.subhead/.xref), and the screenshot
   lightbox all live in guide.css and are reused directly here —
   this file ONLY adds the collapsible .acc shell itself.

   (For a short, linear troubleshooting article that doesn't need
   expand/collapse — just a couple of sections read top to bottom —
   use guide.css's .section-title dividers instead of .acc; no need
   for this file at all in that case.)

   Markup shape:

   <div class="wrap">
     <div class="acc-toolbar">
       <button type="button" onclick="setAllAccordions(true)">Expand all</button>
       <button type="button" onclick="setAllAccordions(false)">Collapse all</button>
     </div>
     <section class="acc" id="sec-x" data-open="true">
       <button class="acc-head" type="button" aria-expanded="true">
         <span class="acc-num">1</span>
         <span class="acc-title">Section title</span>
         <span class="acc-chev">&#9656;</span>
       </button>
       <div class="acc-body"><div class="acc-body-inner"><div class="acc-body-pad">
         <div class="body-text">Prose paragraph.</div>
         <div class="subhead">Optional subheading</div>
         ...or numbered .step items from guide.css...
       </div></div></div>
     </section>
   </div>

   Requires js/accordion.js for the expand/collapse behavior.
   ========================================================= */

.acc-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.acc-toolbar button {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  color: #3b6ef0; background: #eef2fd; border: 1px solid #c7d6fb;
  border-radius: 7px; padding: 7px 12px; cursor: pointer;
}
.acc-toolbar button:hover { background: #e2e9fc; }

.acc {
  background: #fff; border: 1px solid #e2e5ea; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04); margin-bottom: 12px; overflow: hidden;
}
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 11px;
  font-family: 'DM Sans', sans-serif; text-align: left; background: none;
  border: none; cursor: pointer; padding: 15px 18px; color: #111827;
}
.acc-head:hover { background: #fafbfc; }
.acc-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  background: #eef2fd; color: #3b6ef0; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.acc-title { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.3; }
.acc-chev { flex-shrink: 0; color: #6b7280; font-size: 13px; transition: transform .22s ease; }
.acc[data-open="true"] .acc-chev { transform: rotate(90deg); color: #3b6ef0; }

.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.acc[data-open="true"] .acc-body { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; min-height: 0; }
.acc-body-pad { padding: 0 18px 16px; border-top: 1px solid #eef0f4; margin-top: -1px; }
.acc-body-pad > *:first-child { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .acc-body, .acc-chev { transition: none; }
}

@media print {
  .acc { border: none; box-shadow: none; }
  .acc-body { grid-template-rows: 1fr !important; }
}