/**
 * WP Megamenu Architect - Frontend Styles
 *
 * @package WP_Megamenu_Architect
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* ==========================================================================
	   Blocksy Theme Integration
	   Le variabili ereditano da Blocksy quando disponibili, con fallback
	   ========================================================================== */

	/* Colors - Inherit from Blocksy theme */
	--wpma-primary-color: var(--theme-palette-color-1, #3b82f6);
	--wpma-secondary-color: var(--theme-palette-color-2, #1e40af);
	--wpma-text-color: var(--theme-text-color, #1f2937);
	--wpma-text-light-color: var(--theme-palette-color-5, #6b7280);
	--wpma-border-color: var(--theme-border-color, #e5e7eb);
	--wpma-background-color: var(--dropdown-background-color, var(--theme-palette-color-4, #ffffff));
	--wpma-hover-background: var(--dropdown-background-hover-color, #f9fafb);

	/* Link colors from Blocksy */
	--wpma-link-color: var(--theme-link-initial-color, var(--wpma-text-color));
	--wpma-link-hover-color: var(--theme-link-hover-color, var(--wpma-primary-color));
	--wpma-link-active-color: var(--theme-link-active-color, var(--wpma-primary-color));

	/* Typography - Inherit from Blocksy */
	--wpma-font-family: var(--theme-font-family, inherit);
	--wpma-font-size: var(--theme-font-size, 14px);
	--wpma-font-weight: 500;
	--wpma-line-height: var(--theme-line-height, 1.5);
	--wpma-heading-weight: 600;

	/* Spacing */
	--wpma-spacing-xs: 0.25rem;
	--wpma-spacing-sm: 0.5rem;
	--wpma-spacing-md: 1rem;
	--wpma-spacing-lg: 1.5rem;
	--wpma-spacing-xl: 2rem;

	/* Layout - Inherit from Blocksy */
	--wpma-container-width: var(--theme-container-width, 1290px);
	--wpma-panel-min-width: 600px;
	--wpma-column-gap: 2rem;
	--wpma-row-gap: 0.5rem;

	/* Effects - Inherit from Blocksy */
	--wpma-border-radius: var(--theme-border-radius, 8px);
	--wpma-box-shadow: var(--theme-box-shadow, 0 10px 40px rgba(0, 0, 0, 0.12));
	--wpma-transition-duration: 0.2s;
	--wpma-transition-timing: cubic-bezier(0.455, 0.03, 0.515, 0.955);

	/* Dropdown offset for sticky header compatibility */
	--wpma-dropdown-offset: var(--sticky-state-dropdown-top-offset, var(--dropdown-top-offset, 0));
}

/* ==========================================================================
   Base Megamenu Container
   ========================================================================== */

.wpma-megamenu-container {
	position: relative;
}

.wpma-megamenu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Megamenu Item (Top Level)
   ========================================================================== */

.wpma-megamenu-item {
	position: static; /* Allow panel to span full width */
}

.wpma-megamenu-item > a {
	display: flex;
	align-items: center;
	gap: var(--wpma-spacing-sm);
	font-family: var(--wpma-font-family);
	font-size: var(--wpma-font-size);
	font-weight: var(--wpma-font-weight);
	color: var(--wpma-link-color);
	text-decoration: none;
	transition: color var(--wpma-transition-duration) var(--wpma-transition-timing);
}

.wpma-megamenu-item > a:hover,
.wpma-megamenu-item > a:focus {
	color: var(--wpma-link-hover-color);
}

.wpma-megamenu-item.current-menu-item > a,
.wpma-megamenu-item.current-menu-parent > a,
.wpma-megamenu-item.current-menu-ancestor > a {
	color: var(--wpma-link-active-color);
}

/* ==========================================================================
   Megamenu Panel
   ========================================================================== */

.wpma-megamenu-wrapper {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	min-width: var(--wpma-panel-min-width);
	max-width: var(--wpma-container-width);
	margin: 0 auto;
	margin-top: var(--wpma-dropdown-offset);
	padding: var(--wpma-spacing-xl);
	background: var(--wpma-background-color);
	border-radius: var(--wpma-border-radius);
	box-shadow: var(--wpma-box-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity var(--wpma-transition-duration) var(--wpma-transition-timing),
		visibility var(--wpma-transition-duration) var(--wpma-transition-timing),
		transform var(--wpma-transition-duration) var(--wpma-transition-timing),
		margin var(--wpma-transition-duration) var(--wpma-transition-timing);
	z-index: 1000;
	overflow: hidden;
	box-sizing: border-box;
}

/* Full-width layout */
.wpma-megamenu-container.wpma-full-width .wpma-megamenu-wrapper {
	left: 50%;
	right: auto;
	transform: translateX(-50%) translateY(10px);
	width: 100vw;
	max-width: none;
}

/* Boxed layout */
.wpma-megamenu-container.wpma-boxed .wpma-megamenu-wrapper {
	width: auto;
	min-width: var(--wpma-panel-min-width);
}

/* Show panel on hover/focus */
.wpma-megamenu-item:hover > .sub-menu + .wpma-megamenu-wrapper,
.wpma-megamenu-item:focus-within > .sub-menu + .wpma-megamenu-wrapper,
.wpma-megamenu-item.wpma-open > .sub-menu + .wpma-megamenu-wrapper {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wpma-megamenu-container.wpma-full-width .wpma-megamenu-item:hover > .sub-menu + .wpma-megamenu-wrapper,
.wpma-megamenu-container.wpma-full-width .wpma-megamenu-item:focus-within > .sub-menu + .wpma-megamenu-wrapper,
.wpma-megamenu-container.wpma-full-width .wpma-megamenu-item.wpma-open > .sub-menu + .wpma-megamenu-wrapper {
	transform: translateX(-50%) translateY(0);
}

/* Alternative: show panel based on direct sub-menu visibility */
.wpma-megamenu-item:hover > .wpma-megamenu-wrapper,
.wpma-megamenu-item:focus-within > .wpma-megamenu-wrapper,
.wpma-megamenu-item.wpma-open > .wpma-megamenu-wrapper {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ==========================================================================
   Megamenu Columns
   ========================================================================== */

.wpma-megamenu-panel {
	display: grid !important;
	gap: var(--wpma-column-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	align-items: start;
}

/* Only direct children (columns) should be grid items */
.wpma-megamenu-panel > li {
	display: block !important;
	min-width: 0;
	grid-column: span 1;
}

.wpma-megamenu-panel > .wpma-column-item {
	display: block !important;
	min-width: 0;
	grid-column: span 1;
}

/* CRITICAL: Nested submenus must NOT participate in grid - they stay INSIDE their parent column */
.wpma-megamenu-panel > li > ul,
.wpma-megamenu-panel > li > ul.sub-menu,
.wpma-megamenu-panel .wpma-column-item > .sub-menu,
.wpma-megamenu-panel .wpma-megamenu-column-submenu {
	display: block !important;
	grid-column: unset !important;
	grid-row: unset !important;
	position: static !important;
}

/* Submenu items are block, not grid */
.wpma-megamenu-panel .sub-menu li {
	display: block !important;
	grid-column: unset !important;
}

/* Column configurations - use !important to override theme styles */
.wpma-megamenu-cols-2 {
	grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
}

.wpma-megamenu-cols-3 {
	grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
}

.wpma-megamenu-cols-4 {
	grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
}

.wpma-megamenu-cols-5 {
	grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
	gap: 1.5rem !important;
}

.wpma-megamenu-cols-6 {
	grid-template-columns: repeat(6, minmax(100px, 1fr)) !important;
	gap: 1.25rem !important;
}

/* Individual column styling */
.wpma-column-item {
	list-style: none;
	min-width: 120px; /* Larghezza minima per evitare testo a capo */
}

/* ==========================================================================
   Column Titles (Header di colonna come "By Ritual", "By Category", ecc.)
   Usa la classe CSS "wpma-column-title" nel menu WordPress
   ========================================================================== */

.wpma-column-item > a,
.wpma-column-item > span {
	display: block;
	padding: var(--wpma-spacing-sm) 0;
	font-family: var(--wpma-font-family);
	font-size: var(--wpma-font-size);
	font-weight: var(--wpma-heading-weight);
	color: var(--theme-headings-color, var(--wpma-text-color));
	text-decoration: none;
	margin-bottom: var(--wpma-spacing-md);
	transition: color var(--wpma-transition-duration) var(--wpma-transition-timing);
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Titolo colonna - NON cliccabile (usa classe wpma-column-title) */
.wpma-column-item.wpma-column-title > a,
.wpma-column-item.wpma-column-title > span {
	font-size: calc(var(--wpma-font-size) + 2px);
	font-weight: 600;
	color: var(--theme-headings-color, #1f2937);
	cursor: default;
	pointer-events: none;
	text-transform: none;
	letter-spacing: 0;
}

/* Link header colonna - cliccabile ma stilizzato come titolo */
.wpma-column-item:not(.wpma-column-title) > a:hover,
.wpma-column-item:not(.wpma-column-title) > a:focus {
	color: var(--wpma-link-hover-color);
}

.wpma-column-item.current-menu-item > a {
	color: var(--wpma-link-active-color);
}

/* ==========================================================================
   Submenu Items con Bullet Points (•)
   ========================================================================== */

.wpma-column-item .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Auto Column Break - Colonne con troppe voci si dividono automaticamente
   ========================================================================== */

.wpma-megamenu-panel .wpma-column-item .sub-menu {
	/* Multi-column layout per liste lunghe */
	column-width: 180px; /* Larghezza minima colonna prima di spezzare */
	column-gap: var(--wpma-column-gap, 2rem);
	column-fill: balance; /* Bilancia le altezze tra le colonne */
	max-height: 65vh; /* Altezza massima viewport-based */
}

/* Ogni item del submenu non deve essere spezzato tra colonne */
.wpma-megamenu-panel .wpma-column-item .sub-menu li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Classi per controllare manualmente il comportamento multi-colonna */

/* Forza 2 colonne interne */
.wpma-column-item.wpma-auto-cols-2 .sub-menu {
	column-count: 2;
	column-width: auto;
}

/* Forza 3 colonne interne */
.wpma-column-item.wpma-auto-cols-3 .sub-menu {
	column-count: 3;
	column-width: auto;
}

/* Disabilita multi-column (lista singola lunga) */
.wpma-column-item.wpma-no-auto-cols .sub-menu {
	column-count: auto;
	column-width: auto;
	max-height: none;
}

.wpma-column-item .sub-menu li {
	margin: 0;
	padding: var(--wpma-spacing-xs) 0;
}

.wpma-column-item .sub-menu a {
	display: flex;
	align-items: center;
	gap: var(--wpma-spacing-sm);
	padding: 0;
	font-size: var(--wpma-font-size);
	font-weight: normal;
	color: var(--wpma-text-color);
	text-decoration: none;
	transition: color var(--wpma-transition-duration) var(--wpma-transition-timing);
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Bullet point prima di ogni link */
.wpma-column-item .sub-menu a::before {
	content: "•";
	color: var(--wpma-text-light-color);
	font-size: 1em;
	margin-right: 0.5em;
	flex-shrink: 0;
}

.wpma-column-item .sub-menu a:hover,
.wpma-column-item .sub-menu a:focus {
	color: var(--wpma-link-hover-color);
}

.wpma-column-item .sub-menu a:hover::before {
	color: var(--wpma-link-hover-color);
}

.wpma-column-item .sub-menu .current-menu-item > a {
	color: var(--wpma-link-active-color);
}

.wpma-column-item .sub-menu .current-menu-item > a::before {
	color: var(--wpma-link-active-color);
}

/* ==========================================================================
   Variante senza bullet (aggiungi classe wpma-no-bullets alla colonna)
   ========================================================================== */

.wpma-column-item.wpma-no-bullets .sub-menu a::before {
	display: none;
}

/* ==========================================================================
   Icons
   ========================================================================== */

.wpma-menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	font-size: 1em;
	line-height: 1;
	flex-shrink: 0;
}

/* Dashicons support */
.wpma-menu-icon[class*="dashicons"] {
	font-family: dashicons;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* FontAwesome support */
.wpma-menu-icon[class*="fa-"] {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
}

.wpma-menu-icon[class*="fab-"],
.wpma-menu-icon[class*="fa-brands"] {
	font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands";
}

/* ==========================================================================
   Images
   ========================================================================== */

.wpma-menu-image-wrapper {
	display: inline-block;
	flex-shrink: 0;
	line-height: 0;
}

.wpma-menu-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
	border-radius: 2px;
}

/* Larger images for column headers */
.wpma-column-item > a .wpma-menu-image {
	max-width: 32px;
	max-height: 32px;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus styles */
.wpma-megamenu a:focus {
	outline: 2px solid var(--wpma-primary-color);
	outline-offset: 2px;
}

/* Skip focus outline when using mouse */
.wpma-megamenu a:focus:not(:focus-visible) {
	outline: none;
}

/* Focus-visible for keyboard navigation */
.wpma-megamenu a:focus-visible {
	outline: 2px solid var(--wpma-primary-color);
	outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.wpma-megamenu-wrapper,
	.wpma-megamenu a,
	.wpma-megamenu-item > a {
		transition: none;
	}
}

/* ==========================================================================
   Responsive - Extra Large Desktop (6 colonne necessitano più spazio)
   ========================================================================== */

@media (max-width: 1400px) {
	/* 6 colonne -> 5 colonne (6 colonne richiedono almeno 1400px) */
	.wpma-megamenu-cols-6 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Responsive - Large Desktop
   ========================================================================== */

@media (max-width: 1200px) {
	:root {
		--wpma-column-gap: 1.5rem;
	}

	/* 5-6 colonne -> 4 colonne */
	.wpma-megamenu-cols-5,
	.wpma-megamenu-cols-6 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--wpma-column-gap: 1.25rem;
		--wpma-spacing-xl: 1.25rem;
	}

	/* 4-6 colonne -> 3 colonne */
	.wpma-megamenu-cols-4,
	.wpma-megamenu-cols-5,
	.wpma-megamenu-cols-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wpma-megamenu-wrapper {
		min-width: auto;
		width: calc(100% - 2rem);
		left: 1rem;
		right: 1rem;
	}

	/* Riduci larghezza minima colonna auto-break su tablet */
	.wpma-megamenu-panel .wpma-column-item .sub-menu {
		column-width: 150px;
		max-height: 55vh;
	}
}

/* ==========================================================================
   Responsive - Small Tablet
   ========================================================================== */

@media (max-width: 900px) {
	:root {
		--wpma-column-gap: 1rem;
		--wpma-spacing-xl: 1rem;
	}

	/* 3-6 colonne -> 2 colonne */
	.wpma-megamenu-cols-3,
	.wpma-megamenu-cols-4,
	.wpma-megamenu-cols-5,
	.wpma-megamenu-cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Disabilita auto-column su schermi piccoli */
	.wpma-megamenu-panel .wpma-column-item .sub-menu {
		column-count: 1;
		column-width: auto;
		max-height: none;
	}
}

/* ==========================================================================
   Responsive - Large Phone (pre-mobile)
   ========================================================================== */

@media (max-width: 800px) {
	:root {
		--wpma-column-gap: 0.75rem;
		--wpma-spacing-xl: 0.75rem;
	}

	/* Tutte le configurazioni -> 1 colonna */
	.wpma-megamenu-cols-2,
	.wpma-megamenu-cols-3,
	.wpma-megamenu-cols-4,
	.wpma-megamenu-cols-5,
	.wpma-megamenu-cols-6 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Responsive - Tablet/Mobile (Hide Megamenu)
   Blocksy breakpoint: 999.98px for mobile menu switch
   ========================================================================== */

@media (max-width: 999.98px) {
	/* Hide megamenu styling on tablet/mobile - defer to native mobile menu */
	.wpma-megamenu-wrapper {
		display: none !important;
	}

	/* Reset megamenu item to normal behavior */
	.wpma-megamenu-item {
		position: relative;
	}

	/* Show regular sub-menu on mobile */
	.wpma-megamenu-item > .sub-menu {
		display: block;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		padding: 0;
	}

	/* Reset column styling */
	.wpma-column-item > a {
		border-bottom: none;
		margin-bottom: 0;
		padding: var(--wpma-spacing-sm);
	}

	/* Stack items vertically */
	.wpma-megamenu-panel {
		display: block;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.wpma-megamenu-wrapper {
		display: none !important;
	}
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
	:root {
		--wpma-border-color: currentColor;
		--wpma-box-shadow: 0 0 0 2px currentColor;
	}

	.wpma-megamenu-wrapper {
		border: 2px solid currentColor;
	}

	.wpma-megamenu a:focus {
		outline-width: 3px;
	}
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--wpma-text-color: var(--theme-text-color, #f3f4f6);
		--wpma-text-light-color: var(--theme-palette-color-5, #9ca3af);
		--wpma-border-color: var(--theme-border-color, #374151);
		--wpma-background-color: var(--dropdown-background-color, var(--theme-palette-color-4, #1f2937));
		--wpma-hover-background: var(--dropdown-background-hover-color, #374151);
	}
}

/* Theme override class for dark mode - Blocksy compatibility */
.dark-mode,
[data-theme="dark"],
[data-color-mode="dark"],
[data-color-scheme="dark"] {
	--wpma-text-color: var(--theme-text-color, #f3f4f6);
	--wpma-text-light-color: var(--theme-palette-color-5, #9ca3af);
	--wpma-border-color: var(--theme-border-color, #374151);
	--wpma-background-color: var(--dropdown-background-color, var(--theme-palette-color-4, #1f2937));
	--wpma-hover-background: var(--dropdown-background-hover-color, #374151);
}

/* ==========================================================================
   Blocksy Header Integration
   ========================================================================== */

/* Ensure proper alignment within Blocksy header rows */
[data-row] .wpma-megamenu-container {
	position: static;
}

/* Match Blocksy menu item height */
[class*="header-menu"] .wpma-megamenu-item > a {
	height: var(--menu-item-height, 100%);
	padding: var(--menu-item-padding, 0 calc(var(--menu-items-spacing, 25px) / 2));
}

/* Inherit Blocksy menu spacing */
[class*="header-menu"] .wpma-megamenu {
	gap: var(--menu-items-gap, 0px);
}

/* Position dropdown relative to header container */
#header .wpma-megamenu-wrapper {
	z-index: 11; /* Above Blocksy dropdowns (z-index: 10) */
}