/* =========================================================================
   Total Concrete — Mega Menu helper
   To activate on any menu item:
     1. Go to Appearance > Menus.
     2. Screen Options (top right) > check "CSS Classes".
     3. On the parent menu item (e.g., "Services"), set CSS Classes: tcc-mega
     4. Add child menu items. To give them descriptions, also enable
        "Description" from Screen Options and fill in each child.
   This file styles the resulting sub-menu as a grid with descriptions.
   ========================================================================= */

/* Only activates on the .tcc-mega parent menu item */
.menu-item.tcc-mega {
	position: relative;
}

/* The native WP sub-menu container */
.menu-item.tcc-mega > .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(-8px);

	min-width: 620px;
	padding: 16px;
	background: var(--tcc-paper);
	border: 1px solid var(--tcc-rule);
	border-radius: 22px;
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.22);

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;

	list-style: none;
	margin: 0;

	opacity: 0;
	pointer-events: none;
	transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1);
	z-index: 100;
}

.menu-item.tcc-mega:hover > .sub-menu,
.menu-item.tcc-mega:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.menu-item.tcc-mega > .sub-menu > .menu-item {
	list-style: none;
}

/* Each child link becomes a card-style item with title + description */
.menu-item.tcc-mega > .sub-menu > .menu-item > a {
	display: block;
	padding: 14px;
	border-radius: 14px;
	text-decoration: none;
	color: var(--tcc-ink);
	transition: background .25s;
	line-height: 1.2;
}
.menu-item.tcc-mega > .sub-menu > .menu-item > a:hover {
	background: var(--tcc-paper-2);
}

/* Title text (the menu item's Navigation Label) */
.menu-item.tcc-mega > .sub-menu > .menu-item > a {
	font-family: var(--tcc-font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -.01em;
}

/* Description text — rendered by TCC_Menu_Walker */
.menu-item.tcc-mega > .sub-menu .menu-item-description {
	display: block;
	margin-top: 4px;
	font-family: var(--tcc-font-body);
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0;
	color: var(--tcc-muted);
	line-height: 1.45;
}

/* Responsive — collapse into a stacked list on mobile */
@media (max-width: 900px) {
	.menu-item.tcc-mega > .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		pointer-events: auto;
		min-width: 0;
		grid-template-columns: 1fr;
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0;
		background: transparent;
	}
}