/* PinPoint Evangelism - Statement of Faith (whatwebelieve.html): collapsible sections.
   Uses the colors/fonts from site.css. Works without JavaScript (native <details>). */
.sof-tools{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:flex-end;margin:0 0 1rem}
.sof-tools [hidden]{display:none}
.sof-toggle-all{min-height:44px;font-size:.95rem}
details.sof{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:0 0 .85rem;scroll-margin-top:96px;overflow:hidden}
details.sof:last-of-type{margin-bottom:0}
.sof-summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.7rem 1rem .7rem 1.1rem;background:var(--bg);border-left:5px solid var(--orange);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sof-summary::-webkit-details-marker{display:none}
.sof-summary::marker{content:""}
.sof-summary:hover{background:#fff4e0}
.sof-summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:12px}
.card .sof-summary h2{margin:0;padding:0;font-size:clamp(1.2rem,3vw,1.5rem);line-height:1.25}
.card .sof-summary h2::after{display:none}
.sof-summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;transition:transform .2s}
details.sof[open] > .sof-summary{background:var(--black);border-left-color:var(--orange)}
details.sof[open] > .sof-summary h2{color:#fff}
details.sof[open] > .sof-summary::after{transform:rotate(180deg)}
details.sof[open] > .sof-summary:hover{background:#151515}
.sof-body{padding:1rem .8rem .25rem;border-top:1px solid var(--line)}
@media (min-width:640px){.sof-body{padding:1.4rem 1.5rem .4rem}.sof-summary{padding-left:1.25rem}}
@media (max-width:639px){.sof-tools{justify-content:stretch}.sof-toggle-all{width:100%}}
@media print{details.sof{border:0}.sof-summary::after,.sof-tools{display:none}}