/* Sticker Nation Mega Menus — frontend
 *
 * Designed for Storefront but works on any theme that wraps wp_nav_menu()
 * output in a positioned ancestor. Uses CSS custom properties (set inline
 * by SNMM_Frontend::inline_css_vars) so colours track the Customizer.
 *
 * Mobile breakpoint is also a CSS variable (--snmm-mobile-bp) so the same
 * setting drives both PHP and CSS.
 */

/* -----------------------------------------------------------
 * Theme compat — override common Storefront / theme rules that
 * break a mega panel rendered inside the main nav <ul>.
 *
 * Storefront's actual rules (verified against style.css):
 *   .main-navigation ul ul {
 *     float: left; position: absolute; top: 100%;
 *     z-index: 99999; left: -9999px;
 *   }
 *   .main-navigation ul li:hover > ul li > ul { left: -9999px }
 *   .main-navigation ul ul { display: block; margin-left: 1.41575em }
 *
 * That's why the panel "appears empty": its <ul> lists are
 * pushed off-screen via `left: -9999px`, not display:none,
 * so the column titles show but the items below them sit at
 * x = -9999px and are invisible.
 *
 * We reset every layout-affecting property the theme sets on
 * nested <ul>s when they're inside a mega panel. Specificity
 * (0,3,1) beats Storefront's worst (.main-navigation ul li:hover>ul)
 * which lands at (0,2,4) once :hover is counted.
 *
 * Also: Storefront paints its own dropdown indicator on
 * .menu-item-has-children > a::before — we suppress that on
 * mega items so only our chevron shows. Some forks inject a
 * <button.dropdown-toggle>; same treatment.
 * --------------------------------------------------------- */
.snmm-menu .snmm-has-mega .snmm-panel ul,
.snmm-menu .snmm-has-mega .snmm-panel ol {
	position: static;
	float: none;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	z-index: auto;
	display: block;
	margin: 0;
	width: auto;
	min-width: 0;
	background: transparent;
	box-shadow: none;
}
.snmm-menu .snmm-has-mega .snmm-panel .snmm-col__cats,
.snmm-menu .snmm-has-mega .snmm-panel .snmm-col__products {
	display: grid;
}
.snmm-menu .snmm-has-mega .snmm-panel li {
	float: none;
	width: auto;
	left: auto;
	position: static;
}
/* Storefront sets `.main-navigation ul ul li a { width: 200px }` to size
 * standard sub-menu items; that hardcoded width makes long link titles
 * wrap inside a 200px box even when the panel column is wider. Reset to
 * auto width with higher specificity (0,3,1) than Storefront's (0,1,4). */
.snmm-menu .snmm-has-mega .snmm-panel a {
	width: auto;
	max-width: none;
}
.snmm-menu .snmm-has-mega > a::before {
	content: none !important;
	display: none !important;
}
.snmm-menu .snmm-has-mega > .dropdown-toggle,
.snmm-menu .snmm-has-mega > button.dropdown-toggle,
.snmm-menu .snmm-has-mega > .menu-item-has-children-toggle {
	display: none !important;
}

/* ----------- panel positioning on the parent <li> ----------- */

.snmm-menu .snmm-has-mega { position: relative; }

/* Mega trigger chevron.
 *
 * Storefront paints its own Font Awesome chevron at
 *   .main-navigation ul.menu > li.menu-item-has-children > a::after
 * specificity (0,3,4). Our chevron must beat that AND zero out the
 * font-related properties Storefront sets (font-family, content) or
 * we get the FA glyph rendering inside our border-square — visually
 * "two arrows".
 *
 * Selector below: .main-navigation .snmm-menu .snmm-has-mega > a[data-snmm-trigger]::after
 * is (0,4,2) — beats Storefront's (0,3,4) on class count.
 */
.main-navigation .snmm-menu .snmm-has-mega > a[data-snmm-trigger]::after,
.snmm-menu .snmm-has-mega > a[data-snmm-trigger]::after {
	content: "" !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin: 0 0 0 0.45em;
	padding: 0;
	border: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.7;
	transition: transform .2s ease;
	float: none;
	line-height: 1;
}
.main-navigation .snmm-menu .snmm-has-mega > a[aria-expanded="true"]::after,
.snmm-menu .snmm-has-mega > a[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
}

/* Suppress chevrons on inner panel anchors — Storefront also paints
 * one on every nested .menu-item-has-children > a. We don't want
 * any in-panel chevrons. */
.snmm-menu .snmm-panel a::before,
.snmm-menu .snmm-panel a::after {
	content: none !important;
	display: none !important;
}

/* ----------- the panel ----------- */

