/* assets/css/components/_knowledge-center-wp.css
 * Knowledge center — states the static KnowledgeCenter.html didn't have:
 * AJAX loading, facets with zero results, admin-uploaded card icons,
 * WYSIWYG banner text. Loaded after pages/_knowledge-center.css.
 */

/* Loading (request in flight): keep the old results visible, dimmed. */
.kc-feed { transition: opacity 0.2s ease; }
.kc-feed.is-loading { opacity: 0.45; pointer-events: none; }
.kc-feed__loading { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .kc-feed { transition: none; } }

/* Facets: no results with the other filters → dimmed + disabled. */
.kc-checkbox.is-empty,
.kc-pill.is-empty,
.kc-chip.is-empty { opacity: 0.45; cursor: not-allowed; }
.kc-pill:disabled,
.kc-chip:disabled { cursor: not-allowed; }
.kc-filter-group[hidden] { display: none; }
.kc-pill:focus-visible,
.kc-chip:focus-visible,
.kc-checkbox__input:focus-visible ~ .kc-checkbox__svg-icon { outline: 2px solid #C22DAF; outline-offset: 2px; border-radius: 6px; }

/* Card icon uploaded in the admin (SVG / image) instead of the built-in art. */
.kc-card__icon-img { display: block; max-width: 70%; max-height: 150px; width: auto; height: auto; object-fit: contain; }
.kc-card__tool-header .kc-card__icon-img { max-height: 130px; }

/* Banner text from the WYSIWYG (may contain <p>). */
.kc-banner__text p { margin: 0; }
.kc-banner__text p + p { margin-top: 8px; }
.kc-banner__text a { color: inherit; text-decoration: underline; }