/*
 * Clergy Tax Organizer - Help Guide page (template-help-guide.php)
 * Scoped to .cto-help so it can't collide with the site's own CSS.
 */
.cto-help{
  --cto-ink:#2A2724;
  --cto-ink-soft:#5F5850;
  --cto-ink-faint:#8A827D;
  --cto-ground:#F1EFEE;
  --cto-panel:#FFFFFF;
  --cto-green-deep:#2D4B31;
  --cto-green:#61AF3F;
  --cto-green-text:#3E6B42;
  --cto-line:#D7D1D0;
  --cto-line-soft:#E4E0DE;
  --cto-chip:#EAE9E6;

  --cto-display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --cto-body:"Source Serif 4",Georgia,"Times New Roman",serif;

  max-width:1060px;
  margin-inline:auto;
  padding-inline:16px;
  color:var(--cto-ink);
  font-family:var(--cto-body);
  font-size:1rem;
  line-height:1.6;
  text-align:left;
}
.cto-help *{box-sizing:border-box}
.cto-help a:focus-visible,
.cto-help input:focus-visible,
.cto-help button:focus-visible{
  outline:2px solid var(--cto-green);
  outline-offset:3px;
  border-radius:3px;
}

/* ------------------------------------------------------------- lead-in */
.cto-help .cto-lead{
  margin:0 0 1rem;
  max-width:62ch;
  font-size:1.14rem;
  line-height:1.62;
  color:var(--cto-ink);
}
.cto-help .cto-lead:last-of-type{margin-bottom:0}
.cto-help .cto-lead strong{font-weight:600;color:var(--cto-green-text)}

/* ------------------------------------------------------------- pledges */
.cto-help .cto-pledge{
  list-style:none;
  margin:clamp(24px,4vw,34px) 0 0;
  padding:clamp(22px,3.5vw,30px);
  background:var(--cto-ground);
  border:1px solid var(--cto-line-soft);
  border-radius:10px;
  display:grid;
  gap:clamp(18px,3vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.cto-help .cto-pledge-h{
  font-family:var(--cto-display);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.3;
  margin:0 0 .35rem;
  color:var(--cto-green-text);
  letter-spacing:-.005em;
}
.cto-help .cto-pledge p{margin:0;color:var(--cto-ink-soft);font-size:.95rem;line-height:1.55}

/* -------------------------------------------------------------- finder */
.cto-help .cto-finder{margin-top:clamp(28px,4.5vw,40px)}
.cto-help .cto-label{
  display:block;
  font-family:var(--cto-display);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cto-ink-faint);
  margin:0 0 .6rem;
}
.cto-help .cto-finder-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cto-help #cto-find{
  flex:1 1 20rem;
  min-width:0;
  font-family:var(--cto-body);
  font-size:1.05rem;
  color:var(--cto-ink);
  background:var(--cto-panel);
  border:1px solid var(--cto-line);
  border-radius:6px;
  padding:.7rem .9rem;
  margin:0;
  height:auto;
}
.cto-help #cto-find::placeholder{color:var(--cto-ink-faint)}
.cto-help #cto-clear{
  font-family:var(--cto-display);
  font-weight:600;
  font-size:.85rem;
  color:var(--cto-ink-soft);
  background:var(--cto-panel);
  border:1px solid var(--cto-line);
  border-radius:6px;
  padding:.7rem 1rem;
  margin:0;
  cursor:pointer;
  text-transform:none;
  letter-spacing:0;
  line-height:normal;
  height:auto;
}
.cto-help #cto-clear:hover{border-color:var(--cto-green);color:var(--cto-green-text)}
.cto-help .cto-tally{margin:.7rem 0 0;font-size:.9rem;color:var(--cto-ink-faint)}

/* --------------------------------------------------------------- index */
.cto-help .cto-index{margin-top:clamp(8px,1.5vw,14px)}
.cto-help .cto-band{margin-top:clamp(24px,3.5vw,34px)}
.cto-help .cto-band-h{
  font-family:var(--cto-display);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--cto-ink-faint);
  margin:0 0 .85rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--cto-line);
}
.cto-help .cto-cards{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
}
.cto-help .cto-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.35rem .9rem;
  align-items:start;
  text-decoration:none;
  color:inherit;
  background:var(--cto-panel);
  border:1px solid var(--cto-line-soft);
  border-radius:8px;
  padding:.95rem 1.05rem;
  box-shadow:0 1px 2px rgba(45,75,49,.06);
  transition:border-color .12s ease, transform .12s ease;
}
@media (prefers-reduced-motion:reduce){
  .cto-help .cto-card{transition:none}
}
.cto-help .cto-card:hover{border-color:var(--cto-green);transform:translateY(-1px);text-decoration:none}
.cto-help .cto-num{
  grid-row:1 / span 3;
  font-family:var(--cto-display);
  font-weight:700;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
  color:var(--cto-green-text);
  background:var(--cto-chip);
  border-radius:5px;
  min-width:2.4rem;
  text-align:center;
  padding:.3rem .35rem;
  line-height:1.3;
}
.cto-help .cto-num small{
  display:block;
  font-weight:600;
  font-size:.56rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--cto-ink-faint);
}
.cto-help .cto-card-h{
  font-family:var(--cto-display);
  font-weight:600;
  font-size:1rem;
  line-height:1.3;
  margin:0;
  color:var(--cto-ink);
  letter-spacing:-.005em;
}
.cto-help .cto-who{margin:0;font-size:.92rem;line-height:1.5;color:var(--cto-ink-soft)}
.cto-help .cto-mins{
  margin:0;
  font-family:var(--cto-display);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.05em;
  color:var(--cto-ink-faint);
}
.cto-help .cto-card.cto-everyone .cto-num{background:var(--cto-green);color:#fff}
.cto-help .cto-card.cto-everyone .cto-num small{color:rgba(255,255,255,.82)}

.cto-help .cto-empty{
  margin:1.6rem 0 0;
  padding:1.4rem;
  border:1px dashed var(--cto-line);
  border-radius:8px;
  color:var(--cto-ink-soft);
  background:var(--cto-ground);
}
.cto-help [hidden]{display:none !important}

/* ---------------------------------------------------------- help panel */
.cto-help .cto-ask{
  margin-top:clamp(30px,5vw,46px);
  padding:clamp(24px,4vw,34px);
  background:var(--cto-green-deep);
  border-radius:10px;
  color:#D6D0C8;
}
.cto-help .cto-ask-h{
  font-family:var(--cto-display);
  font-weight:600;
  font-size:1.3rem;
  line-height:1.3;
  color:#fff;
  margin:0 0 .6rem;
}
.cto-help .cto-ask p{margin:0;max-width:58ch;line-height:1.62}
.cto-help .cto-ask a{color:#9BCB7C}
.cto-help .cto-sig{
  margin-top:1.4rem;
  padding-top:1.05rem;
  border-top:1px solid rgba(155,203,124,.28);
  font-family:var(--cto-display);
  font-size:.78rem;
  letter-spacing:.05em;
  color:rgba(214,208,200,.78);
}