/**
 * AgriHarvest — Mega Menu (desktop, tablet & phone)
 *
 * Load order: after responsive.css.
 *
 * Behaviour:
 *  - Desktop (≥1081px): full-width multi-column drop panel on hover/focus.
 *  - Drawer (≤1080px, tablets & phones): chevron toggle expands the panel as
 *    an accordion — 2-column grid on tablets, stacked columns on phones.
 *
 * @package AgriHarvest
 */

/* Shared toggle button */
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	background: transparent;
	color: inherit;
	padding: 0;
}
.submenu-toggle svg { pointer-events: none; }

/* ==========================================================================
   DESKTOP — full-width mega panel (≥1081px)
   ========================================================================== */
@media (min-width: 1081px) {
	.primary-menu > li.mega-menu { position: static; }
	.submenu-toggle { display: none; }

	.primary-menu > li.mega-menu > ul.mega-menu-panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 34px max(28px, calc((100vw - var(--container)) / 2 + 28px));
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 20px 36px;
		background: var(--agri-white);
		border: 0;
		border-top: 3px solid var(--agri-accent);
		border-radius: 0;
		box-shadow: 0 34px 60px rgba(23, 41, 28, 0.16);
		list-style: none;
	}

	/* Column heading (2nd-level link) */
	.mega-menu-panel .mega-menu-col > a {
		display: block;
		width: 100%;
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 1rem;
		color: var(--agri-heading);
		padding: 0 0 10px;
		margin: 0 0 10px;
		border-bottom: 2px solid var(--agri-accent);
	}
	.mega-menu-panel .mega-menu-col > a:hover {
		background: transparent;
		color: var(--agri-primary);
	}

	/* Grandchildren list inside a column */
	.mega-menu-panel .sub-menu {
		position: static;
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		padding: 0;
		margin: 0;
		min-width: 0;
		list-style: none;
	}
	.mega-menu-panel .sub-menu a {
		display: block;
		padding: 8px 0;
		margin: 0;
		font-size: 0.92rem;
		font-weight: 500;
		color: var(--agri-text);
		border: 0;
		transition: var(--transition);
	}
	.mega-menu-panel .sub-menu a:hover {
		background: transparent;
		color: var(--agri-primary);
		transform: translateX(4px);
	}
	.mega-menu-panel .sub-menu .sub-menu { padding-left: 14px; border-left: 2px solid var(--agri-border); margin-left: 2px; }

	/* Highlighted CTA column (add class "mega-cta" to a 2nd-level item) */
	.mega-menu-col.mega-cta {
		background: linear-gradient(135deg, var(--agri-primary-dark), var(--agri-primary));
		border-radius: var(--radius);
		padding: 24px 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.mega-menu-col.mega-cta > a {
		color: #fff !important;
		border-bottom: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 1.08rem;
	}
	.mega-menu-col.mega-cta > a:hover { color: var(--agri-accent) !important; }
	.mega-menu-col.mega-cta .sub-menu a { color: rgba(255, 255, 255, 0.85); }
	.mega-menu-col.mega-cta .sub-menu a:hover { color: var(--agri-accent); }
}

/* ==========================================================================
   DRAWER — tablets & phones (≤1080px): accordion mega menus
   ========================================================================== */
