/**
 * Navigation Block Styles - Upjau Theme
 *
 * Modern, refined navigation styling for the Upjau plant store.
 * Design direction: Clean, organic, plant-forward with tight spacing.
 * 
 * References: docs/instructions/brand-design-guidelines.md
 */

/* ============================================
   DESIGN TOKENS (from guidelines)
   ============================================ */

.wp-block-navigation {
	/* Spacing */
	--nav-item-gap: var(--wp--preset--spacing--1);
	--nav-link-padding-x: var(--wp--preset--spacing--3);
	--nav-link-padding-y: var(--wp--preset--spacing--2);
	
	/* Typography - 16px for better readability */
	--nav-font-size: var(--wp--preset--font-size--md);
	--nav-font-weight: 500;
	
	/* Transitions (duration-fast from guidelines) */
	--nav-transition: var(--upjau-transition-fast);
	
	/* Border radius (radius-sm from guidelines) */
	--nav-radius: var(--radius-sm);
	--nav-dropdown-radius: var(--radius-md);
	
	/* Shadows (shadow-md from guidelines) */
	--nav-shadow: var(--upjau-shadow-md);
	
	gap: 0;
}

.wp-block-navigation__container {
	gap: var(--wp--style--block-gap, var(--nav-item-gap));
	align-items: center;
}

/* ============================================
   NAVIGATION ITEM LAYOUT
   ============================================ */

.wp-block-navigation-item {
	display: flex;
	align-items: center;
	margin: 0;
	position: relative;
}

/* ============================================
   NAVIGATION LINKS - Items WITHOUT dropdown
   ============================================ */

/* Base styles for all nav links */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--forest);
	font-size: var(--nav-font-size);
	font-weight: var(--nav-font-weight);
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: color var(--nav-transition), background-color var(--nav-transition);
}

/* Items WITHOUT children - link gets the hover background */
.wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content {
	padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
	border-radius: var(--nav-radius);
}

.wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--leaf);
	background-color: var(--wp--preset--color--leaf-50);
}

/* ============================================
   NAVIGATION LINKS - Items WITH dropdown
   (Unified hover zone for text + arrow)
   ============================================ */

/* The parent item creates the unified hover zone */
.wp-block-navigation-item.has-child {
	padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
	border-radius: var(--nav-radius);
	gap: 4px;
	transition: background-color var(--nav-transition);
}

/* Hover on the entire item (text + arrow together) */
.wp-block-navigation-item.has-child:hover,
.wp-block-navigation-item.has-child:focus-within {
	background-color: var(--wp--preset--color--leaf-50);
	z-index: 1000;
}

/* Remove padding from child elements since parent has it */
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
.wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--leaf);
}

/* ============================================
   DROPDOWN TOGGLE (Arrow/Caret)
   ============================================ */

.wp-block-navigation-submenu__toggle,
.wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--forest);
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color var(--nav-transition);
}

.wp-block-navigation-item.has-child:hover .wp-block-navigation-submenu__toggle,
.wp-block-navigation-item.has-child:focus-within .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--leaf);
}

/* Caret icon sizing */
.wp-block-navigation-submenu__toggle svg,
.wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform var(--nav-transition);
}

/* Rotate caret when submenu is expanded (match aria-expanded state) */
.wp-block-navigation-submenu__toggle[aria-expanded="true"] > svg {
	transform: rotate(180deg);
}

/* ============================================
   SUBMENU DROPDOWN
   ============================================ */

.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border: none;
	border-radius: var(--nav-dropdown-radius);
	box-shadow: var(--nav-shadow);
	padding: var(--wp--preset--spacing--1);
	min-width: 200px;
	margin-top: 0;
	z-index: 50;
	
	/* Smooth entrance (duration-fast) */
	animation: dropdownFadeIn var(--upjau-transition-fast);
}

/* Draw submenu border above its contents (prevents visual clipping at corners) */
.wp-block-navigation .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: inherit;
	pointer-events: none;
}

/* Ensure submenus sit above other header elements */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	z-index: 999;
}

/* Desktop: add a small visual gap but keep hover connected */
@media (min-width: 782px) {
	.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
	.wp-block-navigation .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container {
		margin-top: var(--wp--preset--spacing--2) !important;
	}

	.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before,
	.wp-block-navigation .wp-block-page-list > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: calc(-1 * var(--wp--preset--spacing--2));
		left: 0;
		right: 0;
		height: var(--wp--preset--spacing--2);
		background: transparent;
		pointer-events: auto;
	}
}

@keyframes dropdownFadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Submenu items */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--3);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink);
	border-radius: var(--nav-radius);
	transition: all var(--nav-transition);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--leaf-50);
	color: var(--wp--preset--color--forest);
	padding-left: var(--wp--preset--spacing--4); /* Subtle indent on hover */
}

