/* ============================
CATEGORY PILLS (frontpage)
Targets: #frontpage-category-names .course_category_tree
============================ */
#frontpage-category-names {
max-width: 980px; /* optional: center like screenshot */
margin: 0 auto;
}
/* remove default tree indentation */
#frontpage-category-names .course_category_tree .content,
#frontpage-category-names .course_category_tree .subcategories {
margin: 0 !important;
padding: 0 !important;
}
/* each category row becomes a pill */
#frontpage-category-names .course_category_tree .category > .info {
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 18px rgba(0,0,0,.06);
padding: 14px 16px;
margin: 12px 0;
}
/* title row layout: left name, right badge */
#frontpage-category-names .course_category_tree .categoryname {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 !important;
}
/* link styling */
#frontpage-category-names .course_category_tree .categoryname a {
text-decoration: none;
font-weight: 600;
}
/* badge styling (the "(4)" count) */
#frontpage-category-names .course_category_tree .numberofcourse {
background: #3b1b5a; /* your purple */
color: #fff;
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
/* Optional: make nested categories slightly indented but still pills */
#frontpage-category-names .course_category_tree .category[data-depth="2"] > .info {
margin-left: 26px;
}
/* Collapse all alignment */
#frontpage-category-names .collapsible-actions {
display: flex;
justify-content: flex-end;
margin: 6px 0 10px;
}
#frontpage-category-names .collapsible-actions a {
text-decoration: none;
font-weight: 600;
}
