/* Cagora shared site header and footer.
   Mirrors the Care Share Do component (class names kept identical so one
   component can eventually serve all three properties). Colours are
   tokenised here; Care Share Do's copy hardcodes them.
   If a shared generator (tools/sync-header.js) is adopted, this file
   becomes generated output. Edit the generator, not this file. */

:root{
  --csdh-bg:rgba(246,243,236,.95);
  --csdh-line:#e3ded3;
  --csdh-brand:#2b2f6b;
  --csdh-nav:#3b4654;
  --csdh-nav-hover:#1b2430;
  --csdh-join-bg:#ffd166;
  --csdh-join-bg-hover:#ffdd8e;
  --csdh-join-ink:#2a2208;
  --csdh-menu-bg:#ffffff;
  --csdh-menu-hover:#f6f3ec;
  --csdh-muted:#66717f;
  --csdh-foot-bg:#1d2440;
  --csdh-foot-ink:#a8b0cc;
  --csdh-foot-link:#ffd166;
  --csdh-foot-link-hover:#ffe6a8;
  --csdh-foot-sep:#5a6288;
  /* 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 24px/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-nav a.csdh-join svg{width:16px;height:16px;flex:none}
/* Sign in sits to the right of Join, quieter on purpose: joining is the thing this page
   is asking for, signing in is for a returning member who already knows where they are
   going. Same height and padding so the pair reads as one control. */
.csdh-nav a.csdh-signin{display:inline-flex;align-items:center;font-weight:600;
  color:var(--csdh-ink-dim,#6b6f73);background:transparent;border:1px solid var(--csdh-line,#dcdcd6);
  border-radius:999px;padding:9px 14px;margin-left:8px;text-decoration:none;white-space:nowrap}
.csdh-nav a.csdh-signin:hover{color:var(--csdh-ink,#1b1d1f);background:rgba(0,0,0,.035);
  text-decoration:none}
/* Signed in, the same control says Sign out with the member's first name under it. Two
   lines in roughly the height one had, so the header does not jump when site-header.js
   corrects a cached page. The name is clipped rather than left to widen the nav. */
.csdh-nav a.csdh-signin[data-in]{flex-direction:column;align-items:center;gap:0;
  padding:5px 13px;line-height:1.15}
.csdh-nav a.csdh-signin .si-top{font-size:13.5px}
.csdh-nav a.csdh-signin .si-sub{font-size:11.5px;font-weight:700;
  color:var(--csdh-ink,#1b1d1f);max-width:12ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.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:20px;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}
  /* Narrow: Sign in keeps its place beside Join rather than wrapping away from it. */
  .csdh-nav a.csdh-signin{order:1;font-size:14px;padding:7px 11px;margin-left:6px}
  .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)}