/* Business categories hub (/business-directory/categories/). Loaded only on pages that use the category shortcodes. */

/* The card rules in the site's global styles read these variables, which only the directory stylesheet defined. */
.bo-categories-page {
	--bo-directory-surface: #fff;
	--bo-directory-border: #ded9d2;
	--bo-directory-muted: #4f4b46;
	--bo-directory-accent: var(--wp--preset--color--base, #990000);
	--bo-directory-accent-dark: var(--wp--preset--color--accent-2, #7a0000);
}

/* Popular category cards: ten cards in an even 5 x 2 grid on wide screens, 2 columns on tablets, 1 on phones. */
.bo-categories-page .bo-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1000px) { .bo-categories-page .bo-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.bo-categories-page .bo-category-grid { gap: 0.6rem; }
	.bo-categories-page .bo-category-card { padding: 0.85rem; }
	.bo-categories-page .bo-category-icon { margin-bottom: 0.3rem; font-size: 1.4rem; }
	.bo-categories-page .bo-category-card h3 { margin-bottom: 0.4rem; font-size: 1rem; }
	.bo-categories-page .bo-category-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 0.82rem; line-height: 1.4; }
	.bo-categories-page .bo-category-card p.bo-category-meta { display: block; margin-top: 0.55rem; font-size: 0.8rem; }
}
@media (min-width: 1000px) {
	.bo-categories-page .bo-category-card { padding: 1.1rem; }
	.bo-categories-page .bo-category-card p { font-size: 0.9rem; line-height: 1.5; }
}
.bo-categories-page .bo-category-icon { display: block; margin-bottom: 0.5rem; font-size: 1.7rem; line-height: 1; }
.bo-categories-page .bo-category-card h3 { font-size: 1.1rem; }
.bo-categories-page .bo-category-card p.bo-category-meta { margin-top: 0.8rem; font-size: 0.86rem; font-weight: 700; color: var(--bo-directory-accent-dark); }

/* Complete category index */
.bo-cat-index { margin-top: 1.5rem; }
.bo-cat-tools { max-width: 640px; margin: 0 auto 1.25rem; text-align: center; }
.bo-cat-filter-label { display: block; margin-bottom: 0.4rem; font-weight: 700; }
.bo-cat-filter { box-sizing: border-box; width: 100%; padding: 0.8rem 1.2rem; border: 2px solid var(--bo-directory-border, #ded9d2); border-radius: 999px; background: #fff; font-size: 1rem; }
.bo-cat-filter:focus { border-color: var(--bo-directory-accent, #990000); outline: 3px solid rgba(153, 0, 0, 0.3); outline-offset: 2px; }
.bo-cat-status { min-height: 1.4em; margin: 0.45rem 0 0; color: var(--bo-directory-muted, #4f4b46); font-size: 0.95rem; }

.bo-cat-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1.75rem; }
.bo-cat-jump a { display: inline-block; min-height: 24px; padding: 0.4rem 0.95rem; border: 1px solid var(--bo-directory-border, #ded9d2); border-radius: 999px; background: #fff; color: var(--bo-directory-accent-dark, #7a0000); font-size: 0.92rem; text-decoration: none; }
.bo-cat-jump a:hover, .bo-cat-jump a:focus-visible { border-color: var(--bo-directory-accent, #990000); text-decoration: underline; }

.bo-cat-section { padding: 1.4rem 0 1.1rem; border-top: 1px solid var(--bo-directory-border, #ded9d2); scroll-margin-top: 1rem; }
.bo-cat-section h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0 0 0.8rem; font-size: 1.4rem; }
.bo-cat-total { color: var(--bo-directory-muted, #4f4b46); font-size: 0.95rem; font-weight: 400; }
.bo-cat-list { margin: 0; padding: 0; columns: 3 230px; column-gap: 1.75rem; list-style: none; }
.bo-cat-list li { break-inside: avoid; padding: 0.3rem 0; line-height: 1.35; }
.bo-cat-n { margin-left: 0.2rem; color: var(--bo-directory-muted, #4f4b46); font-size: 0.86rem; }
.bo-cat-n::before { content: "\00b7\00a0"; }
.bo-cat-index [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { .bo-categories-page .bo-category-card { transition: none; } .bo-categories-page .bo-category-card:hover { transform: none; } }

.bo-categories-page .bo-category-icon { color: var(--wp--preset--color--primary, #9b0000); }
.bo-categories-page .bo-category-icon svg { display: block; }