@media (max-width: 1080px) {

	.primary-menu li { position: relative; }
	.primary-menu li > a { padding-right: 58px; }

	.submenu-toggle {
		position: absolute;
		right: 2px;
		top: 7px;
		width: 44px;
		height: 44px;
		border-radius: 10px;
		background: var(--agri-primary-light);
		color: var(--agri-primary);
		transition: var(--transition);
		-webkit-tap-highlight-color: transparent;
	}
	.submenu-toggle:hover { background: var(--agri-primary); color: #fff; }
	.submenu-toggle svg {
		width: 18px;
		height: 18px;
		transition: transform 0.25s ease;
	}
	.primary-menu li.open > .submenu-toggle { background: var(--agri-primary); color: #fff; }
	.primary-menu li.open > .submenu-toggle svg { transform: rotate(180deg); }

	/* All sub-lists collapsed until the chevron is tapped. */
	.primary-menu .sub-menu { display: none; }
	.primary-menu li.open > .sub-menu { display: block; }

	/* Mega panel inside the drawer: padded card look. */
	.primary-menu .mega-menu-panel {
		display: none;
		background: var(--agri-cream);
		border-radius: 14px;
		margin: 4px 0 14px;
		padding: 14px 18px;
		list-style: none;
	}
	.primary-menu li.open > .mega-menu-panel { display: block; }

	/* Column heading inside drawer. */
	.primary-menu .mega-menu-panel .mega-menu-col { padding: 2px 0; }
	.primary-menu .mega-menu-panel .mega-menu-col > a {
		display: block;
		font-family: var(--font-heading);
		font-weight: 800;
		font-size: 0.95rem;
		color: var(--agri-primary-dark);
		padding: 10px 0 6px;
		border-bottom: 1px solid var(--agri-border);
		border-radius: 0;
	}
	.primary-menu .mega-menu-panel .mega-menu-col > a:hover { background: transparent; color: var(--agri-primary); }

	/* Grandchildren stay visible inside the open panel. */
	.primary-menu .mega-menu-panel .sub-menu {
		display: block;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--agri-border);
		border-radius: 0;
		padding: 0 0 0 16px;
		margin: 4px 0 8px 2px;
		background: transparent;
		list-style: none;
	}
	.primary-menu .mega-menu-panel .sub-menu li { border: 0; }
	.primary-menu .mega-menu-panel .sub-menu a {
		padding: 8px 4px;
		font-size: 0.92rem;
		font-weight: 500;
		color: var(--agri-text);
		border-radius: 0;
	}
	.primary-menu .mega-menu-panel .sub-menu a:hover { background: transparent; color: var(--agri-primary); }

	/* CTA column in drawer. */
	.primary-menu .mega-menu-col.mega-cta {
		background: linear-gradient(135deg, var(--agri-primary-dark), var(--agri-primary));
		border-radius: 10px;
		padding: 14px 16px;
		margin: 8px 0;
	}
	.primary-menu .mega-menu-col.mega-cta > a { color: #fff !important; border-bottom-color: rgba(255,255,255,0.25) !important; }
	.primary-menu .mega-menu-col.mega-cta .sub-menu { border-left-color: rgba(255,255,255,0.3); }
	.primary-menu .mega-menu-col.mega-cta .sub-menu a { color: rgba(255, 255, 255, 0.9); }
}

/* ==========================================================================
   TABLETS in the drawer (720–1080px): wider drawer, 2-column mega panels
   ========================================================================== */
@media (min-width: 720px) and (max-width: 1080px) {
	.primary-menu li.open > .mega-menu-panel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px 22px;
	}
	.primary-menu .mega-menu-panel .mega-menu-col { min-width: 0; }
}

/* ==========================================================================
   COMPACT header layout keeps mega menus in accordion mode at every width
   (overrides the desktop full-width panel when .header-layout-compact)
   ========================================================================== */
@media (min-width: 1081px) {
	.header-layout-compact .primary-menu > li.mega-menu > ul.mega-menu-panel {
		position: static;
		display: none;
		grid-template-columns: 1fr;
		gap: 4px;
		width: auto;
		padding: 14px 18px;
		margin: 4px 0 14px;
		border: 0;
		border-radius: 14px;
		box-shadow: none;
		background: var(--agri-cream);
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.header-layout-compact .primary-menu > li.mega-menu.open > ul.mega-menu-panel { display: block; }
	.header-layout-compact .mega-menu-panel .mega-menu-col > a {
		border-bottom: 1px solid var(--agri-border);
		font-size: 0.95rem;
		color: var(--agri-primary-dark);
	}
	.header-layout-compact .mega-menu-panel .sub-menu {
		border-left: 2px solid var(--agri-border);
		padding-left: 16px;
	}
	.header-layout-compact .submenu-toggle { display: inline-flex; }
}