{# Categories/Tags Widget — shows root-level tags; nested children visible on the category page #}
{% if categories and categories.length %}
<is-land on:visible>
<div class="widget">
  <h3 class="widget-title">Categories</h3>
  <div class="flex flex-wrap gap-2">
    {% set grouped = categories | categoryGroupByRoot %}
    {% for group in grouped %}
    <a href="/categories/{{ group.root | nestedSlugify }}/" class="p-category hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
      {{ group.root }}{% if group.children.length > 0 %}<span class="ml-1 text-xs opacity-60">({{ group.children.length }})</span>{% endif %}
    </a>
    {% endfor %}
  </div>
</div>
</is-land>
{% endif %}