.snmm-panel {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 999;
	background: var(--snmm-bg, #fff);
	color: var(--snmm-text, #333);
	/* Only the bottom corners are rounded — the top edge sits flush against
	 * the nav bar above so the panel reads as a continuation of the header. */
	border-radius: 0 0 var(--snmm-radius, 6px) var(--snmm-radius, 6px);
	box-shadow: var(--snmm-shadow, 0 12px 32px rgba(0,0,0,0.12));
	padding: 1.5rem 1.75rem;
	min-width: 480px;
	max-width: 1280px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.snmm-panel[aria-hidden="false"],
.snmm-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* hidden attribute should not be 'display:none' once JS upgrades it
   (otherwise transition won't run). The script removes the hidden attribute
   on first interaction and toggles is-open instead. */
.snmm-panel[hidden]:not(.is-open) {
	display: none;
}

/* Full-bleed panels can't sit inside the trigger <li>'s positioning
 * context — they'd centre on the trigger, not the viewport, and any
 * trigger that's not at the screen centre would push the leftmost
 * column off-screen. Switch to position: fixed; the JS sets `top`
 * from the trigger's bounding rect when opening, and a scroll/resize
 * listener closes any open panel. */
.snmm-panel--full {
	position: fixed;
	left: 0;
	right: 0;
	width: 100vw;
	max-width: 100vw;
	margin: 0;
	border-radius: 0;
	z-index: 99999;
	transform: translateY(-6px);
}
.snmm-panel--full.is-open {
	transform: translateY(0);
}

.snmm-panel__inner {
	display: grid;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}

.snmm-cols-1 .snmm-panel__inner { grid-template-columns: 1fr; }
.snmm-cols-2 .snmm-panel__inner { grid-template-columns: repeat(2, 1fr); }
.snmm-cols-3 .snmm-panel__inner { grid-template-columns: repeat(3, 1fr); }
.snmm-cols-4 .snmm-panel__inner { grid-template-columns: repeat(4, 1fr); }
.snmm-cols-5 .snmm-panel__inner { grid-template-columns: repeat(5, 1fr); }
.snmm-cols-6 .snmm-panel__inner { grid-template-columns: repeat(6, 1fr); }

/* ----------- columns ----------- */

.snmm-col { min-width: 0; }

/* Span-all-columns block (banner / footer CTA / heading row).
 * Use grid-column: 1 / -1 to fill the entire row regardless of
 * how many columns are configured. Items with this class wrap
 * onto their own row in the grid layout. */
.snmm-col--span {
	grid-column: 1 / -1;
}
/* Visual tweaks for span blocks — banner-style image, centered button. */
.snmm-col--span.snmm-col--image .snmm-col__image,
.snmm-col--span.snmm-col--image .snmm-col__image-link img {
	max-height: 220px;
	width: 100%;
	object-fit: cover;
}
.snmm-col--span.snmm-col--button {
	text-align: center;
}
.snmm-col--span.snmm-col--html {
	font-size: 1rem;
	line-height: 1.6;
}

.snmm-col__title {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--snmm-title-color, var(--snmm-text));
}
.snmm-col__title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.snmm-col__title a:hover { border-bottom-color: currentColor; }

.snmm-col__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.snmm-col__links li { margin: 0; padding: 0; }
.snmm-col__links a {
	display: block;
	padding: 0.35rem 0;
	color: var(--snmm-link-color, var(--snmm-link, var(--snmm-text)));
	text-decoration: none;
	line-height: 1.35;
	border-radius: 4px;
}
.snmm-col__links a:hover,
.snmm-col__links a:focus-visible {
	color: var(--snmm-link-hover, var(--snmm-accent));
	background: rgba(0,0,0,0.03);
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	margin-left: -0.4rem;
	margin-right: -0.4rem;
	outline: none;
}
.snmm-link__title { font-weight: 500; }

/* Inline HTML item inside a Menu Links column — used for <hr>
 * separators, small headings, or any inline snippet between links.
 * No padding so the user's HTML controls spacing exactly. */
.snmm-col__links .snmm-link--html {
	margin: 0.4rem 0;
	padding: 0;
}
.snmm-col__links .snmm-link--html hr {
	margin: 0;
}

/* Sub-link thumbnail / icon — both share the same flex layout. */
.snmm-col__links .snmm-link--has-thumb a,
.snmm-col__links .snmm-link--has-icon a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.snmm-link__thumb {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	object-fit: cover;
}

/* Icon: a tinted square pill with a line-style SVG inside. Hover
 * deepens the tint and shifts the icon to the link's hover colour.
 * Uses color-mix() for a single source of truth: any --snmm-accent
 * change automatically retints the icon background. */
.snmm-link__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	color: var(--snmm-link-hover, var(--snmm-accent));
	background: color-mix(in srgb, var(--snmm-accent, #7f54b3) 10%, transparent);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.snmm-link__icon svg {
	display: block;
}
.snmm-col__links a:hover .snmm-link__icon,
.snmm-col__links a:focus-visible .snmm-link__icon {
	background: color-mix(in srgb, var(--snmm-accent, #7f54b3) 20%, transparent);
	transform: translateX(1px);
}
@supports not (background: color-mix(in srgb, red, blue)) {
	/* Older browsers — fall back to a flat tint. */
	.snmm-link__icon { background: rgba(127, 84, 179, 0.10); }
	.snmm-col__links a:hover .snmm-link__icon { background: rgba(127, 84, 179, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
	.snmm-link__icon { transition: none; }
}

/* Skeleton state for any panel image while it loads. The pulsing
 * gradient sits in the element's background; once the <img> finishes
 * loading its pixels paint over the background so the skeleton
 * disappears naturally. The animation keeps running but is hidden
 * behind opaque image data. */
.snmm-link__thumb,
.snmm-cat__img,
.snmm-product__img,
.snmm-col__image {
	background-color: rgba(0,0,0,0.04);
	background-image: linear-gradient(
		110deg,
		rgba(0,0,0,0.04) 8%,
		rgba(0,0,0,0.08) 18%,
		rgba(0,0,0,0.04) 33%
	);
	background-size: 200% 100%;
	animation: snmm-skeleton 1.4s linear infinite;
}
@keyframes snmm-skeleton {
	0%   { background-position:  100% 0; }
	100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.snmm-link__thumb,
	.snmm-cat__img,
	.snmm-product__img,
	.snmm-col__image {
		animation: none;
	}
}

/* image column */
.snmm-col__image-link { display: block; text-decoration: none; }
.snmm-col__image,
.snmm-col__image-link img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--snmm-radius, 6px) / 2);
	object-fit: cover;
}

/* button column */
.snmm-col__button {
	display: inline-block;
	padding: 0.7rem 1.2rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .15s ease, transform .15s ease;
}
.snmm-col__button:hover { opacity: 0.92; transform: translateY(-1px); }
.snmm-button--primary   { background: var(--snmm-accent); color: #fff; }
.snmm-button--secondary { background: var(--snmm-text);   color: #fff; }
.snmm-button--outline {
	background: transparent;
	color: var(--snmm-accent);
	box-shadow: inset 0 0 0 2px var(--snmm-accent);
}

/* product cats grid */
.snmm-col__cats,
.snmm-col__products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
}
.snmm-col__cats a,
.snmm-col__products a {
	display: block;
	text-decoration: none;
	color: var(--snmm-text);
	text-align: center;
	border-radius: 6px;
	padding: 0.4rem;
	transition: background .15s ease;
}
.snmm-col__cats a:hover,
.snmm-col__products a:hover,
.snmm-col__cats a:focus-visible,
.snmm-col__products a:focus-visible {
	background: rgba(0,0,0,0.04);
	outline: none;
}
.snmm-cat__img,
.snmm-product__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 0.35rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.snmm-cat__name,
.snmm-product__title {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.25;
}
.snmm-product__price {
	display: block;
	font-size: 0.82rem;
	margin-top: 0.15rem;
	color: var(--snmm-accent);
}

.snmm-col__html { font-size: 0.92rem; line-height: 1.5; }
.snmm-col__html img { max-width: 100%; height: auto; border-radius: 4px; }

/* ----------- mobile drawer -----------
 * Note: the @media breakpoint below is the DEFAULT (768px). When the user
 * changes "Mobile breakpoint" in Settings → Mega Menus to something other
 * than 768, SNMM_Frontend::inline_css_vars() emits an override <style> block
 * with the same rules at the configured width.
 *
 * We also kick into mobile mode on any touch-only device regardless of
 * width — a 1024px tablet without a real pointer should not get desktop
 * hover behavior.
 */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
	.snmm-panel,
	.snmm-panel--full {
		position: static;
		width: auto;
		max-width: none;
		min-width: 0;
		max-height: none;
		overflow: visible;
		left: auto;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0.5rem 0 0.5rem 1rem;
		opacity: 1; /* mobile uses height collapse, not opacity */
		pointer-events: auto;
	}
	.snmm-panel[hidden] { display: none; }
	.snmm-panel__inner { grid-template-columns: 1fr; gap: 1rem; }
	.snmm-menu .snmm-has-mega > a[data-snmm-trigger]::after {
		transform: translateY(-2px) rotate(45deg);
	}
	.snmm-menu .snmm-has-mega > a[aria-expanded="true"]::after {
		transform: translateY(2px) rotate(-135deg);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.snmm-panel,
	.snmm-menu .snmm-has-mega > a[data-snmm-trigger]::after {
		transition: none !important;
	}
}

/* Focus styles — visible for keyboard users, suppressed for mouse */
.snmm-menu :focus-visible,
.snmm-panel :focus-visible {
	outline: 2px solid var(--snmm-accent);
	outline-offset: 2px;
	border-radius: 3px;
}