@use "variables";

.is-style-priority-plus-navigation {
	position: relative;

	// Reset any WordPress core border styles that might interfere
	border: none !important;

	// Prevent the nav from expanding beyond its parent when it's a flex/grid
	// child. Without this, min-width: auto causes the nav to grow to fit all
	// items, inflating the JS width calculation on initial load.
	min-width: 0;
	max-width: 100%;

	// Prevent the More button from wrapping to a new line.
	// WordPress is-layout-flex sets flex-wrap: wrap on the nav, which causes
	// the More div (sibling to the UL) to drop below when space is tight.
	&.is-layout-flex {
		flex-wrap: nowrap !important;
	}

	.wp-block-navigation__container {
		flex-wrap: nowrap !important;
		flex-shrink: 1;
		min-width: 0;

		> .wp-block-navigation-item {
			white-space: nowrap;
			flex-shrink: 0;
		}
	}

	.priority-plus-navigation-more {
		flex-shrink: 0;
	}

	.priority-plus-navigation-more-button {
		display: flex;
		align-items: center;
		font-family: var(--priority-plus-navigation--font-family);
		font-size: var(--priority-plus-navigation--font-size);
		font-weight: var(--priority-plus-navigation--font-weight);
		font-style: var(--priority-plus-navigation--font-style);
		color: var(--priority-plus-navigation--color);
		padding: var(--priority-plus-navigation--padding);
		background: var(--priority-plus-navigation--background);
		border-color: var(--priority-plus-navigation--border-color, transparent);
		border-style: var(--priority-plus-navigation--border-style, none);
		border-width: var(--priority-plus-navigation--border-width, 0);
		border-radius: var(--priority-plus-navigation--border-radius, 0);
		transition: background 0.2s ease, color 0.2s ease;
		cursor: pointer;
		outline: none;

		&:hover {
			background: var(--priority-plus-navigation--background-hover);
			color: var(--priority-plus-navigation--color-hover);
		}

		&:focus {
			background: var(--priority-plus-navigation--background-hover);
			color: var(--priority-plus-navigation--color-hover);
		}

		&:focus-visible {
			outline: 2px solid currentcolor;
			outline-offset: -2px;
		}

		.priority-plus-navigation-icon {
			display: inline-flex;
			align-items: center;
			margin-right: -8px;
			line-height: 1;

			svg {
				fill: currentcolor;
				width: 1.25em;
				height: 1.25em;
			}
		}

		&[aria-expanded="true"] {
			.priority-plus-navigation-icon {
				transform: rotate(180deg);
			}
		}
	}

	// --- Dropdown menu ---
	.priority-plus-navigation-dropdown {
		@include variables.dropdown-aliases;

		position: absolute;
		overflow: hidden;
		top: 100%;
		right: 0;
		min-width: 200px;
		background: var(--ppn-dropdown-bg) !important;
		border-top: var(
			--wp--custom--priority-plus-navigation--dropdown--border-top,
			var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
		) !important;
		border-right: var(
			--wp--custom--priority-plus-navigation--dropdown--border-right,
			var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
		) !important;
		border-bottom: var(
			--wp--custom--priority-plus-navigation--dropdown--border-bottom,
			var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
		) !important;
		border-left: var(
			--wp--custom--priority-plus-navigation--dropdown--border-left,
			var(--ppn-dropdown-border-width) var(--ppn-dropdown-border-style) var(--ppn-dropdown-border-color)
		) !important;
		border-radius: var(--ppn-dropdown-radius);
		box-shadow: var(--ppn-dropdown-shadow);
		list-style: none;
		margin: 0;
		padding: 0;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

		&.is-open {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		// --- List items (general before specific) ---
		li {
			margin: 0;
			padding: 0;

			a {
				display: block;
				padding: var(--ppn-dropdown-item-spacing);
				color: var(--ppn-dropdown-item-color);
				font-weight: inherit;
				font-style: inherit;
				text-decoration: none;
				transition: background 0.2s ease, color 0.2s ease;

				&:hover {
					background: var(--ppn-dropdown-item-hover-bg);
					color: var(--ppn-dropdown-item-hover-color);
				}
			}
		}

		// Top-level separator
		> li {
			margin: 0;
			padding: 0;

			&:not(:first-child) {
				border-top-color: var(--ppn-dropdown-sep-color);
				border-top-width: var(--ppn-dropdown-sep-width);
				border-top-style: var(--ppn-dropdown-sep-style);
			}
		}

		// --- Accordion wrapper (link + arrow mode) ---
		.priority-plus-navigation-accordion-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

		.priority-plus-navigation-accordion-link {
			flex: 1;
			padding: var(--ppn-dropdown-item-spacing);
			color: var(--ppn-dropdown-item-color);
			transition: background 0.2s ease, color 0.2s ease;

			&:hover {
				background: var(--ppn-dropdown-item-hover-bg);
				color: var(--ppn-dropdown-item-hover-color);
			}
		}

		.priority-plus-navigation-accordion-toggle-arrow {
			padding: var(--ppn-dropdown-item-spacing);
			background: transparent;
			border: none;
			cursor: pointer;
			font-size: inherit;
			font-family: inherit;
			color: var(--ppn-dropdown-item-color);
			flex-shrink: 0;
			transition: background 0.2s ease, color 0.2s ease;
			outline: none;

			.priority-plus-navigation-accordion-arrow {
				transition: transform 0.2s ease;
				display: inline-block;
			}

			&:hover {
				background: var(--ppn-dropdown-item-hover-bg);
				color: var(--ppn-dropdown-item-hover-color);
			}

			&:focus {
				background: var(--ppn-dropdown-item-hover-bg);
				color: var(--ppn-dropdown-item-hover-color);
			}

			&:focus-visible {
				outline: 2px solid currentcolor;
				outline-offset: -2px;
			}

			&[aria-expanded="true"] .priority-plus-navigation-accordion-arrow {
				transform: rotate(90deg);
			}
		}

		// --- Click mode: entire button is clickable ---
		.priority-plus-navigation-accordion-toggle-full {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: var(--ppn-dropdown-item-spacing);
			background: transparent;
			border: none;
			cursor: pointer;
			font-size: inherit;
			font-family: inherit;
			font-weight: inherit;
			font-style: inherit;
			color: var(--ppn-dropdown-item-color);
			text-align: left;
			transition: background 0.2s ease, color 0.2s ease;
			outline: none;

			.priority-plus-navigation-accordion-text {
				flex: 1;
			}

			/* stylelint-disable no-descending-specificity */
			.priority-plus-navigation-accordion-arrow {
				transition: transform 0.2s ease;
				display: inline-block;
				margin-left: 0.5rem;
			}
			/* stylelint-enable no-descending-specificity */

			&:hover {
				background: var(--ppn-dropdown-item-hover-bg);
				color: var(--ppn-dropdown-item-hover-color);
			}

			&:focus {
				background: var(--ppn-dropdown-item-hover-bg);
				color: var(--ppn-dropdown-item-hover-color);
			}

			&:focus-visible {
				outline: 2px solid currentcolor;
				outline-offset: -2px;
			}

			&[aria-expanded="true"] .priority-plus-navigation-accordion-arrow {
				transform: rotate(90deg);
			}
		}

		// --- Accordion content (submenu) ---
		// All accordion content: base styles, visibility, submenu colors, and indentation.
		.priority-plus-navigation-accordion-content {
			display: none;
			list-style: none;
			margin: 0;
			padding: 0;

			// Nested accordion: transparent background to prevent alpha doubling
			&:where(.priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content) {
				background: transparent;
			}

			&[aria-hidden="true"] {
				display: none !important;
			}

			&.is-open {
				display: block !important;
			}

			// Submenu items: color + indentation grouped per selector to avoid specificity issues
			> li > a {
				color: var(--ppn-dropdown-sub-color);
				padding-left: calc(1rem + var(--ppn-dropdown-indent));

				&:hover {
					background: var(--ppn-dropdown-sub-hover-bg);
					color: var(--ppn-dropdown-sub-hover-color);
				}
			}

			> li > .priority-plus-navigation-accordion-toggle-full {
				color: var(--ppn-dropdown-sub-color);
				padding-left: calc(1rem + var(--ppn-dropdown-indent));

				&:hover,
				&:focus {
					background: var(--ppn-dropdown-sub-hover-bg);
					color: var(--ppn-dropdown-sub-hover-color);
				}
			}

			> li > .priority-plus-navigation-accordion-wrapper {
				> a {
					padding-left: calc(1rem + var(--ppn-dropdown-indent));
				}

				> .priority-plus-navigation-accordion-link {
					color: var(--ppn-dropdown-sub-color);

					&:hover {
						background: var(--ppn-dropdown-sub-hover-bg);
						color: var(--ppn-dropdown-sub-hover-color);
					}
				}

				> .priority-plus-navigation-accordion-toggle-arrow {
					color: var(--ppn-dropdown-sub-color);

					&:hover,
					&:focus {
						background: var(--ppn-dropdown-sub-hover-bg);
						color: var(--ppn-dropdown-sub-hover-color);
					}
				}
			}

			// Multi-level indentation — deeper nesting levels
			/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
			.priority-plus-navigation-accordion-content {
				> li > a,
				> li > .priority-plus-navigation-accordion-wrapper > a,
				> li > .priority-plus-navigation-accordion-toggle-full {
					padding-left: calc(1rem + (var(--ppn-dropdown-indent) * 2));
				}

				.priority-plus-navigation-accordion-content {
					> li > a,
					> li > .priority-plus-navigation-accordion-wrapper > a,
					> li > .priority-plus-navigation-accordion-toggle-full {
						padding-left: calc(1rem + (var(--ppn-dropdown-indent) * 3));
					}

					.priority-plus-navigation-accordion-content {
						> li > a,
						> li > .priority-plus-navigation-accordion-wrapper > a,
						> li > .priority-plus-navigation-accordion-toggle-full {
							padding-left: calc(1rem + (var(--ppn-dropdown-indent) * 4));
						}
					}
				}
			}
			/* stylelint-enable no-descending-specificity, no-duplicate-selectors */
		}

		// First-level background color (after general block so specificity is correct)
		> li > .priority-plus-navigation-accordion-content {
			background: var(--ppn-dropdown-sub-bg);
		}
	}

	&[data-more-hidden="true"] {
		.priority-plus-navigation-more {
			display: none;
		}
	}
}