/* Nested submenu positioning */
.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: 100%;
	top: -1px;
	margin-top: 0;
}

/* ============================================
   MOBILE MENU
   ============================================ */

/* Hamburger button */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--forest);
	padding: var(--wp--preset--spacing--2);
	border-radius: var(--radius-md);
	transition: all var(--nav-transition);
}

.wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--leaf);
	background-color: var(--wp--preset--color--leaf-50);
}

/* Mobile overlay - sidebar drawer (CSS-only)
   Core renders the overlay as a full-screen dialog; we keep the dialog semantics
   but style the dialog panel as a left drawer.
*/
.wp-block-navigation__responsive-container.is-menu-open {
	--upjau-mobile-nav-drawer-width: clamp(280px, 86vw, 420px);
	background: var(--upjau-overlay-dark) !important;
	padding: 0 !important;
	overflow: auto !important;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	margin: 0 !important;
	max-width: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	width: var(--upjau-mobile-nav-drawer-width);
	min-height: 100vh;
	background: var(--wp--preset--color--forest);
	box-shadow: var(--upjau-shadow-xl);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 72px var(--wp--preset--spacing--4) var(--wp--preset--spacing--6) !important;
	padding-top: calc(72px + env(safe-area-inset-top)) !important;
	overflow: visible !important;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		animation: upjauDrawerIn var(--upjau-transition-normal);
	}
}

@keyframes upjauDrawerIn {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Core hides submenu icons in the overlay; we need them for toggles */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-icon {
	display: inline-flex !important;
	color: var(--wp--preset--color--white) !important;
}

/* Mobile overlay: left-align and stretch menu width */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-page-list {
	width: 100%;
	align-items: stretch !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: left;
}

/* Non-dropdown items: stretch the link so text doesn't center */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item:not(.has-child) {
	align-items: stretch !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item:not(.has-child)
	> .wp-block-navigation-item__content {
	width: 100%;
}

/* Mobile: ensure dropdown parents lay out as "label | toggle" */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item.has-child {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0 !important;
	border-radius: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item.has-child
	> .wp-block-navigation-item__content {
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-icon {
	flex: 0 0 auto;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item.has-child
	> .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}

/* Full-width separators across label + toggle */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__container
	> .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__container
	> .wp-block-navigation-item:last-child {
	border-bottom: none;
}

/* Mobile menu items - white text */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white) !important;
	padding: var(--wp--preset--spacing--3) 0 !important;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--sunflower) !important;
}

/* Mobile submenu toggle - ensure it's visible and clickable */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon {
	cursor: pointer;
	z-index: 10;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Mobile submenu container styling (overlay) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding-left: var(--wp--preset--spacing--4) !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	position: relative !important;
	left: 0 !important;
	width: 100% !important;
}

/* Mobile overlay: never render the desktop submenu border overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::after {
	content: none;
}

/* Mobile submenus - HIDDEN by default (only when a toggle exists) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Mobile submenus - SHOW when expanded */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: block !important;
	height: auto !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	text-transform: none;
	color: rgba(255, 255, 255, 0.85) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile overlay submenu item interaction state (avoid light desktop dropdown hover styles) */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:active,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus-visible {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: var(--wp--preset--color--sunflower) !important;
	padding-left: var(--wp--preset--spacing--3) !important;
}

/* Mobile Safari/Chrome: remove default tap highlight overlay */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Mobile drawer: remove the global green focus outline (it reads like a border) */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.has-child:focus-within {
	outline: none !important;
	outline-offset: 0 !important;
}

/* Mobile close button - white */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white) !important;
	padding: var(--wp--preset--spacing--2);
	border-radius: var(--radius-md);
	transition: all var(--nav-transition);
	top: var(--wp--preset--spacing--3);
	right: var(--wp--preset--spacing--3);
	top: calc(var(--wp--preset--spacing--3) + env(safe-area-inset-top));
}

.wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--sunflower) !important;
	background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   ACCESSIBILITY (per guidelines)
   ============================================ */

/* Focus ring: 2px leaf outline with 2px offset */
.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation-submenu__toggle:focus-visible {
	outline: var(--upjau-focus-outline-width) solid var(--upjau-focus-outline-color);
	outline-offset: var(--upjau-focus-outline-offset);
	border-radius: var(--nav-radius);
}

/* Focus on parent item for dropdown items */
.wp-block-navigation-item.has-child:focus-within {
	outline: var(--upjau-focus-outline-width) solid var(--upjau-focus-outline-color);
	outline-offset: var(--upjau-focus-outline-offset);
}

/* Remove default link underlines */
.wp-block-navigation a {
	text-decoration: none;
}

/* ============================================
   RESET MARGINS
   ============================================ */

.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-navigation-item {
	margin: 0;
}