/* ==================== eSora Gives — Help Centre (.fh-*) ====================
   Shared by partials/help-section.html (compact) and free-support-help.html (full).
   Uses site.css vars. Reduced-motion + keyboard doctrine throughout. */

.fh{position:relative}
.fh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fh-pcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}

/* ---------- search spotlight ---------- */
.fh-search{position:relative;max-width:760px;margin:clamp(26px,3.4vw,38px) 0 0}
.fh-search svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;transition:stroke .3s}
.fh-search-in{width:100%;font:inherit;font-size:clamp(16px,1.5vw,19px);color:var(--ink);background:var(--white);border:1px solid var(--hair2);border-radius:999px;padding:20px 56px 20px 58px;transition:border-color .3s,box-shadow .4s var(--ease)}
.fh-search-in::placeholder{color:var(--muted)}
.fh-search-in:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 5px rgba(240,78,35,.13),0 24px 48px -28px rgba(240,78,35,.3)}
.fh-search.active .fh-search-in{border-color:var(--acc)}
.fh-search.active svg{stroke:var(--acc)}
.fh-search-x{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:var(--gray);color:var(--ink2);font-size:15px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .3s,color .3s}
.fh-search-x:hover{background:var(--acc);color:#fff}
.fh-search.active .fh-search-x{display:flex}
.fh-meta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:14px}
.fh-count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fh-reset{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--acc);cursor:pointer;padding:6px 4px;border-radius:6px}
.fh-reset:hover{text-decoration:underline}

