/* ==========================================================================
   THL Testing Categories - viewport cutoff repair
   --------------------------------------------------------------------------
   Problem: Max Mega Menu flyout panels are `position: absolute` with no height
   limit, and #new_header is `position: fixed`. A panel taller than the space
   below the header runs off the bottom of the viewport and cannot be reached,
   because page scrolling does not move a fixed header. "Lab Test Categories
   (USA)" has 20 children, so the last four (Thyroid Testing, Toxicity, Stress,
   STD Testing) were off screen.

   Fix: long flyout lists are laid out in columns, and the row density / column
   count step up as the viewport gets shorter. No fixed pixel height is used,
   nothing is hidden, and nothing scrolls internally - internal scrolling would
   clip the third level flyouts, which are positioned outside the panel box.

   The `thl-flyout-columns` class is added server side by
   thl-menu-viewport-fix.php to any flyout parent with >= 12 children, so the
   layout follows the WordPress menu rather than a hardcoded list of items.

   Everything here is gated to `min-width: 1246px`, which is the site's own
   desktop header breakpoint. Mobile navigation is untouched.
   ========================================================================== */

@media (min-width: 1246px) {

	/* ----------------------------------------------------------------------
	   1. The panel
	   ---------------------------------------------------------------------- */

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout.thl-flyout-columns > ul.mega-sub-menu,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout li.mega-menu-item.thl-flyout-columns:not(.mega-menu-megamenu) > ul.mega-sub-menu {
		/* Tunable geometry. Column width is fixed (predictable panel width,
		   so the third level flyout always has room to its right); panel
		   HEIGHT is never fixed - it follows the content and the tier. */
		--thl-fc-columns: 2;
		--thl-fc-col-width: 250px;
		--thl-fc-gap: 10px;
		--thl-fc-row-height: 40px;
		--thl-fc-row-padding: 8px 14px;
		--thl-fc-panel-padding: 8px;

		display: block;
		width: calc((var(--thl-fc-col-width) * var(--thl-fc-columns)) + (var(--thl-fc-gap) * (var(--thl-fc-columns) - 1)));
		max-width: calc(100vw - 24px);
		max-height: none;
		height: auto;
		overflow: visible;

		column-count: var(--thl-fc-columns);
		column-gap: var(--thl-fc-gap);
		column-fill: balance;
		column-rule: 1px solid rgba(15, 23, 42, 0.08);

		padding-top: var(--thl-fc-panel-padding);
		padding-bottom: var(--thl-fc-panel-padding);
	}

	/* ----------------------------------------------------------------------
	   2. The rows
	   ---------------------------------------------------------------------- */

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item {
		/* Static so a third level flyout anchors to the panel rather than to
		   the column it happens to land in. Max Mega Menu's flex stylesheet
		   sets `position: relative` here, the classic stylesheet does not;
		   pinning it makes the behaviour identical under both. */
		position: static;
		display: block;
		float: none;
		width: 100%;

		/* Never split a category across the column break. */
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		display: flex;
		align-items: center;
		gap: 6px;

		min-height: var(--thl-fc-row-height);
		line-height: 1.3;
		padding: var(--thl-fc-row-padding);

		/* Max Mega Menu forces `white-space: nowrap; min-width: 150px` on
		   auto-width flyouts. Long labels such as "Vitamins Minerals Heavy
		   Metal" need to wrap inside a fixed column instead of being clipped. */
		white-space: normal;
		min-width: 0;
		overflow-wrap: break-word;
	}

	/* Arrow sits hard right on rows that genuinely have nested children.
	   The theme's global `span.mega-indicator:after { padding-right: 20px
	   !important }` steals column width, so it is cancelled inside the panel
	   only. */
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
		margin-left: auto;
		flex: 0 0 auto;
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator:after {
		padding-right: 0 !important;
	}

	/* Keyboard focus must stay visible inside the panel. */
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu a.mega-menu-link:focus-visible {
		outline: 2px solid #1d54b4;
		outline-offset: -2px;
	}

	/* ----------------------------------------------------------------------
	   3. Third level flyouts (Autoimmune, Blood Sugar, Cancer, Female,
	      Immune, Lyme Disease Tests, Thyroid Testing)

	      They open to the right of the whole panel and must not inherit the
	      column layout.
	   ---------------------------------------------------------------------- */

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
		position: absolute;
		top: 0;
		left: 100%;
		right: auto;
		/* max-content keeps the natural single-line width, the cap stops a
		   long label from pushing the panel off the right of the screen. */
		width: max-content;
		max-width: 220px;
		column-count: initial;
		column-rule: none;
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		white-space: normal;
		min-width: 0;
	}

	/* On the narrowest desktop widths there is no longer room to the right of
	   a two column panel, so the third level opens over the last column
	   instead of past the edge of the screen. */
	@media (max-width: 1279px) {
		#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
			left: auto;
			right: 0;
		}
	}

	/* ----------------------------------------------------------------------
	   4. Width tiers - keep the panel plus its third level flyout inside the
	      narrowest desktop width the site supports (1246px).
	   ---------------------------------------------------------------------- */

	@media (max-width: 1365px) {
		#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout.thl-flyout-columns > ul.mega-sub-menu,
		#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout li.mega-menu-item.thl-flyout-columns:not(.mega-menu-megamenu) > ul.mega-sub-menu {
			--thl-fc-col-width: 208px;
		}
	}

	/* ----------------------------------------------------------------------
	   5. Height tiers - the bug is about vertical space, so density follows
	      the viewport height rather than a fixed pixel budget. These trigger
	      on short windows and on browser zoom alike, because zoom shrinks the
	      viewport in CSS pixels.
	   ---------------------------------------------------------------------- */

	/* Short window: tighten the rows, still two columns. */
	@media (max-height: 700px) {
		#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout.thl-flyout-columns > ul.mega-sub-menu,
		#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout li.mega-menu-item.thl-flyout-columns:not(.mega-menu-megamenu) > ul.mega-sub-menu {
			--thl-fc-row-height: 32px;
			--thl-fc-row-padding: 5px 14px;
			--thl-fc-panel-padding: 6px;
		}
	}

	/* Very short window (small laptop at 110-125% zoom): three columns. */
	@media (max-height: 520px) {
		#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout.thl-flyout-columns > ul.mega-sub-menu,
		#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout li.mega-menu-item.thl-flyout-columns:not(.mega-menu-megamenu) > ul.mega-sub-menu {
			--thl-fc-columns: 3;
			--thl-fc-col-width: 200px;
		}

		/* A three column panel is wide enough that the third level only has
		   room beside it on large monitors. */
		@media (max-width: 1500px) {
			#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item.thl-flyout-columns > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
				left: auto;
				right: 0;
			}
		}
	}
}