/* Communities home (/community): new Knowledge Hub design (from knowledge-hub-site/communities.html).
   Self-contained in this module; everything is scoped under .kc-page. */

.kc-page {
  --ink: oklch(27% 0.035 205);
  --ink-soft: oklch(34% 0.04 205);
  --ink-foreground: oklch(98% 0.008 130);
  --leaf: #96c882;
  --signal: oklch(62% 0.2 37);
  --border: oklch(91% 0.015 140);
  --input: oklch(89% 0.018 140);
  --card: oklch(100% 0 0);
  --muted: oklch(96.5% 0.01 130);
  --muted-foreground: oklch(50% 0.025 205);
  --shadow-card: 0 1px 2px oklch(27% 0.035 205/0.06), 0 8px 24px -12px oklch(27% 0.035 205/0.18);
  --shadow-lift: 0 2px 4px oklch(27% 0.035 205/0.06), 0 22px 40px -18px oklch(27% 0.035 205/0.3);
  color: var(--ink);
  font-family: "Roboto Slab", Georgia, serif;
}

/* The theme wraps page content in a fixed-width .container; break the page out to full width
   and drop the theme's own title/breadcrumb bar, which the hero replaces. */
.kc-page { width: 100vw; margin-left: calc(50% - 50vw); }
body:has(.kc-page) { overflow-x: hidden; }
body:has(.kc-page) .page-header { display: none; }
/* The theme leaves a bottom margin under the main content block, which gaps the Collaborate band from the footer. */
body:has(.kc-page) .region--content,
body:has(.kc-page) .region--content > .block-system-main-block { margin-block-end: 0; }

/* ---------- Hero ---------- */
.kc-page .kc-hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--ink-foreground);
  background: radial-gradient(120% 90% at 85% 10%, oklch(36% 0.05 190) 0%, var(--ink) 55%, oklch(22% 0.03 210) 100%);
}
.kc-page .kc-orbit { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.6; z-index: -1; }
.kc-page .kc-orbit__ring {
  position: absolute; top: 50%; border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--leaf) 28%, transparent);
  transform: translate(-50%, -50%); animation: kc-spin linear infinite;
}
.kc-page .kc-orbit__ring--dashed { border-style: dashed; border-color: color-mix(in oklab, var(--ink-foreground) 16%, transparent); }
.kc-page .kc-orbit__dot {
  position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 9999px;
  background: var(--leaf); box-shadow: 0 0 0 6px color-mix(in oklab, var(--leaf) 18%, transparent), 0 0 24px var(--leaf);
}
.kc-page .kc-orbit__dot--signal { top: auto; bottom: -6px; background: var(--signal); box-shadow: 0 0 0 6px color-mix(in oklab, var(--signal) 20%, transparent), 0 0 24px var(--signal); }
@keyframes kc-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kc-page .kc-orbit__ring { animation: none; } }

.kc-page .kc-hero__inner { position: relative; padding-block: 4rem; }
@media (min-width: 768px) { .kc-page .kc-hero__inner { padding-block: 5rem; } }
.kc-page .kc-crumb { font-size: 0.875rem; color: color-mix(in oklab, var(--ink-foreground) 60%, transparent); }
.kc-page .kc-crumb a { color: inherit; text-decoration: none; }
.kc-page .kc-crumb a:hover { color: var(--leaf); }
.kc-page .kc-crumb span { margin-inline: 0.35rem; }
.kc-page .kc-crumb .is-current { color: var(--ink-foreground); margin: 0; }
.kc-page .kc-hero__eyebrow {
  margin: 1.5rem 0 0; color: var(--leaf); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.kc-page .kc-hero h1 { margin: 0.75rem 0 0; color: var(--ink-foreground); font-size: 2.25rem; font-weight: 700; line-height: 1.15; }
@media (min-width: 768px) { .kc-page .kc-hero h1 { font-size: 3rem; } }
.kc-page .kc-hero__lead { max-width: 42rem; margin: 1rem 0 0; color: color-mix(in oklab, var(--ink-foreground) 75%, transparent); }
.kc-page .kc-search {
  display: flex; align-items: center; gap: 0.5rem; max-width: 42rem; margin-top: 2rem;
  padding: 0.375rem; border-radius: 9999px; background: var(--card); box-shadow: var(--shadow-lift);
}
.kc-page .kc-search svg { margin-left: 1rem; flex: none; color: var(--muted-foreground); }
.kc-page .kc-search input[type="search"] {
  flex: 1; min-width: 0; height: auto; border: 0; background: transparent; padding: 0.625rem 0.5rem;
  color: var(--ink); font: inherit; box-shadow: none; outline: none;
}
.kc-page .kc-search button {
  border: 0; border-radius: 9999px; padding: 0.625rem 1.5rem; cursor: pointer;
  background: var(--signal); color: #fff; font: inherit; font-size: 0.875rem; font-weight: 600;
}
.kc-page .kc-search button:hover { filter: brightness(1.1); }

.kc-page .kc-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .kc-page .kc-wrap { padding-inline: 2rem; } }

