/* Our Common Grounds shared site header and footer.
   Same component as Care Share Do and Cagora: the csdh- and csdf- class names
   are kept identical on purpose, so one component can serve every property.
   Only the colour tokens below change per site. Do not restyle the ribbon. */

:root{
  --csdh-bg:rgba(246,243,236,.95);
  --csdh-line:#e3ded3;
  --csdh-brand:#173a31;
  --csdh-nav:#3a4741;
  --csdh-nav-hover:#1d2622;
  --csdh-join-bg:#f6c453;
  --csdh-join-bg-hover:#f9d57f;
  --csdh-join-ink:#2a2208;
  --csdh-menu-bg:#ffffff;
  --csdh-menu-hover:#f6f3ec;
  --csdh-muted:#64716b;
  --csdh-foot-bg:#1a2f28;
  --csdh-foot-ink:#a9bdb5;
  --csdh-foot-link:#f6c453;
  --csdh-foot-link-hover:#fbe2a6;
  --csdh-foot-sep:#557066;
  /* The network ribbon is identical across all properties. Do not restyle. */
  --csdh-spectrum:linear-gradient(90deg,#E01B18 0%,#F4551E 7%,#F58220 13%,#F2A81E 19%,#A8AF2B 25%,#5CB85C 38%,#0F7A63 66%,#14453A 100%);
}

html{scroll-padding-top:90px}
.csdh{position:sticky;top:0;z-index:60;background:var(--csdh-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--csdh-line);font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif}
.csdh-ribbon{height:5px;background:var(--csdh-spectrum)}
.csdh-in{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.csdh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--csdh-brand);font:800 23px/1 'Bricolage Grotesque',Figtree,system-ui,sans-serif;letter-spacing:-.02em}
.csdh-brand svg,.csdh-brand img{width:38px;height:38px;flex:none}
.csdh-wm .tld{color:var(--csdh-muted);font-weight:700}
.csdh-nav{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.csdh-nav a{color:var(--csdh-nav);text-decoration:none;font-weight:600;font-size:15.5px;line-height:1.2}
.csdh-nav a:hover{color:var(--csdh-nav-hover);text-decoration:underline;text-underline-offset:.2em}
.csdh-nav a[aria-current="page"]{color:var(--csdh-nav-hover);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.csdh-nav a.csdh-join{display:inline-flex;align-items:center;gap:7px;background:var(--csdh-join-bg);color:var(--csdh-join-ink);font-weight:700;font-size:15px;padding:10px 16px;border-radius:11px;text-decoration:none;box-shadow:0 2px 8px rgba(27,36,48,.14)}
.csdh-nav a.csdh-join:hover{background:var(--csdh-join-bg-hover);color:var(--csdh-join-ink);text-decoration:none}
.csdh-dd{position:relative}
.csdh-dd>summary{list-style:none;cursor:pointer;color:var(--csdh-nav);font-weight:600;font-size:15.5px;line-height:1.2;display:inline-flex;align-items:center;gap:5px}
.csdh-dd>summary::-webkit-details-marker{display:none}
.csdh-dd>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.csdh-dd[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.csdh-dd>summary:hover{color:var(--csdh-nav-hover)}
.csdh-menu{position:absolute;right:0;top:calc(100% + 12px);width:320px;background:var(--csdh-menu-bg);border:1px solid var(--csdh-line);border-radius:14px;box-shadow:0 14px 36px rgba(27,36,48,.16);padding:6px;z-index:70;max-height:min(70vh,520px);overflow-y:auto}
.csdh-nav .csdh-menu a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--csdh-nav-hover)}
.csdh-nav .csdh-menu a:hover{background:var(--csdh-menu-hover);text-decoration:none}
.csdh-menu b{display:block;font-weight:700;font-size:15px}
.csdh-menu span{display:block;font-size:13.5px;color:var(--csdh-muted);font-weight:500;margin-top:2px;line-height:1.35}

@media (max-width:760px){
  .csdh-in{padding:8px 14px;gap:6px 0;justify-content:space-between;position:relative}
  .csdh-brand{font-size:19px;margin-right:auto}
  .csdh-brand svg,.csdh-brand img{width:30px;height:30px}
  .csdh-wm .tld{display:none}
  .csdh-nav{display:contents}
  .csdh-nav a,.csdh-dd{order:2;font-size:13.5px}
  .csdh-dd>summary{font-size:13.5px}
  .csdh-dd{position:static}
  .csdh-menu{left:12px;right:12px;width:auto;top:100%}
  .csdh-nav a.csdh-join{order:1;font-size:14px;padding:8px 12px}
  .csdh-in::after{content:"";order:1;flex-basis:100%;height:0}
}
@media (max-width:440px){.csdh-lng{display:none}}
@media (max-width:370px){.csdh-nav a,.csdh-dd>summary{font-size:12.5px}}

/* Footer */
.csdf{background:var(--csdh-foot-bg);color:var(--csdh-foot-ink);font:400 15px/1.6 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;padding:30px 0;margin-top:0}
.csdf-in{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:flex-start}
.csdf a{color:var(--csdh-foot-link);text-decoration:underline;text-underline-offset:.18em}
.csdf a:hover{color:var(--csdh-foot-link-hover)}
.csdf p{margin:0;max-width:52ch}
.csdf nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.csdf nav span{color:var(--csdh-foot-sep)}