/*
 * GOTB Kadence Menu Suite - Full-Screen Dropdown
 * Targets Kadence's native theme nav markup:
 *   .main-navigation ul.menu > li.menu-item-has-children > ul.sub-menu
 * Only active when body has .gotb-fs-dropdown-enabled (toggle in settings)
 * and JS has added .gotb-fs-open to the current item.
 */

body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children > a .nav-drop-title-wrap {
	font-size: var(--gotb-fs-top-size);
	font-family: var(--gotb-fs-font-family);
}

/* Backdrop behind the open panel — starts below the header/nav (same
   offset as the panel itself) so it dims the page content, not the header
   the user is actively hovering/clicking to control the menu. */
body.gotb-fs-dropdown-enabled .gotb-fs-backdrop {
	position: fixed;
	top: var(--gotb-fs-panel-top, 0px);
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--gotb-fs-overlay-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 9998;
}
body.gotb-fs-dropdown-enabled.gotb-fs-open .gotb-fs-backdrop {
	opacity: 1;
	pointer-events: auto;
}

/* The full-screen panel itself */
body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children.gotb-fs-item > .sub-menu {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--gotb-fs-panel-top, 0px);
	width: 100vw;
	max-width: 100vw;
	height: auto;
	max-height: calc(100vh - var(--gotb-fs-panel-top, 0px));
	overflow-y: auto;
	margin: 0;
	padding: 3.5vw 6vw;

	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 1.5em 3em;

	background: var(--gotb-fs-bg-color);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	z-index: 9999;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children.gotb-fs-item.gotb-fs-active > .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Animations */
body.gotb-fs-dropdown-enabled[data-gotb-fs-animation="fade"] .main-navigation .sub-menu {
	transition: opacity 0.25s ease;
}
body.gotb-fs-dropdown-enabled[data-gotb-fs-animation="slide"] .main-navigation .sub-menu {
	transition: opacity 0.25s ease, transform 0.25s ease;
	transform: translateY(-12px);
}
body.gotb-fs-dropdown-enabled[data-gotb-fs-animation="slide"] .main-navigation .menu-item-has-children.gotb-fs-item.gotb-fs-active > .sub-menu {
	transform: translateY(0);
}

/* Links inside the panel */
body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children.gotb-fs-item > .sub-menu li {
	list-style: none;
	width: auto;
}
body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children.gotb-fs-item > .sub-menu a {
	display: inline-block;
	font-family: var(--gotb-fs-font-family);
	font-size: var(--gotb-fs-drop-size);
	line-height: var(--gotb-fs-line-height);
	color: var(--gotb-fs-text-color);
	text-decoration: none;
	transition: color 0.2s ease;
}
body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children.gotb-fs-item > .sub-menu a:hover,
body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children.gotb-fs-item > .sub-menu a:focus {
	color: var(--gotb-fs-hover-color);
}

/* Lock page scroll while a panel is open */
body.gotb-fs-dropdown-enabled.gotb-fs-open {
	overflow: hidden;
}

@media (max-width: 1024px) {
	/* Kadence switches to the mobile drawer nav below its breakpoint;
	   let that native behavior take over untouched. */
	body.gotb-fs-dropdown-enabled .main-navigation .menu-item-has-children.gotb-fs-item > .sub-menu {
		position: static;
		width: auto;
		height: auto;
		max-height: none;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		box-shadow: none;
	}
}