/*!
 * KD Content Parts donor listing
 * Kenyon Digital · kenyondigital.com
 * Brand tokens are declared once below. Override them in the theme to
 * retheme the component without touching this file.
 */

:root{
  --hcs-teal:#206d78;
  --hcs-teal-dk:#18545c;
  --hcs-blue:#00476c;
  --hcs-peach:#faaf7c;
  --hcs-cream:#f2f1ec;
  --hcs-sand:#efeae4;
  --hcs-ink:#333;
  --hcs-muted:#545860;
  --hcs-line:#d8d6cc;
  /* Search highlight: the peach at 50%. Solid peach read as too loud
     against the names. Text contrast improves as it lightens. */
  --kddl-mark:rgba(250,175,124,.5);
  --kddl-radius:3px;
}

.kddl.kddl, .kddl *, .kddl *::before, .kddl *::after{box-sizing:border-box}

/* ================= DONOR LISTING CONTENT PART ================= */
.kddl.kddl{position:relative;margin:0 0 52px;border:1px solid var(--hcs-line);border-radius:var(--kddl-radius);
  background:#fff;overflow:hidden}

/* watermark sits behind the scrolling names */
.kddl .kddl__mark{position:absolute;right:-40px;bottom:-56px;width:340px;height:340px;z-index:0;pointer-events:none;
  opacity:.06;color:var(--hcs-teal)}
.kddl .kddl__mark svg{width:100%;height:100%;display:block}

.kddl .kddl__scroll{position:relative;z-index:1;max-height:var(--kddl-h,520px);overflow-y:auto;overscroll-behavior:contain;
  /* WCAG 2.2 SC 2.4.11: the sticky title bar must never fully cover a row that
     has just received focus. Stops scroll-into-view short of the header. */
  scroll-padding-top:118px}
.kddl .kddl__scroll:focus-visible{outline:3px solid var(--hcs-peach);outline-offset:-3px}

/* sticky title bar, stays put while names scroll under it */
.kddl .kddl__head{position:sticky;top:0;z-index:3;background:var(--hcs-teal);color:#fff;
  padding:18px 22px 16px;box-shadow:0 2px 10px rgba(0,40,60,.18)}
.kddl .kddl__headrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.kddl .kddl__title{font-family:Oswald,Helvetica,Arial,sans-serif;font-weight:500;font-size:22px;letter-spacing:.02em;
  text-transform:uppercase;margin:0;color:#fff;line-height:1.2}
.kddl .kddl__asof{font-size:12.5px;color:#d7ecef;margin:0;font-weight:400}
.kddl .kddl__tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.kddl .kddl__search{position:relative;flex:1 1 260px;max-width:380px}
/* Direct child only. As a descendant selector this also caught the X inside
   .kddl__clear, which took that icon out of flow — collapsing the button to
   its padding (12x12) and parking the X off the right end of the bar. */
.kddl .kddl__search > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--hcs-muted);pointer-events:none}
.kddl .kddl__clear svg{display:block}
.kddl .kddl__search input{width:100%;font:inherit;font-size:15px;color:var(--hcs-ink);background:#fff;
  border:2px solid transparent;border-radius:var(--kddl-radius);padding:10px 38px 10px 38px;appearance:none}
.kddl .kddl__search input::-webkit-search-cancel-button{display:none}
.kddl .kddl__search input:focus-visible{outline:0;border-color:var(--hcs-peach);box-shadow:0 0 0 3px rgba(250,175,124,.45)}
.kddl .kddl__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--hcs-muted);cursor:pointer;padding:6px;border-radius:50%;line-height:0}
.kddl .kddl__clear:hover, .kddl .kddl__clear:focus-visible{color:var(--hcs-ink);background:var(--hcs-cream)}
.kddl .kddl__clear[hidden]{display:none}
.kddl .kddl__stat{font-size:13.5px;color:#e6f2f4;font-variant-numeric:tabular-nums}

.kddl .kddl__body{padding:26px 22px 30px}
.kddl .kddl__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px;margin:0;padding:0;list-style:none}
.kddl .kddl__name{font-size:16px;line-height:1.45;color:var(--hcs-ink);margin:0;break-inside:avoid}
.kddl .kddl__name mark{background:var(--kddl-mark);color:#22303a;padding:0 2px;border-radius:2px}
.kddl .kddl__name[hidden]{display:none}
.kddl .kddl__memoriam{color:var(--hcs-teal);font-weight:700}

.kddl .kddl__empty{padding:34px 4px;color:var(--hcs-muted);font-size:16px}
.kddl .kddl__empty[hidden]{display:none}
.kddl .kddl__empty strong{color:var(--hcs-ink)}

.kddl .kddl__legend{border-top:1px solid var(--hcs-line);padding:14px 22px 16px;background:var(--hcs-cream);
  font-size:13.5px;color:var(--hcs-muted);position:relative;z-index:1}
.kddl .kddl__legend p{margin:0}
.kddl .kddl__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:860px){
  .kddl .kddl__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 26px}
}
@media (max-width:560px){
  .kddl .kddl__grid{grid-template-columns:1fr;gap:14px}
  .kddl .kddl__head{padding:16px 16px 14px}
  .kddl .kddl__body{padding:22px 16px 26px}
  .kddl .kddl__mark{width:230px;height:230px;right:-30px;bottom:-40px}
}