/**
 * Niki Core   2026
 * Mega Menu
 * Dr. Niki Papageorgiou
 * All Rights Reserved.
 *
 * Lightweight global Mega Menu skin for Niki Core menu components.
 * Uses the existing Niki Core design tokens.
 */

/*--------------------------------------------------------------
# Mega Menu   Desktop
--------------------------------------------------------------*/

@media (min-width: 783px){

	/* Builder/header wrappers must not clip the dropdown. */
	.niki-header,
	.niki-header-inner,
	.niki-header-menu,
	.niki-header-menu > ul,
	.niki-header-menu .menu,
	.niki-menu-component,
	.niki-menu-component-list,
	.niki-menu-component-list .menu,
	.niki-component-menu,
	.niki-component-menu-list{
		overflow:visible;
	}

	/* Top-level Mega Menu item. */
	.niki-mega-menu{
		position:relative;
	}

	/*
	 * Hover bridge:
	 * keeps the parent item hovered while the pointer travels
	 * from the menu label down into the Mega Menu panel.
	 */
	.niki-mega-menu::after{
		content:"";
		position:absolute;
		z-index:999;
		left:0;
		right:auto;
		top:100%;
		width:100%;
		height:14px;
		background:transparent;
	}

	/* Full, compact panel directly below the menu/header row. */
	.niki-mega-menu > .sub-menu{
		position:absolute;
		z-index:1001;
		top:calc(100% + 10px);
		left:0;
		right:auto;
		display:grid;
		width:min(var(--niki-mega-max-width,900px),calc(100vw - 48px));
		max-width:var(--niki-mega-max-width,900px);
		margin:0;
		padding:var(--niki-mega-padding,24px);
		background:var(--niki-mega-background,var(--niki-surface,#fff));
		border:0;
		border-top:1px solid var(--niki-mega-border,var(--niki-border,#E5E7F0));
		border-bottom:1px solid var(--niki-mega-border,var(--niki-border,#E5E7F0));
		border-radius:var(--niki-mega-radius,0);
		box-shadow:var(--niki-mega-shadow,0 14px 28px rgba(1,12,53,.05));
		transform:none;
		opacity:0;
		visibility:hidden;
		pointer-events:none;
		gap:var(--niki-mega-gap,32px);
	}

	.niki-mega-menu:hover > .sub-menu,
	.niki-mega-menu:focus-within > .sub-menu,
	.niki-mega-menu.is-open > .sub-menu{
		opacity:1;
		visibility:visible;
		pointer-events:auto;
	}

	.niki-mega-columns-2 > .sub-menu{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.niki-mega-columns-3 > .sub-menu{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}

	.niki-mega-columns-4 > .sub-menu{
		grid-template-columns:repeat(4,minmax(0,1fr));
	}

	/* Each Mega Column. */
	.niki-mega-menu > .sub-menu > li{
		position:relative;
		min-width:0;
		margin:0;
		padding:0;
		background:transparent;
		border:0;
		box-shadow:none;
		list-style:none;
	}

	/* Unified Mega Column layout: icon + title, image/content below. */
	.niki-mega-menu > .sub-menu > li{
		display:flex;
		flex-direction:column;
		align-items:stretch;
	}

	/* Column heading. */
	.niki-mega-menu > .sub-menu > li > a{
		display:grid;
		grid-template-columns:auto minmax(0,1fr);
		grid-template-rows:auto auto;
		align-items:center;
		column-gap:8px;
		row-gap:10px;
		min-height:38px;
		margin:0 0 14px;
		padding:0 0 10px;
		color:var(--niki-mega-heading,var(--niki-heading,var(--niki-primary,#010C35)));
		background:transparent;
		border:0;
		border-bottom:1px solid var(--niki-mega-border,var(--niki-border,#E5E7F0));
		border-radius:0;
		font-weight:700;
		line-height:1.35;
		text-decoration:none;
	}

	/* Keep heading icons aligned and independent from image dimensions. */
	.niki-mega-menu > .sub-menu > li > a .niki-menu-item-icon{
		grid-column:1;
		grid-row:1;
		margin:0;
	}

	.niki-mega-menu > .sub-menu > li > a > .niki-mega-link-media{
		grid-column:1 / -1;
		grid-row:2;
	}

	/* Normalize Mega Menu media across all columns. */
	.niki-mega-menu .niki-mega-link-media{
		display:block;
		width:100%;
		margin:0 0 10px;
	}

	.niki-mega-menu .niki-mega-link-image{
		display:block;
		width:100%;
		height:var(--niki-mega-image-height,180px);
		object-fit:contain;
		object-position:center;
	}

	/* Links belonging to each column. */
	.niki-mega-menu > .sub-menu > li > .sub-menu{
		position:static;
		display:block;
		width:auto;
		min-width:0;
		margin:0;
		padding:0;
		background:transparent;
		border:0;
		border-radius:0;
		box-shadow:none;
		opacity:1;
		visibility:visible;
		transform:none;
		pointer-events:auto;
	}

	.niki-mega-menu > .sub-menu > li > .sub-menu li{
		margin:0;
		padding:0;
		border:0;
		list-style:none;
	}

	.niki-mega-menu > .sub-menu > li > .sub-menu a{
		display:block;
		padding:7px 0;
		color:var(--niki-mega-link,var(--niki-text,#202936));
		background:transparent;
		border:0;
		border-radius:0;
		font-size:14px;
		line-height:1.45;
		text-decoration:none;
	}

	.niki-mega-menu > .sub-menu > li > .sub-menu a:hover,
	.niki-mega-menu > .sub-menu > li > .sub-menu a:focus-visible{
		color:var(--niki-mega-hover,var(--niki-accent,#7B63FF));
		background:transparent;
	}

	.niki-mega-menu a:focus-visible{
		outline:2px solid var(--niki-accent,#7B63FF);
		outline-offset:3px;
	}

	/* Mega Menu Content Layout */
	.niki-mega-menu > .sub-menu > li{
		text-align:var(--niki-mega-alignment,left);
	}

	.niki-mega-column-text{
		margin:0 0 14px;
		line-height:1.55;
		color:var(--niki-mega-link,var(--niki-text,#202936));
	}

	.niki-mega-layout-text-left .niki-mega-menu > .sub-menu > li,
	.niki-mega-layout-image-left .niki-mega-menu > .sub-menu > li{
		display:grid;
		grid-template-columns:minmax(0,calc(100% - var(--niki-mega-image-width,40%) - var(--niki-mega-content-gap,16px))) var(--niki-mega-image-width,40%);
		column-gap:var(--niki-mega-content-gap,16px);
		align-items:start;
	}

	.niki-mega-layout-text-left .niki-mega-menu > .sub-menu > li > a,
	.niki-mega-layout-image-left .niki-mega-menu > .sub-menu > li > a{
		display:contents;
	}

	.niki-mega-layout-text-left .niki-mega-menu > .sub-menu > li > a > .niki-mega-link-media{
		grid-column:2;
		grid-row:1 / span 3;
		margin:0;
	}
	.niki-mega-layout-text-left .niki-mega-menu > .sub-menu > li > .niki-mega-column-text,
	.niki-mega-layout-text-left .niki-mega-menu > .sub-menu > li > .sub-menu{
		grid-column:1;
	}

	.niki-mega-layout-image-left .niki-mega-menu > .sub-menu > li{
		grid-template-columns:var(--niki-mega-image-width,40%) minmax(0,calc(100% - var(--niki-mega-image-width,40%) - var(--niki-mega-content-gap,16px)));
	}
	.niki-mega-layout-image-left .niki-mega-menu > .sub-menu > li > a > .niki-mega-link-media{
		grid-column:1;
		grid-row:1 / span 3;
		margin:0;
	}
	.niki-mega-layout-image-left .niki-mega-menu > .sub-menu > li > .niki-mega-column-text,
	.niki-mega-layout-image-left .niki-mega-menu > .sub-menu > li > .sub-menu{
		grid-column:2;
	}

	.niki-mega-layout-image-bottom .niki-mega-menu > .sub-menu > li{
		display:flex;
	}
	.niki-mega-layout-image-bottom .niki-mega-menu > .sub-menu > li > a{
		order:3;
	}
	.niki-mega-layout-image-bottom .niki-mega-menu > .sub-menu > li > .niki-mega-column-text{
		order:1;
	}
	.niki-mega-layout-image-bottom .niki-mega-menu > .sub-menu > li > .sub-menu{
		order:2;
	}



	/* Mega Menu icon placement */
	.niki-mega-menu .niki-menu-item-icon.is-top,
	.niki-mega-menu .niki-menu-item-icon.is-bottom{
		display:flex;
		width:max-content;
	}

	.niki-mega-menu .niki-menu-item-icon.is-top{
		grid-column:1 / -1;
		grid-row:1;
		margin:0 0 8px;
	}

	.niki-mega-menu .niki-menu-item-icon.is-bottom{
		grid-column:1 / -1;
		grid-row:3;
		margin:8px 0 0;
	}

	.niki-mega-menu .niki-menu-item-icon.is-right{
		margin-left:auto;
	}


}

/*--------------------------------------------------------------
# Mega Menu   Mobile Foundation
--------------------------------------------------------------*/

@media (max-width: 782px){

	.niki-mega-menu > .sub-menu{
		position:static;
		width:100%;
		margin:0;
		padding:0;
		background:transparent;
		border:0;
		border-radius:0;
		box-shadow:none;
		transform:none;
	}

	.niki-mega-menu > .sub-menu > li{
		margin:0;
		padding:0;
		border-bottom:1px solid var(--niki-border,#E5E7F0);
	}

	.niki-mega-menu > .sub-menu > li > a{
		display:block;
		padding:12px 0;
		color:var(--niki-heading,var(--niki-primary,#010C35));
		font-weight:700;
		text-decoration:none;
	}

	.niki-mega-menu > .sub-menu > li > .sub-menu{
		position:static;
		width:100%;
		margin:0;
		padding:0 0 10px 14px;
		background:transparent;
		border:0;
		box-shadow:none;
	}

	.niki-mega-menu > .sub-menu > li > .sub-menu a{
		display:block;
		padding:8px 0;
		color:var(--niki-text,#202936);
		text-decoration:none;
	}

}

/*--------------------------------------------------------------
# Mobile Menu — Functional Layer
--------------------------------------------------------------*/
.niki-mobile-menu-toggle{display:none;}

@media (min-width:783px){
	.niki-mobile-menu-shell,
	.niki-mobile-menu-panel{display:contents;}
	.niki-mobile-submenu-toggle{display:none!important;}
}

@media (max-width:782px){
	.niki-mobile-menu-shell{width:100%;}
	.niki-mobile-menu-toggle{
		display:inline-flex;align-items:center;justify-content:center;
		width:44px;height:44px;margin-left:auto;padding:0;
		border:1px solid var(--niki-border,#E5E7F0);border-radius:8px;
		background:var(--niki-surface,#fff);
		color:var(--niki-heading,var(--niki-primary,#010C35));cursor:pointer;
	}
	.niki-mobile-menu-toggle-icon{display:flex;flex-direction:column;gap:4px;width:20px;}
	.niki-mobile-menu-toggle-icon span{display:block;width:100%;height:2px;background:currentColor;}
	.niki-mobile-menu-panel{width:100%;margin-top:10px;}
	.niki-mobile-menu-panel[hidden]{display:none!important;}

	.niki-mobile-menu-panel > .niki-component-menu-list{
		display:flex!important;flex-direction:column!important;align-items:stretch!important;
		justify-content:flex-start!important;width:100%;gap:0!important;
		margin:0!important;padding:0!important;list-style:none!important;
	}
	.niki-mobile-menu-panel li{
		position:relative!important;width:100%;margin:0!important;padding:0!important;list-style:none!important;
	}
	.niki-mobile-menu-panel li > a{
		display:flex!important;align-items:center!important;width:100%;min-height:46px;
		padding:11px 46px 11px 0!important;border:0!important;
		border-bottom:1px solid var(--niki-border,#E5E7F0)!important;
		border-radius:0!important;background:transparent!important;box-shadow:none!important;
		color:var(--niki-text,#202936)!important;text-decoration:none!important;transform:none!important;
	}
	.niki-mobile-menu-panel .sub-menu{
		position:static!important;top:auto!important;left:auto!important;right:auto!important;
		display:block;width:100%!important;min-width:0!important;margin:0!important;
		padding:0 0 0 16px!important;border:0!important;border-radius:0!important;
		background:transparent!important;box-shadow:none!important;opacity:1!important;
		visibility:visible!important;transform:none!important;pointer-events:auto!important;
	}
	.niki-mobile-menu-panel .sub-menu[hidden]{display:none!important;}
	.niki-mobile-submenu-toggle{
		position:absolute;z-index:2;top:5px;right:0;display:inline-flex;
		align-items:center;justify-content:center;width:36px;height:36px;padding:0;
		border:0;background:transparent;color:var(--niki-heading,var(--niki-primary,#010C35));
		font-size:20px;line-height:1;cursor:pointer;
	}
	.niki-mobile-menu-panel .niki-mega-menu > .sub-menu{padding-left:0!important;}
	.niki-mobile-menu-panel .niki-mega-link-media,
	.niki-mobile-menu-panel .niki-mega-link-image{display:none!important;}
	.niki-mobile-menu-panel .niki-menu-item-icon,
	.niki-mobile-menu-panel .niki-icon{display:inline-flex;flex:0 0 auto;}
	.niki-mobile-menu-panel .niki-mega-menu > .sub-menu > li > a{
		padding-left:0!important;font-weight:700!important;
	}
	.niki-mobile-menu-panel .niki-mega-menu > .sub-menu > li > .sub-menu{
		padding-left:16px!important;
	}
}