.kc-page .kc-eyebrow {
  display: block; padding: 0; margin: 0;
  color: var(--signal); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ---------- Filter card ---------- */
.kc-page .kc-filters-wrap { position: relative; z-index: 10; margin-top: -2rem; }
.kc-page .kc-panel { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-card); }
.kc-page .kc-panel__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.kc-page .kc-panel__bar-actions { display: flex; align-items: center; gap: 0.5rem; }
.kc-page .kc-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600;
}
.kc-page .kc-toggle__chev { transition: transform 0.2s; }
.kc-page .kc-toggle[aria-expanded="true"] .kc-toggle__chev { transform: rotate(180deg); }

.kc-page .kc-reset,
.kc-page .kc-add-btn {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 1rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.kc-page .kc-reset { border: 1px solid var(--input); color: var(--muted-foreground); background: transparent; }
.kc-page .kc-reset:hover { border-color: var(--signal); color: var(--signal); }
.kc-page .kc-add-btn { border: 1px solid var(--leaf); background: var(--leaf); color: var(--ink); }
.kc-page .kc-add-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--ink-foreground); }

.kc-page .kc-panel__body { display: grid; gap: 1.5rem; padding: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.kc-page .kc-panel__body[hidden] { display: none; }
@media (min-width: 768px) { .kc-page .kc-panel__body { grid-template-columns: 1fr 1fr 1fr auto; align-items: start; } }
.kc-page .kc-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.kc-page .kc-group .kc-eyebrow { margin-bottom: 0.5rem; float: none; width: auto; }

.kc-page .kc-opt {
  position: relative; display: flex; align-items: center; gap: 0.625rem; width: 100%;
  margin: 0 0 0.25rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; cursor: pointer;
  color: var(--muted-foreground); font-size: 0.875rem; font-weight: 400; transition: background 0.15s, color 0.15s;
}
.kc-page .kc-opt:hover { background: color-mix(in oklab, var(--leaf) 8%, transparent); color: var(--ink); }
.kc-page .kc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kc-page .kc-opt__box {
  flex: none; display: grid; place-items: center; width: 1rem; height: 1rem;
  border: 1px solid var(--input); border-radius: 0.25rem; background: var(--card); transition: all 0.15s;
}
.kc-page .kc-opt--radio .kc-opt__box { border-radius: 9999px; }
.kc-page .kc-opt input:checked + .kc-opt__box { border-color: var(--leaf); background: var(--leaf); }
.kc-page .kc-opt:has(input:checked) { background: color-mix(in oklab, var(--leaf) 12%, transparent); color: var(--ink); font-weight: 500; }
.kc-page .kc-opt input:checked + .kc-opt__box::after {
  content: ""; width: 0.3rem; height: 0.55rem; margin-top: -0.1rem;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.kc-page .kc-opt--radio input:checked + .kc-opt__box { background: var(--card); }
.kc-page .kc-opt--radio input:checked + .kc-opt__box::after {
  width: 0.5rem; height: 0.5rem; margin: 0; border: 0; border-radius: 9999px; background: var(--leaf); transform: none;
}
.kc-page .kc-opt input:focus-visible + .kc-opt__box { outline: 2px solid var(--leaf); outline-offset: 2px; }

.kc-page .kc-apply { align-self: end; }
.kc-page .kc-apply__btn {
  width: 100%; border: 0; border-radius: 9999px; padding: 0.625rem 1.5rem; cursor: pointer;
  background: var(--ink); color: var(--ink-foreground); font: inherit; font-size: 0.875rem; font-weight: 600; transition: background 0.2s;
}
.kc-page .kc-apply__btn:hover { background: var(--signal); }
@media (min-width: 768px) { .kc-page .kc-apply__btn { width: auto; } }

/* ---------- Results ---------- */
.kc-page .kc-results { padding-block: 2.5rem 4rem; }
.kc-page .kc-count { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
.kc-page .kc-count strong { color: var(--ink); font-weight: 600; }

.kc-page .kc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.kc-page .kc-card {
  position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
@media (min-width: 640px) { .kc-page .kc-card { width: calc(50% - 0.75rem); } }
@media (min-width: 1024px) { .kc-page .kc-card { width: calc(33.333% - 1rem); } }
.kc-page .kc-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lift);
  border-color: color-mix(in oklab, var(--leaf) 60%, var(--border));
}
.kc-page .kc-card__link { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }

.kc-page .kc-card__banner { position: relative; height: 11rem; overflow: hidden; background: var(--muted); }
.kc-page .kc-card__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.kc-page .kc-card:hover .kc-card__banner img { transform: scale(1.05); }
.kc-page .kc-card__banner-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%); }

