/**
 * Self-contained mega-menu panels.
 *
 * The theme's panel styles come from Max Mega Menu's widget layout, where each
 * column's cells are floated. A column is then only as tall as its own text, so
 * the divider under a block -- drawn as the top border of the cell after it --
 * and the image below it start at a different height in every column.
 *
 * Here the cells are lined up across the panel like the rows of a table: the
 * columns share one grid, and each column hands its rows down to its cells
 * through subgrid. Every column's first block takes the height of the tallest
 * first block, so the dividers and images after it start on one line, whatever
 * height each image is. The walker writes the row count onto the panel, as
 * --compunnel-mega-rows, since the grid cannot count a column's cells itself.
 *
 * Only a panel with an image in a cell of its own is lined up (the walker marks
 * it .compunnel-mega-aligned). A panel of text blocks -- Insights, whose images
 * sit inside their blocks -- stacks each column on its own, so it stays as
 * short as its longest column.
 *
 * Desktop only: at 768px and below Max Mega Menu stacks the columns, and there
 * is no row to line up.
 *
 * The selectors carry both of Max Mega Menu's ids and the full panel path so
 * each one outranks the theme or plugin rule it replaces.
 */

@media only screen and (min-width: 769px) {
	#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu.compunnel-mega-aligned {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-rows: repeat(var(--compunnel-mega-rows, 1), auto);
	}

	#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu.compunnel-mega-aligned > li.mega-menu-column,
	#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu.compunnel-mega-aligned > li.mega-menu-column > ul.mega-sub-menu {
		display: grid;
		grid-row: span var(--compunnel-mega-rows, 1);
		grid-template-rows: subgrid;
		float: none;
		width: auto;
		height: auto;
	}

	#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu.compunnel-mega-aligned > li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
		float: none;
		width: auto;
	}
}

/*
 * The Products panel's product logos (SquadCompass, StafflinePro) are wide
 * wordmarks that would otherwise stretch to the column, so they are held to
 * one height. Keyed to the "products-mega-menu" class set on the Products
 * menu item, because the Services panel carries photos in the same cells.
 * !important because the walker scales cell images with an inline style.
 */
#mega-menu-wrap-header #mega-menu-header > li.products-mega-menu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.widget_media_image:not(.compunnel-mega-logos) img {
	width: auto !important;
	height: 35px !important;
	max-width: 100%;
}

/*
 * A block's sub-item logos (Products > Investment Ventures): one row across
 * the column, as the Global panel shows them. The first logo starts at the
 * column's left edge and the last ends at its right, with a rule midway
 * between each pair (the walker writes the rules as their own elements, so
 * space-between keeps them centred).
 * The full panel path is needed to outrank Max Mega Menu's display: block on
 * every cell.
 */
#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.compunnel-mega-logos {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* The theme pads every cell 25px with !important; the row runs the full
	   width of the rule above it instead. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.compunnel-mega-logos > .compunnel-mega-logo-rule {
	flex: 0 0 1px;
	height: 50px;
	background: #efefef;
}

#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.compunnel-mega-logos > a {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 0;
	border: 0;
}

#mega-menu-wrap-header #mega-menu-header > li.compunnel-mega-panel.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.compunnel-mega-logos img {
	/* Each logo at its own size (Dori 79x32, TestGrid 101x30), as Global shows
	   them. The Eximius SVG has no size of its own, only a 5:1 shape, and
	   would collapse to nothing; the minimum width gives it the 80x16 it has
	   there. */
	width: auto;
	height: auto;
	min-width: 80px;
	max-height: 32px;
}