/**
 * Desktop mega menu — panels under the forest nav bar.
 * Visible only at ≥1025px with hover capability (mobile drawer unchanged).
 */

/* —— Panel shell —— */
.hif-header__nav-bar .hif-mega {
	position: static;
}

/* Trigger toggle chevron (gold accent, matches forest-bar link colour) */
.hif-header__nav-bar .hif-mega > a.wp-block-navigation-item__content,
.hif-header__nav-bar .hif-mega > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.hif-mega__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
	transition: transform 0.18s ease;
}

.hif-mega__toggle-svg {
	display: block;
	width: 0.65em;
	height: auto;
}

.hif-header__nav-bar .hif-mega.is-open > a .hif-mega__toggle,
.hif-header__nav-bar .hif-mega:hover > a .hif-mega__toggle,
.hif-header__nav-bar .hif-mega:focus-within > a .hif-mega__toggle {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.hif-mega__toggle {
		transition: none;
	}
}

.hif-header__nav-bar .hif-mega > .hif-mega__panel {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	width: min(1240px, calc(100vw - 48px));
	z-index: 80;
	padding-top: 12px; /* hover bridge so mouse can travel into the panel */
	pointer-events: none;
}

.hif-header__nav-bar .hif-mega > .hif-mega__panel[hidden] {
	display: none !important;
}

@media (hover: hover) and (min-width: 1025px) {
	.hif-header__nav-bar {
		position: relative;
	}

	.hif-header__nav-bar .hif-mega.is-open > .hif-mega__panel,
	.hif-header__nav-bar .hif-mega:focus-within > .hif-mega__panel {
		display: block;
		pointer-events: auto;
	}

	/* CSS hover fallback when JS has not yet marked is-open */
	.hif-header__nav-bar .hif-mega:hover > .hif-mega__panel {
		display: block;
		pointer-events: auto;
	}

	.hif-header__nav-bar .hif-mega:hover > .hif-mega__panel[hidden],
	.hif-header__nav-bar .hif-mega:focus-within > .hif-mega__panel[hidden] {
		display: block !important;
	}
}