.kc-page .kc-badge {
  position: absolute; top: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.4;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.kc-page .kc-badge--public { left: 0.75rem; background: color-mix(in oklab, var(--leaf) 90%, transparent); color: var(--ink); }
.kc-page .kc-badge--private { left: 0.75rem; background: color-mix(in oklab, var(--ink) 85%, transparent); color: var(--ink-foreground); }
.kc-page .kc-badge--nature { right: 0.75rem; background: color-mix(in oklab, var(--signal) 90%, transparent); color: #fff; }

.kc-page .kc-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.kc-page .kc-card__name { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.375; transition: color 0.2s; }
.kc-page .kc-card:hover .kc-card__name { color: var(--signal); }
.kc-page .kc-card__desc {
  margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.625;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

.kc-page .kc-card__stats {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.kc-page .kc-card__desc + .kc-card__stats { margin-top: 1.25rem; }
.kc-page .kc-card__stats--blurred { filter: blur(3px); opacity: 0.55; user-select: none; }
.kc-page .kc-stat { display: flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); font-size: 0.75rem; }
.kc-page .kc-stat strong { color: var(--ink); font-weight: 600; }
.kc-page .kc-stat__icon { flex: none; color: var(--leaf); }

.kc-page .kc-card__cta {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 1.25rem;
  color: var(--signal); font-size: 0.875rem; font-weight: 600;
}
.kc-page .kc-card__edit {
  display: block; margin: 0 1.25rem 1.25rem; padding: 0.5rem 1rem; text-align: center;
  border: 1px solid var(--input); border-radius: 9999px; color: var(--muted-foreground);
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
}
.kc-page .kc-card__edit:hover { border-color: var(--signal); color: var(--signal); }

.kc-page .kc-empty { width: 100%; padding: 3rem 1rem; text-align: center; color: var(--muted-foreground); }
.kc-page .kc-empty h6 { margin: 0 0 1rem; color: var(--ink); font-size: 1rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .kc-page .kc-card, .kc-page .kc-card__banner img { transition: none; }
  .kc-page .kc-card:hover { transform: none; }
}

/* ---------- Collaborate ("Don't see your community?") ---------- */
.kc-page .kc-collab { margin-top: 3rem; padding-block: 5rem; background: oklch(98.2% 0.008 110); }
.kc-page .kc-collab__inner { display: grid; align-items: center; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .kc-page .kc-collab__inner { grid-template-columns: 1fr 340px; } }
.kc-page .kc-collab__eyebrow { margin: 0; color: var(--signal); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.kc-page .kc-collab__title { margin: 0.75rem 0 0; color: var(--ink); font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
.kc-page .kc-collab__text { max-width: 36rem; margin: 0.75rem 0 0; color: var(--muted-foreground); }
.kc-page .kc-collab__actions { display: flex; flex-direction: column; gap: 0.75rem; }
.kc-page .kc-collab__btn {
  padding: 0.75rem 1.5rem; border: 1px solid var(--ink); border-radius: 9999px; text-align: center;
  font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.kc-page .kc-collab__btn--solid { background: var(--ink); color: var(--ink-foreground); }
.kc-page .kc-collab__btn--solid:hover { background: var(--signal); border-color: var(--signal); color: var(--ink-foreground); }
.kc-page .kc-collab__btn--outline { background: transparent; color: var(--ink); }
.kc-page .kc-collab__btn--outline:hover { background: var(--ink); color: var(--ink-foreground); }