/* ============================================================
   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;

  /* ---- card theming tokens (Wave 6) ----
     Transparency: 0 = solid (default), 1 = fully transparent. Override globally
     with --card-transparency, or per section with --blog-card-transparency /
     --event-card-transparency (pattern: --{section}-card-transparency; each
     section's page <style> resolves its own token — see /blog/ and /events/).
     --card-transparency-global mirrors the root value so section resolvers can
     fall back to it even though they re-declare --card-transparency locally.
     WCAG note: pipeline colors guarantee white text >= 4.5:1 only up to
     transparency 0.08 over the white page background; audited worst cases
     across all 160 emitted colors: 0.2 -> 3.55:1, 0.4 -> 2.46:1. Client
     decision (Wave 6.1): the transparent look ships anyway, mitigated by an
     a11y override — under prefers-reduced-transparency / prefers-contrast:
     more / forced-colors, cards render fully solid (see the media query by
     the .icard consumption rule below). */
  --card-transparency:0;
  --card-transparency-global:var(--card-transparency);

  /* Section palettes: fallback card colors for posts/events without pipeline
     data. JS reads --{section}-palette-1..n in order (gaps end the list); add
     or change colors here, CSS only. */
  --blog-palette-1:var(--tc-green); --blog-palette-2:var(--tc-green-dark); --blog-palette-3:#0a4a66;
  --event-palette-1:var(--tc-green); --event-palette-2:var(--tc-green-dark); --event-palette-3:#0a4a66;
}
*,*::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:96px; }
header.nav .brand { display:flex; align-items:center; margin-right:auto; }
header.nav .brand img { height:75px; 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:.94rem; 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:.94rem; 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:.91rem; letter-spacing:.05em; }
header.nav .subnav a:hover, header.nav .subnav a[aria-current] { background:var(--tc-bg-light); color:var(--tc-green); }
header.nav .subnav .subnav-group { position:relative; display:block; }
header.nav .subnav .subnav-group > a.sub-parent::after { content:"\25B8"; font-size:.75em; float:right; margin-left:.6em; opacity:.75; }
header.nav .subsubnav { display:none; position:absolute; top:-.4rem; left:100%; 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:71; }
header.nav .subnav-group:hover .subsubnav, header.nav .subnav-group:focus-within .subsubnav { display:block; }

/* 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; background-image:var(--ph-img,none); }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, var(--ph-a,rgba(0,53,30,.92)) 0%, var(--ph-b,rgba(0,69,40,.74)) 55%, var(--ph-c,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; }
/* light hero variant (build_card_colors.py emits it for dark images): pale
   image-derived fill, dark text so the dark artwork stays visible. */
.page-hero--light { color:var(--tc-ink); }
.page-hero--light h1 { color:var(--tc-green); }
.page-hero--light .eyebrow { color:var(--tc-teal-text); }
.page-hero--light p.lead { color:var(--tc-ink); }
.page-hero--light .news-meta { color:var(--tc-ink); }

/* shared image card component (blog index + events page) — golden-ratio split tile.
   --icard-img / --icard-c are set inline (by render JS or build_card_colors.py);
   imageless cards omit the .icard-img block and fall back to solid brand green. */
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.icard { display:flex; flex-direction:column; aspect-ratio:1.618 / 1; border-radius:8px; overflow:hidden; background:transparent; color:#fff; text-decoration:none; transition:transform .15s, box-shadow .2s; }
.icard:hover { transform:translateY(-3px); box-shadow:0 20px 44px -26px rgba(0,53,30,.55); }
.icard-img { flex:0 0 61.8%; padding:14px; background-origin:content-box; background-image:var(--icard-img,none); background-size:contain; background-position:center; background-repeat:no-repeat; }
.icard-body { flex:1 1 38.2%; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:.75rem var(--space-4); }
/* single compositional consumption of the transparency token: panel color at
   (1 - transparency) opacity. At the default 0 this is exactly the old solid
   var(--icard-c) look. Sections re-declare --card-transparency via their own
   --{section}-card-transparency resolver (see /blog/ and /events/ styles). */
.icard-img, .icard-body { background-color:color-mix(in srgb, var(--icard-c,var(--tc-green)) calc((1 - var(--card-transparency,0)) * 100%), transparent); }
/* a11y knob (Wave 6.1): users signalling an accessibility preference at the OS
   level always get fully solid cards, regardless of any transparency token set
   globally or per section — this rule ignores the token entirely and, being
   later in the cascade at equal specificity, beats the tokenized rule above. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .icard-img, .icard-body { background-color:var(--icard-c,var(--tc-green)); }
}
.icard h3 { font-size:clamp(1.15rem, 2.15vw, var(--step-2)); line-height:1.15; margin:0; color:#fff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.icard-date { font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; font-weight:600; color:var(--tc-teal-alt); margin-top:.35em; }
.icard.feat { grid-column:1 / -1; }
.icard.feat h3 { font-size:var(--step-3); max-width:30ch; }
@media (max-width:880px) { .card-grid { grid-template-columns:1fr; } .icard h3, .icard.feat h3 { font-size:clamp(.95rem, 4.4vw, var(--step-2)); } .icard-body { padding:.6rem var(--space-3); } }

/* 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:1.04rem; }
  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:.94rem; }
  header.nav .subnav a:hover, header.nav .subnav a[aria-current] { background:transparent; color:#fff; }
  header.nav .subsubnav { display:block; position:static; background:transparent; border:0; box-shadow:none; padding:0 0 0 var(--space-3); }
  header.nav .subnav .subnav-group > a.sub-parent::after { opacity:.6; }
}
@media (max-width:560px) {
  footer.site .grid { grid-template-columns:1fr; }
}


/* mobile quick-nav: the 3 things phone visitors came to do, as header buttons
   (mirrors incident.trailscouncil.org) */
.quick-nav { display:none; }
@media (max-width:1024px) {
  header.nav .bar .donate-btn { display:none; }
  .quick-nav {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
    padding-top:2px; padding-bottom:12px;
  }
  .quick-nav a {
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:var(--font-label); text-transform:uppercase; letter-spacing:.06em;
    font-size:.81rem; font-weight:700; color:#fff;
    border:2px solid var(--tc-teal); border-radius:var(--radius);
    padding:.5em .3em; min-height:42px; text-decoration:none;
  }
  .quick-nav a.qn-donate { background:var(--tc-blue); border-color:var(--tc-blue); }
}

/* Lock the mobile header: the burger panel anchors to the whole header
   (not the bar), so it opens BELOW the quick-nav button row instead of
   covering it — matches incident.trailscouncil.org. */
@media (max-width:1024px) {
  header.nav .bar { position:static; }
}

/* card-transparency variant: 20% transparent panels (token override).
   w6.2: card colors on this branch are emitted transparency-compensated —
   the builder runs with CARD_TRANSPARENCY_TARGET=0.2 so white text keeps
   >= 4.5:1 against the composited (80% over white) panel. The date line
   renders at full contrast for readability. */
:root { --card-transparency:.2; }
.icard-date { color:#fff; font-size:.72rem; font-weight:700; }