/**
 * dborigin-cat-menu - kaartjes met subcategorieën, voor megamenu's.
 *
 * Alle maten en kleuren via variabelen met een terugvalwaarde in var().
 * Ze staan bewust niet als declaratie op .dborigin-cat-menu: dan zou die
 * declaratie winnen van wat het child theme op :root zet. Zet ze per site
 * in het child theme, bijvoorbeeld:
 *
 *   :root {
 *     --dborigin-cat-menu-border-color: #1d4f91;
 *     --dborigin-cat-menu-image-width: 64px;
 *   }
 *
 * --dborigin-cat-menu-columns en --dborigin-cat-menu-columns-tablet zet de
 * shortcode inline, uit het attribuut columns.
 */

.dborigin-cat-menu {
	width: 100%;
}

.dborigin-cat-menu__list {
	display: grid;
	grid-template-columns: repeat(var(--dborigin-cat-menu-columns, 6), minmax(0, 1fr));
	gap: var(--dborigin-cat-menu-gap, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dborigin-cat-menu__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dborigin-cat-menu__item::before,
.dborigin-cat-menu__item::marker {
	content: none;
}

.dborigin-cat-menu__link {
	display: flex;
	align-items: center;
	gap: var(--dborigin-cat-menu-inner-gap, 10px);
	box-sizing: border-box;
	height: 100%;
	min-height: calc(var(--dborigin-cat-menu-image-width, 56px) + 2 * var(--dborigin-cat-menu-padding, 8px));
	padding: var(--dborigin-cat-menu-padding, 8px);
	border: var(--dborigin-cat-menu-border-width, 1px) solid var(--dborigin-cat-menu-border-color, #d6d6d6);
	border-radius: var(--dborigin-cat-menu-radius, 6px);
	background: var(--dborigin-cat-menu-bg, #fff);
	color: var(--dborigin-cat-menu-color, inherit);
	font-size: var(--dborigin-cat-menu-font-size, inherit);
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dborigin-cat-menu__link:hover,
.dborigin-cat-menu__link:focus-visible {
	border-color: var(--dborigin-cat-menu-border-color-hover, #8a8a8a);
	background: var(--dborigin-cat-menu-bg-hover, #f6f6f6);
	color: var(--dborigin-cat-menu-color-hover, inherit);
	text-decoration: none;
}

.dborigin-cat-menu__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dborigin-cat-menu__img {
	flex: 0 0 auto;
	width: var(--dborigin-cat-menu-image-width, 56px);
	height: var(--dborigin-cat-menu-image-width, 56px);
	max-width: none;
	margin: 0;
	object-fit: contain;
}

.dborigin-cat-menu__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.dborigin-cat-menu__count {
	opacity: 0.7;
	white-space: nowrap;
}

.dborigin-cat-menu__all {
	display: inline-block;
	margin-top: var(--dborigin-cat-menu-gap, 12px);
	color: var(--dborigin-cat-menu-color, inherit);
}

/* Tablet: hoogstens 3 kolommen. */
@media (max-width: 1024px) {
	.dborigin-cat-menu__list {
		grid-template-columns: repeat(var(--dborigin-cat-menu-columns-tablet, 3), minmax(0, 1fr));
	}
}

/* Mobiel: compacte lijst zonder afbeeldingen, dezelfde markup. */
@media (max-width: 767px) {
	.dborigin-cat-menu__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.dborigin-cat-menu__img {
		display: none;
	}

	.dborigin-cat-menu__link {
		min-height: 0;
		padding: 8px 0;
		border-width: 0 0 1px;
		border-radius: 0;
		background: transparent;
	}

	.dborigin-cat-menu__link:hover,
	.dborigin-cat-menu__link:focus-visible {
		background: transparent;
	}
}

/*
 * Avada: menu sub items next to a mega menu (1.1.0).
 *
 * Items with the class dborigin-cat-children get their subcategories as
 * virtual sub items (includes/menu.php), meant for Avada's mobile menu. On
 * an item that also has a mega menu layout, Avada's walker prints the layout
 * first and the sub items after it, as siblings inside the <li>:
 *
 *   <li class="... dborigin-cat-menu-parent">
 *     <a>...</a> <button>...</button>
 *     <div class="awb-menu__mega-wrap">...</div>
 *     <ul class="awb-menu__sub-ul awb-menu__sub-ul_main">...</ul>
 *   </li>
 *
 * On desktop the mega menu already shows these categories as cards, so the
 * list after it is hidden while the nav has awb-menu_desktop. Only a list
 * that follows a mega menu: an item without a layout keeps its normal text
 * dropdown. Matches any <ul> after the mega menu rather than one Avada class
 * name, and needs no :has().
 *
 * !important because Avada opens sub menus with longer selectors (hover,
 * focus, expanded states) that would otherwise win.
 */
.awb-menu_desktop .dborigin-cat-menu-parent > .awb-menu__mega-wrap ~ ul {
	display: none !important;
}