/* ---------- clarity cards ---------- */
.fh-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(30px,4vw,44px)}
.fh-card{position:relative;text-align:left;font:inherit;background:var(--white);border:1px solid var(--hair);border-radius:18px;padding:clamp(18px,2vw,24px);cursor:pointer;transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease)}
.fh-card:hover,.fh-card:focus-visible{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 22px 44px -26px rgba(240,78,35,.3)}
.fh-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fh-card-n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--acc);display:block;margin-bottom:12px}
.fh-card h3{font-size:clamp(16px,1.4vw,18.5px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:var(--ink)}
.fh-card p{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0}
.fh-card .fh-card-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.fh-card:hover .fh-card-go{color:var(--acc)}
@media (max-width:1000px){.fh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fh-cards{grid-template-columns:1fr}}

/* ---------- category chips ---------- */
.fh-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(26px,3.4vw,36px)}
.fh-chip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink2);border:1px solid var(--hair2);border-radius:999px;padding:10px 16px;background:var(--white);cursor:pointer;transition:border-color .3s,color .3s,background .3s;min-height:44px}
.fh-chip b{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--muted);transition:color .3s}
.fh-chip:hover{border-color:var(--ink);color:var(--ink)}
.fh-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fh-chip.on b{color:rgba(255,255,255,.65)}
.fh-chip:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- full-route layout: sticky sidebar + content ---------- */
.fh-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(28px,3.6vw,40px)}
.fh-side{position:sticky;top:110px}
.fh-side .fh-chips{flex-direction:column;align-items:stretch;margin-top:0}
.fh-side .fh-chip{justify-content:space-between;border-radius:14px}
.fh-side-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
@media (max-width:900px){
  .fh-layout{grid-template-columns:1fr}
  .fh-side{position:static;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .fh-side .fh-chips{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
  .fh-side .fh-chip{flex:none}
}

/* ---------- section sub-heads inside fh ---------- */
.fh-sub-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:clamp(34px,4.4vw,52px) 0 16px;font-family:var(--disp);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em}
.fh-sub-h .fh-mini-tools{margin-left:auto;display:flex;gap:8px}
.fh-tool{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);background:none;border:1px solid var(--hair2);border-radius:999px;padding:8px 15px;cursor:pointer;transition:border-color .3s,color .3s;min-height:38px}
.fh-tool:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- accordion items ---------- */
.fh-list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.fh-item{border-bottom:1px solid var(--hair)}
.fh-item[hidden]{display:none}
.fh-item.kbd{background:var(--acctint)}
.fh-qh{margin:0}
.fh-q{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;background:none;border:0;padding:18px 6px;cursor:pointer;color:var(--ink);border-radius:8px}
.fh-q:hover .fh-q-t{color:var(--acc)}
.fh-q:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fh-q-t{font-size:clamp(15.5px,1.35vw,17.5px);font-weight:500;letter-spacing:-.01em;line-height:1.35;transition:color .25s}
.fh-q-t mark{background:rgba(240,78,35,.18);color:inherit;border-radius:3px;padding:0 2px}
.fh-q-cat{flex:none;margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:5px 10px}
.fh-q-ic{position:relative;flex:none;width:15px;height:15px;margin-left:4px}
.fh-q-cat+.fh-q-ic{margin-left:0}
.fh-q-ic::before,.fh-q-ic::after{content:"";position:absolute;background:currentColor;transition:transform .35s var(--ease),opacity .3s}
.fh-q-ic::before{left:0;top:6.7px;width:15px;height:1.6px}
.fh-q-ic::after{left:6.7px;top:0;width:1.6px;height:15px}
.fh-item.open .fh-q-ic::after{transform:rotate(90deg);opacity:0}
.fh-item.open .fh-q-t{color:var(--acc)}
/* smooth, jump-free expansion: grid-rows trick */
.fh-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.fh-a-in{overflow:hidden;min-height:0}
.fh-item.open .fh-a{grid-template-rows:1fr}
.fh-a-pad{padding:2px 6px 24px}
.fh-lead{font-size:15.5px;line-height:1.6;color:var(--ink);font-weight:500;max-width:68ch;margin:0 0 12px;padding-left:14px;border-left:2px solid var(--acc)}
.fh-lead mark{background:rgba(240,78,35,.18);color:inherit;border-radius:3px;padding:0 2px}
.fh-full{font-size:14.5px;line-height:1.65;color:var(--ink2);max-width:72ch;margin:0 0 16px;padding-left:14px}
.fh-full mark{background:rgba(240,78,35,.14);color:inherit;border-radius:3px;padding:0 2px}
.fh-rel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;padding-left:14px}
.fh-rel-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none;margin-right:2px}
.fh-rel-b{font:inherit;font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--gray);border:1px solid var(--hair);border-radius:999px;padding:7px 13px;cursor:pointer;text-align:left;transition:border-color .3s,color .3s,background .3s}
.fh-rel-b:hover{border-color:var(--acc);color:var(--acc);background:#fff}
.fh-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-left:14px}
.fh-act{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);background:none;border:1px solid var(--hair2);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .3s,color .3s;min-height:36px}
.fh-act svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fh-act:hover{border-color:var(--acc);color:var(--acc)}
.fh-copy.done{border-color:var(--acc);color:var(--acc)}
.fh-helpful{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.fh-hlp-q{font-size:12.5px;color:var(--muted)}
.fh-hlp-thanks{font-size:12.5px;color:var(--acc)}

/* ---------- show more ---------- */
.fh-more{margin:22px auto 0;display:flex;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--white);border:1px solid var(--hair2);border-radius:999px;padding:13px 26px;cursor:pointer;transition:border-color .3s,background .3s;min-height:48px}
.fh-more:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- recently viewed ---------- */
.fh-recent{margin:0 0 18px}
.fh-recent-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- empty / no-results ---------- */
.fh-empty{margin-top:clamp(28px,3.6vw,40px);border:1px dashed var(--hair2);border-radius:20px;padding:clamp(24px,3.4vw,40px);max-width:680px}
.fh-empty-h{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.02em;margin:0 0 8px}
.fh-empty-p{font-size:15px;color:var(--ink2);margin:0 0 22px;max-width:52ch}
.fh-nr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.fh-nr-grid{grid-template-columns:1fr}}
.fh-f{margin-bottom:12px}
.fh-f label{display:block;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.fh-f label i{font-style:normal;text-transform:none;letter-spacing:0}
.fh-f label b{color:var(--acc)}
.fh-f input,.fh-f textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--hair2);border-radius:12px;padding:13px 15px;transition:border-color .3s,box-shadow .3s;resize:vertical}
.fh-f input:focus,.fh-f textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(240,78,35,.14)}
.fh-consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink2);cursor:pointer;margin:6px 0 18px}
.fh-consent input{position:absolute;opacity:0;width:0;height:0}
.fh-consent .cb{flex:none;width:19px;height:19px;border:1.5px solid var(--hair2);border-radius:6px;margin-top:1px;position:relative;transition:border-color .25s,background .25s}
.fh-consent .cb::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.fh-consent input:checked+.cb{background:var(--acc);border-color:var(--acc)}
.fh-consent input:checked+.cb::after{transform:rotate(45deg) scale(1)}
.fh-consent input:focus-visible+.cb{outline:2px solid var(--ink);outline-offset:2px}
.fh-consent a{color:inherit;border-bottom:1px solid var(--hair2)}
.fh-consent b{color:var(--acc)}
.fh-hp{position:absolute;left:-9999px;top:-9999px;height:1px;overflow:hidden}
.fh-errsum{background:#FDF1EC;border:1px solid rgba(240,78,35,.35);border-radius:12px;padding:13px 16px;font-size:14px;line-height:1.55;color:#9C2F0E;margin-bottom:16px}
.fh-errsum:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fh-nr-done-h{font-family:var(--disp);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;margin:0 0 8px}
.fh-nr-done p{font-size:14.5px;color:var(--ink2);margin:0 0 16px;max-width:52ch}
.fh-nr-acts{display:flex;gap:12px;flex-wrap:wrap}
.fh-nr-note{font-family:var(--mono);font-size:12px;color:var(--acc);margin:14px 0 0;min-height:18px}

/* ---------- featured ---------- */
.fh-featured{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.fh-featured .fh-item:last-child{border-bottom:1px solid var(--hair)}

/* ---------- transitions ---------- */
.fh-fadein{animation:fhFade .45s var(--ease)}
@keyframes fhFade{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- explore-all CTA (compact) ---------- */
.fh-explore{display:flex;justify-content:center;margin-top:clamp(30px,4vw,44px)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fh-a{transition:none}
  .fh-fadein{animation:none}
  .fh-card,.fh-card:hover{transition:none;transform:none}
  .fh-pcv{display:none}
}