/*
 * HealthyHive Mega Menu -- standalone navigation component.
 * Rebuilt from scratch (not a derivative of nav-megamenu.css/js, which
 * have been deleted). BEM naming, one shared padding/type system so both
 * columns sit on the same grid. Brand tokens only (navy/gold/taupe/ivory)
 * -- no new colors invented.
 *
 * Pattern: ONE continuous panel, two columns, plain full-width rows.
 * No per-row cards, no per-row radius/border/shadow -- those all live on
 * the panel only. Rows are transparent by default; the active/hovered
 * row gets an instant (non-animated) background swap. The only thing
 * that animates is the panel opening/closing.
 */

:root{
	--hh-navy:#0F2742;
	--hh-navy-hover:#0A1E33;
	--hh-gold:#C8A96B;
	--hh-gold-deep:#9C7F47;
	--hh-taupe-tint:#F5F1EB;
	--hh-ivory:#F8F6F2;
	--hh-hair:rgba(15,39,66,.08);
	--hh-row-pad-y:20px;
	--hh-row-pad-x:28px;
}

/* ===================== Panel (desktop, >=1024px) ===================== */

.hh-mega-menu{
	position:absolute; top:100%; left:0; margin-top:10px;
	width:640px;
	background:#fff;
	border-radius:16px;
	box-shadow:0 30px 60px -22px rgba(15,39,66,.32);
	overflow:hidden;
	opacity:0; visibility:hidden; transform:translateY(8px);
	transition:opacity .18s ease-out, transform .18s ease-out;
	z-index:50;
}
.hh-mega-menu.is-open{
	opacity:1; visibility:visible; transform:translateY(0);
}

.hh-mega-menu__columns{ display:flex; align-items:stretch; }

.hh-menu-column{ display:flex; flex-direction:column; }
.hh-menu-column--nav{
	flex:0 0 280px;
	border-right:1px solid var(--hh-hair);
	padding:12px 0;
}
.hh-menu-column--sub{
	flex:1 1 auto;
	padding:12px 0;
}

/* ---- left column: category rows ---- */
.hh-category-item{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:var(--hh-row-pad-y) var(--hh-row-pad-x);
	text-decoration:none; cursor:pointer;
	background:transparent;
	border:none; border-radius:0;
}
.hh-category-item__label{
	font-family:inherit; font-size:15px; font-weight:700; line-height:1.4;
	color:var(--hh-navy);
}
.hh-category-item__chevron{
	flex-shrink:0; width:16px; height:16px; stroke:var(--hh-navy); stroke-width:2;
	fill:none; opacity:.55;
}
.hh-category-item--active{ background:var(--hh-navy); }
.hh-category-item--active .hh-category-item__label{ color:#fff; }
.hh-category-item--active .hh-category-item__chevron{ stroke:#fff; opacity:.9; }

/* ---- right column: submenu rows ---- */
.hh-submenu-item{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:var(--hh-row-pad-y) var(--hh-row-pad-x);
	text-decoration:none;
	background:transparent;
}
.hh-submenu-item__label{
	font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.4;
	color:var(--hh-navy);
}
.hh-submenu-item__chevron{
	flex-shrink:0; width:14px; height:14px; stroke:var(--hh-navy); stroke-width:2;
	fill:none; opacity:0;
}
.hh-submenu-item:hover,
.hh-submenu-item:focus-visible{ background:var(--hh-taupe-tint); }
.hh-submenu-item:hover .hh-submenu-item__chevron,
.hh-submenu-item:focus-visible .hh-submenu-item__chevron{ opacity:.6; }

.hh-mega-menu__empty{
	padding:var(--hh-row-pad-y) var(--hh-row-pad-x);
	font-size:14px; color:var(--hh-navy); opacity:.55;
}
.hh-mega-menu__viewall{
	display:flex; align-items:center; gap:8px;
	margin-top:auto;
	padding:16px var(--hh-row-pad-x);
	border-top:1px solid var(--hh-hair);
	font-size:13px; font-weight:700; letter-spacing:.02em;
	color:var(--hh-gold-deep); text-decoration:none;
}

/* Keyboard focus (desktop): visible ring, no other row gets one from a mouse hover */
.hh-category-item:focus-visible,
.hh-submenu-item:focus-visible{
	outline:2px solid var(--hh-gold); outline-offset:-2px;
}

/* trigger wrapper -- purely a positioning context, no visual styling of
   its own so it never fights the theme's own nav item look */
.hh-mega-trigger{ position:relative; }

/* ===================== Accordion (<1024px) ===================== */

@media (max-width:1023.98px){
	.hh-mega-menu{
		position:static; margin-top:0; width:100%;
		border-radius:0; box-shadow:none; overflow:visible;
		opacity:1; visibility:visible; transform:none; transition:none;
		display:none;
	}
	.hh-mega-menu.is-open{ display:block; }

	.hh-mega-menu__columns{ display:block; }
	.hh-menu-column--nav{ flex:none; border-right:none; padding:0; }
	.hh-menu-column--sub{ display:none; } /* right column unused in accordion mode */

	.hh-accordion-item{ border-bottom:1px solid var(--hh-hair); }
	.hh-category-item{ padding:16px var(--hh-row-pad-x); }
	.hh-category-item--active{ background:transparent; }
	.hh-category-item--active .hh-category-item__label{ color:var(--hh-navy); }
	.hh-category-item--active .hh-category-item__chevron{ stroke:var(--hh-navy); transform:rotate(90deg); }
	.hh-category-item__chevron{ opacity:.55; transition:transform .18s ease-out; }

	.hh-accordion-panel{
		max-height:0; overflow:hidden; background:var(--hh-taupe-tint);
		transition:max-height .22s ease-out;
	}
	.hh-accordion-item.is-expanded .hh-accordion-panel{ max-height:600px; }

	.hh-submenu-item{ padding:14px var(--hh-row-pad-x) 14px calc(var(--hh-row-pad-x) + 14px); }
	.hh-submenu-item__chevron{ opacity:.5; }
	.hh-mega-menu__viewall{ margin:0; border-top:none; padding:14px var(--hh-row-pad-x) 14px calc(var(--hh-row-pad-x) + 14px); }
}