/* ============================================================
   beliefs_new.css — garden
   New "What We Believe" accordion styling only. Scoped under
   .tpl-garden so it cannot bleed into the rest of the template, or
   into other templates if these files are ever concatenated.
   The accordion uses native <details>/<summary> — no JavaScript.
   template.css is untouched.
   ============================================================ */

.tpl-garden .bf-body { max-width: 820px; margin: 0 auto; }
.tpl-garden .bf-lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; color: var(--bf-soft);
  margin: 0 0 clamp(8px, 1.5vw, 18px); text-align: center;
}

.tpl-garden {
  --bf-accent:  var(--accent);
  --bf-rule:    var(--rule);
  --bf-soft:    var(--text-soft);
  --bf-btn-radius: 999px;
}

/* ---- accordion (native details/summary) ---- */
.tpl-garden .bf-accordion { margin-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--bf-rule); }
.tpl-garden .bf-item { border-bottom: 1px solid var(--bf-rule); }
.tpl-garden .bf-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; padding: clamp(16px,1.9vw,22px) 2px;
}
.tpl-garden .bf-summary::-webkit-details-marker { display: none; }
.tpl-garden .bf-summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--bf-accent) 50%, transparent); outline-offset: 3px; }
.tpl-garden .bf-q {
  font-family: "Spectral", Georgia, serif; font-weight: 600; color: var(--text);
  font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.3; transition: color .15s ease;
}
.tpl-garden .bf-summary:hover .bf-q { color: var(--bf-accent); }

/* +/- icon (becomes minus when open) */
.tpl-garden .bf-icon { position: relative; flex: none; width: 17px; height: 17px; }
.tpl-garden .bf-icon::before, .tpl-garden .bf-icon::after {
  content: ""; position: absolute; background: var(--bf-accent); border-radius: 2px;
}
.tpl-garden .bf-icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.tpl-garden .bf-icon::after  { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); transition: opacity .2s ease, transform .2s ease; }
.tpl-garden .bf-item[open] .bf-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.tpl-garden .bf-a { padding: 0 2px clamp(18px,2vw,24px); }
.tpl-garden .bf-a p { margin: 0; color: var(--bf-soft); font-size: 1.02rem; line-height: 1.72; max-width: 68ch; margin: 0 auto; }

/* ---- buttons underneath ---- */
.tpl-garden .bf-actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.2vw, 44px);
  justify-content: center;
}
.tpl-garden .bf-btn {
  font: inherit; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; padding: 13px 24px;
  border-radius: var(--bf-btn-radius); border: 1px solid var(--bf-accent);
  background: transparent; color: var(--bf-accent);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.tpl-garden .bf-btn:hover { background: color-mix(in srgb, var(--bf-accent) 10%, transparent); }
.tpl-garden .bf-btn--primary { background: var(--bf-accent); color: var(--text-invert, #fff); }
.tpl-garden .bf-btn--primary:hover {
  background: var(--bf-accent); color: var(--text-invert, #fff);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--bf-accent) 28%, transparent);
}
.tpl-garden .bf-btn:active { transform: translateY(1px); }

/* (none) */

/* ---- responsive ---- */
@media (max-width: 560px) {
  .tpl-garden .bf-actions { flex-direction: column; align-items: stretch; }
  .tpl-garden .bf-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-garden .bf-icon::after, .tpl-garden .bf-q, .tpl-garden .bf-btn { transition: none; }
}