/* ============================================================
   Top of Michigan Trails Council — shared site styles
   Used by About / Trails / Get Involved / Donate.
   (Home.html keeps its own inline copy.)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Hind:wght@300;400;500;600;700&display=swap');

:root {
  --tc-green:#004528; --tc-green-dark:#00351e; --tc-green-bright:#008845;
  --tc-blue:#3fa0cd; --tc-blue-text:#0a6e8b;
  --tc-navy:#25408f; --tc-orange:#e06b2f; --tc-purple:#5c41a6; --tc-yellow:#fff200; --tc-magenta:#ec008c;
  --tc-teal:var(--tc-blue); --tc-teal-alt:var(--tc-blue); --tc-teal-text:var(--tc-blue-text);
  --tc-ink:#303030; --tc-ink-strong:#262626; --tc-bg:#ffffff; --tc-bg-light:#f6f6f6;
  --tc-border:#e3e3e3; --tc-muted:#818181; --tc-alert:#c0492b;
  --tc-green-rgb:0,69,40; --tc-green-dark-rgb:0,53,30;
  --font-head:'Zilla Slab',Rockwell,Georgia,serif; --font-body:'Hind',system-ui,sans-serif; --font-label:'Zilla Slab',Rockwell,Georgia,serif;
  --step-0:1rem; --step-1:1.25rem; --step-2:1.563rem; --step-3:1.953rem; --step-4:2.441rem; --step-5:3.052rem; --step-6:3.815rem;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem; --space-6:6rem;
  --container:1120px; --radius:2px; --cta-height:60px; --cta-tracking:.1em;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--tc-bg); color:var(--tc-ink);
  font-family:var(--font-body); font-weight:400; font-size:var(--step-0);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-head); color:var(--tc-ink-strong); line-height:1.12; margin:0 0 .4em; font-weight:700; text-wrap:balance; }
h1 { font-size:var(--step-6); font-weight:800; letter-spacing:-.02em; }
h2 { font-size:var(--step-4); letter-spacing:-.01em; }
h3 { font-size:var(--step-2); }
p { margin:0 0 1em; }
a { color:var(--tc-teal-text); text-decoration:none; }
a:hover { color:var(--tc-green); }
img { max-width:100%; display:block; }
.container { max-width:var(--container); margin:0 auto; padding:0 var(--space-3); }
.eyebrow {
  font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem; font-weight:600; color:var(--tc-teal-text); margin:0 0 var(--space-2);
}

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--font-label);
  text-transform:uppercase; letter-spacing:var(--cta-tracking); font-size:.78rem; font-weight:600;
  min-height:var(--cta-height); padding:0 1.9em; border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s; text-decoration:none;
}
.btn-primary { background:var(--tc-green); color:#fff; }
.btn-primary:hover { background:var(--tc-green-dark); color:#fff; }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost:hover { background:#fff; color:var(--tc-green); border-color:#fff; }
.btn-outline { background:transparent; color:var(--tc-green); border-color:var(--tc-green); }
.btn-outline:hover { background:var(--tc-green); color:#fff; }
.btn-teal { background:var(--tc-navy); color:#fff; }
.btn-teal:hover { background:#1c3270; color:#fff; }
.arrow { font-size:1.1em; line-height:0; transform:translateY(.06em); }

/* nav */
header.nav { position:sticky; top:0; z-index:50; background:var(--tc-green); border-bottom:3px solid var(--tc-teal); }
header.nav .bar { display:flex; align-items:center; gap:var(--space-3); height:74px; }
header.nav .brand { display:flex; align-items:center; margin-right:auto; }
header.nav .brand img { height:58px; width:auto; }
header.nav nav { display:flex; gap:1.2rem; align-items:center; }
header.nav nav a { color:#cfe6d9; font-family:var(--font-label); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; padding:.4em 0; }
header.nav nav a:hover, header.nav nav a[aria-current] { color:#fff; }
header.nav nav a.cta { color:#fff; border:2px solid var(--tc-teal); border-radius:var(--radius); padding:.6em 1.1em; transition:background .18s; }
header.nav nav a.cta:hover { background:var(--tc-teal); }
header.nav .donate-btn { display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; background:var(--tc-navy); color:#fff; border:2px solid var(--tc-navy); border-radius:var(--radius); padding:.62em 1.2em; white-space:nowrap; transition:background .18s,color .18s,border-color .18s; }
header.nav .donate-btn:hover { background:#fff; border-color:#fff; color:var(--tc-navy); }
.nav-toggle, .nav-burger { display:none; }
header.nav .navitem { position:relative; display:inline-flex; align-items:center; }
header.nav .navitem > a.parent::after { content:"\25BE"; font-size:.6em; margin-left:.45em; opacity:.75; }
header.nav .subnav { display:none; position:absolute; top:100%; left:0; min-width:236px; background:#fff; border:1px solid var(--tc-border); border-top:3px solid var(--tc-teal); box-shadow:0 22px 44px -22px rgba(0,53,30,.45); padding:.4rem 0; z-index:70; }
header.nav .navitem:hover .subnav, header.nav .navitem:focus-within .subnav { display:block; }
header.nav .subnav a { display:block; color:var(--tc-ink); padding:.7em 1.2em; font-size:.7rem; letter-spacing:.05em; }
header.nav .subnav a:hover, header.nav .subnav a[aria-current] { background:var(--tc-bg-light); color:var(--tc-green); }

/* page hero (interior pages) */
.page-hero { position:relative; color:#fff; isolation:isolate; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, rgba(0,53,30,.92) 0%, rgba(0,69,40,.74) 55%, rgba(0,69,40,.42) 100%); }
.page-hero .container { padding-top:var(--space-6); padding-bottom:var(--space-6); }
.page-hero h1 { color:#fff; font-size:clamp(2.4rem,4.6vw,var(--step-6)); margin-bottom:var(--space-2); max-width:18ch; }
.page-hero .eyebrow { color:var(--tc-teal-alt); }
.page-hero p.lead { font-size:var(--step-1); font-weight:300; color:#eaf5ef; max-width:42ch; margin:0; }

/* section scaffolding */
section.band { padding:var(--space-6) 0; }
section.band.alt { background:var(--tc-bg-light); }
section.band.green { background:var(--tc-green); color:#fff; }
section.band.green h2, section.band.green h3 { color:#fff; }
section.band.green .eyebrow { color:var(--tc-teal-alt); }
.section-head { max-width:56ch; margin-bottom:var(--space-5); }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head p.lead { font-size:var(--step-1); font-weight:300; color:var(--tc-ink); }

/* prose */
.prose { max-width:68ch; }
.prose p { margin:0 0 1.1em; }
.prose h2 { margin-top:1.6em; }
.prose h3 { margin-top:1.4em; color:var(--tc-green); }

/* footer */
footer.site { background:var(--tc-green); color:#cfe6d9; padding:var(--space-6) 0 var(--space-4); border-top:3px solid var(--tc-teal); }
footer.site .grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--space-4); }
footer.site img.logo { height:42px; margin-bottom:var(--space-2); }
footer.site p { color:#9fc4af; font-size:.92rem; }
footer.site h4 { color:#fff; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; margin-bottom:var(--space-2); }
footer.site ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55em; }
footer.site ul a { color:#cfe6d9; font-size:.92rem; }
footer.site ul a:hover { color:#fff; }
footer.site .legal { margin-top:var(--space-5); padding-top:var(--space-3); border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6em; font-size:.8rem; color:#7faa8e; }

@media (max-width:1024px) {
  footer.site .grid { grid-template-columns:1fr 1fr; }
  header.nav .bar { position:relative; gap:var(--space-2); }
  .nav-burger { display:flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; margin-left:0; }
  header.nav .donate-btn { padding:.6em 1em; }
  .nav-burger span { display:block; width:24px; height:2px; background:#fff; transition:transform .2s, opacity .2s; }
  header.nav nav {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
    background:var(--tc-green); flex-direction:column; align-items:stretch; gap:0;
    padding:var(--space-2) var(--space-3) var(--space-3);
    border-bottom:3px solid var(--tc-teal); box-shadow:0 18px 30px -18px rgba(0,0,0,.5);
  }
  header.nav nav a { padding:.95em 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.8rem; }
  header.nav nav a.cta { border:2px solid var(--tc-teal); border-radius:var(--radius); text-align:center; margin-top:var(--space-2); padding:.8em; }
  .nav-toggle:checked ~ nav { display:flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  header.nav .navitem { display:block; }
  header.nav .navitem > a.parent::after { content:"\25BE"; font-size:.6em; margin-left:.45em; opacity:.7; float:right; }
  header.nav .subnav { display:block; position:static; background:transparent; border:0; box-shadow:none; padding:0 0 .4rem var(--space-3); }
  header.nav .subnav a { color:#bcd8c8; padding:.6em 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:.72rem; }
  header.nav .subnav a:hover, header.nav .subnav a[aria-current] { background:transparent; color:#fff; }
}
@media (max-width:560px) {
  footer.site .grid { grid-template-columns:1fr; }
}