/* Site Guides: layout for the profile and landing pages. Colours, fonts, and
   links inherit the site's Bootstrap defaults (via --bs-* tokens); only the
   habitat pills carry their own category colours. */

.siteguide { width: 100%; }

.siteguide-header { margin-bottom: 1.5rem; }
.siteguide-header h1 { margin: 0 0 .75rem; }

.siteguide-habitats { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Habitat pills - colour-coded by ecological category. The one intentional
   exception to inheriting the site's palette. */
.habitat-pill {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  background: #e7ece2;
  color: #3a4a34;
}
.habitat-pill[data-category="woodland"] { background: #dfead6; color: #33502f; }
.habitat-pill[data-category="wetland"]  { background: #d7ebe9; color: #1c5e59; }
.habitat-pill[data-category="water"]    { background: #d9e6f2; color: #254c73; }
.habitat-pill[data-category="open"]     { background: #f1e7cf; color: #6d5220; }
.habitat-pill[data-category="urban"]    { background: #eae5da; color: #564b3a; }
.habitat-pill[data-category="other"]    { background: #e7ece2; color: #3a4a34; }

/* Prose ---------------------------------------------------------------- */

.siteguide-summary { max-width: 68ch; }

.siteguide-notes {
  max-width: 68ch;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background: var(--bs-tertiary-bg);
}
.siteguide-notes-label { font-weight: 600; margin-bottom: .4rem; }
.siteguide-notes p:last-child { margin-bottom: 0; }

/* External links ------------------------------------------------------- */

.siteguide-links { margin-top: 2rem; }
.siteguide-links h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.siteguide-links ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  border-top: 1px solid var(--bs-border-color);
}
.siteguide-links li { border-bottom: 1px solid var(--bs-border-color); }
.siteguide-links a { display: flex; align-items: center; gap: .4rem; padding: .5rem .1rem; }
.siteguide-links svg { flex-shrink: 0; opacity: .55; }

.siteguide-reviewed { margin-top: 1.5rem; text-align: right; }

/* Landing -------------------------------------------------------------- */

.siteguide-intro { margin-bottom: 1.5rem; }
.siteguide-intro h1 { margin: 0 0 .5rem; }
.siteguide-intro p { max-width: 56ch; margin: 0; color: var(--bs-secondary-color); }

.siteguide-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.siteguide-filters .chip {
  font-size: .85rem;
  font-weight: 500;
  padding: .4rem 1rem;
  cursor: pointer;
  user-select: none;
}
/* The "All" chip only carries bg-secondary/bg-light (no text utility), so on
   the light fill its text would fall back to the badge default (white) and
   vanish; pin it to the body text colour. */
.siteguide-filters .chip.bg-light { color: var(--bs-body-color); }

.siteguide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 1fr auto-rows make every row track the same height as the tallest, so all
     cards across the whole grid share one height (not just per row). */
  grid-auto-rows: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.siteguide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  color: inherit;
  text-decoration: none;
}
.siteguide-card:hover,
.siteguide-card:focus-visible {
  border-color: var(--bs-secondary-color);
  color: inherit;
  text-decoration: none;
}
.siteguide-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .65rem; }
.siteguide-card .siteguide-habitats { gap: .35rem; }
.siteguide-card .habitat-pill { font-size: .75rem; padding: .2rem .6rem; }
.siteguide-card.is-hidden { display: none; }