/* ============================================================
   Rainforest Research Station — shared design tokens & components
   Project Think 2026 · Jungle Journey Around the World
   Used by the hub and all four mini-sites. Mini-sites layer their
   own identity CSS on top of these shared pieces.
   ============================================================ */

:root {
  /* Project Think permanent brand */
  --pt-blue: #045184;
  --pt-orange: #D87830;
  --pt-coral: #FF6161;
  --pt-teal: #4EC2B3;
  --pt-cream: #F7F5E1;
  --pt-white: #FFFFFF;
  --pt-text: #323232;
  --pt-heading: #1A1A1A;
  --pt-muted: #8F8F8F;
  --pt-divider: #E2E2E2;

  /* 2026 Jungle Journey theme */
  --pt-jungle-forest: #006018;
  --pt-jungle-canopy: #489048;
  --pt-jungle-leaf: #78C060;
  --pt-jungle-tropical: #E55A2B;
  --pt-jungle-deep: #1F3D1A;

  /* Mini-site identity hooks (each site overrides --site-accent) */
  --site-accent: var(--pt-blue);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Mulish', system-ui, sans-serif;
  color: var(--pt-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* ---- Station bar: appears on every page, ties the garden together ---- */
.station-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--pt-jungle-deep);
  color: var(--pt-white);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
}
.station-bar a.home-link {
  color: var(--pt-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.station-bar a.home-link:hover { text-decoration: underline; }
.station-bar .leaf { color: var(--pt-jungle-leaf); }

/* ---- Reading level switch ---- */
.level-switch {
  display: inline-flex;
  border-radius: 99px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.55);
}
.level-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--pt-white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 13px;
  cursor: pointer;
}
.level-switch button.active {
  background: var(--pt-jungle-leaf);
  color: var(--pt-jungle-deep);
}

/* ---- Two-tier reading text ----
   .tier-35 shows by default; body.level-68 flips them. */
.tier-68 { display: none; }
body.level-68 .tier-68 { display: block; }
body.level-68 .tier-35 { display: none; }

/* ---- Copy-for-your-StoryMap block ---- */
.copy-block {
  position: relative;
  background: var(--pt-white);
  border: 1px solid var(--pt-divider);
  border-left: 5px solid var(--site-accent);
  border-radius: 6px;
  padding: 18px 20px 14px;
  margin: 22px 0;
}
.copy-block .copy-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pt-muted);
  margin: 0 0 6px;
}
.copy-block p { margin: 8px 0; }
.copy-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--pt-divider);
}
.copy-btn, .dl-btn {
  appearance: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  border: 0;
  border-radius: 99px;
  padding: 8px 18px;
  cursor: pointer;
  background: var(--site-accent);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform 0.06s ease;
}
.copy-btn:hover, .dl-btn:hover { transform: scale(1.04); }
.copy-btn.copied { background: var(--pt-jungle-canopy); }
.copy-cite {
  font-size: 12px;
  color: var(--pt-muted);
  font-style: italic;
}

/* ---- Status badges (species + general) ---- */
.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 99px;
  vertical-align: middle;
}
.badge.endemic { background: var(--pt-teal); color: #073B33; }
.badge.threatened { background: var(--pt-coral); color: #fff; }
.badge.endangered { background: #B3261E; color: #fff; }
.badge.common { background: var(--pt-divider); color: var(--pt-text); }
.badge.soon { background: var(--pt-cream); color: var(--pt-muted); border: 1px dashed var(--pt-muted); }

/* ---- Generic footer ---- */
.station-footer {
  margin-top: 48px;
  padding: 20px 24px 26px;
  background: var(--pt-jungle-deep);
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  text-align: center;
}
.station-footer .strip { font-weight: 700; letter-spacing: 0.02em; }
.station-footer .meta { color: rgba(255,255,255,0.55); margin-top: 4px; }
.station-footer a { color: var(--pt-jungle-leaf); text-decoration: none; }

/* ---- Helpers ---- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }