/* ==========================================================================
   WP additions — topic page (taxonomy-core_topic.php, Category.html design).
   Only what the static HTML didn't need: links styled as the design's
   buttons/pills, the current sub-topic, empty-media fallbacks, rich text.
   ========================================================================== */

/* Hero: CTA + sub-topic pills are links now (were <button>s) */
a.cat-hero__cta-btn { text-decoration: none; }
a.cat-filter-pill { transition: background-color 0.2s ease; }
a.cat-filter-pill:hover,
a.cat-filter-pill:focus-visible { background: #E6F2F8; }
/* Current sub-topic (a sub-topic page lists its siblings) = the design's selected pill */
.cat-filter-pill[aria-current="page"] { background: #A1CEE1; font-weight: 500; }

/* Hero: description may hold several paragraphs (term description / textarea) */
.cat-hero__desc p { margin: 0; }
.cat-hero__desc p + p { margin-top: 12px; }

/* Hero without image and video → text column only, full width */
.cat-hero--no-media { padding-top: 40px; padding-bottom: 20px; }
.cat-hero--no-media .cat-hero__content { flex-basis: 100%; max-width: 1456px; }

/* Hero circle without an image (video only) — keep the circle filled */
.cat-hero__circle:not(:has(img)) { background: #F5E4EF; }

/* Info block: no image and no video → the text spans 100% (no empty media hole) */
.cat-value--text-only .cat-value__content-col { max-width: 100%; flex-basis: 100%; }
.cat-value__card.cat-value__richtext { align-items: stretch; padding: 24px 15px; }
.cat-value__richtext { font: 400 21px/32px 'Fredoka', sans-serif; color: #183B51; text-align: right; }
.cat-value__richtext p { margin: 0; }
.cat-value__richtext p + p { margin-top: 16px; }
.cat-value__richtext ul,
.cat-value__richtext ol { margin: 0; padding-inline-start: 1.3em; }
.cat-value__richtext a { color: #C22DAF; }
.cat-value__image-card img.cat-value__image { display: block; }

/* Anchor targets land below the fixed header + sticky nav (no-JS / hash on load) */
.page-category [id] { scroll-margin-top: 170px; }
@media (max-width: 768px) { .page-category [id] { scroll-margin-top: 120px; } }