/* =========================================================================
   ACXPA — KLEO mega menu layout
   -------------------------------------------------------------------------
   KLEO ships a working mega menu (li.kleo-megamenu + mega-N-cols) but lays
   the columns out with float:left and percentage widths, so unequal column
   heights overlap into a staircase and a tall panel runs off the bottom of
   the viewport with no scroll.

   This replaces the float grid with CSS Grid and adds a viewport guard.
   Desktop only — KLEO handles <=991px with its own accordion rules.

   Palette is the LIVE teal scheme sampled from the site, not the legacy
   bottle green still scattered through custom.css:
       #08363f  header teal          #0d4f5c  mid teal
       #f8b133  amber accent         #e8f0f0  cool grey surface

   File:   wp-content/themes/kleo-child/css/acxpa-mega-menu.css
   Note:   NOT related to the unused mega-menu.css in the same folder.
   ========================================================================= */

@media screen and (min-width: 992px) {

	/* ---------------------------------------------------------------------
	   Panel — KLEO caps at 1024px; the ACXPA container is 1280px.
	   ------------------------------------------------------------------ */

	.kleo-main-header .nav li.kleo-megamenu > .dropdown-menu {
		max-width: 1240px !important;   /* KLEO caps at 1024px with equal specificity */
		padding: 26px 28px;
		border-top: 3px solid #0d4f5c;
		border-radius: 0 0 8px 8px;
		box-shadow: 0 12px 28px rgba(8, 54, 63, .22);

		/* Never taller than the viewport. Without this a long panel runs off
		   the bottom of the screen with no way to reach the rest. */
		max-height: calc(100vh - 150px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.is-sticky .kleo-main-header .nav li.kleo-megamenu > .dropdown-menu {
		max-height: calc(100vh - 110px);
	}

	/* ---------------------------------------------------------------------
	   Columns — grid instead of floats. This is the staircase fix.
	   ------------------------------------------------------------------ */

	/* KLEO emits mega-N-cols where N is the COUNT OF SECOND-LEVEL CHILDREN,
	   not a column preference — so Resources (11 children) arrives as
	   mega-11-cols. Eleven columns is unusable, so the base rule caps
	   everything at 4 and only genuinely small sections narrow below that.
	   Do not type mega-N-cols into the menu's CSS Classes box; KLEO adds its
	   own and you would end up with two competing column classes.

	   CRITICAL — DO NOT SET `display` ON THIS ELEMENT.
	   Bootstrap hides the panel with .dropdown-menu { display: none } and
	   reveals it on open. Setting display:grid here overrode that and left
	   the panel permanently open on the page. CSS multi-column needs no
	   display change, so the show/hide behaviour is left entirely alone.

	   Multi-column also balances the columns by height, which CSS Grid could
	   not: with grid, one 15-item section (Benchmarking Services) set the row
	   height and the childless sections beside it left huge empty gaps. */

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu {
		column-count: 4;
		column-gap: 30px;
	}

	/* 2 or 3 children — don't stretch them across 4 columns. */
	.kleo-main-header .nav li.kleo-megamenu.mega-2-cols > ul.dropdown-menu {
		column-count: 2;
	}

	.kleo-main-header .nav li.kleo-megamenu.mega-3-cols > ul.dropdown-menu {
		column-count: 3;
	}

	/* Neutralise KLEO's float + percentage widths, and keep each section
	   whole rather than splitting a heading from its links across columns.

	   float MUST be !important. KLEO sets float:left on these items with the
	   same specificity as this rule and wins on source order, and a floated
	   item inside a multi-column container sits beside its neighbour instead
	   of stacking — which is what put ARTICLES and AUTHORS on one line and
	   ran QUIZZES – INDUSTRY into QUIZZES – FUN. */
	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		min-width: 0;
		margin: 0 0 24px;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* Last section in each column shouldn't add trailing space. */
	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li:last-child {
		margin-bottom: 0;
	}

	/* ---------------------------------------------------------------------
	   Column heading = the 2nd-level menu item
	   ------------------------------------------------------------------ */

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > a {
		background: transparent !important;
		border-bottom: 2px solid #f8b133;
		color: #08363f !important;
		font-size: 13px !important;
		font-weight: 800;
		letter-spacing: .04em;
		line-height: 1.3;
		margin-bottom: 12px;
		padding: 0 0 8px !important;
		text-transform: uppercase;
		white-space: normal !important;
	}

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > a:hover,
	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > a:focus-visible {
		background: transparent !important;
		color: #0d4f5c !important;
	}

	/* A section with NO children is not a heading — it is a single link, and
	   styling it as an uppercase underlined heading with nothing beneath
	   reads as a broken empty column. Resources currently has eight of these
	   (View All Resources, Authors, Erlang Calculator, Industry Glossary,
	   Phonetic Alphabet, both Quizzes, Video Library). Render them as links.
	   They also pack far tighter, which helps the column balancer. */

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li:not(.menu-item-has-children) {
		margin-bottom: 2px;
	}

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li:not(.menu-item-has-children) > a {
		border-bottom: 0;
		border-left: 3px solid transparent;
		border-radius: 0 5px 5px 0;
		color: #1b2b2f !important;
		font-size: 14px !important;
		font-weight: 500;
		letter-spacing: 0;
		margin-bottom: 0;
		padding: 7px 10px !important;
		text-transform: none;
	}

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li:not(.menu-item-has-children) > a:hover,
	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li:not(.menu-item-has-children) > a:focus-visible {
		background: #e8f0f0 !important;
		border-left-color: #f8b133;
		color: #0d4f5c !important;
	}

	/* ---------------------------------------------------------------------
	   3rd-level links — flatten from flyout to a plain list in the column
	   ------------------------------------------------------------------ */

	/* float MUST be cleared here too, not just on the parent li.
	   KLEO floats this list left. A floated element contributes NOTHING to
	   its parent's height, so the "Articles" li measured 40px (the heading
	   alone) while its 236px of links spilled outside the box and collided
	   with the sections below it. This one line is what makes the columns
	   line up. */
	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > ul.sub-menu {
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		display: block !important;
		float: none !important;
		left: auto !important;
		margin: 0 !important;
		min-width: 0 !important;
		opacity: 1;
		padding: 0 !important;
		position: static !important;
		top: auto !important;
		visibility: visible;
		width: 100% !important;
	}

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > ul.sub-menu > li {
		display: block !important;
		float: none !important;
		width: 100% !important;
	}

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > ul.sub-menu > li > a {
		background: transparent !important;
		border: 0;
		border-left: 3px solid transparent;
		border-radius: 0 5px 5px 0;
		color: #1b2b2f !important;
		font-size: 14px !important;
		font-weight: 500;
		line-height: 1.35;
		padding: 7px 10px !important;
		white-space: normal !important;
	}

	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > ul.sub-menu > li > a:hover,
	.kleo-main-header .nav li.kleo-megamenu > ul.dropdown-menu > li > ul.sub-menu > li > a:focus-visible {
		background: #e8f0f0 !important;
		border-left-color: #f8b133;
		color: #0d4f5c !important;
	}

	/* 4th-level items render as flyouts INSIDE the panel and look broken.
	   You should not have any — this stops them shouting about it while the
	   menus are being cleaned up. */
	.kleo-main-header .nav li.kleo-megamenu .caret {
		display: none;
	}

	.kleo-main-header .nav li.kleo-megamenu ul.sub-menu ul.sub-menu {
		display: none !important;
	}

	/* Kill the "›" pseudo-caret custom.css adds to parent items, which makes
	   no sense once the child list is flattened into the column. */
	.kleo-main-header .nav li.kleo-megamenu .dropdown-menu.sub-menu li.menu-item-has-children > a::after {
		content: none !important;
	}

	/* ---------------------------------------------------------------------
	   Keyboard accessibility — KLEO's mega menu is hover-only by default.
	   ------------------------------------------------------------------ */

	.kleo-main-header .nav li.kleo-megamenu:focus-within > .dropdown-menu {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	/* ---------------------------------------------------------------------
	   Override the legacy width hack near the top of custom.css:
	     .kleo-main-header .dropdown[class*="mega-"] .dropdown-menu.sub-menu {
	         width: max-content !important; min-width: 280px !important; }
	   It propped up the ordinary dropdown and fights the grid.
	   ------------------------------------------------------------------ */

	.kleo-main-header .kleo-megamenu.dropdown[class*="mega-"] .dropdown-menu.sub-menu {
		width: auto !important;
		min-width: 0 !important;
	}
}