.hif-mega__inner {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(200px, 280px);
	gap: 0;
	background: var(--wp--preset--color--cream, #FDF6EC);
	border-radius: var(--wp--custom--radius--card, 16px);
	box-shadow: var(--wp--preset--shadow--card, 0 12px 40px rgba(42, 33, 24, 0.18));
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border, #EAE0D2);
	pointer-events: auto;
}

.hif-mega__panel--feature .hif-mega__inner {
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

/* —— Sidebar —— */
.hif-mega__sidebar {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.25rem 1rem 1.25rem 1.25rem;
	border-right: 1px solid var(--wp--preset--color--border, #EAE0D2);
	background: #FAF4DC;
}

.hif-mega__cats {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hif-mega__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	margin: 0;
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--contrast, #2A2118);
	font: inherit;
	font-weight: 500;
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hif-mega__cat:hover,
.hif-mega__cat:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #C2185B) 10%, transparent);
	outline: none;
}

.hif-mega__cat.is-active {
	background: var(--wp--preset--color--primary, #C2185B);
	color: #fff;
}

.hif-mega__cat-chevron {
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0.7;
}

.hif-mega__delivery {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem .7rem;
	border: 1px solid var(--wp--preset--color--primary, #C2185B);
	border-radius: 10px;
	background: #fff;
	color: var(--wp--preset--color--contrast, #2A2118);
}

.hif-mega__delivery-icon {
	display: inline-flex;
	color: var(--wp--preset--color--primary, #C2185B);
	flex-shrink: 0;
}

.hif-mega__delivery-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.hif-mega__delivery-title {
	font-size: 0.9rem;
	font-weight: 700;
}

.hif-mega__delivery-sub {
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-muted, #6B6155);
}

/* —— Content panes —— */
.hif-mega__content {
	min-width: 0;
	padding: 1.25rem 1.5rem;
	background: #F7F3E4;
}

.hif-mega__pane[hidden] {
	display: none !important;
}

.hif-mega__dishes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1.75rem;
}

.hif-mega__dish-col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.hif-mega__dish {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
}

.hif-mega__dish-body {
	min-width: 0;
}

.hif-mega__dish-title {
	display: block;
	color: var(--wp--preset--color--black, #000) !important;
	font-weight: 400 !important;
    font-size: 14px !important;
	line-height: 1.25;
	text-decoration: none;
	/* color: #000 !important; */
}

.hif-mega__dish-title:hover,
.hif-mega__dish-title:focus-visible {
	/* text-decoration: underline; */
	color: var(--wp--preset--color--primary, #C2185B) !important;
}

.hif-mega__dish-desc {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #2A2118);
	font-weight: 300;
	display: none;
}

.hif-mega__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.25rem;
	padding: 0.4rem 0.9rem;
	border-radius: 6px;
	border: 1.5px solid var(--wp--preset--color--primary, #C2185B);
	background: var(--wp--preset--color--primary, #C2185B);
	color: #fff !important;
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hif-mega__add:hover,
.hif-mega__add:focus-visible {
	background: var(--wp--preset--color--primary-dark, #B1124D);
	border-color: var(--wp--preset--color--primary-dark, #B1124D);
	outline: none;
}

.hif-mega__add.is-added,
.hif-mega__add.added {
	background: #fff;
	color: var(--wp--preset--color--primary, #C2185B) !important;
}

.hif-mega__add--link {
	background: transparent;
	color: var(--wp--preset--color--primary, #C2185B) !important;
}

/* —— Feature panes (Meal Plans / Gifts) —— */
.hif-mega__pane--feature {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.hif-mega__feature-media {
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--border, #EAE0D2);
	aspect-ratio: 4 / 3;
}

.hif-mega__feature-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hif-mega__feature-heading {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem);
	font-weight: 700;
	color: var(--wp--preset--color--primary, #C2185B);
	line-height: 1.2;
}

.hif-mega__feature-desc {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast, #2A2118);
}

.hif-mega__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem 1.25rem;
}

.hif-mega__panel--feature .hif-mega__features {
	grid-template-columns: 1fr;
	gap: 0;
}

.hif-mega__panel--feature .hif-mega__feature {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #EAE0D2);
}

.hif-mega__panel--feature .hif-mega__feature:last-child {
	border-bottom: 0;
}

.hif-mega__feature {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hif-mega__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #C2185B);
	color: #fff;
	flex-shrink: 0;
}

.hif-mega__feature-icon .hif-icon,
.hif-mega__feature-icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.hif-mega__feature-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.hif-mega__feature-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #2A2118);
}

.hif-mega__feature-text {
	font-size: 0.82rem;
	color: var(--wp--preset--color--contrast-muted, #6B6155);
}

/* —— Promo aside —— */
.hif-mega__aside {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--primary-dark, #B1124D);
}

.hif-mega__aside-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.hif-mega__aside-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 0.35rem;
	min-height: 320px;
	height: 90%;
	padding: 1.5rem;
	background: linear-gradient(180deg, transparent 20%, rgba(20, 10, 16, 0.72) 100%);
	color: #fff;
}

.hif-mega__aside-heading {
	margin: 0;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.25;
}

.hif-mega__aside-script {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--script, cursive);
	font-size: 1.45rem;
	color: var(--wp--preset--color--accent, #FFB805);
	line-height: 1.2;
}

.hif-mega__aside-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 1rem;
	border-radius: 6px;
	background: var(--wp--preset--color--cream, #FDF6EC);
	color: var(--wp--preset--color--contrast, #2A2118) !important;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
}

.hif-mega__aside-cta:hover,
.hif-mega__aside-cta:focus-visible {
	background: #fff;
	outline: none;
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
	.hif-mega__cat,
	.hif-mega__add {
		transition: none;
	}
}

/* —— Never show on touch / small screens (belt + suspenders) —— */
@media (max-width: 1024px), (hover: none) {
	.hif-header__nav-bar .hif-mega > .hif-mega__panel,
	.hif-header__nav-bar .hif-mega.is-open > .hif-mega__panel,
	.hif-header__nav-bar .hif-mega:hover > .hif-mega__panel,
	.hif-header__nav-bar .hif-mega:focus-within > .hif-mega__panel {
		display: none !important;
	}
}