/*
 * Footer "Categories" list fix.
 *
 * The footer's "Categories" column is a TagDiv Composer List Menu block
 * (td_block_list_menu, "vertical" display) holding every category (plus a
 * couple of pages) as one long single-column <ul> - confirmed against the
 * live markup at 12 items. Its own column is narrow (nested two levels
 * deep: the footer row's middle span6 column contains an inner row split
 * into two span6 inner-columns - "Quick Links" and "Categories" - so
 * Categories only gets ~1/4 of the footer's width), so that many items
 * stacked vertically run far taller than its sibling columns, which is
 * what reads as it "overlapping" the section below.
 *
 * Fix: wrap the list into 2 CSS columns instead of 1, roughly halving its
 * height. The footer also has a second, shorter List Menu block ("Quick
 * Links", 5 items) using the exact same td_block_list_menu classes with no
 * stable distinguishing class of its own (and the tdi_NN ids TDC assigns
 * regenerate on every Composer save, so those can't be hardcoded either -
 * same caveat as the PHP row-boundary lookups elsewhere in this theme) -
 * so the selector below targets by item *count* instead: :has(li:nth-child(8))
 * only matches a <ul> with at least 8 items, which is Categories, not Quick
 * Links. Scoped to .td-footer-wrap so it only ever affects footer list
 * menus (site-wide, since the footer is a Composer template shared across
 * every page - this isn't limited to the homepage the way the other files
 * in this theme are).
 */
.td-footer-wrap .td_block_list_menu .menu:has(li:nth-child(8)) {
    column-count: 2;
    column-gap: 24px;
}

.td-footer-wrap .td_block_list_menu .menu:has(li:nth-child(8)) li {
    break-inside: avoid;
}

@media (max-width: 479px) {
    .td-footer-wrap .td_block_list_menu .menu:has(li:nth-child(8)) {
        column-count: 1;
    }
}