/* =========================================================
   DataFirefly — Mega menu + mobile drawer
   Loaded only on the front-end via inc/enqueue.php.
   Uses the design tokens already defined in theme.css :
     --bg, --bg-2, --card, --ink, --ink-2, --ink-3,
     --line, --amber, --amber-deep
   ========================================================= */

/* ------------------------- Burger button ------------------ */
.df-nav-burger{
	display:none;
	width:42px; height:42px;
	background:transparent; border:1px solid var(--line);
	border-radius:8px; cursor:pointer; padding:0;
	flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.df-nav-burger span{
	display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;
	transition:transform .18s ease, opacity .18s ease;
}
.df-nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.df-nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.df-nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ------------------------- Top-level nav ------------------ */
.df-nav-links{ position:relative }
.df-nav-menu{
	display:flex; align-items:center;
	gap:4px;
	list-style:none; margin:0; padding:0;
}
.df-nav-menu > li{
	position:static; /* let the panel anchor on the wrapping nav */
	margin:0;
}
.df-nav-menu > li > a{
	display:inline-flex; align-items:center; gap:4px;
	padding:8px 12px; border-radius:8px;
	font-size:13.5px; color:var(--ink-2); text-decoration:none;
	transition:background .15s, color .15s;
}
.df-nav-menu > li > a:hover,
.df-nav-menu > li > a:focus-visible,
.df-nav-menu > li.df-has-mega:hover > a,
.df-nav-menu > li.df-has-mega:focus-within > a{
	background:var(--bg-2); color:var(--ink);
}
.df-mega-caret{
	font-size:10px; line-height:1; opacity:.6; margin-left:2px;
	transition:transform .18s ease;
}
.df-nav-menu > li.df-has-mega:hover .df-mega-caret,
.df-nav-menu > li.df-has-mega:focus-within .df-mega-caret{
	transform:rotate(180deg); opacity:1;
}

/* CTA pill ------------------------------------------------- */
.df-nav-cta-item{ margin-left:8px }
.df-nav-cta{
	display:inline-flex !important; align-items:center; gap:6px;
	padding:8px 14px !important;
	font-size:13px;
}

/* ------------------------- Mega panel --------------------- */
.df-mega-panel{
	position:absolute;
	top:100%; left:0; right:0;
	margin-top:8px;
	background:var(--card);
	border:1px solid var(--line);
	border-radius:14px;
	box-shadow:0 18px 40px -10px rgba(20,15,5,.18), 0 6px 12px -6px rgba(20,15,5,.08);
	padding:24px 28px;
	z-index:80;

	opacity:0; visibility:hidden; transform:translateY(-6px);
	transition:opacity .15s ease, transform .18s ease, visibility 0s linear .18s;
}
.df-has-mega:hover > .df-mega-panel,
.df-has-mega:focus-within > .df-mega-panel{
	opacity:1; visibility:visible; transform:translateY(0);
	transition:opacity .15s ease, transform .18s ease, visibility 0s;
}
.df-mega-inner{ max-width:1200px; margin:0 auto }

/* Grid columns -------------------------------------------- */
.df-mega-grid{
	list-style:none; margin:0; padding:0;
	display:grid; gap:28px;
}
.df-mega-cols-2 .df-mega-grid{ grid-template-columns:repeat(2, 1fr) }
.df-mega-cols-3 .df-mega-grid{ grid-template-columns:repeat(3, 1fr) }
.df-mega-cols-4 .df-mega-grid{ grid-template-columns:repeat(4, 1fr) }
.df-mega-col{ list-style:none }

/* Column header ------------------------------------------- */
.df-mega-col-head{
	display:flex; flex-direction:column; gap:2px;
	padding:6px 8px 8px;
	margin:-6px -8px 6px;
	border-radius:8px;
	color:var(--ink); text-decoration:none;
	transition:background .12s ease;
}
.df-mega-col-head:hover{ background:var(--bg-2) }
.df-mega-col-title{
	font-family:'Cormorant Garamond', Georgia, serif;
	font-size:18px; font-weight:600; letter-spacing:-.01em;
	color:var(--ink);
}
.df-mega-col-desc{
	font-size:12px; color:var(--ink-3); line-height:1.4;
}

/* Column links list --------------------------------------- */
.df-mega-col-list{
	list-style:none; margin:8px 0 0; padding:0;
	display:flex; flex-direction:column; gap:1px;
}
.df-mega-col-list li{ margin:0 }
.df-mega-col-list a{
	display:block; padding:6px 8px; border-radius:6px;
	font-size:13px; color:var(--ink-2); text-decoration:none;
	transition:background .12s, color .12s;
}
.df-mega-col-list a:hover{ background:var(--bg-2); color:var(--ink) }

/* Footer banner inside the panel -------------------------- */
.df-mega-foot{
	margin-top:22px; padding-top:18px;
	border-top:1px solid var(--line);
	display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-end;
}
.df-mega-feature-link{
	display:inline-flex; align-items:center; gap:6px;
	padding:8px 14px; border-radius:8px;
	background:var(--bg-2); color:var(--ink);
	font-size:13px; font-weight:500; text-decoration:none;
	transition:background .12s, color .12s;
}
.df-mega-feature-link:hover{ background:var(--ink); color:var(--bg) }

/* Backdrop (mobile drawer) -------------------------------- */
.df-mega-backdrop{
	display:none;
	position:fixed; inset:0;
	background:rgba(20,15,5,.45);
	z-index:70;
}

/* ============================================================
   Mobile drawer (< 1024px)
   ============================================================ */
@media (max-width: 1023.98px) {
	.df-nav-burger{ display:inline-flex; order:-1 }

	/* Hide desktop search inline; account for compact bar. */
	.df-nav-inner{ gap:14px }

	.df-nav-links{
		position:fixed;
		top:0; left:-100%;
		width:min(360px, 92vw); height:100vh; height:100dvh;
		background:var(--card);
		border-right:1px solid var(--line);
		box-shadow:8px 0 24px rgba(20,15,5,.08);
		padding:78px 20px 24px;
		overflow-y:auto;
		z-index:90;
		display:block !important; /* override the desktop hide on shop pages */
		transition:left .26s ease;
	}
	body.admin-bar .df-nav-links{ padding-top:110px }
	.df-nav-links.is-open{ left:0 }

	.df-mega-backdrop[hidden]{ display:none }
	.df-mega-backdrop{ display:block }

	html.df-nav-locked{ overflow:hidden }

	.df-nav-menu{
		flex-direction:column; align-items:stretch; gap:2px;
	}
	.df-nav-menu > li{ width:100% }
	.df-nav-menu > li > a{
		justify-content:space-between;
		padding:14px 12px; font-size:15px;
		border-radius:10px;
	}
	.df-nav-menu > li > a:hover{ background:var(--bg-2) }
	.df-mega-caret{ font-size:12px; opacity:1 }
	.df-has-mega.is-open > a .df-mega-caret{ transform:rotate(180deg) }

	/* Mobile: panel becomes an inline accordion. */
	.df-mega-panel{
		position:static;
		opacity:1; visibility:visible; transform:none;
		background:transparent; border:0; box-shadow:none; padding:0;
		margin:0; border-radius:0;
		max-height:0; overflow:hidden;
		transition:max-height .26s ease;
	}
	.df-has-mega:hover > .df-mega-panel,
	.df-has-mega:focus-within > .df-mega-panel{
		/* Disabled in mobile, only .is-open opens the panel. */
		opacity:1; visibility:visible; transform:none; max-height:0;
	}
	.df-has-mega.is-open > .df-mega-panel{ max-height:1500px }

	.df-mega-inner{ padding:8px 0 16px }
	.df-mega-grid{
		grid-template-columns:1fr !important;
		gap:14px;
	}
	.df-mega-col{ padding:0 6px }
	.df-mega-col-head{ margin:0; padding:8px 6px 4px; border-radius:6px }
	.df-mega-col-title{ font-size:15px; font-family:inherit; font-weight:600 }
	.df-mega-col-desc{ display:none }
	.df-mega-col-list{ margin-top:2px; padding-left:8px }
	.df-mega-col-list a{ padding:8px; font-size:14px }

	.df-mega-foot{
		flex-direction:column; align-items:stretch; gap:8px;
		margin-top:14px; padding-top:14px;
	}
	.df-mega-feature-link{ justify-content:space-between; padding:12px 14px }

	.df-nav-cta-item{ margin-top:14px; margin-left:0 }
	.df-nav-cta{ width:100%; justify-content:center }
}

/* Small admin-bar offset on mobile drawer ------------------ */
@media (max-width: 600px) and (max-width: 1023.98px) {
	body.admin-bar .df-nav-links{ padding-top:120px }
}