/**
 * Delta Net & Twine — Secondary-navigation Mega Menu
 * -------------------------------------------------------------------------
 * Turns flagged top-level items in the secondary (green) nav into the
 * branded dark-green panel from the design comp.
 *
 * Structure-agnostic — the same styles cover two shapes of data:
 *
 *   FLAT    Parent -> inner leaf items            (CURRENT state)
 *           .menu-item-mega.mega-flat  -> leaf items balanced into columns
 *           (.mega-cols-1 / -2 / -3 set by PHP based on item count)
 *
 *   GROUPED Parent -> Subcategory -> inner items  (FUTURE state)
 *           .menu-item-mega.mega-grouped -> one column per subcategory,
 *           the subcategory link becomes the column heading and its inner
 *           list is shown statically beneath it (matches "Subcategory 1/2").
 *
 * Desktop only. Below 769px GeneratePress swaps to #mobile-header and its
 * native accordion, which we intentionally leave untouched.
 *
 * Figma tokens: panel #16432c · Poppins · headings 600 · items 400/16px/22lh
 * uppercase white · ~15px item gap.
 */

@media (min-width: 769px) {

	/* Anchor the panel to its top-level item. */
	.secondary-navigation .main-nav ul li.menu-item-mega {
		position: relative;
	}

	/* ---- The panel itself ---------------------------------------------- */
	.secondary-navigation .main-nav ul li.menu-item-mega > ul.sub-menu {
		background-color: #16432c;
		padding: 30px 36px 34px;
		border: 0;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
		top: 100%;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		max-width: calc(100vw - 32px);
		z-index: 100;
	}

	/* Neutralise GeneratePress' per-item hover backgrounds / fixed widths
	   for everything living inside the panel. */
	.secondary-navigation .main-nav ul li.menu-item-mega ul.sub-menu li,
	.secondary-navigation .main-nav ul li.menu-item-mega ul.sub-menu li:hover,
	.secondary-navigation .main-nav ul li.menu-item-mega ul.sub-menu li.sfHover {
		width: auto;
		background: transparent !important;
	}

	/* Base item link styling (applies to every clickable item in the panel). */
	.secondary-navigation .main-nav ul li.menu-item-mega ul.sub-menu li a {
		display: block;
		padding: 0;
		color: #ffffff;
		font-family: Poppins, sans-serif;
		font-size: 16px;
		font-weight: 400 !important;
		line-height: 22px;
		text-align: left;
		text-transform: capitalize !important;
		white-space: normal;
		background: transparent !important;
		transition: color 0.15s ease;
	}

	.secondary-navigation .main-nav ul li.menu-item-mega ul.sub-menu li a:hover,
	.secondary-navigation .main-nav ul li.menu-item-mega ul.sub-menu li a:focus {
		color: #8fd0a3;
		background: transparent !important;
	}

	/* =====================================================================
	   NORMAL (non-mega) secondary-nav dropdowns.
	   Match the mega menu's font formatting: normal weight + Title Case
	   (GeneratePress renders these bold / text-transform:none). Panel and
	   item colours are intentionally left as the theme defaults.
	   ===================================================================== */
	.secondary-navigation .main-nav ul.sub-menu li a {
		font-weight: 400 !important;
		text-transform: capitalize !important;
	}

	/* =====================================================================
	   FLAT  ·  Parent -> inner leaf items (current structure)
	   Balance the leaf items across N columns via CSS multicolumn.
	   ===================================================================== */
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-flat > ul.sub-menu {
		column-gap: 48px;
	}
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-flat.mega-cols-1 > ul.sub-menu { column-count: 1; width: 320px; }
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-flat.mega-cols-2 > ul.sub-menu { column-count: 2; width: 691px; }
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-flat.mega-cols-3 > ul.sub-menu { column-count: 3; width: 980px; }

	/* Keep each item whole within a column and give the 15px vertical rhythm. */
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-flat > ul.sub-menu > li {
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-flat > ul.sub-menu > li > a {
		padding-bottom: 15px;
	}
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-flat > ul.sub-menu > li:last-child > a {
		padding-bottom: 0;
	}

	/* =====================================================================
	   GROUPED  ·  Parent -> Subcategory -> inner items (future structure)
	   Each subcategory is a column: its own link is the heading, and its
	   nested list is shown statically beneath it.
	   ===================================================================== */
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 56px;
		width: auto;
	}

	/* One subcategory column. */
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li {
		position: static;
		min-width: 220px;
	}

	/* Subcategory heading (the 2nd-level link). */
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li > a {
		font-weight: 600;
		margin-bottom: 22px;
	}
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li > a:hover,
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li > a:focus {
		color: #ffffff; /* headings stay white; hover accent is for leaf items */
	}

	/* Hide the little caret toggle on the heading. */
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li > a .dropdown-menu-toggle {
		display: none;
	}

	/* The inner list is always visible and laid out statically in-column. */
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li > ul.sub-menu {
		position: static;
		display: block;
		visibility: visible;
		opacity: 1;
		background: transparent;
		box-shadow: none;
		padding: 0;
		margin: 0;
		width: auto;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		pointer-events: auto;
	}
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li > ul.sub-menu > li > a {
		font-weight: 400 !important;
		padding-bottom: 15px;
	}
	.secondary-navigation .main-nav ul li.menu-item-mega.mega-grouped > ul.sub-menu > li > ul.sub-menu > li:last-child > a {
		padding-bottom: 0;
	}
}