/* Common Ground hub: shared tokens and the header used by Explore, Plan, and Canopy.
   Every section links this file so type, color, and the top bar stay identical. */
@font-face { font-family: 'Fraunces Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/hub/fonts/fraunces-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces Variable'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/hub/fonts/fraunces-latin-wght-italic.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans Variable'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/hub/fonts/dm-sans-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans Variable'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url(/hub/fonts/dm-sans-latin-wght-italic.woff2) format('woff2'); }

:root {
  --cg-paper: #f8f8f1;
  --cg-paper-2: #f1f2e6;
  --cg-card: #fffef8;
  --cg-ink: #263e2e;
  --cg-forest: #244d36;
  --cg-forest-2: #356145;
  --cg-sage: #668051;
  --cg-moss: #86995d;
  --cg-leaf: #c2d697;
  --cg-mint: #e4ebd8;
  --cg-muted: #687464;
  --cg-line: #dce2d5;
  --cg-line-2: #cfd9c7;
  --cg-sun: #e8d4a1;
  --cg-honey: #d6a550;
  --cg-clay: #b8734c;
  --cg-brick: #a4493d;
  --cg-water: #acd0cf;
  --cg-lake: #467e83;
  --cg-display: 'Fraunces Variable', Georgia, serif;
  --cg-body: 'DM Sans Variable', system-ui, sans-serif;
  --cg-radius: 7px;
  --cg-radius-lg: 12px;
}

.hub-bar { position: sticky; top: 0; z-index: 900; background: color-mix(in srgb, var(--cg-paper) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--cg-line); font-family: var(--cg-body); color: var(--cg-ink); }
.hub-bar-inner { max-width: 1400px; margin: auto; padding: 14px 40px; display: flex; align-items: center; gap: 28px; }
.hub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cg-ink); flex-shrink: 0; }
.hub-brand-mark { width: 38px; height: 42px; display: grid; place-items: center; color: #2c593b; border-radius: 20px 20px 8px 8px; background: var(--cg-mint); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.hub-brand:hover .hub-brand-mark { transform: rotate(-8deg) translateY(-2px); }
.hub-brand strong { font-family: var(--cg-display); font-size: 24px; font-weight: 520; letter-spacing: -1.1px; line-height: 1; }
.hub-brand strong span { color: var(--cg-moss); }

.hub-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.hub-nav a { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 14px 11px; border-radius: var(--cg-radius); color: var(--cg-ink); text-decoration: none; font-size: 14px; font-weight: 560; white-space: nowrap; }
.hub-nav a svg { color: var(--cg-sage); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.hub-nav a:hover { background: #edf1e5; }
.hub-nav a:hover svg { transform: translateY(-2px) rotate(-6deg); }
.hub-nav a small { font-size: 12px; font-weight: 450; color: var(--cg-muted); }
/* Hand-drawn underline: draws itself on hover, stays for the current section. */
.hub-nav a .hub-squiggle { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 6px; overflow: visible; }
.hub-nav a .hub-squiggle path { fill: none; stroke: var(--cg-moss); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset .45s ease; }
.hub-nav a:hover .hub-squiggle path, .hub-nav a[aria-current='page'] .hub-squiggle path { stroke-dashoffset: 0; }
.hub-nav a[aria-current='page'] { color: var(--cg-forest); }
.hub-nav a[aria-current='page'] svg { color: var(--cg-forest); }

.hub-account { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hub-signin { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--cg-radius); border: 1px solid var(--cg-line-2); background: var(--cg-card); color: var(--cg-forest); font: 560 13px/1.3 var(--cg-body); text-decoration: none; cursor: pointer; box-shadow: 0 2px 0 #d5dccb; transition: transform .12s, box-shadow .12s, background .15s; }
.hub-signin:hover { background: #eff3e7; }
.hub-signin:active { transform: translateY(2px); box-shadow: 0 0 0 #d5dccb; }
.hub-signin.is-admin { background: var(--cg-forest); color: #f5f7ec; border-color: var(--cg-forest); box-shadow: 0 2px 0 #18382a; }
.hub-signin.is-admin:hover { background: var(--cg-forest-2); }
.hub-join { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--cg-radius); background: var(--cg-honey); color: #2c2414; font: 650 13px/1.3 var(--cg-body); text-decoration: none; box-shadow: 0 2px 0 #a97d33; transition: transform .12s, box-shadow .12s, background .15s; }
.hub-join:hover { background: #dfb262; }
.hub-join:active { transform: translateY(2px); box-shadow: 0 0 0 transparent; }
.hub-organizer { display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; color: var(--cg-muted); font: 550 13px var(--cg-body); text-decoration: none; }
.hub-organizer:hover { color: var(--cg-forest); }
.hub-signin.is-volunteer b { font-weight: 700; color: var(--cg-forest); }
.hub-signout { border: 0; background: none; padding: 8px 6px; color: var(--cg-muted); font: 500 12px var(--cg-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hub-signout:hover { color: var(--cg-forest); }
.hub-bar a:focus-visible, .hub-bar button:focus-visible { outline: 2px solid #537c47; outline-offset: 3px; }

@media (max-width: 860px) {
  .hub-bar-inner { padding: 10px 16px; gap: 12px; }
  .hub-brand strong { display: none; }
  .hub-nav { margin: 0; flex: 1; justify-content: center; }
  .hub-nav a { padding: 8px 9px 10px; font-size: 13px; }
  .hub-nav a small { display: none; }
  .hub-signin { padding: 8px 11px; }
}
@media (max-width: 520px) { .hub-nav a svg { display: none; } .hub-signin .hub-signin-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .hub-bar *, .hub-bar *::before { transition: none !important; } }