/*
 * Keralcart header menu fixes (loaded by keralcart-category-menu.php).
 *
 * Elementor element IDs used below (header template #2763, off-canvas template #2921):
 *   82e742b - desktop "Browse All Categories" Nav Menu (menu: category-menu)
 *   a4644e5 - mobile slide-out category Nav Menu   (menu: category-menu)
 *   eac0099 - mobile slide-out pages Nav Menu      (menu: mega-menu)
 * Kept in CSS (not Elementor settings) so the fixes ship with the site files.
 */

.elementor-nav-menu .kc-catmenu-item > a {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
	/* Header alignment (the -180px offset) is handled in keralcart-site-settings/assets/header-layout.css. */

	/* Hover/open state: the widget background turns white, so the white label vanished.
	 * Use the brand green for the label and arrow while hovered or open. */
	.elementor-element-82e742b:hover .elementor-nav-menu--main > .elementor-nav-menu > li > a,
	.elementor-element-82e742b:focus-within .elementor-nav-menu--main > .elementor-nav-menu > li > a,
	.elementor-element-82e742b .elementor-nav-menu--main > .elementor-nav-menu > li > a.highlighted {
		color: #355d3f !important;
		fill: #355d3f !important;
	}
	.elementor-element-82e742b:hover .elementor-nav-menu--main > .elementor-nav-menu > li > a .sub-arrow svg,
	.elementor-element-82e742b .elementor-nav-menu--main > .elementor-nav-menu > li > a.highlighted .sub-arrow svg {
		fill: #355d3f !important;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile / tablet (<= 1024px): slide-out panel opened by the header hamburger
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
	/* The homepage product grid's Bootstrap .row (-15px margins) poked 15px past the right edge,
	 * widening the page to 405px on a 390px phone: sideways wobble, and the slide-out panel's
	 * close button ended up off-screen. Clip the grid, and never let the page scroll sideways. */
	.elementor-element-d05d5db {
		overflow-x: clip;
	}
	html,
	body {
		overflow-x: clip;
	}

	/* The panel's close button has no icon configured (renders as an empty 16x11 oval). */
	.ekit-sidebar-widget .ekit_close-side-widget {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: #355d3f !important;
		color: #fff !important;
		text-decoration: none;
	}
	.ekit-sidebar-widget .ekit_close-side-widget:not(:has(*))::before {
		content: "\00d7"; /* × */
		font-size: 28px;
		line-height: 1;
	}

	/* The two menus sat side by side as unlabeled hamburger icons. Stack them full width... */
	.elementor-element-3d507cc { /* Elementor grid container with 2 columns -> 1 column */
		--e-con-grid-template-columns: 1fr !important;
		grid-template-columns: 1fr !important;
		justify-items: stretch !important;
		gap: 4px;
	}
	.elementor-element-a4644e5,
	.elementor-element-eac0099 {
		--container-widget-width: 100% !important;
		--container-widget-flex-grow: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* ...and show them as open lists instead of behind their toggle buttons. */
	.elementor-element-a4644e5 .elementor-menu-toggle,
	.elementor-element-eac0099 .elementor-menu-toggle {
		display: none !important;
	}
	.elementor-element-a4644e5 .elementor-nav-menu--dropdown.elementor-nav-menu__container,
	.elementor-element-eac0099 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		display: block !important;
		position: static !important;
		transform: none !important;
		max-height: none !important;
		overflow: visible !important;
		margin-top: 0 !important;
		width: 100% !important;
		box-shadow: none;
	}

	/* "Browse All Categories" as a clear, tappable heading row. Categories and subcategories
	 * expand/collapse on tap (handled by the widget's own SmartMenus script). */
	.elementor-element-a4644e5 .elementor-nav-menu--dropdown > ul > li > a {
		background: #355d3f !important;
		color: #fff !important;
		font-weight: 600;
	}
	.elementor-element-a4644e5 .elementor-nav-menu--dropdown > ul > li > a .sub-arrow svg {
		fill: #fff !important;
	}
	.elementor-element-a4644e5 .elementor-nav-menu--dropdown .kc-catmenu-item > a {
		white-space: normal;
		border-bottom: 1px solid rgba(53, 93, 63, 0.12);
	}
	.elementor-element-a4644e5 .elementor-nav-menu--dropdown .sub-menu .sub-menu > li > a {
		padding-left: 36px !important; /* subcategories indented under their category */
	}
}

/* Subcategory flyout to the right on hover (the widget itself opens submenus on click).
 * !important beats SmartMenus' inline display:none. */
@media (hover: hover) and (min-width: 1025px) {
	.elementor-nav-menu--main .kc-catmenu-item.menu-item-has-children {
		position: relative;
	}
	.elementor-nav-menu--main .kc-catmenu-item.menu-item-has-children:hover > ul.sub-menu,
	.elementor-nav-menu--main .kc-catmenu-item.menu-item-has-children:focus-within > ul.sub-menu {
		display: block !important;
		position: absolute !important;
		top: 0 !important;
		left: 100% !important;
		right: auto !important;
		margin: 0 !important;
		min-width: 220px;
		width: auto !important;
		z-index: 10000;
	}
}